@cimpress-ui/react 1.23.0 → 1.25.0

package/dist/esm/components/checkbox/checkbox.js

@@ -14,7 +14,7 @@ function Checkbox({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
             console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');
         }
     }, [children, ariaLabel, ariaLabelledBy]);
-    return (_jsx(RACCheckbox, { ...props, ref: ref, className: clsx('cim-checkbox', 'cim-checkbox-indicator-wrapper', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate, isSelected }) => (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { isIndeterminate: isIndeterminate, isSelected: isSelected }), children && (_jsx(Text, { as: "span", variant: "medium", children: children }))] })) }));
+    return (_jsx(RACCheckbox, { ...props, ref: ref, className: clsx('cim-checkbox', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate, isSelected, isDisabled, isReadOnly, isInvalid, isHovered, isPressed, isFocusVisible }) => (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { isIndeterminate: isIndeterminate, isSelected: isSelected, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: isInvalid, isHovered: isHovered, isPressed: isPressed, isFocusVisible: isFocusVisible }), children && (_jsx(Text, { as: "span", variant: "medium", children: children }))] })) }));
 }
 /**
  * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,IAAI,WAAW,EAA0C,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAC;AAEzF,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAyB7C,SAAS,QAAQ,CACf,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiB,EACrE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,gCAAgC,EAAE,gBAAgB,CAAC,EACnF,KAAK,EAAE,YAAY,YAElB,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACpC,8BACE,KAAC,iBAAiB,IAAC,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,GAAI,EAC9E,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n  extends\n    CommonProps,\n    AriaLabelingProps,\n    Pick<\n      RACCheckboxProps,\n      | 'onChange'\n      | 'isSelected'\n      | 'isIndeterminate'\n      | 'isDisabled'\n      | 'isReadOnly'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'form'\n      | 'name'\n      | 'value'\n      | 'defaultSelected'\n      | 'autoFocus'\n    > {\n  /** The label rendered next to the checkbox. */\n  children?: StringLikeChildren;\n}\n\nfunction Checkbox(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: CheckboxProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACCheckbox\n      {...props}\n      ref={ref}\n      className={clsx('cim-checkbox', 'cim-checkbox-indicator-wrapper', UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      {({ isIndeterminate, isSelected }) => (\n        <>\n          <CheckboxIndicator isIndeterminate={isIndeterminate} isSelected={isSelected} />\n          {children && (\n            <Text as=\"span\" variant=\"medium\">\n              {children}\n            </Text>\n          )}\n        </>\n      )}\n    </RACCheckbox>\n  );\n}\n\n/**\n * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n *\n * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,IAAI,WAAW,EAA0C,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAC;AAEzF,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAyB7C,SAAS,QAAQ,CACf,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiB,EACrE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,WAAW,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACrG,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAC7G,8BACE,KAAC,iBAAiB,IAChB,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,GAC9B,EACD,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n  extends\n    CommonProps,\n    AriaLabelingProps,\n    Pick<\n      RACCheckboxProps,\n      | 'onChange'\n      | 'isSelected'\n      | 'isIndeterminate'\n      | 'isDisabled'\n      | 'isReadOnly'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'form'\n      | 'name'\n      | 'value'\n      | 'defaultSelected'\n      | 'autoFocus'\n    > {\n  /** The label rendered next to the checkbox. */\n  children?: StringLikeChildren;\n}\n\nfunction Checkbox(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: CheckboxProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACCheckbox {...props} ref={ref} className={clsx('cim-checkbox', UNSAFE_className)} style={UNSAFE_style}>\n      {({ isIndeterminate, isSelected, isDisabled, isReadOnly, isInvalid, isHovered, isPressed, isFocusVisible }) => (\n        <>\n          <CheckboxIndicator\n            isIndeterminate={isIndeterminate}\n            isSelected={isSelected}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isInvalid={isInvalid}\n            isHovered={isHovered}\n            isPressed={isPressed}\n            isFocusVisible={isFocusVisible}\n          />\n          {children && (\n            <Text as=\"span\" variant=\"medium\">\n              {children}\n            </Text>\n          )}\n        </>\n      )}\n    </RACCheckbox>\n  );\n}\n\n/**\n * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n *\n * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}

package/dist/esm/components/code/code.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface CodeProps extends CommonProps {
+    /** The inline code content to display. */
+    children: ReactNode;
+}
+/**
+ * Displays short, inline code snippets.
+ *
+ * See [code usage guidelines](https://ui.cimpress.io/components/code).
+ */
+declare const _Code: (props: CodeProps & import("react").RefAttributes<HTMLElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Code as Code };
+//# sourceMappingURL=code.d.ts.map

package/dist/esm/components/code/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../../src/components/code/code.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,0CAA0C;IAC1C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD;;;;GAIG;AACH,QAAA,MAAM,KAAK,wJAA2C,CAAC;AACvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC"}

package/dist/esm/components/code/code.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+function Code({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsx("code", { ...props, ref: ref, className: clsx('cim-code', UNSAFE_className), style: UNSAFE_style, children: children }));
+}
+/**
+ * Displays short, inline code snippets.
+ *
+ * See [code usage guidelines](https://ui.cimpress.io/components/code).
+ */
+const _Code = withStyleProps(forwardRef(Code), 'Code');
+export { _Code as Code };
+//# sourceMappingURL=code.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","sourceRoot":"","sources":["../../../../src/components/code/code.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAQ3D,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAAE,GAA8B;IAC7G,OAAO,CACL,kBAAU,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YAC1F,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,KAAK,GAAG,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AACvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface CodeProps extends CommonProps {\n  /** The inline code content to display. */\n  children: ReactNode;\n}\n\nfunction Code({ children, UNSAFE_className, UNSAFE_style, ...props }: CodeProps, ref: ForwardedRef<HTMLElement>) {\n  return (\n    <code {...props} ref={ref} className={clsx('cim-code', UNSAFE_className)} style={UNSAFE_style}>\n      {children}\n    </code>\n  );\n}\n\n/**\n * Displays short, inline code snippets.\n *\n * See [code usage guidelines](https://ui.cimpress.io/components/code).\n */\nconst _Code = withStyleProps(forwardRef(Code), 'Code');\nexport { _Code as Code };\n"]}

package/dist/esm/components/code-block/code-block.d.ts

@@ -0,0 +1,13 @@
+import type { CommonProps } from '../types.js';
+export interface CodeBlockProps extends CommonProps {
+    /** The code content to display. */
+    code: string;
+}
+/**
+ * Displays preformatted code content in a styled container.
+ *
+ * See [code block usage guidelines](https://ui.cimpress.io/components/code-block).
+ */
+declare const _CodeBlock: (props: CodeBlockProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _CodeBlock as CodeBlock };
+//# sourceMappingURL=code-block.d.ts.map

package/dist/esm/components/code-block/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;CACd;AAqDD;;;;GAIG;AACH,QAAA,MAAM,UAAU,gKAAqD,CAAC;AACtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/esm/components/code-block/code-block.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFocusRing } from '@react-aria/focus';
+import { useLayoutEffect } from '@react-aria/utils';
+import clsx from 'clsx';
+import { useRef, useState } from 'react';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+function CodeBlock({ code, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    // Most of the scrollable logic is copied from `FocusableContainer`, but the scrollable element is a child of the container, not the container itself.
+    const [isScrollable, setIsScrollable] = useState(false);
+    const scrollableRef = useRef(null);
+    const { focusProps, isFocusVisible } = useFocusRing();
+    useLayoutEffect(() => {
+        const scrollableElement = scrollableRef.current;
+        const isSSR = typeof window === 'undefined';
+        let scrollableResizeObserver;
+        if (scrollableElement && !isSSR) {
+            scrollableResizeObserver = new window.ResizeObserver((entries) => {
+                if (entries[0]) {
+                    const { target } = entries[0];
+                    const isScrollableHorizontal = target.scrollWidth > target.clientWidth;
+                    const isScrollableVertical = target.scrollHeight > target.clientHeight;
+                    setIsScrollable(isScrollableHorizontal || isScrollableVertical);
+                }
+            });
+            scrollableResizeObserver.observe(scrollableElement);
+        }
+        return () => {
+            if (scrollableElement && scrollableResizeObserver) {
+                scrollableResizeObserver.unobserve(scrollableElement);
+            }
+        };
+    }, [scrollableRef]);
+    return (_jsx("div", { ...props, ref: ref, className: clsx('cim-code-block', UNSAFE_className), style: UNSAFE_style, "data-focus-visible": isFocusVisible || undefined, children: _jsx("pre", { ...focusProps, ref: scrollableRef, tabIndex: isScrollable ? 0 : -1, children: _jsx("code", { children: code }) }) }));
+}
+/**
+ * Displays preformatted code content in a styled container.
+ *
+ * See [code block usage guidelines](https://ui.cimpress.io/components/code-block).
+ */
+const _CodeBlock = withStyleProps(forwardRef(CodeBlock), 'CodeBlock');
+export { _CodeBlock as CodeBlock };
+//# sourceMappingURL=code-block.js.map

package/dist/esm/components/code-block/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAQ3D,SAAS,SAAS,CAChB,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EAClE,GAAiC;IAEjC,sJAAsJ;IACtJ,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACnD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,iBAAiB,GAAG,aAAa,CAAC,OAAO,CAAC;QAChD,MAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;QAE5C,IAAI,wBAAoD,CAAC;QAEzD,IAAI,iBAAiB,IAAI,CAAC,KAAK,EAAE,CAAC;YAChC,wBAAwB,GAAG,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC/D,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;oBACf,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;oBAC9B,MAAM,sBAAsB,GAAG,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC;oBACvE,MAAM,oBAAoB,GAAG,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;oBAEvE,eAAe,CAAC,sBAAsB,IAAI,oBAAoB,CAAC,CAAC;gBAClE,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,wBAAwB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACtD,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,iBAAiB,IAAI,wBAAwB,EAAE,CAAC;gBAClD,wBAAwB,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;YACxD,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EACnD,KAAK,EAAE,YAAY,wBACC,cAAc,IAAI,SAAS,YAE/C,iBAAS,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YACtE,yBAAO,IAAI,GAAQ,GACf,GACF,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC,CAAC;AACtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { useLayoutEffect } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { useRef, useState, type ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface CodeBlockProps extends CommonProps {\n  /** The code content to display. */\n  code: string;\n}\n\nfunction CodeBlock(\n  { code, UNSAFE_className, UNSAFE_style, ...props }: CodeBlockProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  // Most of the scrollable logic is copied from `FocusableContainer`, but the scrollable element is a child of the container, not the container itself.\n  const [isScrollable, setIsScrollable] = useState(false);\n  const scrollableRef = useRef<HTMLPreElement>(null);\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  useLayoutEffect(() => {\n    const scrollableElement = scrollableRef.current;\n    const isSSR = typeof window === 'undefined';\n\n    let scrollableResizeObserver: ResizeObserver | undefined;\n\n    if (scrollableElement && !isSSR) {\n      scrollableResizeObserver = new window.ResizeObserver((entries) => {\n        if (entries[0]) {\n          const { target } = entries[0];\n          const isScrollableHorizontal = target.scrollWidth > target.clientWidth;\n          const isScrollableVertical = target.scrollHeight > target.clientHeight;\n\n          setIsScrollable(isScrollableHorizontal || isScrollableVertical);\n        }\n      });\n\n      scrollableResizeObserver.observe(scrollableElement);\n    }\n\n    return () => {\n      if (scrollableElement && scrollableResizeObserver) {\n        scrollableResizeObserver.unobserve(scrollableElement);\n      }\n    };\n  }, [scrollableRef]);\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx('cim-code-block', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-focus-visible={isFocusVisible || undefined}\n    >\n      <pre {...focusProps} ref={scrollableRef} tabIndex={isScrollable ? 0 : -1}>\n        <code>{code}</code>\n      </pre>\n    </div>\n  );\n}\n\n/**\n * Displays preformatted code content in a styled container.\n *\n * See [code block usage guidelines](https://ui.cimpress.io/components/code-block).\n */\nconst _CodeBlock = withStyleProps(forwardRef(CodeBlock), 'CodeBlock');\nexport { _CodeBlock as CodeBlock };\n"]}

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

@@ -22,6 +22,7 @@ export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extend
     isVirtualized?: boolean;
     /** Handler that is called when the list of items is scrolled. */
     onScroll?: UIEventHandler<HTMLDivElement>;
+    UNSTABLE_isClearable?: boolean;
 }
 /** The imperative API exposed by the `ComboBox` component. */
 export interface ComboBoxApi {

package/dist/esm/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":"AAGA,OAAO,EAGL,KAAK,cAAc,EAIpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAeL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAU/B,OAAO,KAAK,EACV,QAAQ,EACR,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAWrB,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,SACE,WAAW,EACX,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,qBAAqB,EACrB,QAAQ,CAAC,WAAW,CAAC,EACrB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB;IACH,iEAAiE;IACjE,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAuGD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA1GG,CAAC,SAAS,cAAc,iKA0GwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAwDjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACvE,mBAAmB,CAAC,CAAC,CAAC,EACtB,YAAY,GAAG,cAAc,GAAG,YAAY,CAC7C;IACC,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,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"}
+{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,cAAc,EAIpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAeL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAW/B,OAAO,KAAK,EACV,QAAQ,EACR,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAWrB,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,SACE,WAAW,EACX,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,qBAAqB,EACrB,QAAQ,CAAC,WAAW,CAAC,EACrB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB;IACH,iEAAiE;IACjE,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAgHD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAnHG,CAAC,SAAS,cAAc,iKAmHwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAsFjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACvE,mBAAmB,CAAC,CAAC,CAAC,EACtB,YAAY,GAAG,cAAc,GAAG,YAAY,CAC7C;IACC,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,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/esm/components/combo-box/combo-box.js

@@ -6,12 +6,13 @@ import { usePreventScroll } from 'react-aria';
 import { Button as RACButton, Collection as RACCollection, ComboBox as RACComboBox, ComboBoxStateContext as RACComboBoxStateContext, Group as RACGroup, Header as RACHeader, Input as RACInput, ListBox as RACListBox, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxItem as RACListBoxItem, ListBoxSection as RACListBoxSection, ListLayout as RACListLayout, Text as RACText, Virtualizer as RACVirtualizer, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { useLocalizedMessages } from '../../i18n/index.js';
-import { IconCheck, IconChevronDown } from '../../icons/index.js';
+import { IconCheckBold, IconChevronDown } from '../../icons/index.js';
 import { isProduction } from '../../utils/is-production.js';
 import { useProductionWarning } from '../../utils/use-production-warning.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
 import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
+import { XButton } from '../internal/x-button/x-button.js';
 import { Spinner } from '../spinner/spinner.js';
 import { textStyle } from '../typography/utils.js';
 const VIRTUAL_LAYOUT_OPTIONS = {
@@ -21,7 +22,7 @@ const VIRTUAL_LAYOUT_OPTIONS = {
     padding: 0,
     gap: 0,
 };
-function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, apiRef, selectedKey, defaultSelectedKey, onSelectionChange, validate, ...props }, ref) {
+function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, UNSTABLE_isClearable: isClearable = false, apiRef, selectedKey, defaultSelectedKey, onSelectionChange, validate, ...props }, ref) {
     const inputRef = useRef(null);
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     useProductionWarning(() => {
@@ -36,12 +37,13 @@ function ComboBox({ label, description, error, items, children, placeholder, UNS
         focus: () => inputRef.current?.focus(),
         select: () => inputRef.current?.select(),
     }), []);
+    const isFieldClearable = isClearable && !props.isDisabled && !isReadOnly;
     const listBox = (_jsx(ComboBoxList, { items: items, isLoading: isLoading, onLoadMore: onLoadMore, onScroll: onScroll, children: children }));
     return (_jsxs(RACComboBox, { ...props, ref: ref, className: clsx('cim-combo-box', UNSAFE_className), style: UNSAFE_style, selectionMode: "single", value: selectedKey, defaultValue: defaultSelectedKey, onChange: onSelectionChange, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, validate: validate
             ? ({ inputValue, value }) => {
                 return validate({ inputValue, selectedKey: value });
             }
-            : undefined, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-combo-box-input-group", children: [_jsx(ComboBoxInput, { inputRef: inputRef, isReadOnly: isReadOnly, placeholder: placeholder }), _jsx(RACButton, { className: "cim-combo-box-button", children: _jsx(IconChevronDown, {}) })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
+            : undefined, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-combo-box-input-group", children: [_jsx(ComboBoxInput, { inputRef: inputRef, isReadOnly: isReadOnly, placeholder: placeholder, isClearable: isFieldClearable }), isFieldClearable && _jsx(ComboBoxClearButton, {}), _jsx(RACButton, { className: "cim-combo-box-button", children: _jsx(IconChevronDown, {}) })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
 }
 /**
  * Allows users to filter a collapsible list and select one item from it.
@@ -50,12 +52,28 @@ function ComboBox({ label, description, error, items, children, placeholder, UNS
  */
 const _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');
 export { _ComboBox as ComboBox };
-function ComboBoxInput({ inputRef, isReadOnly, placeholder, }) {
+function ComboBoxClearButton() {
+    const comboBoxState = useContext(RACComboBoxStateContext);
+    const inputValue = comboBoxState?.inputValue;
+    if (!comboBoxState || inputValue === '') {
+        return null;
+    }
+    return (_jsx(XButton, { onPress: () => {
+            comboBoxState?.setValue(null);
+        }, iconType: "circled", "aria-label": "Clear selection", 
+        // Prevent this button from acting as a trigger for opening/closing the ComboBox
+        slot: null, excludeFromTabOrder: true }));
+}
+function ComboBoxInput({ inputRef, isReadOnly, placeholder, isClearable, }) {
     const comboBoxState = useContext(RACComboBoxStateContext);
     return (_jsx(RACInput, { ref: inputRef, className: clsx('cim-combo-box-input', textStyle({ variant: 'body' })), 
         // Ensure the popover opens when the input is clicked.
         // By default, React Aria only opens the popover when the input is focused.
-        onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder }));
+        onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder, onKeyDown: (e) => {
+            if (e.key === 'Escape' && !comboBoxState?.isOpen && isClearable) {
+                comboBoxState?.setValue(null);
+            }
+        } }));
 }
 function ComboBoxList({ items, children, isLoading, onLoadMore, onScroll, }) {
     const comboBoxState = useContext(RACComboBoxStateContext);
@@ -66,7 +84,7 @@ function ComboBoxList({ items, children, isLoading, onLoadMore, onScroll, }) {
 /** Renders a single list item within `ComboBox`. */
 export function ComboBoxItem({ children, ...props }) {
     const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
-    return (_jsx(RACListBoxItem, { ...props, className: "cim-combo-box-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(IconCheck, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
+    return (_jsx(RACListBoxItem, { ...props, className: "cim-combo-box-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(IconCheckBold, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
 }
 ComboBoxItem.displayName = 'ComboBoxItem';
 /** Groups list items within `ComboBox` into a section. */

package/dist/esm/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 {\n  type ForwardedRef,\n  type MutableRefObject,\n  type UIEventHandler,\n  useContext,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { usePreventScroll } from 'react-aria';\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  ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  Text as RACText,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type {\n  ApiProps,\n  AsyncItemLoadingProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  estimatedRowHeight: 40,\n  estimatedHeadingHeight: 32,\n  loaderHeight: 40,\n  padding: 0,\n  gap: 0,\n};\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\n    CommonProps,\n    FieldWithPlaceholderProps<ComboBoxValidationValue>,\n    CollectionProps<T>,\n    AsyncItemLoadingProps,\n    ApiProps<ComboBoxApi>,\n    Pick<\n      RACComboBoxProps<T>,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    > {\n  /** The currently selected key in the collection (controlled). */\n  selectedKey?: Key | null;\n  /** The initial selected key in the collection (uncontrolled). */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (key: Key | null) => void;\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n  /** Handler that is called when the list of items is scrolled. */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `ComboBox` component. */\nexport interface ComboBoxApi {\n  /** Focuses the input field and opens the list of items. */\n  focus: () => void;\n  /** Selects the contents of the input field. */\n  select: () => void;\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    onScroll,\n    isVirtualized = false,\n    UNSTABLE_isLoading: isLoading,\n    UNSTABLE_onLoadMore: onLoadMore,\n    apiRef,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    validate,\n    ...props\n  }: ComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\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 (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n  }\n\n  useImperativeHandle(\n    apiRef,\n    () => ({\n      focus: () => inputRef.current?.focus(),\n      select: () => inputRef.current?.select(),\n    }),\n    [],\n  );\n\n  const listBox = (\n    <ComboBoxList<T> items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n      {children}\n    </ComboBoxList>\n  );\n\n  return (\n    <RACComboBox\n      {...props}\n      ref={ref}\n      className={clsx('cim-combo-box', UNSAFE_className)}\n      style={UNSAFE_style}\n      selectionMode=\"single\"\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      onChange={onSelectionChange}\n      menuTrigger=\"focus\"\n      isReadOnly={isReadOnly}\n      data-readonly={isReadOnly ? true : undefined}\n      validate={\n        validate\n          ? ({ inputValue, value }) => {\n              return validate({ inputValue, selectedKey: value });\n            }\n          : undefined\n      }\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-combo-box-input-group\">\n        <ComboBoxInput inputRef={inputRef} 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        {isVirtualized ? (\n          <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n            {listBox}\n          </RACVirtualizer>\n        ) : (\n          listBox\n        )}\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.io/components/combo-box)\n */\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n  inputRef,\n  isReadOnly,\n  placeholder,\n}: {\n  inputRef: MutableRefObject<HTMLInputElement | null>;\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n\n  return (\n    <RACInput\n      ref={inputRef}\n      className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\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 ComboBoxList<T extends CollectionItem = CollectionItem>({\n  items,\n  children,\n  isLoading,\n  onLoadMore,\n  onScroll,\n}: Pick<ComboBoxProps<T>, 'items' | 'children' | 'onScroll'> & {\n  isLoading: ComboBoxProps['UNSTABLE_isLoading'];\n  onLoadMore: ComboBoxProps['UNSTABLE_onLoadMore'];\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n  usePreventScroll({ isDisabled: !comboBoxState?.isOpen });\n\n  return (\n    <RACListBox\n      className=\"cim-combo-box-listbox\"\n      onScroll={onScroll}\n      renderEmptyState={() =>\n        isLoading ? <Spinner aria-label={collectionMessages.format('loading')} size=\"small\" marginY={8} /> : null\n      }\n    >\n      <RACCollection items={items}>{children}</RACCollection>\n      <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n        <Spinner aria-label={collectionMessages.format('loadingMore')} size=\"small\" marginY={8} />\n      </RACListBoxLoadMoreItem>\n    </RACListBox>\n  );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem> extends Pick<\n  RACListBoxItemProps<T>,\n  'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `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 (!isProduction() && 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 {\n  type ForwardedRef,\n  type MutableRefObject,\n  type UIEventHandler,\n  useContext,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { usePreventScroll } from 'react-aria';\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  ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  Text as RACText,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheckBold, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type {\n  ApiProps,\n  AsyncItemLoadingProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  estimatedRowHeight: 40,\n  estimatedHeadingHeight: 32,\n  loaderHeight: 40,\n  padding: 0,\n  gap: 0,\n};\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\n    CommonProps,\n    FieldWithPlaceholderProps<ComboBoxValidationValue>,\n    CollectionProps<T>,\n    AsyncItemLoadingProps,\n    ApiProps<ComboBoxApi>,\n    Pick<\n      RACComboBoxProps<T>,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    > {\n  /** The currently selected key in the collection (controlled). */\n  selectedKey?: Key | null;\n  /** The initial selected key in the collection (uncontrolled). */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (key: Key | null) => void;\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n  /** Handler that is called when the list of items is scrolled. */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n  UNSTABLE_isClearable?: boolean;\n}\n\n/** The imperative API exposed by the `ComboBox` component. */\nexport interface ComboBoxApi {\n  /** Focuses the input field and opens the list of items. */\n  focus: () => void;\n  /** Selects the contents of the input field. */\n  select: () => void;\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    onScroll,\n    isVirtualized = false,\n    UNSTABLE_isLoading: isLoading,\n    UNSTABLE_onLoadMore: onLoadMore,\n    UNSTABLE_isClearable: isClearable = false,\n    apiRef,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    validate,\n    ...props\n  }: ComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\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 (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n  }\n\n  useImperativeHandle(\n    apiRef,\n    () => ({\n      focus: () => inputRef.current?.focus(),\n      select: () => inputRef.current?.select(),\n    }),\n    [],\n  );\n\n  const isFieldClearable = isClearable && !props.isDisabled && !isReadOnly;\n\n  const listBox = (\n    <ComboBoxList<T> items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n      {children}\n    </ComboBoxList>\n  );\n\n  return (\n    <RACComboBox\n      {...props}\n      ref={ref}\n      className={clsx('cim-combo-box', UNSAFE_className)}\n      style={UNSAFE_style}\n      selectionMode=\"single\"\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      onChange={onSelectionChange}\n      menuTrigger=\"focus\"\n      isReadOnly={isReadOnly}\n      data-readonly={isReadOnly ? true : undefined}\n      validate={\n        validate\n          ? ({ inputValue, value }) => {\n              return validate({ inputValue, selectedKey: value });\n            }\n          : undefined\n      }\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-combo-box-input-group\">\n        <ComboBoxInput\n          inputRef={inputRef}\n          isReadOnly={isReadOnly}\n          placeholder={placeholder}\n          isClearable={isFieldClearable}\n        />\n        {isFieldClearable && <ComboBoxClearButton />}\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        {isVirtualized ? (\n          <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n            {listBox}\n          </RACVirtualizer>\n        ) : (\n          listBox\n        )}\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.io/components/combo-box)\n */\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxClearButton() {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const inputValue = comboBoxState?.inputValue;\n\n  if (!comboBoxState || inputValue === '') {\n    return null;\n  }\n\n  return (\n    <XButton\n      onPress={() => {\n        comboBoxState?.setValue(null);\n      }}\n      iconType=\"circled\"\n      // TODO: i18n once stabilized\n      aria-label=\"Clear selection\"\n      // Prevent this button from acting as a trigger for opening/closing the ComboBox\n      slot={null}\n      excludeFromTabOrder\n    />\n  );\n}\n\nfunction ComboBoxInput({\n  inputRef,\n  isReadOnly,\n  placeholder,\n  isClearable,\n}: {\n  inputRef: MutableRefObject<HTMLInputElement | null>;\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n  isClearable: boolean;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n\n  return (\n    <RACInput\n      ref={inputRef}\n      className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\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      onKeyDown={(e) => {\n        if (e.key === 'Escape' && !comboBoxState?.isOpen && isClearable) {\n          comboBoxState?.setValue(null);\n        }\n      }}\n    />\n  );\n}\n\nfunction ComboBoxList<T extends CollectionItem = CollectionItem>({\n  items,\n  children,\n  isLoading,\n  onLoadMore,\n  onScroll,\n}: Pick<ComboBoxProps<T>, 'items' | 'children' | 'onScroll'> & {\n  isLoading: ComboBoxProps['UNSTABLE_isLoading'];\n  onLoadMore: ComboBoxProps['UNSTABLE_onLoadMore'];\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n  usePreventScroll({ isDisabled: !comboBoxState?.isOpen });\n\n  return (\n    <RACListBox\n      className=\"cim-combo-box-listbox\"\n      onScroll={onScroll}\n      renderEmptyState={() =>\n        isLoading ? <Spinner aria-label={collectionMessages.format('loading')} size=\"small\" marginY={8} /> : null\n      }\n    >\n      <RACCollection items={items}>{children}</RACCollection>\n      <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n        <Spinner aria-label={collectionMessages.format('loadingMore')} size=\"small\" marginY={8} />\n      </RACListBoxLoadMoreItem>\n    </RACListBox>\n  );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem> extends Pick<\n  RACListBoxItemProps<T>,\n  'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `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          <IconCheckBold />\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 (!isProduction() && 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/esm/components/internal/checkbox-indicator/checkbox-indicator.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { IconCheckBold, IconSubtractBold } from '../../../icons/index.js';
-// TODO: refactor so that state is accepted through props/context instead of a parent className
 /**
  * Displays a non-interactive, purely visual checkbox indicator.
- * Requires adding a `cim-checkbox-indicator-wrapper` className to the parent element.
  *
  * @internal
  */
-export function CheckboxIndicator({ isSelected, isIndeterminate, UNSAFE_className, UNSAFE_style, ...props }) {
-    return (_jsx("div", { ...props, className: clsx('cim-checkbox-indicator', UNSAFE_className), style: UNSAFE_style, "data-selected": isSelected, "aria-hidden": true, children: _jsx("div", { className: "cim-checkbox-indicator-icon", children: isIndeterminate ? _jsx(IconSubtractBold, {}) : _jsx(IconCheckBold, {}) }) }));
+export function CheckboxIndicator({ isSelected, isIndeterminate, isDisabled, isReadOnly, isInvalid, isHovered, isPressed, isFocusVisible, UNSAFE_className, UNSAFE_style, ...props }) {
+    return (_jsx("div", { ...props, className: clsx('cim-checkbox-indicator', UNSAFE_className), style: UNSAFE_style, "data-selected": isSelected || undefined, "data-indeterminate": isIndeterminate || undefined, "data-disabled": isDisabled || undefined, "data-readonly": isReadOnly || undefined, "data-invalid": isInvalid || undefined, "data-hovered": isHovered || undefined, "data-pressed": isPressed || undefined, "data-focus-visible": isFocusVisible || undefined, "aria-hidden": true, children: _jsx("div", { className: "cim-checkbox-indicator-icon", children: isIndeterminate ? _jsx(IconSubtractBold, {}) : _jsx(IconCheckBold, {}) }) }));
 }
 CheckboxIndicator.displayName = 'CheckboxIndicator';
 //# sourceMappingURL=checkbox-indicator.js.map

package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-indicator.js","sourceRoot":"","sources":["../../../../../src/components/internal/checkbox-indicator/checkbox-indicator.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAK1E,+FAA+F;AAC/F;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACe;IACvB,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,wBAAwB,EAAE,gBAAgB,CAAC,EAC3D,KAAK,EAAE,YAAY,mBACJ,UAAU,iCAGzB,cAAK,SAAS,EAAC,6BAA6B,YAAE,eAAe,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,GAAO,GAC3G,CACP,CAAC;AACJ,CAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { IconCheckBold, IconSubtractBold } from '../../../icons/index.js';\nimport type { CommonProps } from '../../types.js';\n\ninterface CheckboxIndicatorProps extends CommonProps, Pick<RACCheckboxProps, 'isSelected' | 'isIndeterminate'> {}\n\n// TODO: refactor so that state is accepted through props/context instead of a parent className\n/**\n * Displays a non-interactive, purely visual checkbox indicator.\n * Requires adding a `cim-checkbox-indicator-wrapper` className to the parent element.\n *\n * @internal\n */\nexport function CheckboxIndicator({\n  isSelected,\n  isIndeterminate,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: CheckboxIndicatorProps) {\n  return (\n    <div\n      {...props}\n      className={clsx('cim-checkbox-indicator', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-selected={isSelected}\n      aria-hidden\n    >\n      <div className=\"cim-checkbox-indicator-icon\">{isIndeterminate ? <IconSubtractBold /> : <IconCheckBold />}</div>\n    </div>\n  );\n}\n\nCheckboxIndicator.displayName = 'CheckboxIndicator';\n"]}
+{"version":3,"file":"checkbox-indicator.js","sourceRoot":"","sources":["../../../../../src/components/internal/checkbox-indicator/checkbox-indicator.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAc1E;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,UAAU,EACV,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACe;IACvB,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,wBAAwB,EAAE,gBAAgB,CAAC,EAC3D,KAAK,EAAE,YAAY,mBACJ,UAAU,IAAI,SAAS,wBAClB,eAAe,IAAI,SAAS,mBACjC,UAAU,IAAI,SAAS,mBACvB,UAAU,IAAI,SAAS,kBACxB,SAAS,IAAI,SAAS,kBACtB,SAAS,IAAI,SAAS,kBACtB,SAAS,IAAI,SAAS,wBAChB,cAAc,IAAI,SAAS,iCAG/C,cAAK,SAAS,EAAC,6BAA6B,YAAE,eAAe,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,GAAO,GAC3G,CACP,CAAC;AACJ,CAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { IconCheckBold, IconSubtractBold } from '../../../icons/index.js';\nimport type { CommonProps } from '../../types.js';\n\ninterface CheckboxIndicatorProps extends CommonProps {\n  isSelected?: boolean;\n  isIndeterminate?: boolean;\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n  isInvalid?: boolean;\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isFocusVisible?: boolean;\n}\n\n/**\n * Displays a non-interactive, purely visual checkbox indicator.\n *\n * @internal\n */\nexport function CheckboxIndicator({\n  isSelected,\n  isIndeterminate,\n  isDisabled,\n  isReadOnly,\n  isInvalid,\n  isHovered,\n  isPressed,\n  isFocusVisible,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: CheckboxIndicatorProps) {\n  return (\n    <div\n      {...props}\n      className={clsx('cim-checkbox-indicator', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-selected={isSelected || undefined}\n      data-indeterminate={isIndeterminate || undefined}\n      data-disabled={isDisabled || undefined}\n      data-readonly={isReadOnly || undefined}\n      data-invalid={isInvalid || undefined}\n      data-hovered={isHovered || undefined}\n      data-pressed={isPressed || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      aria-hidden\n    >\n      <div className=\"cim-checkbox-indicator-icon\">{isIndeterminate ? <IconSubtractBold /> : <IconCheckBold />}</div>\n    </div>\n  );\n}\n\nCheckboxIndicator.displayName = 'CheckboxIndicator';\n"]}

package/dist/esm/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,iDAAiD;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAwC,MAAM,uBAAuB,CAAC;AAOpG;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAAuC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/G,KAAC,UAAU,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,sBAAsB,EAAC,gBAAgB,EAAE,EAAE,yCACnF,QAAQ,GACE,CACd,CAAC,CAAC;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { forwardRef } from 'react';\nimport { Popover as RACPopover, type PopoverProps as RACPopoverProps } from 'react-aria-components';\n\ninterface CollapsibleListProps extends Pick<\n  RACPopoverProps,\n  'placement' | 'offset' | 'maxHeight' | 'children' | 'triggerRef' | 'isNonModal'\n> {}\n\n/**\n * Displays a collapsible list activated via a trigger element.\n *\n * @internal\n */\nexport const CollapsibleList = forwardRef<HTMLDivElement, CollapsibleListProps>(({ children, ...props }, ref) => (\n  <RACPopover {...props} ref={ref} className=\"cim-collapsible-list\" containerPadding={16} data-cim-style-root>\n    {children}\n  </RACPopover>\n));\n\nCollapsibleList.displayName = 'CollapsibleList';\n"]}
+{"version":3,"file":"collapsible-list.js","sourceRoot":"","sources":["../../../../../src/components/internal/collapsible-list/collapsible-list.tsx"],"names":[],"mappings":";AAAA,iDAAiD;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAwC,MAAM,uBAAuB,CAAC;AAOpG;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAAuC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/G,KAAC,UAAU,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,sBAAsB,EAAC,gBAAgB,EAAE,EAAE,yCACnF,QAAQ,GACE,CACd,CAAC,CAAC;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { forwardRef } from 'react';\nimport { Popover as RACPopover, type PopoverProps as RACPopoverProps } from 'react-aria-components';\n\ninterface CollapsibleListProps extends Pick<\n  RACPopoverProps,\n  'placement' | 'offset' | 'crossOffset' | 'maxHeight' | 'children' | 'triggerRef' | 'isNonModal'\n> {}\n\n/**\n * Displays a collapsible list activated via a trigger element.\n *\n * @internal\n */\nexport const CollapsibleList = forwardRef<HTMLDivElement, CollapsibleListProps>(({ children, ...props }, ref) => (\n  <RACPopover {...props} ref={ref} className=\"cim-collapsible-list\" containerPadding={16} data-cim-style-root>\n    {children}\n  </RACPopover>\n));\n\nCollapsibleList.displayName = 'CollapsibleList';\n"]}

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

@@ -1,4 +1,4 @@
-import type { ReactNode, UIEventHandler } from 'react';
+import { type ReactElement, type ReactNode, type UIEventHandler } from 'react';
 import { type MenuProps as RACMenuProps, type MenuItemProps as RACMenuItemProps, type MenuSectionProps as RACMenuSectionProps, type MenuTriggerProps as RACMenuTriggerProps } from 'react-aria-components';
 import type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';
 export interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {
@@ -14,6 +14,19 @@ export declare function MenuRoot(props: MenuRootProps): import("react/jsx-runtim
 export declare namespace MenuRoot {
     var displayName: string;
 }
+export interface SubmenuRootProps {
+    /** The submenu trigger with its associated menu. Provide the item trigger as the first child, and the menu as the second child. */
+    children: ReactElement[];
+}
+/**
+ * Encapsulates a submenu trigger and its associated menu. The trigger must be a `MenuItem`, and the menu will be displayed when the trigger is hovered or focused.
+ *
+ * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).
+ */
+export declare function SubmenuRoot({ children, ...props }: SubmenuRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SubmenuRoot {
+    var displayName: string;
+}
 export interface MenuProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T>, Pick<RACMenuProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {
     /**
      * The alignment of the menu overlay relative to its trigger.

package/dist/esm/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,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAIL,KAAK,SAAS,IAAI,YAAY,EAE9B,KAAK,aAAa,IAAI,gBAAgB,EAEtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE5C,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAG7G,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;IACzG,2HAA2H;IAC3H,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;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,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,mBAAmB,GAAG,eAAe,CAAC;IACzG;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAe,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,2CAczF;yBAde,IAAI;;;AAkBpB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzE,SAAQ,eAAe,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,mBAAmB,GAAG,eAAe,CAAC;IAChH,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,EAAE,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IAC1G,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,2CA+BhF;yBA/Be,QAAQ"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuC,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACpH,OAAO,EAIL,KAAK,SAAS,IAAI,YAAY,EAE9B,KAAK,aAAa,IAAI,gBAAgB,EAEtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE5C,KAAK,gBAAgB,IAAI,mBAAmB,EAG7C,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAK7G,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;IACzG,2HAA2H;IAC3H,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ;;;AAMxB,MAAM,WAAW,gBAAgB;IAC/B,mIAAmI;IACnI,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CASnE;yBATe,WAAW;;;AAa3B,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,eAAe,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,mBAAmB,GAAG,eAAe,CAAC;IACzG;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAe,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,2CAiBzF;yBAjBe,IAAI;;;AAqBpB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzE,SAAQ,eAAe,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,mBAAmB,GAAG,eAAe,CAAC;IAChH,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,EAAE,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IAC1G,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,2CAiChF;yBAjCe,QAAQ"}

package/dist/esm/components/menu/menu.js

@@ -1,12 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { Collection as RACCollection, Header as RACHeader, Menu as RACMenu, MenuItem as RACMenuItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Text as RACText, } from 'react-aria-components';
-import { IconCheckBold } from '../../icons/index.js';
+import { Children, createContext, useContext } from 'react';
+import { Collection as RACCollection, Header as RACHeader, Menu as RACMenu, MenuItem as RACMenuItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, SubmenuTrigger as RACSubmenuTrigger, Text as RACText, } from 'react-aria-components';
+import { IconCheckBold, IconChevronRight } from '../../icons/index.js';
 import { isProduction } from '../../utils/is-production.js';
 import { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';
 import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
 import { textStyle } from '../typography/utils.js';
+const SubmenuContext = createContext(false);
 /**
  * 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.
  *
@@ -16,12 +18,23 @@ export function MenuRoot(props) {
     return _jsx(RACMenuTrigger, { ...props });
 }
 MenuRoot.displayName = 'MenuRoot';
+/**
+ * Encapsulates a submenu trigger and its associated menu. The trigger must be a `MenuItem`, and the menu will be displayed when the trigger is hovered or focused.
+ *
+ * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).
+ */
+export function SubmenuRoot({ children, ...props }) {
+    const [trigger, menu] = Children.toArray(children);
+    return (_jsxs(RACSubmenuTrigger, { ...props, delay: 0, children: [trigger, _jsx(SubmenuContext.Provider, { value: true, children: menu })] }));
+}
+SubmenuRoot.displayName = 'SubmenuRoot';
 /** Displays a collapsible list of options and actions that users can choose from. */
 export function Menu({ align = 'start', ...props }) {
     if (!isProduction() && props.items != null && typeof props.children !== 'function') {
         console.warn('`Menu` requires `children` to be a function when using `items` prop');
     }
-    return (_jsx(CollapsibleList, { placement: `bottom ${align}`, offset: 5, maxHeight: 315, children: _jsx(RACMenu, { ...props, className: "cim-menu" }) }));
+    const isSubmenu = useContext(SubmenuContext);
+    return (_jsx(CollapsibleList, { placement: isSubmenu ? 'end top' : `bottom ${align}`, offset: isSubmenu ? -1 : 5, crossOffset: isSubmenu ? -8 : undefined, maxHeight: 315, children: _jsx(RACMenu, { ...props, className: "cim-menu" }) }));
 }
 Menu.displayName = 'Menu';
 /** Groups list items within `Menu` into a section. */
@@ -35,7 +48,7 @@ MenuSection.displayName = 'MenuSection';
 /** Renders a single list item within `Menu`. */
 export function MenuItem({ children, description, icon, ...props }) {
     const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
-    return (_jsx(RACMenuItem, { ...props, className: "cim-menu-item cim-checkbox-indicator-wrapper", textValue: textValue, children: ({ isDisabled, isSelected, selectionMode }) => (_jsxs(_Fragment, { children: [selectionMode === 'single' && _jsx(IconCheckBold, { UNSAFE_className: "cim-menu-item-selection-indicator" }), selectionMode === 'multiple' && _jsx(CheckboxIndicator, { isSelected: isSelected }), icon, _jsxs("div", { className: "cim-menu-item-text", children: [_jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && (_jsx(RACText, { slot: "description", className: textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] })] })) }));
+    return (_jsx(RACMenuItem, { ...props, className: "cim-menu-item", textValue: textValue, children: ({ isDisabled, isSelected, selectionMode, hasSubmenu }) => (_jsxs(_Fragment, { children: [selectionMode === 'single' && _jsx(IconCheckBold, { UNSAFE_className: "cim-menu-item-selection-indicator" }), selectionMode === 'multiple' && _jsx(CheckboxIndicator, { isSelected: isSelected, isDisabled: isDisabled }), icon, _jsxs("div", { className: "cim-menu-item-text", children: [_jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && (_jsx(RACText, { slot: "description", className: textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] }), hasSubmenu && _jsx(IconChevronRight, { size: 24, UNSAFE_className: "cim-menu-item-submenu-indicator" })] })) }));
 }
 MenuItem.displayName = 'MenuItem';
 //# sourceMappingURL=menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode, UIEventHandler } from 'react';\nimport {\n  Collection as RACCollection,\n  Header as RACHeader,\n  Menu as RACMenu,\n  type MenuProps as RACMenuProps,\n  MenuItem as RACMenuItem,\n  type MenuItemProps as RACMenuItemProps,\n  MenuSection as RACMenuSection,\n  type MenuSectionProps as RACMenuSectionProps,\n  MenuTrigger as RACMenuTrigger,\n  type MenuTriggerProps as RACMenuTriggerProps,\n  Text as RACText,\n} from 'react-aria-components';\nimport { IconCheckBold } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {\n  /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */\n  children: ReactNode;\n}\n\n/**\n * 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.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n  return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n  extends CollectionProps<T>, Pick<RACMenuProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\n  /**\n   * The alignment of the menu overlay relative to its trigger.\n   * @default 'start'\n   */\n  align?: 'start' | 'end';\n  /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n  onAction?: (key: Key) => void;\n  /** Handler that is called when the list of items is scrolled. */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>({ align = 'start', ...props }: MenuProps<T>) {\n  if (!isProduction() && props.items != null && typeof props.children !== 'function') {\n    console.warn('`Menu` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <CollapsibleList\n      placement={`bottom ${align}`}\n      offset={5} // 1px border + 4px actual offset\n      maxHeight={315}\n    >\n      <RACMenu {...props} className=\"cim-menu\" />\n    </CollapsibleList>\n  );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem>\n  extends CollectionProps<T>, Pick<RACMenuSectionProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\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 `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACMenuSection {...props} className=\"cim-menu-section\">\n      <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACMenuSection>\n  );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n  extends NavigationProps, Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** Additional description for the menu item. */\n  description?: string;\n  /** An icon representing the menu item. */\n  icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACMenuItem {...props} className=\"cim-menu-item cim-checkbox-indicator-wrapper\" textValue={textValue}>\n      {({ isDisabled, isSelected, selectionMode }) => (\n        <>\n          {selectionMode === 'single' && <IconCheckBold UNSAFE_className=\"cim-menu-item-selection-indicator\" />}\n          {selectionMode === 'multiple' && <CheckboxIndicator isSelected={isSelected} />}\n\n          {icon}\n\n          <div className=\"cim-menu-item-text\">\n            <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n              {children}\n            </RACText>\n\n            {description && (\n              <RACText\n                slot=\"description\"\n                className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n              >\n                {description}\n              </RACText>\n            )}\n          </div>\n        </>\n      )}\n    </RACMenuItem>\n  );\n}\n\nMenuItem.displayName = 'MenuItem';\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, createContext, useContext, type ReactElement, type ReactNode, type UIEventHandler } from 'react';\nimport {\n  Collection as RACCollection,\n  Header as RACHeader,\n  Menu as RACMenu,\n  type MenuProps as RACMenuProps,\n  MenuItem as RACMenuItem,\n  type MenuItemProps as RACMenuItemProps,\n  MenuSection as RACMenuSection,\n  type MenuSectionProps as RACMenuSectionProps,\n  MenuTrigger as RACMenuTrigger,\n  type MenuTriggerProps as RACMenuTriggerProps,\n  SubmenuTrigger as RACSubmenuTrigger,\n  Text as RACText,\n} from 'react-aria-components';\nimport { IconCheckBold, IconChevronRight } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst SubmenuContext = createContext(false);\n\nexport interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {\n  /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */\n  children: ReactNode;\n}\n\n/**\n * 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.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n  return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface SubmenuRootProps {\n  /** The submenu trigger with its associated menu. Provide the item trigger as the first child, and the menu as the second child. */\n  children: ReactElement[];\n}\n\n/**\n * Encapsulates a submenu trigger and its associated menu. The trigger must be a `MenuItem`, and the menu will be displayed when the trigger is hovered or focused.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function SubmenuRoot({ children, ...props }: SubmenuRootProps) {\n  const [trigger, menu] = Children.toArray(children) as ReactElement[];\n\n  return (\n    <RACSubmenuTrigger {...props} delay={0}>\n      {trigger!}\n      <SubmenuContext.Provider value={true}>{menu!}</SubmenuContext.Provider>\n    </RACSubmenuTrigger>\n  );\n}\n\nSubmenuRoot.displayName = 'SubmenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n  extends CollectionProps<T>, Pick<RACMenuProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\n  /**\n   * The alignment of the menu overlay relative to its trigger.\n   * @default 'start'\n   */\n  align?: 'start' | 'end';\n  /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n  onAction?: (key: Key) => void;\n  /** Handler that is called when the list of items is scrolled. */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>({ align = 'start', ...props }: MenuProps<T>) {\n  if (!isProduction() && props.items != null && typeof props.children !== 'function') {\n    console.warn('`Menu` requires `children` to be a function when using `items` prop');\n  }\n\n  const isSubmenu = useContext(SubmenuContext);\n\n  return (\n    <CollapsibleList\n      placement={isSubmenu ? 'end top' : `bottom ${align}`}\n      offset={isSubmenu ? -1 : 5} // 1px border + 4px actual offset\n      crossOffset={isSubmenu ? -8 : undefined}\n      maxHeight={315}\n    >\n      <RACMenu {...props} className=\"cim-menu\" />\n    </CollapsibleList>\n  );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem>\n  extends CollectionProps<T>, Pick<RACMenuSectionProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\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 `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACMenuSection {...props} className=\"cim-menu-section\">\n      <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACMenuSection>\n  );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n  extends NavigationProps, Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** Additional description for the menu item. */\n  description?: string;\n  /** An icon representing the menu item. */\n  icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n      {({ isDisabled, isSelected, selectionMode, hasSubmenu }) => (\n        <>\n          {selectionMode === 'single' && <IconCheckBold UNSAFE_className=\"cim-menu-item-selection-indicator\" />}\n          {selectionMode === 'multiple' && <CheckboxIndicator isSelected={isSelected} isDisabled={isDisabled} />}\n\n          {icon}\n\n          <div className=\"cim-menu-item-text\">\n            <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n              {children}\n            </RACText>\n\n            {description && (\n              <RACText\n                slot=\"description\"\n                className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n              >\n                {description}\n              </RACText>\n            )}\n          </div>\n\n          {hasSubmenu && <IconChevronRight size={24} UNSAFE_className=\"cim-menu-item-submenu-indicator\" />}\n        </>\n      )}\n    </RACMenuItem>\n  );\n}\n\nMenuItem.displayName = 'MenuItem';\n"]}

package/dist/esm/components/select/select.d.ts

@@ -31,7 +31,7 @@ export interface SelectProps<T extends CollectionItem = CollectionItem, M extend
      * How the selected value is displayed.
      * @default 'text'
      */
-    UNSTABLE_valueDisplay?: 'text' | 'tags';
+    UNSTABLE_valueDisplay?: 'text' | 'tags' | 'count';
     /**
      * Whether the list of options should be filterable.
      * @default false

package/dist/esm/components/select/select.d.ts.map

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