@cimpress-ui/react 0.0.0 → 0.1.0

package/dist/esm/components/select/select.js

@@ -1,28 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { Button as RACButton, Collection as RACCollection, Header as RACHeader, ListBox as RACListBox, ListBoxItem as RACListBoxItem, Popover as RACPopover, Section as RACSection, Select as RACSelect, SelectValue as RACSelectValue, } from 'react-aria-components';
+import { useEffect } from 'react';
+import { Button as RACButton, Collection as RACCollection, Header as RACHeader, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxSection as RACListBoxSection, Select as RACSelect, SelectValue as RACSelectValue, Text as RACText, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
+import { IconCheckmark, IconChevronDownFill } from '../../icons/index.js';
 import { withStyleProps } from '../../with-style-props.js';
-import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';
+import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
+import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
 import { textStyle } from '../typography/utils.js';
-function Select({ label, description, error, options, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, children: label }), _jsxs(RACButton, { className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', tone: values.isPlaceholder ? 'muted' : 'base' })) }), _jsx(ChevronDownIcon, { height: 12, width: 12, "aria-hidden": "true" })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(RACPopover, { offset: 2, maxHeight: 315, className: "cim-select-popover", "data-experimental-cim-style-root": true, children: _jsx(RACListBox, { className: "cim-select-listbox", items: options, children: renderOptions }) })] }));
+function Select({ children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useEffect(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    if (items != null && typeof children !== 'function') {
+        console.warn('`Select` requires `children` to be a function when using `items` prop');
+    }
+    return (_jsxs(RACSelect, { ...props, ref: ref, className: clsx('cim-select', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACButton, { className: "cim-select-button", children: [_jsx(RACSelectValue, { className: (values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' })), children: ({ selectedText }) => selectedText }), _jsx(IconChevronDownFill, {})] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(RACListBox, { className: "cim-select-listbox", onScroll: onScroll, items: items, children: children }) })] }));
 }
+/**
+ * Allows users to select one item from a collapsible list.
+ *
+ * See [select usage guidelines](https://ui.cimpress.io/components/select/).
+ */
 const _Select = withStyleProps(forwardRef(Select), 'Select');
 export { _Select as Select };
-function renderOptions(item) {
-    if ('options' in item) {
-        return (_jsx(SelectSection, { id: item.id, title: item.label, items: item.options, children: (child) => (_jsx(SelectItem, { id: child.id, isDisabled: child.isDisabled, children: child.label })) }));
-    }
-    return (_jsx(SelectItem, { id: item.id, isDisabled: item.isDisabled, children: item.label }));
-}
-function SelectItem({ children, ...props }) {
-    return (_jsx(RACListBoxItem, { ...props, className: clsx('cim-select-item', textStyle({ variant: 'medium' })), children: children }));
+/** Renders a single list item within `Select`. */
+export function SelectItem({ children, ...props }) {
+    const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
+    return (_jsx(RACListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(IconCheckmark, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
 }
-function SelectSection({ title, children, items, ...props }) {
-    return (_jsxs(RACSection, { ...props, className: "cim-select-section", children: [_jsx(RACHeader, { className: clsx('cim-select-header', textStyle({ variant: 'small', tone: 'subtle' })), children: title }), _jsx(RACCollection, { items: items, children: children })] }));
-}
-function ChevronDownIcon(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "currentColor", "data-icon": true, ...props, children: _jsx("path", { d: "M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z" }) }));
+SelectItem.displayName = 'SelectItem';
+/** Groups list items within `Select` into a section. */
+export function SelectSection({ title, children, items, ...props }) {
+    if (items != null && typeof children !== 'function') {
+        console.warn('`SelectSection` requires `children` to be a function when using `items` prop');
+    }
+    return (_jsxs(RACListBoxSection, { ...props, className: "cim-select-section", children: [_jsx(RACHeader, { className: clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' })), children: title }), _jsx(RACCollection, { items: items, children: children })] }));
 }
+SelectSection.displayName = 'SelectSection';
 //# sourceMappingURL=select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode, SVGAttributes, ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Popover as RACPopover,\n  Section as RACSection,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';\nimport type { DOMProps, FieldWithPlaceholderProps, Key } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface SelectOption {\n  /** The unique id of the item. When integrated with a form, this will be the value of the option. */\n  id: string;\n  /** The content to display as the label of the option. */\n  label: string;\n  /** Whether the option is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface SelectOptionGroup {\n  /** The unique id of the group. */\n  id: string;\n  /** The content to display as the title of the group. */\n  label: string;\n  /** The options available for selection within the group. */\n  options: SelectOption[];\n  isDisabled?: never;\n}\n\nexport type SelectOptionType = SelectOption | SelectOptionGroup;\n\nexport interface SelectProps\n  extends Pick<\n      RACSelectProps<SelectOptionType>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'placeholder'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'onSelectionChange'\n    >,\n    DOMProps,\n    FieldWithPlaceholderProps<Key> {\n  /** The options available for selection. Supports groups with a single level of nesting. */\n  options: SelectOptionType[];\n}\n\nfunction Select(\n  { label, description, error, options, UNSAFE_className, UNSAFE_style, ...props }: SelectProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACSelect {...props} ref={ref} className={clsx('cim-select', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n      <RACButton className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) =>\n            clsx(\n              values.defaultClassName,\n              textStyle({ variant: 'medium', tone: values.isPlaceholder ? 'muted' : 'base' }),\n            )\n          }\n        />\n        <ChevronDownIcon height={12} width={12} aria-hidden=\"true\" />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <RACPopover offset={2} maxHeight={315} className=\"cim-select-popover\" data-experimental-cim-style-root>\n        <RACListBox className=\"cim-select-listbox\" items={options}>\n          {renderOptions}\n        </RACListBox>\n      </RACPopover>\n    </RACSelect>\n  );\n}\n\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nfunction renderOptions(item: SelectOptionType) {\n  if ('options' in item) {\n    return (\n      <SelectSection id={item.id} title={item.label} items={item.options}>\n        {(child) => (\n          <SelectItem id={child.id} isDisabled={child.isDisabled}>\n            {child.label}\n          </SelectItem>\n        )}\n      </SelectSection>\n    );\n  }\n\n  return (\n    <SelectItem id={item.id} isDisabled={item.isDisabled}>\n      {item.label}\n    </SelectItem>\n  );\n}\n\ninterface SelectItemProps extends Pick<RACListBoxItemProps<SelectOption>, 'id' | 'value' | 'isDisabled'> {\n  children: string;\n}\n\nfunction SelectItem({ children, ...props }: SelectItemProps) {\n  return (\n    <RACListBoxItem {...props} className={clsx('cim-select-item', textStyle({ variant: 'medium' }))}>\n      {children}\n    </RACListBoxItem>\n  );\n}\n\ninterface SelectSectionProps {\n  id: string;\n  title: string;\n  children: ReactNode | ((item: SelectOption) => ReactNode);\n  items?: Iterable<SelectOption>;\n}\n\nfunction SelectSection({ title, children, items, ...props }: SelectSectionProps) {\n  return (\n    <RACSection {...props} className=\"cim-select-section\">\n      <RACHeader className={clsx('cim-select-header', textStyle({ variant: 'small', tone: 'subtle' }))}>\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACSection>\n  );\n}\n\nfunction ChevronDownIcon(props: SVGAttributes<SVGSVGElement>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\" fill=\"currentColor\" data-icon {...props}>\n      <path d=\"M.124 3.603 5.617 9.84a.533.533 0 0 0 .769 0l5.49-6.236a.493.493 0 0 0-.054-.707l-.925-.778a.514.514 0 0 0-.719.055L6.095 6.9a.125.125 0 0 1-.189 0L1.822 2.173A.51.51 0 0 0 1.474 2a.5.5 0 0 0-.37.119l-.926.777a.494.494 0 0 0-.054.707Z\" />\n    </svg>\n  );\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EACL,MAAM,IAAI,SAAS,EACnB,UAAU,IAAI,aAAa,EAC3B,MAAM,IAAI,SAAS,EACnB,OAAO,IAAI,UAAU,EAErB,WAAW,IAAI,cAAc,EAC7B,cAAc,IAAI,iBAAiB,EACnC,MAAM,IAAI,SAAS,EACnB,WAAW,IAAI,cAAc,EAC7B,IAAI,IAAI,OAAO,GAGhB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE5G,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAwBnD,SAAS,MAAM,CACb,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EAClH,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,+EAA+E,CAAC,CAAC;QAChG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACpD,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;IACxF,CAAC;IAED,OAAO,CACL,MAAC,SAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,MAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,aACtC,KAAC,cAAc,IACb,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,YAEzG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,GACpB,EACjB,KAAC,mBAAmB,KAAG,IACb,EACZ,KAAC,cAAc,cAAE,KAAK,GAAkB,EACxC,KAAC,oBAAoB,cAAE,WAAW,GAAwB,EAC1D,KAAC,eAAe,IACd,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,YAEd,KAAC,UAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YACxE,QAAQ,GACE,GACG,IACR,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAO7B,kDAAkD;AAClD,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAChE,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAC,iBAAiB,EAAC,SAAS,EAAE,SAAS,YACxE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACnB,8BACE,KAAC,aAAa,KAAG,EAEjB,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,YACjG,QAAQ,GACD,IACT,CACJ,GACc,CAClB,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAStC,wDAAwD;AACxD,MAAM,UAAU,aAAa,CAA2B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAyB;IACjH,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACpD,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;IAC/F,CAAC;IAED,OAAO,CACL,MAAC,iBAAiB,OAAK,KAAK,EAAE,SAAS,EAAC,oBAAoB,aAC1D,KAAC,SAAS,IACR,SAAS,EAAE,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAErG,KAAK,GACI,EACZ,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,IACrC,CACrB,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckmark, IconChevronDownFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CollectionProps, CommonProps, FieldProps, Key, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    Pick<\n      RACSelectProps<T>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction Select<T extends CollectionItem>(\n  { children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, ...props }: SelectProps<T>,\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('Select requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (items != null && typeof children !== 'function') {\n    console.warn('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACSelect {...props} ref={ref} className={clsx('cim-select', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' }))}\n        >\n          {({ selectedText }) => selectedText}\n        </RACSelectValue>\n        <IconChevronDownFill />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        <RACListBox className=\"cim-select-listbox\" onScroll={onScroll} items={items}>\n          {children}\n        </RACListBox>\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps\n  extends Pick<RACListBoxItemProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheckmark />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<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 `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}

package/dist/esm/components/spacing/box/box.d.ts

@@ -1,8 +1,10 @@
 import type { ReactNode } from 'react';
-import type { DOMProps } from '../../types.js';
-export interface BoxProps extends DOMProps {
+import type { CommonProps } from '../../types.js';
+export interface BoxProps extends CommonProps {
+    /** The contents of the box. */
     children: ReactNode;
 }
-declare const _Box: (props: BoxProps & import("react").RefAttributes<HTMLDivElement> & import("../../../with-style-props.js").StyleProps) => ReactNode;
+/** A primitive layout component that exposes style props. */
+declare const _Box: (props: BoxProps & import("react").RefAttributes<HTMLDivElement> & import("../../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _Box as Box };
 //# sourceMappingURL=box.d.ts.map

package/dist/esm/components/spacing/box/box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../../../src/components/spacing/box/box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD,QAAA,MAAM,IAAI,oIAAyC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../../../src/components/spacing/box/box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,QAAS,SAAQ,WAAW;IAC3C,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD,6DAA6D;AAC7D,QAAA,MAAM,IAAI,6JAAyC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/spacing/box/box.js

@@ -1,9 +1,11 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from '../../../forward-ref.js';
 import { withStyleProps } from '../../../with-style-props.js';
 function Box({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, role: "presentation", children: children }));
 }
+/** A primitive layout component that exposes style props. */
 const _Box = withStyleProps(forwardRef(Box), 'Box');
 export { _Box as Box };
 //# sourceMappingURL=box.js.map

package/dist/esm/components/spacing/box/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sourceRoot":"","sources":["../../../../../src/components/spacing/box/box.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAO9D,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAY,EAAE,GAAiC;IAC9G,OAAO,CACL,iBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAC,cAAc,YAC5F,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../../forward-ref.js';\nimport { withStyleProps } from '../../../with-style-props.js';\nimport type { DOMProps } from '../../types.js';\n\nexport interface BoxProps extends DOMProps {\n  children: ReactNode;\n}\n\nfunction Box({ children, UNSAFE_className, UNSAFE_style, ...props }: BoxProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <div {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style} role=\"presentation\">\n      {children}\n    </div>\n  );\n}\n\nconst _Box = withStyleProps(forwardRef(Box), 'Box');\n\nexport { _Box as Box };\n"]}
+{"version":3,"file":"box.js","sourceRoot":"","sources":["../../../../../src/components/spacing/box/box.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAQ9D,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAY,EAAE,GAAiC;IAC9G,OAAO,CACL,iBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAC,cAAc,YAC5F,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,6DAA6D;AAC7D,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../../forward-ref.js';\nimport { withStyleProps } from '../../../with-style-props.js';\nimport type { CommonProps } from '../../types.js';\n\nexport interface BoxProps extends CommonProps {\n  /** The contents of the box. */\n  children: ReactNode;\n}\n\nfunction Box({ children, UNSAFE_className, UNSAFE_style, ...props }: BoxProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <div {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style} role=\"presentation\">\n      {children}\n    </div>\n  );\n}\n\n/** A primitive layout component that exposes style props. */\nconst _Box = withStyleProps(forwardRef(Box), 'Box');\n\nexport { _Box as Box };\n"]}

package/dist/esm/components/spacing/stack/stack.d.ts

@@ -1,11 +1,35 @@
 import type { ReactNode } from 'react';
-import type { DOMProps } from '../../types.js';
+import type { Direction, CommonProps } from '../../types.js';
 import { type Responsive, type Spacing } from '../types.js';
-export interface StackProps extends DOMProps {
+export type Alignment = 'start' | 'center' | 'end' | 'stretch';
+export type Justify = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
+export interface StackProps extends CommonProps {
+    /** The items to stack. */
     children: ReactNode;
-    inline?: Responsive<boolean>;
+    /**
+     * Determines the stacking direction (ie. which direction is the primary axis)
+     * @default 'vertical'
+     */
+    direction?: Responsive<Direction>;
+    /** The amount of space between items. */
     gap: Responsive<Spacing>;
+    /**
+     * Determines how items are distributed along the primary axis.
+     * @default 'start'
+     */
+    justify?: Responsive<Justify>;
+    /**
+     * Determines how each item is aligned along the cross axis.
+     * @default 'stretch'
+     */
+    align?: Responsive<Alignment>;
+    /**
+     * Determines whether items will wrap to a new line if stack size is too small.
+     * @default true
+     */
+    wrap?: Responsive<boolean>;
 }
-declare const _Stack: (props: StackProps & import("react").RefAttributes<HTMLDivElement> & import("../../../with-style-props.js").StyleProps) => ReactNode;
+/** Stacks its children with a specified amount of space between them. */
+declare const _Stack: (props: StackProps & import("react").RefAttributes<HTMLDivElement> & import("../../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _Stack as Stack };
 //# sourceMappingURL=stack.d.ts.map

package/dist/esm/components/spacing/stack/stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../src/components/spacing/stack/stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAA0B,KAAK,UAAU,EAAE,KAAK,OAAO,EAAE,MAAM,aAAa,CAAC;AAEpF,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC7B,GAAG,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC1B;AA0BD,QAAA,MAAM,MAAM,sIAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../src/components/spacing/stack/stack.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAA0B,KAAK,UAAU,EAAE,KAAK,OAAO,EAAE,MAAM,aAAa,CAAC;AAEpF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAC/D,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,GAAG,cAAc,CAAC;AAErG,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAClC,yCAAyC;IACzC,GAAG,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC5B;AA0CD,yEAAyE;AACzE,QAAA,MAAM,MAAM,+JAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

package/dist/esm/components/spacing/stack/stack.js

@@ -1,17 +1,25 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef } from '../../../forward-ref.js';
 import { withStyleProps } from '../../../with-style-props.js';
 import { getResponsiveVariables } from '../types.js';
-function Stack({ children, inline: responsiveInline, gap: responsiveGap, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function Stack({ children, direction: responsiveDirection, gap: responsiveGap, justify: responsiveJustify, align: responsiveAlign, wrap: responsiveWrap, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const gap = getResponsiveVariables('stack-gap', 'space', responsiveGap, 0);
-    const inline = getResponsiveVariables('stack-fd', 'stack-fd-inline', responsiveInline, false);
+    const direction = getResponsiveVariables('stack-fd', 'stack-direction', responsiveDirection, 'vertical');
+    const justify = getResponsiveVariables('stack-jc', 'stack-justify', responsiveJustify, 'start');
+    const align = getResponsiveVariables('stack-ai', 'stack-align', responsiveAlign, 'stretch');
+    const wrap = getResponsiveVariables('stack-fw', 'stack-wrap', responsiveWrap, true);
     return (_jsx("div", { ...props, ref: ref, className: clsx('cim-stack', UNSAFE_className), style: {
             ...UNSAFE_style,
             ...gap,
-            ...inline,
+            ...direction,
+            ...justify,
+            ...align,
+            ...wrap,
         }, role: "presentation", children: children }));
 }
+/** Stacks its children with a specified amount of space between them. */
 const _Stack = withStyleProps(forwardRef(Stack), 'Stack');
 export { _Stack as Stack };
 //# sourceMappingURL=stack.js.map

package/dist/esm/components/spacing/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../../../../src/components/spacing/stack/stack.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAE,sBAAsB,EAAiC,MAAM,aAAa,CAAC;AAQpF,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAChH,GAAiC;IAEjC,MAAM,GAAG,GAAG,sBAAsB,CAAC,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC;IAC3E,MAAM,MAAM,GAAG,sBAAsB,CAAC,UAAU,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAE9F,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAC9C,KAAK,EAAE;YACL,GAAG,YAAY;YACf,GAAG,GAAG;YACN,GAAG,MAAM;SACV,EACD,IAAI,EAAC,cAAc,YAElB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode, ForwardedRef } from 'react';\nimport { forwardRef } from '../../../forward-ref.js';\nimport { withStyleProps } from '../../../with-style-props.js';\nimport type { DOMProps } from '../../types.js';\nimport { getResponsiveVariables, type Responsive, type Spacing } from '../types.js';\n\nexport interface StackProps extends DOMProps {\n  children: ReactNode;\n  inline?: Responsive<boolean>;\n  gap: Responsive<Spacing>;\n}\n\nfunction Stack(\n  { children, inline: responsiveInline, gap: responsiveGap, UNSAFE_className, UNSAFE_style, ...props }: StackProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const gap = getResponsiveVariables('stack-gap', 'space', responsiveGap, 0);\n  const inline = getResponsiveVariables('stack-fd', 'stack-fd-inline', responsiveInline, false);\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx('cim-stack', UNSAFE_className)}\n      style={{\n        ...UNSAFE_style,\n        ...gap,\n        ...inline,\n      }}\n      role=\"presentation\"\n    >\n      {children}\n    </div>\n  );\n}\n\nconst _Stack = withStyleProps(forwardRef(Stack), 'Stack');\n\nexport { _Stack as Stack };\n"]}
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../../../../src/components/spacing/stack/stack.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAE,sBAAsB,EAAiC,MAAM,aAAa,CAAC;AAgCpF,SAAS,KAAK,CACZ,EACE,QAAQ,EACR,SAAS,EAAE,mBAAmB,EAC9B,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE,eAAe,EACtB,IAAI,EAAE,cAAc,EACpB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACG,EACb,GAAiC;IAEjC,MAAM,GAAG,GAAG,sBAAsB,CAAC,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC;IAC3E,MAAM,SAAS,GAAG,sBAAsB,CAAC,UAAU,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,UAAU,CAAC,CAAC;IACzG,MAAM,OAAO,GAAG,sBAAsB,CAAC,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,OAAO,CAAC,CAAC;IAChG,MAAM,KAAK,GAAG,sBAAsB,CAAC,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC;IAC5F,MAAM,IAAI,GAAG,sBAAsB,CAAC,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC;IAEpF,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAC9C,KAAK,EAAE;YACL,GAAG,YAAY;YACf,GAAG,GAAG;YACN,GAAG,SAAS;YACZ,GAAG,OAAO;YACV,GAAG,KAAK;YACR,GAAG,IAAI;SACR,EACD,IAAI,EAAC,cAAc,YAElB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,yEAAyE;AACzE,MAAM,MAAM,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode, ForwardedRef } from 'react';\nimport { forwardRef } from '../../../forward-ref.js';\nimport { withStyleProps } from '../../../with-style-props.js';\nimport type { Direction, CommonProps } from '../../types.js';\nimport { getResponsiveVariables, type Responsive, type Spacing } from '../types.js';\n\nexport type Alignment = 'start' | 'center' | 'end' | 'stretch';\nexport type Justify = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';\n\nexport interface StackProps extends CommonProps {\n  /** The items to stack. */\n  children: ReactNode;\n  /**\n   * Determines the stacking direction (ie. which direction is the primary axis)\n   * @default 'vertical'\n   */\n  direction?: Responsive<Direction>;\n  /** The amount of space between items. */\n  gap: Responsive<Spacing>;\n  /**\n   * Determines how items are distributed along the primary axis.\n   * @default 'start'\n   */\n  justify?: Responsive<Justify>;\n  /**\n   * Determines how each item is aligned along the cross axis.\n   * @default 'stretch'\n   */\n  align?: Responsive<Alignment>;\n  /**\n   * Determines whether items will wrap to a new line if stack size is too small.\n   * @default true\n   */\n  wrap?: Responsive<boolean>;\n}\n\nfunction Stack(\n  {\n    children,\n    direction: responsiveDirection,\n    gap: responsiveGap,\n    justify: responsiveJustify,\n    align: responsiveAlign,\n    wrap: responsiveWrap,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: StackProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const gap = getResponsiveVariables('stack-gap', 'space', responsiveGap, 0);\n  const direction = getResponsiveVariables('stack-fd', 'stack-direction', responsiveDirection, 'vertical');\n  const justify = getResponsiveVariables('stack-jc', 'stack-justify', responsiveJustify, 'start');\n  const align = getResponsiveVariables('stack-ai', 'stack-align', responsiveAlign, 'stretch');\n  const wrap = getResponsiveVariables('stack-fw', 'stack-wrap', responsiveWrap, true);\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx('cim-stack', UNSAFE_className)}\n      style={{\n        ...UNSAFE_style,\n        ...gap,\n        ...direction,\n        ...justify,\n        ...align,\n        ...wrap,\n      }}\n      role=\"presentation\"\n    >\n      {children}\n    </div>\n  );\n}\n\n/** Stacks its children with a specified amount of space between them. */\nconst _Stack = withStyleProps(forwardRef(Stack), 'Stack');\n\nexport { _Stack as Stack };\n"]}

package/dist/esm/components/spacing/types.d.ts

@@ -1,8 +1,13 @@
+/** Represents a valid spacing amount within the design system. */
 export type Spacing = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | 96;
+/** Represents a screen size breakpoint for responsive design. */
 export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Represents a primitive value that can change based on screen size. */
 export type Responsive<T extends string | number | boolean> = T | Partial<Record<Breakpoint, T>>;
 /**
  * Given params like so:
+ *
+ * ```ts
  * (
  *   'box-ml',
  *   'space',
@@ -11,12 +16,16 @@ export type Responsive<T extends string | number | boolean> = T | Partial<Record
  *     lg: 6,
  *   }
  * )
+ * ```
  *
  * Creates an object like so:
+ *
+ * ```ts
  * {
  *   '--cim-box-ml-sm': 'var(--cim-space-4)',
  *   '--cim-box-ml-lg': 'var(--cim-space-6)',
  * }
+ * ```
  *
  */
 export declare function getResponsiveVariables<T extends string | number | boolean>(targetTokenGroup: string, sourceTokenGroup: string, data?: Responsive<T>, defaultValue?: T): Record<string, string> | undefined;

package/dist/esm/components/spacing/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/spacing/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAC5E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAEjG;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,EACxE,gBAAgB,EAAE,MAAM,EACxB,gBAAgB,EAAE,MAAM,EACxB,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EACpB,YAAY,CAAC,EAAE,CAAC,GACf,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAqBpC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/spacing/types.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE5E,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D,yEAAyE;AACzE,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAEjG;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,EACxE,gBAAgB,EAAE,MAAM,EACxB,gBAAgB,EAAE,MAAM,EACxB,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EACpB,YAAY,CAAC,EAAE,CAAC,GACf,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAqBpC"}

package/dist/esm/components/spacing/types.js

@@ -1,5 +1,7 @@
 /**
  * Given params like so:
+ *
+ * ```ts
  * (
  *   'box-ml',
  *   'space',
@@ -8,12 +10,16 @@
  *     lg: 6,
  *   }
  * )
+ * ```
  *
  * Creates an object like so:
+ *
+ * ```ts
  * {
  *   '--cim-box-ml-sm': 'var(--cim-space-4)',
  *   '--cim-box-ml-lg': 'var(--cim-space-6)',
  * }
+ * ```
  *
  */
 export function getResponsiveVariables(targetTokenGroup, sourceTokenGroup, data, defaultValue) {

package/dist/esm/components/spacing/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/spacing/types.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,sBAAsB,CACpC,gBAAwB,EACxB,gBAAwB,EACxB,IAAoB,EACpB,YAAgB;IAEhB,IAAI,IAAI,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;QACrD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO;YACL,CAAC,SAAS,gBAAgB,KAAK,CAAC,EAAE,aAAa,gBAAgB,IAAI,IAAI,IAAI,YAAY,GAAG;SAC3F,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAA2B;QACrC,8DAA8D;QAC9D,CAAC,SAAS,gBAAgB,KAAK,CAAC,EAAE,aAAa,gBAAgB,IAAI,YAAY,GAAG;KACnF,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE;QACnD,MAAM,CAAC,SAAS,gBAAgB,IAAI,UAAU,EAAE,CAAC,GAAG,aAAa,gBAAgB,IAAI,KAAK,GAAG,CAAC;IAChG,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export type Spacing = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | 96;\nexport type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type Responsive<T extends string | number | boolean> = T | Partial<Record<Breakpoint, T>>;\n\n/**\n * Given params like so:\n * (\n *   'box-ml',\n *   'space',\n *   {\n *     sm: 4,\n *     lg: 6,\n *   }\n * )\n *\n * Creates an object like so:\n * {\n *   '--cim-box-ml-sm': 'var(--cim-space-4)',\n *   '--cim-box-ml-lg': 'var(--cim-space-6)',\n * }\n *\n */\nexport function getResponsiveVariables<T extends string | number | boolean>(\n  targetTokenGroup: string,\n  sourceTokenGroup: string,\n  data?: Responsive<T>,\n  defaultValue?: T,\n): Record<string, string> | undefined {\n  if (data === undefined && defaultValue === undefined) {\n    return undefined;\n  }\n\n  if (typeof data !== 'object') {\n    return {\n      [`--cim-${targetTokenGroup}-xs`]: `var(--cim-${sourceTokenGroup}-${data ?? defaultValue})`,\n    };\n  }\n\n  const result: Record<string, string> = {\n    // Default value in case the smallest breakpoint isn't defined\n    [`--cim-${targetTokenGroup}-xs`]: `var(--cim-${sourceTokenGroup}-${defaultValue})`,\n  };\n\n  Object.entries(data).forEach(([breakpoint, value]) => {\n    result[`--cim-${targetTokenGroup}-${breakpoint}`] = `var(--cim-${sourceTokenGroup}-${value})`;\n  });\n\n  return result;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/spacing/types.ts"],"names":[],"mappings":"AASA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,sBAAsB,CACpC,gBAAwB,EACxB,gBAAwB,EACxB,IAAoB,EACpB,YAAgB;IAEhB,IAAI,IAAI,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;QACrD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO;YACL,CAAC,SAAS,gBAAgB,KAAK,CAAC,EAAE,aAAa,gBAAgB,IAAI,IAAI,IAAI,YAAY,GAAG;SAC3F,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAA2B;QACrC,8DAA8D;QAC9D,CAAC,SAAS,gBAAgB,KAAK,CAAC,EAAE,aAAa,gBAAgB,IAAI,YAAY,GAAG;KACnF,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE;QACnD,MAAM,CAAC,SAAS,gBAAgB,IAAI,UAAU,EAAE,CAAC,GAAG,aAAa,gBAAgB,IAAI,KAAK,GAAG,CAAC;IAChG,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["/** Represents a valid spacing amount within the design system. */\nexport type Spacing = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | 96;\n\n/** Represents a screen size breakpoint for responsive design. */\nexport type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Represents a primitive value that can change based on screen size. */\nexport type Responsive<T extends string | number | boolean> = T | Partial<Record<Breakpoint, T>>;\n\n/**\n * Given params like so:\n *\n * ```ts\n * (\n *   'box-ml',\n *   'space',\n *   {\n *     sm: 4,\n *     lg: 6,\n *   }\n * )\n * ```\n *\n * Creates an object like so:\n *\n * ```ts\n * {\n *   '--cim-box-ml-sm': 'var(--cim-space-4)',\n *   '--cim-box-ml-lg': 'var(--cim-space-6)',\n * }\n * ```\n *\n */\nexport function getResponsiveVariables<T extends string | number | boolean>(\n  targetTokenGroup: string,\n  sourceTokenGroup: string,\n  data?: Responsive<T>,\n  defaultValue?: T,\n): Record<string, string> | undefined {\n  if (data === undefined && defaultValue === undefined) {\n    return undefined;\n  }\n\n  if (typeof data !== 'object') {\n    return {\n      [`--cim-${targetTokenGroup}-xs`]: `var(--cim-${sourceTokenGroup}-${data ?? defaultValue})`,\n    };\n  }\n\n  const result: Record<string, string> = {\n    // Default value in case the smallest breakpoint isn't defined\n    [`--cim-${targetTokenGroup}-xs`]: `var(--cim-${sourceTokenGroup}-${defaultValue})`,\n  };\n\n  Object.entries(data).forEach(([breakpoint, value]) => {\n    result[`--cim-${targetTokenGroup}-${breakpoint}`] = `var(--cim-${sourceTokenGroup}-${value})`;\n  });\n\n  return result;\n}\n"]}

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

@@ -1,9 +1,16 @@
-import type { DOMProps } from '../types.js';
-interface SpinnerProps extends DOMProps {
+import type { CommonProps, LabellableProps } from '../types.js';
+export interface SpinnerProps extends CommonProps, LabellableProps {
+    /**
+     * Determines the size of the spinner.
+     * @default 'medium'
+     */
     size?: 'small' | 'medium' | 'large';
-    /** A string value that identifies the spinner's purpose for assistive technologies. */
-    'aria-label': string;
 }
-declare const _Spinner: (props: SpinnerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+/**
+ * Displays a loading indicator to represent an ongoing operation.
+ *
+ * See [spinner usage guidelines](https://ui.cimpress.io/components/spinner/).
+ */
+declare const _Spinner: (props: SpinnerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _Spinner as Spinner };
 //# sourceMappingURL=spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,YAAa,SAAQ,QAAQ;IACrC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,uFAAuF;IACvF,YAAY,EAAE,MAAM,CAAC;CACtB;AAyDD,QAAA,MAAM,QAAQ,qJAAiD,CAAC;AAEhE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAIhE,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AA8BD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,8JAAiD,CAAC;AAEhE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}

package/dist/esm/components/spinner/spinner.js

@@ -1,20 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { ProgressBar as RACProgressBar } from 'react-aria-components';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Label as RACLabel } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { withStyleProps } from '../../with-style-props.js';
-const spinnerDimensions = {
-    small: '16px',
-    medium: '38px',
-    large: '72px',
+import { InternalSpinner } from '../internal/spinner/spinner.js';
+import { textStyle } from '../typography/utils.js';
+const ringSizes = {
+    small: '24px',
+    medium: '48px',
+    large: '80px',
 };
-const offset = 0;
-const duration = 2;
-const modOffset = offset % 1;
-const begin = (1 - modOffset) * duration - duration;
-function Spinner({ size = 'large', UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return (_jsx(RACProgressBar, { ...props, isIndeterminate: true, ref: ref, className: clsx('cim-spinner', UNSAFE_className), style: UNSAFE_style, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: spinnerDimensions[size], height: spinnerDimensions[size], viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", "aria-hidden": true, children: [_jsx("circle", { className: "cim-spinner-ring-bg", cx: "50", cy: "50", r: "40" }), _jsxs("circle", { className: "cim-spinner-ring-animated", cx: "50", cy: "50", r: "40", children: [_jsx("animate", { attributeName: "stroke-dashoffset", dur: duration, repeatCount: "indefinite", from: "0", to: "-502", begin: begin }), _jsx("animate", { attributeName: "stroke-dasharray", dur: duration, repeatCount: "indefinite", values: "75.3 175.7;1 250;75.3 175.7", begin: begin })] })] }) }));
+const labelVariants = {
+    small: 'small',
+    medium: 'medium',
+    large: 'body',
+};
+function Spinner({ size = 'medium', label, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useEffect(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Spinner requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    return (_jsx(InternalSpinner, { ...props, size: ringSizes[size], spinnerRef: ref, children: label && _jsx(RACLabel, { className: textStyle({ variant: labelVariants[size], tone: 'title' }), children: label }) }));
 }
+/**
+ * Displays a loading indicator to represent an ongoing operation.
+ *
+ * See [spinner usage guidelines](https://ui.cimpress.io/components/spinner/).
+ */
 const _Spinner = withStyleProps(forwardRef(Spinner), 'Spinner');
 export { _Spinner as Spinner };
 //# sourceMappingURL=spinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAS3D,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,CAAC;AACjB,MAAM,QAAQ,GAAG,CAAC,CAAC;AACnB,MAAM,SAAS,GAAG,MAAM,GAAG,CAAC,CAAC;AAC7B,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpD,SAAS,OAAO,CACd,EAAE,IAAI,GAAG,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EAC1E,GAAiC;IAEjC,OAAO,CACL,KAAC,cAAc,OACT,KAAK,EACT,eAAe,QACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,YAEnB,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,EAC9B,MAAM,EAAE,iBAAiB,CAAC,IAAI,CAAC,EAC/B,OAAO,EAAC,aAAa,EACrB,mBAAmB,EAAC,UAAU,kCAG9B,iBAAQ,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAEjE,kBAAQ,SAAS,EAAC,2BAA2B,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,aAClE,kBACE,aAAa,EAAC,mBAAmB,EACjC,GAAG,EAAE,QAAQ,EACb,WAAW,EAAC,YAAY,EACxB,IAAI,EAAC,GAAG,EACR,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,KAAK,GACZ,EACF,kBACE,aAAa,EAAC,kBAAkB,EAChC,GAAG,EAAE,QAAQ,EACb,WAAW,EAAC,YAAY,EACxB,MAAM,EAAC,6BAA6B,EACpC,KAAK,EAAE,KAAK,GACZ,IACK,IACL,GACS,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAG,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAEhE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { ProgressBar as RACProgressBar } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { DOMProps } from '../types.js';\n\ninterface SpinnerProps extends DOMProps {\n  size?: 'small' | 'medium' | 'large';\n  /** A string value that identifies the spinner's purpose for assistive technologies. */\n  'aria-label': string;\n}\n\nconst spinnerDimensions = {\n  small: '16px',\n  medium: '38px',\n  large: '72px',\n};\n\nconst offset = 0;\nconst duration = 2;\nconst modOffset = offset % 1;\nconst begin = (1 - modOffset) * duration - duration;\n\nfunction Spinner(\n  { size = 'large', UNSAFE_className, UNSAFE_style, ...props }: SpinnerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACProgressBar\n      {...props}\n      isIndeterminate\n      ref={ref}\n      className={clsx('cim-spinner', UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={spinnerDimensions[size]}\n        height={spinnerDimensions[size]}\n        viewBox=\"0 0 100 100\"\n        preserveAspectRatio=\"xMidYMid\"\n        aria-hidden\n      >\n        <circle className=\"cim-spinner-ring-bg\" cx=\"50\" cy=\"50\" r=\"40\" />\n\n        <circle className=\"cim-spinner-ring-animated\" cx=\"50\" cy=\"50\" r=\"40\">\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            dur={duration}\n            repeatCount=\"indefinite\"\n            from=\"0\"\n            to=\"-502\"\n            begin={begin}\n          />\n          <animate\n            attributeName=\"stroke-dasharray\"\n            dur={duration}\n            repeatCount=\"indefinite\"\n            values=\"75.3 175.7;1 250;75.3 175.7\"\n            begin={begin}\n          />\n        </circle>\n      </svg>\n    </RACProgressBar>\n  );\n}\n\nconst _Spinner = withStyleProps(forwardRef(Spinner), 'Spinner');\n\nexport { _Spinner as Spinner };\n"]}
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAUnD,MAAM,SAAS,GAAsD;IACnE,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,aAAa,GAA2E;IAC5F,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,SAAS,OAAO,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAgB,EAAE,GAAiC;IACpG,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;QACjG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,eAAe,OAAK,KAAK,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,GAAG,YAC/D,KAAK,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,YAAG,KAAK,GAAY,GAC7F,CACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,QAAQ,GAAG,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAEhE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Label as RACLabel } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { InternalSpinner } from '../internal/spinner/spinner.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport type { TextStyleOptions } from '../typography/types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface SpinnerProps extends CommonProps, LabellableProps {\n  /**\n   * Determines the size of the spinner.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n}\n\nconst ringSizes: Record<NonNullable<SpinnerProps['size']>, string> = {\n  small: '24px',\n  medium: '48px',\n  large: '80px',\n};\n\nconst labelVariants: Record<NonNullable<SpinnerProps['size']>, TextStyleOptions['variant']> = {\n  small: 'small',\n  medium: 'medium',\n  large: 'body',\n};\n\nfunction Spinner({ size = 'medium', label, ...props }: SpinnerProps, ref: ForwardedRef<HTMLDivElement>) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Spinner requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <InternalSpinner {...props} size={ringSizes[size]} spinnerRef={ref}>\n      {label && <RACLabel className={textStyle({ variant: labelVariants[size], tone: 'title' })}>{label}</RACLabel>}\n    </InternalSpinner>\n  );\n}\n\n/**\n * Displays a loading indicator to represent an ongoing operation.\n *\n * See [spinner usage guidelines](https://ui.cimpress.io/components/spinner/).\n */\nconst _Spinner = withStyleProps(forwardRef(Spinner), 'Spinner');\n\nexport { _Spinner as Spinner };\n"]}

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

@@ -1,7 +1,8 @@
 import { type TextAreaProps as RACTextAreaProps, type TextFieldProps as RACTextFieldProps } from 'react-aria-components';
-import type { DOMProps, FieldWithPlaceholderProps } from '../types.js';
-export interface TextAreaProps extends DOMProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength'>, Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'wrap'> {
+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'> {
 }
-declare const _TextArea: (props: TextAreaProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+/** Allows users to enter multiple lines of text with a keyboard. */
+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/esm/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":"AAEA,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGvE,MAAM,WAAW,aACf,SAAQ,QAAQ,EACd,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,CACd,EACD,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,CAAC;CAAG;AAqCvF,QAAA,MAAM,SAAS,sJAAmD,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,EACzC,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;AAgDhG,oEAAoE;AACpE,QAAA,MAAM,SAAS,+JAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}

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

@@ -1,13 +1,23 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
+import { useEffect } from 'react';
 import { TextArea as RACTextArea, TextField as RACTextField, } from 'react-aria-components';
 import { forwardRef } from '../../forward-ref.js';
 import { withStyleProps } from '../../with-style-props.js';
-import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';
+import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
 import { textStyle } from '../typography/utils.js';
-function TextArea({ label, description, error: errorMessage, placeholder, autoCapitalize, autoCorrect, spellCheck, wrap, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return (_jsxs(RACTextField, { ...props, ref: ref, className: clsx('cim-text-area', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsx(RACTextArea, { className: clsx('cim-text-area-input', textStyle({ variant: 'medium', tone: 'base' })), placeholder: placeholder, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, wrap: wrap }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
+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;
+    useEffect(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('TextArea requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    return (_jsxs(RACTextField, { ...props, ref: ref, className: clsx('cim-text-area', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsx(RACTextArea, { className: clsx('cim-text-area-input', textStyle({ variant: 'medium', tone: 'base' })), placeholder: placeholder, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, rows: rows, spellCheck: spellCheck, wrap: wrap }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }));
 }
+// TODO: add link to usage guidelines
+/** Allows users to enter multiple lines of text with a keyboard. */
 const _TextArea = withStyleProps(forwardRef(TextArea), 'TextArea');
 export { _TextArea as TextArea };
 //# sourceMappingURL=text-area.js.map

package/dist/esm/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,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,SAAS,IAAI,YAAY,GAG1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEnG,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAwBnD,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,EACV,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACM,EAChB,GAAiC;IAEjC,OAAO,CACL,MAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACxG,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,KAAC,WAAW,IACV,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,EACtF,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,EACF,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IAC7C,CAChB,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["import 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} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../form-field/form-field.js';\nimport type { DOMProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextAreaProps\n  extends DOMProps,\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    >,\n    Pick<RACTextAreaProps, 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'wrap'> {}\n\nfunction TextArea(\n  {\n    label,\n    description,\n    error: errorMessage,\n    placeholder,\n    autoCapitalize,\n    autoCorrect,\n    spellCheck,\n    wrap,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: TextAreaProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <RACTextField {...props} ref={ref} className={clsx('cim-text-area', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACTextArea\n        className={clsx('cim-text-area-input', textStyle({ variant: 'medium', tone: 'base' }))}\n        placeholder={placeholder}\n        autoCapitalize={autoCapitalize}\n        autoCorrect={autoCorrect}\n        spellCheck={spellCheck}\n        wrap={wrap}\n      />\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACTextField>\n  );\n}\n\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,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,SAAS,IAAI,YAAY,GAG1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE5G,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;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,SAAS,CAAC,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,MAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACxG,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,KAAC,WAAW,IACV,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,EACtF,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,EACF,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IAC7C,CAChB,CAAC;AACJ,CAAC;AAED,qCAAqC;AACrC,oEAAoE;AACpE,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { 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} 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      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACTextArea\n        className={clsx('cim-text-area-input', textStyle({ variant: 'medium', tone: 'base' }))}\n        placeholder={placeholder}\n        autoCapitalize={autoCapitalize}\n        autoCorrect={autoCorrect}\n        rows={rows}\n        spellCheck={spellCheck}\n        wrap={wrap}\n      />\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\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"]}

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

@@ -1,7 +1,12 @@
 import { type TextFieldProps as RACTextFieldProps } from 'react-aria-components';
-import type { DOMProps, FieldWithPlaceholderProps } from '../types.js';
-export interface TextFieldProps extends DOMProps, FieldWithPlaceholderProps<string>, Pick<RACTextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'type' | 'autoFocus' | 'autoComplete' | 'inputMode' | 'minLength' | 'maxLength' | 'pattern'> {
+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'> {
 }
-declare const _TextField: (props: TextFieldProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").ReactNode;
+/**
+ * Allows users to enter a single line of text with a keyboard.
+ *
+ * See [text field usage guidelines](https://ui.cimpress.io/components/text-field/).
+ */
+declare const _TextField: (props: TextFieldProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _TextField as TextField };
 //# sourceMappingURL=text-field.d.ts.map

package/dist/esm/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":"AAEA,OAAO,EAGL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGvE,MAAM,WAAW,cACf,SAAQ,QAAQ,EACd,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,CACZ;CAAG;AAqBR,QAAA,MAAM,UAAU,uJAAqD,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,EACzC,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;AA6BR;;;;GAIG;AACH,QAAA,MAAM,UAAU,gKAAqD,CAAC;AAEtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}