@cimpress-ui/react 0.0.0 → 0.0.1

package/dist/esm/components/radio/radio.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useEffect } from 'react';
@@ -14,6 +15,11 @@ function Radio({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     }, [children, ariaLabel, ariaLabelledBy]);
     return (_jsxs(RACRadio, { ...props, className: clsx('cim-radio', UNSAFE_className), style: UNSAFE_style, ref: ref, children: [_jsx("div", { className: "cim-radio-toggle-wrapper", children: _jsx("div", { className: "cim-radio-toggle", children: _jsx("div", { className: "cim-radio-toggle-inner" }) }) }), children && (_jsx(Text, { as: "span", variant: "body", children: children }))] }));
 }
+/**
+ * Renders a single option within `RadioGroup`.
+ *
+ * See [radio usage guidelines](https://ui.cimpress.io/components/radio/usage-guidelines/).
+ */
 const _Radio = withStyleProps(forwardRef(Radio), 'Radio');
 export { _Radio as Radio };
 //# sourceMappingURL=radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,uBAAuB,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAU7C,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAClE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,QAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,aAChG,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,kBAAkB,YAC/B,cAAK,SAAS,EAAC,wBAAwB,GAAG,GACtC,GACF,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACQ,CACZ,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 { useEffect, type ForwardedRef } from 'react';\nimport { Radio as RACRadio, type RadioProps as RACRadioProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { DOMProps, LabellableProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface RadioProps\n  extends DOMProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<RACRadioProps, 'value' | 'isDisabled'> {\n  /** The label rendered next to the radio. */\n  children?: string;\n}\n\nfunction Radio(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: RadioProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACRadio {...props} className={clsx('cim-radio', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      <div className=\"cim-radio-toggle-wrapper\">\n        <div className=\"cim-radio-toggle\">\n          <div className=\"cim-radio-toggle-inner\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"body\">\n          {children}\n        </Text>\n      )}\n    </RACRadio>\n  );\n}\n\nconst _Radio = withStyleProps(forwardRef(Radio), 'Radio');\n\nexport { _Radio as Radio };\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,uBAAuB,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAU7C,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAClE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,QAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,aAChG,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,kBAAkB,YAC/B,cAAK,SAAS,EAAC,wBAAwB,GAAG,GACtC,GACF,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,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 { useEffect, type ForwardedRef } from 'react';\nimport { Radio as RACRadio, type RadioProps as RACRadioProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface RadioProps\n  extends CommonProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<RACRadioProps, 'value' | 'isDisabled'> {\n  /** The label rendered next to the radio. */\n  children?: StringLikeChildren;\n}\n\nfunction Radio(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: RadioProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACRadio {...props} className={clsx('cim-radio', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      <div className=\"cim-radio-toggle-wrapper\">\n        <div className=\"cim-radio-toggle\">\n          <div className=\"cim-radio-toggle-inner\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"body\">\n          {children}\n        </Text>\n      )}\n    </RACRadio>\n  );\n}\n\n/**\n * Renders a single option within `RadioGroup`.\n *\n * See [radio usage guidelines](https://ui.cimpress.io/components/radio/usage-guidelines/).\n */\nconst _Radio = withStyleProps(forwardRef(Radio), 'Radio');\n\nexport { _Radio as Radio };\n"]}

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

@@ -1,28 +1,31 @@
-import type { ReactNode } from 'react';
-import { type SelectProps as RACSelectProps } from 'react-aria-components';
-import type { DOMProps, FieldWithPlaceholderProps, Key } from '../types.js';
-export interface SelectOption {
-    /** The unique id of the item. When integrated with a form, this will be the value of the option. */
-    id: string;
-    /** The content to display as the label of the option. */
-    label: string;
-    /** Whether the option is disabled. */
-    isDisabled?: boolean;
+import { type ListBoxItemProps as RACListBoxItemProps, type SelectProps as RACSelectProps } from 'react-aria-components';
+import type { CollectionItem, CollectionProps, CommonProps, FieldProps, Key, StringLikeChildren } from '../types.js';
+export interface SelectProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldProps<Key>, CollectionProps<T>, Pick<RACSelectProps<T>, 'name' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'selectedKey' | 'defaultSelectedKey' | 'autoComplete' | 'autoFocus' | 'onSelectionChange' | 'placeholder'> {
 }
-export interface SelectOptionGroup {
-    /** The unique id of the group. */
-    id: string;
-    /** The content to display as the title of the group. */
-    label: string;
-    /** The options available for selection within the group. */
-    options: SelectOption[];
-    isDisabled?: never;
+/**
+ * Allows users to select one item from a collapsible list.
+ *
+ * See [select usage guidelines](https://ui.cimpress.io/components/select/usage-guidelines/).
+ */
+declare const _Select: <T extends CollectionItem>(props: SelectProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Select as Select };
+export interface SelectItemProps extends Pick<RACListBoxItemProps, 'id' | 'isDisabled'> {
+    children: StringLikeChildren;
 }
-export type SelectOptionType = SelectOption | SelectOptionGroup;
-export interface SelectProps extends Pick<RACSelectProps<SelectOptionType>, 'name' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'selectedKey' | 'defaultSelectedKey' | 'placeholder' | 'autoComplete' | 'autoFocus' | 'onSelectionChange'>, DOMProps, FieldWithPlaceholderProps<Key> {
-    /** The options available for selection. Supports groups with a single level of nesting. */
-    options: SelectOptionType[];
+/** Renders a single list item within `Select`. */
+export declare function SelectItem({ children, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectItem {
+    var displayName: string;
+}
+export interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {
+    /** The ID of the section. Has to be unique across all sections and items. */
+    id?: Key;
+    /** The content to display as the section title. */
+    title: string;
+}
+/** Groups list items within `Select` into a section. */
+export declare function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectSection {
+    var displayName: string;
 }
-declare const _Select: (props: SelectProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => ReactNode;
-export { _Select as Select };
 //# sourceMappingURL=select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AACpE,OAAO,EAWL,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAG5E,MAAM,WAAW,YAAY;IAC3B,oGAAoG;IACpG,EAAE,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,iBAAiB,CAAC;AAEhE,MAAM,WAAW,WACf,SAAQ,IAAI,CACR,cAAc,CAAC,gBAAgB,CAAC,EAC9B,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,aAAa,GACb,oBAAoB,GACpB,aAAa,GACb,cAAc,GACd,WAAW,GACX,mBAAmB,CACtB,EACD,QAAQ,EACR,yBAAyB,CAAC,GAAG,CAAC;IAChC,2FAA2F;IAC3F,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AA+BD,QAAA,MAAM,OAAO,oIAA+C,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAUL,KAAK,gBAAgB,IAAI,mBAAmB,EAC5C,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGrH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACpE,SAAQ,WAAW,EACjB,UAAU,CAAC,GAAG,CAAC,EACf,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,cAAc,CAAC,CAAC,CAAC,EACf,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,aAAa,GACb,oBAAoB,GACpB,cAAc,GACd,WAAW,GACX,mBAAmB,GACnB,aAAa,CAChB;CAAG;AA6CR;;;;GAIG;AACH,QAAA,MAAM,OAAO,GAhDG,CAAC,SAAS,cAAc,+JAgDoB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAE7B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,YAAY,CAAC;IACrF,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAiBjE;yBAjBe,UAAU;;;AAqB1B,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACtF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAelH;yBAfe,aAAa"}

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, ...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", items: items, children: children }) })] }));
 }
+/**
+ * Allows users to select one item from a collapsible list.
+ *
+ * See [select usage guidelines](https://ui.cimpress.io/components/select/usage-guidelines/).
+ */
 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":"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","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  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    > {}\n\nfunction Select<T extends CollectionItem>(\n  { children, items, label, description, error, UNSAFE_className, UNSAFE_style, ...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\" 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/usage-guidelines/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'id' | 'isDisabled'> {\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,12 @@
-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. */
+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;AA+BD,sEAAsE;AACtE,QAAA,MAAM,QAAQ,8JAAiD,CAAC;AAEhE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}

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

@@ -1,20 +1,32 @@
-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 }) }));
 }
+// TODO: add link to usage guidelines
+/** Displays a loading indicator to represent an ongoing operation. */
 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,qCAAqC;AACrC,sEAAsE;AACtE,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// TODO: add link to usage guidelines\n/** Displays a loading indicator to represent an ongoing operation. */\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'>, 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,CACd,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"}