@cimpress-ui/react 0.3.0 → 1.0.0

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

@@ -0,0 +1,27 @@
+import { type JSX, type ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface CalloutProps extends CommonProps {
+    /** The title of the callout. */
+    title?: string;
+    /** The content of the callout. */
+    children: ReactNode;
+    /** The tone of the callout. */
+    tone: 'info' | 'success' | 'warning' | 'critical';
+    /** Optional actions to display at the bottom of the callout. Use `Button` or `LinkButton` components only. */
+    actions?: ReactNode;
+    /**
+     * Whether the callout can be dismissed by the user.
+     * @default false
+     */
+    isDismissible?: boolean;
+    /** Callback function to be called when the dismiss button is pressed. Makes the callout controlled. */
+    onDismiss?: () => void;
+}
+/**
+ * Displays an inline message banner that highlights important information.
+ *
+ * See [callout usage guidelines](https://ui.cimpress.io/components/callout/).
+ */
+declare const _Callout: (props: CalloutProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => JSX.Element | null;
+export { _Callout as Callout };
+//# sourceMappingURL=callout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../../src/components/callout/callout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,GAAG,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9E,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,aAAa,CAAC;AAU1D,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAClD,8GAA8G;IAC9G,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uGAAuG;IACvG,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AA4DD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,8IAAiD,CAAC;AAEhE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}

package/dist/esm/components/callout/callout.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useState } from 'react';
+import { forwardRef } from '../../forward-ref.js';
+import { useLocalizedMessages } from '../../i18n/index.js';
+import { IconCheckCircle, IconInfoCircle, IconWarning, IconWarningCircleFill } from '../../icons/index.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { XButton } from '../internal/x-button/x-button.js';
+import { Stack } from '../spacing/stack/stack.js';
+import { Text } from '../typography/text.js';
+const iconMap = {
+    info: IconInfoCircle,
+    success: IconCheckCircle,
+    warning: IconWarning,
+    critical: IconWarningCircleFill,
+};
+function Callout({ UNSAFE_className, UNSAFE_style, tone, title, children, actions, isDismissible = false, onDismiss, ...props }, ref) {
+    const Icon = iconMap[tone];
+    const messages = useLocalizedMessages('common');
+    const [isDismissed, setIsDismissed] = useState(false);
+    function handleDismiss() {
+        if (onDismiss == null) {
+            setIsDismissed(true);
+        }
+        onDismiss?.();
+    }
+    if (isDismissed) {
+        return null;
+    }
+    return (_jsxs("div", { ...props, ref: ref, className: clsx('cim-callout', UNSAFE_className), style: UNSAFE_style, "data-tone": tone, children: [_jsx("div", { className: "cim-callout-icon", children: _jsx(Icon, { size: 24, "aria-hidden": true }) }), _jsxs("div", { className: "cim-callout-content", children: [title && (_jsx(Text, { as: "h3", UNSAFE_className: "cim-callout-title", variant: "title-6", tone: "base", children: title })), _jsx(Text, { as: "div", UNSAFE_className: "cim-callout-text", variant: "medium", tone: "base", children: children }), actions && (_jsx(Stack, { gap: 8, direction: "horizontal", wrap: true, UNSAFE_className: "cim-callout-actions", children: actions }))] }), (isDismissible || onDismiss != null) && (_jsx("div", { className: "cim-callout-close", children: _jsx(XButton, { onPress: handleDismiss, "aria-label": messages.format('dismiss') }) }))] }));
+}
+/**
+ * Displays an inline message banner that highlights important information.
+ *
+ * See [callout usage guidelines](https://ui.cimpress.io/components/callout/).
+ */
+const _Callout = withStyleProps(forwardRef(Callout), 'Callout');
+export { _Callout as Callout };
+//# sourceMappingURL=callout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"callout.js","sourceRoot":"","sources":["../../../../src/components/callout/callout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAY,QAAQ,EAAqC,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC3G,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,MAAM,OAAO,GAAoE;IAC/E,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,eAAe;IACxB,OAAO,EAAE,WAAW;IACpB,QAAQ,EAAE,qBAAqB;CAChC,CAAC;AAoBF,SAAS,OAAO,CACd,EACE,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,aAAa,GAAG,KAAK,EACrB,SAAS,EACT,GAAG,KAAK,EACK,EACf,GAAiC;IAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,MAAM,QAAQ,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IAEhD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,SAAS,aAAa;QACpB,IAAI,SAAS,IAAI,IAAI,EAAE,CAAC;YACtB,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;QACD,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,kBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,aAC9G,cAAK,SAAS,EAAC,kBAAkB,YAC/B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,wBAAgB,GAC1B,EACN,eAAK,SAAS,EAAC,qBAAqB,aACjC,KAAK,IAAI,CACR,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,gBAAgB,EAAC,mBAAmB,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC7E,KAAK,GACD,CACR,EACD,KAAC,IAAI,IAAC,EAAE,EAAC,KAAK,EAAC,gBAAgB,EAAC,kBAAkB,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YAC5E,QAAQ,GACJ,EACN,OAAO,IAAI,CACV,KAAC,KAAK,IAAC,GAAG,EAAE,CAAC,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,QAAC,gBAAgB,EAAC,qBAAqB,YAC9E,OAAO,GACF,CACT,IACG,EACL,CAAC,aAAa,IAAI,SAAS,IAAI,IAAI,CAAC,IAAI,CACvC,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,OAAO,IAAC,OAAO,EAAE,aAAa,gBAAc,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,GAAI,GACvE,CACP,IACG,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,QAAQ,GAAG,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAEhE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type JSX, useState, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheckCircle, IconInfoCircle, IconWarning, IconWarningCircleFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { CommonProps, IconProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nconst iconMap: Record<CalloutProps['tone'], (props: IconProps) => JSX.Element> = {\n  info: IconInfoCircle,\n  success: IconCheckCircle,\n  warning: IconWarning,\n  critical: IconWarningCircleFill,\n};\n\nexport interface CalloutProps extends CommonProps {\n  /** The title of the callout. */\n  title?: string;\n  /** The content of the callout. */\n  children: ReactNode;\n  /** The tone of the callout. */\n  tone: 'info' | 'success' | 'warning' | 'critical';\n  /** Optional actions to display at the bottom of the callout. Use `Button` or `LinkButton` components only. */\n  actions?: ReactNode;\n  /**\n   * Whether the callout can be dismissed by the user.\n   * @default false\n   */\n  isDismissible?: boolean;\n  /** Callback function to be called when the dismiss button is pressed. Makes the callout controlled. */\n  onDismiss?: () => void;\n}\n\nfunction Callout(\n  {\n    UNSAFE_className,\n    UNSAFE_style,\n    tone,\n    title,\n    children,\n    actions,\n    isDismissible = false,\n    onDismiss,\n    ...props\n  }: CalloutProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const Icon = iconMap[tone];\n  const messages = useLocalizedMessages('common');\n\n  const [isDismissed, setIsDismissed] = useState(false);\n  function handleDismiss() {\n    if (onDismiss == null) {\n      setIsDismissed(true);\n    }\n    onDismiss?.();\n  }\n\n  if (isDismissed) {\n    return null;\n  }\n\n  return (\n    <div {...props} ref={ref} className={clsx('cim-callout', UNSAFE_className)} style={UNSAFE_style} data-tone={tone}>\n      <div className=\"cim-callout-icon\">\n        <Icon size={24} aria-hidden />\n      </div>\n      <div className=\"cim-callout-content\">\n        {title && (\n          <Text as=\"h3\" UNSAFE_className=\"cim-callout-title\" variant=\"title-6\" tone=\"base\">\n            {title}\n          </Text>\n        )}\n        <Text as=\"div\" UNSAFE_className=\"cim-callout-text\" variant=\"medium\" tone=\"base\">\n          {children}\n        </Text>\n        {actions && (\n          <Stack gap={8} direction=\"horizontal\" wrap UNSAFE_className=\"cim-callout-actions\">\n            {actions}\n          </Stack>\n        )}\n      </div>\n      {(isDismissible || onDismiss != null) && (\n        <div className=\"cim-callout-close\">\n          <XButton onPress={handleDismiss} aria-label={messages.format('dismiss')} />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays an inline message banner that highlights important information.\n *\n * See [callout usage guidelines](https://ui.cimpress.io/components/callout/).\n */\nconst _Callout = withStyleProps(forwardRef(Callout), 'Callout');\n\nexport { _Callout as Callout };\n"]}

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

@@ -1,20 +1,60 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_CardProps extends CommonProps {
+export interface CardProps extends CommonProps {
+    /** The contents of the card. */
     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 };
+declare const _Card: (props: CardProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Card as Card };
+export interface CardContentProps extends CommonProps {
+    /** The content of this block. */
+    children: ReactNode;
+    /**
+     * Whether the block's content should stretch to the edges of the block.
+     * @default false
+     */
+    fullBleed?: boolean;
+}
+/** Renders a single block of content within `Card`. */
+export declare function CardContent({ children, UNSAFE_className, UNSAFE_style, fullBleed, ...props }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CardContent {
+    var displayName: string;
+}
+export interface CardHeaderProps extends CommonProps {
+    /** The icon to display at the start of the header. */
+    iconStart?: ReactNode;
+    /**
+     * The title of the card. Optionally, you can pass a React node to render a link.
+     *
+     * @example
+     * <CardHeader title="Card title" />
+     * <CardHeader title={<Link href="#">Card title</Link>} />
+     */
+    title: ReactNode;
+    /**
+     * The description of the card. Optionally, you can pass a React node to render rich text.
+     *
+     * @example
+     * <CardHeader title="Card title" description="Card subtitle" />
+     * <CardHeader title="Card title" description={<Link href="#">Card subtitle</Link>} />
+     */
+    description?: ReactNode;
+    /**
+     * The tools to render at the end of the header. Usually a menu, icon button, or badge. For buttons, use the "small" size variant.
+     *
+     * @example
+     * <CardHeader title="Card title" tools={<IconButton size="small" icon={<IconRatingStar />} aria-label="Favorite" />} />
+     */
+    tools?: ReactNode;
+}
+/** Renders a header within a `Card`. */
+export declare function CardHeader({ UNSAFE_className, UNSAFE_style, iconStart, title, description, tools, ...props }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CardHeader {
+    var displayName: string;
+}
 //# sourceMappingURL=card.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD;;;;GAIG;AACH,QAAA,MAAM,KAAK,2JAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEzB,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,uDAAuD;AACvD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,SAAiB,EACjB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAWlB;yBAjBe,WAAW;;;AAqB3B,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,wCAAwC;AACxC,wBAAgB,UAAU,CAAC,EACzB,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CAmBjB;yBA3Be,UAAU"}

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

@@ -1,22 +1,27 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } 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 }));
+import { Text } from '../typography/text.js';
+function Card({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: clsx('cim-card', UNSAFE_className), style: UNSAFE_style, 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 };
+const _Card = withStyleProps(forwardRef(Card), 'Card');
+export { _Card as Card };
+/** Renders a single block of content within `Card`. */
+export function CardContent({ children, UNSAFE_className, UNSAFE_style, fullBleed = false, ...props }) {
+    return (_jsx("div", { ...props, className: clsx('cim-card-content', UNSAFE_className), style: UNSAFE_style, "data-full-bleed": fullBleed || undefined, children: children }));
+}
+CardContent.displayName = 'CardContent';
+/** Renders a header within a `Card`. */
+export function CardHeader({ UNSAFE_className, UNSAFE_style, iconStart, title, description, tools, ...props }) {
+    return (_jsxs("div", { ...props, className: clsx('cim-card-header', 'cim-card-content', UNSAFE_className), style: UNSAFE_style, children: [iconStart, _jsxs("div", { className: "cim-card-header-text", children: [_jsx(Text, { as: "h2", variant: "body-semibold", tone: "base", children: title }), description && (_jsx(Text, { as: "p", variant: "small", tone: "subtle", children: description }))] }), _jsx("div", { className: "cim-card-header-tools", children: tools })] }));
+}
+CardHeader.displayName = 'CardHeader';
 //# sourceMappingURL=card.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.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;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAO7C,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAAE,GAAiC;IAChH,OAAO,CACL,iBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACzF,QAAQ,GACL,CACP,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;AAYzB,uDAAuD;AACvD,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACS;IACjB,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY,qBACF,SAAS,IAAI,SAAS,YAEtC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AA8BxC,wCAAwC;AACxC,MAAM,UAAU,UAAU,CAAC,EACzB,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,kBAAS,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC1G,SAAS,EAEV,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,YAC9C,KAAK,GACD,EACN,WAAW,IAAI,CACd,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,YACvC,WAAW,GACP,CACR,IACG,EAEN,cAAK,SAAS,EAAC,uBAAuB,YAAE,KAAK,GAAO,IAChD,CACP,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CardProps extends CommonProps {\n  /** The contents of the card. */\n  children: ReactNode;\n}\n\nfunction Card({ children, UNSAFE_className, UNSAFE_style, ...props }: CardProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <div {...props} ref={ref} className={clsx('cim-card', UNSAFE_className)} style={UNSAFE_style}>\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 _Card = withStyleProps(forwardRef(Card), 'Card');\n\nexport { _Card as Card };\n\nexport interface CardContentProps extends CommonProps {\n  /** The content of this block. */\n  children: ReactNode;\n  /**\n   * Whether the block's content should stretch to the edges of the block.\n   * @default false\n   */\n  fullBleed?: boolean;\n}\n\n/** Renders a single block of content within `Card`. */\nexport function CardContent({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  fullBleed = false,\n  ...props\n}: CardContentProps) {\n  return (\n    <div\n      {...props}\n      className={clsx('cim-card-content', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-full-bleed={fullBleed || undefined}\n    >\n      {children}\n    </div>\n  );\n}\n\nCardContent.displayName = 'CardContent';\n\nexport interface CardHeaderProps extends CommonProps {\n  /** The icon to display at the start of the header. */\n  iconStart?: ReactNode;\n  /**\n   * The title of the card. Optionally, you can pass a React node to render a link.\n   *\n   * @example\n   * <CardHeader title=\"Card title\" />\n   * <CardHeader title={<Link href=\"#\">Card title</Link>} />\n   */\n  title: ReactNode;\n  /**\n   * The description of the card. Optionally, you can pass a React node to render rich text.\n   *\n   * @example\n   * <CardHeader title=\"Card title\" description=\"Card subtitle\" />\n   * <CardHeader title=\"Card title\" description={<Link href=\"#\">Card subtitle</Link>} />\n   */\n  description?: ReactNode;\n  /**\n   * The tools to render at the end of the header. Usually a menu, icon button, or badge. For buttons, use the \"small\" size variant.\n   *\n   * @example\n   * <CardHeader title=\"Card title\" tools={<IconButton size=\"small\" icon={<IconRatingStar />} aria-label=\"Favorite\" />} />\n   */\n  tools?: ReactNode;\n}\n\n/** Renders a header within a `Card`. */\nexport function CardHeader({\n  UNSAFE_className,\n  UNSAFE_style,\n  iconStart,\n  title,\n  description,\n  tools,\n  ...props\n}: CardHeaderProps) {\n  return (\n    <div {...props} className={clsx('cim-card-header', 'cim-card-content', UNSAFE_className)} style={UNSAFE_style}>\n      {iconStart}\n\n      <div className=\"cim-card-header-text\">\n        <Text as=\"h2\" variant=\"body-semibold\" tone=\"base\">\n          {title}\n        </Text>\n        {description && (\n          <Text as=\"p\" variant=\"small\" tone=\"subtle\">\n            {description}\n          </Text>\n        )}\n      </div>\n\n      <div className=\"cim-card-header-tools\">{tools}</div>\n    </div>\n  );\n}\n\nCardHeader.displayName = 'CardHeader';\n"]}

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

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { type CheckboxGroupProps as RACCheckboxGroupProps } from 'react-aria-components';
 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'> {
+export interface CheckboxGroupProps extends CommonProps, WithRequired<FieldProps<string[]>, 'label'>, Pick<RACCheckboxGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue'> {
     /** Checkboxes belonging to the group. Each checkbox must have a `value` prop defined. */
     children: ReactNode;
     /**

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":"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"}
+{"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,CACjG;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

@@ -7,7 +7,7 @@ import { withStyleProps } from '../../with-style-props.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, 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 })] }));
+    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, wrap: true, children: children }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
 }
 /**
  * Allows users to select one or more items from a visible list.
@@ -19,7 +19,7 @@ export { _CheckboxGroup as CheckboxGroup };
 // 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 };
+        const gap = { sm: direction.sm === 'horizontal' ? 16 : 8 };
         Object.entries(direction).reduce((acc, curr) => {
             gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;
             return acc;

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,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"]}
+{"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,EAAE,IAAI,kBACnE,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'\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} wrap>\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> = { sm: direction.sm === '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.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,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"}
+{"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;AAKxG,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

@@ -1,20 +1,20 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useEffect } from 'react';
 import { Checkbox as RACCheckbox } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { IconCheckBold, IconSubtractBold } from '../../icons/index.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { Text } from '../typography/text.js';
 function Checkbox({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
-    useEffect(() => {
+    useProductionWarning(() => {
         if (!children && !ariaLabel && !ariaLabelledBy) {
             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(IconSubtractBold, {}) : _jsx(IconCheckBold, {}) }) }), 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: "medium", children: children }))] })) }));
 }
 /**
  * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;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"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,IAAI,WAAW,EAA0C,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,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,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,WAAW,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACrG,CAAC,EAAE,eAAe,EAAE,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,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconSubtractBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.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  useProductionWarning(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACCheckbox {...props} ref={ref} className={clsx('cim-checkbox', UNSAFE_className)} style={UNSAFE_style}>\n      {({ isIndeterminate }) => (\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=\"medium\">\n              {children}\n            </Text>\n          )}\n        </>\n      )}\n    </RACCheckbox>\n  );\n}\n\n/**\n * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n *\n * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}

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

@@ -7,7 +7,12 @@ export interface ComboBoxValidationValue {
     /** The value of the ComboBox input. */
     inputValue: string;
 }
-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'> {
+export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<ComboBoxValidationValue>, CollectionProps<T>, Pick<RACComboBoxProps<T>, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'selectedKey' | 'defaultSelectedKey' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onSelectionChange' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'> {
+    /**
+     * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.
+     * @default false
+     */
+    isVirtualized?: boolean;
 }
 /**
  * Allows users to filter a collapsible list and select one item from it.
@@ -17,6 +22,7 @@ export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extend
 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'> {
+    /** The content to display as the label. */
     children: StringLikeChildren;
 }
 /** Renders a single list item within `ComboBox`. */

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;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"}
+{"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,EAMpC,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAUrB,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,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;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA0ED;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA7EG,CAAC,SAAS,cAAc,iKA6EwB,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,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}

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

@@ -1,25 +1,34 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
-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 { useContext } 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, ListLayout as RACListLayout, Text as RACText, Virtualizer as RACVirtualizer, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { IconCheck, IconChevronDown } from '../../icons/index.js';
+import { isProduction } from '../../utils/is-production.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
 import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
 import { textStyle } from '../typography/utils.js';
-function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, ...props }, ref) {
+const VIRTUAL_LAYOUT_OPTIONS = {
+    rowHeight: 40,
+    headingHeight: 32,
+    padding: 0,
+    gap: 0,
+};
+function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
-    useEffect(() => {
+    useProductionWarning(() => {
         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') {
+    if (!isProduction() && 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-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 }) })] }));
+    const listBox = (_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: isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
 }
 /**
  * Allows users to filter a collapsible list and select one item from it.
@@ -30,7 +39,7 @@ const _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');
 export { _ComboBox as ComboBox };
 function ComboBoxInput({ isReadOnly, placeholder, }) {
     const comboBoxState = useContext(RACComboBoxStateContext);
-    return (_jsx(RACInput, { className: clsx('cim-combo-box-input', textStyle({ variant: 'medium' })), 
+    return (_jsx(RACInput, { className: clsx('cim-combo-box-input', textStyle({ variant: 'body' })), 
         // Ensure the popover opens when the input is clicked.
         // By default, React Aria only opens the popover when the input is focused.
         onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder }));
@@ -43,7 +52,7 @@ export function ComboBoxItem({ children, ...props }) {
 ComboBoxItem.displayName = 'ComboBoxItem';
 /** Groups list items within `ComboBox` into a section. */
 export function ComboBoxSection({ title, children, items, ...props }) {
-    if (items != null && typeof children !== 'function') {
+    if (!isProduction() && 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 })] }));

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, 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"]}
+{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AACtD,OAAO,EACL,MAAM,IAAI,SAAS,EACnB,UAAU,IAAI,aAAa,EAC3B,QAAQ,IAAI,WAAW,EACvB,oBAAoB,IAAI,uBAAuB,EAC/C,KAAK,IAAI,QAAQ,EACjB,MAAM,IAAI,SAAS,EACnB,KAAK,IAAI,QAAQ,EACjB,OAAO,IAAI,UAAU,EAErB,WAAW,IAAI,cAAc,EAC7B,cAAc,IAAI,iBAAiB,EACnC,UAAU,IAAI,aAAa,EAE3B,IAAI,IAAI,OAAO,EAGf,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAS5G,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,MAAM,sBAAsB,GAAyB;IACnD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAuCF,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,IAAI,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,yEAAyE,CAAC,CAAC;IAC1F,CAAC;IAED,MAAM,OAAO,GAAG,CACd,KAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC3E,QAAQ,GACE,CACd,CAAC;IAEF,OAAO,CACL,MAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAClD,KAAK,EAAE,YAAY,EACnB,WAAW,EAAC,OAAO,EACnB,UAAU,EAAE,UAAU,mBACP,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,aAE5C,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,MAAC,QAAQ,IAAC,SAAS,EAAC,2BAA2B,aAC7C,KAAC,aAAa,IAAC,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,GAAI,EACnE,KAAC,SAAS,IAAC,SAAS,EAAC,sBAAsB,YACzC,KAAC,eAAe,KAAG,GACT,IACH,EACX,KAAC,cAAc,cAAE,KAAK,GAAkB,EACxC,KAAC,oBAAoB,cAAE,WAAW,GAAwB,EAC1D,KAAC,eAAe,IACd,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,YAEb,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACe,IACN,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;AAEjC,SAAS,aAAa,CAAC,EACrB,UAAU,EACV,WAAW,GAIZ;IACC,MAAM,aAAa,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAE1D,OAAO,CACL,KAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;QACtE,sDAAsD;QACtD,2EAA2E;QAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,aAAc,CAAC,IAAI,EAAE,EACnD,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC;AAQD,oDAAoD;AACpD,MAAM,UAAU,YAAY,CAA2B,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB;IACjG,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAC,oBAAoB,EAAC,SAAS,EAAE,SAAS,YAC3E,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACnB,8BACE,KAAC,SAAS,KAAG,EAEb,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,YACjG,QAAQ,GACD,IACT,CACJ,GACc,CAClB,CAAC;AACJ,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAS1C,0DAA0D;AAC1D,MAAM,UAAU,eAAe,CAA2B,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACgB;IACxB,IAAI,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;IACjG,CAAC;IAED,OAAO,CACL,MAAC,iBAAiB,OAAK,KAAK,EAAE,SAAS,EAAC,uBAAuB,aAC7D,KAAC,SAAS,IACR,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAExG,KAAK,GACI,EACZ,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,IACrC,CACrB,CAAC;AACJ,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, 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  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  Text as RACText,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type {\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  rowHeight: 40,\n  headingHeight: 32,\n  padding: 0,\n  gap: 0,\n};\n\n/** Represents the state of the `ComboBox` component for validation purposes. */\nexport interface ComboBoxValidationValue {\n  /** The selected key in the ComboBox. */\n  selectedKey: Key | null;\n  /** The value of the ComboBox input. */\n  inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldWithPlaceholderProps<ComboBoxValidationValue>,\n    CollectionProps<T>,\n    Pick<\n      RACComboBoxProps<T>,\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  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n}\n\nfunction ComboBox<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    items,\n    children,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    isReadOnly,\n    onScroll,\n    isVirtualized = false,\n    ...props\n  }: ComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n  }\n\n  const listBox = (\n    <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n      {children}\n    </RACListBox>\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        {isVirtualized ? (\n          <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n            {listBox}\n          </RACVirtualizer>\n        ) : (\n          listBox\n        )}\n      </CollapsibleList>\n    </RACComboBox>\n  );\n}\n\n/**\n * Allows users to filter a collapsible list and select one item from it.\n *\n * See [combo box usage guidelines](https://ui.cimpress.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: 'body' }))}\n      // Ensure the popover opens when the input is clicked.\n      // By default, React Aria only opens the popover when the input is focused.\n      onClick={() => !isReadOnly && comboBoxState!.open()}\n      placeholder={placeholder}\n    />\n  );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem>\n  extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `ComboBox`. */\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-combo-box-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n  title,\n  children,\n  items,\n  ...props\n}: ComboBoxSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n      <RACHeader\n        className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface UNSTABLE_ContainerProps extends CommonProps {
+    /** The contents of the container. */
+    children: ReactNode;
+    /**
+     * The type of the container.
+     * @default 'padded'
+     */
+    type?: 'padded' | 'full-width' | 'fixed-width';
+}
+export declare function UNSTABLE_Container({ children, UNSAFE_className, UNSAFE_style, type, ...props }: UNSTABLE_ContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_Container {
+    var displayName: string;
+}
+//# sourceMappingURL=container.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/components/container/container.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,aAAa,CAAC;CAChD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,IAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAMzB;yBAZe,kBAAkB"}

package/dist/esm/components/container/container.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+export function UNSTABLE_Container({ children, UNSAFE_className, UNSAFE_style, type = 'padded', ...props }) {
+    return (_jsx("div", { ...props, className: clsx('cim-container', UNSAFE_className), style: UNSAFE_style, "data-type": type, children: children }));
+}
+UNSTABLE_Container.displayName = 'Container';
+//# sourceMappingURL=container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/container/container.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAcxB,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACgB;IACxB,OAAO,CACL,iBAAS,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,YACrG,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_ContainerProps extends CommonProps {\n  /** The contents of the container. */\n  children: ReactNode;\n  /**\n   * The type of the container.\n   * @default 'padded'\n   */\n  type?: 'padded' | 'full-width' | 'fixed-width';\n}\n\nexport function UNSTABLE_Container({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  type = 'padded',\n  ...props\n}: UNSTABLE_ContainerProps) {\n  return (\n    <div {...props} className={clsx('cim-container', UNSAFE_className)} style={UNSAFE_style} data-type={type}>\n      {children}\n    </div>\n  );\n}\n\nUNSTABLE_Container.displayName = 'Container';\n"]}

package/dist/esm/components/date-picker/date-picker-calendar.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=date-picker-calendar.d.ts.map

package/dist/esm/components/date-picker/date-picker-calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker-calendar.tsx"],"names":[],"mappings":""}