@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

package/dist/docs/api/v6/components/drawer/react

@@ -0,0 +1,142 @@
+## Examples
+
+### Basic
+
+
+import DrawerBasic from "./DrawerBasic.tsx?raw"
+
+<LiveExample src={DrawerBasic} />
+
+### Panel at end
+
+
+import DrawerPanelEnd from "./DrawerPanelEnd.tsx?raw"
+
+<LiveExample src={DrawerPanelEnd} />
+
+### Panel at start
+
+
+import DrawerPanelStart from "./DrawerPanelStart.tsx?raw"
+
+<LiveExample src={DrawerPanelStart} />
+
+### Panel on bottom
+
+
+import DrawerPanelBottom from "./DrawerPanelBottom.tsx?raw"
+
+<LiveExample src={DrawerPanelBottom} />
+
+### Basic inline
+
+
+import DrawerBasicInline from "./DrawerBasicInline.tsx?raw"
+
+<LiveExample src={DrawerBasicInline} />
+
+### Inline panel at end
+
+
+import DrawerInlinePanelEnd from "./DrawerInlinePanelEnd.tsx?raw"
+
+<LiveExample src={DrawerInlinePanelEnd} />
+
+### Inline panel at start
+
+
+import DrawerInlinePanelStart from "./DrawerInlinePanelStart.tsx?raw"
+
+<LiveExample src={DrawerInlinePanelStart} />
+
+### Stacked content body elements
+
+
+import DrawerStackedContentBodyElements from "./DrawerStackedContentBodyElements.tsx?raw"
+
+<LiveExample src={DrawerStackedContentBodyElements} />
+
+### Modified content padding
+
+
+import DrawerModifiedContentPadding from "./DrawerModifiedContentPadding.tsx?raw"
+
+<LiveExample src={DrawerModifiedContentPadding} />
+
+### Modified panel padding
+
+
+import DrawerModifiedPanelPadding from "./DrawerModifiedPanelPadding.tsx?raw"
+
+<LiveExample src={DrawerModifiedPanelPadding} />
+
+### Additional section above drawer content
+
+
+import DrawerAdditionalSectionAboveContent from "./DrawerAdditionalSectionAboveContent.tsx?raw"
+
+<LiveExample src={DrawerAdditionalSectionAboveContent} />
+
+### Static drawer
+
+**Note:** For mobile viewports, all drawer variants behave the same way. At the `md` breakpoint, or where `.pf-m-static{-on-[lg, xl, 2xl]}` is applied, the `static drawer` variant’s `close button` is automatically hidden because the drawer panel doesn’t close by design.
+
+
+import DrawerStatic from "./DrawerStatic.tsx?raw"
+
+<LiveExample src={DrawerStatic} />
+
+### Breakpoint
+
+
+import DrawerBreakpoint from "./DrawerBreakpoint.tsx?raw"
+
+<LiveExample src={DrawerBreakpoint} />
+
+### Resizable at end
+
+
+import DrawerResizableAtEnd from "./DrawerResizableAtEnd.tsx?raw"
+
+<LiveExample src={DrawerResizableAtEnd} />
+
+### Resizable at start
+
+
+import DrawerResizableAtStart from "./DrawerResizableAtStart.tsx?raw"
+
+<LiveExample src={DrawerResizableAtStart} />
+
+### Resizable on bottom
+
+
+import DrawerResizableOnBottom from "./DrawerResizableOnBottom.tsx?raw"
+
+<LiveExample src={DrawerResizableOnBottom} />
+
+### Resizable on inline
+
+
+import DrawerResizableOnInline from "./DrawerResizableOnInline.tsx?raw"
+
+<LiveExample src={DrawerResizableOnInline} />
+
+### Panel with secondary background
+
+
+import DrawerSecondaryBackground from "./DrawerSecondaryBackground.tsx?raw"
+
+<LiveExample src={DrawerSecondaryBackground} />
+
+### With focus trap
+
+When a [focus trap](/accessibility/product-development-guide#trapping-focus) is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.
+
+To enable and customize a focus trap on a drawer panel, apply the `focusTrap` property to the `<DrawerPanelContent>` component. Enabling a focus trap with `focusTrap.enabled` will also automatically place focus on the first focusable element when the drawer panel expands, and return focus to the previously focused element when it collapses.
+
+To customize which element receives focus when the drawer panel expands, use the `focusTrap.elementToFocusOnExpand` property.
+
+
+import DrawerFocusTrap from "./DrawerFocusTrap.tsx?raw"
+
+<LiveExample src={DrawerFocusTrap} />

package/dist/docs/api/v6/components/dropdown/react

@@ -0,0 +1,48 @@
+## Examples
+
+`Dropdown` builds off of the Menu component suite to wrap commonly used properties and functions for a dropdown menu. See the [Menu documentation](/components/menus/menu) for a full list of properties that may be passed through `Dropdown` to further customize the dropdown menu, or the [custom menu examples](/components/menus/custom-menus) for additional examples of fully functional menus.
+
+### Basic dropdowns
+
+Basic dropdowns present users with a menu of items upon clicking a dropdown toggle.
+
+A `<Dropdown>` uses a [menu toggle](/components/menus/menu-toggle), which is passed to the `toggle` property, as well as a `<DropdownList>` with multiple `<DropdownItem>` components. To allow a dropdown to change the open state of the menu, pass the `isOpen` property into the `onOpenChange` callback.
+
+The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:
+
+- Use the `isDisabled` property to disable an item.
+- Use the `onClick` property to trigger a callback for an action.
+
+This example also uses a `<Divider>` which passes in `key=”separator”` to split the menu into 2 sections with a horizontal line.
+
+
+import DropdownBasic from "./DropdownBasic.tsx?raw"
+
+<LiveExample src={DropdownBasic} />
+
+### With kebab toggle
+
+To style a dropdown menu's toggle with a kebab icon, pass a "plain" `<MenuToggle>` to the `toggle` property. When there isn't enough space for a labeled button, a kebab icon can be used to toggle the dropdown menu open or closed.
+
+
+import DropdownWithKebabToggle from "./DropdownWithKebabToggle.tsx?raw"
+
+<LiveExample src={DropdownWithKebabToggle} />
+
+### With groups of items
+
+To group sets of related dropdown items together, use a `<DropdownGroup>`. When more than 1 `<DropdownGroup>` is created in a menu, use the `label` and `labelHeadingLevel` properties to assign a name and heading level to each group.
+
+
+import DropdownWithGroups from "./DropdownWithGroups.tsx?raw"
+
+<LiveExample src={DropdownWithGroups} />
+
+### With item descriptions
+
+To provide users with more context about a `<DropdownItem>`, pass a short message to `description` property. As shown in the example below, an item's description will appear below its label.
+
+
+import DropdownWithDescriptions from "./DropdownWithDescriptions.tsx?raw"
+
+<LiveExample src={DropdownWithDescriptions} />

package/dist/docs/api/v6/components/dual-list-selector/html

@@ -0,0 +1,110 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Available item selected
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Multiple available items selected
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Chosen item
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Chosen item selected
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Tree view
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Tree view with chosen and disabled options
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Draggable
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+## Documentation
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-live` | `[element with live text]` | To give screen reader users live feedback about what's happening during interaction with the dual list selector, both during drag and drop interactions and keyboard interactions. **Highly Recommended** |
+| `aria-labelledby="[id of .pf-v6-c-dual-list-selector__status-text]` | `.pf-v6-c-dual-list-selector__list [ul]` | Gives the list an accessible name. |
+| `role="listbox or tree or group"` | `.pf-v6-c-dual-list-selector__list [ul]` | Indicates the list is single, a tree, or a subgroup within the tree. |
+| `aria-multiselectable="true"` | `.pf-v6-c-dual-list-selector__list [ul]` | Indicates the list is multiselectable. |
+| `aria-activedescendant=""` | `.pf-v6-c-dual-list-selector__list [ul]` | Indicates the list has clickable children. |
+| `role="option or treeitem"` | `.pf-v6-c-dual-list-selector__list-item [li]` | Indicates whether the item is part of a tree. |
+| `aria-expanded="true"`      | `.pf-v6-c-dual-list-selector__list-item [li]` | Indicates a treeitem is expanded. |
+
+### Usage
+
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-dual-list-selector` | `<div>` | Initiates the dual list selector component. **Required** |
+| `.pf-v6-c-dual-list-selector__pane` | `<div>` | Initiates a dual list selector pane. **Required** |
+| `.pf-v6-c-dual-list-selector__header` | `<div>` | Initiates a dual list selector pane header. **Required** |
+| `.pf-v6-c-dual-list-selector__title` | `<div>` | Initiates a dual list selector pane title. **Required** |
+| `.pf-v6-c-dual-list-selector__title-text` | `<div>` | Initiates a dual list selector pane title text. **Required** |
+| `.pf-v6-c-dual-list-selector__tools` | `<div>` | Initiates a dual list selector tools. **Required** |
+| `.pf-v6-c-dual-list-selector__filter` | `<div>` | Initiates a dual list selector pane filter. **Required** |
+| `.pf-v6-c-dual-list-selector__actions` | `<div>` | Initiates a dual list selector pane actions. |
+| `.pf-v6-c-dual-list-selector__actions-item` | `<div>` | Initiates a dual list selector pane actions item. |
+| `.pf-v6-c-dual-list-selector__status` | `<div>` | Initiates a dual list selector pane selected status. **Required** |
+| `.pf-v6-c-dual-list-selector__status-text` | `<span>` | Initiates a dual list selector pane selected status text. **Required** |
+| `.pf-v6-c-dual-list-selector__menu` | `<div>` | Initiates a dual list selector pane menu container. **Required** |
+| `.pf-v6-c-dual-list-selector__list` | `<ul>` | Initiates a dual list selector pane menu list. **Required** |
+| `.pf-v6-c-dual-list-selector__list-item` | `<li>` | Initiates a dual list selector pane menu list item. **Required** |
+| `.pf-v6-c-dual-list-selector__list-item-row` | `<div>` | Initiates a dual list selector pane menu list item row. **Required** |
+| `.pf-v6-c-dual-list-selector__draggable` | `<div>` | Initiates a dual list selector pane draggable element. |
+| `.pf-v6-c-dual-list-selector__item` | `<span>`, `<div>` | Initiates a dual list selector pane menu item. **Required** |
+| `.pf-v6-c-dual-list-selector__item-main` | `<span>` | Initiates a dual list selector pane menu item main container. **Required** |
+| `.pf-v6-c-dual-list-selector__item-check` | `<span>` | Initiates the dual list selector item check. |
+| `.pf-v6-c-dual-list-selector__item-count` | `<span>` | Initiates the dual list selector item count. |
+| `.pf-v6-c-dual-list-selector__item-toggle-icon` | `<span>` | Initiates the dual list selector item toggle icon. |
+| `.pf-v6-c-dual-list-selector__item-toggle` | `<button>` | Initiates the dual list selector item toggle. |
+| `.pf-v6-c-dual-list-selector__item-text` | `<span>` | Initiates a dual list selector pane menu item text. **Required** |
+| `.pf-v6-c-dual-list-selector__controls` | `<div>` | Initiates the dual list selector controls. **Required** |
+| `.pf-v6-c-dual-list-selector__controls-item` | `<div>` | Initiates the dual list selector controls item. **Required** |
+| `.pf-m-available` | `.pf-v6-c-dual-list-selector__pane` | Defines a pane as the available list. |
+| `.pf-m-chosen` | `.pf-v6-c-dual-list-selector__pane` | Defines a pane as the chosen list. |
+| `.pf-m-drag-over` | `.pf-v6-c-dual-list-selector__list` | Modifies the dual list selector list to indicate that a draggable item is being dragged over the list. |
+| `.pf-m-ghost-row` | `.pf-v6-c-dual-list-selector__list-item-row` | Modifies the list item main to be a ghost row. |
+| `.pf-m-selected` | `.pf-v6-c-dual-list-selector__list-item-row` | Modifies the menu item for the selected state. |
+| `.pf-m-check` | `.pf-v6-c-dual-list-selector__list-item-row` | Indicates that an item is selectable with a checkbox. |
+| `.pf-m-expandable` | `.pf-v6-c-dual-list-selector__list-item` | Indicates that an item is expandable. |
+| `.pf-m-expanded` | `.pf-v6-c-dual-list-selector__list-item` | Indicates that an item is expanded. |
+| `.pf-m-disabled` | `.pf-v6-c-dual-list-selector__list-item` | Indicates that an item is disabled. **Note:** If an item is expandable, only the top level item needs the disabled class. |

package/dist/docs/api/v6/components/dual-list-selector/react

@@ -0,0 +1,80 @@
+## Examples
+
+The dual list selector is built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:
+
+```
+<DualListSelector>
+  <DualListSelectorPane>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+
+  <DualListSelectorControlsWrapper>
+    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
+  </DualListSelectorControlsWrapper>
+
+  <DualListSelectorPane isChosen>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+</DualListSelector>
+```
+
+### Basic
+
+
+import DualListSelectorBasic from "./DualListSelectorBasic.tsx?raw"
+
+<LiveExample src={DualListSelectorBasic} />
+
+### Basic with tooltips
+
+
+import DualListSelectorBasicTooltips from "./DualListSelectorBasicTooltips.tsx?raw"
+
+<LiveExample src={DualListSelectorBasicTooltips} />
+
+### Basic with search
+
+
+import DualListSelectorBasicSearch from "./DualListSelectorBasicSearch.tsx?raw"
+
+<LiveExample src={DualListSelectorBasicSearch} />
+
+### Using more complex options with actions
+
+
+import DualListSelectorComplexOptionsActions from "./DualListSelectorComplexOptionsActions.tsx?raw"
+
+<LiveExample src={DualListSelectorComplexOptionsActions} />
+
+### With tree
+
+
+import DualListSelectorTree from "./DualListSelectorTree.tsx?raw"
+
+<LiveExample src={DualListSelectorTree} />
+
+### Draggable
+
+To enable drag and drop, wrap the `<DualListSelectorList>` component with `<DragDropSort>`, define the `variant` property as "DualListSelectorList", and pass both the sortable items and `onDrop` callback to `<DragDropSort>`. `<DragDropSort>` will create the component's usual children internally based on the items property, so children inside the `<DualListSelectorList>` should not be passed to the wrapped component.
+
+Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.
+
+```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DualListSelectorDraggable.tsx"
+
+```
+
+### Draggable with multiple drop zones
+
+To enable multiple drop zones, wrap the `<DualListSelector>` component with `<DragDropContainer>`, and create the desired amount of `<Droppable>` components within `<DragDropContainer>`. `<Droppable>` components should be located where `<DualListSelectorList>` usually would go for each pane to be made draggable.
+
+Each `<Droppable>` should define the `wrapper` property as the component that acts as the drop zone, `<DualListSelectorList>`, and the `items` property of their respective draggable items as an array of `<DraggableObject>` data. `<DragDropContainer>` should be passed the `onDrop`, `onContainerMove`, and `onCancel` callbacks to handle items being dropped, items moving between droppable containers, and what happens if the drag is cancelled respectively. `<DragDropContainer>` should also be given a `Record` representing all sortable drop zones' items. Both components should define the `variant` property as "DualListSelectorList".
+
+Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.
+
+```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx"
+
+```

package/dist/docs/api/v6/components/dual-list-selector/react-deprecated

@@ -0,0 +1,96 @@
+## Examples
+
+### Basic
+
+
+import DualListSelectorBasic from "./DualListSelectorBasic.tsx?raw"
+
+<LiveExample src={DualListSelectorBasic} />
+
+### Basic with tooltips
+
+
+import DualListSelectorBasicTooltips from "./DualListSelectorBasicTooltips.tsx?raw"
+
+<LiveExample src={DualListSelectorBasicTooltips} />
+
+### Basic with search
+
+
+import DualListSelectorBasicSearch from "./DualListSelectorBasicSearch.tsx?raw"
+
+<LiveExample src={DualListSelectorBasicSearch} />
+
+### Using more complex options with actions
+
+
+import DualListSelectorComplexOptionsActions from "./DualListSelectorComplexOptionsActions.tsx?raw"
+
+<LiveExample src={DualListSelectorComplexOptionsActions} />
+
+### With tree
+
+
+import DualListSelectorTreeExample from "./DualListSelectorTreeExample.tsx?raw"
+
+<LiveExample src={DualListSelectorTreeExample} />
+
+## Composable structure
+
+The dual list selector can also be built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:
+
+```
+<DualListSelector>
+  <DualListSelectorPane>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+
+  <DualListSelectorControlsWrapper>
+    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
+  </DualListSelectorControlsWrapper>
+
+  <DualListSelectorPane isChosen>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+</DualListSelector>
+```
+
+### Composable dual list selector
+
+
+import DualListSelectorComposable from "./DualListSelectorComposable.tsx?raw"
+
+<LiveExample src={DualListSelectorComposable} />
+
+### Composable with drag and drop
+
+Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-demos).
+
+This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
+
+- wrap the `DualListSelectorPane` in a `DragDrop` component
+- wrap the `DualListSelectorList` in a `Droppable` component
+- wrap the `DualListSelectorListItem` components in a `Draggable` component
+- define an `onDrop` callback which reorders the sortable options.
+  - The `onDrop` function provides the starting location and destination location for a dragged item. It should return
+    true to enable the 'drop' animation in the new location and false to enable the 'drop' animation back to the item's
+    old position.
+  - define an `onDrag` callback which ensures that the drag event will not cross hairs with the `onOptionSelect` click
+    event set on the option. Note: the `ignoreNextOptionSelect` state value is used to prevent selection while dragging.
+
+Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
+
+```ts isDeprecated file="DualListSelectorComposableDragDrop.tsx"
+
+```
+
+### Composable with tree
+
+
+import DualListSelectorComposableTree from "./DualListSelectorComposableTree.tsx?raw"
+
+<LiveExample src={DualListSelectorComposableTree} />

package/dist/docs/api/v6/components/empty-state/html

@@ -0,0 +1,75 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Extra small
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Small
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Large
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Extra large
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### With status
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+## Documentation
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-hidden="true"` | `.pf-v6-c-empty-state__icon` |  Hides icon for assistive technologies. **Required** |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-empty-state` | `<div>` |  Initiates an empty state component. The empty state centers its content (`.pf-v6-c-empty-state__content`) vertically and horizontally. **Required** |
+| `.pf-v6-c-empty-state__content` | `<div>` |  Creates the content container. **Required** |
+| `.pf-v6-c-empty-state__header` | `<div>` |  Creates the header container. **Required** |
+| `.pf-v6-c-empty-state__title` | `<div>` |  Creates the empty state title container. **Required** |
+| `.pf-v6-c-empty-state__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` |  Creates the empty state title text container. |
+| `.pf-v6-c-empty-state__icon` | `<div>` |  Creates the empty state icon container. |
+| `.pf-v6-c-empty-state__body` | `<div>` |  Creates the empty state body content. There can be more than one `.pf-v6-c-empty-state__body` elements. |
+| `.pf-v6-c-empty-state__footer` | `<div>` |  Creates the footer container. **Required** |
+| `.pf-v6-c-empty-state__actions` | `<div>` |  Container for actions. **Required** |
+| `.pf-m-xs` | `.pf-v6-c-empty-state` | Modifies the empty state for an extra small variation and max-width. |
+| `.pf-m-sm` | `.pf-v6-c-empty-state` | Modifies the empty state for a small max-width. |
+| `.pf-m-lg` | `.pf-v6-c-empty-state` | Modifies the empty state for a large max-width. |
+| `.pf-m-xl` | `.pf-v6-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
+| `.pf-m-full-height` | `.pf-v6-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-v6-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-v6-c-empty-state` have an implicit or explicit `height` defined.  |
+| `.pf-m-danger` | `.pf-v6-c-empty-state` | Modifies the empty state for danger status. |
+| `.pf-m-warning` | `.pf-v6-c-empty-state` | Modifies the empty state for warning status. |
+| `.pf-m-success` | `.pf-v6-c-empty-state` | Modifies the empty state for success status. |
+| `.pf-m-info` | `.pf-v6-c-empty-state` | Modifies the empty state for info status. |
+| `.pf-m-custom` | `.pf-v6-c-empty-state` | Modifies the empty state for custom status. |

package/dist/docs/api/v6/components/empty-state/react

@@ -0,0 +1,55 @@
+## Examples
+### Basic
+
+
+import EmptyStateBasic from "./EmptyStateBasic.tsx?raw"
+
+<LiveExample src={EmptyStateBasic} />
+
+### Extra small
+
+
+import EmptyStateExtraSmall from "./EmptyStateExtraSmall.tsx?raw"
+
+<LiveExample src={EmptyStateExtraSmall} />
+
+### Small
+
+
+import EmptyStateSmall from "./EmptyStateSmall.tsx?raw"
+
+<LiveExample src={EmptyStateSmall} />
+
+### Large
+
+
+import EmptyStateLarge from "./EmptyStateLarge.tsx?raw"
+
+<LiveExample src={EmptyStateLarge} />
+
+### Extra large
+
+
+import EmptyStateExtraLarge from "./EmptyStateExtraLarge.tsx?raw"
+
+<LiveExample src={EmptyStateExtraLarge} />
+
+### With status
+
+import EmptyStateWithStatus from "./EmptyStateWithStatus.tsx?raw"
+
+<LiveExample src={EmptyStateWithStatus} />
+
+### Spinner
+
+
+import EmptyStateSpinner from "./EmptyStateSpinner.tsx?raw"
+
+<LiveExample src={EmptyStateSpinner} />
+
+### No match found
+
+
+import EmptyStateNoMatchFound from "./EmptyStateNoMatchFound.tsx?raw"
+
+<LiveExample src={EmptyStateNoMatchFound} />