@cimpress-ui/react 0.4.0 → 1.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAO7C,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,OAAO,GAAG,UAAU,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAsB,EAChG,GAAiC;IAEjC,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAC7C,KAAK,EAAE,YAAY,kBACL,OAAO,YAEpB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,cAAc,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,CAAC;AAEzE,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC;AAO3C,MAAM,UAAU,oBAAoB,CAAC,EACnC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACkB;IAC1B,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY,qBACF,SAAS,IAAI,SAAS,YAEtC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,oBAAoB,CAAC,WAAW,GAAG,aAAa,CAAC;AASjD,MAAM,UAAU,mBAAmB,CAAC,EAClC,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,IAAI,EACJ,GAAG,KAAK,EACiB;IACzB,OAAO,CACL,kBAAS,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC1G,SAAS,EAEV,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,YAC9C,KAAK,GACD,EACP,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,YAC1C,WAAW,GACP,IACH,EAEL,IAAI,IAAI,CACP,MAAC,QAAQ,eAEP,KAAC,UAAU,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,KAAC,sBAAsB,KAAG,gBAAa,SAAS,GAAG,EACpG,IAAI,IACI,CACZ,IACG,CACP,CAAC;AACJ,CAAC;AAED,mBAAmB,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenuMoreHorizontal } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { MenuRoot } from '../menu/menu.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface UNSTABLE_CardProps extends CommonProps {\n  children: ReactNode;\n  variant?: 'bordered' | 'borderless';\n}\n\nfunction UNSTABLE_Card(\n  { children, variant = 'bordered', UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_CardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx('cim-card', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-variant={variant}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * Groups related blocks of content into a single unit.\n *\n * See [card usage guidelines](https://ui.cimpress.io/components/card/).\n */\nconst _UNSTABLE_Card = withStyleProps(forwardRef(UNSTABLE_Card), 'Card');\n\nexport { _UNSTABLE_Card as UNSTABLE_Card };\n\nexport interface UNSTABLE_CardContentProps extends CommonProps {\n  children: ReactNode;\n  fullBleed?: boolean;\n}\n\nexport function UNSTABLE_CardContent({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  fullBleed = false,\n  ...props\n}: UNSTABLE_CardContentProps) {\n  return (\n    <div\n      {...props}\n      className={clsx('cim-card-content', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-full-bleed={fullBleed || undefined}\n    >\n      {children}\n    </div>\n  );\n}\n\nUNSTABLE_CardContent.displayName = 'CardContent';\n\nexport interface UNSTABLE_CardHeaderProps extends CommonProps {\n  iconStart?: ReactNode;\n  title: string;\n  description?: string;\n  menu?: ReactNode;\n}\n\nexport function UNSTABLE_CardHeader({\n  UNSAFE_className,\n  UNSAFE_style,\n  iconStart,\n  title,\n  description,\n  menu,\n  ...props\n}: UNSTABLE_CardHeaderProps) {\n  return (\n    <div {...props} className={clsx('cim-card-header', 'cim-card-content', UNSAFE_className)} style={UNSAFE_style}>\n      {iconStart}\n\n      <div className=\"cim-card-header-text\">\n        <Text as=\"h2\" variant=\"body-semibold\" tone=\"base\">\n          {title}\n        </Text>\n        <Text as=\"span\" variant=\"small\" tone=\"subtle\">\n          {description}\n        </Text>\n      </div>\n\n      {menu && (\n        <MenuRoot>\n          {/* TODO: i18n */}\n          <IconButton variant=\"tertiary\" size=\"small\" icon={<IconMenuMoreHorizontal />} aria-label=\"Actions\" />\n          {menu}\n        </MenuRoot>\n      )}\n    </div>\n  );\n}\n\nUNSTABLE_CardHeader.displayName = 'CardHeader';\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAO7C,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAa,EAAE,GAAiC;IAChH,OAAO,CACL,iBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACzF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,KAAK,GAAG,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAYzB,uDAAuD;AACvD,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACS;IACjB,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY,qBACF,SAAS,IAAI,SAAS,YAEtC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AA8BxC,wCAAwC;AACxC,MAAM,UAAU,UAAU,CAAC,EACzB,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,kBAAS,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC1G,SAAS,EAEV,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,YAC9C,KAAK,GACD,EACN,WAAW,IAAI,CACd,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,YACvC,WAAW,GACP,CACR,IACG,EAEN,cAAK,SAAS,EAAC,uBAAuB,YAAE,KAAK,GAAO,IAChD,CACP,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CardProps extends CommonProps {\n  /** The contents of the card. */\n  children: ReactNode;\n}\n\nfunction Card({ children, UNSAFE_className, UNSAFE_style, ...props }: CardProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <div {...props} ref={ref} className={clsx('cim-card', UNSAFE_className)} style={UNSAFE_style}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Groups related blocks of content into a single unit.\n *\n * See [card usage guidelines](https://ui.cimpress.io/components/card/).\n */\nconst _Card = withStyleProps(forwardRef(Card), 'Card');\n\nexport { _Card as Card };\n\nexport interface CardContentProps extends CommonProps {\n  /** The content of this block. */\n  children: ReactNode;\n  /**\n   * Whether the block's content should stretch to the edges of the block.\n   * @default false\n   */\n  fullBleed?: boolean;\n}\n\n/** Renders a single block of content within `Card`. */\nexport function CardContent({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  fullBleed = false,\n  ...props\n}: CardContentProps) {\n  return (\n    <div\n      {...props}\n      className={clsx('cim-card-content', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-full-bleed={fullBleed || undefined}\n    >\n      {children}\n    </div>\n  );\n}\n\nCardContent.displayName = 'CardContent';\n\nexport interface CardHeaderProps extends CommonProps {\n  /** The icon to display at the start of the header. */\n  iconStart?: ReactNode;\n  /**\n   * The title of the card. Optionally, you can pass a React node to render a link.\n   *\n   * @example\n   * <CardHeader title=\"Card title\" />\n   * <CardHeader title={<Link href=\"#\">Card title</Link>} />\n   */\n  title: ReactNode;\n  /**\n   * The description of the card. Optionally, you can pass a React node to render rich text.\n   *\n   * @example\n   * <CardHeader title=\"Card title\" description=\"Card subtitle\" />\n   * <CardHeader title=\"Card title\" description={<Link href=\"#\">Card subtitle</Link>} />\n   */\n  description?: ReactNode;\n  /**\n   * The tools to render at the end of the header. Usually a menu, icon button, or badge. For buttons, use the \"small\" size variant.\n   *\n   * @example\n   * <CardHeader title=\"Card title\" tools={<IconButton size=\"small\" icon={<IconRatingStar />} aria-label=\"Favorite\" />} />\n   */\n  tools?: ReactNode;\n}\n\n/** Renders a header within a `Card`. */\nexport function CardHeader({\n  UNSAFE_className,\n  UNSAFE_style,\n  iconStart,\n  title,\n  description,\n  tools,\n  ...props\n}: CardHeaderProps) {\n  return (\n    <div {...props} className={clsx('cim-card-header', 'cim-card-content', UNSAFE_className)} style={UNSAFE_style}>\n      {iconStart}\n\n      <div className=\"cim-card-header-text\">\n        <Text as=\"h2\" variant=\"body-semibold\" tone=\"base\">\n          {title}\n        </Text>\n        {description && (\n          <Text as=\"p\" variant=\"small\" tone=\"subtle\">\n            {description}\n          </Text>\n        )}\n      </div>\n\n      <div className=\"cim-card-header-tools\">{tools}</div>\n    </div>\n  );\n}\n\nCardHeader.displayName = 'CardHeader';\n"]}

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

@@ -14,7 +14,7 @@ function Checkbox({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
             console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');
         }
     }, [children, ariaLabel, ariaLabelledBy]);
-    return (_jsx(RACCheckbox, { ...props, ref: ref, className: clsx('cim-checkbox', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "cim-checkbox-toggle-wrapper", children: _jsx("div", { className: "cim-checkbox-toggle", children: isIndeterminate ? _jsx(IconSubtractBold, {}) : _jsx(IconCheckBold, {}) }) }), children && (_jsx(Text, { as: "span", variant: "body", children: children }))] })) }));
+    return (_jsx(RACCheckbox, { ...props, ref: ref, className: clsx('cim-checkbox', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "cim-checkbox-toggle-wrapper", children: _jsx("div", { className: "cim-checkbox-toggle", children: isIndeterminate ? _jsx(IconSubtractBold, {}) : _jsx(IconCheckBold, {}) }) }), children && (_jsx(Text, { as: "span", variant: "medium", children: children }))] })) }));
 }
 /**
  * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,IAAI,WAAW,EAA0C,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAuB7C,SAAS,QAAQ,CACf,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiB,EACrE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,WAAW,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACrG,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACxB,8BACE,cAAK,SAAS,EAAC,6BAA6B,YAC1C,cAAK,SAAS,EAAC,qBAAqB,YAAE,eAAe,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,GAAO,GACnG,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconSubtractBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<\n      RACCheckboxProps,\n      | 'onChange'\n      | 'isSelected'\n      | 'isIndeterminate'\n      | 'isDisabled'\n      | 'isReadOnly'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'name'\n      | 'value'\n      | 'defaultSelected'\n      | 'autoFocus'\n    > {\n  /** The label rendered next to the checkbox. */\n  children?: StringLikeChildren;\n}\n\nfunction Checkbox(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: CheckboxProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACCheckbox {...props} ref={ref} className={clsx('cim-checkbox', UNSAFE_className)} style={UNSAFE_style}>\n      {({ isIndeterminate }) => (\n        <>\n          <div className=\"cim-checkbox-toggle-wrapper\">\n            <div className=\"cim-checkbox-toggle\">{isIndeterminate ? <IconSubtractBold /> : <IconCheckBold />}</div>\n          </div>\n          {children && (\n            <Text as=\"span\" variant=\"body\">\n              {children}\n            </Text>\n          )}\n        </>\n      )}\n    </RACCheckbox>\n  );\n}\n\n/**\n * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n *\n * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,IAAI,WAAW,EAA0C,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAuB7C,SAAS,QAAQ,CACf,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiB,EACrE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,WAAW,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACrG,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACxB,8BACE,cAAK,SAAS,EAAC,6BAA6B,YAC1C,cAAK,SAAS,EAAC,qBAAqB,YAAE,eAAe,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,GAAO,GACnG,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconSubtractBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<\n      RACCheckboxProps,\n      | 'onChange'\n      | 'isSelected'\n      | 'isIndeterminate'\n      | 'isDisabled'\n      | 'isReadOnly'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'name'\n      | 'value'\n      | 'defaultSelected'\n      | 'autoFocus'\n    > {\n  /** The label rendered next to the checkbox. */\n  children?: StringLikeChildren;\n}\n\nfunction Checkbox(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: CheckboxProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACCheckbox {...props} ref={ref} className={clsx('cim-checkbox', UNSAFE_className)} style={UNSAFE_style}>\n      {({ isIndeterminate }) => (\n        <>\n          <div className=\"cim-checkbox-toggle-wrapper\">\n            <div className=\"cim-checkbox-toggle\">{isIndeterminate ? <IconSubtractBold /> : <IconCheckBold />}</div>\n          </div>\n          {children && (\n            <Text as=\"span\" variant=\"medium\">\n              {children}\n            </Text>\n          )}\n        </>\n      )}\n    </RACCheckbox>\n  );\n}\n\n/**\n * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n *\n * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}

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

@@ -8,6 +8,11 @@ export interface ComboBoxValidationValue {
     inputValue: string;
 }
 export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<ComboBoxValidationValue>, CollectionProps<T>, Pick<RACComboBoxProps<T>, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'selectedKey' | 'defaultSelectedKey' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onSelectionChange' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'> {
+    /**
+     * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.
+     * @default false
+     */
+    isVirtualized?: boolean;
 }
 /**
  * Allows users to filter a collapsible list and select one item from it.

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

@@ -1 +1 @@
-{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAIA,OAAO,EASL,KAAK,YAAY,IAAI,eAAe,EAIpC,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAC7C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAGrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EACjB,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,mBAAmB,GACnB,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;CAAG;AA+D3C;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAlEG,CAAC,SAAS,cAAc,iKAkEwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAsBjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CACzD,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}
+{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAIA,OAAO,EASL,KAAK,YAAY,IAAI,eAAe,EAMpC,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAUrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EACjB,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,mBAAmB,GACnB,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA0ED;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA7EG,CAAC,SAAS,cAAc,iKA6EwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAsBjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CACzD,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useContext } from 'react';
-import { Button as RACButton, Collection as RACCollection, ComboBox as RACComboBox, ComboBoxStateContext as RACComboBoxStateContext, Group as RACGroup, Header as RACHeader, Input as RACInput, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxSection as RACListBoxSection, Text as RACText, } from 'react-aria-components';
+import { Button as RACButton, Collection as RACCollection, ComboBox as RACComboBox, ComboBoxStateContext as RACComboBoxStateContext, Group as RACGroup, Header as RACHeader, Input as RACInput, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxSection as RACListBoxSection, ListLayout as RACListLayout, Text as RACText, Virtualizer as RACVirtualizer, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { IconCheck, IconChevronDown } from '../../icons/index.js';
 import { isProduction } from '../../utils/is-production.js';
@@ -11,7 +11,13 @@ import { withStyleProps } from '../../with-style-props.js';
 import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
 import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
 import { textStyle } from '../typography/utils.js';
-function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, ...props }, ref) {
+const VIRTUAL_LAYOUT_OPTIONS = {
+    rowHeight: 40,
+    headingHeight: 32,
+    padding: 0,
+    gap: 0,
+};
+function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     useProductionWarning(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
@@ -21,7 +27,8 @@ function ComboBox({ label, description, error, items, children, placeholder, UNS
     if (!isProduction() && items != null && typeof children !== 'function') {
         console.warn('`ComboBox` requires `children` to be a function when using `items` prop');
     }
-    return (_jsxs(RACComboBox, { ...props, ref: ref, className: clsx('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-combo-box-input-group", children: [_jsx(ComboBoxInput, { isReadOnly: isReadOnly, placeholder: placeholder }), _jsx(RACButton, { className: "cim-combo-box-button", children: _jsx(IconChevronDown, {}) })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(RACListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }) })] }));
+    const listBox = (_jsx(RACListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }));
+    return (_jsxs(RACComboBox, { ...props, ref: ref, className: clsx('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-combo-box-input-group", children: [_jsx(ComboBoxInput, { isReadOnly: isReadOnly, placeholder: placeholder }), _jsx(RACButton, { className: "cim-combo-box-button", children: _jsx(IconChevronDown, {}) })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
 }
 /**
  * Allows users to filter a collapsible list and select one item from it.
@@ -32,7 +39,7 @@ const _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');
 export { _ComboBox as ComboBox };
 function ComboBoxInput({ isReadOnly, placeholder, }) {
     const comboBoxState = useContext(RACComboBoxStateContext);
-    return (_jsx(RACInput, { className: clsx('cim-combo-box-input', textStyle({ variant: 'medium' })), 
+    return (_jsx(RACInput, { className: clsx('cim-combo-box-input', textStyle({ variant: 'body' })), 
         // Ensure the popover opens when the input is clicked.
         // By default, React Aria only opens the popover when the input is focused.
         onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder }));

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

@@ -1 +1 @@
-{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  ComboBox as RACComboBox,\n  ComboBoxStateContext as RACComboBoxStateContext,\n  Group as RACGroup,\n  Header as RACHeader,\n  Input as RACInput,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Text as RACText,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type {\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\n/** Represents the state of the `ComboBox` component for validation purposes. */\nexport interface ComboBoxValidationValue {\n  /** The selected key in the ComboBox. */\n  selectedKey: Key | null;\n  /** The value of the ComboBox input. */\n  inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldWithPlaceholderProps<ComboBoxValidationValue>,\n    CollectionProps<T>,\n    Pick<\n      RACComboBoxProps<T>,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction ComboBox<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    items,\n    children,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    isReadOnly,\n    onScroll,\n    ...props\n  }: ComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACComboBox\n      {...props}\n      ref={ref}\n      className={clsx('cim-combo-box', UNSAFE_className)}\n      style={UNSAFE_style}\n      menuTrigger=\"focus\"\n      isReadOnly={isReadOnly}\n      data-readonly={isReadOnly ? true : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-combo-box-input-group\">\n        <ComboBoxInput isReadOnly={isReadOnly} placeholder={placeholder} />\n        <RACButton className=\"cim-combo-box-button\">\n          <IconChevronDown />\n        </RACButton>\n      </RACGroup>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n          {children}\n        </RACListBox>\n      </CollapsibleList>\n    </RACComboBox>\n  );\n}\n\n/**\n * Allows users to filter a collapsible list and select one item from it.\n *\n * See [combo box usage guidelines](https://ui.cimpress.com/components/combo-box)\n */\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n  isReadOnly,\n  placeholder,\n}: {\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n\n  return (\n    <RACInput\n      className={clsx('cim-combo-box-input', textStyle({ variant: 'medium' }))}\n      // Ensure the popover opens when the input is clicked.\n      // By default, React Aria only opens the popover when the input is focused.\n      onClick={() => !isReadOnly && comboBoxState!.open()}\n      placeholder={placeholder}\n    />\n  );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem>\n  extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `ComboBox`. */\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-combo-box-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n  title,\n  children,\n  items,\n  ...props\n}: ComboBoxSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n      <RACHeader\n        className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}
+{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  ComboBox as RACComboBox,\n  ComboBoxStateContext as RACComboBoxStateContext,\n  Group as RACGroup,\n  Header as RACHeader,\n  Input as RACInput,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  ListLayout as RACListLayout,\n  type ListLayoutOptions as RACListLayoutOptions,\n  Text as RACText,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type {\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n  rowHeight: 40,\n  headingHeight: 32,\n  padding: 0,\n  gap: 0,\n};\n\n/** Represents the state of the `ComboBox` component for validation purposes. */\nexport interface ComboBoxValidationValue {\n  /** The selected key in the ComboBox. */\n  selectedKey: Key | null;\n  /** The value of the ComboBox input. */\n  inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldWithPlaceholderProps<ComboBoxValidationValue>,\n    CollectionProps<T>,\n    Pick<\n      RACComboBoxProps<T>,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n}\n\nfunction ComboBox<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    items,\n    children,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    isReadOnly,\n    onScroll,\n    isVirtualized = false,\n    ...props\n  }: ComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('ComboBox requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`ComboBox` requires `children` to be a function when using `items` prop');\n  }\n\n  const listBox = (\n    <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n      {children}\n    </RACListBox>\n  );\n\n  return (\n    <RACComboBox\n      {...props}\n      ref={ref}\n      className={clsx('cim-combo-box', UNSAFE_className)}\n      style={UNSAFE_style}\n      menuTrigger=\"focus\"\n      isReadOnly={isReadOnly}\n      data-readonly={isReadOnly ? true : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-combo-box-input-group\">\n        <ComboBoxInput isReadOnly={isReadOnly} placeholder={placeholder} />\n        <RACButton className=\"cim-combo-box-button\">\n          <IconChevronDown />\n        </RACButton>\n      </RACGroup>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        {isVirtualized ? (\n          <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n            {listBox}\n          </RACVirtualizer>\n        ) : (\n          listBox\n        )}\n      </CollapsibleList>\n    </RACComboBox>\n  );\n}\n\n/**\n * Allows users to filter a collapsible list and select one item from it.\n *\n * See [combo box usage guidelines](https://ui.cimpress.com/components/combo-box)\n */\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n  isReadOnly,\n  placeholder,\n}: {\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n\n  return (\n    <RACInput\n      className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\n      // Ensure the popover opens when the input is clicked.\n      // By default, React Aria only opens the popover when the input is focused.\n      onClick={() => !isReadOnly && comboBoxState!.open()}\n      placeholder={placeholder}\n    />\n  );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem>\n  extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `ComboBox`. */\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-combo-box-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n  title,\n  children,\n  items,\n  ...props\n}: ComboBoxSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`ComboBoxSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n      <RACHeader\n        className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}

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

@@ -20,7 +20,7 @@ function DatePicker({ label, description, error: errorMessage, focusedValue, def
         }
     }, [label, ariaLabel, ariaLabelledBy]);
     const messages = useLocalizedMessages('datePicker');
-    return (_jsxs(RACDatePicker, { ...props, ref: ref, className: clsx('cim-date-picker', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-date-picker-input-group", "data-readonly": props.isReadOnly || undefined, children: [_jsx(RACDateInput, { className: clsx('cim-date-picker-input', textStyle({ variant: 'medium' })), children: (segment) => (_jsx("span", { className: "cim-date-picker-segment-wrapper", children: _jsx(RACDateSegment, { segment: segment }) })) }), _jsxs("div", { className: "cim-date-picker-input-controls", children: [_jsx(DatePickerClearButton, { isDisabled: props.isDisabled || props.isReadOnly }), _jsx(IconButton, { icon: _jsx(IconCalendarEmpty, {}), "aria-label": messages.format('openCalendar'), variant: "tertiary", size: "small" })] })] }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description }), _jsx(RACPopover, { className: "cim-date-picker-popover", placement: "bottom end", offset: 5, containerPadding: 16, "data-cim-style-root": true, children: _jsx(RACDialog, { children: _jsx(DatePickerCalendar, { focusedValue: focusedValue, defaultFocusedValue: defaultFocusedValue, placeholderValue: props.placeholderValue }) }) })] }));
+    return (_jsxs(RACDatePicker, { ...props, ref: ref, className: clsx('cim-date-picker', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-date-picker-input-group", "data-readonly": props.isReadOnly || undefined, children: [_jsx(RACDateInput, { className: clsx('cim-date-picker-input', textStyle({ variant: 'body' })), children: (segment) => (_jsx("span", { className: "cim-date-picker-segment-wrapper", children: _jsx(RACDateSegment, { segment: segment }) })) }), _jsxs("div", { className: "cim-date-picker-input-controls", children: [_jsx(DatePickerClearButton, { isDisabled: props.isDisabled || props.isReadOnly }), _jsx(IconButton, { icon: _jsx(IconCalendarEmpty, {}), "aria-label": messages.format('openCalendar'), variant: "tertiary", size: "small" })] })] }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description }), _jsx(RACPopover, { className: "cim-date-picker-popover", placement: "bottom end", offset: 5, containerPadding: 16, "data-cim-style-root": true, children: _jsx(RACDialog, { children: _jsx(DatePickerCalendar, { focusedValue: focusedValue, defaultFocusedValue: defaultFocusedValue, placeholderValue: props.placeholderValue }) }) })] }));
 }
 /**
  * Allows users to enter or select a date and time value.

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n  type CalendarProps as RACCalendarProps,\n  DateInput as RACDateInput,\n  DatePicker as RACDatePicker,\n  type DatePickerProps as RACDatePickerProps,\n  DatePickerStateContext as RACDatePickerStateContext,\n  DateSegment as RACDateSegment,\n  Dialog as RACDialog,\n  Group as RACGroup,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCalendarEmpty } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { DatePickerCalendar } from './date-picker-calendar.js';\n\n/** Represents a date with optional time and timezone components. */\nexport type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;\n\n/** Maps a date value to a specific subtype depending on which components it contains. */\nexport type MappedDateValue<T> = T extends ZonedDateTime\n  ? ZonedDateTime\n  : T extends CalendarDateTime\n    ? CalendarDateTime\n    : T extends CalendarDate\n      ? CalendarDate\n      : never;\n\nexport interface DatePickerProps<T extends DateValue>\n  extends CommonProps,\n    FieldProps<MappedDateValue<T>>,\n    Pick<\n      RACDatePickerProps<T>,\n      | 'value'\n      | 'defaultValue'\n      | 'placeholderValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'autoFocus'\n      | 'onFocus'\n      | 'onBlur'\n      | 'isOpen'\n      | 'defaultOpen'\n      | 'onOpenChange'\n      | 'minValue'\n      | 'maxValue'\n      | 'isDateUnavailable'\n      | 'granularity'\n      | 'firstDayOfWeek'\n    >,\n    Pick<RACCalendarProps<T>, 'focusedValue' | 'defaultFocusedValue'> {}\n\nfunction DatePicker<T extends DateValue>(\n  {\n    label,\n    description,\n    error: errorMessage,\n    focusedValue,\n    defaultFocusedValue,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: DatePickerProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('DatePicker requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('datePicker');\n\n  return (\n    <RACDatePicker {...props} ref={ref} className={clsx('cim-date-picker', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-date-picker-input-group\" data-readonly={props.isReadOnly || undefined}>\n        <RACDateInput className={clsx('cim-date-picker-input', textStyle({ variant: 'medium' }))}>\n          {(segment) => (\n            <span className=\"cim-date-picker-segment-wrapper\">\n              <RACDateSegment segment={segment} />\n            </span>\n          )}\n        </RACDateInput>\n        <div className=\"cim-date-picker-input-controls\">\n          <DatePickerClearButton isDisabled={props.isDisabled || props.isReadOnly} />\n          <IconButton\n            icon={<IconCalendarEmpty />}\n            aria-label={messages.format('openCalendar')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n        </div>\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <RACPopover\n        className=\"cim-date-picker-popover\"\n        placement=\"bottom end\"\n        offset={5} // 1px border + 4px actual offset\n        containerPadding={16}\n        data-cim-style-root\n      >\n        <RACDialog>\n          <DatePickerCalendar<T>\n            focusedValue={focusedValue}\n            defaultFocusedValue={defaultFocusedValue}\n            placeholderValue={props.placeholderValue}\n          />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>\n  );\n}\n\n/**\n * Allows users to enter or select a date and time value.\n *\n * See [date picker usage guidelines](https://ui.cimpress.io/components/date-picker/).\n */\nconst _DatePicker = withStyleProps(forwardRef(DatePicker), 'DatePicker');\n\nexport { _DatePicker as DatePicker };\n\nfunction DatePickerClearButton({ isDisabled }: { isDisabled: boolean | undefined }) {\n  const datePickerState = useContext(RACDatePickerStateContext)!;\n  const messages = useLocalizedMessages('datePicker');\n\n  if (!datePickerState.value) {\n    return null;\n  }\n\n  return (\n    <IconButton\n      // Don't inherit default Button behavior from DatePicker\n      slot={null}\n      UNSAFE_className=\"cim-date-picker-clear\"\n      aria-label={messages.format('clearValue')}\n      onPress={() => datePickerState.setValue(null)}\n      icon={<IconCloseDetached />}\n      variant=\"tertiary\"\n      size=\"small\"\n      isDisabled={isDisabled}\n    />\n  );\n}\n\n// TODO: use one of our standard icons instead of this custom one\nfunction IconCloseDetached() {\n  return (\n    <svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\" className=\"cim-icon\" fill=\"currentcolor\" data-icon>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M0.21967 0.21967C0.512563 -0.0732233 0.987437 -0.0732233 1.28033 0.21967L6 4.93934L10.7197 0.21967C11.0126 -0.0732233 11.4874 -0.0732233 11.7803 0.21967C12.0732 0.512563 12.0732 0.987437 11.7803 1.28033L7.06066 6L11.7803 10.7197C12.0732 11.0126 12.0732 11.4874 11.7803 11.7803C11.4874 12.0732 11.0126 12.0732 10.7197 11.7803L6 7.06066L1.28033 11.7803C0.987437 12.0732 0.512563 12.0732 0.21967 11.7803C-0.0732233 11.4874 -0.0732233 11.0126 0.21967 10.7197L4.93934 6L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z\"\n      />\n    </svg>\n  );\n}\n"]}
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AACtD,OAAO,EAEL,SAAS,IAAI,YAAY,EACzB,UAAU,IAAI,aAAa,EAE3B,sBAAsB,IAAI,yBAAyB,EACnD,WAAW,IAAI,cAAc,EAC7B,MAAM,IAAI,SAAS,EACnB,KAAK,IAAI,QAAQ,EACjB,OAAO,IAAI,UAAU,GACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE5G,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAyC/D,SAAS,UAAU,CACjB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACW,EACrB,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,mFAAmF,CAAC,CAAC;QACpG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAEpD,OAAO,CACL,MAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC3G,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,MAAC,QAAQ,IAAC,SAAS,EAAC,6BAA6B,mBAAgB,KAAK,CAAC,UAAU,IAAI,SAAS,aAC5F,KAAC,YAAY,IAAC,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,YACnF,CAAC,OAAO,EAAE,EAAE,CAAC,CACZ,eAAM,SAAS,EAAC,iCAAiC,YAC/C,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,GAAI,GAC/B,CACR,GACY,EACf,eAAK,SAAS,EAAC,gCAAgC,aAC7C,KAAC,qBAAqB,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,GAAI,EAC3E,KAAC,UAAU,IACT,IAAI,EAAE,KAAC,iBAAiB,KAAG,gBACf,QAAQ,CAAC,MAAM,CAAC,cAAc,CAAC,EAC3C,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,IACE,IACG,EACX,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,EAC1D,KAAC,UAAU,IACT,SAAS,EAAC,yBAAyB,EACnC,SAAS,EAAC,YAAY,EACtB,MAAM,EAAE,CAAC,EACT,gBAAgB,EAAE,EAAE,yCAGpB,KAAC,SAAS,cACR,KAAC,kBAAkB,IACjB,YAAY,EAAE,YAAY,EAC1B,mBAAmB,EAAE,mBAAmB,EACxC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,GACxC,GACQ,GACD,IACC,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;AAErC,SAAS,qBAAqB,CAAC,EAAE,UAAU,EAAuC;IAChF,MAAM,eAAe,GAAG,UAAU,CAAC,yBAAyB,CAAE,CAAC;IAC/D,MAAM,QAAQ,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAEpD,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;QAC3B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,UAAU;IACT,wDAAwD;;QAAxD,wDAAwD;QACxD,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAC,uBAAuB,gBAC5B,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7C,IAAI,EAAE,KAAC,iBAAiB,KAAG,EAC3B,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;AACJ,CAAC;AAED,iEAAiE;AACjE,SAAS,iBAAiB;IACxB,OAAO,CACL,cAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAC,UAAU,EAAC,IAAI,EAAC,cAAc,+BAClG,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,2hBAA2hB,GAC7hB,GACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport type { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n  type CalendarProps as RACCalendarProps,\n  DateInput as RACDateInput,\n  DatePicker as RACDatePicker,\n  type DatePickerProps as RACDatePickerProps,\n  DatePickerStateContext as RACDatePickerStateContext,\n  DateSegment as RACDateSegment,\n  Dialog as RACDialog,\n  Group as RACGroup,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCalendarEmpty } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { DatePickerCalendar } from './date-picker-calendar.js';\n\n/** Represents a date with optional time and timezone components. */\nexport type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;\n\n/** Maps a date value to a specific subtype depending on which components it contains. */\nexport type MappedDateValue<T> = T extends ZonedDateTime\n  ? ZonedDateTime\n  : T extends CalendarDateTime\n    ? CalendarDateTime\n    : T extends CalendarDate\n      ? CalendarDate\n      : never;\n\nexport interface DatePickerProps<T extends DateValue>\n  extends CommonProps,\n    FieldProps<MappedDateValue<T>>,\n    Pick<\n      RACDatePickerProps<T>,\n      | 'value'\n      | 'defaultValue'\n      | 'placeholderValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'autoFocus'\n      | 'onFocus'\n      | 'onBlur'\n      | 'isOpen'\n      | 'defaultOpen'\n      | 'onOpenChange'\n      | 'minValue'\n      | 'maxValue'\n      | 'isDateUnavailable'\n      | 'granularity'\n      | 'firstDayOfWeek'\n    >,\n    Pick<RACCalendarProps<T>, 'focusedValue' | 'defaultFocusedValue'> {}\n\nfunction DatePicker<T extends DateValue>(\n  {\n    label,\n    description,\n    error: errorMessage,\n    focusedValue,\n    defaultFocusedValue,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: DatePickerProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('DatePicker requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('datePicker');\n\n  return (\n    <RACDatePicker {...props} ref={ref} className={clsx('cim-date-picker', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-date-picker-input-group\" data-readonly={props.isReadOnly || undefined}>\n        <RACDateInput className={clsx('cim-date-picker-input', textStyle({ variant: 'body' }))}>\n          {(segment) => (\n            <span className=\"cim-date-picker-segment-wrapper\">\n              <RACDateSegment segment={segment} />\n            </span>\n          )}\n        </RACDateInput>\n        <div className=\"cim-date-picker-input-controls\">\n          <DatePickerClearButton isDisabled={props.isDisabled || props.isReadOnly} />\n          <IconButton\n            icon={<IconCalendarEmpty />}\n            aria-label={messages.format('openCalendar')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n        </div>\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <RACPopover\n        className=\"cim-date-picker-popover\"\n        placement=\"bottom end\"\n        offset={5} // 1px border + 4px actual offset\n        containerPadding={16}\n        data-cim-style-root\n      >\n        <RACDialog>\n          <DatePickerCalendar<T>\n            focusedValue={focusedValue}\n            defaultFocusedValue={defaultFocusedValue}\n            placeholderValue={props.placeholderValue}\n          />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>\n  );\n}\n\n/**\n * Allows users to enter or select a date and time value.\n *\n * See [date picker usage guidelines](https://ui.cimpress.io/components/date-picker/).\n */\nconst _DatePicker = withStyleProps(forwardRef(DatePicker), 'DatePicker');\n\nexport { _DatePicker as DatePicker };\n\nfunction DatePickerClearButton({ isDisabled }: { isDisabled: boolean | undefined }) {\n  const datePickerState = useContext(RACDatePickerStateContext)!;\n  const messages = useLocalizedMessages('datePicker');\n\n  if (!datePickerState.value) {\n    return null;\n  }\n\n  return (\n    <IconButton\n      // Don't inherit default Button behavior from DatePicker\n      slot={null}\n      UNSAFE_className=\"cim-date-picker-clear\"\n      aria-label={messages.format('clearValue')}\n      onPress={() => datePickerState.setValue(null)}\n      icon={<IconCloseDetached />}\n      variant=\"tertiary\"\n      size=\"small\"\n      isDisabled={isDisabled}\n    />\n  );\n}\n\n// TODO: use one of our standard icons instead of this custom one\nfunction IconCloseDetached() {\n  return (\n    <svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\" className=\"cim-icon\" fill=\"currentcolor\" data-icon>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M0.21967 0.21967C0.512563 -0.0732233 0.987437 -0.0732233 1.28033 0.21967L6 4.93934L10.7197 0.21967C11.0126 -0.0732233 11.4874 -0.0732233 11.7803 0.21967C12.0732 0.512563 12.0732 0.987437 11.7803 1.28033L7.06066 6L11.7803 10.7197C12.0732 11.0126 12.0732 11.4874 11.7803 11.7803C11.4874 12.0732 11.0126 12.0732 10.7197 11.7803L6 7.06066L1.28033 11.7803C0.987437 12.0732 0.512563 12.0732 0.21967 11.7803C-0.0732233 11.4874 -0.0732233 11.0126 0.21967 10.7197L4.93934 6L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z\"\n      />\n    </svg>\n  );\n}\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.map

@@ -1 +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,0KAA+D,CAAC;AAE1F,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}
+{"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

@@ -55,8 +55,8 @@ function UNSTABLE_FilePicker({ id, label, description, isDisabled, isRequired, i
             [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-field', 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-field-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-field-hidden-input", name: name, multiple: allowsMultiple, required: isRequired, ref: fileInputRef }))] }));
+        ], 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), 'FileField');
+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

@@ -1 +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-field', 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-field-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-field-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), 'FileField');\n\nexport { _UNSTABLE_FilePicker as UNSTABLE_FilePicker };\n"]}
+{"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/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"}