@cimpress-ui/react 0.3.0 → 1.0.0

package/dist/esm/components/disclosure/disclosure.js

@@ -1,19 +1,30 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
+import { useContext } from 'react';
 import { Disclosure as RACDisclosure, Button as RACButton, Heading as RACHeading, DisclosurePanel as RACDisclosurePanel, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
-import { IconChevronExpand } from '../../icons/index.js';
+import { IconChevronRight, IconChevronRightBold } from '../../icons/index.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { Text } from '../typography/text.js';
-function UNSTABLE_Disclosure({ children, title, actions, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return (_jsxs(RACDisclosure, { ...props, ref: ref, className: clsx('cim-disclosure', UNSAFE_className), style: UNSAFE_style, children: [_jsxs("div", { className: "cim-disclosure-heading-wrapper", children: [_jsx(RACHeading, { className: "cim-disclosure-heading", children: _jsxs(RACButton, { className: "cim-disclosure-button", slot: "trigger", children: [_jsx(IconChevronExpand, { size: 24, UNSAFE_className: "cim-disclosure-icon" }), _jsx(Text, { as: "span", variant: "body-semibold", children: title })] }) }), actions && _jsx("div", { className: "cim-disclosure-actions", children: actions })] }), _jsx(RACDisclosurePanel, { className: "cim-disclosure-panel", children: _jsx("div", { className: "cim-disclosure-panel-content", children: children }) })] }));
+import { DisclosureContext } from './context.js';
+const iconMap = {
+    medium: IconChevronRight,
+    small: IconChevronRightBold,
+};
+function Disclosure({ children, variant: ownVariant = 'base', size: ownSize = 'medium', title, iconStart, iconEnd, badge, actions, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const disclosureContext = useContext(DisclosureContext);
+    const variant = disclosureContext?.variant ?? ownVariant;
+    const size = disclosureContext?.size ?? ownSize;
+    const isMediumSize = size === 'medium';
+    const Icon = iconMap[size];
+    return (_jsxs(RACDisclosure, { ...props, ref: ref, className: clsx('cim-disclosure', UNSAFE_className), style: UNSAFE_style, "data-variant": variant, "data-size": size, children: [_jsxs("div", { className: "cim-disclosure-heading-wrapper", children: [_jsx(RACHeading, { className: "cim-disclosure-heading", children: _jsxs(RACButton, { className: "cim-disclosure-button", slot: "trigger", children: [_jsx(Icon, { size: isMediumSize ? 32 : 16, UNSAFE_className: "cim-disclosure-icon" }), isMediumSize && iconStart, _jsx(Text, { as: "h3", variant: isMediumSize ? 'body' : 'medium', children: title }), isMediumSize && iconEnd, isMediumSize && badge && _jsx("div", { className: "cim-disclosure-badge", children: badge })] }) }), actions && _jsx("div", { className: "cim-disclosure-actions", children: actions })] }), _jsx(RACDisclosurePanel, { className: "cim-disclosure-panel", children: _jsx("div", { className: "cim-disclosure-panel-content", children: _jsx(DisclosureContext.Provider, { value: null, children: children }) }) })] }));
 }
 /**
  * Displays a collapsible section of content.
  *
  * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).
  */
-const _Disclosure = withStyleProps(forwardRef(UNSTABLE_Disclosure), 'Disclosure');
-export { _Disclosure as UNSTABLE_Disclosure };
+const _Disclosure = withStyleProps(forwardRef(Disclosure), 'Disclosure');
+export { _Disclosure as Disclosure };
 //# sourceMappingURL=disclosure.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"disclosure.js","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,UAAU,IAAI,aAAa,EAC3B,MAAM,IAAI,SAAS,EACnB,OAAO,IAAI,UAAU,EACrB,eAAe,IAAI,kBAAkB,GAEtC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAa7C,SAAS,mBAAmB,CAC1B,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA4B,EAChG,GAAiC;IAEjC,OAAO,CACL,MAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC1G,eAAK,SAAS,EAAC,gCAAgC,aAC7C,KAAC,UAAU,IAAC,SAAS,EAAC,wBAAwB,YAC5C,MAAC,SAAS,IAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,SAAS,aACzD,KAAC,iBAAiB,IAAC,IAAI,EAAE,EAAE,EAAE,gBAAgB,EAAC,qBAAqB,GAAG,EACtE,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,eAAe,YACpC,KAAK,GACD,IACG,GACD,EACZ,OAAO,IAAI,cAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,GAAO,IAC/D,EACN,KAAC,kBAAkB,IAAC,SAAS,EAAC,sBAAsB,YAClD,cAAK,SAAS,EAAC,8BAA8B,YAAE,QAAQ,GAAO,GAC3C,IACP,CACjB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,YAAY,CAAC,CAAC;AAElF,OAAO,EAAE,WAAW,IAAI,mBAAmB,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  Disclosure as RACDisclosure,\n  Button as RACButton,\n  Heading as RACHeading,\n  DisclosurePanel as RACDisclosurePanel,\n  type DisclosureProps as RACDisclosureProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronExpand } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface UNSTABLE_DisclosureProps\n  extends Omit<CommonProps, 'id'>,\n    Pick<RACDisclosureProps, 'id' | 'isDisabled' | 'defaultExpanded' | 'isExpanded' | 'onExpandedChange'> {\n  /** The content to display when the disclosure is expanded. */\n  children: ReactNode;\n  /** The title that is always visible in the disclosure header. */\n  title: string;\n  /** The actions displayed in the disclosure header. */\n  actions?: ReactNode;\n}\n\nfunction UNSTABLE_Disclosure(\n  { children, title, actions, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_DisclosureProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACDisclosure {...props} ref={ref} className={clsx('cim-disclosure', UNSAFE_className)} style={UNSAFE_style}>\n      <div className=\"cim-disclosure-heading-wrapper\">\n        <RACHeading className=\"cim-disclosure-heading\">\n          <RACButton className=\"cim-disclosure-button\" slot=\"trigger\">\n            <IconChevronExpand size={24} UNSAFE_className=\"cim-disclosure-icon\" />\n            <Text as=\"span\" variant=\"body-semibold\">\n              {title}\n            </Text>\n          </RACButton>\n        </RACHeading>\n        {actions && <div className=\"cim-disclosure-actions\">{actions}</div>}\n      </div>\n      <RACDisclosurePanel className=\"cim-disclosure-panel\">\n        <div className=\"cim-disclosure-panel-content\">{children}</div>\n      </RACDisclosurePanel>\n    </RACDisclosure>\n  );\n}\n\n/**\n * Displays a collapsible section of content.\n *\n * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).\n */\nconst _Disclosure = withStyleProps(forwardRef(UNSTABLE_Disclosure), 'Disclosure');\n\nexport { _Disclosure as UNSTABLE_Disclosure };\n"]}
+{"version":3,"file":"disclosure.js","sourceRoot":"","sources":["../../../../src/components/disclosure/disclosure.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAY,UAAU,EAAqC,MAAM,OAAO,CAAC;AAChF,OAAO,EACL,UAAU,IAAI,aAAa,EAC3B,MAAM,IAAI,SAAS,EACnB,OAAO,IAAI,UAAU,EACrB,eAAe,IAAI,kBAAkB,GAEtC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAA+C,MAAM,cAAc,CAAC;AAE9F,MAAM,OAAO,GAA8D;IACzE,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE,oBAAoB;CAC5B,CAAC;AA2CF,SAAS,UAAU,CACjB,EACE,QAAQ,EACR,OAAO,EAAE,UAAU,GAAG,MAAM,EAC5B,IAAI,EAAE,OAAO,GAAG,QAAQ,EACxB,KAAK,EACL,SAAS,EACT,OAAO,EACP,KAAK,EACL,OAAO,EACP,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACQ,EAClB,GAAiC;IAEjC,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,iBAAiB,EAAE,OAAO,IAAI,UAAU,CAAC;IACzD,MAAM,IAAI,GAAG,iBAAiB,EAAE,IAAI,IAAI,OAAO,CAAC;IAChD,MAAM,YAAY,GAAG,IAAI,KAAK,QAAQ,CAAC;IAEvC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE3B,OAAO,CACL,MAAC,aAAa,OACR,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EACnD,KAAK,EAAE,YAAY,kBACL,OAAO,eACV,IAAI,aAEf,eAAK,SAAS,EAAC,gCAAgC,aAC7C,KAAC,UAAU,IAAC,SAAS,EAAC,wBAAwB,YAC5C,MAAC,SAAS,IAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,SAAS,aACzD,KAAC,IAAI,IAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,gBAAgB,EAAC,qBAAqB,GAAG,EAE5E,YAAY,IAAI,SAAS,EAC1B,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,YACpD,KAAK,GACD,EACN,YAAY,IAAI,OAAO,EAEvB,YAAY,IAAI,KAAK,IAAI,cAAK,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAO,IACnE,GACD,EAEZ,OAAO,IAAI,cAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,GAAO,IAC/D,EAEN,KAAC,kBAAkB,IAAC,SAAS,EAAC,sBAAsB,YAClD,cAAK,SAAS,EAAC,8BAA8B,YAE3C,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YAAG,QAAQ,GAA8B,GAC5E,GACa,IACP,CACjB,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 JSX, useContext, type ForwardedRef, type ReactNode } from 'react';\nimport {\n  Disclosure as RACDisclosure,\n  Button as RACButton,\n  Heading as RACHeading,\n  DisclosurePanel as RACDisclosurePanel,\n  type DisclosureProps as RACDisclosureProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronRight, IconChevronRightBold } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, IconProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { DisclosureContext, type DisclosureSize, type DisclosureVariant } from './context.js';\n\nconst iconMap: Record<DisclosureSize, (props: IconProps) => JSX.Element> = {\n  medium: IconChevronRight,\n  small: IconChevronRightBold,\n};\n\nexport interface DisclosureProps\n  extends Omit<CommonProps, 'id'>,\n    Pick<RACDisclosureProps, 'id' | 'isDisabled' | 'defaultExpanded' | 'isExpanded' | 'onExpandedChange'> {\n  /** The content to display when the disclosure is expanded. */\n  children: ReactNode;\n  /**\n   * Determines the visual appearance of the disclosure.\n   * If the disclosure is part of a group, this prop has no effect - provide `variant` to `DisclosureGroup` instead.\n   * @default 'base'\n   */\n  variant?: DisclosureVariant;\n  /**\n   * Determines the size of the disclosure.\n   * If the disclosure is part of a group, this prop has no effect - provide `size` to `DisclosureGroup` instead.\n   * @default 'medium'\n   */\n  size?: DisclosureSize;\n  /** The title that is always visible in the disclosure header. */\n  title: string;\n  /**\n   * An icon displayed before the disclosure title.\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   * An icon displayed after the disclosure title.\n   *\n   * Should not be used when size is set to `'small'` as icons won't be displayed at this size.\n   */\n  iconEnd?: ReactNode;\n  /**\n   * The badge displayed in the disclosure header.\n   *\n   * Should not be used when size is set to `'small'` as the badge won't be displayed at this size.\n   */\n  badge?: ReactNode;\n  /** The actions displayed in the disclosure header. */\n  actions?: ReactNode;\n}\n\nfunction Disclosure(\n  {\n    children,\n    variant: ownVariant = 'base',\n    size: ownSize = 'medium',\n    title,\n    iconStart,\n    iconEnd,\n    badge,\n    actions,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: DisclosureProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const disclosureContext = useContext(DisclosureContext);\n  const variant = disclosureContext?.variant ?? ownVariant;\n  const size = disclosureContext?.size ?? ownSize;\n  const isMediumSize = size === 'medium';\n\n  const Icon = iconMap[size];\n\n  return (\n    <RACDisclosure\n      {...props}\n      ref={ref}\n      className={clsx('cim-disclosure', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n      data-size={size}\n    >\n      <div className=\"cim-disclosure-heading-wrapper\">\n        <RACHeading className=\"cim-disclosure-heading\">\n          <RACButton className=\"cim-disclosure-button\" slot=\"trigger\">\n            <Icon size={isMediumSize ? 32 : 16} UNSAFE_className=\"cim-disclosure-icon\" />\n\n            {isMediumSize && iconStart}\n            <Text as=\"h3\" variant={isMediumSize ? 'body' : 'medium'}>\n              {title}\n            </Text>\n            {isMediumSize && iconEnd}\n\n            {isMediumSize && badge && <div className=\"cim-disclosure-badge\">{badge}</div>}\n          </RACButton>\n        </RACHeading>\n\n        {actions && <div className=\"cim-disclosure-actions\">{actions}</div>}\n      </div>\n\n      <RACDisclosurePanel className=\"cim-disclosure-panel\">\n        <div className=\"cim-disclosure-panel-content\">\n          {/* Reset disclosure context to allow nesting disclosures */}\n          <DisclosureContext.Provider value={null}>{children}</DisclosureContext.Provider>\n        </div>\n      </RACDisclosurePanel>\n    </RACDisclosure>\n  );\n}\n\n/**\n * Displays a collapsible section of content.\n *\n * See [disclosure usage guidelines](https://ui.cimpress.io/components/disclosure/).\n */\nconst _Disclosure = withStyleProps(forwardRef(Disclosure), 'Disclosure');\n\nexport { _Disclosure as Disclosure };\n"]}

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

@@ -0,0 +1,12 @@
+import type { CommonProps } from '../types.js';
+export interface DividerProps extends CommonProps {
+    /**
+     * The orientation of the divider (horizontal or vertical).
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+/** Renders a divider between adjacent content. */
+declare const _Divider: (props: DividerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Divider as Divider };
+//# sourceMappingURL=divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAkBD,kDAAkD;AAClD,QAAA,MAAM,QAAQ,8JAAiD,CAAC;AAEhE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}

package/dist/esm/components/divider/divider.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Separator as RACSeparator } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+function Divider({ orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsx(RACSeparator, { ...props, ref: ref, className: clsx('cim-divider', UNSAFE_className), style: UNSAFE_style, elementType: "div", orientation: orientation }));
+}
+/** Renders a divider between adjacent content. */
+const _Divider = withStyleProps(forwardRef(Divider), 'Divider');
+export { _Divider as Divider };
+//# sourceMappingURL=divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAW3D,SAAS,OAAO,CACd,EAAE,WAAW,GAAG,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EACtF,GAAiC;IAEjC,OAAO,CACL,KAAC,YAAY,OACP,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,EACnB,WAAW,EAAC,KAAK,EACjB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC;AAED,kDAAkD;AAClD,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 { ForwardedRef } from 'react';\nimport { Separator as RACSeparator } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface DividerProps extends CommonProps {\n  /**\n   * The orientation of the divider (horizontal or vertical).\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nfunction Divider(\n  { orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }: DividerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACSeparator\n      {...props}\n      ref={ref}\n      className={clsx('cim-divider', UNSAFE_className)}\n      style={UNSAFE_style}\n      elementType=\"div\"\n      orientation={orientation}\n    />\n  );\n}\n\n/** Renders a divider between adjacent content. */\nconst _Divider = withStyleProps(forwardRef(Divider), 'Divider');\n\nexport { _Divider as Divider };\n"]}

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

@@ -0,0 +1,81 @@
+import { type ReactNode } from 'react';
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+export interface UNSTABLE_DrawerRootProps {
+    /** The drawer trigger with its associated drawer. Provide the trigger as the first child, and the drawer as the second child. */
+    children: ReactNode;
+    /** Whether the drawer is open (controlled). */
+    isOpen?: boolean;
+    /** Whether the drawer is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the drawer's open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Encapsulates a drawer trigger and its associated drawer.
+ * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.
+ */
+export declare function UNSTABLE_DrawerRoot(props: UNSTABLE_DrawerRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_DrawerRoot {
+    var displayName: string;
+}
+export interface UNSTABLE_DrawerRenderProps {
+    /** Closes the drawer when called. */
+    close: () => void;
+}
+export interface UNSTABLE_DrawerProps extends CommonProps, AriaLabelingProps {
+    /** The contents of the drawer. A function may be provided to access a function to close the drawer. */
+    children: ReactNode | ((renderProps: UNSTABLE_DrawerRenderProps) => ReactNode);
+    /** The title of the drawer. */
+    title?: string;
+    /**
+     * The size of the drawer. This prop is ignored on small devices - drawers on small devices will always take up all available width.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether to close the drawer when the user interacts outside of it or presses the Escape key.
+     * @default true
+     */
+    isDismissible?: boolean;
+    /**
+     * Whether the drawer is open (controlled).
+     * If using `DrawerRoot`, this prop has no effect - provide `isOpen` to `DrawerRoot` instead.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the drawer is open by default (uncontrolled).
+     * If using `DrawerRoot`, this prop has no effect - provide `defaultOpen` to `DrawerRoot` instead.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Handler that is called when the drawer's open state changes.
+     * If using `DrawerRoot`, this prop has no effect - provide `onOpenChange` to `DrawerRoot` instead.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Displays an overlay element which blocks interaction with outside elements.
+ *
+ * See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).
+ */
+declare const _UNSTABLE_Drawer: (props: UNSTABLE_DrawerProps & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;
+export { _UNSTABLE_Drawer as UNSTABLE_Drawer };
+export interface UNSTABLE_DrawerBodyProps {
+    /** The content to render within the drawer. */
+    children: ReactNode;
+}
+/** Renders content within `Drawer`. */
+export declare function UNSTABLE_DrawerBody(props: UNSTABLE_DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_DrawerBody {
+    var displayName: string;
+}
+export interface UNSTABLE_DrawerActionsProps {
+    /** Actions that should be available in the drawer. */
+    children: ReactNode;
+}
+/** Renders actions within `Drawer`. */
+export declare function UNSTABLE_DrawerActions({ children, ...props }: UNSTABLE_DrawerActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_DrawerActions {
+    var displayName: string;
+}
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAcpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,wBAAwB;IACvC,iIAAiI;IACjI,QAAQ,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAElE;yBAFe,mBAAmB;;;AAMnC,MAAM,WAAW,0BAA0B;IACzC,qCAAqC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,oBAAqB,SAAQ,WAAW,EAAE,iBAAiB;IAC1E,uGAAuG;IACvG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,0BAA0B,KAAK,SAAS,CAAC,CAAC;IAC/E,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;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;CAC1C;AA6DD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,kHAAwC,CAAC;AAE/D,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC;AAE/C,MAAM,WAAW,wBAAwB;IACvC,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAElE;yBAFe,mBAAmB;;;AAMnC,MAAM,WAAW,2BAA2B;IAC1C,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,2CASzF;yBATe,sBAAsB"}

package/dist/esm/components/drawer/drawer.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Children } from 'react';
+import { Dialog as RACDialog, DialogTrigger as RACDialogTrigger, Heading as RACHeading, Modal as RACModal, ModalOverlay as RACModalOverlay, } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { useLocalizedMessages } from '../../i18n/index.js';
+import { useMediaQuery } from '../../utils/use-media-query.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
+import { FocusableContainer } from '../internal/focusable-container/focusable-container.js';
+import { XButton } from '../internal/x-button/x-button.js';
+import { textStyle } from '../typography/utils.js';
+/**
+ * Encapsulates a drawer trigger and its associated drawer.
+ * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.
+ */
+export function UNSTABLE_DrawerRoot(props) {
+    return _jsx(RACDialogTrigger, { ...props });
+}
+UNSTABLE_DrawerRoot.displayName = 'DrawerRoot';
+function UNSTABLE_Drawer({ children, title, size = 'medium', UNSAFE_className, UNSAFE_style, isDismissible = true, isOpen, defaultOpen, onOpenChange, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useProductionWarning(() => {
+        if (!title && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Drawer requires one of title / aria-label / aria-labelledby for accessibility');
+        }
+    }, [title, ariaLabel, ariaLabelledBy]);
+    const messages = useLocalizedMessages('common');
+    return (_jsx(RACModalOverlay, { className: "cim-drawer-overlay", isDismissable: isDismissible, isKeyboardDismissDisabled: !isDismissible, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: _jsx(RACModal, { className: clsx('cim-drawer', UNSAFE_className), style: UNSAFE_style, "data-size": size, children: _jsx(RACDialog, { ...props, ref: ref, className: "cim-drawer-dialog", children: (renderProps) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cim-drawer-header", children: [title && (_jsx(RACHeading, { slot: "title", className: clsx('cim-drawer-title', textStyle({ variant: 'title-5', tone: 'base' })), children: title })), _jsx(XButton, { "aria-label": messages.format('dismiss'), slot: "close" })] }), typeof children === 'function' ? children(renderProps) : children] })) }) }) }));
+}
+/**
+ * Displays an overlay element which blocks interaction with outside elements.
+ *
+ * See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).
+ */
+const _UNSTABLE_Drawer = forwardRef(UNSTABLE_Drawer, 'Drawer');
+export { _UNSTABLE_Drawer as UNSTABLE_Drawer };
+/** Renders content within `Drawer`. */
+export function UNSTABLE_DrawerBody(props) {
+    return _jsx(FocusableContainer, { ...props, className: "cim-drawer-body", scrollDirection: "vertical" });
+}
+UNSTABLE_DrawerBody.displayName = 'DrawerBody';
+/** Renders actions within `Drawer`. */
+export function UNSTABLE_DrawerActions({ children, ...props }) {
+    const matches = useMediaQuery('(min-width: 640px)');
+    const componentChildren = matches ? children : Children.toArray(children).reverse();
+    return (_jsx("div", { ...props, className: "cim-drawer-actions", children: componentChildren }));
+}
+UNSTABLE_DrawerActions.displayName = 'DrawerActions';
+//# sourceMappingURL=drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, type ForwardedRef, type ReactNode } from 'react';\nimport {\n  Dialog as RACDialog,\n  DialogTrigger as RACDialogTrigger,\n  Heading as RACHeading,\n  Modal as RACModal,\n  ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useMediaQuery } from '../../utils/use-media-query.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface UNSTABLE_DrawerRootProps {\n  /** The drawer trigger with its associated drawer. Provide the trigger as the first child, and the drawer as the second child. */\n  children: ReactNode;\n  /** Whether the drawer is open (controlled). */\n  isOpen?: boolean;\n  /** Whether the drawer is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the drawer's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a drawer trigger and its associated drawer.\n * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.\n */\nexport function UNSTABLE_DrawerRoot(props: UNSTABLE_DrawerRootProps) {\n  return <RACDialogTrigger {...props} />;\n}\n\nUNSTABLE_DrawerRoot.displayName = 'DrawerRoot';\n\nexport interface UNSTABLE_DrawerRenderProps {\n  /** Closes the drawer when called. */\n  close: () => void;\n}\n\nexport interface UNSTABLE_DrawerProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the drawer. A function may be provided to access a function to close the drawer. */\n  children: ReactNode | ((renderProps: UNSTABLE_DrawerRenderProps) => ReactNode);\n  /** The title of the drawer. */\n  title?: string;\n  /**\n   * The size of the drawer. This prop is ignored on small devices - drawers on small devices will always take up all available width.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Whether to close the drawer when the user interacts outside of it or presses the Escape key.\n   * @default true\n   */\n  isDismissible?: boolean;\n  /**\n   * Whether the drawer is open (controlled).\n   * If using `DrawerRoot`, this prop has no effect - provide `isOpen` to `DrawerRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the drawer is open by default (uncontrolled).\n   * If using `DrawerRoot`, this prop has no effect - provide `defaultOpen` to `DrawerRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the drawer's open state changes.\n   * If using `DrawerRoot`, this prop has no effect - provide `onOpenChange` to `DrawerRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nfunction UNSTABLE_Drawer(\n  {\n    children,\n    title,\n    size = 'medium',\n    UNSAFE_className,\n    UNSAFE_style,\n    isDismissible = true,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    ...props\n  }: UNSTABLE_DrawerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!title && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Drawer requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('common');\n\n  return (\n    <RACModalOverlay\n      className=\"cim-drawer-overlay\"\n      isDismissable={isDismissible}\n      isKeyboardDismissDisabled={!isDismissible}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      data-cim-style-root\n    >\n      <RACModal className={clsx('cim-drawer', UNSAFE_className)} style={UNSAFE_style} data-size={size}>\n        <RACDialog {...props} ref={ref} className=\"cim-drawer-dialog\">\n          {(renderProps) => (\n            <>\n              <div className=\"cim-drawer-header\">\n                {title && (\n                  <RACHeading\n                    slot=\"title\"\n                    className={clsx('cim-drawer-title', textStyle({ variant: 'title-5', tone: 'base' }))}\n                  >\n                    {title}\n                  </RACHeading>\n                )}\n                <XButton aria-label={messages.format('dismiss')} slot=\"close\" />\n              </div>\n              {typeof children === 'function' ? children(renderProps) : children}\n            </>\n          )}\n        </RACDialog>\n      </RACModal>\n    </RACModalOverlay>\n  );\n}\n\n/**\n * Displays an overlay element which blocks interaction with outside elements.\n *\n * See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).\n */\nconst _UNSTABLE_Drawer = forwardRef(UNSTABLE_Drawer, 'Drawer');\n\nexport { _UNSTABLE_Drawer as UNSTABLE_Drawer };\n\nexport interface UNSTABLE_DrawerBodyProps {\n  /** The content to render within the drawer. */\n  children: ReactNode;\n}\n\n/** Renders content within `Drawer`. */\nexport function UNSTABLE_DrawerBody(props: UNSTABLE_DrawerBodyProps) {\n  return <FocusableContainer {...props} className=\"cim-drawer-body\" scrollDirection=\"vertical\" />;\n}\n\nUNSTABLE_DrawerBody.displayName = 'DrawerBody';\n\nexport interface UNSTABLE_DrawerActionsProps {\n  /** Actions that should be available in the drawer. */\n  children: ReactNode;\n}\n\n/** Renders actions within `Drawer`. */\nexport function UNSTABLE_DrawerActions({ children, ...props }: UNSTABLE_DrawerActionsProps) {\n  const matches = useMediaQuery('(min-width: 640px)');\n  const componentChildren = matches ? children : Children.toArray(children).reverse();\n\n  return (\n    <div {...props} className=\"cim-drawer-actions\">\n      {componentChildren}\n    </div>\n  );\n}\n\nUNSTABLE_DrawerActions.displayName = 'DrawerActions';\n"]}

package/dist/esm/components/file-picker/file-picker.d.ts

@@ -0,0 +1,19 @@
+import { type FileTriggerProps as RACFileTriggerProps } from 'react-aria-components';
+import type { CommonProps, FieldProps } from '../types.js';
+export interface UNSTABLE_FilePickerProps extends CommonProps, Omit<FieldProps<File[]>, 'aria-label'>, Pick<RACFileTriggerProps, 'acceptedFileTypes' | 'allowsMultiple' | 'acceptDirectory' | 'defaultCamera'> {
+    /** Whether the field is disabled. */
+    isDisabled?: boolean;
+    /** Whether the field is required. */
+    isRequired?: boolean;
+    /** Whether the field is invalid. */
+    isInvalid?: boolean;
+    /** The allowed file types that can be selected. */
+    acceptedFileTypes?: string[];
+    /** Whether multiple files can be selected. */
+    allowsMultiple?: boolean;
+    /** Handler called when files are selected. */
+    onSelect?: (files: File[] | null) => void;
+}
+declare const _UNSTABLE_FilePicker: (props: UNSTABLE_FilePickerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_FilePicker as UNSTABLE_FilePicker };
+//# sourceMappingURL=file-picker.d.ts.map

package/dist/esm/components/file-picker/file-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/file-picker/file-picker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAI7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI3D,MAAM,WAAW,wBACf,SAAQ,WAAW,EACjB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,EACtC,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,eAAe,CAAC;IACzG,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAmID,QAAA,MAAM,oBAAoB,0KAAgE,CAAC;AAE3F,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}

package/dist/esm/components/file-picker/file-picker.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormValidation } from '@react-aria/form';
+import { useFormReset, useId, useSlotId } from '@react-aria/utils';
+import { useFormValidationState } from '@react-stately/form';
+import clsx from 'clsx';
+import { useRef, useState } from 'react';
+import { FieldErrorContext as RACFieldErrorContext, FileTrigger as RACFileTrigger, LabelContext as RACLabelContext, Provider as RACProvider, TextContext as RACTextContext, } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { useLocalizedMessages } from '../../i18n/index.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { Button } from '../button/button.js';
+import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
+import { Text } from '../typography/text.js';
+import { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';
+function UNSTABLE_FilePicker({ id, label, description, isDisabled, isRequired, isInvalid, onSelect, acceptedFileTypes, allowsMultiple, acceptDirectory, defaultCamera, error, name, validate, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const buttonId = useId(id);
+    const labelId = useId();
+    const fileTextId = useId();
+    const [files, setFiles] = useState(null);
+    const fileInputRef = useRef(null);
+    const handleSelect = (files) => {
+        // Commit validation to clear any previous validation errors when new files are selected
+        validationState.commitValidation();
+        const filesArray = files?.length ? Array.from(files) : null;
+        setFiles(filesArray);
+        onSelect?.(filesArray);
+        if (fileInputRef.current) {
+            fileInputRef.current.files = files;
+        }
+    };
+    const labelMessages = useLocalizedMessages('label');
+    const messages = useLocalizedMessages('filePicker');
+    const labelText = files?.length != null
+        ? files.length === 1
+            ? files[0]?.name
+            : messages.format('multipleFilesSelected', { fileCount: files.length })
+        : messages.format('noFilesSelected', { allowsMultiple: allowsMultiple ?? false });
+    const validationBehavior = 'native';
+    const validationState = useFormValidationState({
+        value: files,
+        isInvalid,
+        isRequired,
+        name,
+        validate,
+        validationBehavior,
+    });
+    useFormValidation({ isInvalid, isRequired, validate, validationBehavior }, validationState, fileInputRef);
+    useFormReset(fileInputRef, files, setFiles);
+    const descriptionId = useSlotId([Boolean(description)]);
+    const errorMessageId = useSlotId([
+        Boolean(error || validationState.displayValidation.validationErrors),
+        validationState.displayValidation.isInvalid,
+    ]);
+    return (_jsxs(RACProvider, { values: [
+            [RACLabelContext, label != null ? { id: labelId, htmlFor: buttonId } : {}],
+            [RACTextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],
+            [RACFieldErrorContext, validationState.displayValidation],
+        ], children: [_jsxs("div", { ...props, className: clsx('cim-file-picker', UNSAFE_className), style: UNSAFE_style, ref: ref, children: [label && (_jsxs(FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: [label, isRequired && _jsx(UNSTABLE_VisuallyHidden, { children: labelMessages.format('required') })] })), _jsxs("div", { className: "cim-file-picker-button-container", children: [_jsx(RACFileTrigger, { onSelect: handleSelect, acceptedFileTypes: acceptedFileTypes, allowsMultiple: allowsMultiple, acceptDirectory: acceptDirectory, defaultCamera: defaultCamera, children: _jsx(Button, { id: buttonId, isDisabled: isDisabled, "aria-labelledby": [buttonId, label != null ? labelId : null, ariaLabelledBy].filter(Boolean).join(' '), "aria-describedby": [fileTextId, descriptionId, errorMessageId, ariaDescribedBy].join(' '), "aria-details": ariaDetails, children: messages.format('chooseFile') }) }), _jsx(Text, { id: fileTextId, as: "p", variant: "medium", tone: "base", children: labelText })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description })] }), name && (_jsx("input", { type: "file", className: "cim-file-picker-hidden-input", name: name, multiple: allowsMultiple, required: isRequired, ref: fileInputRef }))] }));
+}
+const _UNSTABLE_FilePicker = withStyleProps(forwardRef(UNSTABLE_FilePicker), 'FilePicker');
+export { _UNSTABLE_FilePicker as UNSTABLE_FilePicker };
+//# sourceMappingURL=file-picker.js.map

package/dist/esm/components/file-picker/file-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-picker.js","sourceRoot":"","sources":["../../../../src/components/file-picker/file-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useId, useSlotId } from '@react-aria/utils';\nimport { useFormValidationState } from '@react-stately/form';\nimport clsx from 'clsx';\nimport { type ForwardedRef, useRef, useState } from 'react';\nimport {\n  FieldErrorContext as RACFieldErrorContext,\n  FileTrigger as RACFileTrigger,\n  type FileTriggerProps as RACFileTriggerProps,\n  LabelContext as RACLabelContext,\n  Provider as RACProvider,\n  TextContext as RACTextContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { Button } from '../button/button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport interface UNSTABLE_FilePickerProps\n  extends CommonProps,\n    Omit<FieldProps<File[]>, 'aria-label'>,\n    Pick<RACFileTriggerProps, 'acceptedFileTypes' | 'allowsMultiple' | 'acceptDirectory' | 'defaultCamera'> {\n  /** Whether the field is disabled. */\n  isDisabled?: boolean;\n  /** Whether the field is required. */\n  isRequired?: boolean;\n  /** Whether the field is invalid. */\n  isInvalid?: boolean;\n  /** The allowed file types that can be selected. */\n  acceptedFileTypes?: string[];\n  /** Whether multiple files can be selected. */\n  allowsMultiple?: boolean;\n  /** Handler called when files are selected. */\n  onSelect?: (files: File[] | null) => void;\n}\n\nfunction UNSTABLE_FilePicker(\n  {\n    id,\n    label,\n    description,\n    isDisabled,\n    isRequired,\n    isInvalid,\n    onSelect,\n    acceptedFileTypes,\n    allowsMultiple,\n    acceptDirectory,\n    defaultCamera,\n    error,\n    name,\n    validate,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: UNSTABLE_FilePickerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const buttonId = useId(id);\n  const labelId = useId();\n  const fileTextId = useId();\n\n  const [files, setFiles] = useState<File[] | null>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const handleSelect = (files: FileList | null) => {\n    // Commit validation to clear any previous validation errors when new files are selected\n    validationState.commitValidation();\n\n    const filesArray = files?.length ? Array.from(files) : null;\n    setFiles(filesArray);\n    onSelect?.(filesArray);\n\n    if (fileInputRef.current) {\n      fileInputRef.current.files = files;\n    }\n  };\n\n  const labelMessages = useLocalizedMessages('label');\n  const messages = useLocalizedMessages('filePicker');\n  const labelText =\n    files?.length != null\n      ? files.length === 1\n        ? files[0]?.name\n        : messages.format('multipleFilesSelected', { fileCount: files.length })\n      : messages.format('noFilesSelected', { allowsMultiple: allowsMultiple ?? false });\n\n  const validationBehavior = 'native';\n  const validationState = useFormValidationState({\n    value: files,\n    isInvalid,\n    isRequired,\n    name,\n    validate,\n    validationBehavior,\n  });\n  useFormValidation({ isInvalid, isRequired, validate, validationBehavior }, validationState, fileInputRef);\n  useFormReset(fileInputRef, files, setFiles);\n\n  const descriptionId = useSlotId([Boolean(description)]);\n  const errorMessageId = useSlotId([\n    Boolean(error || validationState.displayValidation.validationErrors),\n    validationState.displayValidation.isInvalid,\n  ]);\n\n  return (\n    <RACProvider\n      values={[\n        [RACLabelContext, label != null ? { id: labelId, htmlFor: buttonId } : {}],\n        [RACTextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],\n        [RACFieldErrorContext, validationState.displayValidation],\n      ]}\n    >\n      <div {...props} className={clsx('cim-file-picker', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n        {label && (\n          <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n            {label}\n            {/*\n             * Button elements don't support `aria-required`, so we need to add visually hidden text to indicate that the field is required.\n             * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required#examples:~:text=Note%3A%20If%20the%20field%27s%20label%20already%20contains%20the%20word%20%22required%22%2C%20it%20is%20recommended%20to%20leave%20out%20the%20aria%2Drequired%20attribute.%20This%20avoids%20that%20screen%20readers%20read%20out%20the%20term%20%22required%22%20twice.\n             */}\n            {isRequired && <UNSTABLE_VisuallyHidden>{labelMessages.format('required')}</UNSTABLE_VisuallyHidden>}\n          </FormFieldLabel>\n        )}\n        <div className=\"cim-file-picker-button-container\">\n          <RACFileTrigger\n            onSelect={handleSelect}\n            acceptedFileTypes={acceptedFileTypes}\n            allowsMultiple={allowsMultiple}\n            acceptDirectory={acceptDirectory}\n            defaultCamera={defaultCamera}\n          >\n            <Button\n              id={buttonId}\n              isDisabled={isDisabled}\n              aria-labelledby={[buttonId, label != null ? labelId : null, ariaLabelledBy].filter(Boolean).join(' ')}\n              aria-describedby={[fileTextId, descriptionId, errorMessageId, ariaDescribedBy].join(' ')}\n              aria-details={ariaDetails}\n            >\n              {messages.format('chooseFile')}\n            </Button>\n          </RACFileTrigger>\n          <Text id={fileTextId} as=\"p\" variant=\"medium\" tone=\"base\">\n            {labelText}\n          </Text>\n        </div>\n        <FormFieldError>{error}</FormFieldError>\n        <FormFieldDescription>{description}</FormFieldDescription>\n      </div>\n      {name && (\n        <input\n          type=\"file\"\n          className=\"cim-file-picker-hidden-input\"\n          name={name}\n          multiple={allowsMultiple}\n          required={isRequired}\n          ref={fileInputRef}\n        />\n      )}\n    </RACProvider>\n  );\n}\n\nconst _UNSTABLE_FilePicker = withStyleProps(forwardRef(UNSTABLE_FilePicker), 'FilePicker');\n\nexport { _UNSTABLE_FilePicker as UNSTABLE_FilePicker };\n"]}

package/dist/esm/components/internal/form-field/form-field.js

@@ -12,7 +12,7 @@ export function FormFieldLabel({ children, isRequired, isDisabled, }) {
     if (!children) {
         return null;
     }
-    return (_jsxs(RACLabel, { className: clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })), children: [children, isRequired && (_jsx(Text, { tone: "critical", as: "span", "aria-hidden": true, children: "*" }))] }));
+    return (_jsxs("div", { className: clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })), children: [_jsx(RACLabel, { children: children }), isRequired && (_jsx(Text, { tone: "critical", as: "span", "aria-hidden": true, children: "*" }))] }));
 }
 /**
  * Renders a description for a form field.

package/dist/esm/components/internal/form-field/form-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../../src/components/internal/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  FieldError as RACFieldError,\n  Label as RACLabel,\n  Text as RACText,\n  type ValidationResult as RACValidationResult,\n} from 'react-aria-components';\nimport { IconWarning } from '../../../icons/index.js';\nimport type { FieldError } from '../../types.js';\nimport { Text } from '../../typography/text.js';\nimport { textStyle } from '../../typography/utils.js';\n\n/**\n * Renders a label for a form field.\n * @internal\n */\nexport function FormFieldLabel({\n  children,\n  isRequired,\n  isDisabled,\n}: {\n  children: string | undefined;\n  isRequired: boolean | undefined;\n  isDisabled?: boolean | undefined;\n}) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACLabel\n      className={clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }))}\n    >\n      {children}\n      {isRequired && (\n        <Text tone=\"critical\" as=\"span\" aria-hidden>\n          *\n        </Text>\n      )}\n    </RACLabel>\n  );\n}\n\n/**\n * Renders a description for a form field.\n * @internal\n */\nexport function FormFieldDescription({ children }: { children: string | undefined }) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACText\n      slot=\"description\"\n      className={clsx('cim-form-field-description', textStyle({ variant: 'small', tone: 'subtle' }))}\n    >\n      {children}\n    </RACText>\n  );\n}\n\n/**\n * Renders an error message for a form field.\n *\n * Must be rendered unconditionally, as it can be populated with browser validation errors\n * even if an explicit error message isn't provided.\n *\n * @internal\n */\nexport function FormFieldError({ children }: { children: FieldError }) {\n  return (\n    <RACFieldError className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}>\n      {(validation) => renderFieldError(children, validation)}\n    </RACFieldError>\n  );\n}\n\nfunction renderFieldError(fieldError: FieldError, validation: RACValidationResult): string | ReactNode | undefined {\n  const errors =\n    typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);\n\n  if (!errors || !errors.length) {\n    return null;\n  }\n\n  return (\n    <ul className=\"cim-form-field-error-list\">\n      {typeof errors === 'object' ? (\n        errors.map((error) => <ErrorMessage key={error} message={error} />)\n      ) : (\n        <ErrorMessage message={errors} />\n      )}\n    </ul>\n  );\n}\n\nfunction ErrorMessage({ message }: { message: string }) {\n  return (\n    <li className=\"cim-form-field-error-message\">\n      <div className=\"cim-form-field-error-icon-wrapper\" aria-hidden>\n        <IconWarning />\n      </div>\n      {message}\n    </li>\n  );\n}\n\n/**\n * Renders an error message for `errorMessage` slot.\n * Used by `TagGroup` to show error messages, since `FieldError` is not supported as it is not a form field.\n *\n * @internal\n */\nexport function FormFieldErrorText({ children }: { children: string }) {\n  return (\n    <RACText\n      slot=\"errorMessage\"\n      className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}\n    >\n      <ErrorMessage message={children} />\n    </RACText>\n  );\n}\n"]}
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../../src/components/internal/form-field/form-field.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,UAAU,IAAI,aAAa,EAC3B,KAAK,IAAI,QAAQ,EACjB,IAAI,IAAI,OAAO,GAEhB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,UAAU,EACV,UAAU,GAKX;IACC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,aAE9G,KAAC,QAAQ,cAAE,QAAQ,GAAY,EAC9B,UAAU,IAAI,CACb,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,uCAExB,CACR,IACG,CACP,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAoC;IACjF,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,IAAI,CAAC,4BAA4B,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAE7F,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAA4B;IACnE,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,YACtG,CAAC,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,GACzC,CACjB,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,UAAsB,EAAE,UAA+B;IAC/E,MAAM,MAAM,GACV,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE1G,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,aAAI,SAAS,EAAC,2BAA2B,YACtC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC5B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,YAAY,IAAa,OAAO,EAAE,KAAK,IAArB,KAAK,CAAoB,CAAC,CACpE,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,IAAC,OAAO,EAAE,MAAM,GAAI,CAClC,GACE,CACN,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,OAAO,EAAuB;IACpD,OAAO,CACL,cAAI,SAAS,EAAC,8BAA8B,aAC1C,cAAK,SAAS,EAAC,mCAAmC,iCAChD,KAAC,WAAW,KAAG,GACX,EACL,OAAO,IACL,CACN,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAwB;IACnE,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,YAE1F,KAAC,YAAY,IAAC,OAAO,EAAE,QAAQ,GAAI,GAC3B,CACX,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  FieldError as RACFieldError,\n  Label as RACLabel,\n  Text as RACText,\n  type ValidationResult as RACValidationResult,\n} from 'react-aria-components';\nimport { IconWarning } from '../../../icons/index.js';\nimport type { FieldError } from '../../types.js';\nimport { Text } from '../../typography/text.js';\nimport { textStyle } from '../../typography/utils.js';\n\n/**\n * Renders a label for a form field.\n * @internal\n */\nexport function FormFieldLabel({\n  children,\n  isRequired,\n  isDisabled,\n}: {\n  children: ReactNode | undefined;\n  isRequired: boolean | undefined;\n  isDisabled?: boolean | undefined;\n}) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }))}\n    >\n      <RACLabel>{children}</RACLabel>\n      {isRequired && (\n        <Text tone=\"critical\" as=\"span\" aria-hidden>\n          *\n        </Text>\n      )}\n    </div>\n  );\n}\n\n/**\n * Renders a description for a form field.\n * @internal\n */\nexport function FormFieldDescription({ children }: { children: string | undefined }) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACText\n      slot=\"description\"\n      className={clsx('cim-form-field-description', textStyle({ variant: 'small', tone: 'subtle' }))}\n    >\n      {children}\n    </RACText>\n  );\n}\n\n/**\n * Renders an error message for a form field.\n *\n * Must be rendered unconditionally, as it can be populated with browser validation errors\n * even if an explicit error message isn't provided.\n *\n * @internal\n */\nexport function FormFieldError({ children }: { children: FieldError }) {\n  return (\n    <RACFieldError className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}>\n      {(validation) => renderFieldError(children, validation)}\n    </RACFieldError>\n  );\n}\n\nfunction renderFieldError(fieldError: FieldError, validation: RACValidationResult): string | ReactNode | undefined {\n  const errors =\n    typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);\n\n  if (!errors || !errors.length) {\n    return null;\n  }\n\n  return (\n    <ul className=\"cim-form-field-error-list\">\n      {typeof errors === 'object' ? (\n        errors.map((error) => <ErrorMessage key={error} message={error} />)\n      ) : (\n        <ErrorMessage message={errors} />\n      )}\n    </ul>\n  );\n}\n\nfunction ErrorMessage({ message }: { message: string }) {\n  return (\n    <li className=\"cim-form-field-error-message\">\n      <div className=\"cim-form-field-error-icon-wrapper\" aria-hidden>\n        <IconWarning />\n      </div>\n      {message}\n    </li>\n  );\n}\n\n/**\n * Renders an error message for `errorMessage` slot.\n * Used by `TagGroup` to show error messages, since `FieldError` is not supported as it is not a form field.\n *\n * @internal\n */\nexport function FormFieldErrorText({ children }: { children: string }) {\n  return (\n    <RACText\n      slot=\"errorMessage\"\n      className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}\n    >\n      <ErrorMessage message={children} />\n    </RACText>\n  );\n}\n"]}

package/dist/esm/components/internal/x-button/x-button.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=x-button.d.ts.map

package/dist/esm/components/internal/x-button/x-button.d.ts.map

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

package/dist/esm/components/internal/x-button/x-button.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Button as RACButton } from 'react-aria-components';
+import { IconCloseBold } from '../../../icons/index.js';
+/**
+ * @internal
+ */
+export function XButton({ size = 'medium', variant = 'square', UNSAFE_className, UNSAFE_style, ...props }) {
+    return (_jsx(RACButton, { ...props, className: clsx('cim-x-button', UNSAFE_className), style: UNSAFE_style, "data-size": size, "data-variant": variant, children: _jsx(IconCloseBold, {}) }));
+}
+//# sourceMappingURL=x-button.js.map

package/dist/esm/components/internal/x-button/x-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"x-button.js","sourceRoot":"","sources":["../../../../../src/components/internal/x-button/x-button.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAsC,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AASxD;;GAEG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,QAAQ,EAClB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACK;IACb,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,EACjD,KAAK,EAAE,YAAY,eACR,IAAI,kBACD,OAAO,YAErB,KAAC,aAAa,KAAG,GACP,CACb,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { type ButtonProps as RACButtonProps, Button as RACButton } from 'react-aria-components';\nimport { IconCloseBold } from '../../../icons/index.js';\nimport type { CommonProps } from '../../types.js';\n\ninterface XButtonProps extends CommonProps, Pick<RACButtonProps, 'onPress' | 'slot'> {\n  'aria-label': string;\n  size?: 'small' | 'medium';\n  variant?: 'circle' | 'square';\n}\n\n/**\n * @internal\n */\nexport function XButton({\n  size = 'medium',\n  variant = 'square',\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: XButtonProps) {\n  return (\n    <RACButton\n      {...props}\n      className={clsx('cim-x-button', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-size={size}\n      data-variant={variant}\n    >\n      <IconCloseBold />\n    </RACButton>\n  );\n}\n"]}

package/dist/esm/components/link-tabs/context.d.ts

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

package/dist/esm/components/link-tabs/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/link-tabs/context.ts"],"names":[],"mappings":""}

package/dist/esm/components/link-tabs/context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+/** @internal */
+export const LinkTabsContext = createContext(null);
+//# sourceMappingURL=context.js.map

package/dist/esm/components/link-tabs/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/components/link-tabs/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUtC,gBAAgB;AAChB,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAA8B,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\nimport type { Href } from '../types.js';\n\n/** @internal */\nexport interface LinkTabsContextValue {\n  isDisabled?: boolean;\n  currentHref: Href | null;\n  setCurrentHref: (href: Href | null) => void;\n}\n\n/** @internal */\nexport const LinkTabsContext = createContext<LinkTabsContextValue | null>(null);\n"]}

package/dist/esm/components/link-tabs/link-tabs.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+import { type LinkProps as RACLinkProps } from 'react-aria-components';
+import type { AriaLabelingProps, CommonProps, Href, NavigationProps, StringLikeChildren, WithRequired } from '../types.js';
+export interface LinkTabsProps extends CommonProps, AriaLabelingProps {
+    /** Link tabs belonging to the group. */
+    children: ReactNode;
+    /** Whether the link tabs are disabled. */
+    isDisabled?: boolean;
+    /** The currently selected key in the collection (controlled). */
+    currentHref?: Href | null;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultHref?: Href | null;
+    /** Handler that is called when the selection changes. */
+    onHrefChange?: (href: Href | null) => void;
+}
+/**
+ * Displays a list of tabs to help users navigate through a website.
+ *
+ * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).
+ */
+declare const _LinkTabs: (props: LinkTabsProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _LinkTabs as LinkTabs };
+export interface LinkTabProps extends Omit<CommonProps, 'id'>, WithRequired<NavigationProps, 'href'>, Pick<RACLinkProps, 'children' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+    /** The text to display as the tab title. */
+    children: StringLikeChildren;
+    /** An icon displayed before the tab title. */
+    iconStart?: ReactNode;
+    /** A badge displayed after the tab title. */
+    badge?: ReactNode;
+}
+/** Renders a single tab within `LinkTabs`. */
+export declare function LinkTab({ children, href, iconStart, badge, UNSAFE_className, UNSAFE_style, isDisabled, ...props }: LinkTabProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace LinkTab {
+    var displayName: string;
+}
+//# sourceMappingURL=link-tabs.d.ts.map

package/dist/esm/components/link-tabs/link-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAA0C,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAIxF,OAAO,KAAK,EACV,iBAAiB,EACjB,WAAW,EACX,IAAI,EACJ,eAAe,EACf,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AAIrB,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,iBAAiB;IACnE,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,iEAAiE;IACjE,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CAC5C;AAkDD;;;;GAIG;AACH,QAAA,MAAM,SAAS,+JAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAEjC,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/E,4CAA4C;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,8CAA8C;AAC9C,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,GAAG,KAAK,EACT,EAAE,YAAY,2CA8Bd;yBAvCe,OAAO"}

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

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import clsx from 'clsx';
+import { useMemo, useContext } from 'react';
+import { Link as RACLink } 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 { Text } from '../typography/text.js';
+import { LinkTabsContext } from './context.js';
+function LinkTabs({ children, currentHref, defaultHref, onHrefChange, UNSAFE_className, UNSAFE_style, id, isDisabled, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useProductionWarning(() => {
+        if (!ariaLabel && !ariaLabelledBy) {
+            console.warn('LinkTabs requires one of aria-label / aria-labelledby for accessibility');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    const linkTabsId = useId(id);
+    const [href, setHref] = useControlledState(currentHref, defaultHref ?? null, onHrefChange);
+    const linkTabsContext = useMemo(() => ({
+        isDisabled,
+        currentHref: href,
+        setCurrentHref: setHref,
+    }), [isDisabled, href, setHref]);
+    return (_jsx("nav", { ...props, ref: ref, id: linkTabsId, children: _jsx("ul", { className: clsx('cim-tab-list', 'cim-link-tabs', UNSAFE_className), style: UNSAFE_style, "aria-labelledby": linkTabsId, "data-disabled": isDisabled, children: _jsx(LinkTabsContext.Provider, { value: linkTabsContext, children: children }) }) }));
+}
+/**
+ * Displays a list of tabs to help users navigate through a website.
+ *
+ * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).
+ */
+const _LinkTabs = withStyleProps(forwardRef(LinkTabs), 'LinkTabs');
+export { _LinkTabs as LinkTabs };
+/** Renders a single tab within `LinkTabs`. */
+export function LinkTab({ children, href, iconStart, badge, UNSAFE_className, UNSAFE_style, isDisabled, ...props }) {
+    const linkTabsContext = useContext(LinkTabsContext);
+    if (!linkTabsContext) {
+        throw new Error('Cannot use link tab outside of link tabs');
+    }
+    const { isDisabled: isGroupDisabled, currentHref, setCurrentHref } = linkTabsContext;
+    const isCurrent = href === currentHref;
+    return (_jsx("li", { children: _jsxs(RACLink, { ...props, className: clsx('cim-tab-item', 'cim-link-tab-item', UNSAFE_className), style: UNSAFE_style, href: href, onPress: () => setCurrentHref(href), "aria-current": isCurrent ? 'page' : undefined, "data-selected": isCurrent || undefined, isDisabled: isDisabled || isGroupDisabled, children: [iconStart, _jsx(Text, { as: "span", variant: "medium-semibold", alignment: "center", children: children }), badge] }) }));
+}
+LinkTab.displayName = 'LinkTab';
+//# sourceMappingURL=link-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link-tabs.js","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useId } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ReactNode, type ForwardedRef, useMemo, useContext } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } 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 type {\n  AriaLabelingProps,\n  CommonProps,\n  Href,\n  NavigationProps,\n  StringLikeChildren,\n  WithRequired,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { LinkTabsContext, type LinkTabsContextValue } from './context.js';\n\nexport interface LinkTabsProps extends CommonProps, AriaLabelingProps {\n  /** Link tabs belonging to the group. */\n  children: ReactNode;\n  /** Whether the link tabs are disabled. */\n  isDisabled?: boolean;\n  /** The currently selected key in the collection (controlled). */\n  currentHref?: Href | null;\n  /** The initial selected key in the collection (uncontrolled). */\n  defaultHref?: Href | null;\n  /** Handler that is called when the selection changes. */\n  onHrefChange?: (href: Href | null) => void;\n}\n\nfunction LinkTabs(\n  {\n    children,\n    currentHref,\n    defaultHref,\n    onHrefChange,\n    UNSAFE_className,\n    UNSAFE_style,\n    id,\n    isDisabled,\n    ...props\n  }: LinkTabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('LinkTabs requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  const linkTabsId = useId(id);\n  const [href, setHref] = useControlledState(currentHref, defaultHref ?? null, onHrefChange);\n\n  const linkTabsContext: LinkTabsContextValue = useMemo(\n    () => ({\n      isDisabled,\n      currentHref: href,\n      setCurrentHref: setHref,\n    }),\n    [isDisabled, href, setHref],\n  );\n\n  return (\n    <nav {...props} ref={ref} id={linkTabsId}>\n      <ul\n        className={clsx('cim-tab-list', 'cim-link-tabs', UNSAFE_className)}\n        style={UNSAFE_style}\n        aria-labelledby={linkTabsId}\n        data-disabled={isDisabled}\n      >\n        <LinkTabsContext.Provider value={linkTabsContext}>{children}</LinkTabsContext.Provider>\n      </ul>\n    </nav>\n  );\n}\n\n/**\n * Displays a list of tabs to help users navigate through a website.\n *\n * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).\n */\nconst _LinkTabs = withStyleProps(forwardRef(LinkTabs), 'LinkTabs');\n\nexport { _LinkTabs as LinkTabs };\n\nexport interface LinkTabProps\n  extends Omit<CommonProps, 'id'>,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<RACLinkProps, 'children' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The text to display as the tab title. */\n  children: StringLikeChildren;\n  /** An icon displayed before the tab title. */\n  iconStart?: ReactNode;\n  /** A badge displayed after the tab title. */\n  badge?: ReactNode;\n}\n\n/** Renders a single tab within `LinkTabs`. */\nexport function LinkTab({\n  children,\n  href,\n  iconStart,\n  badge,\n  UNSAFE_className,\n  UNSAFE_style,\n  isDisabled,\n  ...props\n}: LinkTabProps) {\n  const linkTabsContext = useContext(LinkTabsContext);\n  if (!linkTabsContext) {\n    throw new Error('Cannot use link tab outside of link tabs');\n  }\n\n  const { isDisabled: isGroupDisabled, currentHref, setCurrentHref } = linkTabsContext;\n\n  const isCurrent = href === currentHref;\n\n  return (\n    <li>\n      <RACLink\n        {...props}\n        className={clsx('cim-tab-item', 'cim-link-tab-item', UNSAFE_className)}\n        style={UNSAFE_style}\n        href={href}\n        onPress={() => setCurrentHref(href)}\n        aria-current={isCurrent ? 'page' : undefined}\n        data-selected={isCurrent || undefined}\n        isDisabled={isDisabled || isGroupDisabled}\n      >\n        {iconStart}\n        <Text as=\"span\" variant=\"medium-semibold\" alignment=\"center\">\n          {children}\n        </Text>\n        {badge}\n      </RACLink>\n    </li>\n  );\n}\n\nLinkTab.displayName = 'LinkTab';\n"]}