@cimpress-ui/react 0.1.0 → 0.3.0

package/dist/commonjs/components/combo-box/combo-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, useEffect, useRef, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  ComboBox as RACComboBox,\n  ComboBoxStateContext as RACComboBoxStateContext,\n  Group as RACGroup,\n  Header as RACHeader,\n  Input as RACInput,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Text as RACText,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckmark, IconChevronDownFill } from '../../icons/index.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 type {\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\n/** Represents the state of the `ComboBox` component for validation purposes. */\nexport interface ComboBoxValidationValue {\n  /** The selected key in the ComboBox. */\n  selectedKey: Key | null;\n  /** The value of the ComboBox input. */\n  inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldWithPlaceholderProps<ComboBoxValidationValue>,\n    CollectionProps<T>,\n    Pick<\n      RACComboBoxProps<T>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction ComboBox<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    items,\n    children,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    isReadOnly,\n    onScroll,\n    ...props\n  }: ComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const triggerPositioningRef = useRef<HTMLDivElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (items != null && typeof children !== 'function') {\n    console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACComboBox\n      {...props}\n      ref={ref}\n      className={clsx('cim-combo-box', UNSAFE_className)}\n      style={UNSAFE_style}\n      menuTrigger=\"focus\"\n      isReadOnly={isReadOnly}\n      data-readonly={isReadOnly ? true : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-combo-box-input-wrapper\" ref={triggerPositioningRef}>\n        <ComboBoxInput isReadOnly={isReadOnly} placeholder={placeholder} />\n        <RACButton className=\"cim-combo-box-button\">\n          <IconChevronDownFill />\n        </RACButton>\n      </RACGroup>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n        // Position the list relative to wrapper div instead of input to account for border\n        triggerRef={triggerPositioningRef}\n        widthCorrection={2} // React Aria calculates the width of the trigger based on the width of the input + button, so we need to add 2px to account for the border on `.cim-combo-box-input-wrapper`\n      >\n        <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n          {children}\n        </RACListBox>\n      </CollapsibleList>\n    </RACComboBox>\n  );\n}\n\n// TODO: add link to usage guidelines\n/** Allows users to filter a collapsible list and select one item from it. */\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n  isReadOnly,\n  placeholder,\n}: {\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n\n  return (\n    <RACInput\n      className={clsx('cim-combo-box-input', textStyle({ variant: 'medium' }))}\n      // Ensure the popover opens when the input is clicked.\n      // By default, React Aria only opens the popover when the input is focused.\n      onClick={() => !isReadOnly && comboBoxState!.open()}\n      placeholder={placeholder}\n    />\n  );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem>\n  extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `ComboBox`. */\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-combo-box-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheckmark />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<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 `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n  title,\n  children,\n  items,\n  ...props\n}: ComboBoxSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n      <RACHeader\n        className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}
+{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, useEffect, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  ComboBox as RACComboBox,\n  ComboBoxStateContext as RACComboBoxStateContext,\n  Group as RACGroup,\n  Header as RACHeader,\n  Input as RACInput,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Text as RACText,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.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 type {\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\n/** Represents the state of the `ComboBox` component for validation purposes. */\nexport interface ComboBoxValidationValue {\n  /** The selected key in the ComboBox. */\n  selectedKey: Key | null;\n  /** The value of the ComboBox input. */\n  inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldWithPlaceholderProps<ComboBoxValidationValue>,\n    CollectionProps<T>,\n    Pick<\n      RACComboBoxProps<T>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction ComboBox<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    items,\n    children,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    isReadOnly,\n    onScroll,\n    ...props\n  }: ComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (items != null && typeof children !== 'function') {\n    console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACComboBox\n      {...props}\n      ref={ref}\n      className={clsx('cim-combo-box', UNSAFE_className)}\n      style={UNSAFE_style}\n      menuTrigger=\"focus\"\n      isReadOnly={isReadOnly}\n      data-readonly={isReadOnly ? true : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-combo-box-input-group\">\n        <ComboBoxInput isReadOnly={isReadOnly} placeholder={placeholder} />\n        <RACButton className=\"cim-combo-box-button\">\n          <IconChevronDown />\n        </RACButton>\n      </RACGroup>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n          {children}\n        </RACListBox>\n      </CollapsibleList>\n    </RACComboBox>\n  );\n}\n\n/**\n * Allows users to filter a collapsible list and select one item from it.\n *\n * See [combo box usage guidelines](https://ui.cimpress.com/components/combo-box)\n */\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n  isReadOnly,\n  placeholder,\n}: {\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n\n  return (\n    <RACInput\n      className={clsx('cim-combo-box-input', textStyle({ variant: 'medium' }))}\n      // Ensure the popover opens when the input is clicked.\n      // By default, React Aria only opens the popover when the input is focused.\n      onClick={() => !isReadOnly && comboBoxState!.open()}\n      placeholder={placeholder}\n    />\n  );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem>\n  extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `ComboBox`. */\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-combo-box-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\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<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 `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n  title,\n  children,\n  items,\n  ...props\n}: ComboBoxSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n      <RACHeader\n        className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}

package/dist/commonjs/components/disclosure/disclosure-group.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import { type DisclosureGroupProps as RACDisclosureGroupProps } from 'react-aria-components';
+import type { CommonProps } from '../types.js';
+export interface UNSTABLE_DisclosureGroupProps extends CommonProps, Pick<RACDisclosureGroupProps, 'isDisabled' | 'allowsMultipleExpanded' | 'defaultExpandedKeys' | 'expandedKeys' | 'onExpandedChange'> {
+    /** The disclosures to group together. */
+    children: ReactNode;
+}
+/**
+ * Displays a grouping of related disclosures.
+ *
+ * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).
+ */
+declare const _DisclosureGroup: (props: UNSTABLE_DisclosureGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _DisclosureGroup as UNSTABLE_DisclosureGroup };
+//# sourceMappingURL=disclosure-group.d.ts.map

package/dist/commonjs/components/disclosure/disclosure-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure-group.d.ts","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEL,KAAK,oBAAoB,IAAI,uBAAuB,EACrD,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,6BACf,SAAQ,WAAW,EACjB,IAAI,CACF,uBAAuB,EACvB,YAAY,GAAG,wBAAwB,GAAG,qBAAqB,GAAG,cAAc,GAAG,kBAAkB,CACtG;IACH,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAkBD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,+KAA0E,CAAC;AAEjG,OAAO,EAAE,gBAAgB,IAAI,wBAAwB,EAAE,CAAC"}

package/dist/commonjs/components/disclosure/disclosure-group.js

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_DisclosureGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+function UNSTABLE_DisclosureGroup({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.DisclosureGroup, { ...props, ref: ref, className: (0, clsx_1.default)('cim-disclosure-group', UNSAFE_className), style: UNSAFE_style, children: children }));
+}
+/**
+ * Displays a grouping of related disclosures.
+ *
+ * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).
+ */
+const _DisclosureGroup = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_DisclosureGroup), 'DisclosureGroup');
+exports.UNSTABLE_DisclosureGroup = _DisclosureGroup;
+//# sourceMappingURL=disclosure-group.js.map

package/dist/commonjs/components/disclosure/disclosure-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure-group.js","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAG+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAa3D,SAAS,wBAAwB,CAC/B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiC,EACrF,GAAiC;IAEjC,OAAO,CACL,uBAAC,uCAAkB,OACb,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,gBAAgB,CAAC,EACzD,KAAK,EAAE,YAAY,YAElB,QAAQ,GACU,CACtB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,wBAAwB,CAAC,EAAE,iBAAiB,CAAC,CAAC;AAEpE,oDAAwB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  DisclosureGroup as RACDisclosureGroup,\n  type DisclosureGroupProps as RACDisclosureGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_DisclosureGroupProps\n  extends CommonProps,\n    Pick<\n      RACDisclosureGroupProps,\n      'isDisabled' | 'allowsMultipleExpanded' | 'defaultExpandedKeys' | 'expandedKeys' | 'onExpandedChange'\n    > {\n  /** The disclosures to group together. */\n  children: ReactNode;\n}\n\nfunction UNSTABLE_DisclosureGroup(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_DisclosureGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACDisclosureGroup\n      {...props}\n      ref={ref}\n      className={clsx('cim-disclosure-group', UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      {children}\n    </RACDisclosureGroup>\n  );\n}\n\n/**\n * Displays a grouping of related disclosures.\n *\n * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).\n */\nconst _DisclosureGroup = withStyleProps(forwardRef(UNSTABLE_DisclosureGroup), 'DisclosureGroup');\n\nexport { _DisclosureGroup as UNSTABLE_DisclosureGroup };\n"]}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { type DisclosureProps as RACDisclosureProps } from 'react-aria-components';
+import type { CommonProps } from '../types.js';
+export interface UNSTABLE_DisclosureProps extends Omit<CommonProps, 'id'>, Pick<RACDisclosureProps, 'id' | 'isDisabled' | 'defaultExpanded' | 'isExpanded' | 'onExpandedChange'> {
+    /** The content to display when the disclosure is expanded. */
+    children: ReactNode;
+    /** The title that is always visible in the disclosure header. */
+    title: string;
+    /** The actions displayed in the disclosure header. */
+    actions?: ReactNode;
+}
+/**
+ * Displays a collapsible section of content.
+ *
+ * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).
+ */
+declare const _Disclosure: (props: UNSTABLE_DisclosureProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Disclosure as UNSTABLE_Disclosure };
+//# sourceMappingURL=disclosure.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.d.ts","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAKL,KAAK,eAAe,IAAI,kBAAkB,EAC3C,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,YAAY,GAAG,iBAAiB,GAAG,YAAY,GAAG,kBAAkB,CAAC;IACvG,8DAA8D;IAC9D,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA0BD;;;;GAIG;AACH,QAAA,MAAM,WAAW,0KAAgE,CAAC;AAElF,OAAO,EAAE,WAAW,IAAI,mBAAmB,EAAE,CAAC"}

package/dist/commonjs/components/disclosure/disclosure.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_Disclosure = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+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");
+function UNSTABLE_Disclosure({ children, title, actions, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Disclosure, { ...props, ref: ref, className: (0, clsx_1.default)('cim-disclosure', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-disclosure-heading-wrapper", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { className: "cim-disclosure-heading", children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: "cim-disclosure-button", slot: "trigger", children: [(0, jsx_runtime_1.jsx)(index_js_1.IconChevronExpand, { size: 24, UNSAFE_className: "cim-disclosure-icon" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "body-semibold", children: title })] }) }), actions && (0, jsx_runtime_1.jsx)("div", { className: "cim-disclosure-actions", children: actions })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.DisclosurePanel, { className: "cim-disclosure-panel", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-disclosure-panel-content", children: children }) })] }));
+}
+/**
+ * Displays a collapsible section of content.
+ *
+ * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).
+ */
+const _Disclosure = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_Disclosure), 'Disclosure');
+exports.UNSTABLE_Disclosure = _Disclosure;
+//# sourceMappingURL=disclosure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.js","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAM+B;AAC/B,yDAAkD;AAClD,mDAAyD;AACzD,mEAA2D;AAE3D,mDAA6C;AAa7C,SAAS,mBAAmB,CAC1B,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA4B,EAChG,GAAiC;IAEjC,OAAO,CACL,wBAAC,kCAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC1G,iCAAK,SAAS,EAAC,gCAAgC,aAC7C,uBAAC,+BAAU,IAAC,SAAS,EAAC,wBAAwB,YAC5C,wBAAC,8BAAS,IAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,SAAS,aACzD,uBAAC,4BAAiB,IAAC,IAAI,EAAE,EAAE,EAAE,gBAAgB,EAAC,qBAAqB,GAAG,EACtE,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,eAAe,YACpC,KAAK,GACD,IACG,GACD,EACZ,OAAO,IAAI,gCAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,GAAO,IAC/D,EACN,uBAAC,uCAAkB,IAAC,SAAS,EAAC,sBAAsB,YAClD,gCAAK,SAAS,EAAC,8BAA8B,YAAE,QAAQ,GAAO,GAC3C,IACP,CACjB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,mBAAmB,CAAC,EAAE,YAAY,CAAC,CAAC;AAE1D,0CAAmB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  Disclosure as RACDisclosure,\n  Button as RACButton,\n  Heading as RACHeading,\n  DisclosurePanel as RACDisclosurePanel,\n  type DisclosureProps as RACDisclosureProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronExpand } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface UNSTABLE_DisclosureProps\n  extends Omit<CommonProps, 'id'>,\n    Pick<RACDisclosureProps, 'id' | 'isDisabled' | 'defaultExpanded' | 'isExpanded' | 'onExpandedChange'> {\n  /** The content to display when the disclosure is expanded. */\n  children: ReactNode;\n  /** The title that is always visible in the disclosure header. */\n  title: string;\n  /** The actions displayed in the disclosure header. */\n  actions?: ReactNode;\n}\n\nfunction UNSTABLE_Disclosure(\n  { children, title, actions, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_DisclosureProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACDisclosure {...props} ref={ref} className={clsx('cim-disclosure', UNSAFE_className)} style={UNSAFE_style}>\n      <div className=\"cim-disclosure-heading-wrapper\">\n        <RACHeading className=\"cim-disclosure-heading\">\n          <RACButton className=\"cim-disclosure-button\" slot=\"trigger\">\n            <IconChevronExpand size={24} UNSAFE_className=\"cim-disclosure-icon\" />\n            <Text as=\"span\" variant=\"body-semibold\">\n              {title}\n            </Text>\n          </RACButton>\n        </RACHeading>\n        {actions && <div className=\"cim-disclosure-actions\">{actions}</div>}\n      </div>\n      <RACDisclosurePanel className=\"cim-disclosure-panel\">\n        <div className=\"cim-disclosure-panel-content\">{children}</div>\n      </RACDisclosurePanel>\n    </RACDisclosure>\n  );\n}\n\n/**\n * Displays a collapsible section of content.\n *\n * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).\n */\nconst _Disclosure = withStyleProps(forwardRef(UNSTABLE_Disclosure), 'Disclosure');\n\nexport { _Disclosure as UNSTABLE_Disclosure };\n"]}

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

@@ -1,6 +1,6 @@
 import { type FormProps as RACFormProps } from 'react-aria-components';
-import type { CommonProps, LabellableProps } from '../types.js';
-export interface FormProps extends CommonProps, Omit<LabellableProps, 'label'>, Pick<RACFormProps, 'action' | 'validationErrors' | 'encType' | 'method' | 'target' | 'autoComplete' | 'autoCapitalize' | 'children' | 'onSubmit' | 'onReset' | 'onInvalid'> {
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+export interface FormProps extends CommonProps, AriaLabelingProps, Pick<RACFormProps, 'action' | 'validationErrors' | 'encType' | 'method' | 'target' | 'autoComplete' | 'autoCapitalize' | 'children' | 'onSubmit' | 'onReset' | 'onInvalid'> {
 }
 /**
  * A group of inputs that allows users to submit data to a server.

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

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,SACf,SAAQ,WAAW,EACjB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CACF,YAAY,EACV,QAAQ,GACR,kBAAkB,GAClB,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,SAAS,GACT,WAAW,CACd;CAAG;AAUR;;;;GAIG;AACH,QAAA,MAAM,KAAK,4JAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAElE,MAAM,WAAW,SACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CACF,YAAY,EACV,QAAQ,GACR,kBAAkB,GAClB,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,SAAS,GACT,WAAW,CACd;CAAG;AAUR;;;;GAIG;AACH,QAAA,MAAM,KAAK,4JAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAqB3D,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAAE,GAAkC;IACjH,OAAO,CACL,uBAAC,4BAAO,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,YAC7F,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,KAAK,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAErC,qBAAI","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Form as RACForm, type FormProps as RACFormProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\n\nexport interface FormProps\n  extends CommonProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<\n      RACFormProps,\n      | 'action'\n      | 'validationErrors'\n      | 'encType'\n      | 'method'\n      | 'target'\n      | 'autoComplete'\n      | 'autoCapitalize'\n      | 'children'\n      | 'onSubmit'\n      | 'onReset'\n      | 'onInvalid'\n    > {}\n\nfunction Form({ children, UNSAFE_className, UNSAFE_style, ...props }: FormProps, ref: ForwardedRef<HTMLFormElement>) {\n  return (\n    <RACForm {...props} className={clsx('cim-form', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      {children}\n    </RACForm>\n  );\n}\n\n/**\n * A group of inputs that allows users to submit data to a server.\n *\n * See [forms guide](https://ui.cimpress.io/dev-guides/forms/).\n */\nconst _Form = withStyleProps(forwardRef(Form), 'Form');\n\nexport { _Form as Form };\n"]}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAqB3D,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAAE,GAAkC;IACjH,OAAO,CACL,uBAAC,4BAAO,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,YAC7F,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,KAAK,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAErC,qBAAI","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Form as RACForm, type FormProps as RACFormProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\n\nexport interface FormProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<\n      RACFormProps,\n      | 'action'\n      | 'validationErrors'\n      | 'encType'\n      | 'method'\n      | 'target'\n      | 'autoComplete'\n      | 'autoCapitalize'\n      | 'children'\n      | 'onSubmit'\n      | 'onReset'\n      | 'onInvalid'\n    > {}\n\nfunction Form({ children, UNSAFE_className, UNSAFE_style, ...props }: FormProps, ref: ForwardedRef<HTMLFormElement>) {\n  return (\n    <RACForm {...props} className={clsx('cim-form', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      {children}\n    </RACForm>\n  );\n}\n\n/**\n * A group of inputs that allows users to submit data to a server.\n *\n * See [forms guide](https://ui.cimpress.io/dev-guides/forms/).\n */\nconst _Form = withStyleProps(forwardRef(Form), 'Form');\n\nexport { _Form as Form };\n"]}

package/dist/commonjs/components/internal/collapsible-list/collapsible-list.d.ts

@@ -1,16 +1,2 @@
-import { type PopoverProps as RACPopoverProps } from 'react-aria-components';
-interface CollapsibleListProps extends Pick<RACPopoverProps, 'placement' | 'offset' | 'maxHeight' | 'children' | 'triggerRef'> {
-    /** A correction amount (in px) to add to the minimum list width. */
-    widthCorrection?: number;
-}
-/**
- * Displays a collapsible list activated via a trigger element.
- *
- * @internal
- */
-export declare function CollapsibleList({ children, widthCorrection, ...props }: CollapsibleListProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace CollapsibleList {
-    var displayName: string;
-}
 export {};
 //# sourceMappingURL=collapsible-list.d.ts.map

package/dist/commonjs/components/internal/collapsible-list/collapsible-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-list.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/collapsible-list/collapsible-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,YAAY,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEpG,UAAU,oBACR,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;IAC/F,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,eAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAahG;yBAbe,eAAe"}
+{"version":3,"file":"collapsible-list.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/collapsible-list/collapsible-list.tsx"],"names":[],"mappings":""}

package/dist/commonjs/components/internal/collapsible-list/collapsible-list.js

@@ -8,10 +8,8 @@ const react_aria_components_1 = require("react-aria-components");
  *
  * @internal
  */
-function CollapsibleList({ children, widthCorrection = 0, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { ...props, className: "cim-collapsible-list", 
-        // @ts-expect-error `style` doesn't expect CSS variables
-        style: { '--trigger-width-corr': `${widthCorrection}px` }, containerPadding: 16, "data-cim-style-root": true, children: children }));
+function CollapsibleList({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { ...props, className: "cim-collapsible-list", containerPadding: 16, "data-cim-style-root": true, children: children }));
 }
 CollapsibleList.displayName = 'CollapsibleList';
 //# sourceMappingURL=collapsible-list.js.map

package/dist/commonjs/components/internal/collapsible-list/collapsible-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-list.js","sourceRoot":"","sources":["../../../../../src/components/internal/collapsible-list/collapsible-list.tsx"],"names":[],"mappings":";;AAaA,0CAaC;;AA1BD,iEAAoG;AAQpG;;;;GAIG;AACH,SAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,eAAe,GAAG,CAAC,EAAE,GAAG,KAAK,EAAwB;IAC/F,OAAO,CACL,uBAAC,+BAAU,OACL,KAAK,EACT,SAAS,EAAC,sBAAsB;QAChC,wDAAwD;QACxD,KAAK,EAAE,EAAE,sBAAsB,EAAE,GAAG,eAAe,IAAI,EAAE,EACzD,gBAAgB,EAAE,EAAE,yCAGnB,QAAQ,GACE,CACd,CAAC;AACJ,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import { Popover as RACPopover, type PopoverProps as RACPopoverProps } from 'react-aria-components';\n\ninterface CollapsibleListProps\n  extends Pick<RACPopoverProps, 'placement' | 'offset' | 'maxHeight' | 'children' | 'triggerRef'> {\n  /** A correction amount (in px) to add to the minimum list width. */\n  widthCorrection?: number;\n}\n\n/**\n * Displays a collapsible list activated via a trigger element.\n *\n * @internal\n */\nexport function CollapsibleList({ children, widthCorrection = 0, ...props }: CollapsibleListProps) {\n  return (\n    <RACPopover\n      {...props}\n      className=\"cim-collapsible-list\"\n      // @ts-expect-error `style` doesn't expect CSS variables\n      style={{ '--trigger-width-corr': `${widthCorrection}px` }}\n      containerPadding={16}\n      data-cim-style-root\n    >\n      {children}\n    </RACPopover>\n  );\n}\n\nCollapsibleList.displayName = 'CollapsibleList';\n"]}
+{"version":3,"file":"collapsible-list.js","sourceRoot":"","sources":["../../../../../src/components/internal/collapsible-list/collapsible-list.tsx"],"names":[],"mappings":";;AAUA,0CAMC;;AAhBD,iEAAoG;AAKpG;;;;GAIG;AACH,SAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB;IAC1E,OAAO,CACL,uBAAC,+BAAU,OAAK,KAAK,EAAE,SAAS,EAAC,sBAAsB,EAAC,gBAAgB,EAAE,EAAE,yCACzE,QAAQ,GACE,CACd,CAAC;AACJ,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import { Popover as RACPopover, type PopoverProps as RACPopoverProps } from 'react-aria-components';\n\ninterface CollapsibleListProps\n  extends Pick<RACPopoverProps, 'placement' | 'offset' | 'maxHeight' | 'children' | 'triggerRef'> {}\n\n/**\n * Displays a collapsible list activated via a trigger element.\n *\n * @internal\n */\nexport function CollapsibleList({ children, ...props }: CollapsibleListProps) {\n  return (\n    <RACPopover {...props} className=\"cim-collapsible-list\" containerPadding={16} data-cim-style-root>\n      {children}\n    </RACPopover>\n  );\n}\n\nCollapsibleList.displayName = 'CollapsibleList';\n"]}

package/dist/commonjs/components/internal/focusable-container/focusable-container.d.ts

@@ -0,0 +1,2 @@
+export { _FocusableContainer as FocusableContainer };
+//# sourceMappingURL=focusable-container.d.ts.map

package/dist/commonjs/components/internal/focusable-container/focusable-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable-container.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/focusable-container/focusable-container.tsx"],"names":[],"mappings":"AAsEA,OAAO,EAAE,mBAAmB,IAAI,kBAAkB,EAAE,CAAC"}

package/dist/commonjs/components/internal/focusable-container/focusable-container.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusableContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const focus_1 = require("@react-aria/focus");
+const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
+const forward_ref_js_1 = require("../../../forward-ref.js");
+function FocusableContainer({ children, scrollDirection, ...props }, ref) {
+    const containerRef = (0, utils_1.useObjectRef)(ref);
+    const [isScrollable, setIsScrollable] = (0, react_1.useState)(false);
+    const { focusProps, isFocusVisible } = (0, focus_1.useFocusRing)();
+    (0, utils_1.useLayoutEffect)(() => {
+        const containerElement = containerRef.current;
+        const isSSR = typeof window === 'undefined';
+        let containerResizeObserver;
+        if (containerElement && !isSSR) {
+            containerResizeObserver = new window.ResizeObserver((entries) => {
+                if (entries[0]) {
+                    const { target } = entries[0];
+                    setIsScrollable(scrollDirection === 'horizontal'
+                        ? target.scrollWidth > target.clientWidth
+                        : target.scrollHeight > target.clientHeight);
+                }
+            });
+            containerResizeObserver.observe(containerElement);
+        }
+        return () => {
+            if (containerElement && containerResizeObserver) {
+                containerResizeObserver.unobserve(containerElement);
+            }
+        };
+    }, [containerRef, scrollDirection]);
+    const containerProps = {
+        className: 'cim-focusable-container',
+        tabIndex: isScrollable ? 0 : -1,
+        'data-focus-visible': isFocusVisible || undefined,
+        'data-direction': scrollDirection,
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ...(0, utils_1.mergeProps)(props, focusProps, containerProps), ref: containerRef, children: children }));
+}
+// TODO: export this component from the package?
+/**
+ * Renders a container that can be focused if it becomes scrollable.
+ * @internal
+ */
+const _FocusableContainer = (0, forward_ref_js_1.forwardRef)(FocusableContainer, 'FocusableContainer');
+exports.FocusableContainer = _FocusableContainer;
+//# sourceMappingURL=focusable-container.js.map

package/dist/commonjs/components/internal/focusable-container/focusable-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable-container.js","sourceRoot":"","sources":["../../../../../src/components/internal/focusable-container/focusable-container.tsx"],"names":[],"mappings":";;;;AAAA,6CAAiD;AACjD,6CAA8E;AAC9E,iCAAoE;AACpE,4DAAqD;AAUrD,SAAS,kBAAkB,CACzB,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,EAA2B,EAChE,GAAiC;IAEjC,MAAM,YAAY,GAAG,IAAA,oBAAY,EAAC,GAAG,CAAC,CAAC;IACvC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAEtD,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,CAAC;QAC9C,MAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;QAE5C,IAAI,uBAAmD,CAAC;QAExD,IAAI,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC;YAC/B,uBAAuB,GAAG,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC9D,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;oBACf,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;oBAC9B,eAAe,CACb,eAAe,KAAK,YAAY;wBAC9B,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,WAAW;wBACzC,CAAC,CAAC,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAC9C,CAAC;gBACJ,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,uBAAuB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QACpD,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,IAAI,uBAAuB,EAAE,CAAC;gBAChD,uBAAuB,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAEpC,MAAM,cAAc,GAAuC;QACzD,SAAS,EAAE,yBAAyB;QACpC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,oBAAoB,EAAE,cAAc,IAAI,SAAS;QACjD,gBAAgB,EAAE,eAAe;KAClC,CAAC;IAEF,OAAO,CACL,mCAAS,IAAA,kBAAU,EAAC,KAAK,EAAE,UAAU,EAAE,cAAc,CAAC,EAAE,GAAG,EAAE,YAAY,YACtE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,gDAAgD;AAChD;;;GAGG;AACH,MAAM,mBAAmB,GAAG,IAAA,2BAAU,EAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC;AAEjD,iDAAkB","sourcesContent":["import { useFocusRing } from '@react-aria/focus';\nimport { mergeProps, useLayoutEffect, useObjectRef } from '@react-aria/utils';\nimport { type ForwardedRef, type ReactNode, useState } from 'react';\nimport { forwardRef } from '../../../forward-ref.js';\nimport type { NativeElementProps } from '../../types.js';\n\ninterface FocusableContainerProps extends NativeElementProps<HTMLDivElement> {\n  /** The contents of the container. */\n  children: ReactNode;\n  /** The expected scrolling direction. */\n  scrollDirection: 'horizontal' | 'vertical';\n}\n\nfunction FocusableContainer(\n  { children, scrollDirection, ...props }: FocusableContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const containerRef = useObjectRef(ref);\n  const [isScrollable, setIsScrollable] = useState(false);\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  useLayoutEffect(() => {\n    const containerElement = containerRef.current;\n    const isSSR = typeof window === 'undefined';\n\n    let containerResizeObserver: ResizeObserver | undefined;\n\n    if (containerElement && !isSSR) {\n      containerResizeObserver = new window.ResizeObserver((entries) => {\n        if (entries[0]) {\n          const { target } = entries[0];\n          setIsScrollable(\n            scrollDirection === 'horizontal'\n              ? target.scrollWidth > target.clientWidth\n              : target.scrollHeight > target.clientHeight,\n          );\n        }\n      });\n\n      containerResizeObserver.observe(containerElement);\n    }\n\n    return () => {\n      if (containerElement && containerResizeObserver) {\n        containerResizeObserver.unobserve(containerElement);\n      }\n    };\n  }, [containerRef, scrollDirection]);\n\n  const containerProps: NativeElementProps<HTMLDivElement> = {\n    className: 'cim-focusable-container',\n    tabIndex: isScrollable ? 0 : -1,\n    'data-focus-visible': isFocusVisible || undefined,\n    'data-direction': scrollDirection,\n  };\n\n  return (\n    <div {...mergeProps(props, focusProps, containerProps)} ref={containerRef}>\n      {children}\n    </div>\n  );\n}\n\n// TODO: export this component from the package?\n/**\n * Renders a container that can be focused if it becomes scrollable.\n * @internal\n */\nconst _FocusableContainer = forwardRef(FocusableContainer, 'FocusableContainer');\n\nexport { _FocusableContainer as FocusableContainer };\n"]}

package/dist/commonjs/components/internal/form-field/form-field.d.ts

@@ -1,29 +1,2 @@
-import type { FieldError } from '../../types.js';
-/**
- * Renders a label for a form field.
- * @internal
- */
-export declare function FormFieldLabel({ children, isRequired, isDisabled, }: {
-    children: string | undefined;
-    isRequired: boolean | undefined;
-    isDisabled?: boolean | undefined;
-}): import("react/jsx-runtime").JSX.Element | null;
-/**
- * Renders a description for a form field.
- * @internal
- */
-export declare function FormFieldDescription({ children }: {
-    children: string | undefined;
-}): import("react/jsx-runtime").JSX.Element | null;
-/**
- * Renders an error message for a form field.
- *
- * Must be rendered unconditionally, as it can be populated with browser validation errors
- * even if an explicit error message isn't provided.
- *
- * @internal
- */
-export declare function FormFieldError({ children }: {
-    children: FieldError;
-}): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=form-field.d.ts.map

package/dist/commonjs/components/internal/form-field/form-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/form-field/form-field.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAClC,kDAiBA;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,kDAalF;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,UAAU,CAAA;CAAE,2CAMpE"}
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/form-field/form-field.tsx"],"names":[],"mappings":""}

package/dist/commonjs/components/internal/form-field/form-field.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldLabel = FormFieldLabel;
 exports.FormFieldDescription = FormFieldDescription;
 exports.FormFieldError = FormFieldError;
+exports.FormFieldErrorText = FormFieldErrorText;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_aria_components_1 = require("react-aria-components");
@@ -48,9 +49,18 @@ function renderFieldError(fieldError, validation) {
     if (!errors || !errors.length) {
         return null;
     }
-    return typeof errors === 'object' ? (errors.map((error) => (0, jsx_runtime_1.jsx)(ErrorMessage, { message: error }, error))) : ((0, jsx_runtime_1.jsx)(ErrorMessage, { message: errors }));
+    return ((0, jsx_runtime_1.jsx)("ul", { className: "cim-form-field-error-list", children: typeof errors === 'object' ? (errors.map((error) => (0, jsx_runtime_1.jsx)(ErrorMessage, { message: error }, error))) : ((0, jsx_runtime_1.jsx)(ErrorMessage, { message: errors })) }));
 }
 function ErrorMessage({ message }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "cim-form-field-error-message", children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-form-field-error-icon-wrapper", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(index_js_1.IconAlertTriangle, {}) }), message] }));
+    return ((0, jsx_runtime_1.jsxs)("li", { className: "cim-form-field-error-message", children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-form-field-error-icon-wrapper", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(index_js_1.IconWarning, {}) }), message] }));
+}
+/**
+ * Renders an error message for `errorMessage` slot.
+ * Used by `TagGroup` to show error messages, since `FieldError` is not supported as it is not a form field.
+ *
+ * @internal
+ */
+function FormFieldErrorText({ children }) {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "errorMessage", className: (0, clsx_1.default)('cim-form-field-error', (0, utils_js_1.textStyle)({ variant: 'small', tone: 'critical' })), children: (0, jsx_runtime_1.jsx)(ErrorMessage, { message: children }) }));
 }
 //# sourceMappingURL=form-field.js.map

package/dist/commonjs/components/internal/form-field/form-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../../src/components/internal/form-field/form-field.tsx"],"names":[],"mappings":";;;;;AAiBA,wCAyBC;AAMD,oDAaC;AAUD,wCAMC;;AA7ED,gDAAwB;AAExB,iEAK+B;AAC/B,sDAA4D;AAE5D,sDAAgD;AAChD,wDAAsD;AAEtD;;;GAGG;AACH,SAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,UAAU,EACV,UAAU,GAKX;IACC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,wBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,aAE7G,QAAQ,EACR,UAAU,IAAI,CACb,uBAAC,cAAI,IAAC,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,uCAExB,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,SAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAoC;IACjF,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uBAAC,4BAAO,IACN,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,IAAA,cAAI,EAAC,4BAA4B,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAE7F,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,SAAgB,cAAc,CAAC,EAAE,QAAQ,EAA4B;IACnE,OAAO,CACL,uBAAC,kCAAa,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,YACtG,CAAC,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,GACzC,CACjB,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,UAAsB,EAAE,UAA+B;IAC/E,MAAM,MAAM,GACV,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE1G,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAClC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAC,YAAY,IAAa,OAAO,EAAE,KAAK,IAArB,KAAK,CAAoB,CAAC,CACpE,CAAC,CAAC,CAAC,CACF,uBAAC,YAAY,IAAC,OAAO,EAAE,MAAM,GAAI,CAClC,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,OAAO,EAAuB;IACpD,OAAO,CACL,iCAAK,SAAS,EAAC,8BAA8B,aAC3C,gCAAK,SAAS,EAAC,mCAAmC,iCAChD,uBAAC,4BAAiB,KAAG,GACjB,EACL,OAAO,IACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  Label as RACLabel,\n  Text as RACText,\n  FieldError as RACFieldError,\n  type ValidationResult as RACValidationResult,\n} from 'react-aria-components';\nimport { IconAlertTriangle } from '../../../icons/index.js';\nimport type { FieldError } from '../../types.js';\nimport { Text } from '../../typography/text.js';\nimport { textStyle } from '../../typography/utils.js';\n\n/**\n * Renders a label for a form field.\n * @internal\n */\nexport function FormFieldLabel({\n  children,\n  isRequired,\n  isDisabled,\n}: {\n  children: string | undefined;\n  isRequired: boolean | undefined;\n  isDisabled?: boolean | undefined;\n}) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACLabel\n      className={clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }))}\n    >\n      {children}\n      {isRequired && (\n        <Text tone=\"critical\" as=\"span\" aria-hidden>\n          *\n        </Text>\n      )}\n    </RACLabel>\n  );\n}\n\n/**\n * Renders a description for a form field.\n * @internal\n */\nexport function FormFieldDescription({ children }: { children: string | undefined }) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACText\n      slot=\"description\"\n      className={clsx('cim-form-field-description', textStyle({ variant: 'small', tone: 'subtle' }))}\n    >\n      {children}\n    </RACText>\n  );\n}\n\n/**\n * Renders an error message for a form field.\n *\n * Must be rendered unconditionally, as it can be populated with browser validation errors\n * even if an explicit error message isn't provided.\n *\n * @internal\n */\nexport function FormFieldError({ children }: { children: FieldError }) {\n  return (\n    <RACFieldError className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}>\n      {(validation) => renderFieldError(children, validation)}\n    </RACFieldError>\n  );\n}\n\nfunction renderFieldError(fieldError: FieldError, validation: RACValidationResult): string | ReactNode | undefined {\n  const errors =\n    typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);\n\n  if (!errors || !errors.length) {\n    return null;\n  }\n\n  return typeof errors === 'object' ? (\n    errors.map((error) => <ErrorMessage key={error} message={error} />)\n  ) : (\n    <ErrorMessage message={errors} />\n  );\n}\n\nfunction ErrorMessage({ message }: { message: string }) {\n  return (\n    <div className=\"cim-form-field-error-message\">\n      <div className=\"cim-form-field-error-icon-wrapper\" aria-hidden>\n        <IconAlertTriangle />\n      </div>\n      {message}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../../src/components/internal/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  FieldError as RACFieldError,\n  Label as RACLabel,\n  Text as RACText,\n  type ValidationResult as RACValidationResult,\n} from 'react-aria-components';\nimport { IconWarning } from '../../../icons/index.js';\nimport type { FieldError } from '../../types.js';\nimport { Text } from '../../typography/text.js';\nimport { textStyle } from '../../typography/utils.js';\n\n/**\n * Renders a label for a form field.\n * @internal\n */\nexport function FormFieldLabel({\n  children,\n  isRequired,\n  isDisabled,\n}: {\n  children: string | undefined;\n  isRequired: boolean | undefined;\n  isDisabled?: boolean | undefined;\n}) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACLabel\n      className={clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }))}\n    >\n      {children}\n      {isRequired && (\n        <Text tone=\"critical\" as=\"span\" aria-hidden>\n          *\n        </Text>\n      )}\n    </RACLabel>\n  );\n}\n\n/**\n * Renders a description for a form field.\n * @internal\n */\nexport function FormFieldDescription({ children }: { children: string | undefined }) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACText\n      slot=\"description\"\n      className={clsx('cim-form-field-description', textStyle({ variant: 'small', tone: 'subtle' }))}\n    >\n      {children}\n    </RACText>\n  );\n}\n\n/**\n * Renders an error message for a form field.\n *\n * Must be rendered unconditionally, as it can be populated with browser validation errors\n * even if an explicit error message isn't provided.\n *\n * @internal\n */\nexport function FormFieldError({ children }: { children: FieldError }) {\n  return (\n    <RACFieldError className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}>\n      {(validation) => renderFieldError(children, validation)}\n    </RACFieldError>\n  );\n}\n\nfunction renderFieldError(fieldError: FieldError, validation: RACValidationResult): string | ReactNode | undefined {\n  const errors =\n    typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);\n\n  if (!errors || !errors.length) {\n    return null;\n  }\n\n  return (\n    <ul className=\"cim-form-field-error-list\">\n      {typeof errors === 'object' ? (\n        errors.map((error) => <ErrorMessage key={error} message={error} />)\n      ) : (\n        <ErrorMessage message={errors} />\n      )}\n    </ul>\n  );\n}\n\nfunction ErrorMessage({ message }: { message: string }) {\n  return (\n    <li className=\"cim-form-field-error-message\">\n      <div className=\"cim-form-field-error-icon-wrapper\" aria-hidden>\n        <IconWarning />\n      </div>\n      {message}\n    </li>\n  );\n}\n\n/**\n * Renders an error message for `errorMessage` slot.\n * Used by `TagGroup` to show error messages, since `FieldError` is not supported as it is not a form field.\n *\n * @internal\n */\nexport function FormFieldErrorText({ children }: { children: string }) {\n  return (\n    <RACText\n      slot=\"errorMessage\"\n      className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}\n    >\n      <ErrorMessage message={children} />\n    </RACText>\n  );\n}\n"]}

package/dist/commonjs/components/internal/spinner/spinner.d.ts

@@ -1,18 +1,2 @@
-import type { ReactNode, Ref } from 'react';
-import type { CommonProps, LabellableProps } from '../../types.js';
-interface SpinnerProps extends CommonProps, Omit<LabellableProps, 'label'> {
-    children?: ReactNode;
-    spinnerRef?: Ref<HTMLDivElement>;
-    size: string;
-}
-/**
- * Displays a variable-size loading indicator to represent an ongoing operation.
- *
- * @internal
- */
-declare function Spinner({ children, spinnerRef, size, UNSAFE_className, UNSAFE_style, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Spinner {
-    var displayName: string;
-}
 export { Spinner as InternalSpinner };
 //# sourceMappingURL=spinner.d.ts.map

package/dist/commonjs/components/internal/spinner/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/spinner/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEnE,UAAU,YAAa,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAuBtG;kBAvBQ,OAAO;;;AA2BhB,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,CAAC"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/spinner/spinner.tsx"],"names":[],"mappings":"AA2CA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,CAAC"}

package/dist/commonjs/components/internal/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../../src/components/internal/spinner/spinner.tsx"],"names":[],"mappings":";;;;;AA2CoB,kCAAe;;AA3CnC,gDAAwB;AAExB,iEAAsE;AAStE;;;;GAIG;AACH,SAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB;IACrG,OAAO,CACL,wBAAC,mCAAc,OACT,KAAK,EACT,eAAe,QACf,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,aAEnB,iCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,mBAAmB,EAAC,UAAU,kCAG9B,mCAAQ,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EACjE,mCAAQ,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,IAC7D,EACL,QAAQ,IACM,CAClB,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode, Ref } from 'react';\nimport { ProgressBar as RACProgressBar } from 'react-aria-components';\nimport type { CommonProps, LabellableProps } from '../../types.js';\n\ninterface SpinnerProps extends CommonProps, Omit<LabellableProps, 'label'> {\n  children?: ReactNode;\n  spinnerRef?: Ref<HTMLDivElement>;\n  size: string;\n}\n\n/**\n * Displays a variable-size loading indicator to represent an ongoing operation.\n *\n * @internal\n */\nfunction Spinner({ children, spinnerRef, size, UNSAFE_className, UNSAFE_style, ...props }: SpinnerProps) {\n  return (\n    <RACProgressBar\n      {...props}\n      isIndeterminate\n      ref={spinnerRef}\n      className={clsx('cim-spinner', UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 80 80\"\n        width={size}\n        height={size}\n        preserveAspectRatio=\"xMidYMid\"\n        aria-hidden\n      >\n        <circle className=\"cim-spinner-ring-bg\" cx=\"40\" cy=\"40\" r=\"35\" />\n        <circle className=\"cim-spinner-ring-fg\" cx=\"40\" cy=\"40\" r=\"35\" />\n      </svg>\n      {children}\n    </RACProgressBar>\n  );\n}\n\nSpinner.displayName = 'Spinner';\n\nexport { Spinner as InternalSpinner };\n"]}
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../../src/components/internal/spinner/spinner.tsx"],"names":[],"mappings":";;;;;AA2CoB,kCAAe;;AA3CnC,gDAAwB;AAExB,iEAAsE;AAStE;;;;GAIG;AACH,SAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB;IACrG,OAAO,CACL,wBAAC,mCAAc,OACT,KAAK,EACT,eAAe,QACf,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,aAEnB,iCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,mBAAmB,EAAC,UAAU,kCAG9B,mCAAQ,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EACjE,mCAAQ,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,IAC7D,EACL,QAAQ,IACM,CAClB,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode, Ref } from 'react';\nimport { ProgressBar as RACProgressBar } from 'react-aria-components';\nimport type { AriaLabelingProps, CommonProps } from '../../types.js';\n\ninterface SpinnerProps extends CommonProps, AriaLabelingProps {\n  children?: ReactNode;\n  spinnerRef?: Ref<HTMLDivElement>;\n  size: string;\n}\n\n/**\n * Displays a variable-size loading indicator to represent an ongoing operation.\n *\n * @internal\n */\nfunction Spinner({ children, spinnerRef, size, UNSAFE_className, UNSAFE_style, ...props }: SpinnerProps) {\n  return (\n    <RACProgressBar\n      {...props}\n      isIndeterminate\n      ref={spinnerRef}\n      className={clsx('cim-spinner', UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 80 80\"\n        width={size}\n        height={size}\n        preserveAspectRatio=\"xMidYMid\"\n        aria-hidden\n      >\n        <circle className=\"cim-spinner-ring-bg\" cx=\"40\" cy=\"40\" r=\"35\" />\n        <circle className=\"cim-spinner-ring-fg\" cx=\"40\" cy=\"40\" r=\"35\" />\n      </svg>\n      {children}\n    </RACProgressBar>\n  );\n}\n\nSpinner.displayName = 'Spinner';\n\nexport { Spinner as InternalSpinner };\n"]}

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

@@ -1,20 +1,26 @@
-import { type ReactNode } from 'react';
-import { type MenuProps as RACMenuProps, type MenuItemProps as RACMenuItemProps, type MenuTriggerProps as RACMenuTriggerProps } from 'react-aria-components';
-import type { ActionButtonProps } from '../button/types.js';
-import type { CommonProps, Key, LabellableProps, NavigationProps, CollectionProps, CollectionItem, StringLikeChildren } from '../types.js';
-export interface MenuProps<T extends CollectionItem = CollectionItem> extends CommonProps, CollectionProps<T>, LabellableProps, Pick<RACMenuTriggerProps, 'onOpenChange'>, Pick<RACMenuProps<T>, 'onScroll'>, Pick<ActionButtonProps, 'onHoverStart' | 'onHoverEnd'> {
-    /** Whether the menu trigger is disabled. */
-    isDisabled?: boolean;
-    /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */
-    onAction?: (key: Key) => void;
+import type { ReactNode } from 'react';
+import { type MenuItemProps as RACMenuItemProps, type MenuProps as RACMenuProps, type MenuTriggerProps as RACMenuTriggerProps } from 'react-aria-components';
+import type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';
+export interface MenuRootProps extends Pick<RACMenuTriggerProps, 'children' | 'onOpenChange' | 'isOpen' | 'defaultOpen'> {
 }
 /**
- * Displays a collapsible list of options and actions that users can choose from.
+ * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.
  *
  * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).
  */
-declare const _Menu: <T extends CollectionItem>(props: MenuProps<T> & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _Menu as Menu };
+export declare function MenuRoot(props: MenuRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuRoot {
+    var displayName: string;
+}
+export interface MenuProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T>, Pick<RACMenuProps<T>, 'onScroll'> {
+    /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */
+    onAction?: (key: Key) => void;
+}
+/** Displays a collapsible list of options and actions that users can choose from. */
+export declare function Menu<T extends CollectionItem>(props: MenuProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Menu {
+    var displayName: string;
+}
 export interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {
     /** The ID of the section. Has to be unique across all sections and items. */
     id?: Key;

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

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAA0C,MAAM,OAAO,CAAC;AAC/E,OAAO,EAGL,KAAK,SAAS,IAAI,YAAY,EAE9B,KAAK,aAAa,IAAI,gBAAgB,EAEtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAK,EACV,WAAW,EACX,GAAG,EACH,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,WAAW,EACjB,eAAe,CAAC,CAAC,CAAC,EAClB,eAAe,EACf,IAAI,CAAC,mBAAmB,EAAE,cAAc,CAAC,EACzC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,EACjC,IAAI,CAAC,iBAAiB,EAAE,cAAc,GAAG,YAAY,CAAC;IACxD,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAkCD;;;;GAIG;AACH,QAAA,MAAM,KAAK,GArCG,CAAC,SAAS,cAAc,gKAqCgB,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAsCzB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACrG,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IACnF,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA4BhF;yBA5Be,QAAQ;;;AAgCxB,qEAAqE;AACrE,wBAAgB,WAAW,4CAE1B;yBAFe,WAAW"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAKL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,SAAS,IAAI,YAAY,EAG9B,KAAK,gBAAgB,IAAI,mBAAmB,EAG7C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAG7G,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;CAAG;AAE9F;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ;;;AAMxB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,eAAe,CAAC,CAAC,CAAC,EACxB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACnC,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,2CAcjE;yBAde,IAAI;;;AAkBpB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACrG,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IACnF,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA4BhF;yBA5Be,QAAQ;;;AAgCxB,qEAAqE;AACrE,wBAAgB,WAAW,4CAE1B;yBAFe,WAAW"}

package/dist/commonjs/components/menu/menu.js

@@ -4,46 +4,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Menu = void 0;
+exports.MenuRoot = MenuRoot;
+exports.Menu = Menu;
 exports.MenuSection = MenuSection;
 exports.MenuItem = MenuItem;
 exports.MenuDivider = MenuDivider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
-const forward_ref_js_1 = require("../../forward-ref.js");
-const index_js_1 = require("../../icons/index.js");
-const with_style_props_js_1 = require("../../with-style-props.js");
-const button_js_1 = require("../button/button.js");
-const icon_button_js_1 = require("../button/icon-button.js");
 const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
 const utils_js_1 = require("../typography/utils.js");
-function Menu({ children, isDisabled, onAction, items, onOpenChange, onScroll, ...props }, ref) {
-    const { label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
-    (0, react_1.useEffect)(() => {
-        if (!label && !ariaLabel && !ariaLabelledBy) {
-            console.warn('`Menu` requires one of `label` / `aria-label` / `aria-labelledby` for accessibility');
-        }
-    }, [label, ariaLabel, ariaLabelledBy]);
-    if (items != null && typeof children !== 'function') {
-        console.warn('`Menu` requires `children` to be a function when using `items` prop');
-    }
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.MenuTrigger, { onOpenChange: onOpenChange, children: [(0, jsx_runtime_1.jsx)(MenuTrigger, { ...props, triggerRef: ref, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { placement: "bottom start", offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Menu, { className: "cim-menu", onAction: onAction, onScroll: onScroll, items: items, children: children }) })] }));
-}
 /**
- * Displays a collapsible list of options and actions that users can choose from.
+ * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.
  *
  * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).
  */
-const _Menu = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Menu), 'Menu');
-exports.Menu = _Menu;
-function MenuTrigger({ label, triggerRef, ...props }) {
-    if (label) {
-        return ((0, jsx_runtime_1.jsx)(button_js_1.Button, { ...props, variant: "secondary", size: "medium", ref: triggerRef, iconEnd: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDownFill, { UNSAFE_className: "cim-menu-trigger-icon" }), children: label }));
+function MenuRoot(props) {
+    return (0, jsx_runtime_1.jsx)(react_aria_components_1.MenuTrigger, { ...props });
+}
+MenuRoot.displayName = 'MenuRoot';
+/** Displays a collapsible list of options and actions that users can choose from. */
+function Menu(props) {
+    if (props.items != null && typeof props.children !== 'function') {
+        console.warn('`Menu` requires `children` to be a function when using `items` prop');
     }
-    return ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { ...props, "aria-label": props['aria-label'] ?? '', variant: "secondary", size: "medium", ref: triggerRef, icon: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDownFill, { UNSAFE_className: "cim-menu-trigger-icon" }) }));
+    return ((0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { placement: "bottom start", offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Menu, { className: "cim-menu", ...props }) }));
 }
+Menu.displayName = 'Menu';
 /** Groups list items within `Menu` into a section. */
 function MenuSection({ title, children, items, ...props }) {
     if (items != null && typeof children !== 'function') {