@maxio-com/react-ui-components 9.27.0 → 9.28.0

package/dist/skills/maxio-react/SKILL.md

@@ -43,6 +43,7 @@ Use this skill to build React components using `@maxio-com/react-ui-components`.
 - [Components / Forms / DatePicker](references/components-forms-datepicker.md)
 - [Components / Forms / DateRangePicker](references/components-forms-daterangepicker.md)
 - [Components / Forms / Radio Group](references/components-forms-radio-group.md)
+- [Components / Forms / SearchField](references/components-forms-searchfield.md)
 - [Components / Forms / Select](references/components-forms-select.md)
 - [Components / Forms / TextArea](references/components-forms-textarea.md)
 - [Components / Forms / TextField](references/components-forms-textfield.md)

package/dist/skills/maxio-react/references/components-forms-searchfield.md

@@ -0,0 +1,215 @@
+# SearchField
+
+## Usage Guidelines
+
+### Overview
+
+SearchField lets users enter a search query and clear it with a built-in
+clear button. Use it to filter a list, table, or page of results.
+
+#### When to Use
+
+- Use when users need to filter or find items within a list, table, or page.
+- Use `onChange` to filter results as the user types and `onSubmit` when the
+  search should only run once, on Enter.
+- Use with helper text when users need to know which fields are searched.
+
+#### When Not to Use
+
+- Do not use for a single free-form value that is not used to search or
+  filter. Use TextField instead.
+- Do not use when users must choose from a known list. Use Select for short
+  lists or ComboBox when filtering helps select an option.
+- Do not use for long-form or multi-line writing. Use TextArea instead.
+
+### Variants
+
+| Variants | Purpose                                       | Usage notes                                                |
+| :------- | :-------------------------------------------- | :--------------------------------------------------------- |
+| `sm`     | Compact field for dense interfaces.           | Use where form density is high and labels remain readable. |
+| `md`     | Default field size.                           | Use for most toolbars.                                     |
+| `lg`     | Larger field for prominent search rows.       | Use sparingly when the field needs more visual emphasis.   |
+| `xl`     | Field with integrated label and helper/error. | Use when the field needs a stronger contained treatment.   |
+
+### Behavior
+
+- **Mouse and touch**: Users can place the cursor in the field, select text, and
+  clear the value with the built-in clear button once it has content.
+- **Keyboard**: Users tab to the input, type or edit the value, press Escape or
+  activate the clear button to clear it, and press Enter to trigger `onSubmit`.
+- **Focus management**: Focus lands on the native input.
+- **Controlled state**: Use `value` and `onChange` when product state owns the
+  value and results should update as the user types. Use `defaultValue` for
+  simple uncontrolled fields, or `onSubmit` when the search should only run on
+  Enter.
+- **Debounce**: SearchField does not debounce `onChange` on its own. Wrap the
+  consuming state update in your own debounce hook when the search triggers a
+  network request.
+
+### Accessibility
+
+- Provide a visible `label` whenever possible. Use `aria-label` or
+  `aria-labelledby` only when a visible label is not available.
+- Use `description` for helper text and `errorMessage` for validation feedback.
+- Pair invalid values with `isInvalid` and an actionable `errorMessage`.
+- The built-in clear button has an accessible name via `clearButtonLabel`
+  (defaults to "Clear search").
+- Do not rely on color alone to communicate validation, disabled, or read-only
+  state.
+
+### Content
+
+- Write labels as short nouns, such as "Search customers" or "Search
+  invoices".
+- Use placeholder text for examples, not instructions that replace the label.
+- Use helper text to name which fields are searched.
+- Write error messages that name the problem and recovery step, such as
+  "Enter at least 3 characters."
+
+### Related
+
+- **[TextField](components-forms-textfield.md)**: use for a
+  single free-form value that is not used to search or filter.
+- **[ComboBox](components-forms-combobox.md)**: use when users
+  choose from a list and typing should filter options.
+- **[Select](components-forms-select.md)**: use when users
+  choose from a shorter closed list.
+
+## React
+
+```tsx
+import { SearchField } from '@maxio-com/react-ui-components';
+```
+
+### State Management
+
+Use controlled state when results should filter as the user types. Use
+`onSubmit` when the search should only run once the user presses Enter.
+
+#### Controlled
+
+```tsx
+const [value, setValue] = React.useState('');
+
+<SearchField label="Search customers" value={value} onChange={setValue} />;
+```
+
+#### Uncontrolled
+
+```tsx
+<SearchField label="Search customers" defaultValue="Acme Co." />
+```
+
+## Imports
+
+```tsx
+import { Grid, SearchField } from "@maxio-com/react-ui-components";
+```
+
+## Prop Types
+
+### SearchField
+
+| Prop | Type | Required | Default | Description | Source |
+| --- | --- | --- | --- | --- | --- |
+| `className` | `string` | no | - | Additional class name for the search field container | SearchFieldProps |
+| `clearButtonLabel` | `string` | no | `Clear search` | Accessible label for the built-in clear button | SearchFieldProps |
+| `description` | `string` | no | - | Description for the search field. It will not be visible if there is an error message. | SearchFieldProps |
+| `errorMessage` | `string` | no | - | Error message for the search field | SearchFieldProps |
+| `fullWidth` | `boolean` | no | - | Ensures the input spans the full width of its parent | SearchFieldProps |
+| `label` | `string` | no | - | Label for the search field | SearchFieldProps |
+| `leadingElement` | `ReactNode` | no | `<Icon variant="search" />` | Leading element for the search field. Defaults to a search icon. | SearchFieldProps |
+| `placeholder` | `string` | no | - | Temporary text that occupies the search field when it is empty. | SearchFieldProps |
+| `size` | `"sm" \| "md" \| "lg" \| "xl"` | no | `md` | Size of the search field | SearchFieldProps |
+
+## Stories
+
+### Default
+
+Provide a visible label and use placeholder text only as an example of the
+expected value. Use controlled state (`value`/`onChange`) when product logic
+needs to filter results as the user types.
+
+```tsx
+const Default = () => <SearchField
+    label="Search customers"
+    placeholder="Search by name or email"
+    onChange={action('onChange')} />;
+```
+
+### Submit On Enter
+
+Use `onSubmit` when the search should only run once the user presses Enter,
+instead of on every keystroke.
+
+```tsx
+const SubmitOnEnter = () => <SearchField
+    label="Search customers"
+    placeholder="Search by name or email"
+    onChange={action('onChange')}
+    onSubmit={action('onSubmit')} />;
+```
+
+### With Description
+
+Use description text for helper content that users need before typing, such
+as which fields are searched.
+
+```tsx
+const WithDescription = () => <SearchField
+    label="Search invoices"
+    placeholder="Search by invoice number"
+    description="Searches invoice number, customer name, and email."
+    onChange={action('onChange')} />;
+```
+
+### Validation
+
+Use errorMessage with isInvalid so assistive technology receives invalid
+state and users get actionable validation feedback.
+
+```tsx
+const Validation = () => <SearchField
+    label="Search customers"
+    placeholder="Search by name or email"
+    isInvalid
+    errorMessage="Enter at least 3 characters."
+    onChange={action('onChange')} />;
+```
+
+### Disabled
+
+Use disabled fields when search is unavailable in the current context.
+
+```tsx
+const Disabled = () => <SearchField label="Search customers" placeholder="Search by name or email" isDisabled />;
+```
+
+### Sizes
+
+Use size to match the density and prominence of the surrounding UI. Use md
+for most toolbars, sm in dense interfaces, lg for prominent search rows, and
+xl when the label and helper or error text should feel integrated with the field.
+
+```tsx
+const Sizes = (args) => (
+  <Grid gap={4}>
+    {(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
+      <SearchField key={size} {...args} size={size} />
+    ))}
+  </Grid>
+);
+```
+
+### Full Width
+
+Use fullWidth in toolbars and responsive layouts where the field should
+fill the available parent width.
+
+```tsx
+const FullWidth = () => <SearchField
+    label="Search customers"
+    placeholder="Search by name or email"
+    fullWidth
+    onChange={action('onChange')} />;
+```

package/dist/temporary-typings/src/components/forms/SearchField/SearchField.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SearchFieldProps } from './types';
+declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default SearchField;
+//# sourceMappingURL=SearchField.d.ts.map

package/dist/temporary-typings/src/components/forms/SearchField/SearchField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/SearchField/SearchField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAW1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,QAAA,MAAM,WAAW,2FAiFhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/temporary-typings/src/components/forms/SearchField/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './SearchField';
+export type { SearchFieldProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/temporary-typings/src/components/forms/SearchField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/SearchField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/temporary-typings/src/components/forms/SearchField/types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'children' | 'className'> {
+    label?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    fullWidth?: boolean;
+    description?: string;
+    errorMessage?: string;
+    leadingElement?: ReactNode;
+    clearButtonLabel?: string;
+    className?: string;
+    placeholder?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/temporary-typings/src/components/forms/SearchField/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/forms/SearchField/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,oBAAoB,EACpB,UAAU,GAAG,WAAW,CACzB;IAIC,KAAK,CAAC,EAAE,MAAM,CAAC;IAIf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAIjC,SAAS,CAAC,EAAE,OAAO,CAAC;IAIpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,YAAY,CAAC,EAAE,MAAM,CAAC;IAItB,cAAc,CAAC,EAAE,SAAS,CAAC;IAI3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAI1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/temporary-typings/src/components/forms/index.d.ts

@@ -2,6 +2,8 @@ export * from './Checkbox';
 export { default as ComboBox } from './ComboBox';
 export type { ComboBoxProps } from './ComboBox';
 export * from './Radio';
+export { default as SearchField } from './SearchField';
+export type { SearchFieldProps } from './SearchField';
 export { default as TextField } from './TextField';
 export type { TextFieldProps } from './TextField';
 export { default as TextArea } from './TextArea';

package/dist/temporary-typings/src/components/forms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/temporary-typings/src/components/index.d.ts

@@ -29,17 +29,17 @@ import Tooltip from './Tooltip';
 import TooltipTrigger from './TooltipTrigger';
 import TopBar from './TopBar';
 import { Body, Code, Display, Heading, Label } from './Typography';
-import { Checkbox, CheckboxGroup, ComboBox, FormErrorMessage, FormHelperText, Radio, RadioGroup, Select, TextArea, TextField, TextInput } from './forms';
+import { Checkbox, CheckboxGroup, ComboBox, FormErrorMessage, FormHelperText, Radio, RadioGroup, SearchField, Select, TextArea, TextField, TextInput } from './forms';
 import { Chip } from './Chip';
 import { Flex } from './Flex';
 import { Grid } from './Grid';
 import { ListBox } from './ListBox';
-export { ActionList, Drawer, Alert, Avatar, Banner, Body, Card, Breadcrumbs, BreadcrumbsItem, Button, Checkbox, CheckboxGroup, Code, ComboBox, CopyToClipboard, createColumnHelper, DataTable, Display, EmptyState, FormErrorMessage, FormHelperText, Heading, Icon, IconButton, Label, Link, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, DialogTrigger, Pressable, ProgressBar, Radio, RadioGroup, Select, SegmentedControl, SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, GlobalToastProvider, useToast, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, Chip, Flex, Grid, ListBox, };
+export { ActionList, Drawer, Alert, Avatar, Banner, Body, Card, Breadcrumbs, BreadcrumbsItem, Button, Checkbox, CheckboxGroup, Code, ComboBox, CopyToClipboard, createColumnHelper, DataTable, Display, EmptyState, FormErrorMessage, FormHelperText, Heading, Icon, IconButton, Label, Link, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, DialogTrigger, Pressable, ProgressBar, Radio, RadioGroup, SearchField, Select, SegmentedControl, SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, GlobalToastProvider, useToast, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, Chip, Flex, Grid, ListBox, };
 export type { PopoverProps } from './Popover/types';
 export type { DrawerProps } from './Drawer/types';
 export type { CopyToClipboardProps, CopyToClipboardSize, CopyToClipboardVariant, } from './CopyToClipboard';
 export type { EmptyStateHeadingLevel, EmptyStateProps } from './EmptyState';
-export type { ComboBoxProps, TextAreaProps, TextFieldProps, TextInputProps, } from './forms';
+export type { ComboBoxProps, SearchFieldProps, TextAreaProps, TextFieldProps, TextInputProps, } from './forms';
 export type { SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, } from './SegmentedControl';
 export { Calendar } from './Calendar';
 export type { CalendarProps } from './Calendar';

package/dist/temporary-typings/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "9.27.0",
+  "version": "9.28.0",
   "description": "React UI components",
   "type": "module",
   "license": "MIT",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7195ec2e6d3a2162254662d25aa7ff0a56a8d211"
+  "gitHead": "78ffb230f55e600753d1946c32bd3f53e671ad57"
 }

package/typings/index.d.ts

@@ -1,7 +1,7 @@
 import React$1, { ReactNode, HTMLAttributes, LiHTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, RefObject, FC, ElementType, InputHTMLAttributes } from 'react';
 import { RowData, Row, Table, ExpandedState, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
-import { PopoverProps as PopoverProps$1, ToggleButtonGroupProps, ToggleButtonProps, ListBoxProps as ListBoxProps$1, ListBoxLoadMoreItemProps, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, HeaderProps, ComboBoxProps as ComboBoxProps$1, ValidationResult, TextFieldProps as TextFieldProps$1, DateValue, DateFieldProps as DateFieldProps$1, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1 } from 'react-aria-components';
+import { PopoverProps as PopoverProps$1, ToggleButtonGroupProps, ToggleButtonProps, ListBoxProps as ListBoxProps$1, ListBoxLoadMoreItemProps, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, HeaderProps, ComboBoxProps as ComboBoxProps$1, ValidationResult, SearchFieldProps as SearchFieldProps$1, TextFieldProps as TextFieldProps$1, DateValue, DateFieldProps as DateFieldProps$1, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1 } from 'react-aria-components';
 export { DialogTrigger, Pressable } from 'react-aria-components';
 import * as _floating_ui_react_dom_interactions from '@floating-ui/react-dom-interactions';
 import { MotionProps } from 'framer-motion';
@@ -768,6 +768,20 @@ type RadioGroupProps = Pick<AriaRadioGroupProps, 'aria-describedby' | 'aria-deta
 };
 declare const RadioGroup: ({ children, label, errorMessage, helperText, disabled, invalid, name, defaultValue, ...props }: RadioGroupProps) => React$1.JSX.Element;
 
+interface SearchFieldProps extends Omit<SearchFieldProps$1, 'children' | 'className'> {
+    label?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    fullWidth?: boolean;
+    description?: string;
+    errorMessage?: string;
+    leadingElement?: ReactNode;
+    clearButtonLabel?: string;
+    className?: string;
+    placeholder?: string;
+}
+
+declare const SearchField: React$1.ForwardRefExoticComponent<SearchFieldProps & React$1.RefAttributes<HTMLInputElement>>;
+
 interface TextFieldProps extends Omit<TextFieldProps$1, 'children' | 'className' | 'type'> {
     label?: string;
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -965,5 +979,5 @@ type AuthLayoutProps = {
 
 declare const AuthLayout: ({ children, heading, description, sentiment, leadingElement, alert, topAddon, footer, }: AuthLayoutProps) => React$1.JSX.Element;
 
-export { ActionList, Alert, AuthLayout, Avatar, Banner, Body, Breadcrumbs, BreadcrumbsItem, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, Code, ComboBox, CopyToClipboard, DataTable, DateField, DatePicker, DateRangePicker, Display, Drawer, EmptyState, Flex, FormErrorMessage, FormHelperText, GlobalToastProvider, Grid, Heading, Icon, IconButton, Label, Link, ListBox, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, ProgressBar, Radio, RadioGroup, RangeCalendar, SegmentedControl, Select, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, useElementResizeObserver, useHover, useOverlayTrigger, useToast, useWindowSize };
-export type { CalendarProps, ComboBoxProps, CopyToClipboardProps, CopyToClipboardSize, CopyToClipboardVariant, DateFieldProps, DatePickerProps, DatePreset, DateRangePickerProps, DateRangePreset, DrawerProps, EmptyStateHeadingLevel, EmptyStateProps, Interactions, OverlayAriaRole, Placement, PopoverProps, RangeCalendarProps, SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, TextAreaProps, TextFieldProps, TextInputProps };
+export { ActionList, Alert, AuthLayout, Avatar, Banner, Body, Breadcrumbs, BreadcrumbsItem, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, Code, ComboBox, CopyToClipboard, DataTable, DateField, DatePicker, DateRangePicker, Display, Drawer, EmptyState, Flex, FormErrorMessage, FormHelperText, GlobalToastProvider, Grid, Heading, Icon, IconButton, Label, Link, ListBox, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, ProgressBar, Radio, RadioGroup, RangeCalendar, SearchField, SegmentedControl, Select, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, useElementResizeObserver, useHover, useOverlayTrigger, useToast, useWindowSize };
+export type { CalendarProps, ComboBoxProps, CopyToClipboardProps, CopyToClipboardSize, CopyToClipboardVariant, DateFieldProps, DatePickerProps, DatePreset, DateRangePickerProps, DateRangePreset, DrawerProps, EmptyStateHeadingLevel, EmptyStateProps, Interactions, OverlayAriaRole, Placement, PopoverProps, RangeCalendarProps, SearchFieldProps, SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, TextAreaProps, TextFieldProps, TextInputProps };