@cimpress-ui/react 0.3.0 → 0.4.0

package/dist/commonjs/components/alert/alert.d.ts

@@ -0,0 +1,25 @@
+import { type JSX } from 'react';
+import type { CommonProps, StringLikeChildren } from '../types.js';
+export interface AlertProps extends CommonProps {
+    /** The title of the alert. */
+    title?: string;
+    /** The content of the alert. */
+    children: StringLikeChildren;
+    /** The tone of the alert. */
+    tone: 'info' | 'success' | 'warning' | 'critical';
+    /**
+     * Whether the alert can be dismissed by the user.
+     * @default false
+     */
+    isDismissible?: boolean;
+    /** Callback function to be called when the dismiss button is pressed. Makes the alert controlled. */
+    onDismiss?: () => void;
+}
+/**
+ * Displays an inline message banner in response to a user action.
+ *
+ * See [alert usage guidelines](https://ui.cimpress.io/components/alert/).
+ */
+declare const _Alert: (props: AlertProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => JSX.Element | null;
+export { _Alert as Alert };
+//# sourceMappingURL=alert.d.ts.map

package/dist/commonjs/components/alert/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,GAAG,EAA0C,MAAM,OAAO,CAAC;AAMzE,OAAO,KAAK,EAAE,WAAW,EAAa,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAU9E,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,6BAA6B;IAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAClD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qGAAqG;IACrG,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAuDD;;;;GAIG;AACH,QAAA,MAAM,MAAM,4IAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

package/dist/commonjs/components/alert/alert.js

@@ -0,0 +1,51 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const index_js_1 = require("../../i18n/index.js");
+const index_js_2 = require("../../icons/index.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+const x_button_js_1 = require("../internal/x-button/x-button.js");
+const text_js_1 = require("../typography/text.js");
+const iconMap = {
+    info: index_js_2.IconInfoCircle,
+    success: index_js_2.IconCheckCircle,
+    warning: index_js_2.IconWarning,
+    critical: index_js_2.IconWarningCircleFill,
+};
+function Alert({ UNSAFE_className, UNSAFE_style, tone, title, children, isDismissible = false, onDismiss, ...props }, ref) {
+    const Icon = iconMap[tone];
+    const messages = (0, index_js_1.useLocalizedMessages)('common');
+    const [isDismissed, setIsDismissed] = (0, react_1.useState)(false);
+    function handleDismiss() {
+        if (onDismiss == null) {
+            setIsDismissed(true);
+        }
+        onDismiss?.();
+    }
+    // This is required for NVDA announcements, without it NVDA will NOT announce the alert when it appears.
+    // See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role#:~:text=alerts%20will%20only%20be%20announced%20when
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsVisible(true);
+    }, []);
+    if (isDismissed) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, clsx_1.default)('cim-alert', UNSAFE_className), style: UNSAFE_style, "data-tone": tone, children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-alert-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 24, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { role: "alert", className: "cim-alert-content", children: (0, jsx_runtime_1.jsxs)("div", { "aria-hidden": isVisible ? undefined : 'true', children: [title && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h3", UNSAFE_className: "cim-alert-title", variant: "title-6", children: title })), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "p", UNSAFE_className: "cim-alert-text", variant: "medium", children: children })] }) }), (isDismissible || onDismiss != null) && ((0, jsx_runtime_1.jsx)("div", { className: "cim-alert-close", children: (0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { "aria-label": messages.format('dismiss'), onPress: handleDismiss }) }))] }));
+}
+/**
+ * Displays an inline message banner in response to a user action.
+ *
+ * See [alert usage guidelines](https://ui.cimpress.io/components/alert/).
+ */
+const _Alert = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Alert), 'Alert');
+exports.Alert = _Alert;
+//# sourceMappingURL=alert.js.map

package/dist/commonjs/components/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAyE;AACzE,yDAAkD;AAClD,kDAA2D;AAC3D,mDAA2G;AAC3G,mEAA2D;AAC3D,kEAA2D;AAE3D,mDAA6C;AAE7C,MAAM,OAAO,GAAkE;IAC7E,IAAI,EAAE,yBAAc;IACpB,OAAO,EAAE,0BAAe;IACxB,OAAO,EAAE,sBAAW;IACpB,QAAQ,EAAE,gCAAqB;CAChC,CAAC;AAkBF,SAAS,KAAK,CACZ,EAAE,gBAAgB,EAAE,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAc,EACjH,GAAiC;IAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,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,wGAAwG;IACxG,uJAAuJ;IACvJ,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,WAAW,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,oCAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,aAC5G,gCAAK,SAAS,EAAC,gBAAgB,YAC7B,uBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,wBAAgB,GAC1B,EACN,gCAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,mBAAmB,YAE7C,gDAAkB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,aAC7C,KAAK,IAAI,CACR,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,gBAAgB,EAAC,iBAAiB,EAAC,OAAO,EAAC,SAAS,YAC/D,KAAK,GACD,CACR,EACD,uBAAC,cAAI,IAAC,EAAE,EAAC,GAAG,EAAC,gBAAgB,EAAC,gBAAgB,EAAC,OAAO,EAAC,QAAQ,YAC5D,QAAQ,GACJ,IACH,GACF,EACL,CAAC,aAAa,IAAI,SAAS,IAAI,IAAI,CAAC,IAAI,CACvC,gCAAK,SAAS,EAAC,iBAAiB,YAC9B,uBAAC,qBAAO,kBAAa,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,aAAa,GAAI,GACvE,CACP,IACG,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAEvC,uBAAK","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type JSX, useEffect, useState, type ForwardedRef } 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 type { CommonProps, IconProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nconst iconMap: Record<AlertProps['tone'], (props: IconProps) => JSX.Element> = {\n  info: IconInfoCircle,\n  success: IconCheckCircle,\n  warning: IconWarning,\n  critical: IconWarningCircleFill,\n};\n\nexport interface AlertProps extends CommonProps {\n  /** The title of the alert. */\n  title?: string;\n  /** The content of the alert. */\n  children: StringLikeChildren;\n  /** The tone of the alert. */\n  tone: 'info' | 'success' | 'warning' | 'critical';\n  /**\n   * Whether the alert 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 alert controlled. */\n  onDismiss?: () => void;\n}\n\nfunction Alert(\n  { UNSAFE_className, UNSAFE_style, tone, title, children, isDismissible = false, onDismiss, ...props }: AlertProps,\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  // This is required for NVDA announcements, without it NVDA will NOT announce the alert when it appears.\n  // See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role#:~:text=alerts%20will%20only%20be%20announced%20when\n  const [isVisible, setIsVisible] = useState(false);\n  useEffect(() => {\n    setIsVisible(true);\n  }, []);\n\n  if (isDismissed) {\n    return null;\n  }\n\n  return (\n    <div {...props} ref={ref} className={clsx('cim-alert', UNSAFE_className)} style={UNSAFE_style} data-tone={tone}>\n      <div className=\"cim-alert-icon\">\n        <Icon size={24} aria-hidden />\n      </div>\n      <div role=\"alert\" className=\"cim-alert-content\">\n        {/* aria-hidden must be set on the inner div, otherwise it breaks for VoiceOver */}\n        <div aria-hidden={isVisible ? undefined : 'true'}>\n          {title && (\n            <Text as=\"h3\" UNSAFE_className=\"cim-alert-title\" variant=\"title-6\">\n              {title}\n            </Text>\n          )}\n          <Text as=\"p\" UNSAFE_className=\"cim-alert-text\" variant=\"medium\">\n            {children}\n          </Text>\n        </div>\n      </div>\n      {(isDismissible || onDismiss != null) && (\n        <div className=\"cim-alert-close\">\n          <XButton aria-label={messages.format('dismiss')} onPress={handleDismiss} />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays an inline message banner in response to a user action.\n *\n * See [alert usage guidelines](https://ui.cimpress.io/components/alert/).\n */\nconst _Alert = withStyleProps(forwardRef(Alert), 'Alert');\n\nexport { _Alert as Alert };\n"]}

package/dist/commonjs/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/commonjs/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/commonjs/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_AlertDialog = UNSTABLE_AlertDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const index_js_1 = require("../../icons/index.js");
+const button_js_1 = require("../button/button.js");
+const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.js");
+const stack_js_1 = require("../spacing/stack/stack.js");
+const utils_js_1 = require("../typography/utils.js");
+const iconMap = {
+    info: index_js_1.IconInfoCircle,
+    success: index_js_1.IconCheckCircle,
+    warning: index_js_1.IconWarning,
+    critical: index_js_1.IconWarningCircleFill,
+};
+function UNSTABLE_AlertDialog({ children, title, tone, UNSAFE_className, UNSAFE_style, isOpen, defaultOpen, onOpenChange, onPrimaryActionPress, onSecondaryActionPress, primaryActionLabel, secondaryActionLabel, ...props }) {
+    const Icon = iconMap[tone];
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ModalOverlay, { className: "cim-modal-overlay", isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Modal, { className: (0, clsx_1.default)('cim-alert-dialog-modal', UNSAFE_className), style: UNSAFE_style, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, role: "alertdialog", className: "cim-alert-dialog", "data-tone": tone, children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-alert-dialog-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 32 }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-alert-dialog-title', (0, utils_js_1.textStyle)({ variant: 'title-6', tone: 'base' })), children: title }), (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { className: (0, clsx_1.default)('cim-alert-dialog-content', (0, utils_js_1.textStyle)({ variant: 'medium', tone: 'base' })), scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children }), (0, jsx_runtime_1.jsxs)(stack_js_1.Stack, { gap: 16, direction: "horizontal", justify: "end", marginTop: 24, UNSAFE_className: "cim-alert-dialog-actions", children: [onSecondaryActionPress && ((0, jsx_runtime_1.jsx)(button_js_1.Button, { variant: "secondary", onPress: () => onSecondaryActionPress({ close: renderProps.close }), children: secondaryActionLabel })), (0, jsx_runtime_1.jsx)(button_js_1.Button, { variant: "primary", onPress: () => onPrimaryActionPress({ close: renderProps.close }), tone: tone === 'critical' ? 'critical' : 'base', children: primaryActionLabel })] })] })) }) }) }));
+}
+//# sourceMappingURL=alert-dialog.js.map

package/dist/commonjs/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":"AAAA,YAAY,CAAC;;;;;;AA0Eb,oDAuEC;;AA/ID,gDAAwB;AAExB,iEAK+B;AAC/B,mDAA2G;AAC3G,mDAA6C;AAC7C,mGAA4F;AAC5F,wDAAkD;AAElD,qDAAmD;AAEnD,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,yBAAc;IACpB,OAAO,EAAE,0BAAe;IACxB,OAAO,EAAE,sBAAW;IACpB,QAAQ,EAAE,gCAAqB;CAChC,CAAC;AAoDF,SAAgB,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,EACkB;IAC1B,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE3B,OAAO,CACL,uBAAC,oCAAe,IACd,SAAS,EAAC,mBAAmB,EAC7B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,yCAG1B,uBAAC,6BAAQ,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,wBAAwB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACxF,uBAAC,8BAAS,OAAK,KAAK,EAAE,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,kBAAkB,eAAY,IAAI,YAClF,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,6DACE,gCAAK,SAAS,EAAC,uBAAuB,YACpC,uBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,GACd,EACN,uBAAC,+BAAU,IACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,wBAAwB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,YAEzF,KAAK,GACK,EAEb,uBAAC,2CAAkB,IACjB,SAAS,EAAE,IAAA,cAAI,EAAC,0BAA0B,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,EAC3F,eAAe,EAAC,UAAU,YAEzB,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,GAC/C,EACrB,wBAAC,gBAAK,IACJ,GAAG,EAAE,EAAE,EACP,SAAS,EAAC,YAAY,EACtB,OAAO,EAAC,KAAK,EACb,SAAS,EAAE,EAAE,EACb,gBAAgB,EAAC,0BAA0B,aAE1C,sBAAsB,IAAI,CACzB,uBAAC,kBAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,YAC5F,oBAAoB,GACd,CACV,EACD,uBAAC,kBAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,EACjE,IAAI,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,YAE9C,kBAAkB,GACZ,IACH,IACP,CACJ,GACS,GACH,GACK,CACnB,CAAC;AACJ,CAAC","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/commonjs/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/commonjs/components/breadcrumbs/breadcrumbs.js

@@ -9,16 +9,32 @@ exports.BreadcrumbItem = BreadcrumbItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@react-aria/utils");
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const index_js_1 = require("../../icons/index.js");
+const router_provider_js_1 = require("../../providers/router/router-provider.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const link_js_1 = require("../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 = (0, utils_1.useObjectRef)(ref);
+    const router = (0, utils_1.useRouter)();
     const breadcrumbsId = (0, utils_1.useId)();
-    return ((0, jsx_runtime_1.jsx)("nav", { ...props, ref: ref, "aria-labelledby": ariaLabelledby ?? breadcrumbsId, "aria-describedby": ariaDescribedby, "aria-details": ariaDetails, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Breadcrumbs, { id: breadcrumbsId, items: items, className: (0, clsx_1.default)('cim-breadcrumbs', UNSAFE_className), style: UNSAFE_style, "aria-label": ariaLabel, children: children }) }));
+    const navigationInterceptor = (0, react_1.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 ((0, jsx_runtime_1.jsx)(router_provider_js_1.RouterProvider, { navigate: navigationInterceptor, children: (0, jsx_runtime_1.jsx)("nav", { ...props, ref: listRef, "aria-labelledby": ariaLabelledby ?? breadcrumbsId, "aria-describedby": ariaDescribedby, "aria-details": ariaDetails, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Breadcrumbs, { id: breadcrumbsId, items: items, className: (0, clsx_1.default)('cim-breadcrumbs', UNSAFE_className), style: UNSAFE_style, "aria-label": ariaLabel, children: children }) }) }));
 }
 /** Renders a single breadcrumb within `Breadcrumbs`. */
 function BreadcrumbItem({ children, UNSAFE_className, UNSAFE_style, 

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AA0Eb,wCAmCC;;AA3GD,6CAA0C;AAC1C,gDAAwB;AAExB,iEAAmG;AACnG,yDAAkD;AAClD,mDAAwD;AACxD,mEAA2D;AAW3D,mDAA6C;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,IAAA,aAAK,GAAE,CAAC;IAE9B,OAAO,CACL,mCACM,KAAK,EACT,GAAG,EAAE,GAAG,qBAES,cAAc,IAAI,aAAa,sBAC9B,eAAe,kBACnB,WAAW,YAEzB,uBAAC,mCAAc,IACb,EAAE,EAAE,aAAa,EACjB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EACpD,KAAK,EAAE,YAAY,gBACP,SAAS,YAEpB,QAAQ,GACM,GACb,CACP,CAAC;AACJ,CAAC;AASD,wDAAwD;AACxD,SAAgB,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,wBAAC,kCAAa,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACrG,uBAAC,cAAI,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,uBAAC,2BAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,IAChB,CACjB,CAAC;AACJ,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;AAEnD,mCAAW","sourcesContent":["'use client';\n\nimport { useId } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Breadcrumbs as RACBreadcrumbs, Breadcrumb as RACBreadcrumb } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronRight } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type {\n  AriaLabelingProps,\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  Key,\n  NavigationProps,\n  StringLikeChildren,\n  WithRequired,\n} from '../types.js';\nimport { Link } from '../typography/link.js';\n\nexport interface BreadcrumbsProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    CollectionProps<T>,\n    AriaLabelingProps {}\n\nfunction Breadcrumbs<T extends CollectionItem = CollectionItem>(\n  {\n    children,\n    items,\n    UNSAFE_className,\n    UNSAFE_style,\n\n    // Aria labeling props\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    'aria-details': ariaDetails,\n    ...props\n  }: BreadcrumbsProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const breadcrumbsId = useId();\n\n  return (\n    <nav\n      {...props}\n      ref={ref}\n      // RAC puts a localized `aria-label` on `Breadcrumbs`, so we refer to it unless a custom label is provided\n      aria-labelledby={ariaLabelledby ?? breadcrumbsId}\n      aria-describedby={ariaDescribedby}\n      aria-details={ariaDetails}\n    >\n      <RACBreadcrumbs\n        id={breadcrumbsId}\n        items={items}\n        className={clsx('cim-breadcrumbs', UNSAFE_className)}\n        style={UNSAFE_style}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </RACBreadcrumbs>\n    </nav>\n  );\n}\n\nexport interface BreadcrumbItemProps extends Omit<CommonProps, 'id'>, WithRequired<NavigationProps, 'href'> {\n  /** The text to display as the breadcrumb. */\n  children: StringLikeChildren;\n  /** The ID of the item. Has to be unique across all items. */\n  id?: Key;\n}\n\n/** Renders a single breadcrumb within `Breadcrumbs`. */\nexport function BreadcrumbItem({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n\n  // Navigation props\n  href,\n  hrefLang,\n  download,\n  ping,\n  referrerPolicy,\n  rel,\n  routerOptions,\n  target,\n\n  ...props\n}: BreadcrumbItemProps) {\n  return (\n    <RACBreadcrumb {...props} className={clsx('cim-breadcrumb-item', UNSAFE_className)} style={UNSAFE_style}>\n      <Link\n        variant=\"body\"\n        href={href}\n        hrefLang={hrefLang}\n        download={download}\n        ping={ping}\n        referrerPolicy={referrerPolicy}\n        rel={rel}\n        routerOptions={routerOptions}\n        target={target}\n      >\n        {children}\n      </Link>\n      <IconChevronRight size={16} />\n    </RACBreadcrumb>\n  );\n}\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\n/**\n * Displays a list of breadcrumbs to help users navigate through a website.\n *\n * See [breadcrumbs usage guidelines](https://ui.cimpress.io/components/breadcrumbs/).\n */\nconst _Breadcrumbs = withStyleProps(forwardRef(Breadcrumbs), 'Breadcrumbs');\n\nexport { _Breadcrumbs as Breadcrumbs };\n"]}
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAqGb,wCAmCC;;AAtID,6CAAmE;AACnE,gDAAwB;AACxB,iCAAuD;AACvD,iEAAmG;AACnG,yDAAkD;AAClD,mDAAwD;AACxD,kFAA2E;AAC3E,mEAA2D;AAc3D,mDAA6C;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,OAAO,GAAG,IAAA,oBAAY,EAAC,GAAG,CAAC,CAAC;IAClC,MAAM,MAAM,GAAG,IAAA,iBAAS,GAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,IAAA,aAAK,GAAE,CAAC;IAE9B,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EACvC,CAAC,IAAU,EAAE,aAA6B,EAAE,EAAE;QAC5C,uEAAuE;QACvE,qFAAqF;QAErF,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,IAAI,IAAI,CAAE,CAAC;QAClE,OAA4B,CAAC,IAAI,EAAE,CAAC;QAErC,+DAA+D;QAC/D,yHAAyH;QACzH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,aAAa,CAAC,CAAC;IAChD,CAAC,EACD,CAAC,MAAM,EAAE,OAAO,CAAC,CAClB,CAAC;IAEF,OAAO,CACL,uBAAC,mCAAc,IAAC,QAAQ,EAAE,qBAAqB,YAC7C,mCACM,KAAK,EACT,GAAG,EAAE,OAAO,qBAEK,cAAc,IAAI,aAAa,sBAC9B,eAAe,kBACnB,WAAW,YAEzB,uBAAC,mCAAc,IACb,EAAE,EAAE,aAAa,EACjB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EACpD,KAAK,EAAE,YAAY,gBACP,SAAS,YAEpB,QAAQ,GACM,GACb,GACS,CAClB,CAAC;AACJ,CAAC;AASD,wDAAwD;AACxD,SAAgB,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,wBAAC,kCAAa,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACrG,uBAAC,cAAI,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,uBAAC,2BAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,IAChB,CACjB,CAAC;AACJ,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;AAEnD,mCAAW","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/commonjs/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/commonjs/components/button/button.js

@@ -7,19 +7,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const spinner_js_1 = require("../internal/spinner/spinner.js");
 const constants_js_1 = require("./constants.js");
 function Button({ children, variant = 'secondary', tone = 'base', size = 'medium', iconStart, iconEnd, isLoading, loadingLabel, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    (0, react_1.useEffect)(() => {
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (isLoading && !loadingLabel) {
             console.warn('Button requires loadingLabel when isLoading is true for accessibility');
         }
     }, [isLoading, loadingLabel]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ...props, ref: ref, className: (0, clsx_1.default)('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 }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconStart, (0, jsx_runtime_1.jsx)("span", { className: "cim-button-text", children: children }), iconEnd, isPending && (0, jsx_runtime_1.jsx)(spinner_js_1.InternalSpinner, { size: constants_js_1.SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ...props, ref: ref, className: (0, clsx_1.default)('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 }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconStart, (0, jsx_runtime_1.jsx)("span", { className: "cim-button-text", children: children }), iconEnd, isPending && (0, jsx_runtime_1.jsx)(spinner_js_1.InternalSpinner, { size: constants_js_1.SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
 }
 /**
  * Displays a labelled button that allows users to perform an action.

package/dist/commonjs/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,gDAAwB;AACxB,iCAAqD;AACrD,iEAA4D;AAC5D,yDAAkD;AAClD,mEAA2D;AAC3D,+DAAiE;AACjE,iDAA+C;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,IAAA,iBAAS,EAAC,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,uBAAC,8BAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,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,6DACG,SAAS,EACV,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,EACP,SAAS,IAAI,uBAAC,4BAAe,IAAC,IAAI,EAAE,4BAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzC,yBAAM","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { InternalSpinner } from '../internal/spinner/spinner.js';\nimport { SPINNER_SIZES } from './constants.js';\nimport type { ActionButtonProps, BaseButtonProps, TextButtonProps } from './types.js';\n\nexport interface ButtonProps extends BaseButtonProps, TextButtonProps, ActionButtonProps {}\n\nfunction Button(\n  {\n    children,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    iconStart,\n    iconEnd,\n    isLoading,\n    loadingLabel,\n    isDisabled,\n    fullWidth,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: ButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  useEffect(() => {\n    if (isLoading && !loadingLabel) {\n      console.warn('Button requires loadingLabel when isLoading is true for accessibility');\n    }\n  }, [isLoading, loadingLabel]);\n\n  return (\n    <RACButton\n      {...props}\n      ref={ref}\n      className={clsx('cim-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth ? true : undefined}\n      isDisabled={isDisabled}\n      isPending={isLoading}\n    >\n      {({ isPending }) => (\n        <>\n          {iconStart}\n          <span className=\"cim-button-text\">{children}</span>\n          {iconEnd}\n          {isPending && <InternalSpinner size={SPINNER_SIZES[size]} aria-label={loadingLabel} />}\n        </>\n      )}\n    </RACButton>\n  );\n}\n\n/**\n * Displays a labelled button that allows users to perform an action.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _Button = withStyleProps(forwardRef(Button), 'Button');\n\nexport { _Button as Button };\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAA4D;AAC5D,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,+DAAiE;AACjE,iDAA+C;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,IAAA,gDAAoB,EAAC,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,uBAAC,8BAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,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,6DACG,SAAS,EACV,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,EACP,SAAS,IAAI,uBAAC,4BAAe,IAAC,IAAI,EAAE,4BAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzC,yBAAM","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/commonjs/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/commonjs/components/button/icon-button.js

@@ -7,19 +7,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const spinner_js_1 = require("../internal/spinner/spinner.js");
 const constants_js_1 = require("./constants.js");
 function IconButton({ icon, variant = 'secondary', tone = 'base', size = 'medium', isLoading, loadingLabel, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    (0, react_1.useEffect)(() => {
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (isLoading && !loadingLabel) {
             console.warn('IconButton requires loadingLabel when isLoading is true for accessibility');
         }
     }, [isLoading, loadingLabel]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ...props, ref: ref, className: (0, clsx_1.default)('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 }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, isPending && (0, jsx_runtime_1.jsx)(spinner_js_1.InternalSpinner, { size: constants_js_1.SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ...props, ref: ref, className: (0, clsx_1.default)('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 }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, isPending && (0, jsx_runtime_1.jsx)(spinner_js_1.InternalSpinner, { size: constants_js_1.SPINNER_SIZES[size], "aria-label": loadingLabel })] })) }));
 }
 /**
  * Displays an icon-only button that allows users to perform an action.

package/dist/commonjs/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,gDAAwB;AACxB,iCAAqD;AACrD,iEAA4D;AAC5D,yDAAkD;AAClD,mEAA2D;AAC3D,+DAAiE;AACjE,iDAA+C;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,IAAA,iBAAS,EAAC,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,uBAAC,8BAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,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,6DACG,IAAI,EACJ,SAAS,IAAI,uBAAC,4BAAe,IAAC,IAAI,EAAE,4BAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU","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,gDAAwB;AAExB,iEAA4D;AAC5D,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,+DAAiE;AACjE,iDAA+C;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,IAAA,gDAAoB,EAAC,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,uBAAC,8BAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,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,6DACG,IAAI,EACJ,SAAS,IAAI,uBAAC,4BAAe,IAAC,IAAI,EAAE,4BAAa,CAAC,IAAI,CAAC,gBAAc,YAAY,GAAI,IACrF,CACJ,GACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU","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/commonjs/components/button/icon-link-button.js

@@ -11,7 +11,7 @@ const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 function IconLinkButton({ icon, variant = 'secondary', tone = 'base', size = 'medium', isDisabled = false, fullWidth = false, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Link, { ...props, ref: ref, className: (0, clsx_1.default)('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 ((0, jsx_runtime_1.jsx)(react_aria_components_1.Link, { ...props, ref: ref, className: (0, clsx_1.default)('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/commonjs/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,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;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,uBAAC,4BAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,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,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAEzD,yCAAc","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,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;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,uBAAC,4BAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,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,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAEzD,yCAAc","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/commonjs/components/button/link-button.js

@@ -11,7 +11,7 @@ const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const with_style_props_js_1 = require("../../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 ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { ...props, ref: ref, className: (0, clsx_1.default)('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, (0, jsx_runtime_1.jsx)("span", { className: "cim-button-text", children: children }), iconEnd] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { ...props, ref: ref, className: (0, clsx_1.default)('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, (0, jsx_runtime_1.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/commonjs/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,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;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,wBAAC,4BAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,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,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,IACA,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport type { BaseButtonProps, TextButtonProps } from './types.js';\n\nexport interface LinkButtonProps\n  extends Omit<BaseButtonProps, 'id'>,\n    TextButtonProps,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {}\n\nfunction LinkButton(\n  {\n    children,\n    variant = 'secondary',\n    tone = 'base',\n    size = 'medium',\n    iconStart,\n    iconEnd,\n    isDisabled = false,\n    fullWidth = false,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: LinkButtonProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <RACLink\n      {...props}\n      ref={ref}\n      className={clsx('cim-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-full-width={fullWidth ? true : undefined}\n      isDisabled={isDisabled}\n    >\n      {iconStart}\n      <span className=\"cim-button-text\">{children}</span>\n      {iconEnd}\n    </RACLink>\n  );\n}\n\n/**\n * Displays a labelled button that allows users to navigate to another page or resource.\n *\n * See [button usage guidelines](https://ui.cimpress.io/components/button/).\n */\nconst _LinkButton = withStyleProps(forwardRef(LinkButton), 'LinkButton');\n\nexport { _LinkButton as LinkButton };\n"]}
+{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../../src/components/button/link-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;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,wBAAC,4BAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,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,iCAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,IACA,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU","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/commonjs/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 { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\n\n/**\n * Props available on all buttons.\n */\nexport interface BaseButtonProps extends CommonProps {\n  /**\n   * Determines the visual appearance of the button.\n   * @default 'secondary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary';\n  /**\n   * Determines the color tone of the button.\n   * @default 'base'\n   */\n  tone?: 'base' | 'critical';\n  /**\n   * The size of the button.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Whether the button should take up the whole available width.\n   *\n   * @default false\n   */\n  fullWidth?: boolean;\n}\n\n/**\n * Props available on buttons containing text.\n */\nexport interface TextButtonProps extends AriaLabelingProps {\n  /** The text displayed on the button. */\n  children: StringLikeChildren;\n  /** An icon displayed before the button text. */\n  iconStart?: ReactNode;\n  /** An icon displayed after the button text. */\n  iconEnd?: ReactNode;\n}\n\n/**\n * Props available on buttons containing a single icon.\n */\nexport interface SingleIconButtonProps extends Omit<AriaLabelingProps, 'aria-label'> {\n  /** The icon displayed on the button. */\n  icon: ReactNode;\n  /** The label describing the function of this button for assistive technologies. */\n  'aria-label': string;\n}\n\n/**\n * Props available on buttons that perform an action (non-navigational).\n */\nexport interface ActionButtonProps\n  extends Pick<\n    RACButtonProps,\n    'form' | 'name' | 'value' | 'onPress' | 'type' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n  > {\n  /**\n   * Whether the button is in a loading state.\n   * This disables the button and replaces its contents with a spinner.\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * A string that identifies the loading state to assistive technologies.\n   * It will be announced by screen readers together with the button label.\n   * You must provide this prop if `isLoading` is `true`.\n   */\n  loadingLabel?: string;\n  /**\n   * A slot name for the component. Slots allow the component to receive props from a parent component.\n   * An explicit null value indicates that the local props completely override all props received from a parent.\n   *\n   * @internal\n   */\n  slot?: string;\n}\n"]}
+{"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/commonjs/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/commonjs/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/commonjs/components/callout/callout.js

@@ -0,0 +1,46 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Callout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const index_js_1 = require("../../i18n/index.js");
+const index_js_2 = require("../../icons/index.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+const x_button_js_1 = require("../internal/x-button/x-button.js");
+const stack_js_1 = require("../spacing/stack/stack.js");
+const text_js_1 = require("../typography/text.js");
+const iconMap = {
+    info: index_js_2.IconInfoCircle,
+    success: index_js_2.IconCheckCircle,
+    warning: index_js_2.IconWarning,
+    critical: index_js_2.IconWarningCircleFill,
+};
+function Callout({ UNSAFE_className, UNSAFE_style, tone, title, children, actions, isDismissible = false, onDismiss, ...props }, ref) {
+    const Icon = iconMap[tone];
+    const messages = (0, index_js_1.useLocalizedMessages)('common');
+    const [isDismissed, setIsDismissed] = (0, react_1.useState)(false);
+    function handleDismiss() {
+        if (onDismiss == null) {
+            setIsDismissed(true);
+        }
+        onDismiss?.();
+    }
+    if (isDismissed) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, clsx_1.default)('cim-callout', UNSAFE_className), style: UNSAFE_style, "data-tone": tone, children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-callout-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 24, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-callout-content", children: [title && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h3", UNSAFE_className: "cim-callout-title", variant: "title-6", tone: "base", children: title })), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "div", UNSAFE_className: "cim-callout-text", variant: "medium", tone: "base", children: children }), actions && ((0, jsx_runtime_1.jsx)(stack_js_1.Stack, { gap: 8, direction: "horizontal", wrap: true, UNSAFE_className: "cim-callout-actions", children: actions }))] }), (isDismissible || onDismiss != null) && ((0, jsx_runtime_1.jsx)("div", { className: "cim-callout-close", children: (0, jsx_runtime_1.jsx)(x_button_js_1.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 = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Callout), 'Callout');
+exports.Callout = _Callout;
+//# sourceMappingURL=callout.js.map

package/dist/commonjs/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,gDAAwB;AACxB,iCAA8E;AAC9E,yDAAkD;AAClD,kDAA2D;AAC3D,mDAA2G;AAC3G,mEAA2D;AAC3D,kEAA2D;AAC3D,wDAAkD;AAElD,mDAA6C;AAE7C,MAAM,OAAO,GAAoE;IAC/E,IAAI,EAAE,yBAAc;IACpB,OAAO,EAAE,0BAAe;IACxB,OAAO,EAAE,sBAAW;IACpB,QAAQ,EAAE,gCAAqB;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,IAAA,+BAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,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,oCAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,aAC9G,gCAAK,SAAS,EAAC,kBAAkB,YAC/B,uBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,wBAAgB,GAC1B,EACN,iCAAK,SAAS,EAAC,qBAAqB,aACjC,KAAK,IAAI,CACR,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,gBAAgB,EAAC,mBAAmB,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC7E,KAAK,GACD,CACR,EACD,uBAAC,cAAI,IAAC,EAAE,EAAC,KAAK,EAAC,gBAAgB,EAAC,kBAAkB,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YAC5E,QAAQ,GACJ,EACN,OAAO,IAAI,CACV,uBAAC,gBAAK,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,gCAAK,SAAS,EAAC,mBAAmB,YAChC,uBAAC,qBAAO,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,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAE3C,2BAAO","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"]}