@cimpress-ui/react 0.0.0 → 0.0.1

package/dist/commonjs/components/combo-box/combo-box.d.ts

@@ -1,33 +1,34 @@
-import { type ReactNode } from 'react';
-import { type ComboBoxProps as RACComboBoxProps } from 'react-aria-components';
-import type { DOMProps, FieldWithPlaceholderProps, Key } from '../types.js';
-export interface ComboBoxOption {
-    /** The unique id of the item. When integrated with a form, this will be the value of the option. */
-    id: string;
-    /** The content to display as the label of the option. */
-    label: string;
-    /** Whether the option is disabled. */
-    isDisabled?: boolean;
-}
-export interface ComboBoxOptionGroup {
-    /** The unique id of the group. */
-    id: string;
-    /** The content to display as the title of the group. */
-    label: string;
-    /** The options available for selection within the group. */
-    options: ComboBoxOption[];
-    isDisabled?: never;
-}
+import { type ComboBoxProps as RACComboBoxProps, type ListBoxItemProps as RACListBoxItemProps } from 'react-aria-components';
+import type { CollectionItem, CollectionProps, CommonProps, FieldWithPlaceholderProps, Key, StringLikeChildren } from '../types.js';
+/** Represents the state of the `ComboBox` component for validation purposes. */
 export interface ComboBoxValidationValue {
     /** The selected key in the ComboBox. */
     selectedKey: Key | null;
     /** The value of the ComboBox input. */
     inputValue: string;
 }
-export interface ComboBoxProps<T extends object> extends Pick<RACComboBoxProps<T>, 'name' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'selectedKey' | 'defaultSelectedKey' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onSelectionChange' | 'onInputChange'>, DOMProps, FieldWithPlaceholderProps<ComboBoxValidationValue> {
-    /** The options available for selection. Supports groups with a single level of nesting. */
-    options: Array<ComboBoxOption | ComboBoxOptionGroup>;
+export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<ComboBoxValidationValue>, CollectionProps<T>, Pick<RACComboBoxProps<T>, 'name' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'selectedKey' | 'defaultSelectedKey' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onSelectionChange' | 'onInputChange'> {
 }
-declare const _ComboBox: <T extends object>(props: ComboBoxProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => ReactNode;
+/** Allows users to filter a collapsible list and select one item from it. */
+declare const _ComboBox: <T extends CollectionItem>(props: ComboBoxProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _ComboBox as ComboBox };
+export interface ComboBoxItemProps<T extends CollectionItem> extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled'> {
+    children: StringLikeChildren;
+}
+/** Renders a single list item within `ComboBox`. */
+export declare function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ComboBoxItem {
+    var displayName: string;
+}
+export interface ComboBoxSectionProps<T extends CollectionItem> extends CollectionProps<T> {
+    /** The ID of the section. Has to be unique across all sections and items. */
+    id?: Key;
+    /** The content to display as the section title. */
+    title: string;
+}
+/** Groups list items within `ComboBox` into a section. */
+export declare function ComboBoxSection<T extends CollectionItem>({ title, children, items, ...props }: ComboBoxSectionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ComboBoxSection {
+    var displayName: string;
+}
 //# sourceMappingURL=combo-box.d.ts.map

package/dist/commonjs/components/combo-box/combo-box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyC,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAClG,OAAO,EAWL,KAAK,aAAa,IAAI,gBAAgB,EAEvC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAG5E,MAAM,WAAW,cAAc;IAC7B,oGAAoG;IACpG,EAAE,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,CAC7C,SAAQ,IAAI,CACR,gBAAgB,CAAC,CAAC,CAAC,EACjB,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,mBAAmB,GACnB,eAAe,CAClB,EACD,QAAQ,EACR,yBAAyB,CAAC,uBAAuB,CAAC;IACpD,2FAA2F;IAC3F,OAAO,EAAE,KAAK,CAAC,cAAc,GAAG,mBAAmB,CAAC,CAAC;CACtD;AAyCD,QAAA,MAAM,SAAS,GAvCG,CAAC,SAAS,MAAM,wIAuCgC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAIA,OAAO,EAYL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAC7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAGrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EACjB,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,mBAAmB,GACnB,eAAe,CAClB;CAAG;AAoER,6EAA6E;AAC7E,QAAA,MAAM,SAAS,GAnEG,CAAC,SAAS,cAAc,iKAmEwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAsBjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,CAAC;IACpH,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}

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

@@ -1,23 +1,39 @@
+'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.ComboBox = void 0;
+exports.ComboBoxItem = ComboBoxItem;
+exports.ComboBoxSection = ComboBoxSection;
 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 form_field_js_1 = require("../form-field/form-field.js");
+const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
+const form_field_js_1 = require("../internal/form-field/form-field.js");
 const utils_js_1 = require("../typography/utils.js");
-function ComboBox({ label, description, error, options, placeholder, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, ...props }, ref) {
     const triggerPositioningRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-combo-box-input-wrapper", ref: triggerPositioningRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput, { isReadOnly: props.isReadOnly, placeholder: placeholder }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, { height: 12, width: 12, "aria-hidden": "true" }) })] }), (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)(react_aria_components_1.Popover, { offset: 2, maxHeight: 315, className: "cim-combo-box-popover", 
-                // Position popover relative to wrapper div instead of input to account for border
-                triggerRef: triggerPositioningRef, "data-experimental-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", items: options, children: renderOptions }) })] }));
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, react_1.useEffect)(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    if (items != null && typeof children !== 'function') {
+        console.warn('`ComboBox` requires `children` to be a function when using `items` prop');
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, 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.Group, { className: "cim-combo-box-input-wrapper", ref: triggerPositioningRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput, { isReadOnly: isReadOnly, placeholder: placeholder }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDownFill, {}) })] }), (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, 
+                // Position the list relative to wrapper div instead of input to account for border
+                triggerRef: triggerPositioningRef, widthCorrection: 2, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", items: items, children: children }) })] }));
 }
+// TODO: add link to usage guidelines
+/** Allows users to filter a collapsible list and select one item from it. */
 const _ComboBox = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(ComboBox), 'ComboBox');
 exports.ComboBox = _ComboBox;
 function ComboBoxInput({ isReadOnly, placeholder, }) {
@@ -27,19 +43,18 @@ function ComboBoxInput({ isReadOnly, placeholder, }) {
         // By default, React Aria only opens the popover when the input is focused.
         onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder }));
 }
-function renderOptions(item) {
-    if ('options' in item) {
-        return ((0, jsx_runtime_1.jsx)(ComboBoxSection, { id: item.id, title: item.label, items: item.options, children: (child) => ((0, jsx_runtime_1.jsx)(ComboBoxItem, { id: child.id, isDisabled: child.isDisabled, children: child.label })) }));
-    }
-    return ((0, jsx_runtime_1.jsx)(ComboBoxItem, { id: item.id, isDisabled: item.isDisabled, children: item.label }));
-}
+/** Renders a single list item within `ComboBox`. */
 function ComboBoxItem({ children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: (0, clsx_1.default)('cim-combo-box-item', (0, utils_js_1.textStyle)({ variant: 'medium' })), children: children }));
+    const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-combo-box-item", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.IconCheckmark, {}), (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
 }
+ComboBoxItem.displayName = 'ComboBoxItem';
+/** Groups list items within `ComboBox` into a section. */
 function ComboBoxSection({ title, children, items, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Section, { ...props, className: "cim-combo-box-section", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Header, { className: (0, clsx_1.default)('cim-combo-box-header', (0, utils_js_1.textStyle)({ variant: 'small', tone: 'subtle' })), children: title }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Collection, { items: items, children: children })] }));
-}
-function ChevronDownIcon(props) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "currentColor", "data-icon": true, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z" }) }));
+    if (items != null && typeof children !== 'function') {
+        console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBoxSection, { ...props, className: "cim-combo-box-section", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Header, { className: (0, clsx_1.default)('cim-combo-box-section-header', (0, utils_js_1.textStyle)({ variant: 'small-semibold', tone: 'subtle' })), children: title }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Collection, { items: items, children: children })] }));
 }
+ComboBoxSection.displayName = 'ComboBoxSection';
 //# sourceMappingURL=combo-box.js.map

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":["import clsx from 'clsx';\nimport { useContext, useRef, type ForwardedRef, type ReactNode, type SVGAttributes } from 'react';\nimport {\n  ComboBoxStateContext,\n  Button as RACButton,\n  Collection as RACCollection,\n  ComboBox as RACComboBox,\n  Header as RACHeader,\n  Input as RACInput,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Popover as RACPopover,\n  Section as RACSection,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';\nimport type { DOMProps, FieldWithPlaceholderProps, Key } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface ComboBoxOption {\n  /** The unique id of the item. When integrated with a form, this will be the value of the option. */\n  id: string;\n  /** The content to display as the label of the option. */\n  label: string;\n  /** Whether the option is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface ComboBoxOptionGroup {\n  /** The unique id of the group. */\n  id: string;\n  /** The content to display as the title of the group. */\n  label: string;\n  /** The options available for selection within the group. */\n  options: ComboBoxOption[];\n  isDisabled?: never;\n}\n\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 object>\n  extends 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    >,\n    DOMProps,\n    FieldWithPlaceholderProps<ComboBoxValidationValue> {\n  /** The options available for selection. Supports groups with a single level of nesting. */\n  options: Array<ComboBoxOption | ComboBoxOptionGroup>;\n}\n\nfunction ComboBox<T extends object>(\n  { label, description, error, options, placeholder, UNSAFE_className, UNSAFE_style, ...props }: ComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const triggerPositioningRef = useRef<HTMLDivElement>(null);\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    >\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <div className=\"cim-combo-box-input-wrapper\" ref={triggerPositioningRef}>\n        <ComboBoxInput isReadOnly={props.isReadOnly} placeholder={placeholder} />\n        <RACButton className=\"cim-combo-box-button\">\n          <ChevronDownIcon height={12} width={12} aria-hidden=\"true\" />\n        </RACButton>\n      </div>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <RACPopover\n        offset={2}\n        maxHeight={315}\n        className=\"cim-combo-box-popover\"\n        // Position popover relative to wrapper div instead of input to account for border\n        triggerRef={triggerPositioningRef}\n        data-experimental-cim-style-root\n      >\n        <RACListBox className=\"cim-combo-box-listbox\" items={options}>\n          {renderOptions}\n        </RACListBox>\n      </RACPopover>\n    </RACComboBox>\n  );\n}\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(ComboBoxStateContext);\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\nfunction renderOptions(item: ComboBoxOption | ComboBoxOptionGroup) {\n  if ('options' in item) {\n    return (\n      <ComboBoxSection id={item.id} title={item.label} items={item.options}>\n        {(child) => (\n          <ComboBoxItem id={child.id} isDisabled={child.isDisabled}>\n            {child.label}\n          </ComboBoxItem>\n        )}\n      </ComboBoxSection>\n    );\n  }\n\n  return (\n    <ComboBoxItem id={item.id} isDisabled={item.isDisabled}>\n      {item.label}\n    </ComboBoxItem>\n  );\n}\n\ninterface ComboBoxItemProps<T extends object> extends Pick<RACListBoxItemProps<T>, 'id' | 'value' | 'isDisabled'> {\n  children: string;\n}\n\nfunction ComboBoxItem<T extends object>({ children, ...props }: ComboBoxItemProps<T>) {\n  return (\n    <RACListBoxItem {...props} className={clsx('cim-combo-box-item', textStyle({ variant: 'medium' }))}>\n      {children}\n    </RACListBoxItem>\n  );\n}\n\ninterface ComboBoxSectionProps<T extends object> {\n  id: string;\n  title: string;\n  children: ReactNode | ((item: T) => ReactNode);\n  items?: Iterable<T>;\n}\n\nfunction ComboBoxSection<T extends object>({ title, children, items, ...props }: ComboBoxSectionProps<T>) {\n  return (\n    <RACSection {...props} className=\"cim-combo-box-section\">\n      <RACHeader className={clsx('cim-combo-box-header', textStyle({ variant: 'small', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACSection>\n  );\n}\n\nfunction ChevronDownIcon(props: SVGAttributes<SVGSVGElement>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\" fill=\"currentColor\" data-icon {...props}>\n      <path d=\"M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z\" />\n    </svg>\n  );\n}\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, 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  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    > {}\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    ...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\" 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> extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled'> {\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"]}

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

@@ -1,7 +1,12 @@
 import { type FormProps as RACFormProps } from 'react-aria-components';
-import type { DOMProps, LabellableProps } from '../types.js';
-export interface FormProps extends DOMProps, Omit<LabellableProps, 'label'>, Pick<RACFormProps, 'action' | 'validationErrors' | 'encType' | 'method' | 'target' | 'autoComplete' | 'autoCapitalize' | 'children' | 'onSubmit' | 'onReset' | 'onInvalid'> {
+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'> {
 }
-declare const _Form: (props: FormProps & import("react").RefAttributes<HTMLFormElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+/**
+ * A group of inputs that allows users to submit data to a server.
+ *
+ * See [forms guide](https://ui.cimpress.io/dev-guides/forms/).
+ */
+declare const _Form: (props: FormProps & import("react").RefAttributes<HTMLFormElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _Form as Form };
 //# sourceMappingURL=form.d.ts.map

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":"AAEA,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,SACf,SAAQ,QAAQ,EACd,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,QAAA,MAAM,KAAK,mJAA2C,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,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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -12,6 +13,11 @@ const with_style_props_js_1 = require("../../with-style-props.js");
 function Form({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Form, { ...props, className: (0, clsx_1.default)('cim-form', UNSAFE_className), style: UNSAFE_style, ref: ref, children: children }));
 }
+/**
+ * A group of inputs that allows users to submit data to a server.
+ *
+ * See [forms guide](https://ui.cimpress.io/dev-guides/forms/).
+ */
 const _Form = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Form), 'Form');
 exports.Form = _Form;
 //# sourceMappingURL=form.js.map

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,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,MAAM,KAAK,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAErC,qBAAI","sourcesContent":["import 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 { DOMProps, LabellableProps } from '../types.js';\n\nexport interface FormProps\n  extends DOMProps,\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\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 { 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"]}

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +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"}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleList = CollapsibleList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_aria_components_1 = require("react-aria-components");
+/**
+ * Displays a collapsible list activated via a trigger element.
+ *
+ * @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 }));
+}
+CollapsibleList.displayName = 'CollapsibleList';
+//# sourceMappingURL=collapsible-list.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,29 @@
+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;
+//# sourceMappingURL=form-field.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldLabel = FormFieldLabel;
+exports.FormFieldDescription = FormFieldDescription;
+exports.FormFieldError = FormFieldError;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const index_js_1 = require("../../../icons/index.js");
+const text_js_1 = require("../../typography/text.js");
+const utils_js_1 = require("../../typography/utils.js");
+/**
+ * Renders a label for a form field.
+ * @internal
+ */
+function FormFieldLabel({ children, isRequired, isDisabled, }) {
+    if (!children) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Label, { className: (0, clsx_1.default)('cim-form-field-label', (0, utils_js_1.textStyle)({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })), children: [children, isRequired && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { tone: "critical", as: "span", "aria-hidden": true, children: "*" }))] }));
+}
+/**
+ * Renders a description for a form field.
+ * @internal
+ */
+function FormFieldDescription({ children }) {
+    if (!children) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "description", className: (0, clsx_1.default)('cim-form-field-description', (0, utils_js_1.textStyle)({ variant: 'small', tone: 'subtle' })), children: children }));
+}
+/**
+ * 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
+ */
+function FormFieldError({ children }) {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.FieldError, { className: (0, clsx_1.default)('cim-form-field-error', (0, utils_js_1.textStyle)({ variant: 'small', tone: 'critical' })), children: (validation) => renderFieldError(children, validation) }));
+}
+function renderFieldError(fieldError, validation) {
+    const errors = typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);
+    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 }));
+}
+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] }));
+}
+//# sourceMappingURL=form-field.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +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"}

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalSpinner = Spinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+/**
+ * Displays a variable-size loading indicator to represent an ongoing operation.
+ *
+ * @internal
+ */
+function Spinner({ children, spinnerRef, size, UNSAFE_className, UNSAFE_style, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ProgressBar, { ...props, isIndeterminate: true, ref: spinnerRef, className: (0, clsx_1.default)('cim-spinner', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 80 80", width: size, height: size, preserveAspectRatio: "xMidYMid", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { className: "cim-spinner-ring-bg", cx: "40", cy: "40", r: "35" }), (0, jsx_runtime_1.jsx)("circle", { className: "cim-spinner-ring-fg", cx: "40", cy: "40", r: "35" })] }), children] }));
+}
+Spinner.displayName = 'Spinner';
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +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"]}

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

@@ -1,38 +1,48 @@
 import { type ReactNode } from 'react';
 import { type MenuItemProps as RACMenuItemProps } from 'react-aria-components';
-import type { DOMProps, Key, LabellableProps } from '../types.js';
-export interface MenuProps extends DOMProps, LabellableProps {
-    /** The contents of the menu. */
-    children?: ReactNode;
+import type { CommonProps, Key, LabellableProps, NavigationProps, CollectionProps, CollectionItem, StringLikeChildren } from '../types.js';
+export interface MenuProps<T extends CollectionItem = CollectionItem> extends CommonProps, CollectionProps<T>, LabellableProps {
+    /** 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;
 }
-declare const _Menu: (props: MenuProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => ReactNode;
+/**
+ * Displays a collapsible list of options and actions that users can choose from.
+ *
+ * See [menu usage guidelines](https://ui.cimpress.io/components/menu/usage-guidelines/).
+ */
+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 interface MenuSectionProps {
+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;
     /** The content to display as the section title. */
     title: string;
-    /** The contents of the section. */
-    children: ReactNode;
 }
-export declare function MenuSection({ title, children, ...props }: MenuSectionProps): import("react/jsx-runtime").JSX.Element;
+/** Groups list items within `Menu` into a section. */
+export declare function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuSection {
     var displayName: string;
 }
-export interface MenuItemProps extends Pick<RACMenuItemProps, 'isDisabled' | 'href' | 'hrefLang' | 'target' | 'rel' | 'download' | 'ping' | 'referrerPolicy' | 'routerOptions' | 'onAction'> {
+export interface MenuItemProps extends NavigationProps, Pick<RACMenuItemProps, 'isDisabled' | 'onAction'> {
     /** The ID of the item. Has to be unique across all sections and items. */
     id?: Key;
     /** The content to display as the label. */
-    label: string;
+    children: StringLikeChildren;
+    /** Additional description for the menu item. */
+    description?: string;
+    /** An icon representing the menu item. */
+    icon?: ReactNode;
 }
-export declare function MenuItem({ label, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+/** Renders a single list item within `Menu`. */
+export declare function MenuItem({ children, description, icon, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuItem {
     var displayName: string;
 }
-export declare function MenuSeparator(): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuSeparator {
+/** Renders a horizontal divider between list items within `Menu`. */
+export declare function MenuDivider(): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuDivider {
     var displayName: string;
 }
 //# sourceMappingURL=menu.d.ts.map

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":"AACA,OAAO,EAAE,KAAK,SAAS,EAAoD,MAAM,OAAO,CAAC;AACzF,OAAO,EAKL,KAAK,aAAa,IAAI,gBAAgB,EAMvC,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAKlE,MAAM,WAAW,SAAU,SAAQ,QAAQ,EAAE,eAAe;IAC1D,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AA6BD,QAAA,MAAM,KAAK,qIAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEzB,MAAM,WAAW,gBAAgB;IAC/B,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAS1E;yBATe,WAAW;;;AAa3B,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,gBAAgB,EACd,YAAY,GACZ,MAAM,GACN,UAAU,GACV,QAAQ,GACR,KAAK,GACL,UAAU,GACV,MAAM,GACN,gBAAgB,GAChB,eAAe,GACf,UAAU,CACb;IACD,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAQ1D;yBARe,QAAQ;;;AAYxB,wBAAgB,aAAa,4CAE5B;yBAFe,aAAa"}
+{"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,EAIL,KAAK,aAAa,IAAI,gBAAgB,EAMvC,MAAM,uBAAuB,CAAC;AAO/B,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;IACjB,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;AAmCzB,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,aAAc,SAAQ,eAAe,EAAE,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,CAAC;IACvG,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"}