@cimpress-ui/react 0.2.1 → 0.4.0

package/dist/esm/components/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface UNSTABLE_AlertDialogRenderProps {
+    /** Closes the alert dialog when called. */
+    close: () => void;
+}
+export interface UNSTABLE_AlertDialogActionArgs {
+    /** Closes the alert dialog when called. */
+    close: () => void;
+}
+export interface UNSTABLE_AlertDialogProps extends CommonProps {
+    /** The title of the alert dialog. */
+    title: string;
+    /** The contents of the alert dialog. A function may be provided to access a function to close the dialog. */
+    children: ReactNode | ((renderProps: UNSTABLE_AlertDialogRenderProps) => ReactNode);
+    /** The tone of the alert dialog. */
+    tone: 'info' | 'success' | 'warning' | 'critical';
+    /**
+     * Whether the dialog is open (controlled).
+     * If using `DialogRoot`, this prop has no effect - provide `isOpen` to `DialogRoot` instead.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the dialog is open by default (uncontrolled).
+     * If using `DialogRoot`, this prop has no effect - provide `defaultOpen` to `DialogRoot` instead.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Handler that is called when the dialog's open state changes.
+     * If using `DialogRoot`, this prop has no effect - provide `onOpenChange` to `DialogRoot` instead.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Handler that is called when the primary action is pressed.
+     */
+    onPrimaryActionPress: (args: UNSTABLE_AlertDialogActionArgs) => void;
+    /**
+     * The label of the primary action.
+     */
+    primaryActionLabel: string;
+    /**
+     * Handler that is called when the secondary action is pressed.
+     */
+    onSecondaryActionPress?: (args: UNSTABLE_AlertDialogActionArgs) => void;
+    /**
+     * The label of the secondary action.
+     */
+    secondaryActionLabel: string;
+}
+export declare function UNSTABLE_AlertDialog({ children, title, tone, UNSAFE_className, UNSAFE_style, isOpen, defaultOpen, onOpenChange, onPrimaryActionPress, onSecondaryActionPress, primaryActionLabel, secondaryActionLabel, ...props }: UNSTABLE_AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/esm/components/alert-dialog/alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAU/C,MAAM,WAAW,+BAA+B;IAC9C,2CAA2C;IAC3C,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,8BAA8B;IAC7C,2CAA2C;IAC3C,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,6GAA6G;IAC7G,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,+BAA+B,KAAK,SAAS,CAAC,CAAC;IACpF,oCAAoC;IACpC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,oBAAoB,EAAE,CAAC,IAAI,EAAE,8BAA8B,KAAK,IAAI,CAAC;IACrE;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,8BAA8B,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,WAAW,EACX,YAAY,EACZ,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAyD3B"}

package/dist/esm/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Dialog as RACDialog, Heading as RACHeading, Modal as RACModal, ModalOverlay as RACModalOverlay, } from 'react-aria-components';
+import { IconCheckCircle, IconInfoCircle, IconWarning, IconWarningCircleFill } from '../../icons/index.js';
+import { Button } from '../button/button.js';
+import { FocusableContainer } from '../internal/focusable-container/focusable-container.js';
+import { Stack } from '../spacing/stack/stack.js';
+import { textStyle } from '../typography/utils.js';
+const iconMap = {
+    info: IconInfoCircle,
+    success: IconCheckCircle,
+    warning: IconWarning,
+    critical: IconWarningCircleFill,
+};
+export function UNSTABLE_AlertDialog({ children, title, tone, UNSAFE_className, UNSAFE_style, isOpen, defaultOpen, onOpenChange, onPrimaryActionPress, onSecondaryActionPress, primaryActionLabel, secondaryActionLabel, ...props }) {
+    const Icon = iconMap[tone];
+    return (_jsx(RACModalOverlay, { className: "cim-modal-overlay", isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: _jsx(RACModal, { className: clsx('cim-alert-dialog-modal', UNSAFE_className), style: UNSAFE_style, children: _jsx(RACDialog, { ...props, role: "alertdialog", className: "cim-alert-dialog", "data-tone": tone, children: (renderProps) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "cim-alert-dialog-icon", children: _jsx(Icon, { size: 32 }) }), _jsx(RACHeading, { slot: "title", className: clsx('cim-alert-dialog-title', textStyle({ variant: 'title-6', tone: 'base' })), children: title }), _jsx(FocusableContainer, { className: clsx('cim-alert-dialog-content', textStyle({ variant: 'medium', tone: 'base' })), scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children }), _jsxs(Stack, { gap: 16, direction: "horizontal", justify: "end", marginTop: 24, UNSAFE_className: "cim-alert-dialog-actions", children: [onSecondaryActionPress && (_jsx(Button, { variant: "secondary", onPress: () => onSecondaryActionPress({ close: renderProps.close }), children: secondaryActionLabel })), _jsx(Button, { variant: "primary", onPress: () => onPrimaryActionPress({ close: renderProps.close }), tone: tone === 'critical' ? 'critical' : 'base', children: primaryActionLabel })] })] })) }) }) }));
+}
+//# sourceMappingURL=alert-dialog.js.map

package/dist/esm/components/alert-dialog/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","sourceRoot":"","sources":["../../../../src/components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  Dialog as RACDialog,\n  Heading as RACHeading,\n  Modal as RACModal,\n  ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { IconCheckCircle, IconInfoCircle, IconWarning, IconWarningCircleFill } from '../../icons/index.js';\nimport { Button } from '../button/button.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst iconMap = {\n  info: IconInfoCircle,\n  success: IconCheckCircle,\n  warning: IconWarning,\n  critical: IconWarningCircleFill,\n};\n\nexport interface UNSTABLE_AlertDialogRenderProps {\n  /** Closes the alert dialog when called. */\n  close: () => void;\n}\n\nexport interface UNSTABLE_AlertDialogActionArgs {\n  /** Closes the alert dialog when called. */\n  close: () => void;\n}\n\nexport interface UNSTABLE_AlertDialogProps extends CommonProps {\n  /** The title of the alert dialog. */\n  title: string;\n  /** The contents of the alert dialog. A function may be provided to access a function to close the dialog. */\n  children: ReactNode | ((renderProps: UNSTABLE_AlertDialogRenderProps) => ReactNode);\n  /** The tone of the alert dialog. */\n  tone: 'info' | 'success' | 'warning' | 'critical';\n  /**\n   * Whether the dialog is open (controlled).\n   * If using `DialogRoot`, this prop has no effect - provide `isOpen` to `DialogRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the dialog is open by default (uncontrolled).\n   * If using `DialogRoot`, this prop has no effect - provide `defaultOpen` to `DialogRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the dialog's open state changes.\n   * If using `DialogRoot`, this prop has no effect - provide `onOpenChange` to `DialogRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Handler that is called when the primary action is pressed.\n   */\n  onPrimaryActionPress: (args: UNSTABLE_AlertDialogActionArgs) => void;\n  /**\n   * The label of the primary action.\n   */\n  primaryActionLabel: string;\n  /**\n   * Handler that is called when the secondary action is pressed.\n   */\n  onSecondaryActionPress?: (args: UNSTABLE_AlertDialogActionArgs) => void;\n  /**\n   * The label of the secondary action.\n   */\n  secondaryActionLabel: string;\n}\n\nexport function UNSTABLE_AlertDialog({\n  children,\n  title,\n  tone,\n  UNSAFE_className,\n  UNSAFE_style,\n  isOpen,\n  defaultOpen,\n  onOpenChange,\n  onPrimaryActionPress,\n  onSecondaryActionPress,\n  primaryActionLabel,\n  secondaryActionLabel,\n  ...props\n}: UNSTABLE_AlertDialogProps) {\n  const Icon = iconMap[tone];\n\n  return (\n    <RACModalOverlay\n      className=\"cim-modal-overlay\"\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-cim-style-root\n    >\n      <RACModal className={clsx('cim-alert-dialog-modal', UNSAFE_className)} style={UNSAFE_style}>\n        <RACDialog {...props} role=\"alertdialog\" className=\"cim-alert-dialog\" data-tone={tone}>\n          {(renderProps) => (\n            <>\n              <div className=\"cim-alert-dialog-icon\">\n                <Icon size={32} />\n              </div>\n              <RACHeading\n                slot=\"title\"\n                className={clsx('cim-alert-dialog-title', textStyle({ variant: 'title-6', tone: 'base' }))}\n              >\n                {title}\n              </RACHeading>\n\n              <FocusableContainer\n                className={clsx('cim-alert-dialog-content', textStyle({ variant: 'medium', tone: 'base' }))}\n                scrollDirection=\"vertical\"\n              >\n                {typeof children === 'function' ? children(renderProps) : children}\n              </FocusableContainer>\n              <Stack\n                gap={16}\n                direction=\"horizontal\"\n                justify=\"end\"\n                marginTop={24}\n                UNSAFE_className=\"cim-alert-dialog-actions\"\n              >\n                {onSecondaryActionPress && (\n                  <Button variant=\"secondary\" onPress={() => onSecondaryActionPress({ close: renderProps.close })}>\n                    {secondaryActionLabel}\n                  </Button>\n                )}\n                <Button\n                  variant=\"primary\"\n                  onPress={() => onPrimaryActionPress({ close: renderProps.close })}\n                  tone={tone === 'critical' ? 'critical' : 'base'}\n                >\n                  {primaryActionLabel}\n                </Button>\n              </Stack>\n            </>\n          )}\n        </RACDialog>\n      </RACModal>\n    </RACModalOverlay>\n  );\n}\n"]}

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.map

@@ -1 +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"}
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,WAAW,EAGX,GAAG,EACH,eAAe,EAEf,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;AAiExB,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,GAnHG,CAAC,SAAS,cAAc,kLAmH8B,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}

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

@@ -1,23 +1,39 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from '@react-aria/utils';
+import { useId, useObjectRef, useRouter } from '@react-aria/utils';
 import clsx from 'clsx';
+import { useCallback } from 'react';
 import { Breadcrumbs as RACBreadcrumbs, Breadcrumb as RACBreadcrumb } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
-import { UNSTABLE_IconChevronRightFill } from '../../icons/index.js';
+import { IconChevronRight } from '../../icons/index.js';
+import { RouterProvider } from '../../providers/router/router-provider.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 listRef = useObjectRef(ref);
+    const router = useRouter();
     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 }) }));
+    const navigationInterceptor = useCallback((path, routerOptions) => {
+        // Breadcrumbs navigation causes the activated link to become disabled.
+        // Blur the link beforehand so that the browser can decide where to place focus next.
+        if (!listRef.current) {
+            return;
+        }
+        const element = listRef.current.querySelector(`[href='${path}']`);
+        element.blur();
+        // We don't have access to the modifiers of the original event.
+        // However, this function wouldn't run if the original modifiers impacted routing, so it is safe to pass an empty object.
+        router.open(element, {}, path, routerOptions);
+    }, [router, listRef]);
+    return (_jsx(RouterProvider, { navigate: navigationInterceptor, children: _jsx("nav", { ...props, ref: listRef, "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(UNSTABLE_IconChevronRightFill, { size: 16 })] }));
+    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';
 /**

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

@@ -1 +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,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AACrE,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,6BAA6B,IAAC,IAAI,EAAE,EAAE,GAAI,IAC7B,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 { UNSTABLE_IconChevronRightFill } 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      <UNSTABLE_IconChevronRightFill 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"]}
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useId, useObjectRef, useRouter } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { useCallback, 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 { RouterProvider } from '../../providers/router/router-provider.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type {\n  AriaLabelingProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FocusableElement,\n  Href,\n  Key,\n  NavigationProps,\n  RouterOptions,\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 listRef = useObjectRef(ref);\n  const router = useRouter();\n  const breadcrumbsId = useId();\n\n  const navigationInterceptor = useCallback(\n    (path: Href, routerOptions?: RouterOptions) => {\n      // Breadcrumbs navigation causes the activated link to become disabled.\n      // Blur the link beforehand so that the browser can decide where to place focus next.\n\n      if (!listRef.current) {\n        return;\n      }\n\n      const element = listRef.current.querySelector(`[href='${path}']`)!;\n      (element as FocusableElement).blur();\n\n      // We don't have access to the modifiers of the original event.\n      // However, this function wouldn't run if the original modifiers impacted routing, so it is safe to pass an empty object.\n      router.open(element, {}, path, routerOptions);\n    },\n    [router, listRef],\n  );\n\n  return (\n    <RouterProvider navigate={navigationInterceptor}>\n      <nav\n        {...props}\n        ref={listRef}\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    </RouterProvider>\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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEtF,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe,EAAE,iBAAiB;CAAG;AAmD3F;;;;GAIG;AACH,QAAA,MAAM,OAAO,gKAA+C,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEtF,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe,EAAE,iBAAiB;CAAG;AAmD3F;;;;GAIG;AACH,QAAA,MAAM,OAAO,gKAA+C,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC"}

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

@@ -1,19 +1,19 @@
 '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 { Button as RACButton } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
+import { useProductionWarning } from '../../utils/use-production-warning.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, loadingLabel, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    useEffect(() => {
+    useProductionWarning(() => {
         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 || 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,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,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,\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>{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;AAExB,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,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,oBAAoB,CAAC,GAAG,EAAE;QACxB,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,IAAI,SAAS,EACvC,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 type { ForwardedRef } from 'react';\nimport { Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { 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  useProductionWarning(() => {\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 || 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE5F,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,qBAAqB,EAAE,iBAAiB;CAAG;AA+CrG;;;;GAIG;AACH,QAAA,MAAM,WAAW,oKAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE5F,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,qBAAqB,EAAE,iBAAiB;CAAG;AA+CrG;;;;GAIG;AACH,QAAA,MAAM,WAAW,oKAAuD,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

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

@@ -1,19 +1,19 @@
 '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 { Button as RACButton } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
+import { useProductionWarning } from '../../utils/use-production-warning.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, loadingLabel, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    useEffect(() => {
+    useProductionWarning(() => {
         if (isLoading && !loadingLabel) {
             console.warn('IconButton requires loadingLabel when isLoading is true for accessibility');
         }
     }, [isLoading, loadingLabel]);
-    return (_jsx(RACButton, { ...props, ref: ref, className: clsx('cim-icon-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: [icon, isPending && _jsx(InternalSpinner, { size: SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
+    return (_jsx(RACButton, { ...props, ref: ref, className: clsx('cim-icon-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: isDisabled, isPending: isLoading, children: ({ isPending }) => (_jsxs(_Fragment, { children: [icon, isPending && _jsx(InternalSpinner, { size: SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
 }
 /**
  * Displays an icon-only button that allows users to perform an action.

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,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"]}
+{"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;AAExB,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,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,oBAAoB,CAAC,GAAG,EAAE;QACxB,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,IAAI,SAAS,EACvC,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 type { ForwardedRef } from 'react';\nimport { Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { 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  useProductionWarning(() => {\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 || 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/icon-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 IconLinkButton({ icon, variant = 'secondary', tone = 'base', size = 'medium', isDisabled = false, fullWidth = false, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return (_jsx(RACLink, { ...props, ref: ref, className: clsx('cim-icon-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth ? true : undefined, isDisabled: isDisabled, children: icon }));
+    return (_jsx(RACLink, { ...props, ref: ref, className: clsx('cim-icon-button', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-tone": tone, "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: isDisabled, children: icon }));
 }
 /**
  * Displays an icon-only button that allows users to navigate to another page or resource.

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

@@ -1 +1 @@
-{"version":3,"file":"icon-link-button.js","sourceRoot":"","sources":["../../../../src/components/button/icon-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,cAAc,CACrB,EACE,IAAI,EACJ,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACY,EACtB,GAAoC;IAEpC,OAAO,CACL,KAAC,OAAO,OACF,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,YAErB,IAAI,GACG,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,cAAc,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,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, SingleIconButtonProps } from './types.js';\n\nexport interface IconLinkButtonProps\n  extends Omit<BaseButtonProps, 'id'>,\n    SingleIconButtonProps,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {}\n\nfunction IconLinkButton(\n  {\n    icon,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    isDisabled = false,\n    fullWidth = false,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: IconLinkButtonProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <RACLink\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    >\n      {icon}\n    </RACLink>\n  );\n}\n\n/**\n * Displays an icon-only 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 _IconLinkButton = withStyleProps(forwardRef(IconLinkButton), 'IconLinkButton');\n\nexport { _IconLinkButton as IconLinkButton };\n"]}
+{"version":3,"file":"icon-link-button.js","sourceRoot":"","sources":["../../../../src/components/button/icon-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,cAAc,CACrB,EACE,IAAI,EACJ,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACY,EACtB,GAAoC;IAEpC,OAAO,CACL,KAAC,OAAO,OACF,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,IAAI,SAAS,EACvC,UAAU,EAAE,UAAU,YAErB,IAAI,GACG,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,cAAc,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,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, SingleIconButtonProps } from './types.js';\n\nexport interface IconLinkButtonProps\n  extends Omit<BaseButtonProps, 'id'>,\n    SingleIconButtonProps,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {}\n\nfunction IconLinkButton(\n  {\n    icon,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    isDisabled = false,\n    fullWidth = false,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: IconLinkButtonProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <RACLink\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 || undefined}\n      isDisabled={isDisabled}\n    >\n      {icon}\n    </RACLink>\n  );\n}\n\n/**\n * Displays an icon-only 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 _IconLinkButton = withStyleProps(forwardRef(IconLinkButton), 'IconLinkButton');\n\nexport { _IconLinkButton as IconLinkButton };\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 || 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,IAAI,SAAS,EACvC,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 || 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;CAQvB"}
+{"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   * 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"]}
+{"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 | null;\n}\n"]}

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"]}