### Basic Hotkey Usage

Source: https://github.com/box/box-ui-elements/blob/master/src/components/hotkeys/Hotkeys.md

This example demonstrates the basic setup for triggering the help modal by typing '?'. Ensure a base HotkeyLayer is present in your application hierarchy for hotkeys to function.

```jsx
/*
    NOTE: please see the HotkeyFriendlyModal example for code
*/
<div>
    Try typing "?" to trigger the help modal.
</div>
```

--------------------------------

### Unified Share Modal Base Example (React)

Source: https://github.com/box/box-ui-elements/blob/master/src/features/unified-share-modal/README.md

This example demonstrates the basic setup for the Unified Share Modal. It includes initializing the modal's state, defining contact data, and setting up event handlers for closing the modal and fetching initial data. Extend this for different initial loads or to demonstrate various interactions.

```javascript
const Button = require('box-ui-elements/es/components/button').default;

// Base Example. Extend for different initial loads, or to demonstrate different interactions
class USMExample extends React.Component {
    constructor() {
        super();

        this.setInitialState();

        this.contacts = [
            { id: 0, collabID: 0, name: 'Jackie', email: 'j@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Owner', userID: '0', profileURL: 'https://foo.bar' },
            { id: 1, collabID: 1, name: 'Jeff', email: 'jt@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Viewer', userID: '1', },
            { id: 2, collabID: 2, name: 'David', email: 'dt@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '2', },
            { id: 3, collabID: 3, name: 'Yang', email: 'yz@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '3', },
            { id: 4, collabID: 4, name: 'Yong', email: 'ysu@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '4', },
            { id: 5, collabID: 5, name: 'Will', email: 'wy@example.com', type: 'pending', hasCustomAvatar: false, translatedRole: 'Editor', userID: '5', },
            { id: 6, collabID: 6, name: 'Dave', email: 'd@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '6', },
            { id: 7, collabID: 7, name: 'Ke', email: 'k@external.com', isExternalUser: true, type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '7', },
            { id: 8, collabID: 8, name: 'Wenbo', email: 'w@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '8', },
            { id: 11, collabID: 11, name: 'Supersupersupersuperreallyreallyreallylongfirstname incrediblyspectacularlylonglastname', email: 'Supersupersupersuperreallyreallyreallyincrediblyspectacularlylongemail@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '11', },
            { /* example group contact */
                    id: 14,
                    collabID: 14,
                    type: 'group',
                    name: 'my group',
                    hasCustomAvatar: false,
                    translatedRole: 'Viewer',
                    userID: null,
            },
        ];

        this.closeModal = this.closeModal.bind(this);
        this.fakeRequest = this.fakeRequest.bind(this);
        this.getInitialData = this.getInitialData.bind(this);
    }

    setInitialState() {
        return this.state = {
            isOpen: false,
            item: {
                bannerPolicy: {
                    body: 'test',
                },
                classification: 'internal',
                grantedPermissions: {
                    itemShare: true
                },
                hideCollaborators: false,
                id: 12345,
                name: 'My Example Folder',
                type: 'folder',
                typedID: 'd_12345'

            },
            collaboratorsList: {
                collaborators: [],
            },
            selectorOptions: [],
            sharedLink: this.setDefaultSharedLinkState(),
            submitting: false
        };
    }

    setDefaultSharedLinkState() {
        return this.defaultSharedLinkState = {
            accessLevel: '',
            allowedAccessLevels: {},
            canChangeAccessLevel: true,
            enterpriseName: '',
            expirationTimestamp: null,
            isDownloadSettingAvailable: true,
            isNewSharedLink: false,
            permissionLevel: '',
            url: '',
        };
    }

    closeModal() {
        this.setState({
            isOpen: false,
            sharedLink: this.setDefaultSharedLinkState(),
            collaboratorsList: {
                collaborators: [],
            },
        });
    }

    getInitialData() {
        const { canRemoveCollaborators } = this.props;
        const initialPromise = this.fakeRequest();
        const fetchCollaborators = new Promise(resolved => {
            setTimeout(() => {
                const collaborators = this.contacts.slice();

                const collaboratorsList = {
                    collaborators: this.contacts.map(contact => {
                        // convert the existing contact entries to compatible collaborator entries 
                        const isExternalCollab = contact.isExternalUser;
                        delete contact.isExternalUser;
                        contact.isExternalCollab = isExternalCollab;
                        if (isExternalCollab) {
                            contact.expiration = {
                                executeAt: "November 27, 2022",
                            }
                        }

                        if (canRemoveCollaborators) {

```

--------------------------------

### Render New Folder Modal Example

Source: https://github.com/box/box-ui-elements/blob/master/src/features/content-explorer/new-folder-modal/README.md

Demonstrates how to render the New Folder Modal component using its example implementation. Ensure the examples module is correctly imported.

```javascript
const NewFolderModalExamples = require('examples').NewFolderModalExamples;

<NewFolderModalExamples />
```

--------------------------------

### USM Example Component Configuration

Source: https://github.com/box/box-ui-elements/blob/master/src/features/unified-share-modal/README.md

Configuration for the USMExample component, including event handlers for sending invites and shared links, and initial state setup.

```javascript
sendInvites={
                        () => this.fakeRequest().then(() => {
                            this.closeModal();
                        })
                    }
                    sendInvitesError={''}
                    sendSharedLink={ ({ emails, emailMessage }) => this.fakeRequest().then(() => {
                        this.closeModal();
                        console.log(`Sent invite to ${emails} with message "${emailMessage}"`);
                    })}
                    sendSharedLinkError={''}
                    sharedLink={ this.state.sharedLink }
                    showCalloutForUser={true}
                    showUpgradeOptions
                    submitting={ this.state.submitting }
                    suggestedCollaborators={{
                        '2': { id: 2, userScore: '.1', name: 'David', email: 'dt@example.com', },
                        '5': { id: 5, userScore: '0.2', name: 'Will', email: 'wy@example.com', },
                        '1': { id: 1, userScore: '0.5', name: 'Jeff', email: 'jt@example.com', },
                        '3': { id: 3, userScore: '2', name: 'Yang', email: 'yz@example.com', }
                    }}
                    trackingProps={ { 
                        inviteCollabsEmailTracking: {}, 
                        sharedLinkEmailTracking: {}, 
                        sharedLinkTracking: {}, 
                        inviteCollabTracking: {}, 
                        modalTracking: {}, 
                        collaboratorListTracking: {}, 
                    } }
                    canRemoveCollaborators={this.props.canRemoveCollaborators}
                    onRemoveCollaborator={this.props.onRemoveCollaborator}
                /> }
                <Button
                    onClick={ () =>
                        this.setState({
                            isOpen: true,
                        }) }
                >
                    {this.props.buttonText}
                </Button>
            </div>
        )
    }
}
```

--------------------------------

### Render SecurityCloudGameExamples

Source: https://github.com/box/box-ui-elements/blob/master/src/features/security-cloud-game/README.md

Example of how to render the SecurityCloudGameExamples component. Ensure the 'examples' module is correctly required.

```javascript
const SecurityCloudGameExamples = require('examples').SecurityCloudGameExamples;

<SecurityCloudGameExamples />
```

--------------------------------

### Context Menu with Submenu Example

Source: https://github.com/box/box-ui-elements/blob/master/src/components/context-menu/README.md

Shows how to use a Context Menu that includes a submenu. This example renders a pre-defined example component.

```javascript
const Example = require('examples').ContextMenuWithSubmenuWithBoundariesElementExample;

<Example/>
```

--------------------------------

### Simple Context Menu Example

Source: https://github.com/box/box-ui-elements/blob/master/src/components/context-menu/README.md

Demonstrates a basic Context Menu with a target div and a simple menu structure. It uses require for imports as is common in markdown examples.

```javascript
// @NOTE: You can only use require instead of import in markdown.
const Menu = require('../menu').Menu;
const MenuItem = require('../menu').MenuItem;

<ContextMenu>
    <div className="context-menu-example-target">
        Target Component - right click me
    </div>
    <Menu>
        <MenuItem>
            View Profile
        </MenuItem>
        <MenuItem>
            Help
        </MenuItem>
    </Menu>
</ContextMenu>
```

--------------------------------

### Basic Form with Various Input Types

Source: https://github.com/box/box-ui-elements/blob/master/src/components/form-elements/form/README.md

This example shows a comprehensive form setup using FormElement, including text inputs, a select dropdown, a toggle controlling a textarea, and custom validation.

```javascript
const Select = require('box-ui-elements/es/components/select').default;
const Toggle = require('box-ui-elements/es/components/toggle').default;
const Button = require('box-ui-elements/es/components/button').default;

const customValidFn = function customFn(value) {
    if (value !== 'box') {
        return {
            code: 'notbox',
            message: 'value is not box',
        };
    }
    return null;
};

const [state, setState] = React.useState({
    formData: {
        showtextareatoggle: '',
    },
    formValidityState: {},
});

<FormElement
    onChange={ formData => {
        setState(prevState => ({ ...prevState, formValidityState: {}, formData }));
    } }
    onValidSubmit={ () => {
        // On a server validation error, set formValidityState to
        // push error states to child inputs
        setState(prevState => ({
            ...prevState,
            formValidityState: {
                username: {
                    code: 'usernametaken',
                    message: 'Username already taken.',
                },
            },
        }));
    } }
    onInvalidSubmit={ formValidityState =>
        console.log(formValidityState) }
    formValidityState={ state.formValidityState }
>
    <div>
        <TextInputElement
            name="username"
            label="Username"
            placeholder="swagmaster6"
            type="text"
            isRequired
        />
    </div>
    <div>
        <TextInputElement
            name="email"
            label="Email Address"
            placeholder="user@example.com"
            type="email"
        />
    </div>
    <div>
        <TextInputElement
            label="Must Say Box"
            name="customValidationFunc"
            placeholder="Not Box"
            type="text"
            validation={ customValidFn }
        />
    </div>

    <Select name="albumselect" label="Album">
        <option value={ 1 }>Illmatic</option>
        <option value={ 2 }>The Marshall Mathers LP</option>
        <option value={ 3 }>All Eyez on Me</option>
        <option value={ 4 }>Ready To Die</option>
        <option value={ 5 }>Enter the Wu-Tang</option>
        <option value={ 6 }>The Eminem Show</option>
        <option value={ 7 }>The Chronic</option>
        <option value={ 8 }>Straight Outta Compton</option>
        <option value={ 9 }>Reasonable Doubt</option>
    </Select>

    <div>
        <div>
            <Toggle
                name="showtextareatoggle"
                id="showtextareatoggle"
                label="Show TextArea"
                isOn={
                    state.formData
                        .showtextareatoggle === 'on'
                }
            />
        </div>
        {state.formData.showtextareatoggle === 'on'
            ? <TextAreaElement
                    name="textarea"
                    label="Your story"
                    placeholder="Once upon a time"
                />
            : null}
    </div>

    <Button type="submit">Submit</Button>
</FormElement>
```

--------------------------------

### IconsExample Integration

Source: https://github.com/box/box-ui-elements/blob/master/src/icons/two-toned/README.md

Example of integrating multiple icons using the IconsExample component.

```javascript
const icons = [
    // ... other icon definitions
];

<IconsExample icons={icons} />;
```

--------------------------------

### Example Usage of Icons

Source: https://github.com/box/box-ui-elements/blob/master/src/icons/general/README.md

Demonstrates how to render a collection of icons using the IconsExample component. Ensure the 'icons' array is properly defined.

```javascript
<IconsExample icons={icons} />;
```

--------------------------------

### Complex Flyout Example

Source: https://github.com/box/box-ui-elements/blob/master/src/components/flyout/Flyout.md

Demonstrates a more complex Flyout setup with custom class names, offset positioning, and integrated form elements like TextArea and TextInput within the overlay. Includes action buttons.

```jsx
<Flyout className="amsterdam-survey-overlay" offset="0 0">
    <PlainButton className="amsterdam-survey-button">
        <IconHelp />
    </PlainButton>
    <Overlay>
        <div>
            <TextArea name="textarea" label="Provide Feedback" />
        </div>
        <div>
            <TextInput
                name="email"
                label="Email Address"
                placeholder="user@example.com"
                type="email"
            />
        </div>
        <div className="icon-menu-container">
            <PrimaryButton>Submit</PrimaryButton>
            <Button>Close</Button>
        </div>
    </Overlay>
</Flyout>
```

--------------------------------

### Import and Render State Icons

Source: https://github.com/box/box-ui-elements/blob/master/src/icons/states/README.md

Demonstrates how to import a collection of state icons and pass them to an example component for rendering. This includes examples of icons that accept a 'color' prop.

```jsx
const IconsExample = require('../../../examples/src/IconsExample').default;

const icons = [
    {
        name: 'AccessStatsEmptyState',
        component: require('./AccessStatsEmptyState').default,
    },
    {
        name: 'ActivityFeedEmptyState',
        component: require('./ActivityFeedEmptyState').default,
    },
    {
        name: 'CollaboratorsEmptyState',
        component: require('./CollaboratorsEmptyState').default,
    },
    {
        name: 'CollectionSidebarEmptyState',
        component: require('./CollectionSidebarEmptyState').default,
    },
    {
        name: 'CongratsPartyPeopleState',
        component: require('./CongratsPartyPeopleState').default,
    },
    {
        name: 'EnvelopeTrophyState',
        component: require('./EnvelopeTrophyState').default,
    },
    {
        name: 'ErrorEmptyState',
        component: require('./ErrorEmptyState').default,
    },
    {
        name: 'FavoritesEmptyState',
        component: require('./FavoritesEmptyState').default,
    },
    {
        name: 'FeedEmptyState',
        component: require('./FeedEmptyState').default,
    },
    {
        name: 'FolderEmptyState',
        component: require('./FolderEmptyState').default,
    },
    {
        name: 'LocationErrorState',
        component: () => {
            const LocationErrorState = require('./LocationErrorState').default;
            return (
                <div>
                    <LocationErrorState/>
                    <LocationErrorState color="#222" />
                </div>
            )
        },
    },
    {
        name: 'MetadataEmptyState',
        component: require('./MetadataEmptyState').default,
    },
    {
        name: 'MultiSelectState',
        component: require('./MultiSelectState').default,
    },
    {
        name: 'NoNotificationState',
        component: () => {
            const NoNotificationState = require('./NoNotificationState').default;
            return (
                <div>
                    <NoNotificationState/>
                    <NoNotificationState color="#222" />
                </div>
            )
        },
    },
    {
        name: 'NotFoundState',
        component: require('./NotFoundState').default,
    },
    {
        name: 'NotificationErrorState',
        component: () => {
            const NotificationErrorState = require('./NotificationErrorState').default;
            return (
                <div>
                    <NotificationErrorState/>
                    <NotificationErrorState color="#222" />
                </div>
            )
        },
    },
    {
        name: 'RecentsEmptyState',
        component: require('./RecentsEmptyState').default,
    },
    {
        name: 'SandboxesEmptyState',
        component: require('./SandboxesEmptyState').default,
    },
    {
        name: 'SandboxesInterstitialState',
        component: require('./SandboxesInterstitialState').default,
    },
    {
        name: 'SearchEmptyState',
        component: require('./SearchEmptyState').default,
    },
    {
        name: 'SecurityBlockedState',
        component: require('./SecurityBlockedState').default,
    },
    {
        name: 'SelectedItemsEmptyState',
        component: require('./SelectedItemsEmptyState').default,
    },
    {
        name: 'SetDefaultAppState',
        component: require('./SetDefaultAppState').default,
    },
    {
        name: 'SharedLinkErrorState',
        component: require('./SharedLinkErrorState').default,
    },
    {
        name: 'SyncEmptyState',
        component: require('./SyncEmptyState').default,
    },
    {
        name: 'TaskEmptyState',
        component: require('./TaskEmptyState').default,
    },
    {
        name: 'TrashEmptyState',
        component: require('./TrashEmptyState').default,
    },
    {
        name: 'UpdatesEmptyState',
        component: require('./UpdatesEmptyState').default,
    },
    {
        name: 'UploadEmptyState',
        component: require('./UploadEmptyState').default,
    },
    {
        name: 'UploadFilePaywallState',
        component: require('./UploadFilePaywallState').default,
    },
    {
        name: 'UploadStartState',
        component: require('./UploadStartState').default,
    },
    {
        name: 'UploadSuccessState',
        component: require('./UploadSuccessState').default,
    },
    {
        name: 'UsersEmptyState',
        component: require('./UsersEmptyState').default,
    },
];

<IconsExample icons={icons} />;
```

--------------------------------

### Render DraftJSMentionSelector Examples

Source: https://github.com/box/box-ui-elements/blob/master/src/components/form-elements/draft-js-mention-selector/README.md

Use this component to render examples of the DraftJSMentionSelector. Ensure the examples module is correctly required.

```javascript
const DraftJSMentionSelectorExamples = require('examples').DraftJSMentionSelectorExamples;

<DraftJSMentionSelectorExamples />
```

--------------------------------

### Render Metadata Instance Editor

Source: https://github.com/box/box-ui-elements/blob/master/src/features/metadata-instance-editor/README.md

Import and render the MetadataExamples component to display the metadata instance editor. The border is for example purposes only.

```javascript
const MetadataExamples = require('examples').MetadataExamples;

<MetadataExamples />
```

--------------------------------

### Icon Component Setup

Source: https://github.com/box/box-ui-elements/blob/master/src/icons/general/README.md

Demonstrates how to import and set up various icon components for use in React applications. It shows the structure for defining an icon with its name, component, and documentation.

```jsx
const IconsExample = require('../../../examples/src/IconsExample').default;
const iconPropsDocumentation = require('../../../examples/src/IconsExampleIconDocs').default;

const icons = [
    {
        name: 'IconAccepted',
        component: require('./IconAccepted').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconAccessStats',
        component: require('./IconAccessStats').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconAdd',
        component: require('./IconAdd').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconAddMetadataEmptyState',
        component: require('./IconAddMetadataEmptyState').default,
        propsDocumentation: () => (
`
className?: string,
color?: string,
/** A string describing the icon if it's not purely decorative for accessibility */
title?: string | Element<any>,
width?: number,
`
        ),
    },
    {
        name: 'IconAddTags',
        component: require('./IconAddTags').default,
        propsDocumentation: () => (
`
className?: string,
color?: string,
height?: number,
strokeWidth?: number,
/** A text-only string describing the icon if it's not purely decorative for accessibility */
title?: string | React.Element<any>,
width?: number,
`
        ),
    },
    {
        name: 'IconAddThin',
        component: require('./IconAddThin').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconAdvancedFilters',
        component: require('./IconAdvancedFilters').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconAlert',
        component: require('./IconAlert').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconAlertBlank',
        component: require('./IconAlertBlank').default,
        propsDocumentation: () => (
`
className?: string,
height?: number,
/** A text-only string describing the icon if it's not purely decorative for accessibility */
title?: string | React.Element<any>,
width?: number,
`
        ),
    },
    {
        name: 'IconAlertCircle',
        component: () => {
            const IconAlertCircle = require('./IconAlertCircle').default;
            return (
                <div style={{ backgroundColor: '#333' }}>
                    <IconAlertCircle />
                </div>
            );
        },
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconAlertDefault',
        component: require('./IconAlertDefault').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconAlignLeft',
        component: require('./IconAlignLeft').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconAllFiles',
        component: require('./IconAllFiles').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconAnyTask',
        component: require('./IconAnyTask').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconApps',
        component: require('./IconApps').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconAutomation',
        component: () => {
            const IconAutomation = require('./IconAutomation').default;
            return (
                <IconAutomation color={'#000'} />
            );
        },
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconBarGraph',
        component: require('./IconBarGraph').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconBell',
        component: () => {
            const IconBell = require('./IconBell').default;
            return (
                <div style={{ backgroundColor: '#333' }}>
                    <IconBell />
                </div>
            );
        },
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconBell2',
        component: () => {
            const IconBell2 = require('./IconBell2').default;
            return (
                <>
                    <IconBell2 color="#000" />
                    <IconBell2 color="#000" isFilled />
                </>
            );
        },
        propsDocumentation: () => (
`
className?: string,
color?: string,
/** Should this icon be filled, or just an outline */
height?: number,
isFilled?: boolean,
/** A text-only string describing the icon if it's not purely decorative for accessibility */
title?: string | React.Element<any>,
width?: number,
`
        ),
    },
    {
        name: 'IconBilling',
        component: require('./IconBilling').default,
        propsDocumentation: iconPropsDocumentation,
    },
    {
        name: 'IconBox3DCenter',
        component: require('./IconBox3DCenter').default,
        propsDocumentation: iconPropsDocumentation,
    },
];
```

--------------------------------

### NotificationsWrapper Example Usage

Source: https://github.com/box/box-ui-elements/blob/master/src/components/notification/NotificationsWrapper.md

This example demonstrates how to use the NotificationsWrapper component. It assumes that a NotificationsWrapperExample component is available, which likely handles the integration with application-specific notification logic.

```javascript
const NotificationsWrapperExample = require('examples').NotificationsWrapperExample;

<NotificationsWrapperExample />
```

--------------------------------

### Render Presence Component

Source: https://github.com/box/box-ui-elements/blob/master/src/features/presence/Presence.md

This example shows how to render the Presence component with a list of collaborators and configuration options. Ensure the collaborators array and callback functions are defined.

```javascript
const collaborators = [
    {
        avatarUrl: '',
        id: '1',
        name: 'A User',
        interactedAt: Date.now(),
        isActive: true
    },
    {
        avatarUrl: '',
        id: '2',
        name: 'B User',
        interactedAt: 1501300384000,
        interactionType: 'user.comment_create'
    },
    {
        avatarUrl: '',
        id: '3',
        name: 'C User',
        interactedAt: 1502216436000,
        interactionType: 'user.item_upload'
    },
    {
        avatarUrl: '',
        id: '4',
        name: 'D User',
        interactedAt: 1501527327000,
        interactionType: 'user.item_preview'
    },
    {
        avatarUrl: '',
        id: '5',
        name: 'E User',
        interactedAt: 1502217560000,
        interactionType: 'user.item_preview'
    }
];

const getLinkCallback = () => {};
const inviteCallback = () => {};
const avatarAttr = { 'data-resin-target': 'avatar' };
const containerAttr = { 'data-resin-feature': 'presence' };

<div style={ {"height": "300px"} }>
    <Presence
        collaborators={ collaborators }
        maxDisplayedAvatars={ 3 }
        getLinkCallback={ getLinkCallback }
        inviteCallback={ inviteCallback }
        avatarAttributes={ avatarAttr }
        containerAttributes={ containerAttr }
      />
</div>
```

--------------------------------

### Alert ModalDialog Example

Source: https://github.com/box/box-ui-elements/blob/master/src/components/modal/ModalActions.md

Demonstrates how to use the ModalDialog component to display an alert with custom actions.

```html
<ModalDialog title="Alert ModalDialog" type="alert">
    This is the alert message. It will automatically be wrapped in a paragraph tag.
    <ModalActions>
        <Button>Cancel</Button>
        <PrimaryButton>Okay</PrimaryButton>
    </ModalActions>
</ModalDialog>
```

--------------------------------

### Basic MultiSelectField Usage

Source: https://github.com/box/box-ui-elements/blob/master/src/components/select-field/MultiSelectField.md

Demonstrates the fundamental setup for the MultiSelectField component with options and state management.

```javascript
const [state, setState] = React.useState({ selectedValues: [2, 3] });

const options = [
    { displayText: 'Option 1', value: 1 },
    { displayText: 'Option 2', value: 2 },
    { displayText: 'Option 3', value: 3 },
];

const handleChange = selectedOptions => {
    setState(prevState => ({
        ...prevState,
        selectedValues: selectedOptions.map(option => option.value),
    }));
};

<MultiSelectField
    onChange={ handleChange }
    options={ options }
    placeholder="Choose something"
    selectedValues={ state.selectedValues }
/>
```

--------------------------------

### Simple Dropdown Menu Example

Source: https://github.com/box/box-ui-elements/blob/master/src/components/dropdown-menu/README.md

Demonstrates a basic dropdown menu with various menu item types including disabled options and a link item. Requires specific imports for menu components.

```javascript
// @NOTE: You can only use require instead of import in markdown.
const Menu = require('../menu').Menu;
const MenuItem = require('../menu').MenuItem;
const MenuLinkItem = require('../menu').MenuLinkItem;
const MenuSeparator = require('../menu').MenuSeparator;
const MenuToggle = require('./MenuToggle').default;

function generateClickHandler(message) {
    return event => {
        event.preventDefault();

        console.log(`${message} menu option selected`);
    };
}
<DropdownMenu onMenuOpen={ () => { console.log('menu opened'); } }>
    <PlainButton
        className="dropdown-menu-example-button"
        type="button"
    >
        <MenuToggle>
            <Avatar id="123" name="Jay Tee" />
        </MenuToggle>
    </PlainButton>
    <Menu>
        <MenuItem onClick={ generateClickHandler('View Profile') }>
            View Profile
        </MenuItem>
        <MenuItem onClick={ generateClickHandler('Help') }>
            Help
        </MenuItem>
        <MenuItem
            onClick={ generateClickHandler('Should Not Fire This Handler') }
            isDisabled
        >
            Disabled Option
        </MenuItem>
        <MenuSeparator />
        <MenuLinkItem>
            <Link
                href="/logout-example-link"
                onClick={ generateClickHandler('Log Out') }
            >
                Log Out
            </Link>
        </MenuLinkItem>
    </Menu>
</DropdownMenu>
```

--------------------------------

### Basic Menu Example

Source: https://github.com/box/box-ui-elements/blob/master/src/components/menu/Menu.md

Renders a simple menu with various item types including standard menu items, a separator, a section header, and a link item.

```javascript
const MenuItem = require('box-ui-elements/es/components/menu').MenuItem;
const MenuSeparator = require('box-ui-elements/es/components/menu')
  .MenuSeparator;
const MenuLinkItem = require('box-ui-elements/es/components/menu').MenuLinkItem;
const MenuSectionHeader = require('box-ui-elements/es/components/menu')
  .MenuSectionHeader;

<Menu>
  <MenuItem>View Profile</MenuItem>
  <MenuItem showRadar>Help</MenuItem>
  <MenuSeparator />
  <MenuSectionHeader>Menu Section</MenuSectionHeader>
  <MenuLinkItem>
    <Link href="/#">Awesome Link</Link>
  </MenuLinkItem>
</Menu>
```

--------------------------------

### PopperComponent Examples

Source: https://github.com/box/box-ui-elements/blob/master/src/components/popper/README.md

Demonstrates various placements and auto-placement of the PopperComponent. Ensure the parent container has relative positioning for correct behavior.

```javascript
const flexCenter = { display: 'flex', alignItems: 'center', justifyContent: 'center' };
const containerStyles = { marginTop: '120px' };
const referenceStyles = { ...flexCenter, border: "1px solid black", width: '200px', height: '100px' };
const popperStyles = { ...flexCenter, width: '100px', height: '50px', backgroundColor: '#4e4e4e', color: '#fff' };

<React.Fragment>
    <div>
        <Label>Auto placement</Label>
        <div style={{position: 'relative'}}>
            <PopperComponent isOpen>
                <div style={referenceStyles}>Reference Element</div>
                <div style={popperStyles}>I'm a popper</div>
            </PopperComponent>
        </div>
    </div>

    <div style={containerStyles}>
        <Label>bottom-end</Label>
        <div style={{position: 'relative'}}>
            <PopperComponent isOpen placement="bottom-end">
                <div style={referenceStyles}>Reference Element</div>
                <div style={popperStyles}>I'm a popper</div>
            </PopperComponent>
        </div>
    </div>

    <div style={containerStyles}>
        <Label>top-end</Label>
        <div style={{position: 'relative'}}>
            <PopperComponent isOpen placement="top-end">
                <div style={referenceStyles}>Reference Element</div>
                <div style={popperStyles}>I'm a popper</div>
            </PopperComponent>
        </div>
    </div>
</React.Fragment>
```

--------------------------------

### Selectable Table Example

Source: https://github.com/box/box-ui-elements/blob/master/src/components/table/Table.md

Use the `makeSelectable` HOC to enable row selection. This requires a `HotkeyLayer` to be present in the component tree above the selectable table.

```javascript
const SelectableTableExamples = require('examples').SelectableTableExamples;

<SelectableTableExamples />
```

--------------------------------

### Render Annotation Icons

Source: https://github.com/box/box-ui-elements/blob/master/src/icons/annotations/README.md

Example of how to import and render a list of annotation icons using the IconsExample component. Ensure the IconsExample component and individual icon components are correctly imported.

```jsx
const IconsExample = require('../../../examples/src/IconsExample').default;

const icons = [
    {
        name: 'IconDrawAnnotation',
        component: require('./IconDrawAnnotation').default,
    },
    {
        name: 'IconHighlightAnnotation',
        component: require('./IconHighlightAnnotation').default,
    },
    {
        name: 'IconHighlightCommentAnnotation',
        component: require('./IconHighlightCommentAnnotation').default,
    },
    {
        name: 'IconPointAnnotation',
        component: require('./IconPointAnnotation').default,
    },
];

<IconsExample icons={icons} />;
```

--------------------------------

### USM Example: Initial State

Source: https://github.com/box/box-ui-elements/blob/master/src/features/unified-share-modal/README.md

Renders the Unified Share Modal in its default state with some collaborators pre-loaded. Use this to show the modal's basic appearance.

```javascript
<USMExample buttonText="Open USM Modal" />
```

--------------------------------

### File Invite Collab Example

Source: https://github.com/box/box-ui-elements/blob/master/src/features/invite-collaborators-modal/README.md

Renders the Invite Collaborators Modal for a file. Requires `React` and `box-ui-elements` components. The modal can be opened by clicking the 'File Invite Collab' button.

```javascript
const Button = require('box-ui-elements/es/components/button').default;

const [state, setState] = React.useState({ isOpen: false });

const closeModal = () => {
    setState(prevState => ({
        ...prevState,
        isOpen: false,
    }))

    return Promise.resolve();
};

const contacts = [
    { id: 0, name: 'Jackie', email: 'j@example.com', type: 'user' },
    { id: 1, name: 'Jeff', email: 'jt@example.com', type: 'user' },
    { id: 2, name: 'David', email: 'dt@example.com', type: 'user' },
    { id: 3, name: 'Yang', email: 'yz@example.com', type: 'user' },
    { id: 4, name: 'Yong', email: 'ysu@example.com', type: 'user' },
    { id: 5, name: 'Will', email: 'wy@example.com', type: 'user' },
    { id: 6, name: 'Dave', email: 'd@example.com', type: 'user' },
    { id: 7, name: 'Ke', email: 'k@example.com', type: 'user' },
    { id: 8, name: 'Wenbo', email: 'w@example.com', type: 'user' },
    { id: 9, name: 'Engineers', type: 'group' },
    { id: 10, name: 'Ballers', type: 'group' },
    { id: 11, name: 'Supersupersupersuperreallyreallyreallylongfirstname incrediblyspectacularlylonglastname', email: 'Supersupersupersuperreallyreallyreallyincrediblyspectacularlylongemail@example.com', type: 'user' },
];

<div>
    <InviteCollaboratorsModal
        collaborationRestrictionWarning="Collaboration invitations can only be sent to people within Box Corporate"
        contacts={ contacts }
        isOpen={ state.isOpen }
        itemName="My Example File"
        itemType="file"
        itemTypedID="12345"
        onRequestClose={ closeModal }
        sendInvites={ closeModal }
    />
    <Button
        onClick={ () => setState(prevState => ({ ...prevState, isOpen: true })) }
    >
        File Invite Collab
    </Button>
</div>

```

--------------------------------

### Dynamic Tab View Example

Source: https://github.com/box/box-ui-elements/blob/master/src/components/tab-view/README.md

Demonstrates how to create a TabView with dynamic tabs. Ensure the Tab component is imported correctly. The defaultSelectedIndex prop sets the initially active tab.

```javascript
const Tab = require('./Tab').default;

<TabView defaultSelectedIndex={ 7 } isDynamic={true}>
    <Tab title="Item with very long name 1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean enim eros, ultrices at risus vel, mollis venenatis massa. Ut tincidunt venenatis turpis. Ut lacinia tellus eu mauris luctus rhoncus. Curabitur bibendum orci ac sem ultricies, in vulputate lectus sodales. Duis eleifend consequat dictum. Vestibulum et ligula urna. Vivamus dignissim bibendum laoreet. Nunc dictum, felis nec suscipit porta, justo mauris cursus quam, vel interdum ex dui et orci. Suspendisse ac risus augue. Mauris condimentum eu lectus quis venenatis.
    </Tab>
    <Tab title="Item with another very long name 2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue mi mi, et consequat nisi finibus nec. Aliquam eget efficitur dolor. Sed elit libero, euismod ac orci nec, convallis lobortis augue. Praesent commodo bibendum dui venenatis lobortis. In finibus molestie libero, sed euismod massa sodales fringilla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed faucibus magna vel vulputate interdum. Ut fermentum gravida lorem vitae aliquet. Aenean placerat gravida eleifend.
    </Tab>
    <Tab title="Item with another very very long name 3">
        Quisque molestie pharetra aliquet. Nunc ac tempus lacus. Nulla tincidunt metus sed quam finibus, sed mollis sem vestibulum. Maecenas sapien est, maximus vel maximus at, vestibulum quis sem. Vestibulum ut tortor eget tellus luctus pretium. In hac habitasse platea dictumst. Nam ac tellus nec dui scelerisque pulvinar. Curabitur dignissim nunc nulla, eget fringilla sem condimentum quis. Sed nec lectus erat. Integer ut vehicula enim, in scelerisque dolor. Sed pharetra metus sit amet urna posuere, maximus sollicitudin lacus mattis. Nunc placerat ullamcorper est ut auctor.
    </Tab>
    <Tab title="Item with another very very very long name 4">
        Proin vitae orci ac erat efficitur ornare. Aliquam non tincidunt neque. Aenean sollicitudin nibh at nulla facilisis luctus. Nam euismod purus in nulla dapibus ullamcorper eu vitae enim. Aenean eget nisi at enim interdum sollicitudin ut et libero. Morbi volutpat fringilla purus nec euismod. Morbi massa leo, aliquam ut nisl at, consectetur tristique massa. Nunc et libero quam. Donec viverra nisl sed urna mollis, ac euismod urna suscipit. Aliquam ultricies vitae nulla ac venenatis. Sed rutrum leo in purus lacinia pellentesque. Phasellus dictum ex a ultrices ornare.
    </Tab>
    <Tab title="Item 5">
        Aliquam in ullamcorper nisl. Proin condimentum ante eget venenatis euismod. Aliquam congue facilisis ligula nec egestas. Cras hendrerit placerat dui sit amet pellentesque. Donec et risus et massa gravida pretium a nec nulla. Sed mollis ligula varius egestas ultricies. In consequat mauris dapibus odio convallis congue. Nullam mauris nisi, vehicula non turpis quis, pulvinar elementum mi. Duis eget consectetur velit, ullamcorper porttitor enim. Nulla vel suscipit risus. Mauris imperdiet justo odio, quis auctor magna condimentum sit amet.
    </Tab>
    <Tab title="Item 6">
        Mauris non eleifend tellus, non luctus enim. Phasellus scelerisque, lorem in commodo vulputate, metus nisl hendrerit justo, vel consequat diam est a felis. Suspendisse mollis pretium ante quis fermentum. Nam porttitor turpis id nisl gravida malesuada. Proin commodo velit est, lobortis viverra metus interdum ac. Sed molestie gravida imperdiet. Nullam nec eros commodo, malesuada eros eget, venenatis purus. Nulla varius nulla eget neque ullamcorper, nec eleifend sapien bibendum. Donec urna enim, dapibus in cursus feugiat, hendrerit pellentesque diam. Duis in tortor mi. Suspendisse potenti. Etiam imperdiet, justo et luctus interdum, dui purus blandit justo, et gravida nulla tellus non turpis. Nullam varius dui vitae nibh condimentum, eget varius turpis sagittis. Nam ut sapien tincidunt, posuere tellus quis, imperdiet leo. Nam feugiat semper ultrices. Nulla placerat risus eleifend cursus dapibus.
    </Tab>
    <Tab title="Item 7">
        Nullam sapien diam, molestie non malesuada ut, congue vel magna. Maecenas malesuada nisi ligula, hendrerit eleifend turpis mattis quis. Nunc vitae condimentum neque. Mauris dui ex, facilisis id risus at, efficitur sodales urna. Ut cursus neque sed lacinia bibendum. Mauris eget sem vel enim pellentesque aliquam et volutpat nisl. Phasellus ac pharetra ante. Sed sit amet turpis justo. Ut varius, ipsum eu mattis malesuada, mauris enim scelerisque turpis, eu tempor nunc arcu id tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacus sem, molestie ut dignissim eget, sollicitudin in arcu. Donec non vestibulum magna.
    </Tab>
    <Tab title="Item 8">

```

--------------------------------

### Folder Invite Collab Example

Source: https://github.com/box/box-ui-elements/blob/master/src/features/invite-collaborators-modal/README.md

Renders the Invite Collaborators Modal for a folder. Requires `React` and `box-ui-elements` components. The modal can be opened by clicking the 'Folder Invite Collab' button.

```javascript
const Button = require('box-ui-elements/es/components/button').default;

const [state, setState] = React.useState({ isOpen: false });

const closeModal = () => {
    setState(prevState => ({
        ...prevState,
        isOpen: false,
    }))

    return Promise.resolve();
};

const contacts = [
    { id: 0, name: 'Jackie', email: 'j@example.com', type: 'user' },
    { id: 1, name: 'Jeff', email: 'jt@example.com', type: 'user' },
    { id: 2, name: 'David', email: 'dt@example.com', type: 'user' },
    { id: 3, name: 'Yang', email: 'yz@example.com', type: 'user' },
    { id: 4, name: 'Yong', email: 'ysu@example.com', type: 'user' },
    { id: 5, name: 'Will', email: 'wy@example.com', type: 'user' },
    { id: 6, name: 'Dave', email: 'd@example.com', type: 'user' },
    { id: 7, name: 'Ke', email: 'k@example.com', type: 'user' },
    { id: 8, name: 'Wenbo', email: 'w@example.com', type: 'user' },
    { id: 9, name: 'Engineers', type: 'group' },
    { id: 10, name: 'Ballers', type: 'group' },
    { id: 11, name: 'Supersupersupersuperreallyreallyreallylongfirstname incrediblyspectacularlylonglastname', email: 'Supersupersupersuperreallyreallyreallyincrediblyspectacularlylongemail@example.com', type: 'user' },
];

<div>
    <InviteCollaboratorsModal
        collaborationRestrictionWarning="Collaboration invitations can only be sent to people within Box Corporate"
        contacts={ contacts }
        defaultPersonalMessage="I'd like to invite you to collaborate on this item!"
        isOpen={ state.isOpen }
        isEligibleForReferAFriendProgram
        itemName="My Example Folder"
        itemType="folder"
        itemTypedID="12345"
        onRequestClose={ closeModal }
        sendInvites={ closeModal }
        showUpgradeOptions
        inviteePermissions={
            [
                {value: 'Editor', text: 'Editor'},
                {value: 'Owner', text: 'Owner'},
                {value: 'Uploader', text: 'Uploader'},
            ]
        }
    />
    <Button
        onClick={ () => setState(prevState => ({ ...prevState, isOpen: true })) }
    >
        Folder Invite Collab
    </Button>
</div>

```

--------------------------------

### Displaying All Available Folder Icons

Source: https://github.com/box/box-ui-elements/blob/master/src/icons/folder/README.md

This snippet demonstrates how to render a collection of different folder icons using the IconsExample component. It defines an array of icon configurations, each specifying the icon's name and its corresponding component.

```jsx
const IconsExample = require('../../../examples/src/IconsExample').default;

const icons = [
    {
        name: 'FolderShared32',
        component: require('../../icon/content/FolderShared32').default,
    },
    {
        name: 'FolderExternal32',
        component: require('../../icon/content/FolderExternal32').default,
    },
    {
        name: 'FolderPersonal32',
        component: require('../../icon/content/FolderPersonal32').default,
    },
    {
        name: 'IconSmallFolder',
        component: require('./IconSmallFolder').default,
    },
];

<IconsExample icons={icons} />;
```