@cimpress-ui/react 0.2.1 → 0.4.0

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

@@ -0,0 +1,143 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_TagField = void 0;
+exports.UNSTABLE_TagFieldItem = UNSTABLE_TagFieldItem;
+exports.UNSTABLE_TagFieldSection = UNSTABLE_TagFieldSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const form_1 = require("@react-aria/form");
+const utils_1 = require("@react-aria/utils");
+const form_2 = require("@react-stately/form");
+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 localization_provider_js_1 = require("../../i18n/localization-provider.js");
+const index_js_1 = require("../../icons/index.js");
+const is_production_js_1 = require("../../utils/is-production.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 collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
+const form_field_js_1 = require("../internal/form-field/form-field.js");
+const stack_js_1 = require("../spacing/stack/stack.js");
+const text_js_1 = require("../typography/text.js");
+const utils_js_1 = require("../typography/utils.js");
+const tag_field_input_js_1 = require("./tag-field-input.js");
+const tag_field_list_box_js_1 = require("./tag-field-list-box.js");
+const tag_field_tags_js_1 = require("./tag-field-tags.js");
+function UNSTABLE_TagField({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, inputValue: consumerInputValue, defaultInputValue: defaultConsumerInputValue, onInputChange, name, validate, onScroll, selectedKeys: consumerSelectedKeys, defaultSelectedKeys: defaultConsumerSelectedKeys, onSelectionChange, id, renderEmptyState = () => ((0, jsx_runtime_1.jsx)(stack_js_1.Stack, { gap: 0, justify: "center", UNSAFE_style: { height: 24 }, children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "p", variant: "medium", tone: "base", children: "No items selected." }) })), ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled, isInvalid } = props;
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    if (!(0, is_production_js_1.isProduction)() && items != null && typeof children !== 'function') {
+        console.warn('`TagField` requires `children` to be a function when using `items` prop');
+    }
+    const messages = (0, localization_provider_js_1.useLocalizedMessages)('tagField');
+    // State
+    const [defaultSelectedKeys] = (0, react_1.useState)(() => defaultConsumerSelectedKeys ?? new Set());
+    const [selectedKeys, setSelectedKeys] = (0, utils_2.useControlledState)(consumerSelectedKeys, defaultSelectedKeys, onSelectionChange);
+    const [inputValue, setInputValue] = (0, utils_2.useControlledState)(consumerInputValue, defaultConsumerInputValue ?? '', onInputChange);
+    const selectedSet = (0, react_1.useMemo)(() => {
+        // eslint-disable-next-line unicorn/no-instanceof-builtins
+        if (selectedKeys instanceof Set) {
+            return new Set(selectedKeys.values());
+        }
+        return new Set(selectedKeys);
+    }, [selectedKeys]);
+    // Validation
+    const inputId = (0, utils_1.useId)(id);
+    const formInputRef = (0, react_1.useRef)(null);
+    const validationState = (0, form_2.useFormValidationState)({
+        name,
+        value: (0, react_1.useMemo)(() => ({ selectedKeys: selectedSet, inputValue }), [selectedSet, inputValue]),
+        isInvalid,
+        isRequired,
+        validate,
+        validationBehavior: 'native',
+    });
+    (0, utils_1.useFormReset)(formInputRef, [selectedSet, inputValue], ([a, b]) => {
+        setSelectedKeys(a);
+        setInputValue(b);
+    });
+    (0, form_1.useFormValidation)({
+        focus: () => {
+            // Querying by element ID because a ref is always null here, I don't know why :(
+            document.getElementById(inputId)?.focus();
+        },
+        isInvalid,
+        isRequired,
+        validate,
+        validationBehavior: 'native',
+    }, validationState, formInputRef);
+    // Event handlers
+    // Commit validation on input blur if the values have changed
+    const inputValueOnFocus = (0, react_1.useRef)(inputValue);
+    const selectedSetOnFocus = (0, react_1.useRef)(selectedSet);
+    const onFocusChange = (isFocused) => {
+        if (isFocused) {
+            inputValueOnFocus.current = inputValue;
+            selectedSetOnFocus.current = selectedSet;
+        }
+        else if (inputValue !== inputValueOnFocus.current || selectedSet !== selectedSetOnFocus.current) {
+            validationState.commitValidation();
+        }
+    };
+    const onItemSelectionChange = (key) => {
+        if (selectedSet.has(key)) {
+            selectedSet.delete(key);
+        }
+        else {
+            selectedSet.add(key);
+        }
+        setSelectedKeys(new Set(selectedSet.values()));
+        validationState.commitValidation();
+    };
+    // Text slots
+    const descriptionId = (0, utils_1.useSlotId)([Boolean(description)]);
+    const errorMessageId = (0, utils_1.useSlotId)([
+        Boolean(error || validationState.displayValidation.validationErrors),
+        validationState.displayValidation.isInvalid,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.ComboBox, { ...props, ref: ref, id: inputId, className: (0, clsx_1.default)('cim-combo-box', 'cim-tag-field', UNSAFE_className), style: UNSAFE_style, 
+                // Force no internal selection - we handle selection manually
+                selectedKey: null, inputValue: inputValue, onInputChange: setInputValue, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, onSelectionChange: (key) => {
+                    if (key) {
+                        onItemSelectionChange(key);
+                    }
+                }, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Provider, { values: [
+                        [react_aria_components_1.TextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],
+                        [react_aria_components_1.GroupContext, { isInvalid: validationState.displayValidation.isInvalid, isDisabled }],
+                        [react_aria_components_1.FieldErrorContext, validationState.displayValidation],
+                    ], children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), (0, jsx_runtime_1.jsx)(tag_field_tags_js_1.TagFieldTags, { inputId: inputId, selectedKeys: selectedSet, isDisabled: isDisabled || isReadOnly, renderEmptyState: renderEmptyState, onRemove: onItemSelectionChange }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-combo-box-input-group", children: [(0, jsx_runtime_1.jsx)(tag_field_input_js_1.TagFieldInput, { "aria-describedby": props['aria-describedby'], isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: validationState.displayValidation.isInvalid, placeholder: selectedSet.size === 0 && placeholder
+                                        ? placeholder
+                                        : messages.format('itemsSelected', { selectedItemCount: selectedSet.size }), onFocusChange: onFocusChange }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(tag_field_list_box_js_1.TagFieldListBox, { items: items, selectedKeys: selectedSet, setSelectedKeys: setSelectedKeys, onScroll: onScroll, children: children }) })] }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { ref: formInputRef, style: { display: 'none' }, value: selectedSet.size || '', required: isRequired, "aria-invalid": validationState.displayValidation.isInvalid || undefined, onChange: () => { } }), name && [...selectedSet].map((value) => (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: value }, value))] }));
+}
+/**
+ * Allows users to filter a collapsible list and select multiple items from it.
+ *
+ * See [tag field usage guidelines](https://ui.cimpress.com/components/tag-field)
+ */
+const _UNSTABLE_TagField = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_TagField), 'TagField');
+exports.UNSTABLE_TagField = _UNSTABLE_TagField;
+/** Renders a single list item within `TagField`. */
+function UNSTABLE_TagFieldItem({ children, ...props }) {
+    const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-combo-box-item cim-tag-field-item cim-checkbox", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-checkbox-toggle-wrapper", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("div", { className: "cim-checkbox-toggle", children: (0, jsx_runtime_1.jsx)(index_js_1.IconCheckBold, {}) }) }), (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 })] })) }));
+}
+UNSTABLE_TagFieldItem.displayName = 'TagFieldItem';
+/** Groups list items within `TagField` into a section. */
+function UNSTABLE_TagFieldSection({ title, children, items, ...props }) {
+    if (!(0, is_production_js_1.isProduction)() && items != null && typeof children !== 'function') {
+        console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBoxSection, { ...props, className: "cim-combo-box-section", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Header, { className: (0, clsx_1.default)('cim-combo-box-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 })] }));
+}
+UNSTABLE_TagFieldSection.displayName = 'TagFieldSection';
+//# sourceMappingURL=tag-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-field.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useId, useSlotId } from '@react-aria/utils';\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { useMemo, useRef, useState, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  ComboBox as RACComboBox,\n  Group as RACGroup,\n  Header as RACHeader,\n  Input as RACInput,\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  Provider as RACProvider,\n  TextContext as RACTextContext,\n  GroupContext as RACGroupContext,\n  FieldErrorContext as RACFieldErrorContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { IconCheckBold, 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 { Stack } from '../spacing/stack/stack.js';\nimport type { TagGroupProps } from '../tag/tag-group.js';\nimport type {\n  CollectionItem,\n  CollectionProps,\n  CommonProps,\n  FieldWithPlaceholderProps,\n  Key,\n  StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\nimport { TagFieldInput } from './tag-field-input.js';\nimport { TagFieldListBox } from './tag-field-list-box.js';\nimport { TagFieldTags } from './tag-field-tags.js';\n\n/** Represents the state of the `TagField` component for validation purposes. */\nexport interface UNSTABLE_TagFieldValidationValue {\n  /** The selected keys in the TagField. */\n  selectedKeys: Set<Key> | null;\n  /** The value of the TagField input. */\n  inputValue: string;\n}\n\nexport interface UNSTABLE_TagFieldProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldWithPlaceholderProps<UNSTABLE_TagFieldValidationValue>,\n    CollectionProps<T>,\n    Pick<\n      RACComboBoxProps<T>,\n      | 'isRequired'\n      | 'isDisabled'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'>,\n    Pick<TagGroupProps<T>, 'renderEmptyState'> {\n  selectedKeys?: Iterable<Key>;\n  defaultSelectedKeys?: Iterable<Key>;\n  onSelectionChange?: (keys: Set<Key>) => void;\n}\n\nfunction UNSTABLE_TagField<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    inputValue: consumerInputValue,\n    defaultInputValue: defaultConsumerInputValue,\n    onInputChange,\n    name,\n    validate,\n    onScroll,\n    selectedKeys: consumerSelectedKeys,\n    defaultSelectedKeys: defaultConsumerSelectedKeys,\n    onSelectionChange,\n    id,\n    renderEmptyState = () => (\n      <Stack gap={0} justify=\"center\" UNSAFE_style={{ height: 24 }}>\n        <Text as=\"p\" variant=\"medium\" tone=\"base\">\n          No items selected.\n        </Text>\n      </Stack>\n    ),\n    ...props\n  }: UNSTABLE_TagFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled, isInvalid } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('TagField 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('`TagField` requires `children` to be a function when using `items` prop');\n  }\n\n  const messages = useLocalizedMessages('tagField');\n\n  // State\n\n  const [defaultSelectedKeys] = useState(() => defaultConsumerSelectedKeys ?? new Set<Key>());\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    consumerSelectedKeys,\n    defaultSelectedKeys,\n    onSelectionChange,\n  );\n  const [inputValue, setInputValue] = useControlledState(\n    consumerInputValue,\n    defaultConsumerInputValue ?? '',\n    onInputChange,\n  );\n\n  const selectedSet = useMemo(() => {\n    // eslint-disable-next-line unicorn/no-instanceof-builtins\n    if (selectedKeys instanceof Set) {\n      return new Set<Key>(selectedKeys.values());\n    }\n\n    return new Set<Key>(selectedKeys);\n  }, [selectedKeys]);\n\n  // Validation\n\n  const inputId = useId(id);\n  const formInputRef = useRef<HTMLInputElement>(null);\n\n  const validationState = useFormValidationState({\n    name,\n    value: useMemo(() => ({ selectedKeys: selectedSet, inputValue }), [selectedSet, inputValue]),\n    isInvalid,\n    isRequired,\n    validate,\n    validationBehavior: 'native',\n  });\n\n  useFormReset<[Set<Key>, string]>(formInputRef, [selectedSet, inputValue], ([a, b]) => {\n    setSelectedKeys(a);\n    setInputValue(b);\n  });\n\n  useFormValidation(\n    {\n      focus: () => {\n        // Querying by element ID because a ref is always null here, I don't know why :(\n        document.getElementById(inputId)?.focus();\n      },\n      isInvalid,\n      isRequired,\n      validate,\n      validationBehavior: 'native',\n    },\n    validationState,\n    formInputRef,\n  );\n\n  // Event handlers\n\n  // Commit validation on input blur if the values have changed\n  const inputValueOnFocus = useRef(inputValue);\n  const selectedSetOnFocus = useRef(selectedSet);\n\n  const onFocusChange = (isFocused: boolean) => {\n    if (isFocused) {\n      inputValueOnFocus.current = inputValue;\n      selectedSetOnFocus.current = selectedSet;\n    } else if (inputValue !== inputValueOnFocus.current || selectedSet !== selectedSetOnFocus.current) {\n      validationState.commitValidation();\n    }\n  };\n\n  const onItemSelectionChange = (key: Key) => {\n    if (selectedSet.has(key)) {\n      selectedSet.delete(key);\n    } else {\n      selectedSet.add(key);\n    }\n\n    setSelectedKeys(new Set(selectedSet.values()));\n    validationState.commitValidation();\n  };\n\n  // Text slots\n\n  const descriptionId = useSlotId([Boolean(description)]);\n\n  const errorMessageId = useSlotId([\n    Boolean(error || validationState.displayValidation.validationErrors),\n    validationState.displayValidation.isInvalid,\n  ]);\n\n  return (\n    <>\n      <RACComboBox\n        {...props}\n        ref={ref}\n        id={inputId}\n        className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n        style={UNSAFE_style}\n        // Force no internal selection - we handle selection manually\n        selectedKey={null}\n        inputValue={inputValue}\n        onInputChange={setInputValue}\n        menuTrigger=\"focus\"\n        isReadOnly={isReadOnly}\n        data-readonly={isReadOnly ? true : undefined}\n        onSelectionChange={(key) => {\n          if (key) {\n            onItemSelectionChange(key);\n          }\n        }}\n      >\n        <RACProvider\n          values={[\n            [RACTextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],\n            [RACGroupContext, { isInvalid: validationState.displayValidation.isInvalid, isDisabled }],\n            [RACFieldErrorContext, validationState.displayValidation],\n          ]}\n        >\n          <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n            {label}\n          </FormFieldLabel>\n\n          <TagFieldTags<T>\n            inputId={inputId}\n            selectedKeys={selectedSet}\n            isDisabled={isDisabled || isReadOnly}\n            renderEmptyState={renderEmptyState}\n            onRemove={onItemSelectionChange}\n          />\n\n          <RACGroup className=\"cim-combo-box-input-group\">\n            <TagFieldInput\n              aria-describedby={props['aria-describedby']}\n              isReadOnly={isReadOnly}\n              isRequired={isRequired}\n              isInvalid={validationState.displayValidation.isInvalid}\n              placeholder={\n                selectedSet.size === 0 && placeholder\n                  ? placeholder\n                  : messages.format('itemsSelected', { selectedItemCount: selectedSet.size })\n              }\n              onFocusChange={onFocusChange}\n            />\n            <RACButton className=\"cim-combo-box-button\">\n              <IconChevronDown />\n            </RACButton>\n          </RACGroup>\n\n          <FormFieldError>{error}</FormFieldError>\n          <FormFieldDescription>{description}</FormFieldDescription>\n\n          <CollapsibleList\n            offset={5} // 1px border + 4px actual offset\n            maxHeight={315}\n          >\n            <TagFieldListBox<T>\n              items={items}\n              selectedKeys={selectedSet}\n              setSelectedKeys={setSelectedKeys}\n              onScroll={onScroll}\n            >\n              {children}\n            </TagFieldListBox>\n          </CollapsibleList>\n        </RACProvider>\n      </RACComboBox>\n\n      {/* This input is used for native form validation. We can't use the combo box input because its value has no relation to the selected values. */}\n      <RACInput\n        ref={formInputRef}\n        style={{ display: 'none' }}\n        value={selectedSet.size || ''}\n        required={isRequired}\n        aria-invalid={validationState.displayValidation.isInvalid || undefined}\n        onChange={() => {}}\n      />\n\n      {/* These hidden inputs provide values when a form is submitted. */}\n      {name && [...selectedSet].map((value) => <input type=\"hidden\" key={value} name={name} value={value} />)}\n    </>\n  );\n}\n\n/**\n * Allows users to filter a collapsible list and select multiple items from it.\n *\n * See [tag field usage guidelines](https://ui.cimpress.com/components/tag-field)\n */\nconst _UNSTABLE_TagField = withStyleProps(forwardRef(UNSTABLE_TagField), 'TagField');\n\nexport { _UNSTABLE_TagField as UNSTABLE_TagField };\n\nexport interface UNSTABLE_TagFieldItemProps<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 `TagField`. */\nexport function UNSTABLE_TagFieldItem<T extends CollectionItem>({ children, ...props }: UNSTABLE_TagFieldItemProps<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 cim-tag-field-item cim-checkbox\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <div className=\"cim-checkbox-toggle-wrapper\" aria-hidden>\n            <div className=\"cim-checkbox-toggle\">\n              <IconCheckBold />\n            </div>\n          </div>\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nUNSTABLE_TagFieldItem.displayName = 'TagFieldItem';\n\nexport interface UNSTABLE_TagFieldSectionProps<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 `TagField` into a section. */\nexport function UNSTABLE_TagFieldSection<T extends CollectionItem>({\n  title,\n  children,\n  items,\n  ...props\n}: UNSTABLE_TagFieldSectionProps<T>) {\n  if (!isProduction() && items != null && typeof children !== 'function') {\n    console.warn('`TagFieldSection` 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\nUNSTABLE_TagFieldSection.displayName = 'TagFieldSection';\n"]}

package/dist/commonjs/components/text-inputs/text-area.d.ts

@@ -1,8 +1,12 @@
 import { type TextAreaProps as RACTextAreaProps, type TextFieldProps as RACTextFieldProps } from 'react-aria-components';
 import type { CommonProps, FieldWithPlaceholderProps } from '../types.js';
-export interface TextAreaProps extends CommonProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength' | 'onFocus' | 'onBlur'>, Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'rows' | 'spellCheck' | 'wrap'> {
+export interface TextAreaProps extends CommonProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength' | 'onFocus' | 'onBlur'>, Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'rows' | 'spellCheck' | 'wrap'> {
 }
-/** Allows users to enter multiple lines of text with a keyboard. */
+/**
+ * Allows users to enter multiple lines of text with a keyboard.
+ *
+ * See [text area usage guidelines](https://ui.cimpress.io/components/text-area/).
+ */
 declare const _TextArea: (props: TextAreaProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _TextArea as TextArea };
 //# sourceMappingURL=text-area.d.ts.map

package/dist/commonjs/components/text-inputs/text-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,cAAc,IAAI,iBAAiB,EAEzC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,aACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,QAAQ,CACX,EACD,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;CAAG;AAuDhG,oEAAoE;AACpE,QAAA,MAAM,SAAS,+JAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,cAAc,IAAI,iBAAiB,EAEzC,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,aACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,QAAQ,CACX,EACD,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;CAAG;AAsDhG;;;;GAIG;AACH,QAAA,MAAM,SAAS,+JAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}

package/dist/commonjs/components/text-inputs/text-area.js

@@ -7,23 +7,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
 const utils_js_1 = require("../typography/utils.js");
 function TextArea({ label, description, error: errorMessage, placeholder, autoCapitalize, autoCorrect, rows, spellCheck, wrap, UNSAFE_className, UNSAFE_style, ...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('TextArea requires one of label / aria-label / aria-labelledby for accessibility');
         }
     }, [label, ariaLabel, ariaLabelledBy]);
     return ((0, jsx_runtime_1.jsx)(react_aria_components_1.TextField, { ...props, ref: ref, className: (0, clsx_1.default)('cim-text-area', UNSAFE_className), style: UNSAFE_style, children: ({ isDisabled, isInvalid, isRequired }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Group, { className: "cim-text-area-input-group", isDisabled: isDisabled, isInvalid: isInvalid, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.TextArea, { className: (0, clsx_1.default)('cim-text-area-input', (0, utils_js_1.textStyle)({ variant: 'medium' })), placeholder: placeholder, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, rows: rows, spellCheck: spellCheck, wrap: wrap }) }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] })) }));
 }
-// TODO: add link to usage guidelines
-/** Allows users to enter multiple lines of text with a keyboard. */
+/**
+ * Allows users to enter multiple lines of text with a keyboard.
+ *
+ * See [text area usage guidelines](https://ui.cimpress.io/components/text-area/).
+ */
 const _TextArea = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(TextArea), 'TextArea');
 exports.TextArea = _TextArea;
 //# sourceMappingURL=text-area.js.map

package/dist/commonjs/components/text-inputs/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAqD;AACrD,iEAM+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,wEAA4G;AAE5G,qDAAmD;AA0BnD,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACM,EAChB,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,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,uBAAC,iCAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YAEvG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC1C,6DACE,uBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EACjB,uBAAC,6BAAQ,IAAC,SAAS,EAAC,2BAA2B,EAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAC1F,uBAAC,gCAAW,IACV,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,EACxE,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,GACO,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACY,CAChB,CAAC;AACJ,CAAC;AAED,qCAAqC;AACrC,oEAAoE;AACpE,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  TextArea as RACTextArea,\n  TextField as RACTextField,\n  type TextAreaProps as RACTextAreaProps,\n  type TextFieldProps as RACTextFieldProps,\n  Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.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 TextAreaProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<string>,\n    Pick<\n      RACTextFieldProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'name'\n      | 'type'\n      | 'autoFocus'\n      | 'autoComplete'\n      | 'inputMode'\n      | 'minLength'\n      | 'maxLength'\n      | 'onFocus'\n      | 'onBlur'\n    >,\n    Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'rows' | 'spellCheck' | 'wrap'> {}\n\nfunction TextArea(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    autoCapitalize,\n    autoCorrect,\n    rows,\n    spellCheck,\n    wrap,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: TextAreaProps,\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('TextArea requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACTextField {...props} ref={ref} className={clsx('cim-text-area', UNSAFE_className)} style={UNSAFE_style}>\n      {/* RAC doesn't pass `isDisabled` or `isInvalid` to `Group` through context as it does with `NumberField`, so we need to pass them manually */}\n      {({ isDisabled, isInvalid, isRequired }) => (\n        <>\n          <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n            {label}\n          </FormFieldLabel>\n          <RACGroup className=\"cim-text-area-input-group\" isDisabled={isDisabled} isInvalid={isInvalid}>\n            <RACTextArea\n              className={clsx('cim-text-area-input', textStyle({ variant: 'medium' }))}\n              placeholder={placeholder}\n              autoCapitalize={autoCapitalize}\n              autoCorrect={autoCorrect}\n              rows={rows}\n              spellCheck={spellCheck}\n              wrap={wrap}\n            />\n          </RACGroup>\n          <FormFieldError>{errorMessage}</FormFieldError>\n          <FormFieldDescription>{description}</FormFieldDescription>\n        </>\n      )}\n    </RACTextField>\n  );\n}\n\n// TODO: add link to usage guidelines\n/** Allows users to enter multiple lines of text with a keyboard. */\nconst _TextArea = withStyleProps(forwardRef(TextArea), 'TextArea');\n\nexport { _TextArea as TextArea };\n"]}
+{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-area.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAM+B;AAC/B,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,wEAA4G;AAE5G,qDAAmD;AAyBnD,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACM,EAChB,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,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,uBAAC,iCAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YAEvG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC1C,6DACE,uBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EACjB,uBAAC,6BAAQ,IAAC,SAAS,EAAC,2BAA2B,EAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAC1F,uBAAC,gCAAW,IACV,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,EACxE,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,GACO,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACY,CAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n  TextArea as RACTextArea,\n  TextField as RACTextField,\n  type TextAreaProps as RACTextAreaProps,\n  type TextFieldProps as RACTextFieldProps,\n  Group as RACGroup,\n} 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 { 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 TextAreaProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<string>,\n    Pick<\n      RACTextFieldProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'type'\n      | 'autoFocus'\n      | 'autoComplete'\n      | 'inputMode'\n      | 'minLength'\n      | 'maxLength'\n      | 'onFocus'\n      | 'onBlur'\n    >,\n    Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'rows' | 'spellCheck' | 'wrap'> {}\n\nfunction TextArea(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    autoCapitalize,\n    autoCorrect,\n    rows,\n    spellCheck,\n    wrap,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: TextAreaProps,\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('TextArea requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACTextField {...props} ref={ref} className={clsx('cim-text-area', UNSAFE_className)} style={UNSAFE_style}>\n      {/* RAC doesn't pass `isDisabled` or `isInvalid` to `Group` through context as it does with `NumberField`, so we need to pass them manually */}\n      {({ isDisabled, isInvalid, isRequired }) => (\n        <>\n          <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n            {label}\n          </FormFieldLabel>\n          <RACGroup className=\"cim-text-area-input-group\" isDisabled={isDisabled} isInvalid={isInvalid}>\n            <RACTextArea\n              className={clsx('cim-text-area-input', textStyle({ variant: 'medium' }))}\n              placeholder={placeholder}\n              autoCapitalize={autoCapitalize}\n              autoCorrect={autoCorrect}\n              rows={rows}\n              spellCheck={spellCheck}\n              wrap={wrap}\n            />\n          </RACGroup>\n          <FormFieldError>{errorMessage}</FormFieldError>\n          <FormFieldDescription>{description}</FormFieldDescription>\n        </>\n      )}\n    </RACTextField>\n  );\n}\n\n/**\n * Allows users to enter multiple lines of text with a keyboard.\n *\n * See [text area usage guidelines](https://ui.cimpress.io/components/text-area/).\n */\nconst _TextArea = withStyleProps(forwardRef(TextArea), 'TextArea');\n\nexport { _TextArea as TextArea };\n"]}

package/dist/commonjs/components/text-inputs/text-field.d.ts

@@ -1,6 +1,6 @@
 import { type TextFieldProps as RACTextFieldProps } from 'react-aria-components';
 import type { CommonProps, FieldWithPlaceholderProps } from '../types.js';
-export interface TextFieldProps extends CommonProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength' | 'pattern' | 'onFocus' | 'onBlur'> {
+export interface TextFieldProps extends CommonProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength' | 'pattern' | 'onFocus' | 'onBlur'> {
 }
 /**
  * Allows users to enter a single line of text with a keyboard.

package/dist/commonjs/components/text-inputs/text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,cAAc,IAAI,iBAAiB,EAEzC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,cACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,CACX;CAAG;AAoCR;;;;GAIG;AACH,QAAA,MAAM,UAAU,gKAAqD,CAAC;AAEtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,cAAc,IAAI,iBAAiB,EAEzC,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,cACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,CACX;CAAG;AAoCR;;;;GAIG;AACH,QAAA,MAAM,UAAU,gKAAqD,CAAC;AAEtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/commonjs/components/text-inputs/text-field.js

@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
 const utils_js_1 = require("../typography/utils.js");
 function TextField({ label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, ...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('TextField requires one of label / aria-label / aria-labelledby for accessibility');
         }

package/dist/commonjs/components/text-inputs/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAqD;AACrD,iEAK+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,wEAA4G;AAE5G,qDAAmD;AA0BnD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EAClH,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,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,uBAAC,iCAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YAExG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC1C,6DACE,uBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EACjB,uBAAC,6BAAQ,IAAC,SAAS,EAAC,4BAA4B,EAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAC3F,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,EACzE,WAAW,EAAE,WAAW,GACxB,GACO,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACY,CAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,SAAS,CAAC,EAAE,WAAW,CAAC,CAAC;AAE/C,+BAAS","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  Input as RACInput,\n  TextField as RACTextField,\n  type TextFieldProps as RACTextFieldProps,\n  Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.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 TextFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<string>,\n    Pick<\n      RACTextFieldProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'name'\n      | 'type'\n      | 'autoFocus'\n      | 'autoComplete'\n      | 'inputMode'\n      | 'minLength'\n      | 'maxLength'\n      | 'pattern'\n      | 'onFocus'\n      | 'onBlur'\n    > {}\n\nfunction TextField(\n  { label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, ...props }: TextFieldProps,\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('TextField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACTextField {...props} ref={ref} className={clsx('cim-text-field', UNSAFE_className)} style={UNSAFE_style}>\n      {/* RAC doesn't pass `isDisabled` or `isInvalid` to `Group` through context as it does with `NumberField`, so we need to pass them manually */}\n      {({ isDisabled, isInvalid, isRequired }) => (\n        <>\n          <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n            {label}\n          </FormFieldLabel>\n          <RACGroup className=\"cim-text-field-input-group\" isDisabled={isDisabled} isInvalid={isInvalid}>\n            <RACInput\n              className={clsx('cim-text-field-input', textStyle({ variant: 'medium' }))}\n              placeholder={placeholder}\n            />\n          </RACGroup>\n          <FormFieldError>{errorMessage}</FormFieldError>\n          <FormFieldDescription>{description}</FormFieldDescription>\n        </>\n      )}\n    </RACTextField>\n  );\n}\n\n/**\n * Allows users to enter a single line of text with a keyboard.\n *\n * See [text field usage guidelines](https://ui.cimpress.io/components/text-field/).\n */\nconst _TextField = withStyleProps(forwardRef(TextField), 'TextField');\n\nexport { _TextField as TextField };\n"]}
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAK+B;AAC/B,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,wEAA4G;AAE5G,qDAAmD;AAyBnD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EAClH,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,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,uBAAC,iCAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YAExG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC1C,6DACE,uBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EACjB,uBAAC,6BAAQ,IAAC,SAAS,EAAC,4BAA4B,EAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAC3F,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAsB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,EACzE,WAAW,EAAE,WAAW,GACxB,GACO,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACY,CAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,SAAS,CAAC,EAAE,WAAW,CAAC,CAAC;AAE/C,+BAAS","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n  Input as RACInput,\n  TextField as RACTextField,\n  type TextFieldProps as RACTextFieldProps,\n  Group as RACGroup,\n} 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 { 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 TextFieldProps\n  extends CommonProps,\n    FieldWithPlaceholderProps<string>,\n    Pick<\n      RACTextFieldProps,\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'type'\n      | 'autoFocus'\n      | 'autoComplete'\n      | 'inputMode'\n      | 'minLength'\n      | 'maxLength'\n      | 'pattern'\n      | 'onFocus'\n      | 'onBlur'\n    > {}\n\nfunction TextField(\n  { label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, ...props }: TextFieldProps,\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('TextField requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACTextField {...props} ref={ref} className={clsx('cim-text-field', UNSAFE_className)} style={UNSAFE_style}>\n      {/* RAC doesn't pass `isDisabled` or `isInvalid` to `Group` through context as it does with `NumberField`, so we need to pass them manually */}\n      {({ isDisabled, isInvalid, isRequired }) => (\n        <>\n          <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n            {label}\n          </FormFieldLabel>\n          <RACGroup className=\"cim-text-field-input-group\" isDisabled={isDisabled} isInvalid={isInvalid}>\n            <RACInput\n              className={clsx('cim-text-field-input', textStyle({ variant: 'medium' }))}\n              placeholder={placeholder}\n            />\n          </RACGroup>\n          <FormFieldError>{errorMessage}</FormFieldError>\n          <FormFieldDescription>{description}</FormFieldDescription>\n        </>\n      )}\n    </RACTextField>\n  );\n}\n\n/**\n * Allows users to enter a single line of text with a keyboard.\n *\n * See [text field usage guidelines](https://ui.cimpress.io/components/text-field/).\n */\nconst _TextField = withStyleProps(forwardRef(TextField), 'TextField');\n\nexport { _TextField as TextField };\n"]}

package/dist/commonjs/components/toast/toast-region.d.ts

@@ -0,0 +1,5 @@
+import { UNSTABLE_ToastQueue as RACToastQueue } from 'react-aria-components';
+import type { UNSTABLE_ToastContent as ToastContent } from './types.js';
+export declare const UNSTABLE_toastQueue: RACToastQueue<ToastContent>;
+export declare function UNSTABLE_ToastRegion(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toast-region.d.ts.map

package/dist/commonjs/components/toast/toast-region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-region.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toast-region.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,aAAa,EAA0C,MAAM,uBAAuB,CAAC;AAGrH,OAAO,KAAK,EAAE,qBAAqB,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AAExE,eAAO,MAAM,mBAAmB,6BAU9B,CAAC;AAEH,wBAAgB,oBAAoB,4CAMnC"}

package/dist/commonjs/components/toast/toast-region.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_toastQueue = void 0;
+exports.UNSTABLE_ToastRegion = UNSTABLE_ToastRegion;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_aria_components_1 = require("react-aria-components");
+const react_dom_1 = require("react-dom");
+const toast_js_1 = require("./toast.js");
+exports.UNSTABLE_toastQueue = new react_aria_components_1.UNSTABLE_ToastQueue({
+    wrapUpdate(fn) {
+        if ('startViewTransition' in document) {
+            document.startViewTransition(() => {
+                (0, react_dom_1.flushSync)(fn);
+            });
+        }
+        else {
+            fn();
+        }
+    },
+});
+function UNSTABLE_ToastRegion() {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.UNSTABLE_ToastRegion, { queue: exports.UNSTABLE_toastQueue, className: "cim-toast-region", "data-cim-style-root": true, children: ({ toast }) => (0, jsx_runtime_1.jsx)(toast_js_1.UNSTABLE_Toast, { toast: toast }) }));
+}
+//# sourceMappingURL=toast-region.js.map

package/dist/commonjs/components/toast/toast-region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-region.js","sourceRoot":"","sources":["../../../../src/components/toast/toast-region.tsx"],"names":[],"mappings":";;;AAiBA,oDAMC;;AAvBD,iEAAqH;AACrH,yCAAsC;AACtC,yCAA4C;AAG/B,QAAA,mBAAmB,GAAG,IAAI,2CAAa,CAAe;IACjE,UAAU,CAAC,EAAE;QACX,IAAI,qBAAqB,IAAI,QAAQ,EAAE,CAAC;YACtC,QAAQ,CAAC,mBAAmB,CAAC,GAAG,EAAE;gBAChC,IAAA,qBAAS,EAAC,EAAE,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,EAAE,EAAE,CAAC;QACP,CAAC;IACH,CAAC;CACF,CAAC,CAAC;AAEH,SAAgB,oBAAoB;IAClC,OAAO,CACL,uBAAC,4CAAc,IAAC,KAAK,EAAE,2BAAmB,EAAE,SAAS,EAAC,kBAAkB,yCACrE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,uBAAC,yBAAc,IAAC,KAAK,EAAE,KAAK,GAAI,GACjC,CAClB,CAAC;AACJ,CAAC","sourcesContent":["import { UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion } from 'react-aria-components';\nimport { flushSync } from 'react-dom';\nimport { UNSTABLE_Toast } from './toast.js';\nimport type { UNSTABLE_ToastContent as ToastContent } from './types.js';\n\nexport const UNSTABLE_toastQueue = new RACToastQueue<ToastContent>({\n  wrapUpdate(fn) {\n    if ('startViewTransition' in document) {\n      document.startViewTransition(() => {\n        flushSync(fn);\n      });\n    } else {\n      fn();\n    }\n  },\n});\n\nexport function UNSTABLE_ToastRegion() {\n  return (\n    <RACToastRegion queue={UNSTABLE_toastQueue} className=\"cim-toast-region\" data-cim-style-root>\n      {({ toast }) => <UNSTABLE_Toast toast={toast} />}\n    </RACToastRegion>\n  );\n}\n"]}

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

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

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

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

package/dist/commonjs/components/toast/toast.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_Toast = UNSTABLE_Toast;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_aria_components_1 = require("react-aria-components");
+const index_js_1 = require("../../i18n/index.js");
+const index_js_2 = require("../../icons/index.js");
+const x_button_js_1 = require("../internal/x-button/x-button.js");
+const utils_js_1 = require("../typography/utils.js");
+const iconMap = {
+    info: index_js_2.IconInfoCircle,
+    success: index_js_2.IconCheckCircle,
+    warning: index_js_2.IconWarning,
+    critical: index_js_2.IconWarningCircleFill,
+};
+/**
+ * @internal
+ */
+function UNSTABLE_Toast({ toast }) {
+    const Icon = iconMap[toast.content.tone];
+    const messages = (0, index_js_1.useLocalizedMessages)('common');
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.UNSTABLE_Toast, { toast: toast, className: "cim-toast", style: { viewTransitionName: toast.key }, "data-cim-style-root": true, children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-toast-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 24, tone: toast.content.tone, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.UNSTABLE_ToastContent, { className: "cim-toast-content", children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: (0, utils_js_1.textStyle)({ variant: 'medium' }), children: toast.content.title }) }), (0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { slot: "close", UNSAFE_className: "cim-toast-close", "aria-label": messages.format('dismiss') })] }));
+}
+//# sourceMappingURL=toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../../src/components/toast/toast.tsx"],"names":[],"mappings":";;AA6BA,wCAeC;;AA5CD,iEAK+B;AAC/B,kDAA2D;AAC3D,mDAA2G;AAC3G,kEAA2D;AAC3D,qDAAmD;AAGnD,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,yBAAc;IACpB,OAAO,EAAE,0BAAe;IACxB,OAAO,EAAE,sBAAW;IACpB,QAAQ,EAAE,gCAAqB;CAChC,CAAC;AASF;;GAEG;AACH,SAAgB,cAAc,CAAC,EAAE,KAAK,EAAuB;IAC3D,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO,CACL,wBAAC,sCAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,KAAK,CAAC,GAAG,EAAE,0CACpF,gCAAK,SAAS,EAAC,gBAAgB,YAC7B,uBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,wBAAgB,GACpD,EACN,uBAAC,6CAAe,IAAC,SAAS,EAAC,mBAAmB,YAC5C,uBAAC,4BAAO,IAAC,SAAS,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,YAAG,KAAK,CAAC,OAAO,CAAC,KAAK,GAAW,GACrE,EAClB,uBAAC,qBAAO,IAAC,IAAI,EAAC,OAAO,EAAC,gBAAgB,EAAC,iBAAiB,gBAAa,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,GAAI,IAC1F,CACZ,CAAC;AACJ,CAAC","sourcesContent":["import {\n  type QueuedToast as RACQueuedToast,\n  Text as RACText,\n  UNSTABLE_Toast as RACToast,\n  UNSTABLE_ToastContent as RACToastContent,\n} from 'react-aria-components';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheckCircle, IconInfoCircle, IconWarning, IconWarningCircleFill } from '../../icons/index.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport { textStyle } from '../typography/utils.js';\nimport type { UNSTABLE_ToastContent as ToastContent } from './types.js';\n\nconst iconMap = {\n  info: IconInfoCircle,\n  success: IconCheckCircle,\n  warning: IconWarning,\n  critical: IconWarningCircleFill,\n};\n\n/**\n * @internal\n */\ninterface UNSTABLE_ToastProps {\n  toast: RACQueuedToast<ToastContent>;\n}\n\n/**\n * @internal\n */\nexport function UNSTABLE_Toast({ toast }: UNSTABLE_ToastProps) {\n  const Icon = iconMap[toast.content.tone];\n  const messages = useLocalizedMessages('common');\n\n  return (\n    <RACToast toast={toast} className=\"cim-toast\" style={{ viewTransitionName: toast.key }} data-cim-style-root>\n      <div className=\"cim-toast-icon\">\n        <Icon size={24} tone={toast.content.tone} aria-hidden />\n      </div>\n      <RACToastContent className=\"cim-toast-content\">\n        <RACText className={textStyle({ variant: 'medium' })}>{toast.content.title}</RACText>\n      </RACToastContent>\n      <XButton slot=\"close\" UNSAFE_className=\"cim-toast-close\" aria-label={messages.format('dismiss')} />\n    </RACToast>\n  );\n}\n"]}

package/dist/commonjs/components/toast/types.d.ts

@@ -0,0 +1,5 @@
+export interface UNSTABLE_ToastContent {
+    title: string;
+    tone: 'info' | 'success' | 'warning' | 'critical';
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/commonjs/components/toast/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;CACnD"}

package/dist/commonjs/components/toast/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/commonjs/components/toast/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface UNSTABLE_ToastContent {\n  title: string;\n  tone: 'info' | 'success' | 'warning' | 'critical';\n}\n"]}

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

@@ -0,0 +1,14 @@
+import { type SwitchProps as RACSwitchProps } from 'react-aria-components';
+import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';
+export interface UNSTABLE_ToggleProps extends CommonProps, AriaLabelingProps, Pick<RACSwitchProps, 'onChange' | 'isSelected' | 'isDisabled' | 'isReadOnly' | 'defaultSelected' | 'autoFocus' | 'name' | 'value'> {
+    /** The label rendered next to the toggle. */
+    children?: StringLikeChildren;
+}
+/**
+ * Allows users to turn a setting on or off.
+ *
+ * See [toggle usage guidelines](https://ui.cimpress.io/components/toggle/).
+ */
+declare const _UNSTABLE_Toggle: (props: UNSTABLE_ToggleProps & import("react").RefAttributes<HTMLLabelElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_Toggle as UNSTABLE_Toggle };
+//# sourceMappingURL=toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,KAAK,WAAW,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAKhG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,oBACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CACF,cAAc,EACd,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAC7G;IACH,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAgCD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,wKAAwD,CAAC;AAE/E,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}

package/dist/commonjs/components/toggle/toggle.js

@@ -0,0 +1,32 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_Toggle = void 0;
+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("../../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 text_js_1 = require("../typography/text.js");
+function UNSTABLE_Toggle({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
+        if (!children && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Toggle requires one of children / aria-label / aria-labelledby for accessibility');
+        }
+    }, [children, ariaLabel, ariaLabelledBy]);
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Switch, { ...props, ref: ref, className: (0, clsx_1.default)('cim-toggle', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-toggle-track-wrapper", "aria-hidden": true, children: (0, jsx_runtime_1.jsxs)("div", { className: "cim-toggle-track", children: [(0, jsx_runtime_1.jsx)(index_js_1.IconCheckBold, {}), (0, jsx_runtime_1.jsx)(index_js_1.IconCloseBold, {}), (0, jsx_runtime_1.jsx)("div", { className: "cim-toggle-track-head" })] }) }), children && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "body", children: children }))] }));
+}
+/**
+ * Allows users to turn a setting on or off.
+ *
+ * See [toggle usage guidelines](https://ui.cimpress.io/components/toggle/).
+ */
+const _UNSTABLE_Toggle = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_Toggle), 'Toggle');
+exports.UNSTABLE_Toggle = _UNSTABLE_Toggle;
+//# sourceMappingURL=toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAgG;AAChG,yDAAkD;AAClD,mDAAoE;AACpE,qFAA6E;AAC7E,mEAA2D;AAE3D,mDAA6C;AAa7C,SAAS,eAAe,CACtB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAwB,EAC5E,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,wBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,gCAAK,SAAS,EAAC,0BAA0B,iCACvC,iCAAK,SAAS,EAAC,kBAAkB,aAC/B,uBAAC,wBAAa,KAAG,EACjB,uBAAC,wBAAa,KAAG,EACjB,gCAAK,SAAS,EAAC,uBAAuB,GAAG,IACrC,GACF,EACL,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,eAAe,CAAC,EAAE,QAAQ,CAAC,CAAC;AAElD,2CAAe","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Switch as RACSwitch, type SwitchProps as RACSwitchProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconCloseBold } 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 UNSTABLE_ToggleProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<\n      RACSwitchProps,\n      'onChange' | 'isSelected' | 'isDisabled' | 'isReadOnly' | 'defaultSelected' | 'autoFocus' | 'name' | 'value'\n    > {\n  /** The label rendered next to the toggle. */\n  children?: StringLikeChildren;\n}\n\nfunction UNSTABLE_Toggle(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_ToggleProps,\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('Toggle requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACSwitch {...props} ref={ref} className={clsx('cim-toggle', UNSAFE_className)} style={UNSAFE_style}>\n      <div className=\"cim-toggle-track-wrapper\" aria-hidden>\n        <div className=\"cim-toggle-track\">\n          <IconCheckBold />\n          <IconCloseBold />\n          <div className=\"cim-toggle-track-head\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"body\">\n          {children}\n        </Text>\n      )}\n    </RACSwitch>\n  );\n}\n\n/**\n * Allows users to turn a setting on or off.\n *\n * See [toggle usage guidelines](https://ui.cimpress.io/components/toggle/).\n */\nconst _UNSTABLE_Toggle = withStyleProps(forwardRef(UNSTABLE_Toggle), 'Toggle');\n\nexport { _UNSTABLE_Toggle as UNSTABLE_Toggle };\n"]}

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

@@ -1,9 +1,19 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import { type TooltipProps as RACTooltipProps } from 'react-aria-components';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_TooltipProps extends Omit<CommonProps, 'id'>, Pick<RACTooltipProps, 'placement' | 'isOpen' | 'triggerRef'> {
+export interface TooltipProps extends Omit<CommonProps, 'id'>, Pick<RACTooltipProps, 'placement' | 'isOpen' | 'onOpenChange'> {
+    /** The element that this tooltip describes. Must be focusable and hoverable. */
     children: ReactNode;
+    /** The contents of the tooltip. */
     label: string;
+    /** The ref for the element which the tooltip positions itself with respect to. */
+    triggerRef?: RefObject<Element | null>;
 }
-export declare function UNSTABLE_Tooltip({ children, label, isOpen, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_TooltipProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Provides additional information about an element that is hovered or focused.
+ *
+ * See [tooltip usage guidelines](https://ui.cimpress.io/components/tooltip/).
+ */
+declare const _Tooltip: (props: TooltipProps & import("react").RefAttributes<HTMLDivElement>) => import("react").JSX.Element | null;
+export { _Tooltip as Tooltip };
 //# sourceMappingURL=tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAErC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,GAAG,YAAY,CAAC;IAC9D,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,MAAM,EACN,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAsBvB"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAErC,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,GAAG,cAAc,CAAC;IAChE,gFAAgF;IAChF,QAAQ,EAAE,SAAS,CAAC;IACpB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CACxC;AAgCD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,6GAAiC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}

package/dist/commonjs/components/tooltip/tooltip.js

@@ -4,12 +4,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_Tooltip = UNSTABLE_Tooltip;
+exports.Tooltip = void 0;
 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 text_js_1 = require("../typography/text.js");
-function UNSTABLE_Tooltip({ children, label, isOpen, UNSAFE_className, UNSAFE_style, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.TooltipTrigger, { isOpen: isOpen, delay: 300, children: [children, (0, jsx_runtime_1.jsxs)(react_aria_components_1.Tooltip, { ...props, className: (0, clsx_1.default)('cim-tooltip', UNSAFE_className), arrowBoundaryOffset: 8, style: UNSAFE_style, "data-cim-style-root": true, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.OverlayArrow, { className: "cim-tooltip-arrow", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 10", width: "16", height: "10", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 0h16L8.78 9.024a1 1 0 0 1-1.56 0L0 0Z" }) }) }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "p", variant: "small", children: label })] })] }));
+function Tooltip({ children, label, isOpen, onOpenChange, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.TooltipTrigger, { isOpen: isOpen, onOpenChange: onOpenChange, delay: 300, closeDelay: 300, children: [children, (0, jsx_runtime_1.jsxs)(react_aria_components_1.Tooltip, { ...props, ref: ref, className: (0, clsx_1.default)('cim-tooltip', UNSAFE_className), style: UNSAFE_style, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, "data-cim-style-root": true, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.OverlayArrow, { className: "cim-tooltip-arrow", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 0H16L8.78087 9.02391C8.38054 9.52432 7.61946 9.52432 7.21913 9.02391L0 0Z" }) }) }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "p", variant: "small", children: label })] })] }));
 }
+/**
+ * Provides additional information about an element that is hovered or focused.
+ *
+ * See [tooltip usage guidelines](https://ui.cimpress.io/components/tooltip/).
+ */
+const _Tooltip = (0, forward_ref_js_1.forwardRef)(Tooltip, 'Tooltip');
+exports.Tooltip = _Tooltip;
 //# sourceMappingURL=tooltip.js.map