@cimpress-ui/react 0.0.0 → 0.1.0

package/dist/esm/components/button/types.d.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
 import type { ButtonProps as RACButtonProps } from 'react-aria-components';
-import type { DOMProps } from '../types.js';
+import type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';
 /**
  * Props available on all buttons.
  */
-export interface BaseButtonProps extends DOMProps {
+export interface BaseButtonProps extends CommonProps {
     /**
      * Determines the visual appearance of the button.
      * @default 'secondary'
@@ -30,9 +30,9 @@ export interface BaseButtonProps extends DOMProps {
 /**
  * Props available on buttons containing text.
  */
-export interface TextButtonProps {
+export interface TextButtonProps extends Omit<LabellableProps, 'label'> {
     /** The text displayed on the button. */
-    children: string;
+    children: StringLikeChildren;
     /** An icon displayed before the button text. */
     iconStart?: ReactNode;
     /** An icon displayed after the button text. */
@@ -41,7 +41,7 @@ export interface TextButtonProps {
 /**
  * Props available on buttons containing a single icon.
  */
-export interface SingleIconButtonProps {
+export interface SingleIconButtonProps extends Omit<LabellableProps, 'label' | 'aria-label'> {
     /** The icon displayed on the button. */
     icon: ReactNode;
     /** The label describing the function of this button for assistive technologies. */
@@ -50,7 +50,7 @@ export interface SingleIconButtonProps {
 /**
  * Props available on buttons that perform an action (non-navigational).
  */
-export interface ActionButtonProps extends Pick<RACButtonProps, 'form' | 'name' | 'value' | 'onPress' | 'type' | 'isDisabled'> {
+export interface ActionButtonProps extends Pick<RACButtonProps, 'form' | 'name' | 'value' | 'onPress' | 'type' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
     /**
      * Whether the button is in a loading state.
      * This disables the button and replaces its contents with a spinner.
@@ -58,5 +58,11 @@ export interface ActionButtonProps extends Pick<RACButtonProps, 'form' | 'name'
      * @default false
      */
     isLoading?: boolean;
+    /**
+     * A string that identifies the loading state to assistive technologies.
+     * It will be announced by screen readers together with the button label.
+     * You must provide this prop if `isLoading` is `true`.
+     */
+    loadingLabel?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/components/button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,wCAAwC;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,wCAAwC;IACxC,IAAI,EAAE,SAAS,CAAC;IAChB,mFAAmF;IACnF,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAAC;IAC3F;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEpF;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IACrE,wCAAwC;IACxC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,YAAY,CAAC;IAC1F,wCAAwC;IACxC,IAAI,EAAE,SAAS,CAAC;IAChB,mFAAmF;IACnF,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CACV,cAAc,EACd,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAC9F;IACD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/esm/components/button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonProps as RACButtonProps } from 'react-aria-components';\nimport type { DOMProps } from '../types.js';\n\n/**\n * Props available on all buttons.\n */\nexport interface BaseButtonProps extends DOMProps {\n  /**\n   * Determines the visual appearance of the button.\n   * @default 'secondary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary';\n  /**\n   * Determines the color tone of the button.\n   * @default 'base'\n   */\n  tone?: 'base' | 'critical';\n  /**\n   * The size of the button.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Whether the button should take up the whole available width.\n   *\n   * @default false\n   */\n  fullWidth?: boolean;\n}\n\n/**\n * Props available on buttons containing text.\n */\nexport interface TextButtonProps {\n  /** The text displayed on the button. */\n  children: string;\n  /** An icon displayed before the button text. */\n  iconStart?: ReactNode;\n  /** An icon displayed after the button text. */\n  iconEnd?: ReactNode;\n}\n\n/**\n * Props available on buttons containing a single icon.\n */\nexport interface SingleIconButtonProps {\n  /** The icon displayed on the button. */\n  icon: ReactNode;\n  /** The label describing the function of this button for assistive technologies. */\n  'aria-label': string;\n}\n\n/**\n * Props available on buttons that perform an action (non-navigational).\n */\nexport interface ActionButtonProps\n  extends Pick<RACButtonProps, 'form' | 'name' | 'value' | 'onPress' | 'type' | 'isDisabled'> {\n  /**\n   * Whether the button is in a loading state.\n   * This disables the button and replaces its contents with a spinner.\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonProps as RACButtonProps } from 'react-aria-components';\nimport type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';\n\n/**\n * Props available on all buttons.\n */\nexport interface BaseButtonProps extends CommonProps {\n  /**\n   * Determines the visual appearance of the button.\n   * @default 'secondary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary';\n  /**\n   * Determines the color tone of the button.\n   * @default 'base'\n   */\n  tone?: 'base' | 'critical';\n  /**\n   * The size of the button.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Whether the button should take up the whole available width.\n   *\n   * @default false\n   */\n  fullWidth?: boolean;\n}\n\n/**\n * Props available on buttons containing text.\n */\nexport interface TextButtonProps extends Omit<LabellableProps, 'label'> {\n  /** The text displayed on the button. */\n  children: StringLikeChildren;\n  /** An icon displayed before the button text. */\n  iconStart?: ReactNode;\n  /** An icon displayed after the button text. */\n  iconEnd?: ReactNode;\n}\n\n/**\n * Props available on buttons containing a single icon.\n */\nexport interface SingleIconButtonProps extends Omit<LabellableProps, 'label' | 'aria-label'> {\n  /** The icon displayed on the button. */\n  icon: ReactNode;\n  /** The label describing the function of this button for assistive technologies. */\n  'aria-label': string;\n}\n\n/**\n * Props available on buttons that perform an action (non-navigational).\n */\nexport interface ActionButtonProps\n  extends Pick<\n    RACButtonProps,\n    'form' | 'name' | 'value' | 'onPress' | 'type' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n  > {\n  /**\n   * Whether the button is in a loading state.\n   * This disables the button and replaces its contents with a spinner.\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * A string that identifies the loading state to assistive technologies.\n   * It will be announced by screen readers together with the button label.\n   * You must provide this prop if `isLoading` is `true`.\n   */\n  loadingLabel?: string;\n}\n"]}

package/dist/esm/components/checkbox/checkbox-group.d.ts

@@ -1,11 +1,21 @@
 import type { ReactNode } from 'react';
 import { type CheckboxGroupProps as RACCheckboxGroupProps } from 'react-aria-components';
-import { type StackProps } from '../spacing/stack/stack.js';
-import type { DOMProps, FieldProps, WithRequired } from '../types.js';
-export interface CheckboxGroupProps extends DOMProps, WithRequired<FieldProps<string[]>, 'label'>, Pick<RACCheckboxGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'>, Pick<StackProps, 'inline'> {
+import type { Responsive } from '../spacing/types.js';
+import type { Direction, CommonProps, FieldProps, WithRequired } from '../types.js';
+export interface CheckboxGroupProps extends CommonProps, WithRequired<FieldProps<string[]>, 'label'>, Pick<RACCheckboxGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'> {
     /** Checkboxes belonging to the group. Each checkbox must have a `value` prop defined. */
     children: ReactNode;
+    /**
+     * Determines the direction in which checkboxes will be stacked.
+     * @default 'vertical'
+     */
+    direction?: Responsive<Direction>;
 }
-declare const _CheckboxGroup: (props: CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => ReactNode;
+/**
+ * Allows users to select one or more items from a visible list.
+ *
+ * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).
+ */
+declare const _CheckboxGroup: (props: CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _CheckboxGroup as CheckboxGroup };
 //# sourceMappingURL=checkbox-group.d.ts.map

package/dist/esm/components/checkbox/checkbox-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAEL,KAAK,kBAAkB,IAAI,qBAAqB,EACjD,MAAM,uBAAuB,CAAC;AAI/B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtE,MAAM,WAAW,kBACf,SAAQ,QAAQ,EACd,YAAY,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,EAC3C,IAAI,CACF,qBAAqB,EACrB,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,CAC1G,EACD,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC;IAC5B,yFAAyF;IACzF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgCD,QAAA,MAAM,cAAc,2IAA6D,CAAC;AAElF,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC"}
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAEL,KAAK,kBAAkB,IAAI,qBAAqB,EACjD,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAc,UAAU,EAAW,MAAM,qBAAqB,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEpF,MAAM,WAAW,kBACf,SAAQ,WAAW,EACjB,YAAY,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,EAC3C,IAAI,CACF,qBAAqB,EACrB,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,CAC1G;IACH,yFAAyF;IACzF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CACnC;AAgCD;;;;GAIG;AACH,QAAA,MAAM,cAAc,oKAA6D,CAAC;AAElF,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC"}

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

@@ -1,25 +1,31 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { CheckboxGroup as RACCheckboxGroup, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { withStyleProps } from '../../with-style-props.js';
-import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';
+import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
 import { Stack } from '../spacing/stack/stack.js';
-function CheckboxGroup({ label, description, error: errorMessage, inline = false, children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return (_jsxs(RACCheckboxGroup, { ...props, ref: ref, className: clsx('cim-checkbox-group', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, children: label }), _jsx(Stack, { gap: getGapFromInline(inline), inline: inline, children: children }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
+function CheckboxGroup({ label, description, error: errorMessage, direction = 'vertical', children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsxs(RACCheckboxGroup, { ...props, ref: ref, className: clsx('cim-checkbox-group', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, children: label }), _jsx(Stack, { gap: getGapFromDirection(direction), direction: direction, children: children }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
 }
+/**
+ * Allows users to select one or more items from a visible list.
+ *
+ * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).
+ */
 const _CheckboxGroup = withStyleProps(forwardRef(CheckboxGroup), 'CheckboxGroup');
 export { _CheckboxGroup as CheckboxGroup };
-// Make sure that checkboxes are spaced by 16px when stacked inline, and 4px otherwise.
-function getGapFromInline(inline) {
-    if (typeof inline === 'object') {
-        const gap = { xs: inline.xs ? 16 : 4 };
-        Object.entries(inline).reduce((acc, curr) => {
-            gap[curr[0]] = curr[1] ? 16 : 4;
+// Make sure that checkboxes are spaced by 16px when stacked horizontally, and 8px otherwise.
+function getGapFromDirection(direction) {
+    if (typeof direction === 'object') {
+        const gap = { xs: direction.xs === 'horizontal' ? 16 : 8 };
+        Object.entries(direction).reduce((acc, curr) => {
+            gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;
             return acc;
         }, gap);
         return gap;
     }
-    return inline ? 16 : 4;
+    return direction === 'horizontal' ? 16 : 8;
 }
 //# sourceMappingURL=checkbox-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EACL,aAAa,IAAI,gBAAgB,GAElC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACnG,OAAO,EAAE,KAAK,EAAmB,MAAM,2BAA2B,CAAC;AAgBnE,SAAS,aAAa,CACpB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,MAAM,GAAG,KAAK,EACd,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACW,EACrB,GAAiC;IAEjC,OAAO,CACL,MAAC,gBAAgB,OACX,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,EACvD,KAAK,EAAE,YAAY,aAEnB,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAkB,EACtE,KAAC,KAAK,IAAC,GAAG,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,YACjD,QAAQ,GACH,EACR,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IACzC,CACpB,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,eAAe,CAAC,CAAC;AAElF,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC;AAE3C,uFAAuF;AACvF,SAAS,gBAAgB,CAAC,MAA2B;IACnD,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC/B,MAAM,GAAG,GAAwB,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE3D,MAAM,CAAC,OAAO,CAAC,MAAM,CAA6B,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YACvE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YAChC,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,CAAC;IACb,CAAC;IAED,OAAO,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport {\n  CheckboxGroup as RACCheckboxGroup,\n  type CheckboxGroupProps as RACCheckboxGroupProps,\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 { Stack, type StackProps } from '../spacing/stack/stack.js';\nimport type { Breakpoint, Responsive, Spacing } from '../spacing/types.js';\nimport type { DOMProps, FieldProps, WithRequired } from '../types.js';\n\nexport interface CheckboxGroupProps\n  extends DOMProps,\n    WithRequired<FieldProps<string[]>, 'label'>,\n    Pick<\n      RACCheckboxGroupProps,\n      'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'\n    >,\n    Pick<StackProps, 'inline'> {\n  /** Checkboxes belonging to the group. Each checkbox must have a `value` prop defined. */\n  children: ReactNode;\n}\n\nfunction CheckboxGroup(\n  {\n    label,\n    description,\n    error: errorMessage,\n    inline = false,\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: CheckboxGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACCheckboxGroup\n      {...props}\n      ref={ref}\n      className={clsx('cim-checkbox-group', UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <Stack gap={getGapFromInline(inline)} inline={inline}>\n        {children}\n      </Stack>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACCheckboxGroup>\n  );\n}\n\nconst _CheckboxGroup = withStyleProps(forwardRef(CheckboxGroup), 'CheckboxGroup');\n\nexport { _CheckboxGroup as CheckboxGroup };\n\n// Make sure that checkboxes are spaced by 16px when stacked inline, and 4px otherwise.\nfunction getGapFromInline(inline: Responsive<boolean>): Responsive<Spacing> {\n  if (typeof inline === 'object') {\n    const gap: Responsive<Spacing> = { xs: inline.xs ? 16 : 4 };\n\n    (Object.entries(inline) as [Breakpoint, boolean][]).reduce((acc, curr) => {\n      gap[curr[0]] = curr[1] ? 16 : 4;\n      return acc;\n    }, gap);\n\n    return gap;\n  }\n\n  return inline ? 16 : 4;\n}\n"]}
+{"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EACL,aAAa,IAAI,gBAAgB,GAElC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC5G,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAoBlD,SAAS,aAAa,CACpB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,SAAS,GAAG,UAAU,EACtB,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACW,EACrB,GAAiC;IAEjC,OAAO,CACL,MAAC,gBAAgB,OACX,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,EACvD,KAAK,EAAE,YAAY,aAEnB,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAkB,EACtE,KAAC,KAAK,IAAC,GAAG,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,SAAS,YAC7D,QAAQ,GACH,EACR,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IACzC,CACpB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,cAAc,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,eAAe,CAAC,CAAC;AAElF,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC;AAE3C,6FAA6F;AAC7F,SAAS,mBAAmB,CAAC,SAAgC;IAC3D,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,MAAM,GAAG,GAAwB,EAAE,EAAE,EAAE,SAAS,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE/E,MAAM,CAAC,OAAO,CAAC,SAAS,CAA+B,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC5E,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACjD,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,CAAC;IACb,CAAC;IAED,OAAO,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport {\n  CheckboxGroup as RACCheckboxGroup,\n  type CheckboxGroupProps as RACCheckboxGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { Breakpoint, Responsive, Spacing } from '../spacing/types.js';\nimport type { Direction, CommonProps, FieldProps, WithRequired } from '../types.js';\n\nexport interface CheckboxGroupProps\n  extends CommonProps,\n    WithRequired<FieldProps<string[]>, 'label'>,\n    Pick<\n      RACCheckboxGroupProps,\n      'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue' | 'name'\n    > {\n  /** Checkboxes belonging to the group. Each checkbox must have a `value` prop defined. */\n  children: ReactNode;\n  /**\n   * Determines the direction in which checkboxes will be stacked.\n   * @default 'vertical'\n   */\n  direction?: Responsive<Direction>;\n}\n\nfunction CheckboxGroup(\n  {\n    label,\n    description,\n    error: errorMessage,\n    direction = 'vertical',\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: CheckboxGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACCheckboxGroup\n      {...props}\n      ref={ref}\n      className={clsx('cim-checkbox-group', UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <Stack gap={getGapFromDirection(direction)} direction={direction}>\n        {children}\n      </Stack>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACCheckboxGroup>\n  );\n}\n\n/**\n * Allows users to select one or more items from a visible list.\n *\n * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _CheckboxGroup = withStyleProps(forwardRef(CheckboxGroup), 'CheckboxGroup');\n\nexport { _CheckboxGroup as CheckboxGroup };\n\n// Make sure that checkboxes are spaced by 16px when stacked horizontally, and 8px otherwise.\nfunction getGapFromDirection(direction: Responsive<Direction>): Responsive<Spacing> {\n  if (typeof direction === 'object') {\n    const gap: Responsive<Spacing> = { xs: direction.xs === 'horizontal' ? 16 : 8 };\n\n    (Object.entries(direction) as [Breakpoint, Direction][]).reduce((acc, curr) => {\n      gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;\n      return acc;\n    }, gap);\n\n    return gap;\n  }\n\n  return direction === 'horizontal' ? 16 : 8;\n}\n"]}

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

@@ -1,9 +1,14 @@
 import { type CheckboxProps as RACCheckboxProps } from 'react-aria-components';
-import type { DOMProps, LabellableProps } from '../types.js';
-export interface CheckboxProps extends DOMProps, Omit<LabellableProps, 'label'>, Pick<RACCheckboxProps, 'onChange' | 'isSelected' | 'isIndeterminate' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'name' | 'value' | 'defaultSelected'> {
+import type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';
+export interface CheckboxProps extends CommonProps, Omit<LabellableProps, 'label'>, Pick<RACCheckboxProps, 'onChange' | 'isSelected' | 'isIndeterminate' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'name' | 'value' | 'defaultSelected'> {
     /** The label rendered next to the checkbox. */
-    children?: string;
+    children?: StringLikeChildren;
 }
-declare const _Checkbox: (props: CheckboxProps & import("react").RefAttributes<HTMLLabelElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+/**
+ * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.
+ *
+ * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).
+ */
+declare const _Checkbox: (props: CheckboxProps & import("react").RefAttributes<HTMLLabelElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _Checkbox as Checkbox };
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,aAAa,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAIxG,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG7D,MAAM,WAAW,aACf,SAAQ,QAAQ,EACd,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CACF,gBAAgB,EACd,UAAU,GACV,YAAY,GACZ,iBAAiB,GACjB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,MAAM,GACN,OAAO,GACP,iBAAiB,CACpB;IACH,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkCD,QAAA,MAAM,SAAS,wJAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2B,KAAK,aAAa,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAIxG,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGpF,MAAM,WAAW,aACf,SAAQ,WAAW,EACjB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CACF,gBAAgB,EACd,UAAU,GACV,YAAY,GACZ,iBAAiB,GACjB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,MAAM,GACN,OAAO,GACP,iBAAiB,CACpB;IACH,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAgCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,iKAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useEffect } from 'react';
@@ -13,8 +14,13 @@ 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', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "cim-checkbox-toggle-wrapper", children: _jsx("div", { className: "cim-checkbox-toggle", children: isIndeterminate ? _jsx(IconMinusSmall, { "aria-hidden": "true" }) : _jsx(IconCheckmarkSmall, { "aria-hidden": "true" }) }) }), children && (_jsx(Text, { as: "span", variant: "body", children: children }))] })) }));
+    return (_jsx(RACCheckbox, { ...props, ref: ref, className: clsx('cim-checkbox', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "cim-checkbox-toggle-wrapper", children: _jsx("div", { className: "cim-checkbox-toggle", children: isIndeterminate ? _jsx(IconMinusSmall, {}) : _jsx(IconCheckmarkSmall, {}) }) }), children && (_jsx(Text, { as: "span", variant: "body", children: children }))] })) }));
 }
+/**
+ * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.
+ *
+ * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).
+ */
 const _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');
 export { _Checkbox as Checkbox };
 //# sourceMappingURL=checkbox.js.map

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,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,QAAQ,IAAI,WAAW,EAA0C,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAsB7C,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,SAAS,CAAC,GAAG,EAAE;QACb,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,EAAE,EAAE,CAAC,CACxB,8BACE,cAAK,SAAS,EAAC,6BAA6B,YAC1C,cAAK,SAAS,EAAC,qBAAqB,YACjC,eAAe,CAAC,CAAC,CAAC,KAAC,cAAc,mBAAa,MAAM,GAAG,CAAC,CAAC,CAAC,KAAC,kBAAkB,mBAAa,MAAM,GAAG,GAChG,GACF,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckmarkSmall, IconMinusSmall } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { DOMProps, LabellableProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n  extends DOMProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<\n      RACCheckboxProps,\n      | 'onChange'\n      | 'isSelected'\n      | 'isIndeterminate'\n      | 'isDisabled'\n      | 'isReadOnly'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'name'\n      | 'value'\n      | 'defaultSelected'\n    > {\n  /** The label rendered next to the checkbox. */\n  children?: string;\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  useEffect(() => {\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 }) => (\n        <>\n          <div className=\"cim-checkbox-toggle-wrapper\">\n            <div className=\"cim-checkbox-toggle\">\n              {isIndeterminate ? <IconMinusSmall aria-hidden=\"true\" /> : <IconCheckmarkSmall aria-hidden=\"true\" />}\n            </div>\n          </div>\n          {children && (\n            <Text as=\"span\" variant=\"body\">\n              {children}\n            </Text>\n          )}\n        </>\n      )}\n    </RACCheckbox>\n  );\n}\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;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,QAAQ,IAAI,WAAW,EAA0C,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAsB7C,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,SAAS,CAAC,GAAG,EAAE;QACb,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,EAAE,EAAE,CAAC,CACxB,8BACE,cAAK,SAAS,EAAC,6BAA6B,YAC1C,cAAK,SAAS,EAAC,qBAAqB,YAAE,eAAe,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,KAAC,kBAAkB,KAAG,GAAO,GACtG,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,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 { useEffect, type ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckmarkSmall, IconMinusSmall } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n  extends CommonProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<\n      RACCheckboxProps,\n      | 'onChange'\n      | 'isSelected'\n      | 'isIndeterminate'\n      | 'isDisabled'\n      | 'isReadOnly'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'name'\n      | 'value'\n      | 'defaultSelected'\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  useEffect(() => {\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 }) => (\n        <>\n          <div className=\"cim-checkbox-toggle-wrapper\">\n            <div className=\"cim-checkbox-toggle\">{isIndeterminate ? <IconMinusSmall /> : <IconCheckmarkSmall />}</div>\n          </div>\n          {children && (\n            <Text as=\"span\" variant=\"body\">\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/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 ListBoxProps as RACListBoxProps, 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' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'> {
 }
-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' | 'onHoverStart' | 'onHoverEnd'> {
+    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/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":"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,EASL,KAAK,YAAY,IAAI,eAAe,EAIpC,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,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;CAAG;AAqE3C,6EAA6E;AAC7E,QAAA,MAAM,SAAS,GApEG,CAAC,SAAS,cAAc,iKAoEwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAsBjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CACzD,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACzF,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

@@ -1,39 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useContext, useRef } from 'react';
-import { ComboBoxStateContext, Button as RACButton, Collection as RACCollection, ComboBox as RACComboBox, Header as RACHeader, Input as RACInput, ListBox as RACListBox, ListBoxItem as RACListBoxItem, Popover as RACPopover, Section as RACSection, } from 'react-aria-components';
+import { useContext, useEffect, useRef } from 'react';
+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, ListBoxItem as RACListBoxItem, ListBoxSection as RACListBoxSection, Text as RACText, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
+import { IconCheckmark, IconChevronDownFill } from '../../icons/index.js';
 import { withStyleProps } from '../../with-style-props.js';
-import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';
+import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
+import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
 import { textStyle } from '../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, onScroll, ...props }, ref) {
     const triggerPositioningRef = useRef(null);
-    return (_jsxs(RACComboBox, { ...props, ref: ref, className: clsx('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, children: label }), _jsxs("div", { className: "cim-combo-box-input-wrapper", ref: triggerPositioningRef, children: [_jsx(ComboBoxInput, { isReadOnly: props.isReadOnly, placeholder: placeholder }), _jsx(RACButton, { className: "cim-combo-box-button", children: _jsx(ChevronDownIcon, { height: 12, width: 12, "aria-hidden": "true" }) })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(RACPopover, { 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: _jsx(RACListBox, { className: "cim-combo-box-listbox", items: options, children: renderOptions }) })] }));
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    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 (_jsxs(RACComboBox, { ...props, ref: ref, className: clsx('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-combo-box-input-wrapper", ref: triggerPositioningRef, children: [_jsx(ComboBoxInput, { isReadOnly: isReadOnly, placeholder: placeholder }), _jsx(RACButton, { className: "cim-combo-box-button", children: _jsx(IconChevronDownFill, {}) })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, 
+                // Position the list relative to wrapper div instead of input to account for border
+                triggerRef: triggerPositioningRef, widthCorrection: 2, children: _jsx(RACListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, 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 = withStyleProps(forwardRef(ComboBox), 'ComboBox');
 export { _ComboBox as ComboBox };
 function ComboBoxInput({ isReadOnly, placeholder, }) {
-    const comboBoxState = useContext(ComboBoxStateContext);
+    const comboBoxState = useContext(RACComboBoxStateContext);
     return (_jsx(RACInput, { className: clsx('cim-combo-box-input', textStyle({ variant: 'medium' })), 
         // 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 }));
 }
-function renderOptions(item) {
-    if ('options' in item) {
-        return (_jsx(ComboBoxSection, { id: item.id, title: item.label, items: item.options, children: (child) => (_jsx(ComboBoxItem, { id: child.id, isDisabled: child.isDisabled, children: child.label })) }));
-    }
-    return (_jsx(ComboBoxItem, { id: item.id, isDisabled: item.isDisabled, children: item.label }));
-}
-function ComboBoxItem({ children, ...props }) {
-    return (_jsx(RACListBoxItem, { ...props, className: clsx('cim-combo-box-item', textStyle({ variant: 'medium' })), children: children }));
+/** 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(IconCheckmark, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
 }
-function ComboBoxSection({ title, children, items, ...props }) {
-    return (_jsxs(RACSection, { ...props, className: "cim-combo-box-section", children: [_jsx(RACHeader, { className: clsx('cim-combo-box-header', textStyle({ variant: 'small', tone: 'subtle' })), children: title }), _jsx(RACCollection, { items: items, children: children })] }));
-}
-function ChevronDownIcon(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "currentColor", "data-icon": true, ...props, children: _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" }) }));
+ComboBoxItem.displayName = 'ComboBoxItem';
+/** Groups list items within `ComboBox` into a section. */
+export function ComboBoxSection({ title, children, items, ...props }) {
+    if (items != null && typeof children !== 'function') {
+        console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');
+    }
+    return (_jsxs(RACListBoxSection, { ...props, className: "cim-combo-box-section", children: [_jsx(RACHeader, { className: clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' })), children: title }), _jsx(RACCollection, { items: items, children: children })] }));
 }
+ComboBoxSection.displayName = 'ComboBoxSection';
 //# sourceMappingURL=combo-box.js.map

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

package/dist/esm/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/esm/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/esm/components/form/form.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { Form as RACForm } from 'react-aria-components';
@@ -6,6 +7,11 @@ import { withStyleProps } from '../../with-style-props.js';
 function Form({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     return (_jsx(RACForm, { ...props, className: clsx('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 = withStyleProps(forwardRef(Form), 'Form');
 export { _Form as Form };
 //# sourceMappingURL=form.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkC,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAqB3D,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAAE,GAAkC;IACjH,OAAO,CACL,KAAC,OAAO,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,YAC7F,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED,MAAM,KAAK,GAAG,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC","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,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkC,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAqB3D,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAAE,GAAkC;IACjH,OAAO,CACL,KAAC,OAAO,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,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,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC","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/esm/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/esm/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/esm/components/internal/collapsible-list/collapsible-list.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as RACPopover } from 'react-aria-components';
+/**
+ * Displays a collapsible list activated via a trigger element.
+ *
+ * @internal
+ */
+export function CollapsibleList({ children, widthCorrection = 0, ...props }) {
+    return (_jsx(RACPopover, { ...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/esm/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,OAAO,EAAE,OAAO,IAAI,UAAU,EAAwC,MAAM,uBAAuB,CAAC;AAQpG;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,eAAe,GAAG,CAAC,EAAE,GAAG,KAAK,EAAwB;IAC/F,OAAO,CACL,KAAC,UAAU,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"]}