@cimpress-ui/react 0.3.0 → 1.0.0

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

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

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

@@ -21,7 +21,7 @@ function FormFieldLabel({ children, isRequired, isDisabled, }) {
     if (!children) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Label, { className: (0, clsx_1.default)('cim-form-field-label', (0, utils_js_1.textStyle)({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })), children: [children, isRequired && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { tone: "critical", as: "span", "aria-hidden": true, children: "*" }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('cim-form-field-label', (0, utils_js_1.textStyle)({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })), children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { children: children }), isRequired && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { tone: "critical", as: "span", "aria-hidden": true, children: "*" }))] }));
 }
 /**
  * Renders a description for a form field.

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

@@ -1 +1 @@
-{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../../src/components/internal/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  FieldError as RACFieldError,\n  Label as RACLabel,\n  Text as RACText,\n  type ValidationResult as RACValidationResult,\n} from 'react-aria-components';\nimport { IconWarning } from '../../../icons/index.js';\nimport type { FieldError } from '../../types.js';\nimport { Text } from '../../typography/text.js';\nimport { textStyle } from '../../typography/utils.js';\n\n/**\n * Renders a label for a form field.\n * @internal\n */\nexport function FormFieldLabel({\n  children,\n  isRequired,\n  isDisabled,\n}: {\n  children: string | undefined;\n  isRequired: boolean | undefined;\n  isDisabled?: boolean | undefined;\n}) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACLabel\n      className={clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }))}\n    >\n      {children}\n      {isRequired && (\n        <Text tone=\"critical\" as=\"span\" aria-hidden>\n          *\n        </Text>\n      )}\n    </RACLabel>\n  );\n}\n\n/**\n * Renders a description for a form field.\n * @internal\n */\nexport function FormFieldDescription({ children }: { children: string | undefined }) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACText\n      slot=\"description\"\n      className={clsx('cim-form-field-description', textStyle({ variant: 'small', tone: 'subtle' }))}\n    >\n      {children}\n    </RACText>\n  );\n}\n\n/**\n * Renders an error message for a form field.\n *\n * Must be rendered unconditionally, as it can be populated with browser validation errors\n * even if an explicit error message isn't provided.\n *\n * @internal\n */\nexport function FormFieldError({ children }: { children: FieldError }) {\n  return (\n    <RACFieldError className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}>\n      {(validation) => renderFieldError(children, validation)}\n    </RACFieldError>\n  );\n}\n\nfunction renderFieldError(fieldError: FieldError, validation: RACValidationResult): string | ReactNode | undefined {\n  const errors =\n    typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);\n\n  if (!errors || !errors.length) {\n    return null;\n  }\n\n  return (\n    <ul className=\"cim-form-field-error-list\">\n      {typeof errors === 'object' ? (\n        errors.map((error) => <ErrorMessage key={error} message={error} />)\n      ) : (\n        <ErrorMessage message={errors} />\n      )}\n    </ul>\n  );\n}\n\nfunction ErrorMessage({ message }: { message: string }) {\n  return (\n    <li className=\"cim-form-field-error-message\">\n      <div className=\"cim-form-field-error-icon-wrapper\" aria-hidden>\n        <IconWarning />\n      </div>\n      {message}\n    </li>\n  );\n}\n\n/**\n * Renders an error message for `errorMessage` slot.\n * Used by `TagGroup` to show error messages, since `FieldError` is not supported as it is not a form field.\n *\n * @internal\n */\nexport function FormFieldErrorText({ children }: { children: string }) {\n  return (\n    <RACText\n      slot=\"errorMessage\"\n      className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}\n    >\n      <ErrorMessage message={children} />\n    </RACText>\n  );\n}\n"]}
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../../src/components/internal/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  FieldError as RACFieldError,\n  Label as RACLabel,\n  Text as RACText,\n  type ValidationResult as RACValidationResult,\n} from 'react-aria-components';\nimport { IconWarning } from '../../../icons/index.js';\nimport type { FieldError } from '../../types.js';\nimport { Text } from '../../typography/text.js';\nimport { textStyle } from '../../typography/utils.js';\n\n/**\n * Renders a label for a form field.\n * @internal\n */\nexport function FormFieldLabel({\n  children,\n  isRequired,\n  isDisabled,\n}: {\n  children: ReactNode | undefined;\n  isRequired: boolean | undefined;\n  isDisabled?: boolean | undefined;\n}) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }))}\n    >\n      <RACLabel>{children}</RACLabel>\n      {isRequired && (\n        <Text tone=\"critical\" as=\"span\" aria-hidden>\n          *\n        </Text>\n      )}\n    </div>\n  );\n}\n\n/**\n * Renders a description for a form field.\n * @internal\n */\nexport function FormFieldDescription({ children }: { children: string | undefined }) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <RACText\n      slot=\"description\"\n      className={clsx('cim-form-field-description', textStyle({ variant: 'small', tone: 'subtle' }))}\n    >\n      {children}\n    </RACText>\n  );\n}\n\n/**\n * Renders an error message for a form field.\n *\n * Must be rendered unconditionally, as it can be populated with browser validation errors\n * even if an explicit error message isn't provided.\n *\n * @internal\n */\nexport function FormFieldError({ children }: { children: FieldError }) {\n  return (\n    <RACFieldError className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}>\n      {(validation) => renderFieldError(children, validation)}\n    </RACFieldError>\n  );\n}\n\nfunction renderFieldError(fieldError: FieldError, validation: RACValidationResult): string | ReactNode | undefined {\n  const errors =\n    typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);\n\n  if (!errors || !errors.length) {\n    return null;\n  }\n\n  return (\n    <ul className=\"cim-form-field-error-list\">\n      {typeof errors === 'object' ? (\n        errors.map((error) => <ErrorMessage key={error} message={error} />)\n      ) : (\n        <ErrorMessage message={errors} />\n      )}\n    </ul>\n  );\n}\n\nfunction ErrorMessage({ message }: { message: string }) {\n  return (\n    <li className=\"cim-form-field-error-message\">\n      <div className=\"cim-form-field-error-icon-wrapper\" aria-hidden>\n        <IconWarning />\n      </div>\n      {message}\n    </li>\n  );\n}\n\n/**\n * Renders an error message for `errorMessage` slot.\n * Used by `TagGroup` to show error messages, since `FieldError` is not supported as it is not a form field.\n *\n * @internal\n */\nexport function FormFieldErrorText({ children }: { children: string }) {\n  return (\n    <RACText\n      slot=\"errorMessage\"\n      className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}\n    >\n      <ErrorMessage message={children} />\n    </RACText>\n  );\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XButton = XButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const index_js_1 = require("../../../icons/index.js");
+/**
+ * @internal
+ */
+function XButton({ size = 'medium', variant = 'square', UNSAFE_className, UNSAFE_style, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ...props, className: (0, clsx_1.default)('cim-x-button', UNSAFE_className), style: UNSAFE_style, "data-size": size, "data-variant": variant, children: (0, jsx_runtime_1.jsx)(index_js_1.IconCloseBold, {}) }));
+}
+//# sourceMappingURL=x-button.js.map

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

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

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

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

package/dist/commonjs/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/commonjs/components/link-tabs/context.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkTabsContext = void 0;
+const react_1 = require("react");
+/** @internal */
+exports.LinkTabsContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=context.js.map

package/dist/commonjs/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,iCAAsC;AAUtC,gBAAgB;AACH,QAAA,eAAe,GAAG,IAAA,qBAAa,EAA8B,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/commonjs/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/commonjs/components/link-tabs/link-tabs.d.ts.map

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

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

@@ -0,0 +1,54 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkTabs = void 0;
+exports.LinkTab = LinkTab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
+const utils_2 = require("@react-stately/utils");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+const text_js_1 = require("../typography/text.js");
+const context_js_1 = require("./context.js");
+function LinkTabs({ children, currentHref, defaultHref, onHrefChange, UNSAFE_className, UNSAFE_style, id, isDisabled, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
+        if (!ariaLabel && !ariaLabelledBy) {
+            console.warn('LinkTabs requires one of aria-label / aria-labelledby for accessibility');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    const linkTabsId = (0, utils_1.useId)(id);
+    const [href, setHref] = (0, utils_2.useControlledState)(currentHref, defaultHref ?? null, onHrefChange);
+    const linkTabsContext = (0, react_1.useMemo)(() => ({
+        isDisabled,
+        currentHref: href,
+        setCurrentHref: setHref,
+    }), [isDisabled, href, setHref]);
+    return ((0, jsx_runtime_1.jsx)("nav", { ...props, ref: ref, id: linkTabsId, children: (0, jsx_runtime_1.jsx)("ul", { className: (0, clsx_1.default)('cim-tab-list', 'cim-link-tabs', UNSAFE_className), style: UNSAFE_style, "aria-labelledby": linkTabsId, "data-disabled": isDisabled, children: (0, jsx_runtime_1.jsx)(context_js_1.LinkTabsContext.Provider, { value: linkTabsContext, children: children }) }) }));
+}
+/**
+ * Displays a list of tabs to help users navigate through a website.
+ *
+ * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).
+ */
+const _LinkTabs = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(LinkTabs), 'LinkTabs');
+exports.LinkTabs = _LinkTabs;
+/** Renders a single tab within `LinkTabs`. */
+function LinkTab({ children, href, iconStart, badge, UNSAFE_className, UNSAFE_style, isDisabled, ...props }) {
+    const linkTabsContext = (0, react_1.useContext)(context_js_1.LinkTabsContext);
+    if (!linkTabsContext) {
+        throw new Error('Cannot use link tab outside of link tabs');
+    }
+    const { isDisabled: isGroupDisabled, currentHref, setCurrentHref } = linkTabsContext;
+    const isCurrent = href === currentHref;
+    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { ...props, className: (0, clsx_1.default)('cim-tab-item', 'cim-link-tab-item', UNSAFE_className), style: UNSAFE_style, href: href, onPress: () => setCurrentHref(href), "aria-current": isCurrent ? 'page' : undefined, "data-selected": isCurrent || undefined, isDisabled: isDisabled || isGroupDisabled, children: [iconStart, (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium-semibold", alignment: "center", children: children }), badge] }) }));
+}
+LinkTab.displayName = 'LinkTab';
+//# sourceMappingURL=link-tabs.js.map

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

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

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

@@ -1,7 +1,9 @@
 import type { ReactNode } from 'react';
 import { type MenuItemProps as RACMenuItemProps, type MenuProps as RACMenuProps, type MenuTriggerProps as RACMenuTriggerProps } from 'react-aria-components';
 import type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';
-export interface MenuRootProps extends Pick<RACMenuTriggerProps, 'children' | 'onOpenChange' | 'isOpen' | 'defaultOpen'> {
+export interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {
+    /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */
+    children: ReactNode;
 }
 /**
  * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.
@@ -47,9 +49,4 @@ export declare function MenuItem({ children, description, icon, ...props }: Menu
 export declare namespace MenuItem {
     var displayName: string;
 }
-/** Renders a horizontal divider between list items within `Menu`. */
-export declare function MenuDivider(): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuDivider {
-    var displayName: string;
-}
 //# sourceMappingURL=menu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAKL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,SAAS,IAAI,YAAY,EAG9B,KAAK,gBAAgB,IAAI,mBAAmB,EAG7C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAG7G,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;CAAG;AAE9F;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ;;;AAMxB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,eAAe,CAAC,CAAC,CAAC,EACxB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACnC,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,2CAcjE;yBAde,IAAI;;;AAkBpB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACrG,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IACnF,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA4BhF;yBA5Be,QAAQ;;;AAgCxB,qEAAqE;AACrE,wBAAgB,WAAW,4CAE1B;yBAFe,WAAW"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAKL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,SAAS,IAAI,YAAY,EAG9B,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAG7G,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;IACzG,2HAA2H;IAC3H,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ;;;AAMxB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,eAAe,CAAC,CAAC,CAAC,EACxB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACnC,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,2CAcjE;yBAde,IAAI;;;AAkBpB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACrG,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IACnF,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA4BhF;yBA5Be,QAAQ"}

package/dist/commonjs/components/menu/menu.js

@@ -8,10 +8,10 @@ exports.MenuRoot = MenuRoot;
 exports.Menu = Menu;
 exports.MenuSection = MenuSection;
 exports.MenuItem = MenuItem;
-exports.MenuDivider = MenuDivider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_aria_components_1 = require("react-aria-components");
+const is_production_js_1 = require("../../utils/is-production.js");
 const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
 const utils_js_1 = require("../typography/utils.js");
 /**
@@ -25,15 +25,15 @@ function MenuRoot(props) {
 MenuRoot.displayName = 'MenuRoot';
 /** Displays a collapsible list of options and actions that users can choose from. */
 function Menu(props) {
-    if (props.items != null && typeof props.children !== 'function') {
+    if (!(0, is_production_js_1.isProduction)() && props.items != null && typeof props.children !== 'function') {
         console.warn('`Menu` requires `children` to be a function when using `items` prop');
     }
-    return ((0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { placement: "bottom start", offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Menu, { className: "cim-menu", ...props }) }));
+    return ((0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { placement: "bottom start", offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Menu, { ...props, className: "cim-menu" }) }));
 }
 Menu.displayName = 'Menu';
 /** Groups list items within `Menu` into a section. */
 function MenuSection({ title, children, items, ...props }) {
-    if (items != null && typeof children !== 'function') {
+    if (!(0, is_production_js_1.isProduction)() && items != null && typeof children !== 'function') {
         console.warn('`MenuSection` requires `children` to be a function when using `items` prop');
     }
     return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.MenuSection, { ...props, className: "cim-menu-section", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Header, { className: (0, clsx_1.default)('cim-menu-section-header', (0, utils_js_1.textStyle)({ variant: 'small-semibold', tone: 'subtle' })), children: title }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Collection, { items: items, children: children })] }));
@@ -45,9 +45,4 @@ function MenuItem({ children, description, icon, ...props }) {
     return ((0, jsx_runtime_1.jsx)(react_aria_components_1.MenuItem, { ...props, className: "cim-menu-item", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, (0, jsx_runtime_1.jsxs)("div", { className: "cim-menu-item-text", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "description", className: (0, utils_js_1.textStyle)({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] })] })) }));
 }
 MenuItem.displayName = 'MenuItem';
-/** Renders a horizontal divider between list items within `Menu`. */
-function MenuDivider() {
-    return (0, jsx_runtime_1.jsx)(react_aria_components_1.Separator, { className: "cim-menu-divider" });
-}
-MenuDivider.displayName = 'MenuDivider';
 //# sourceMappingURL=menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  Collection as RACCollection,\n  Header as RACHeader,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  type MenuItemProps as RACMenuItemProps,\n  type MenuProps as RACMenuProps,\n  MenuSection as RACMenuSection,\n  MenuTrigger as RACMenuTrigger,\n  type MenuTriggerProps as RACMenuTriggerProps,\n  Separator as RACSeparator,\n  Text as RACText,\n} from 'react-aria-components';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuRootProps\n  extends Pick<RACMenuTriggerProps, 'children' | 'onOpenChange' | 'isOpen' | 'defaultOpen'> {}\n\n/**\n * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n  return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n  extends CollectionProps<T>,\n    Pick<RACMenuProps<T>, 'onScroll'> {\n  /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n  onAction?: (key: Key) => void;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>(props: MenuProps<T>) {\n  if (props.items != null && typeof props.children !== 'function') {\n    console.warn('`Menu` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <CollapsibleList\n      placement=\"bottom start\"\n      offset={5} // 1px border + 4px actual offset\n      maxHeight={315}\n    >\n      <RACMenu className=\"cim-menu\" {...props} />\n    </CollapsibleList>\n  );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = 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 `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACMenuSection {...props} className=\"cim-menu-section\">\n      <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACMenuSection>\n  );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n  extends NavigationProps,\n    Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** Additional description for the menu item. */\n  description?: string;\n  /** An icon representing the menu item. */\n  icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          {icon}\n\n          <div className=\"cim-menu-item-text\">\n            <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n              {children}\n            </RACText>\n\n            {description && (\n              <RACText\n                slot=\"description\"\n                className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n              >\n                {description}\n              </RACText>\n            )}\n          </div>\n        </>\n      )}\n    </RACMenuItem>\n  );\n}\n\nMenuItem.displayName = 'MenuItem';\n\n/** Renders a horizontal divider between list items within `Menu`. */\nexport function MenuDivider() {\n  return <RACSeparator className=\"cim-menu-divider\" />;\n}\n\nMenuDivider.displayName = 'MenuDivider';\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n  Collection as RACCollection,\n  Header as RACHeader,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  type MenuItemProps as RACMenuItemProps,\n  type MenuProps as RACMenuProps,\n  MenuSection as RACMenuSection,\n  MenuTrigger as RACMenuTrigger,\n  type MenuTriggerProps as RACMenuTriggerProps,\n  Text as RACText,\n} from 'react-aria-components';\nimport { isProduction } from '../../utils/is-production.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {\n  /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */\n  children: ReactNode;\n}\n\n/**\n * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n  return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n  extends CollectionProps<T>,\n    Pick<RACMenuProps<T>, 'onScroll'> {\n  /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n  onAction?: (key: Key) => void;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>(props: MenuProps<T>) {\n  if (!isProduction() && props.items != null && typeof props.children !== 'function') {\n    console.warn('`Menu` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <CollapsibleList\n      placement=\"bottom start\"\n      offset={5} // 1px border + 4px actual offset\n      maxHeight={315}\n    >\n      <RACMenu {...props} className=\"cim-menu\" />\n    </CollapsibleList>\n  );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = 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 `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACMenuSection {...props} className=\"cim-menu-section\">\n      <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACMenuSection>\n  );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n  extends NavigationProps,\n    Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** Additional description for the menu item. */\n  description?: string;\n  /** An icon representing the menu item. */\n  icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          {icon}\n\n          <div className=\"cim-menu-item-text\">\n            <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n              {children}\n            </RACText>\n\n            {description && (\n              <RACText\n                slot=\"description\"\n                className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n              >\n                {description}\n              </RACText>\n            )}\n          </div>\n        </>\n      )}\n    </RACMenuItem>\n  );\n}\n\nMenuItem.displayName = 'MenuItem';\n"]}

package/dist/commonjs/components/modal-dialog/modal-dialog.d.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+export interface ModalDialogRenderProps {
+    /** Closes the modal dialog when called. */
+    close: () => void;
+}
+export interface ModalDialogProps extends CommonProps, AriaLabelingProps {
+    /** The contents of the modal dialog. A function may be provided to access a function to close the modal dialog. */
+    children: ReactNode | ((renderProps: ModalDialogRenderProps) => ReactNode);
+    /** The title of the modal dialog. */
+    title: string;
+    /**
+     * The size of the modal dialog.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether to close the modal dialog when the user interacts outside of it or presses the Escape key.
+     * @default true
+     */
+    isDismissible?: boolean;
+    /**
+     * Whether the modal dialog is open (controlled).
+     * If using `DialogRoot`, this prop has no effect - provide `isOpen` to `DialogRoot` instead.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the modal dialog is open by default (uncontrolled).
+     * If using `DialogRoot`, this prop has no effect - provide `defaultOpen` to `DialogRoot` instead.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Handler that is called when the modal dialog's open state changes.
+     * If using `DialogRoot`, this prop has no effect - provide `onOpenChange` to `DialogRoot` instead.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Displays an overlay element which blocks interaction with outside elements.
+ *
+ * See [modal dialog usage guidelines](https://ui.cimpress.io/components/modal-dialog/).
+ */
+declare const _ModalDialog: (props: ModalDialogProps & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;
+export { _ModalDialog as ModalDialog };
+export interface ModalDialogBodyProps {
+    /** The content to render within the modal dialog. */
+    children: ReactNode;
+}
+/** Renders content within `ModalDialog`. */
+export declare function ModalDialogBody(props: ModalDialogBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModalDialogBody {
+    var displayName: string;
+}
+export interface ModalDialogActionsProps {
+    /** Actions that should be available in the modal dialog. */
+    children: ReactNode;
+}
+/** Renders actions within `ModalDialog`. */
+export declare function ModalDialogActions({ children, ...props }: ModalDialogActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModalDialogActions {
+    var displayName: string;
+}
+//# sourceMappingURL=modal-dialog.d.ts.map

package/dist/commonjs/components/modal-dialog/modal-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/modal-dialog/modal-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAYrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW,EAAE,iBAAiB;IACtE,mHAAmH;IACnH,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,sBAAsB,KAAK,SAAS,CAAC,CAAC;IAC3E,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd;;;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,YAAY,8GAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACnC,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAE1D;yBAFe,eAAe;;;AAM/B,MAAM,WAAW,uBAAuB;IACtC,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAMjF;yBANe,kBAAkB"}

package/dist/commonjs/components/modal-dialog/modal-dialog.js

@@ -0,0 +1,46 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalDialog = void 0;
+exports.ModalDialogBody = ModalDialogBody;
+exports.ModalDialogActions = ModalDialogActions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const index_js_1 = require("../../i18n/index.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
+const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.js");
+const x_button_js_1 = require("../internal/x-button/x-button.js");
+const utils_js_1 = require("../typography/utils.js");
+function ModalDialog({ children, title, size = 'medium', UNSAFE_className, UNSAFE_style, isDismissible = true, isOpen, defaultOpen, onOpenChange, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
+        if (!title && !ariaLabel && !ariaLabelledBy) {
+            console.warn('ModalDialog requires one of title / aria-label / aria-labelledby for accessibility');
+        }
+    }, [title, ariaLabel, ariaLabelledBy]);
+    const messages = (0, index_js_1.useLocalizedMessages)('common');
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ModalOverlay, { className: "cim-modal-overlay", isDismissable: isDismissible, isKeyboardDismissDisabled: !isDismissible, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Modal, { className: (0, clsx_1.default)('cim-modal', UNSAFE_className), style: UNSAFE_style, "data-size": size, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, ref: ref, className: "cim-modal-dialog", children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-modal-header", children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-modal-title', (0, utils_js_1.textStyle)({ variant: 'title-5', tone: 'base' })), children: title })), (0, jsx_runtime_1.jsx)(x_button_js_1.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 [modal dialog usage guidelines](https://ui.cimpress.io/components/modal-dialog/).
+ */
+const _ModalDialog = (0, forward_ref_js_1.forwardRef)(ModalDialog, 'ModalDialog');
+exports.ModalDialog = _ModalDialog;
+/** Renders content within `ModalDialog`. */
+function ModalDialogBody(props) {
+    return (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { ...props, className: "cim-modal-body", scrollDirection: "vertical" });
+}
+ModalDialogBody.displayName = 'ModalDialogBody';
+/** Renders actions within `ModalDialog`. */
+function ModalDialogActions({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: "cim-modal-actions", children: children }));
+}
+ModalDialogActions.displayName = 'ModalDialogActions';
+//# sourceMappingURL=modal-dialog.js.map

package/dist/commonjs/components/modal-dialog/modal-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-dialog.js","sourceRoot":"","sources":["../../../../src/components/modal-dialog/modal-dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAiIb,0CAEC;AAUD,gDAMC;;AAjJD,gDAAwB;AAExB,iEAK+B;AAC/B,yDAAkD;AAClD,kDAA2D;AAC3D,qFAA6E;AAC7E,mGAA4F;AAC5F,kEAA2D;AAE3D,qDAAmD;AAuCnD,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,EACpB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACS,EACnB,GAA8B;IAE9B,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO,CACL,uBAAC,oCAAe,IACd,SAAS,EAAC,mBAAmB,EAC7B,aAAa,EAAE,aAAa,EAC5B,yBAAyB,EAAE,CAAC,aAAa,EACzC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,yCAG1B,uBAAC,6BAAQ,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,YAC5F,uBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,kBAAkB,YACzD,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,6DACE,iCAAK,SAAS,EAAC,kBAAkB,aAC9B,KAAK,IAAI,CACR,uBAAC,+BAAU,IACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,YAElF,KAAK,GACK,CACd,EACD,uBAAC,qBAAO,kBAAa,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,IAC5D,EACL,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,IACjE,CACJ,GACS,GACH,GACK,CACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,2BAAU,EAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAEnC,mCAAW;AAOpC,4CAA4C;AAC5C,SAAgB,eAAe,CAAC,KAA2B;IACzD,OAAO,uBAAC,2CAAkB,OAAK,KAAK,EAAE,SAAS,EAAC,gBAAgB,EAAC,eAAe,EAAC,UAAU,GAAG,CAAC;AACjG,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAOhD,4CAA4C;AAC5C,SAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA2B;IAChF,OAAO,CACL,mCAAS,KAAK,EAAE,SAAS,EAAC,mBAAmB,YAC1C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  Dialog as RACDialog,\n  Heading as RACHeading,\n  Modal as RACModal,\n  ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.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 ModalDialogRenderProps {\n  /** Closes the modal dialog when called. */\n  close: () => void;\n}\n\nexport interface ModalDialogProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the modal dialog. A function may be provided to access a function to close the modal dialog. */\n  children: ReactNode | ((renderProps: ModalDialogRenderProps) => ReactNode);\n  /** The title of the modal dialog. */\n  title: string;\n  /**\n   * The size of the modal dialog.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Whether to close the modal dialog when the user interacts outside of it or presses the Escape key.\n   * @default true\n   */\n  isDismissible?: boolean;\n  /**\n   * Whether the modal dialog is open (controlled).\n   * If using `DialogRoot`, this prop has no effect - provide `isOpen` to `DialogRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the modal dialog is open by default (uncontrolled).\n   * If using `DialogRoot`, this prop has no effect - provide `defaultOpen` to `DialogRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the modal dialog's open state changes.\n   * If using `DialogRoot`, this prop has no effect - provide `onOpenChange` to `DialogRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nfunction ModalDialog(\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  }: ModalDialogProps,\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('ModalDialog 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-modal-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-modal', UNSAFE_className)} style={UNSAFE_style} data-size={size}>\n        <RACDialog {...props} ref={ref} className=\"cim-modal-dialog\">\n          {(renderProps) => (\n            <>\n              <div className=\"cim-modal-header\">\n                {title && (\n                  <RACHeading\n                    slot=\"title\"\n                    className={clsx('cim-modal-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 [modal dialog usage guidelines](https://ui.cimpress.io/components/modal-dialog/).\n */\nconst _ModalDialog = forwardRef(ModalDialog, 'ModalDialog');\n\nexport { _ModalDialog as ModalDialog };\n\nexport interface ModalDialogBodyProps {\n  /** The content to render within the modal dialog. */\n  children: ReactNode;\n}\n\n/** Renders content within `ModalDialog`. */\nexport function ModalDialogBody(props: ModalDialogBodyProps) {\n  return <FocusableContainer {...props} className=\"cim-modal-body\" scrollDirection=\"vertical\" />;\n}\n\nModalDialogBody.displayName = 'ModalDialogBody';\n\nexport interface ModalDialogActionsProps {\n  /** Actions that should be available in the modal dialog. */\n  children: ReactNode;\n}\n\n/** Renders actions within `ModalDialog`. */\nexport function ModalDialogActions({ children, ...props }: ModalDialogActionsProps) {\n  return (\n    <div {...props} className=\"cim-modal-actions\">\n      {children}\n    </div>\n  );\n}\n\nModalDialogActions.displayName = 'ModalDialogActions';\n"]}

package/dist/commonjs/components/number-field/number-field.d.ts

@@ -1,6 +1,6 @@
 import { type NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';
 import type { CommonProps, FieldWithPlaceholderProps } from '../types.js';
-export interface NumberFieldProps extends CommonProps, FieldWithPlaceholderProps<number>, Pick<RACNumberFieldProps, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'autoFocus' | 'minValue' | 'maxValue' | 'step' | 'formatOptions' | 'onFocus' | 'onBlur'> {
+export interface NumberFieldProps extends CommonProps, FieldWithPlaceholderProps<number>, Pick<RACNumberFieldProps, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'autoFocus' | 'minValue' | 'maxValue' | 'step' | 'formatOptions' | 'onFocus' | 'onBlur'> {
     /** The current value (controlled). A `null` value means an empty field. */
     value?: number | null;
     /** The default value (uncontrolled). A `null` value means an empty field. */

package/dist/commonjs/components/number-field/number-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,gBACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,mBAAmB,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,SAAS,GACT,QAAQ,CACX;IACH,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AA4DD;;;;GAIG;AACH,QAAA,MAAM,YAAY,kKAAyD,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,gBACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,mBAAmB,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,SAAS,GACT,QAAQ,CACX;IACH,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAwED;;;;GAIG;AACH,QAAA,MAAM,YAAY,kKAAyD,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}

package/dist/commonjs/components/number-field/number-field.js

@@ -7,26 +7,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
-const index_js_1 = require("../../icons/index.js");
+const index_js_1 = require("../../i18n/index.js");
+const index_js_2 = require("../../icons/index.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const icon_button_js_1 = require("../button/icon-button.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
 const utils_js_1 = require("../typography/utils.js");
 function NumberField({ label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, value, defaultValue, onChange, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
-    (0, react_1.useEffect)(() => {
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
             console.warn('NumberField requires one of label / aria-label / aria-labelledby for accessibility');
         }
     }, [label, ariaLabel, ariaLabelledBy]);
+    const messages = (0, index_js_1.useLocalizedMessages)('numberField');
     return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.NumberField, { ...props, ref: ref, className: (0, clsx_1.default)('cim-number-field', UNSAFE_className), style: UNSAFE_style, 
         // NumberField uses `NaN` to signify an empty value, which is unintuitive
         // https://github.com/adobe/react-spectrum/issues/5524
         // https://github.com/adobe/react-spectrum/issues/6971
-        value: value === null ? Number.NaN : value, defaultValue: defaultValue === null ? Number.NaN : defaultValue, onChange: onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-number-field-input-group", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-number-field-input', (0, utils_js_1.textStyle)({ variant: 'medium' })), placeholder: placeholder }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-number-field-spinner", children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { slot: "decrement", icon: (0, jsx_runtime_1.jsx)(index_js_1.IconSubtract, {}), "aria-label": "Decrement", variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)("div", { className: "cim-number-field-spinner-separator" }), (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { slot: "increment", icon: (0, jsx_runtime_1.jsx)(index_js_1.IconAdd, {}), "aria-label": "Increment", variant: "tertiary", size: "small" })] })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
+        value: value === null ? Number.NaN : value, defaultValue: defaultValue === null ? Number.NaN : defaultValue, onChange: onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-number-field-input-group", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-number-field-input', (0, utils_js_1.textStyle)({ variant: 'body' })), placeholder: placeholder }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-number-field-spinner", children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { slot: "decrement", icon: (0, jsx_runtime_1.jsx)(index_js_2.IconSubtract, {}), "aria-label": messages.format('decrement'), variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)("div", { className: "cim-number-field-spinner-separator" }), (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { slot: "increment", icon: (0, jsx_runtime_1.jsx)(index_js_2.IconAdd, {}), "aria-label": messages.format('increment'), variant: "tertiary", size: "small" })] })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
 }
 /**
  * Allows users to edit a number with a keyboard or increment/decrement buttons.

package/dist/commonjs/components/number-field/number-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAqD;AACrD,iEAK+B;AAC/B,yDAAkD;AAClD,mDAA6D;AAC7D,mEAA2D;AAC3D,6DAAsD;AACtD,wEAA4G;AAE5G,qDAAmD;AA4BnD,SAAS,WAAW,CAClB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,wBAAC,mCAAc,OACT,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY;QACnB,yEAAyE;QACzE,sDAAsD;QACtD,sDAAsD;QACtD,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAC1C,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,EAC/D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,aAExF,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,wBAAC,6BAAQ,IAAC,SAAS,EAAC,8BAA8B,aAChD,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,wBAAwB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,EAC3E,WAAW,EAAE,WAAW,GACxB,EACF,iCAAK,SAAS,EAAC,0BAA0B,aAEvC,uBAAC,2BAAU,IAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAE,uBAAC,uBAAY,KAAG,gBAAa,WAAW,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC9G,gCAAK,SAAS,EAAC,oCAAoC,GAAG,EAEtD,uBAAC,2BAAU,IAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAE,uBAAC,kBAAO,KAAG,gBAAa,WAAW,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,IACrG,IACG,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC3C,CAClB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;AAEnD,mCAAW","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  Input as RACInput,\n  NumberField as RACNumberField,\n  type NumberFieldProps as RACNumberFieldProps,\n  Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconAdd, IconSubtract } from '../../icons/index.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, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface NumberFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<number>,\n    Pick<\n      RACNumberFieldProps,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'name'\n      | 'autoFocus'\n      | 'minValue'\n      | 'maxValue'\n      | 'step'\n      | 'formatOptions'\n      | 'onFocus'\n      | 'onBlur'\n    > {\n  /** The current value (controlled). A `null` value means an empty field. */\n  value?: number | null;\n  /** The default value (uncontrolled). A `null` value means an empty field. */\n  defaultValue?: number | null;\n  /** Handler that is called when the value changes. A `null` value means an empty field. */\n  onChange?: (value: number | null) => void;\n}\n\nfunction NumberField(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    value,\n    defaultValue,\n    onChange,\n    ...props\n  }: NumberFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('NumberField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACNumberField\n      {...props}\n      ref={ref}\n      className={clsx('cim-number-field', UNSAFE_className)}\n      style={UNSAFE_style}\n      // NumberField uses `NaN` to signify an empty value, which is unintuitive\n      // https://github.com/adobe/react-spectrum/issues/5524\n      // https://github.com/adobe/react-spectrum/issues/6971\n      value={value === null ? Number.NaN : value}\n      defaultValue={defaultValue === null ? Number.NaN : defaultValue}\n      onChange={onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-number-field-input-group\">\n        <RACInput\n          className={clsx('cim-number-field-input', textStyle({ variant: 'medium' }))}\n          placeholder={placeholder}\n        />\n        <div className=\"cim-number-field-spinner\">\n          {/* TODO: i18n */}\n          <IconButton slot=\"decrement\" icon={<IconSubtract />} aria-label=\"Decrement\" variant=\"tertiary\" size=\"small\" />\n          <div className=\"cim-number-field-spinner-separator\" />\n          {/* TODO: i18n */}\n          <IconButton slot=\"increment\" icon={<IconAdd />} aria-label=\"Increment\" variant=\"tertiary\" size=\"small\" />\n        </div>\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACNumberField>\n  );\n}\n\n/**\n * Allows users to edit a number with a keyboard or increment/decrement buttons.\n *\n * See [number field usage guidelines](https://ui.cimpress.io/components/number-field/).\n */\nconst _NumberField = withStyleProps(forwardRef(NumberField), 'NumberField');\n\nexport { _NumberField as NumberField };\n"]}
+{"version":3,"file":"number-field.js","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAK+B;AAC/B,yDAAkD;AAClD,kDAA2D;AAC3D,mDAA6D;AAC7D,qFAA6E;AAC7E,mEAA2D;AAC3D,6DAAsD;AACtD,wEAA4G;AAE5G,qDAAmD;AA2BnD,SAAS,WAAW,CAClB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,aAAa,CAAC,CAAC;IAErD,OAAO,CACL,wBAAC,mCAAc,OACT,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY;QACnB,yEAAyE;QACzE,sDAAsD;QACtD,sDAAsD;QACtD,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAC1C,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,EAC/D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,aAExF,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,wBAAC,6BAAQ,IAAC,SAAS,EAAC,8BAA8B,aAChD,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,wBAAwB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,EACzE,WAAW,EAAE,WAAW,GACxB,EACF,iCAAK,SAAS,EAAC,0BAA0B,aACvC,uBAAC,2BAAU,IACT,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,uBAAC,uBAAY,KAAG,gBACV,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,EACxC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,gCAAK,SAAS,EAAC,oCAAoC,GAAG,EACtD,uBAAC,2BAAU,IACT,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,uBAAC,kBAAO,KAAG,gBACL,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,EACxC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,IACE,IACG,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC3C,CAClB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;AAEnD,mCAAW","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n  Input as RACInput,\n  NumberField as RACNumberField,\n  type NumberFieldProps as RACNumberFieldProps,\n  Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconAdd, IconSubtract } 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, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface NumberFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<number>,\n    Pick<\n      RACNumberFieldProps,\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'autoFocus'\n      | 'minValue'\n      | 'maxValue'\n      | 'step'\n      | 'formatOptions'\n      | 'onFocus'\n      | 'onBlur'\n    > {\n  /** The current value (controlled). A `null` value means an empty field. */\n  value?: number | null;\n  /** The default value (uncontrolled). A `null` value means an empty field. */\n  defaultValue?: number | null;\n  /** Handler that is called when the value changes. A `null` value means an empty field. */\n  onChange?: (value: number | null) => void;\n}\n\nfunction NumberField(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    UNSAFE_className,\n    UNSAFE_style,\n    value,\n    defaultValue,\n    onChange,\n    ...props\n  }: NumberFieldProps,\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('NumberField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('numberField');\n\n  return (\n    <RACNumberField\n      {...props}\n      ref={ref}\n      className={clsx('cim-number-field', UNSAFE_className)}\n      style={UNSAFE_style}\n      // NumberField uses `NaN` to signify an empty value, which is unintuitive\n      // https://github.com/adobe/react-spectrum/issues/5524\n      // https://github.com/adobe/react-spectrum/issues/6971\n      value={value === null ? Number.NaN : value}\n      defaultValue={defaultValue === null ? Number.NaN : defaultValue}\n      onChange={onChange ? (value) => onChange(Number.isNaN(value) ? null : value) : undefined}\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-number-field-input-group\">\n        <RACInput\n          className={clsx('cim-number-field-input', textStyle({ variant: 'body' }))}\n          placeholder={placeholder}\n        />\n        <div className=\"cim-number-field-spinner\">\n          <IconButton\n            slot=\"decrement\"\n            icon={<IconSubtract />}\n            aria-label={messages.format('decrement')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n          <div className=\"cim-number-field-spinner-separator\" />\n          <IconButton\n            slot=\"increment\"\n            icon={<IconAdd />}\n            aria-label={messages.format('increment')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n        </div>\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACNumberField>\n  );\n}\n\n/**\n * Allows users to edit a number with a keyboard or increment/decrement buttons.\n *\n * See [number field usage guidelines](https://ui.cimpress.io/components/number-field/).\n */\nconst _NumberField = withStyleProps(forwardRef(NumberField), 'NumberField');\n\nexport { _NumberField as NumberField };\n"]}