@cimpress-ui/react 1.9.1 → 1.10.0

package/dist/commonjs/components/select/select.js

@@ -45,7 +45,7 @@ function Select({ children, items, label, description, error, UNSAFE_className,
         focus: () => triggerRef.current?.focus(),
     }), []);
     const listBox = ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBox, { className: "cim-select-listbox", onScroll: onScroll, renderEmptyState: () => isLoading ? (0, jsx_runtime_1.jsx)(spinner_js_1.Spinner, { "aria-label": collectionMessages.format('loading'), size: "small", marginY: 8 }) : null, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Collection, { items: items, children: children }), (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxLoadMoreItem, { onLoadMore: onLoadMore, isLoading: isLoading, children: (0, jsx_runtime_1.jsx)(spinner_js_1.Spinner, { "aria-label": collectionMessages.format('loadingMore'), size: "small", marginY: 8 }) })] }));
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { ...props, ref: ref, className: (0, clsx_1.default)('cim-select', UNSAFE_className), style: UNSAFE_style, value: selectedKey, defaultValue: defaultSelectedKey, onChange: onSelectionChange, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { ref: triggerRef, className: "cim-select-button", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: (values) => (0, clsx_1.default)(values.defaultClassName, (0, utils_js_1.textStyle)({ variant: 'body', alignment: 'start' })), children: ({ selectedText }) => selectedText }), (0, jsx_runtime_1.jsx)(index_js_2.IconChevronDown, {})] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Virtualizer, { layout: react_aria_components_1.ListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { ...props, ref: ref, className: (0, clsx_1.default)('cim-select', UNSAFE_className), style: UNSAFE_style, value: selectedKey, defaultValue: defaultSelectedKey, onChange: onSelectionChange, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { ref: triggerRef, className: "cim-select-button", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: (values) => (0, clsx_1.default)(values.defaultClassName, (0, utils_js_1.textStyle)({ variant: 'body', alignment: 'start' })), children: ({ selectedText, defaultChildren, isPlaceholder }) => (isPlaceholder ? defaultChildren : selectedText) }), (0, jsx_runtime_1.jsx)(index_js_2.IconChevronDown, {})] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Virtualizer, { layout: react_aria_components_1.ListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
 }
 /**
  * Allows users to select one item from a collapsible list.

package/dist/commonjs/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type {\n  ApiProps,\n  AsyncItemLoadingProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  rowHeight: 40,\n  headingHeight: 32,\n  loaderHeight: 40,\n  padding: 0,\n  gap: 0,\n};\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    AsyncItemLoadingProps,\n    ApiProps<SelectApi>,\n    Pick<\n      RACSelectProps<T>,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    > {\n  /** The currently selected key in the collection (controlled). */\n  selectedKey?: Key | null;\n  /** The initial selected key in the collection (uncontrolled). */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (key: Key | null) => void;\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n  /** Handler that is called when the list of items is scrolled. */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n  /** Focuses the trigger button and opens the list of items. */\n  focus: () => void;\n}\n\nfunction Select<T extends CollectionItem>(\n  {\n    children,\n    items,\n    label,\n    description,\n    error,\n    UNSAFE_className,\n    UNSAFE_style,\n    onScroll,\n    isVirtualized = false,\n    apiRef,\n    UNSTABLE_isLoading: isLoading,\n    UNSTABLE_onLoadMore: onLoadMore,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    ...props\n  }: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n  useImperativeHandle(\n    apiRef,\n    () => ({\n      focus: () => triggerRef.current?.focus(),\n    }),\n    [],\n  );\n\n  const listBox = (\n    <RACListBox\n      className=\"cim-select-listbox\"\n      onScroll={onScroll}\n      renderEmptyState={() =>\n        isLoading ? <Spinner aria-label={collectionMessages.format('loading')} size=\"small\" marginY={8} /> : null\n      }\n    >\n      <RACCollection items={items}>{children}</RACCollection>\n      <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n        <Spinner aria-label={collectionMessages.format('loadingMore')} size=\"small\" marginY={8} />\n      </RACListBoxLoadMoreItem>\n    </RACListBox>\n  );\n\n  return (\n    <RACSelect\n      {...props}\n      ref={ref}\n      className={clsx('cim-select', UNSAFE_className)}\n      style={UNSAFE_style}\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      onChange={onSelectionChange}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton ref={triggerRef} className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' }))}\n        >\n          {({ selectedText }) => selectedText}\n        </RACSelectValue>\n        <IconChevronDown />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        {isVirtualized ? (\n          <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n            {listBox}\n          </RACVirtualizer>\n        ) : (\n          listBox\n        )}\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue = stringLikeChildrenToString(children);\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type {\n  ApiProps,\n  AsyncItemLoadingProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  rowHeight: 40,\n  headingHeight: 32,\n  loaderHeight: 40,\n  padding: 0,\n  gap: 0,\n};\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    AsyncItemLoadingProps,\n    ApiProps<SelectApi>,\n    Pick<\n      RACSelectProps<T>,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    > {\n  /** The currently selected key in the collection (controlled). */\n  selectedKey?: Key | null;\n  /** The initial selected key in the collection (uncontrolled). */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (key: Key | null) => void;\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n  /** Handler that is called when the list of items is scrolled. */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n  /** Focuses the trigger button and opens the list of items. */\n  focus: () => void;\n}\n\nfunction Select<T extends CollectionItem>(\n  {\n    children,\n    items,\n    label,\n    description,\n    error,\n    UNSAFE_className,\n    UNSAFE_style,\n    onScroll,\n    isVirtualized = false,\n    apiRef,\n    UNSTABLE_isLoading: isLoading,\n    UNSTABLE_onLoadMore: onLoadMore,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    ...props\n  }: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n  useImperativeHandle(\n    apiRef,\n    () => ({\n      focus: () => triggerRef.current?.focus(),\n    }),\n    [],\n  );\n\n  const listBox = (\n    <RACListBox\n      className=\"cim-select-listbox\"\n      onScroll={onScroll}\n      renderEmptyState={() =>\n        isLoading ? <Spinner aria-label={collectionMessages.format('loading')} size=\"small\" marginY={8} /> : null\n      }\n    >\n      <RACCollection items={items}>{children}</RACCollection>\n      <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n        <Spinner aria-label={collectionMessages.format('loadingMore')} size=\"small\" marginY={8} />\n      </RACListBoxLoadMoreItem>\n    </RACListBox>\n  );\n\n  return (\n    <RACSelect\n      {...props}\n      ref={ref}\n      className={clsx('cim-select', UNSAFE_className)}\n      style={UNSAFE_style}\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      onChange={onSelectionChange}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton ref={triggerRef} className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' }))}\n        >\n          {({ selectedText, defaultChildren, isPlaceholder }) => (isPlaceholder ? defaultChildren : selectedText)}\n        </RACSelectValue>\n        <IconChevronDown />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        {isVirtualized ? (\n          <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n            {listBox}\n          </RACVirtualizer>\n        ) : (\n          listBox\n        )}\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue = stringLikeChildrenToString(children);\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}

package/dist/commonjs/components/stepper/stepper-item.d.ts

@@ -1,16 +1,16 @@
-import type { CommonProps } from '../types.js';
+import { type ReactNode } from 'react';
+import type { CommonProps, StringLikeChildren } from '../types.js';
 import type { StepperStatus } from './types.js';
 export interface UNSTABLE_StepperItemProps extends CommonProps {
     /** The title of the step. */
-    title: string;
-    /** The description of the step. */
-    description?: string;
+    children: StringLikeChildren;
+    /** The description of the step. Optionally, you can pass a React node to render rich text. */
+    description?: ReactNode;
     /** The status of the step. */
     status?: StepperStatus;
 }
 /**
  * Represents a single step in a stepper component.
  */
-declare const _UNSTABLE_StepperItem: (props: UNSTABLE_StepperItemProps & import("react").RefAttributes<HTMLLIElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };
+export declare function UNSTABLE_StepperItem({ children, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_StepperItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=stepper-item.d.ts.map

package/dist/commonjs/components/stepper/stepper-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper-item.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAoED;;GAEG;AACH,QAAA,MAAM,qBAAqB,0KAAkE,CAAC;AAE9F,OAAO,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"stepper-item.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAwChD,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,6BAA6B;IAC7B,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8FAA8F;IAC9F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,WAAW,EACX,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAiC3B"}

package/dist/commonjs/components/stepper/stepper-item.js

@@ -4,34 +4,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_StepperItem = void 0;
+exports.UNSTABLE_StepperItem = UNSTABLE_StepperItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-const forward_ref_js_1 = require("../../forward-ref.js");
+const react_aria_components_1 = require("react-aria-components");
 const index_js_1 = require("../../icons/index.js");
-const with_style_props_js_1 = require("../../with-style-props.js");
 const text_js_1 = require("../typography/text.js");
 const context_js_1 = require("./context.js");
-function UNSTABLE_StepperItem({ title, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    const labelId = (0, react_aria_1.useId)();
-    const { currentStep, stepIndex, onChange, stepCount, orientation } = (0, react_1.useContext)(context_js_1.StepContext);
-    const isCurrent = stepIndex === currentStep;
-    const isPrevious = stepIndex < currentStep;
-    const isLast = stepIndex === stepCount - 1;
-    const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : undefined);
-    const isNavigable = !isCurrent && onChange && (status != null || isPrevious);
-    const titleElement = ((0, jsx_runtime_1.jsx)(text_js_1.Text, { id: labelId, as: "span", variant: isCurrent ? 'body-semibold' : 'body', UNSAFE_className: "cim-stepper-item-title", children: title }));
-    const iconElement = ((0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-icon", children: status && (0, jsx_runtime_1.jsx)(StepperItemIcon, { status: status, isCurrent: isCurrent }) }));
-    return ((0, jsx_runtime_1.jsxs)("li", { ...props, ref: ref, className: (0, clsx_1.default)('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-stepper-item-icon-container", children: [isNavigable ? ((0, jsx_runtime_1.jsx)("button", { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, "aria-labelledby": labelId, children: iconElement })) : (iconElement), !isLast && orientation === 'vertical' && (0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-tail" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-stepper-item-content", children: [isNavigable ? ((0, jsx_runtime_1.jsx)("button", { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, tabIndex: -1, children: titleElement })) : (titleElement), description && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
-}
-/**
- * Represents a single step in a stepper component.
- */
-const _UNSTABLE_StepperItem = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_StepperItem), 'StepperItem');
-exports.UNSTABLE_StepperItem = _UNSTABLE_StepperItem;
-const statusToIcon = {
+// TODO: move to translations
+const assistiveTextMap = {
+    incomplete: 'Incomplete',
+    complete: 'Completed',
+    error: 'Invalid',
+    warning: 'Warning',
+    'in-progress': 'In progress',
+};
+const statusIconMap = {
+    incomplete: react_1.Fragment,
     complete: index_js_1.IconCheckBold,
     // TODO: replace with icon from library when available
     error: () => ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z", fill: "currentColor" })] })),
@@ -39,12 +29,30 @@ const statusToIcon = {
     warning: () => ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("line", { x1: "16", y1: "8", x2: "16", y2: "18", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" })] })),
     'in-progress': index_js_1.IconCircleBoldFill,
 };
+/**
+ * Represents a single step in a stepper component.
+ */
+function UNSTABLE_StepperItem({ children, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }) {
+    const { currentStep, stepIndex, onChange, stepCount, orientation } = (0, react_1.useContext)(context_js_1.StepContext);
+    const isCurrent = stepIndex === currentStep;
+    const isPrevious = stepIndex < currentStep;
+    const isLast = stepIndex === stepCount - 1;
+    const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : 'incomplete');
+    const isNavigable = !isCurrent && onChange != null && (overrideStatus != null || isPrevious);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, role: "listitem", className: (0, clsx_1.default)('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-stepper-item-icon-container", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)(StepperItemIndicator, { status: status, isNavigable: isNavigable, isCurrent: isCurrent, onChange: onChange }), !isLast && orientation === 'vertical' && (0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-tail" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-stepper-item-content", children: [(0, jsx_runtime_1.jsx)(StepperItemTitle, { status: status, isNavigable: isNavigable, isCurrent: isCurrent, onChange: onChange, children: children }), description && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
+}
 // eslint-disable-next-line react-refresh/only-export-components
-function StepperItemIcon({ status, isCurrent }) {
-    const Icon = statusToIcon[status];
-    if (status === 'in-progress' && !isCurrent) {
-        return null;
+function StepperItemIndicator({ status, isNavigable, isCurrent, onChange, }) {
+    const icon = ((0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-icon", children: status === 'in-progress' && !isCurrent ? null : (0, react_1.createElement)(statusIconMap[status]) }));
+    if (isNavigable) {
+        return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, excludeFromTabOrder: true, children: icon }));
     }
-    return (0, jsx_runtime_1.jsx)(Icon, { "aria-hidden": true });
+    return (0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-icon-button", children: icon });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+function StepperItemTitle({ children, status, isNavigable, isCurrent, onChange, }) {
+    const assistiveText = assistiveTextMap[status];
+    const titleElement = ((0, jsx_runtime_1.jsxs)(text_js_1.Text, { as: "span", variant: isCurrent ? 'body-semibold' : 'body', UNSAFE_className: "cim-stepper-item-title", children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.VisuallyHidden, { children: [assistiveText, ": "] }), children] }));
+    return isNavigable ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, children: titleElement })) : ((0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-title-button", children: titleElement }));
 }
 //# sourceMappingURL=stepper-item.js.map

package/dist/commonjs/components/stepper/stepper-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { useId } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconCircleBoldFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { StepContext } from './context.js';\nimport type { StepperStatus } from './types.js';\n\nexport interface UNSTABLE_StepperItemProps extends CommonProps {\n  /** The title of the step. */\n  title: string;\n  /** The description of the step. */\n  description?: string;\n  /** The status of the step. */\n  status?: StepperStatus;\n}\n\nfunction UNSTABLE_StepperItem(\n  { title, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_StepperItemProps,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const labelId = useId();\n\n  const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);\n  const isCurrent = stepIndex === currentStep;\n  const isPrevious = stepIndex < currentStep;\n  const isLast = stepIndex === stepCount - 1;\n\n  const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : undefined);\n\n  const isNavigable = !isCurrent && onChange && (status != null || isPrevious);\n\n  const titleElement = (\n    <Text\n      id={labelId}\n      as=\"span\"\n      variant={isCurrent ? 'body-semibold' : 'body'}\n      UNSAFE_className=\"cim-stepper-item-title\"\n    >\n      {title}\n    </Text>\n  );\n  const iconElement = (\n    <div className=\"cim-stepper-item-icon\">{status && <StepperItemIcon status={status} isCurrent={isCurrent} />}</div>\n  );\n\n  return (\n    <li\n      {...props}\n      ref={ref}\n      className={clsx('cim-stepper-item', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-status={status}\n      aria-current={isCurrent}\n    >\n      <div className=\"cim-stepper-item-icon-container\">\n        {isNavigable ? (\n          <button className=\"cim-stepper-item-icon-button\" type=\"button\" onClick={onChange} aria-labelledby={labelId}>\n            {iconElement}\n          </button>\n        ) : (\n          iconElement\n        )}\n        {!isLast && orientation === 'vertical' && <div className=\"cim-stepper-item-tail\" />}\n      </div>\n      <div className=\"cim-stepper-item-content\">\n        {isNavigable ? (\n          <button className=\"cim-stepper-item-title-button\" type=\"button\" onClick={onChange} tabIndex={-1}>\n            {titleElement}\n          </button>\n        ) : (\n          titleElement\n        )}\n        {description && (\n          <Text as=\"div\" UNSAFE_className=\"cim-stepper-item-description\" variant=\"medium\" tone=\"muted\">\n            {description}\n          </Text>\n        )}\n      </div>\n    </li>\n  );\n}\n\n/**\n * Represents a single step in a stepper component.\n */\nconst _UNSTABLE_StepperItem = withStyleProps(forwardRef(UNSTABLE_StepperItem), 'StepperItem');\n\nexport { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };\n\nconst statusToIcon = {\n  complete: IconCheckBold,\n  // TODO: replace with icon from library when available\n  error: () => (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  // TODO: replace with icon from library when available\n  warning: () => (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z\"\n        fill=\"currentColor\"\n      />\n      <line x1=\"16\" y1=\"8\" x2=\"16\" y2=\"18\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" />\n    </svg>\n  ),\n  'in-progress': IconCircleBoldFill,\n};\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemIcon({ status, isCurrent }: { status: StepperStatus; isCurrent: boolean }) {\n  const Icon = statusToIcon[status];\n\n  if (status === 'in-progress' && !isCurrent) {\n    return null;\n  }\n\n  return <Icon aria-hidden />;\n}\n"]}
+{"version":3,"file":"stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { createElement, Fragment, useContext, type ReactNode } from 'react';\nimport { Button as RACButton, VisuallyHidden as RACVisuallyHidden } from 'react-aria-components';\nimport { IconCheckBold, IconCircleBoldFill } from '../../icons/index.js';\nimport type { CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { StepContext } from './context.js';\nimport type { StepperStatus } from './types.js';\n\n// TODO: move to translations\nconst assistiveTextMap: Record<StepperStatus, string> = {\n  incomplete: 'Incomplete',\n  complete: 'Completed',\n  error: 'Invalid',\n  warning: 'Warning',\n  'in-progress': 'In progress',\n};\n\nconst statusIconMap: Record<StepperStatus, React.ElementType> = {\n  incomplete: Fragment,\n  complete: IconCheckBold,\n  // TODO: replace with icon from library when available\n  error: () => (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  // TODO: replace with icon from library when available\n  warning: () => (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z\"\n        fill=\"currentColor\"\n      />\n      <line x1=\"16\" y1=\"8\" x2=\"16\" y2=\"18\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" />\n    </svg>\n  ),\n  'in-progress': IconCircleBoldFill,\n};\n\nexport interface UNSTABLE_StepperItemProps extends CommonProps {\n  /** The title of the step. */\n  children: StringLikeChildren;\n  /** The description of the step. Optionally, you can pass a React node to render rich text. */\n  description?: ReactNode;\n  /** The status of the step. */\n  status?: StepperStatus;\n}\n\n/**\n * Represents a single step in a stepper component.\n */\nexport function UNSTABLE_StepperItem({\n  children,\n  description,\n  status: overrideStatus,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: UNSTABLE_StepperItemProps) {\n  const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);\n  const isCurrent = stepIndex === currentStep;\n  const isPrevious = stepIndex < currentStep;\n  const isLast = stepIndex === stepCount - 1;\n  const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : 'incomplete');\n  const isNavigable = !isCurrent && onChange != null && (overrideStatus != null || isPrevious);\n\n  return (\n    <div\n      {...props}\n      role=\"listitem\"\n      className={clsx('cim-stepper-item', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-status={status}\n      aria-current={isCurrent}\n    >\n      <div className=\"cim-stepper-item-icon-container\" aria-hidden>\n        <StepperItemIndicator status={status} isNavigable={isNavigable} isCurrent={isCurrent} onChange={onChange} />\n        {!isLast && orientation === 'vertical' && <div className=\"cim-stepper-item-tail\" />}\n      </div>\n      <div className=\"cim-stepper-item-content\">\n        <StepperItemTitle status={status} isNavigable={isNavigable} isCurrent={isCurrent} onChange={onChange}>\n          {children}\n        </StepperItemTitle>\n        {description && (\n          <Text as=\"div\" UNSAFE_className=\"cim-stepper-item-description\" variant=\"medium\" tone=\"muted\">\n            {description}\n          </Text>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemIndicator({\n  status,\n  isNavigable,\n  isCurrent,\n  onChange,\n}: {\n  status: StepperStatus;\n  isNavigable: boolean;\n  isCurrent: boolean;\n  onChange?: () => void;\n}) {\n  const icon = (\n    <div className=\"cim-stepper-item-icon\">\n      {status === 'in-progress' && !isCurrent ? null : createElement(statusIconMap[status])}\n    </div>\n  );\n\n  if (isNavigable) {\n    return (\n      <RACButton className=\"cim-stepper-item-icon-button\" type=\"button\" onClick={onChange} excludeFromTabOrder>\n        {icon}\n      </RACButton>\n    );\n  }\n\n  return <div className=\"cim-stepper-item-icon-button\">{icon}</div>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemTitle({\n  children,\n  status,\n  isNavigable,\n  isCurrent,\n  onChange,\n}: {\n  children: StringLikeChildren;\n  status: StepperStatus;\n  isNavigable: boolean;\n  isCurrent: boolean;\n  onChange?: () => void;\n}) {\n  const assistiveText = assistiveTextMap[status];\n\n  const titleElement = (\n    <Text as=\"span\" variant={isCurrent ? 'body-semibold' : 'body'} UNSAFE_className=\"cim-stepper-item-title\">\n      <RACVisuallyHidden>{assistiveText}: </RACVisuallyHidden>\n      {children}\n    </Text>\n  );\n\n  return isNavigable ? (\n    <RACButton className=\"cim-stepper-item-title-button\" type=\"button\" onClick={onChange}>\n      {titleElement}\n    </RACButton>\n  ) : (\n    <div className=\"cim-stepper-item-title-button\">{titleElement}</div>\n  );\n}\n"]}

package/dist/commonjs/components/stepper/stepper.d.ts

@@ -16,6 +16,6 @@ export interface UNSTABLE_StepperProps extends CommonProps {
 /**
  * Displays a series of steps in a process.
  */
-declare const _UNSTABLE_Stepper: (props: UNSTABLE_StepperProps & import("react").RefAttributes<HTMLOListElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+declare const _UNSTABLE_Stepper: (props: UNSTABLE_StepperProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _UNSTABLE_Stepper as UNSTABLE_Stepper };
 //# sourceMappingURL=stepper.d.ts.map

package/dist/commonjs/components/stepper/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACzC;AAoDD;;GAEG;AACH,QAAA,MAAM,iBAAiB,yKAA0D,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACzC;AAqDD;;GAEG;AACH,QAAA,MAAM,iBAAiB,uKAA0D,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}

package/dist/commonjs/components/stepper/stepper.js

@@ -13,7 +13,7 @@ const with_style_props_js_1 = require("../../with-style-props.js");
 const context_js_1 = require("./context.js");
 function UNSTABLE_Stepper({ children, currentStep, onChange, orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const stepCount = react_1.Children.count(children);
-    return ((0, jsx_runtime_1.jsx)("ol", { ...props, ref: ref, className: (0, clsx_1.default)('cim-stepper', UNSAFE_className), style: { ...UNSAFE_style, '--cim-stepper-step-count': stepCount }, "data-orientation": orientation, children: react_1.Children.map(children, (child, stepIndex) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, role: "list", ref: ref, className: (0, clsx_1.default)('cim-stepper', UNSAFE_className), style: { ...UNSAFE_style, '--cim-stepper-step-count': stepCount }, "data-orientation": orientation, children: react_1.Children.map(children, (child, stepIndex) => {
             const isLast = stepIndex === stepCount - 1;
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(context_js_1.StepContext.Provider, { value: {
                             orientation,
@@ -24,7 +24,7 @@ function UNSTABLE_Stepper({ children, currentStep, onChange, orientation = 'hori
                                 (() => {
                                     onChange(stepIndex);
                                 }),
-                        }, children: child }), !isLast && orientation === 'horizontal' && (0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-tail" })] }));
+                        }, children: child }), !isLast && orientation === 'horizontal' && (0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-tail", role: "presentation" })] }));
         }) }));
 }
 /**

package/dist/commonjs/components/stepper/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAE3D,6CAA2C;AAgB3C,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACc,EACxB,GAAmC;IAEnC,MAAM,SAAS,GAAG,gBAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE3C,OAAO,CACL,kCACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,EAAE,GAAG,YAAY,EAAE,0BAA0B,EAAE,SAAS,EAAmB,sBAChE,WAAW,YAE5B,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;YAC3C,MAAM,MAAM,GAAG,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC;YAE3C,OAAO,CACL,6DACE,uBAAC,wBAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;4BACL,WAAW;4BACX,SAAS,EAAE,gBAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;4BACnC,WAAW,EAAE,WAAW,IAAI,CAAC,CAAC;4BAC9B,SAAS;4BACT,QAAQ,EACN,QAAQ;gCACR,CAAC,GAAG,EAAE;oCACJ,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACtB,CAAC,CAAC;yBACL,YAEA,KAAK,GACe,EACtB,CAAC,MAAM,IAAI,WAAW,KAAK,YAAY,IAAI,gCAAK,SAAS,EAAC,uBAAuB,GAAG,IACpF,CACJ,CAAC;QACJ,CAAC,CAAC,GACC,CACN,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,iBAAiB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;AAEpD,6CAAgB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { StepContext } from './context.js';\n\nexport interface UNSTABLE_StepperProps extends CommonProps {\n  /** The steps to display in the stepper. */\n  children: ReactNode;\n  /** The index of the active step. */\n  currentStep?: number;\n  /** The callback to call when the current step changes. */\n  onChange?: (step: number) => void;\n  /** The orientation of the stepper.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nfunction UNSTABLE_Stepper(\n  {\n    children,\n    currentStep,\n    onChange,\n    orientation = 'horizontal',\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: UNSTABLE_StepperProps,\n  ref: ForwardedRef<HTMLOListElement>,\n) {\n  const stepCount = Children.count(children);\n\n  return (\n    <ol\n      {...props}\n      ref={ref}\n      className={clsx('cim-stepper', UNSAFE_className)}\n      style={{ ...UNSAFE_style, '--cim-stepper-step-count': stepCount } as CSSProperties}\n      data-orientation={orientation}\n    >\n      {Children.map(children, (child, stepIndex) => {\n        const isLast = stepIndex === stepCount - 1;\n\n        return (\n          <>\n            <StepContext.Provider\n              value={{\n                orientation,\n                stepCount: Children.count(children),\n                currentStep: currentStep ?? -1,\n                stepIndex,\n                onChange:\n                  onChange &&\n                  (() => {\n                    onChange(stepIndex);\n                  }),\n              }}\n            >\n              {child}\n            </StepContext.Provider>\n            {!isLast && orientation === 'horizontal' && <div className=\"cim-stepper-item-tail\" />}\n          </>\n        );\n      })}\n    </ol>\n  );\n}\n\n/**\n * Displays a series of steps in a process.\n */\nconst _UNSTABLE_Stepper = withStyleProps(forwardRef(UNSTABLE_Stepper), 'Stepper');\n\nexport { _UNSTABLE_Stepper as UNSTABLE_Stepper };\n"]}
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAE3D,6CAA2C;AAgB3C,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACc,EACxB,GAAiC;IAEjC,MAAM,SAAS,GAAG,gBAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE3C,OAAO,CACL,mCACM,KAAK,EACT,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,EAAE,GAAG,YAAY,EAAE,0BAA0B,EAAE,SAAS,EAAmB,sBAChE,WAAW,YAE5B,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;YAC3C,MAAM,MAAM,GAAG,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC;YAE3C,OAAO,CACL,6DACE,uBAAC,wBAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;4BACL,WAAW;4BACX,SAAS,EAAE,gBAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;4BACnC,WAAW,EAAE,WAAW,IAAI,CAAC,CAAC;4BAC9B,SAAS;4BACT,QAAQ,EACN,QAAQ;gCACR,CAAC,GAAG,EAAE;oCACJ,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACtB,CAAC,CAAC;yBACL,YAEA,KAAK,GACe,EACtB,CAAC,MAAM,IAAI,WAAW,KAAK,YAAY,IAAI,gCAAK,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,cAAc,GAAG,IACxG,CACJ,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,iBAAiB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;AAEpD,6CAAgB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { StepContext } from './context.js';\n\nexport interface UNSTABLE_StepperProps extends CommonProps {\n  /** The steps to display in the stepper. */\n  children: ReactNode;\n  /** The index of the active step. */\n  currentStep?: number;\n  /** The callback to call when the current step changes. */\n  onChange?: (step: number) => void;\n  /** The orientation of the stepper.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nfunction UNSTABLE_Stepper(\n  {\n    children,\n    currentStep,\n    onChange,\n    orientation = 'horizontal',\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: UNSTABLE_StepperProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const stepCount = Children.count(children);\n\n  return (\n    <div\n      {...props}\n      role=\"list\"\n      ref={ref}\n      className={clsx('cim-stepper', UNSAFE_className)}\n      style={{ ...UNSAFE_style, '--cim-stepper-step-count': stepCount } as CSSProperties}\n      data-orientation={orientation}\n    >\n      {Children.map(children, (child, stepIndex) => {\n        const isLast = stepIndex === stepCount - 1;\n\n        return (\n          <>\n            <StepContext.Provider\n              value={{\n                orientation,\n                stepCount: Children.count(children),\n                currentStep: currentStep ?? -1,\n                stepIndex,\n                onChange:\n                  onChange &&\n                  (() => {\n                    onChange(stepIndex);\n                  }),\n              }}\n            >\n              {child}\n            </StepContext.Provider>\n            {!isLast && orientation === 'horizontal' && <div className=\"cim-stepper-item-tail\" role=\"presentation\" />}\n          </>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * Displays a series of steps in a process.\n */\nconst _UNSTABLE_Stepper = withStyleProps(forwardRef(UNSTABLE_Stepper), 'Stepper');\n\nexport { _UNSTABLE_Stepper as UNSTABLE_Stepper };\n"]}

package/dist/commonjs/components/stepper/types.d.ts

@@ -1,2 +1,2 @@
-export type StepperStatus = 'complete' | 'error' | 'warning' | 'in-progress';
+export type StepperStatus = 'incomplete' | 'complete' | 'error' | 'warning' | 'in-progress';
 //# sourceMappingURL=types.d.ts.map

package/dist/commonjs/components/stepper/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC"}

package/dist/commonjs/components/stepper/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"","sourcesContent":["export type StepperStatus = 'complete' | 'error' | 'warning' | 'in-progress';\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"","sourcesContent":["export type StepperStatus = 'incomplete' | 'complete' | 'error' | 'warning' | 'in-progress';\n"]}

package/dist/esm/components/select/select.js

@@ -37,7 +37,7 @@ function Select({ children, items, label, description, error, UNSAFE_className,
         focus: () => triggerRef.current?.focus(),
     }), []);
     const listBox = (_jsxs(RACListBox, { className: "cim-select-listbox", onScroll: onScroll, renderEmptyState: () => isLoading ? _jsx(Spinner, { "aria-label": collectionMessages.format('loading'), size: "small", marginY: 8 }) : null, children: [_jsx(RACCollection, { items: items, children: children }), _jsx(RACListBoxLoadMoreItem, { onLoadMore: onLoadMore, isLoading: isLoading, children: _jsx(Spinner, { "aria-label": collectionMessages.format('loadingMore'), size: "small", marginY: 8 }) })] }));
-    return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, value: selectedKey, defaultValue: defaultSelectedKey, onChange: onSelectionChange, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACButton, { ref: triggerRef, className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' })), children: ({ selectedText }) => selectedText }), _jsx(IconChevronDown, {})] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
+    return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, value: selectedKey, defaultValue: defaultSelectedKey, onChange: onSelectionChange, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACButton, { ref: triggerRef, className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' })), children: ({ selectedText, defaultChildren, isPlaceholder }) => (isPlaceholder ? defaultChildren : selectedText) }), _jsx(IconChevronDown, {})] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
 }
 /**
  * Allows users to select one item from a collapsible list.

package/dist/esm/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAA0C,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5F,OAAO,EACL,MAAM,IAAI,SAAS,EACnB,UAAU,IAAI,aAAa,EAC3B,MAAM,IAAI,SAAS,EACnB,OAAO,IAAI,UAAU,EACrB,mBAAmB,IAAI,sBAAsB,EAC7C,WAAW,IAAI,cAAc,EAC7B,cAAc,IAAI,iBAAiB,EACnC,UAAU,IAAI,aAAa,EAE3B,MAAM,IAAI,SAAS,EACnB,WAAW,IAAI,cAAc,EAC7B,IAAI,IAAI,OAAO,EAGf,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC5G,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAWhD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,MAAM,sBAAsB,GAAyB;IACnD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAyCF,SAAS,MAAM,CACb,EACE,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,MAAM,EACN,kBAAkB,EAAE,SAAS,EAC7B,mBAAmB,EAAE,UAAU,EAC/B,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEnD,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,+EAA+E,CAAC,CAAC;QAChG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,IAAI,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;IACxF,CAAC;IAED,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,qBAAqB,CAAC,CAAC;IAEvE,mBAAmB,CACjB,MAAM,EACN,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE;KACzC,CAAC,EACF,EAAE,CACH,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,MAAC,UAAU,IACT,SAAS,EAAC,oBAAoB,EAC9B,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,GAAG,EAAE,CACrB,SAAS,CAAC,CAAC,CAAC,KAAC,OAAO,kBAAa,kBAAkB,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,GAAI,CAAC,CAAC,CAAC,IAAI,aAG3G,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,EACvD,KAAC,sBAAsB,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAClE,KAAC,OAAO,kBAAa,kBAAkB,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,GAAI,GACnE,IACd,CACd,CAAC;IAEF,OAAO,CACL,MAAC,SAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE,WAAW,EAClB,YAAY,EAAE,kBAAkB,EAChC,QAAQ,EAAE,iBAAiB,aAE3B,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,MAAC,SAAS,IAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,mBAAmB,aACvD,KAAC,cAAc,IACb,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,YAEvG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,GACpB,EACjB,KAAC,eAAe,KAAG,IACT,EACZ,KAAC,cAAc,cAAE,KAAK,GAAkB,EACxC,KAAC,oBAAoB,cAAE,WAAW,GAAwB,EAC1D,KAAC,eAAe,IACd,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,YAEb,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACe,IACR,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAS7B,kDAAkD;AAClD,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAChE,MAAM,SAAS,GAAG,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IAEvD,OAAO,CACL,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAC,iBAAiB,EAAC,SAAS,EAAE,SAAS,YACxE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACnB,8BACE,KAAC,SAAS,KAAG,EAEb,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,YACjG,QAAQ,GACD,IACT,CACJ,GACc,CAClB,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAStC,wDAAwD;AACxD,MAAM,UAAU,aAAa,CAA2B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAyB;IACjH,IAAI,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;IAC/F,CAAC;IAED,OAAO,CACL,MAAC,iBAAiB,OAAK,KAAK,EAAE,SAAS,EAAC,oBAAoB,aAC1D,KAAC,SAAS,IACR,SAAS,EAAE,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAErG,KAAK,GACI,EACZ,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,IACrC,CACrB,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type {\n  ApiProps,\n  AsyncItemLoadingProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  rowHeight: 40,\n  headingHeight: 32,\n  loaderHeight: 40,\n  padding: 0,\n  gap: 0,\n};\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    AsyncItemLoadingProps,\n    ApiProps<SelectApi>,\n    Pick<\n      RACSelectProps<T>,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    > {\n  /** The currently selected key in the collection (controlled). */\n  selectedKey?: Key | null;\n  /** The initial selected key in the collection (uncontrolled). */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (key: Key | null) => void;\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n  /** Handler that is called when the list of items is scrolled. */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n  /** Focuses the trigger button and opens the list of items. */\n  focus: () => void;\n}\n\nfunction Select<T extends CollectionItem>(\n  {\n    children,\n    items,\n    label,\n    description,\n    error,\n    UNSAFE_className,\n    UNSAFE_style,\n    onScroll,\n    isVirtualized = false,\n    apiRef,\n    UNSTABLE_isLoading: isLoading,\n    UNSTABLE_onLoadMore: onLoadMore,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    ...props\n  }: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n  useImperativeHandle(\n    apiRef,\n    () => ({\n      focus: () => triggerRef.current?.focus(),\n    }),\n    [],\n  );\n\n  const listBox = (\n    <RACListBox\n      className=\"cim-select-listbox\"\n      onScroll={onScroll}\n      renderEmptyState={() =>\n        isLoading ? <Spinner aria-label={collectionMessages.format('loading')} size=\"small\" marginY={8} /> : null\n      }\n    >\n      <RACCollection items={items}>{children}</RACCollection>\n      <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n        <Spinner aria-label={collectionMessages.format('loadingMore')} size=\"small\" marginY={8} />\n      </RACListBoxLoadMoreItem>\n    </RACListBox>\n  );\n\n  return (\n    <RACSelect\n      {...props}\n      ref={ref}\n      className={clsx('cim-select', UNSAFE_className)}\n      style={UNSAFE_style}\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      onChange={onSelectionChange}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton ref={triggerRef} className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' }))}\n        >\n          {({ selectedText }) => selectedText}\n        </RACSelectValue>\n        <IconChevronDown />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        {isVirtualized ? (\n          <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n            {listBox}\n          </RACVirtualizer>\n        ) : (\n          listBox\n        )}\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue = stringLikeChildrenToString(children);\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAA0C,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5F,OAAO,EACL,MAAM,IAAI,SAAS,EACnB,UAAU,IAAI,aAAa,EAC3B,MAAM,IAAI,SAAS,EACnB,OAAO,IAAI,UAAU,EACrB,mBAAmB,IAAI,sBAAsB,EAC7C,WAAW,IAAI,cAAc,EAC7B,cAAc,IAAI,iBAAiB,EACnC,UAAU,IAAI,aAAa,EAE3B,MAAM,IAAI,SAAS,EACnB,WAAW,IAAI,cAAc,EAC7B,IAAI,IAAI,OAAO,EAGf,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC5G,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAWhD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,MAAM,sBAAsB,GAAyB;IACnD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAyCF,SAAS,MAAM,CACb,EACE,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,MAAM,EACN,kBAAkB,EAAE,SAAS,EAC7B,mBAAmB,EAAE,UAAU,EAC/B,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEnD,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,+EAA+E,CAAC,CAAC;QAChG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,IAAI,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;IACxF,CAAC;IAED,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,qBAAqB,CAAC,CAAC;IAEvE,mBAAmB,CACjB,MAAM,EACN,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE;KACzC,CAAC,EACF,EAAE,CACH,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,MAAC,UAAU,IACT,SAAS,EAAC,oBAAoB,EAC9B,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,GAAG,EAAE,CACrB,SAAS,CAAC,CAAC,CAAC,KAAC,OAAO,kBAAa,kBAAkB,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,GAAI,CAAC,CAAC,CAAC,IAAI,aAG3G,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,EACvD,KAAC,sBAAsB,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAClE,KAAC,OAAO,kBAAa,kBAAkB,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,GAAI,GACnE,IACd,CACd,CAAC;IAEF,OAAO,CACL,MAAC,SAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE,WAAW,EAClB,YAAY,EAAE,kBAAkB,EAChC,QAAQ,EAAE,iBAAiB,aAE3B,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,MAAC,SAAS,IAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,mBAAmB,aACvD,KAAC,cAAc,IACb,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,YAEvG,CAAC,EAAE,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,GACxF,EACjB,KAAC,eAAe,KAAG,IACT,EACZ,KAAC,cAAc,cAAE,KAAK,GAAkB,EACxC,KAAC,oBAAoB,cAAE,WAAW,GAAwB,EAC1D,KAAC,eAAe,IACd,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,YAEb,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACe,IACR,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAS7B,kDAAkD;AAClD,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAChE,MAAM,SAAS,GAAG,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IAEvD,OAAO,CACL,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAC,iBAAiB,EAAC,SAAS,EAAE,SAAS,YACxE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACnB,8BACE,KAAC,SAAS,KAAG,EAEb,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,YACjG,QAAQ,GACD,IACT,CACJ,GACc,CAClB,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAStC,wDAAwD;AACxD,MAAM,UAAU,aAAa,CAA2B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAyB;IACjH,IAAI,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;IAC/F,CAAC;IAED,OAAO,CACL,MAAC,iBAAiB,OAAK,KAAK,EAAE,SAAS,EAAC,oBAAoB,aAC1D,KAAC,SAAS,IACR,SAAS,EAAE,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAErG,KAAK,GACI,EACZ,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,IACrC,CACrB,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type {\n  ApiProps,\n  AsyncItemLoadingProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  rowHeight: 40,\n  headingHeight: 32,\n  loaderHeight: 40,\n  padding: 0,\n  gap: 0,\n};\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    AsyncItemLoadingProps,\n    ApiProps<SelectApi>,\n    Pick<\n      RACSelectProps<T>,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    > {\n  /** The currently selected key in the collection (controlled). */\n  selectedKey?: Key | null;\n  /** The initial selected key in the collection (uncontrolled). */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (key: Key | null) => void;\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n  /** Handler that is called when the list of items is scrolled. */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n  /** Focuses the trigger button and opens the list of items. */\n  focus: () => void;\n}\n\nfunction Select<T extends CollectionItem>(\n  {\n    children,\n    items,\n    label,\n    description,\n    error,\n    UNSAFE_className,\n    UNSAFE_style,\n    onScroll,\n    isVirtualized = false,\n    apiRef,\n    UNSTABLE_isLoading: isLoading,\n    UNSTABLE_onLoadMore: onLoadMore,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    ...props\n  }: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n  useImperativeHandle(\n    apiRef,\n    () => ({\n      focus: () => triggerRef.current?.focus(),\n    }),\n    [],\n  );\n\n  const listBox = (\n    <RACListBox\n      className=\"cim-select-listbox\"\n      onScroll={onScroll}\n      renderEmptyState={() =>\n        isLoading ? <Spinner aria-label={collectionMessages.format('loading')} size=\"small\" marginY={8} /> : null\n      }\n    >\n      <RACCollection items={items}>{children}</RACCollection>\n      <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n        <Spinner aria-label={collectionMessages.format('loadingMore')} size=\"small\" marginY={8} />\n      </RACListBoxLoadMoreItem>\n    </RACListBox>\n  );\n\n  return (\n    <RACSelect\n      {...props}\n      ref={ref}\n      className={clsx('cim-select', UNSAFE_className)}\n      style={UNSAFE_style}\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      onChange={onSelectionChange}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton ref={triggerRef} className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'body', alignment: 'start' }))}\n        >\n          {({ selectedText, defaultChildren, isPlaceholder }) => (isPlaceholder ? defaultChildren : selectedText)}\n        </RACSelectValue>\n        <IconChevronDown />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        {isVirtualized ? (\n          <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n            {listBox}\n          </RACVirtualizer>\n        ) : (\n          listBox\n        )}\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue = stringLikeChildrenToString(children);\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}

package/dist/esm/components/stepper/stepper-item.d.ts

@@ -1,16 +1,16 @@
-import type { CommonProps } from '../types.js';
+import { type ReactNode } from 'react';
+import type { CommonProps, StringLikeChildren } from '../types.js';
 import type { StepperStatus } from './types.js';
 export interface UNSTABLE_StepperItemProps extends CommonProps {
     /** The title of the step. */
-    title: string;
-    /** The description of the step. */
-    description?: string;
+    children: StringLikeChildren;
+    /** The description of the step. Optionally, you can pass a React node to render rich text. */
+    description?: ReactNode;
     /** The status of the step. */
     status?: StepperStatus;
 }
 /**
  * Represents a single step in a stepper component.
  */
-declare const _UNSTABLE_StepperItem: (props: UNSTABLE_StepperItemProps & import("react").RefAttributes<HTMLLIElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };
+export declare function UNSTABLE_StepperItem({ children, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_StepperItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=stepper-item.d.ts.map

package/dist/esm/components/stepper/stepper-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper-item.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAoED;;GAEG;AACH,QAAA,MAAM,qBAAqB,0KAAkE,CAAC;AAE9F,OAAO,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"stepper-item.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAwChD,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,6BAA6B;IAC7B,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8FAA8F;IAC9F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,WAAW,EACX,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAiC3B"}

package/dist/esm/components/stepper/stepper-item.js

@@ -1,31 +1,21 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useContext } from 'react';
-import { useId } from 'react-aria';
-import { forwardRef } from '../../forward-ref.js';
+import { createElement, Fragment, useContext } from 'react';
+import { Button as RACButton, VisuallyHidden as RACVisuallyHidden } from 'react-aria-components';
 import { IconCheckBold, IconCircleBoldFill } from '../../icons/index.js';
-import { withStyleProps } from '../../with-style-props.js';
 import { Text } from '../typography/text.js';
 import { StepContext } from './context.js';
-function UNSTABLE_StepperItem({ title, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    const labelId = useId();
-    const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);
-    const isCurrent = stepIndex === currentStep;
-    const isPrevious = stepIndex < currentStep;
-    const isLast = stepIndex === stepCount - 1;
-    const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : undefined);
-    const isNavigable = !isCurrent && onChange && (status != null || isPrevious);
-    const titleElement = (_jsx(Text, { id: labelId, as: "span", variant: isCurrent ? 'body-semibold' : 'body', UNSAFE_className: "cim-stepper-item-title", children: title }));
-    const iconElement = (_jsx("div", { className: "cim-stepper-item-icon", children: status && _jsx(StepperItemIcon, { status: status, isCurrent: isCurrent }) }));
-    return (_jsxs("li", { ...props, ref: ref, className: clsx('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [_jsxs("div", { className: "cim-stepper-item-icon-container", children: [isNavigable ? (_jsx("button", { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, "aria-labelledby": labelId, children: iconElement })) : (iconElement), !isLast && orientation === 'vertical' && _jsx("div", { className: "cim-stepper-item-tail" })] }), _jsxs("div", { className: "cim-stepper-item-content", children: [isNavigable ? (_jsx("button", { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, tabIndex: -1, children: titleElement })) : (titleElement), description && (_jsx(Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
-}
-/**
- * Represents a single step in a stepper component.
- */
-const _UNSTABLE_StepperItem = withStyleProps(forwardRef(UNSTABLE_StepperItem), 'StepperItem');
-export { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };
-const statusToIcon = {
+// TODO: move to translations
+const assistiveTextMap = {
+    incomplete: 'Incomplete',
+    complete: 'Completed',
+    error: 'Invalid',
+    warning: 'Warning',
+    'in-progress': 'In progress',
+};
+const statusIconMap = {
+    incomplete: Fragment,
     complete: IconCheckBold,
     // TODO: replace with icon from library when available
     error: () => (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z", fill: "currentColor" }), _jsx("path", { d: "M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z", fill: "currentColor" })] })),
@@ -33,12 +23,30 @@ const statusToIcon = {
     warning: () => (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z", fill: "currentColor" }), _jsx("line", { x1: "16", y1: "8", x2: "16", y2: "18", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" })] })),
     'in-progress': IconCircleBoldFill,
 };
+/**
+ * Represents a single step in a stepper component.
+ */
+export function UNSTABLE_StepperItem({ children, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }) {
+    const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);
+    const isCurrent = stepIndex === currentStep;
+    const isPrevious = stepIndex < currentStep;
+    const isLast = stepIndex === stepCount - 1;
+    const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : 'incomplete');
+    const isNavigable = !isCurrent && onChange != null && (overrideStatus != null || isPrevious);
+    return (_jsxs("div", { ...props, role: "listitem", className: clsx('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [_jsxs("div", { className: "cim-stepper-item-icon-container", "aria-hidden": true, children: [_jsx(StepperItemIndicator, { status: status, isNavigable: isNavigable, isCurrent: isCurrent, onChange: onChange }), !isLast && orientation === 'vertical' && _jsx("div", { className: "cim-stepper-item-tail" })] }), _jsxs("div", { className: "cim-stepper-item-content", children: [_jsx(StepperItemTitle, { status: status, isNavigable: isNavigable, isCurrent: isCurrent, onChange: onChange, children: children }), description && (_jsx(Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
+}
 // eslint-disable-next-line react-refresh/only-export-components
-function StepperItemIcon({ status, isCurrent }) {
-    const Icon = statusToIcon[status];
-    if (status === 'in-progress' && !isCurrent) {
-        return null;
+function StepperItemIndicator({ status, isNavigable, isCurrent, onChange, }) {
+    const icon = (_jsx("div", { className: "cim-stepper-item-icon", children: status === 'in-progress' && !isCurrent ? null : createElement(statusIconMap[status]) }));
+    if (isNavigable) {
+        return (_jsx(RACButton, { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, excludeFromTabOrder: true, children: icon }));
     }
-    return _jsx(Icon, { "aria-hidden": true });
+    return _jsx("div", { className: "cim-stepper-item-icon-button", children: icon });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+function StepperItemTitle({ children, status, isNavigable, isCurrent, onChange, }) {
+    const assistiveText = assistiveTextMap[status];
+    const titleElement = (_jsxs(Text, { as: "span", variant: isCurrent ? 'body-semibold' : 'body', UNSAFE_className: "cim-stepper-item-title", children: [_jsxs(RACVisuallyHidden, { children: [assistiveText, ": "] }), children] }));
+    return isNavigable ? (_jsx(RACButton, { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, children: titleElement })) : (_jsx("div", { className: "cim-stepper-item-title-button", children: titleElement }));
 }
 //# sourceMappingURL=stepper-item.js.map