@cimpress-ui/react 0.1.0 → 0.3.0

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

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { StringLikeChildren } from '../types.js';
+import type { CommonProps } from '../types.js';
+export interface BadgeProps extends CommonProps {
+    /** The content to display as the label. */
+    children: StringLikeChildren;
+    /**
+     * Determines the color tone of the badge.
+     * @default 'base'
+     */
+    tone?: 'base' | 'success' | 'info' | 'warning' | 'critical' | 'lime' | 'emerald' | 'indigo' | 'purple' | 'pink' | 'brown';
+    /**
+     * The size of the badge.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The icon to display at the start of the badge.
+     *
+     * Should not be used when size is set to `'small'` as icons won't be displayed at this size.
+     */
+    iconStart?: ReactNode;
+}
+/**
+ * Displays a small piece of information, such as a status or a category.
+ *
+ * See [badge usage guidelines](https://ui.cimpress.io/components/badge/).
+ */
+declare const _Badge: (props: BadgeProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Badge as Badge };
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EACD,MAAM,GACN,SAAS,GACT,MAAM,GACN,SAAS,GACT,UAAU,GACV,MAAM,GACN,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,OAAO,CAAC;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AA0BD;;;;GAIG;AACH,QAAA,MAAM,MAAM,4JAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

package/dist/esm/components/badge/badge.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+function Badge({ children, iconStart, UNSAFE_className, UNSAFE_style, tone = 'base', size = 'medium', ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: clsx('cim-badge', UNSAFE_className), style: {
+            ...UNSAFE_style,
+            '--cim-badge-color': `var(--cim-fg-${tone})`,
+            '--cim-badge-background-color': `var(--cim-bg-${tone === 'base' ? 'subtle' : `${tone}-subtle`})`,
+        }, "data-size": size, children: [iconStart && _jsx("div", { className: "cim-badge-icon", children: iconStart }), _jsx("span", { className: "cim-badge-text", children: children })] }));
+}
+/**
+ * Displays a small piece of information, such as a status or a category.
+ *
+ * See [badge usage guidelines](https://ui.cimpress.io/components/badge/).
+ */
+const _Badge = withStyleProps(forwardRef(Badge), 'Badge');
+export { _Badge as Badge };
+//# sourceMappingURL=badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.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;AAoC3D,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,IAAI,GAAG,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,KAAK,EAAc,EAC7G,GAAiC;IAEjC,OAAO,CACL,kBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAC9C,KAAK,EACH;YACE,GAAG,YAAY;YACf,mBAAmB,EAAE,gBAAgB,IAAI,GAAG;YAC5C,8BAA8B,EAAE,gBAAgB,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,SAAS,GAAG;SAChF,eAET,IAAI,aAEd,SAAS,IAAI,cAAK,SAAS,EAAC,gBAAgB,YAAE,SAAS,GAAO,EAC/D,eAAM,SAAS,EAAC,gBAAgB,YAAE,QAAQ,GAAQ,IAC9C,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { CSSProperties, ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { StringLikeChildren } from '../types.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface BadgeProps extends CommonProps {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /**\n   * Determines the color tone of the badge.\n   * @default 'base'\n   */\n  tone?:\n    | 'base'\n    | 'success'\n    | 'info'\n    | 'warning'\n    | 'critical'\n    | 'lime'\n    | 'emerald'\n    | 'indigo'\n    | 'purple'\n    | 'pink'\n    | 'brown';\n  /**\n   * The size of the badge.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * The icon to display at the start of the badge.\n   *\n   * Should not be used when size is set to `'small'` as icons won't be displayed at this size.\n   */\n  iconStart?: ReactNode;\n}\n\nfunction Badge(\n  { children, iconStart, UNSAFE_className, UNSAFE_style, tone = 'base', size = 'medium', ...props }: BadgeProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx('cim-badge', UNSAFE_className)}\n      style={\n        {\n          ...UNSAFE_style,\n          '--cim-badge-color': `var(--cim-fg-${tone})`,\n          '--cim-badge-background-color': `var(--cim-bg-${tone === 'base' ? 'subtle' : `${tone}-subtle`})`,\n        } as CSSProperties\n      }\n      data-size={size}\n    >\n      {iconStart && <div className=\"cim-badge-icon\">{iconStart}</div>}\n      <span className=\"cim-badge-text\">{children}</span>\n    </div>\n  );\n}\n\n/**\n * Displays a small piece of information, such as a status or a category.\n *\n * See [badge usage guidelines](https://ui.cimpress.io/components/badge/).\n */\nconst _Badge = withStyleProps(forwardRef(Badge), 'Badge');\n\nexport { _Badge as Badge };\n"]}

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

@@ -0,0 +1,22 @@
+import type { AriaLabelingProps, CollectionItem, CollectionProps, CommonProps, Key, NavigationProps, StringLikeChildren, WithRequired } from '../types.js';
+export interface BreadcrumbsProps<T extends CollectionItem = CollectionItem> extends CommonProps, CollectionProps<T>, AriaLabelingProps {
+}
+export interface BreadcrumbItemProps extends Omit<CommonProps, 'id'>, WithRequired<NavigationProps, 'href'> {
+    /** The text to display as the breadcrumb. */
+    children: StringLikeChildren;
+    /** The ID of the item. Has to be unique across all items. */
+    id?: Key;
+}
+/** Renders a single breadcrumb within `Breadcrumbs`. */
+export declare function BreadcrumbItem({ children, UNSAFE_className, UNSAFE_style, href, hrefLang, download, ping, referrerPolicy, rel, routerOptions, target, ...props }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BreadcrumbItem {
+    var displayName: string;
+}
+/**
+ * Displays a list of breadcrumbs to help users navigate through a website.
+ *
+ * See [breadcrumbs usage guidelines](https://ui.cimpress.io/components/breadcrumbs/).
+ */
+declare const _Breadcrumbs: <T extends CollectionItem = CollectionItem>(props: BreadcrumbsProps<T> & import("react").RefAttributes<HTMLElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Breadcrumbs as Breadcrumbs };
+//# sourceMappingURL=breadcrumbs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,WAAW,EACX,GAAG,EACH,eAAe,EACf,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzE,SAAQ,WAAW,EACjB,eAAe,CAAC,CAAC,CAAC,EAClB,iBAAiB;CAAG;AA0CxB,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;IACzG,6CAA6C;IAC7C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,6DAA6D;IAC7D,EAAE,CAAC,EAAE,GAAG,CAAC;CACV;AAED,wDAAwD;AACxD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,gBAAgB,EAChB,YAAY,EAGZ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,EACH,aAAa,EACb,MAAM,EAEN,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAmBrB;yBAnCe,cAAc;;;AAuC9B;;;;GAIG;AACH,QAAA,MAAM,YAAY,GA5FG,CAAC,SAAS,cAAc,kLA4F8B,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}

package/dist/esm/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from '@react-aria/utils';
+import clsx from 'clsx';
+import { Breadcrumbs as RACBreadcrumbs, Breadcrumb as RACBreadcrumb } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { IconChevronRight } from '../../icons/index.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { Link } from '../typography/link.js';
+function Breadcrumbs({ children, items, UNSAFE_className, UNSAFE_style, 
+// Aria labeling props
+'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-details': ariaDetails, ...props }, ref) {
+    const breadcrumbsId = useId();
+    return (_jsx("nav", { ...props, ref: ref, "aria-labelledby": ariaLabelledby ?? breadcrumbsId, "aria-describedby": ariaDescribedby, "aria-details": ariaDetails, children: _jsx(RACBreadcrumbs, { id: breadcrumbsId, items: items, className: clsx('cim-breadcrumbs', UNSAFE_className), style: UNSAFE_style, "aria-label": ariaLabel, children: children }) }));
+}
+/** Renders a single breadcrumb within `Breadcrumbs`. */
+export function BreadcrumbItem({ children, UNSAFE_className, UNSAFE_style, 
+// Navigation props
+href, hrefLang, download, ping, referrerPolicy, rel, routerOptions, target, ...props }) {
+    return (_jsxs(RACBreadcrumb, { ...props, className: clsx('cim-breadcrumb-item', UNSAFE_className), style: UNSAFE_style, children: [_jsx(Link, { variant: "body", href: href, hrefLang: hrefLang, download: download, ping: ping, referrerPolicy: referrerPolicy, rel: rel, routerOptions: routerOptions, target: target, children: children }), _jsx(IconChevronRight, { size: 16 })] }));
+}
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+/**
+ * Displays a list of breadcrumbs to help users navigate through a website.
+ *
+ * See [breadcrumbs usage guidelines](https://ui.cimpress.io/components/breadcrumbs/).
+ */
+const _Breadcrumbs = withStyleProps(forwardRef(Breadcrumbs), 'Breadcrumbs');
+export { _Breadcrumbs as Breadcrumbs };
+//# sourceMappingURL=breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAW3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAO7C,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,YAAY;AAEZ,sBAAsB;AACtB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,EAC3B,GAAG,KAAK,EACY,EACtB,GAA8B;IAE9B,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,qBAES,cAAc,IAAI,aAAa,sBAC9B,eAAe,kBACnB,WAAW,YAEzB,KAAC,cAAc,IACb,EAAE,EAAE,aAAa,EACjB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,EACpD,KAAK,EAAE,YAAY,gBACP,SAAS,YAEpB,QAAQ,GACM,GACb,CACP,CAAC;AACJ,CAAC;AASD,wDAAwD;AACxD,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,gBAAgB,EAChB,YAAY;AAEZ,mBAAmB;AACnB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,EACH,aAAa,EACb,MAAM,EAEN,GAAG,KAAK,EACY;IACpB,OAAO,CACL,MAAC,aAAa,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACrG,KAAC,IAAI,IACH,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,YAEb,QAAQ,GACJ,EACP,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,IAChB,CACjB,CAAC;AACJ,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { useId } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Breadcrumbs as RACBreadcrumbs, Breadcrumb as RACBreadcrumb } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronRight } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type {\n  AriaLabelingProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  Key,\n  NavigationProps,\n  StringLikeChildren,\n  WithRequired,\n} from '../types.js';\nimport { Link } from '../typography/link.js';\n\nexport interface BreadcrumbsProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    CollectionProps<T>,\n    AriaLabelingProps {}\n\nfunction Breadcrumbs<T extends CollectionItem = CollectionItem>(\n  {\n    children,\n    items,\n    UNSAFE_className,\n    UNSAFE_style,\n\n    // Aria labeling props\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    'aria-details': ariaDetails,\n    ...props\n  }: BreadcrumbsProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const breadcrumbsId = useId();\n\n  return (\n    <nav\n      {...props}\n      ref={ref}\n      // RAC puts a localized `aria-label` on `Breadcrumbs`, so we refer to it unless a custom label is provided\n      aria-labelledby={ariaLabelledby ?? breadcrumbsId}\n      aria-describedby={ariaDescribedby}\n      aria-details={ariaDetails}\n    >\n      <RACBreadcrumbs\n        id={breadcrumbsId}\n        items={items}\n        className={clsx('cim-breadcrumbs', UNSAFE_className)}\n        style={UNSAFE_style}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </RACBreadcrumbs>\n    </nav>\n  );\n}\n\nexport interface BreadcrumbItemProps extends Omit<CommonProps, 'id'>, WithRequired<NavigationProps, 'href'> {\n  /** The text to display as the breadcrumb. */\n  children: StringLikeChildren;\n  /** The ID of the item. Has to be unique across all items. */\n  id?: Key;\n}\n\n/** Renders a single breadcrumb within `Breadcrumbs`. */\nexport function BreadcrumbItem({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n\n  // Navigation props\n  href,\n  hrefLang,\n  download,\n  ping,\n  referrerPolicy,\n  rel,\n  routerOptions,\n  target,\n\n  ...props\n}: BreadcrumbItemProps) {\n  return (\n    <RACBreadcrumb {...props} className={clsx('cim-breadcrumb-item', UNSAFE_className)} style={UNSAFE_style}>\n      <Link\n        variant=\"body\"\n        href={href}\n        hrefLang={hrefLang}\n        download={download}\n        ping={ping}\n        referrerPolicy={referrerPolicy}\n        rel={rel}\n        routerOptions={routerOptions}\n        target={target}\n      >\n        {children}\n      </Link>\n      <IconChevronRight size={16} />\n    </RACBreadcrumb>\n  );\n}\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\n/**\n * Displays a list of breadcrumbs to help users navigate through a website.\n *\n * See [breadcrumbs usage guidelines](https://ui.cimpress.io/components/breadcrumbs/).\n */\nconst _Breadcrumbs = withStyleProps(forwardRef(Breadcrumbs), 'Breadcrumbs');\n\nexport { _Breadcrumbs as Breadcrumbs };\n"]}

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

@@ -7,13 +7,13 @@ import { forwardRef } from '../../forward-ref.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { InternalSpinner } from '../internal/spinner/spinner.js';
 import { SPINNER_SIZES } from './constants.js';
-function Button({ children, variant = 'secondary', tone = 'base', size = 'medium', iconStart, iconEnd, isLoading = false, loadingLabel, isDisabled = false, fullWidth = false, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function Button({ children, variant = 'secondary', tone = 'base', size = 'medium', iconStart, iconEnd, isLoading, loadingLabel, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     useEffect(() => {
         if (isLoading && !loadingLabel) {
             console.warn('Button requires loadingLabel when isLoading is true for accessibility');
         }
     }, [isLoading, loadingLabel]);
-    return (_jsx(RACButton, { ...props, ref: ref, className: clsx('cim-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth ? true : undefined, isDisabled: isDisabled, isPending: isLoading, children: ({ isPending }) => (_jsxs(_Fragment, { children: [iconStart, _jsx("span", { children: children }), iconEnd, isPending && _jsx(InternalSpinner, { size: SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
+    return (_jsx(RACButton, { ...props, ref: ref, className: clsx('cim-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth ? true : undefined, isDisabled: isDisabled, isPending: isLoading, children: ({ isPending }) => (_jsxs(_Fragment, { children: [iconStart, _jsx("span", { className: "cim-button-text", children: children }), iconEnd, isPending && _jsx(InternalSpinner, { size: SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
 }
 /**
  * Displays a labelled button that allows users to perform an action.

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAK/C,SAAS,MAAM,CACb,EACE,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,YAAY,EACZ,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACI,EACd,GAAoC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;QACxF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC7C,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClB,8BACG,SAAS,EACV,yBAAO,QAAQ,GAAQ,EACtB,OAAO,EACP,SAAS,IAAI,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { InternalSpinner } from '../internal/spinner/spinner.js';\nimport { SPINNER_SIZES } from './constants.js';\nimport type { ActionButtonProps, BaseButtonProps, TextButtonProps } from './types.js';\n\nexport interface ButtonProps extends BaseButtonProps, TextButtonProps, ActionButtonProps {}\n\nfunction Button(\n  {\n    children,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    iconStart,\n    iconEnd,\n    isLoading = false,\n    loadingLabel,\n    isDisabled = false,\n    fullWidth = false,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: ButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  useEffect(() => {\n    if (isLoading && !loadingLabel) {\n      console.warn('Button requires loadingLabel when isLoading is true for accessibility');\n    }\n  }, [isLoading, loadingLabel]);\n\n  return (\n    <RACButton\n      {...props}\n      ref={ref}\n      className={clsx('cim-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth ? true : undefined}\n      isDisabled={isDisabled}\n      isPending={isLoading}\n    >\n      {({ isPending }) => (\n        <>\n          {iconStart}\n          <span>{children}</span>\n          {iconEnd}\n          {isPending && <InternalSpinner size={SPINNER_SIZES[size]} aria-label={loadingLabel} />}\n        </>\n      )}\n    </RACButton>\n  );\n}\n\n/**\n * Displays a labelled button that allows users to perform an action.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _Button = withStyleProps(forwardRef(Button), 'Button');\n\nexport { _Button as Button };\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAK/C,SAAS,MAAM,CACb,EACE,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACI,EACd,GAAoC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;QACxF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC7C,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClB,8BACG,SAAS,EACV,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,EACP,SAAS,IAAI,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { InternalSpinner } from '../internal/spinner/spinner.js';\nimport { SPINNER_SIZES } from './constants.js';\nimport type { ActionButtonProps, BaseButtonProps, TextButtonProps } from './types.js';\n\nexport interface ButtonProps extends BaseButtonProps, TextButtonProps, ActionButtonProps {}\n\nfunction Button(\n  {\n    children,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    iconStart,\n    iconEnd,\n    isLoading,\n    loadingLabel,\n    isDisabled,\n    fullWidth,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: ButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  useEffect(() => {\n    if (isLoading && !loadingLabel) {\n      console.warn('Button requires loadingLabel when isLoading is true for accessibility');\n    }\n  }, [isLoading, loadingLabel]);\n\n  return (\n    <RACButton\n      {...props}\n      ref={ref}\n      className={clsx('cim-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth ? true : undefined}\n      isDisabled={isDisabled}\n      isPending={isLoading}\n    >\n      {({ isPending }) => (\n        <>\n          {iconStart}\n          <span className=\"cim-button-text\">{children}</span>\n          {iconEnd}\n          {isPending && <InternalSpinner size={SPINNER_SIZES[size]} aria-label={loadingLabel} />}\n        </>\n      )}\n    </RACButton>\n  );\n}\n\n/**\n * Displays a labelled button that allows users to perform an action.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _Button = withStyleProps(forwardRef(Button), 'Button');\n\nexport { _Button as Button };\n"]}

package/dist/esm/components/button/icon-button.js

@@ -7,7 +7,7 @@ import { forwardRef } from '../../forward-ref.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { InternalSpinner } from '../internal/spinner/spinner.js';
 import { SPINNER_SIZES } from './constants.js';
-function IconButton({ icon, variant = 'secondary', tone = 'base', size = 'medium', isLoading = false, loadingLabel, isDisabled = false, fullWidth = false, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function IconButton({ icon, variant = 'secondary', tone = 'base', size = 'medium', isLoading, loadingLabel, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     useEffect(() => {
         if (isLoading && !loadingLabel) {
             console.warn('IconButton requires loadingLabel when isLoading is true for accessibility');

package/dist/esm/components/button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAK/C,SAAS,UAAU,CACjB,EACE,IAAI,EACJ,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,YAAY,EACZ,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAoC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC,2EAA2E,CAAC,CAAC;QAC5F,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,EACpD,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC7C,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClB,8BACG,IAAI,EACJ,SAAS,IAAI,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { InternalSpinner } from '../internal/spinner/spinner.js';\nimport { SPINNER_SIZES } from './constants.js';\nimport type { ActionButtonProps, BaseButtonProps, SingleIconButtonProps } from './types.js';\n\nexport interface IconButtonProps extends BaseButtonProps, SingleIconButtonProps, ActionButtonProps {}\n\nfunction IconButton(\n  {\n    icon,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    isLoading = false,\n    loadingLabel,\n    isDisabled = false,\n    fullWidth = false,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: IconButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  useEffect(() => {\n    if (isLoading && !loadingLabel) {\n      console.warn('IconButton requires loadingLabel when isLoading is true for accessibility');\n    }\n  }, [isLoading, loadingLabel]);\n\n  return (\n    <RACButton\n      {...props}\n      ref={ref}\n      className={clsx('cim-icon-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth ? true : undefined}\n      isDisabled={isDisabled}\n      isPending={isLoading}\n    >\n      {({ isPending }) => (\n        <>\n          {icon}\n          {isPending && <InternalSpinner size={SPINNER_SIZES[size]} aria-label={loadingLabel} />}\n        </>\n      )}\n    </RACButton>\n  );\n}\n\n/**\n * Displays an icon-only button that allows users to perform an action.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _IconButton = withStyleProps(forwardRef(IconButton), 'IconButton');\n\nexport { _IconButton as IconButton };\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAK/C,SAAS,UAAU,CACjB,EACE,IAAI,EACJ,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAoC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC,2EAA2E,CAAC,CAAC;QAC5F,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,EACpD,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC7C,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClB,8BACG,IAAI,EACJ,SAAS,IAAI,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { InternalSpinner } from '../internal/spinner/spinner.js';\nimport { SPINNER_SIZES } from './constants.js';\nimport type { ActionButtonProps, BaseButtonProps, SingleIconButtonProps } from './types.js';\n\nexport interface IconButtonProps extends BaseButtonProps, SingleIconButtonProps, ActionButtonProps {}\n\nfunction IconButton(\n  {\n    icon,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    isLoading,\n    loadingLabel,\n    isDisabled,\n    fullWidth,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: IconButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  useEffect(() => {\n    if (isLoading && !loadingLabel) {\n      console.warn('IconButton requires loadingLabel when isLoading is true for accessibility');\n    }\n  }, [isLoading, loadingLabel]);\n\n  return (\n    <RACButton\n      {...props}\n      ref={ref}\n      className={clsx('cim-icon-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth ? true : undefined}\n      isDisabled={isDisabled}\n      isPending={isLoading}\n    >\n      {({ isPending }) => (\n        <>\n          {icon}\n          {isPending && <InternalSpinner size={SPINNER_SIZES[size]} aria-label={loadingLabel} />}\n        </>\n      )}\n    </RACButton>\n  );\n}\n\n/**\n * Displays an icon-only button that allows users to perform an action.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _IconButton = withStyleProps(forwardRef(IconButton), 'IconButton');\n\nexport { _IconButton as IconButton };\n"]}

package/dist/esm/components/button/link-button.js

@@ -5,7 +5,7 @@ import { Link as RACLink } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { withStyleProps } from '../../with-style-props.js';
 function LinkButton({ children, variant = 'secondary', tone = 'base', size = 'medium', iconStart, iconEnd, isDisabled = false, fullWidth = false, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return (_jsxs(RACLink, { ...props, ref: ref, className: clsx('cim-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth ? true : undefined, isDisabled: isDisabled, children: [iconStart, _jsx("span", { children: children }), iconEnd] }));
+    return (_jsxs(RACLink, { ...props, ref: ref, className: clsx('cim-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth ? true : undefined, isDisabled: isDisabled, children: [iconStart, _jsx("span", { className: "cim-button-text", children: children }), iconEnd] }));
 }
 /**
  * Displays a labelled button that allows users to navigate to another page or resource.

package/dist/esm/components/button/link-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../../src/components/button/link-button.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;AAU3D,SAAS,UAAU,CACjB,EACE,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAoC;IAEpC,OAAO,CACL,MAAC,OAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC7C,UAAU,EAAE,UAAU,aAErB,SAAS,EACV,yBAAO,QAAQ,GAAQ,EACtB,OAAO,IACA,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport type { BaseButtonProps, TextButtonProps } from './types.js';\n\nexport interface LinkButtonProps\n  extends Omit<BaseButtonProps, 'id'>,\n    TextButtonProps,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {}\n\nfunction LinkButton(\n  {\n    children,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    iconStart,\n    iconEnd,\n    isDisabled = false,\n    fullWidth = false,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: LinkButtonProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <RACLink\n      {...props}\n      ref={ref}\n      className={clsx('cim-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth ? true : undefined}\n      isDisabled={isDisabled}\n    >\n      {iconStart}\n      <span>{children}</span>\n      {iconEnd}\n    </RACLink>\n  );\n}\n\n/**\n * Displays a labelled button that allows users to navigate to another page or resource.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _LinkButton = withStyleProps(forwardRef(LinkButton), 'LinkButton');\n\nexport { _LinkButton as LinkButton };\n"]}
+{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../../src/components/button/link-button.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;AAU3D,SAAS,UAAU,CACjB,EACE,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAoC;IAEpC,OAAO,CACL,MAAC,OAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAC/C,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,eACJ,IAAI,qBACE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC7C,UAAU,EAAE,UAAU,aAErB,SAAS,EACV,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,IACA,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport type { BaseButtonProps, TextButtonProps } from './types.js';\n\nexport interface LinkButtonProps\n  extends Omit<BaseButtonProps, 'id'>,\n    TextButtonProps,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {}\n\nfunction LinkButton(\n  {\n    children,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    iconStart,\n    iconEnd,\n    isDisabled = false,\n    fullWidth = false,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: LinkButtonProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <RACLink\n      {...props}\n      ref={ref}\n      className={clsx('cim-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth ? true : undefined}\n      isDisabled={isDisabled}\n    >\n      {iconStart}\n      <span className=\"cim-button-text\">{children}</span>\n      {iconEnd}\n    </RACLink>\n  );\n}\n\n/**\n * Displays a labelled button that allows users to navigate to another page or resource.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _LinkButton = withStyleProps(forwardRef(LinkButton), 'LinkButton');\n\nexport { _LinkButton as LinkButton };\n"]}

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ButtonProps as RACButtonProps } from 'react-aria-components';
-import type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';
+import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';
 /**
  * Props available on all buttons.
  */
@@ -30,7 +30,7 @@ export interface BaseButtonProps extends CommonProps {
 /**
  * Props available on buttons containing text.
  */
-export interface TextButtonProps extends Omit<LabellableProps, 'label'> {
+export interface TextButtonProps extends AriaLabelingProps {
     /** The text displayed on the button. */
     children: StringLikeChildren;
     /** An icon displayed before the button text. */
@@ -41,7 +41,7 @@ export interface TextButtonProps extends Omit<LabellableProps, 'label'> {
 /**
  * Props available on buttons containing a single icon.
  */
-export interface SingleIconButtonProps extends Omit<LabellableProps, 'label' | 'aria-label'> {
+export interface SingleIconButtonProps extends Omit<AriaLabelingProps, 'aria-label'> {
     /** The icon displayed on the button. */
     icon: ReactNode;
     /** The label describing the function of this button for assistive technologies. */

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,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"}
+{"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,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtF;;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,iBAAiB;IACxD,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,iBAAiB,EAAE,YAAY,CAAC;IAClF,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;CAQvB"}

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 { 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"]}
+{"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 { AriaLabelingProps, CommonProps, 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 AriaLabelingProps {\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<AriaLabelingProps, '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   * A slot name for the component. Slots allow the component to receive props from a parent component.\n   * An explicit null value indicates that the local props completely override all props received from a parent.\n   *\n   * @internal\n   */\n  slot?: string;\n}\n"]}

package/dist/esm/components/card/card-context.d.ts

@@ -0,0 +1,4 @@
+export declare const CardContext: import("react").Context<{
+    withBorder: boolean;
+}>;
+//# sourceMappingURL=card-context.d.ts.map

package/dist/esm/components/card/card-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-context.d.ts","sourceRoot":"","sources":["../../../../src/components/card/card-context.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;EAAuC,CAAC"}

package/dist/esm/components/card/card-context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export const CardContext = createContext({ withBorder: false });
+//# sourceMappingURL=card-context.js.map

package/dist/esm/components/card/card-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-context.js","sourceRoot":"","sources":["../../../../src/components/card/card-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\nexport const CardContext = createContext({ withBorder: false });\n"]}

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

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface UNSTABLE_CardProps extends CommonProps {
+    children: ReactNode;
+    withBorder?: boolean;
+}
+export interface UNSTABLE_CardSectionProps extends CommonProps {
+    children: ReactNode;
+    bleed?: boolean;
+    withBorder?: boolean;
+}
+/**
+ * Groups related blocks of content into a single unit.
+ *
+ * See [card usage guidelines](https://ui.cimpress.io/components/card/).
+ */
+declare const _UNSTABLE_Card: (props: UNSTABLE_CardProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+declare const _UNSTABLE_CardSection: (props: UNSTABLE_CardSectionProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_Card as UNSTABLE_Card, _UNSTABLE_CardSection as UNSTABLE_CardSection };
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAeD,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAyBD;;;;GAIG;AACH,QAAA,MAAM,cAAc,oKAAoD,CAAC;AACzE,QAAA,MAAM,qBAAqB,2KAAkE,CAAC;AAE9F,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,CAAC"}

package/dist/esm/components/card/card.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useContext } from 'react';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { CardContext } from './card-context.js';
+function UNSTABLE_Card({ children, UNSAFE_className, UNSAFE_style, withBorder = false, ...props }, ref) {
+    return (_jsx(CardContext.Provider, { value: { withBorder }, children: _jsx("div", { ...props, className: clsx('cim-card', UNSAFE_className), style: UNSAFE_style, ref: ref, children: children }) }));
+}
+function UNSTABLE_CardSection({ children, UNSAFE_className, UNSAFE_style, bleed, withBorder, ...props }, ref) {
+    const { withBorder: contextWithBorder } = useContext(CardContext);
+    return (_jsx("div", { ...props, className: clsx('cim-card-section', bleed && 'cim-card-section-bleed', (withBorder || contextWithBorder) && 'cim-card-section-with-border', UNSAFE_className), style: UNSAFE_style, ref: ref, children: children }));
+}
+/**
+ * Groups related blocks of content into a single unit.
+ *
+ * See [card usage guidelines](https://ui.cimpress.io/components/card/).
+ */
+const _UNSTABLE_Card = withStyleProps(forwardRef(UNSTABLE_Card), 'Card');
+const _UNSTABLE_CardSection = withStyleProps(forwardRef(UNSTABLE_CardSection), 'CardSection');
+export { _UNSTABLE_Card as UNSTABLE_Card, _UNSTABLE_CardSection as UNSTABLE_CardSection };
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAqC,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,UAAU,GAAG,KAAK,EAAE,GAAG,KAAK,EAAsB,EAC9F,GAAiC;IAEjC,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,YACzC,iBAAS,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,YACzF,QAAQ,GACL,GACe,CACxB,CAAC;AACJ,CAAC;AAQD,SAAS,oBAAoB,CAC3B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,EAA6B,EACpG,GAAiC;IAEjC,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAElE,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,IAAI,CACb,kBAAkB,EAClB,KAAK,IAAI,wBAAwB,EACjC,CAAC,UAAU,IAAI,iBAAiB,CAAC,IAAI,8BAA8B,EACnE,gBAAgB,CACjB,EACD,KAAK,EAAE,YAAY,EACnB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,cAAc,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,CAAC;AACzE,MAAM,qBAAqB,GAAG,cAAc,CAAC,UAAU,CAAC,oBAAoB,CAAC,EAAE,aAAa,CAAC,CAAC;AAE9F,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useContext, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { CardContext } from './card-context.js';\n\nexport interface UNSTABLE_CardProps extends CommonProps {\n  children: ReactNode;\n  withBorder?: boolean;\n}\n\nfunction UNSTABLE_Card(\n  { children, UNSAFE_className, UNSAFE_style, withBorder = false, ...props }: UNSTABLE_CardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <CardContext.Provider value={{ withBorder }}>\n      <div {...props} className={clsx('cim-card', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n        {children}\n      </div>\n    </CardContext.Provider>\n  );\n}\n\nexport interface UNSTABLE_CardSectionProps extends CommonProps {\n  children: ReactNode;\n  bleed?: boolean;\n  withBorder?: boolean;\n}\n\nfunction UNSTABLE_CardSection(\n  { children, UNSAFE_className, UNSAFE_style, bleed, withBorder, ...props }: UNSTABLE_CardSectionProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { withBorder: contextWithBorder } = useContext(CardContext);\n\n  return (\n    <div\n      {...props}\n      className={clsx(\n        'cim-card-section',\n        bleed && 'cim-card-section-bleed',\n        (withBorder || contextWithBorder) && 'cim-card-section-with-border',\n        UNSAFE_className,\n      )}\n      style={UNSAFE_style}\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * Groups related blocks of content into a single unit.\n *\n * See [card usage guidelines](https://ui.cimpress.io/components/card/).\n */\nconst _UNSTABLE_Card = withStyleProps(forwardRef(UNSTABLE_Card), 'Card');\nconst _UNSTABLE_CardSection = withStyleProps(forwardRef(UNSTABLE_CardSection), 'CardSection');\n\nexport { _UNSTABLE_Card as UNSTABLE_Card, _UNSTABLE_CardSection as UNSTABLE_CardSection };\n"]}

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

@@ -1,6 +1,6 @@
 import { type CheckboxProps as RACCheckboxProps } from 'react-aria-components';
-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'> {
+import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';
+export interface CheckboxProps extends CommonProps, AriaLabelingProps, Pick<RACCheckboxProps, 'onChange' | 'isSelected' | 'isIndeterminate' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'name' | 'value' | 'defaultSelected' | 'autoFocus'> {
     /** The label rendered next to the checkbox. */
     children?: StringLikeChildren;
 }

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":"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"}
+{"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,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,aACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CACF,gBAAgB,EACd,UAAU,GACV,YAAY,GACZ,iBAAiB,GACjB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,MAAM,GACN,OAAO,GACP,iBAAiB,GACjB,WAAW,CACd;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

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useEffect } from 'react';
 import { Checkbox as RACCheckbox } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
-import { IconCheckmarkSmall, IconMinusSmall } from '../../icons/index.js';
+import { IconCheckBold, IconSubtractBold } from '../../icons/index.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { Text } from '../typography/text.js';
 function Checkbox({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
@@ -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', 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 }))] })) }));
+    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(IconSubtractBold, {}) : _jsx(IconCheckBold, {}) }) }), 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`.

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;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"]}
+{"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,aAAa,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAuB7C,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,gBAAgB,KAAG,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,GAAO,GACnG,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 { IconCheckBold, IconSubtractBold } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n  extends CommonProps,\n    AriaLabelingProps,\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      | '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  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 ? <IconSubtractBold /> : <IconCheckBold />}</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

@@ -9,7 +9,11 @@ export interface ComboBoxValidationValue {
 }
 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'> {
 }
-/** Allows users to filter a collapsible list and select one item from it. */
+/**
+ * Allows users to filter a collapsible list and select one item from it.
+ *
+ * See [combo box usage guidelines](https://ui.cimpress.com/components/combo-box)
+ */
 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'> {

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