npm - @cimpress-ui/react - Versions diffs - 0.4.0 → 1.0.0 - Mend

@cimpress-ui/react 0.4.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/dist/esm/components/tag-field/tag-field-tags.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { ButtonContext as RACButtonContext, LabelContext as RACLabelContext, Lis
 import { TagGroup } from '../tag/tag-group.js';
 import { Tag } from '../tag/tag.js';
 /** @internal */
-export function TagFieldTags({ inputId, selectedKeys, isDisabled, renderEmptyState, onRemove, }) {
+export function TagFieldTags({ inputId, selectedKeys, isDisabled, isReadOnly, renderEmptyState, onRemove, }) {
     const listState = useContext(RACListStateContext);
     const selectedItems = useMemo(() => {
         return [...selectedKeys.values()]
@@ -17,8 +17,10 @@ export function TagFieldTags({ inputId, selectedKeys, isDisabled, renderEmptySta
             [RACButtonContext, null],
             [RACTextContext, null],
             [RACListStateContext, null],
-        ], children: _jsx(TagGroup, { "aria-labelledby": inputId, disabledKeys: isDisabled ? selectedKeys : undefined, renderEmptyState: renderEmptyState, onRemove: (keys) => {
-                keys.forEach(onRemove);
-            }, children: selectedItems.map((item) => (_jsx(Tag, { id: item.key, isDisabled: item.props.isDisabled, children: item.textValue }, item.key))) }) }));
+        ], children: _jsx(TagGroup, { "aria-labelledby": inputId, disabledKeys: isDisabled ? selectedKeys : undefined, renderEmptyState: renderEmptyState, onRemove: isReadOnly
+                ? undefined
+                : (keys) => {
+                    keys.forEach(onRemove);
+                }, children: selectedItems.map((item) => (_jsx(Tag, { id: item.key, isDisabled: item.props.isDisabled, children: item.textValue }, item.key))) }) }));
 }
 //# sourceMappingURL=tag-field-tags.js.map

package/dist/esm/components/tag-field/tag-field-tags.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag-field-tags.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-tags.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,aAAa,IAAI,gBAAgB,EACjC,YAAY,IAAI,eAAe,EAC/B,gBAAgB,IAAI,mBAAmB,EACvC,QAAQ,IAAI,WAAW,EACvB,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,GAAG,EAAiB,MAAM,eAAe,CAAC;AAInD,gBAAgB;AAChB,MAAM,UAAU,YAAY,CAA2B,EACrD,OAAO,EACP,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,QAAQ,GAKT;IACC,MAAM,SAAS,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC;aAC9B,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;aACjE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,KAAC,WAAW,IACV,MAAM,EAAE;YACN,4EAA4E;YAC5E,CAAC,eAAe,EAAE,IAAI,CAAC;YACvB,CAAC,gBAAgB,EAAE,IAAI,CAAC;YACxB,CAAC,cAAc,EAAE,IAAI,CAAC;YACtB,CAAC,mBAAmB,EAAE,IAAI,CAAC;SAC5B,YAED,KAAC,QAAQ,uBACU,OAAO,EACxB,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACnD,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,~~EAAE~~,CAAC,IAAI,EAAE,EAAE;~~gBACjB~~,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;~~YACzB~~,CAAC,~~YAEA~~,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,KAAC,GAAG,IAAgB,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,UAAU,EAAG,IAAI,CAAC,KAAkB,CAAC,UAAU,YAC9E,IAAI,CAAC,SAAS,IADP,IAAI,CAAC,GAAG,CAEZ,CACP,CAAC,GACO,GACC,CACf,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport {\n ButtonContext as RACButtonContext,\n LabelContext as RACLabelContext,\n ListStateContext as RACListStateContext,\n Provider as RACProvider,\n TextContext as RACTextContext,\n} from 'react-aria-components';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { ~~UNSTABLE_TagFieldProps~~ } from './tag-field.js';\n\n/** @internal */\nexport function TagFieldTags<T extends CollectionItem>({\n inputId,\n selectedKeys,\n isDisabled,\n renderEmptyState,\n onRemove,\n}: Pick<~~UNSTABLE_TagFieldProps~~<T>, 'isDisabled' \| 'renderEmptyState'> & {\n inputId: string;\n selectedKeys: Set<Key>;\n onRemove: (key: Key) => void;\n}) {\n const listState = useContext(RACListStateContext);\n\n const selectedItems = useMemo(() => {\n return [...selectedKeys.values()]\n .map((key) => listState?.selectionManager.collection.getItem(key))\n .filter((value) => !!value);\n }, [selectedKeys, listState?.selectionManager.collection]);\n\n return (\n <RACProvider\n values={[\n // Reset contexts so that TagGroup doesn't inherit any data from RACComboBox\n [RACLabelContext, null],\n [RACButtonContext, null],\n [RACTextContext, null],\n [RACListStateContext, null],\n ]}\n >\n <TagGroup\n aria-labelledby={inputId}\n disabledKeys={isDisabled ? selectedKeys : undefined}\n renderEmptyState={renderEmptyState}\n onRemove={(keys) => {\n keys.forEach(onRemove);\n }}\n >\n {selectedItems.map((item) => (\n <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n {item.textValue}\n </Tag>\n ))}\n </TagGroup>\n </RACProvider>\n );\n}\n"]}
1	+ {"version":3,"file":"tag-field-tags.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-tags.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,aAAa,IAAI,gBAAgB,EACjC,YAAY,IAAI,eAAe,EAC/B,gBAAgB,IAAI,mBAAmB,EACvC,QAAQ,IAAI,WAAW,EACvB,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,GAAG,EAAiB,MAAM,eAAe,CAAC;AAInD,gBAAgB;AAChB,MAAM,UAAU,YAAY,CAA2B,EACrD,OAAO,EACP,YAAY,EACZ,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,QAAQ,GAKT;IACC,MAAM,SAAS,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC;aAC9B,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;aACjE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,KAAC,WAAW,IACV,MAAM,EAAE;YACN,4EAA4E;YAC5E,CAAC,eAAe,EAAE,IAAI,CAAC;YACvB,CAAC,gBAAgB,EAAE,IAAI,CAAC;YACxB,CAAC,cAAc,EAAE,IAAI,CAAC;YACtB,CAAC,mBAAmB,EAAE,IAAI,CAAC;SAC5B,YAED,KAAC,QAAQ,uBACU,OAAO,EACxB,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACnD,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EACN,UAAU;gBACR,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE;oBACP,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;gBACzB,CAAC,YAGN,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,KAAC,GAAG,IAAgB,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,UAAU,EAAG,IAAI,CAAC,KAAkB,CAAC,UAAU,YAC9E,IAAI,CAAC,SAAS,IADP,IAAI,CAAC,GAAG,CAEZ,CACP,CAAC,GACO,GACC,CACf,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport {\n ButtonContext as RACButtonContext,\n LabelContext as RACLabelContext,\n ListStateContext as RACListStateContext,\n Provider as RACProvider,\n TextContext as RACTextContext,\n} from 'react-aria-components';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\n/** @internal */\nexport function TagFieldTags<T extends CollectionItem>({\n inputId,\n selectedKeys,\n isDisabled,\n isReadOnly,\n renderEmptyState,\n onRemove,\n}: Pick<TagFieldProps<T>, 'isDisabled' \| 'isReadOnly' \| 'renderEmptyState'> & {\n inputId: string;\n selectedKeys: Set<Key>;\n onRemove: (key: Key) => void;\n}) {\n const listState = useContext(RACListStateContext);\n\n const selectedItems = useMemo(() => {\n return [...selectedKeys.values()]\n .map((key) => listState?.selectionManager.collection.getItem(key))\n .filter((value) => !!value);\n }, [selectedKeys, listState?.selectionManager.collection]);\n\n return (\n <RACProvider\n values={[\n // Reset contexts so that TagGroup doesn't inherit any data from RACComboBox\n [RACLabelContext, null],\n [RACButtonContext, null],\n [RACTextContext, null],\n [RACListStateContext, null],\n ]}\n >\n <TagGroup\n aria-labelledby={inputId}\n disabledKeys={isDisabled ? selectedKeys : undefined}\n renderEmptyState={renderEmptyState}\n onRemove={\n isReadOnly\n ? undefined\n : (keys) => {\n keys.forEach(onRemove);\n }\n }\n >\n {selectedItems.map((item) => (\n <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n {item.textValue}\n </Tag>\n ))}\n </TagGroup>\n </RACProvider>\n );\n}\n"]}

package/dist/esm/components/tag-field/tag-field.d.ts CHANGED Viewed

@@ -2,42 +2,50 @@ import { type ListBoxProps as RACListBoxProps, type ComboBoxProps as RACComboBox
 import type { TagGroupProps } from '../tag/tag-group.js';
 import type { CollectionItem, CollectionProps, CommonProps, FieldWithPlaceholderProps, Key, StringLikeChildren } from '../types.js';
 /** Represents the state of the `TagField` component for validation purposes. */
-export interface UNSTABLE_TagFieldValidationValue {
+export interface TagFieldValidationValue {
     /** The selected keys in the TagField. */
     selectedKeys: Set<Key> | null;
     /** The value of the TagField input. */
     inputValue: string;
 }
-export interface UNSTABLE_TagFieldProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<UNSTABLE_TagFieldValidationValue>, CollectionProps<T>, Pick<RACComboBoxProps<T>, 'isRequired' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'>, Pick<TagGroupProps<T>, 'renderEmptyState'> {
+export interface TagFieldProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<TagFieldValidationValue>, CollectionProps<T>, Pick<RACComboBoxProps<T>, 'isRequired' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'>, Pick<TagGroupProps<T>, 'renderEmptyState'> {
+    /** The currently selected keys in the collection (controlled). */
     selectedKeys?: Iterable<Key>;
+    /** The initial selected keys in the collection (uncontrolled). */
     defaultSelectedKeys?: Iterable<Key>;
+    /** Handler that is called when the selection changes. */
     onSelectionChange?: (keys: Set<Key>) => void;
+    /**
+     * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.
+     * @default false
+     */
+    isVirtualized?: boolean;
 }
 /**
  * Allows users to filter a collapsible list and select multiple items from it.
  *
- * See [tag field usage guidelines](https://ui.cimpress.com/components/tag-field)
+ * See [tag field usage guidelines](https://ui.cimpress.com/components/tag-field).
  */
-declare const _UNSTABLE_TagField: <T extends CollectionItem>(props: UNSTABLE_TagFieldProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_TagField as UNSTABLE_TagField };
-export interface UNSTABLE_TagFieldItemProps<T extends CollectionItem> extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+declare const _TagField: <T extends CollectionItem>(props: TagFieldProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _TagField as TagField };
+export interface TagFieldItemProps<T extends CollectionItem> extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
     /** The content to display as the label. */
     children: StringLikeChildren;
 }
 /** Renders a single list item within `TagField`. */
-export declare function UNSTABLE_TagFieldItem<T extends CollectionItem>({ children, ...props }: UNSTABLE_TagFieldItemProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace UNSTABLE_TagFieldItem {
+export declare function TagFieldItem<T extends CollectionItem>({ children, ...props }: TagFieldItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TagFieldItem {
     var displayName: string;
 }
-export interface UNSTABLE_TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {
+export interface TagFieldSectionProps<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 `TagField` into a section. */
-export declare function UNSTABLE_TagFieldSection<T extends CollectionItem>({ title, children, items, ...props }: UNSTABLE_TagFieldSectionProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace UNSTABLE_TagFieldSection {
+export declare function TagFieldSection<T extends CollectionItem>({ title, children, items, ...props }: TagFieldSectionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TagFieldSection {
     var displayName: string;
 }
 //# sourceMappingURL=tag-field.d.ts.map

package/dist/esm/components/tag-field/tag-field.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag-field.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAQA,OAAO,EAOL,KAAK,YAAY,IAAI,eAAe,EAIpC,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;~~AAU~~/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;~~AAOrB~~,gFAAgF;AAChF,MAAM,WAAW,~~gCAAgC~~;~~IAC/C~~,yCAAyC;IACzC,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC9B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,~~sBAAsB~~,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,~~CAC/E~~,SAAQ,WAAW,EACjB,yBAAyB,CAAC,~~gCAAgC~~,CAAC,~~EAC3D~~,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;IAC5C,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;~~CAC9C~~;~~AAyOD~~;;;;GAIG;AACH,QAAA,MAAM,~~kBAAkB~~,~~GA5OG~~,CAAC,SAAS,cAAc,~~0KA4OiC~~,CAAC;~~AAErF~~,OAAO,EAAE,~~kBAAkB~~,IAAI,~~iBAAiB~~,EAAE,CAAC;~~AAEnD~~,MAAM,WAAW,~~0BAA0B~~,CAAC,CAAC,SAAS,cAAc,~~CAClE~~,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,~~qBAAqB~~,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,~~0BAA0B~~,CAAC,CAAC,CAAC,~~2CAqBpH~~;yBArBe,~~qBAAqB~~;;;~~AAyBrC~~,MAAM,WAAW,~~6BAA6B~~,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;~~IACjG~~,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,~~wBAAwB~~,CAAC,CAAC,SAAS,cAAc,EAAE,~~EACjE~~,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,~~6BAA6B~~,CAAC,CAAC,CAAC,~~2CAelC~~;yBApBe,~~wBAAwB~~"}
1	+ {"version":3,"file":"tag-field.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAQA,OAAO,EAOL,KAAK,YAAY,IAAI,eAAe,EAIpC,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;AAS/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAMrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC9B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EACjB,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;IAC5C,kEAAkE;IAClE,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAwOD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA3OG,CAAC,SAAS,cAAc,iKA2OwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAEjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CACzD,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAqBlG;yBArBe,YAAY;;;AAyB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}

package/dist/esm/components/tag-field/tag-field.js CHANGED Viewed

@@ -15,13 +15,11 @@ import { useProductionWarning } from '../../utils/use-production-warning.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
 import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
-import { Stack } from '../spacing/stack/stack.js';
-import { Text } from '../typography/text.js';
 import { textStyle } from '../typography/utils.js';
 import { TagFieldInput } from './tag-field-input.js';
 import { TagFieldListBox } from './tag-field-list-box.js';
 import { TagFieldTags } from './tag-field-tags.js';
-function UNSTABLE_TagField({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, inputValue: consumerInputValue, defaultInputValue: defaultConsumerInputValue, onInputChange, name, validate, onScroll, selectedKeys: consumerSelectedKeys, defaultSelectedKeys: defaultConsumerSelectedKeys, onSelectionChange, id, renderEmptyState = () => (_jsx(Stack, { gap: 0, justify: "center", UNSAFE_style: { height: 24 }, children: _jsx(Text, { as: "p", variant: "medium", tone: "base", children: "No items selected." }) })), ...props }, ref) {
+function TagField({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, inputValue: consumerInputValue, defaultInputValue: defaultConsumerInputValue, onInputChange, name, validate, onScroll, selectedKeys: consumerSelectedKeys, defaultSelectedKeys: defaultConsumerSelectedKeys, onSelectionChange, id, renderEmptyState, isVirtualized = false, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled, isInvalid } = props;
     useProductionWarning(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
@@ -83,6 +81,8 @@ function UNSTABLE_TagField({ label, description, error, items, children, placeho
     };
     const onItemSelectionChange = (key) => {
         if (selectedSet.has(key)) {
+            // This is a temporary mutation followed immediately by a state update, so this is fine
+            // eslint-disable-next-line react-hooks/react-compiler
             selectedSet.delete(key);
         }
         else {
@@ -107,29 +107,29 @@ function UNSTABLE_TagField({ label, description, error, items, children, placeho
                         [RACTextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],
                         [RACGroupContext, { isInvalid: validationState.displayValidation.isInvalid, isDisabled }],
                         [RACFieldErrorContext, validationState.displayValidation],
-                    ], children: [_jsx(FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), _jsx(TagFieldTags, { inputId: inputId, selectedKeys: selectedSet, isDisabled: isDisabled || isReadOnly, renderEmptyState: renderEmptyState, onRemove: onItemSelectionChange }), _jsxs(RACGroup, { className: "cim-combo-box-input-group", children: [_jsx(TagFieldInput, { "aria-describedby": props['aria-describedby'], isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: validationState.displayValidation.isInvalid, placeholder: selectedSet.size === 0 && placeholder
+                    ], children: [_jsx(FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-combo-box-input-group", children: [_jsx(TagFieldInput, { "aria-describedby": props['aria-describedby'], isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: validationState.displayValidation.isInvalid, placeholder: selectedSet.size === 0 && placeholder
                                         ? placeholder
-                                        : messages.format('itemsSelected', { selectedItemCount: selectedSet.size }), onFocusChange: onFocusChange }), _jsx(RACButton, { className: "cim-combo-box-button", children: _jsx(IconChevronDown, {}) })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(TagFieldListBox, { items: items, selectedKeys: selectedSet, setSelectedKeys: setSelectedKeys, onScroll: onScroll, children: children }) })] }) }), _jsx(RACInput, { ref: formInputRef, style: { display: 'none' }, value: selectedSet.size || '', required: isRequired, "aria-invalid": validationState.displayValidation.isInvalid || undefined, onChange: () => { } }), name && [...selectedSet].map((value) => _jsx("input", { type: "hidden", name: name, value: value }, value))] }));
+                                        : messages.format('itemsSelected', { selectedItemCount: selectedSet.size }), onFocusChange: onFocusChange }), _jsx(RACButton, { className: "cim-combo-box-button", children: _jsx(IconChevronDown, {}) })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(TagFieldTags, { inputId: inputId, selectedKeys: selectedSet, isDisabled: isDisabled, isReadOnly: isReadOnly, renderEmptyState: renderEmptyState, onRemove: onItemSelectionChange }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(TagFieldListBox, { items: items, selectedKeys: selectedSet, setSelectedKeys: setSelectedKeys, onScroll: onScroll, isVirtualized: isVirtualized, children: children }) })] }) }), _jsx(RACInput, { ref: formInputRef, style: { display: 'none' }, value: selectedSet.size || '', required: isRequired, "aria-invalid": validationState.displayValidation.isInvalid || undefined, onChange: () => { } }), name && [...selectedSet].map((value) => _jsx("input", { type: "hidden", name: name, value: value }, value))] }));
 }
 /**
  * Allows users to filter a collapsible list and select multiple items from it.
  *
- * See [tag field usage guidelines](https://ui.cimpress.com/components/tag-field)
+ * See [tag field usage guidelines](https://ui.cimpress.com/components/tag-field).
  */
-const _UNSTABLE_TagField = withStyleProps(forwardRef(UNSTABLE_TagField), 'TagField');
-export { _UNSTABLE_TagField as UNSTABLE_TagField };
+const _TagField = withStyleProps(forwardRef(TagField), 'TagField');
+export { _TagField as TagField };
 /** Renders a single list item within `TagField`. */
-export function UNSTABLE_TagFieldItem({ children, ...props }) {
+export function TagFieldItem({ children, ...props }) {
     const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
-    return (_jsx(RACListBoxItem, { ...props, className: "cim-combo-box-item cim-tag-field-item cim-checkbox", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "cim-checkbox-toggle-wrapper", "aria-hidden": true, children: _jsx("div", { className: "cim-checkbox-toggle", children: _jsx(IconCheckBold, {}) }) }), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
+    return (_jsx(RACListBoxItem, { ...props, className: "cim-tag-field-item cim-checkbox", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "cim-checkbox-toggle-wrapper", "aria-hidden": true, children: _jsx("div", { className: "cim-checkbox-toggle", children: _jsx(IconCheckBold, {}) }) }), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
 }
-UNSTABLE_TagFieldItem.displayName = 'TagFieldItem';
+TagFieldItem.displayName = 'TagFieldItem';
 /** Groups list items within `TagField` into a section. */
-export function UNSTABLE_TagFieldSection({ title, children, items, ...props }) {
+export function TagFieldSection({ title, children, items, ...props }) {
     if (!isProduction() && items != null && typeof children !== 'function') {
         console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');
     }
     return (_jsxs(RACListBoxSection, { ...props, className: "cim-combo-box-section", children: [_jsx(RACHeader, { className: clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' })), children: title }), _jsx(RACCollection, { items: items, children: children })] }));
 }
-UNSTABLE_TagFieldSection.displayName = 'TagFieldSection';
+TagFieldSection.displayName = 'TagFieldSection';
 //# sourceMappingURL=tag-field.js.map

package/dist/esm/components/tag-field/tag-field.js.map CHANGED Viewed

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

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

@@ -14,7 +14,7 @@ function TextArea({ label, description, error: errorMessage, placeholder, autoCa
             console.warn('TextArea requires one of label / aria-label / aria-labelledby for accessibility');
         }
     }, [label, ariaLabel, ariaLabelledBy]);
-    return (_jsx(RACTextField, { ...props, ref: ref, className: clsx('cim-text-area', UNSAFE_className), style: UNSAFE_style, children: ({ isDisabled, isInvalid, isRequired }) => (_jsxs(_Fragment, { children: [_jsx(FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), _jsx(RACGroup, { className: "cim-text-area-input-group", isDisabled: isDisabled, isInvalid: isInvalid, children: _jsx(RACTextArea, { className: clsx('cim-text-area-input', textStyle({ variant: 'medium' })), placeholder: placeholder, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, rows: rows, spellCheck: spellCheck, wrap: wrap }) }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] })) }));
+    return (_jsx(RACTextField, { ...props, ref: ref, className: clsx('cim-text-area', UNSAFE_className), style: UNSAFE_style, children: ({ isDisabled, isInvalid, isRequired }) => (_jsxs(_Fragment, { children: [_jsx(FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), _jsx(RACGroup, { className: "cim-text-area-input-group", isDisabled: isDisabled, isInvalid: isInvalid, children: _jsx(RACTextArea, { className: clsx('cim-text-area-input', textStyle({ variant: 'body' })), placeholder: placeholder, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, rows: rows, spellCheck: spellCheck, wrap: wrap }) }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] })) }));
 }
 /**
  * Allows users to enter multiple lines of text with a keyboard.

package/dist/esm/components/text-inputs/text-area.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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;AAExB,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,SAAS,IAAI,YAAY,EAGzB,KAAK,IAAI,QAAQ,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,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;AAyBnD,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACM,EAChB,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YAEvG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC1C,8BACE,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EACjB,KAAC,QAAQ,IAAC,SAAS,EAAC,2BAA2B,EAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAC1F,KAAC,WAAW,IACV,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,~~QAAQ~~,EAAE,CAAC,CAAC,~~EACxE~~,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,GACO,EACX,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACY,CAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n TextArea as RACTextArea,\n TextField as RACTextField,\n type TextAreaProps as RACTextAreaProps,\n type TextFieldProps as RACTextFieldProps,\n Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextAreaProps\n extends CommonProps,\n FieldWithPlaceholderProps<string>,\n Pick<\n RACTextFieldProps,\n \| 'value'\n \| 'defaultValue'\n \| 'onChange'\n \| 'isDisabled'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'type'\n \| 'autoFocus'\n \| 'autoComplete'\n \| 'inputMode'\n \| 'minLength'\n \| 'maxLength'\n \| 'onFocus'\n \| 'onBlur'\n >,\n Pick<RACTextAreaProps, 'autoCapitalize' \| 'autoCorrect' \| 'rows' \| 'spellCheck' \| 'wrap'> {}\n\nfunction TextArea(\n {\n label,\n description,\n error: errorMessage,\n placeholder,\n autoCapitalize,\n autoCorrect,\n rows,\n spellCheck,\n wrap,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: TextAreaProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TextArea requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACTextField {...props} ref={ref} className={clsx('cim-text-area', UNSAFE_className)} style={UNSAFE_style}>\n {/* RAC doesn't pass `isDisabled` or `isInvalid` to `Group` through context as it does with `NumberField`, so we need to pass them manually /}\n {({ isDisabled, isInvalid, isRequired }) => (\n <>\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-text-area-input-group\" isDisabled={isDisabled} isInvalid={isInvalid}>\n <RACTextArea\n className={clsx('cim-text-area-input', textStyle({ variant: '~~medium~~' }))}\n placeholder={placeholder}\n autoCapitalize={autoCapitalize}\n autoCorrect={autoCorrect}\n rows={rows}\n spellCheck={spellCheck}\n wrap={wrap}\n />\n </RACGroup>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n )}\n </RACTextField>\n );\n}\n\n/\n Allows users to enter multiple lines of text with a keyboard.\n \n See [text area usage guidelines](https://ui.cimpress.io/components/text-area/).\n */\nconst _TextArea = withStyleProps(forwardRef(TextArea), 'TextArea');\n\nexport { _TextArea as TextArea };\n"]}
1	+ {"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;AAExB,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,SAAS,IAAI,YAAY,EAGzB,KAAK,IAAI,QAAQ,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,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;AAyBnD,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACM,EAChB,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YAEvG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC1C,8BACE,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EACjB,KAAC,QAAQ,IAAC,SAAS,EAAC,2BAA2B,EAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAC1F,KAAC,WAAW,IACV,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,EACtE,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,GACO,EACX,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACY,CAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n TextArea as RACTextArea,\n TextField as RACTextField,\n type TextAreaProps as RACTextAreaProps,\n type TextFieldProps as RACTextFieldProps,\n Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextAreaProps\n extends CommonProps,\n FieldWithPlaceholderProps<string>,\n Pick<\n RACTextFieldProps,\n \| 'value'\n \| 'defaultValue'\n \| 'onChange'\n \| 'isDisabled'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'type'\n \| 'autoFocus'\n \| 'autoComplete'\n \| 'inputMode'\n \| 'minLength'\n \| 'maxLength'\n \| 'onFocus'\n \| 'onBlur'\n >,\n Pick<RACTextAreaProps, 'autoCapitalize' \| 'autoCorrect' \| 'rows' \| 'spellCheck' \| 'wrap'> {}\n\nfunction TextArea(\n {\n label,\n description,\n error: errorMessage,\n placeholder,\n autoCapitalize,\n autoCorrect,\n rows,\n spellCheck,\n wrap,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: TextAreaProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TextArea requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACTextField {...props} ref={ref} className={clsx('cim-text-area', UNSAFE_className)} style={UNSAFE_style}>\n {/* RAC doesn't pass `isDisabled` or `isInvalid` to `Group` through context as it does with `NumberField`, so we need to pass them manually /}\n {({ isDisabled, isInvalid, isRequired }) => (\n <>\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-text-area-input-group\" isDisabled={isDisabled} isInvalid={isInvalid}>\n <RACTextArea\n className={clsx('cim-text-area-input', textStyle({ variant: 'body' }))}\n placeholder={placeholder}\n autoCapitalize={autoCapitalize}\n autoCorrect={autoCorrect}\n rows={rows}\n spellCheck={spellCheck}\n wrap={wrap}\n />\n </RACGroup>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n )}\n </RACTextField>\n );\n}\n\n/\n Allows users to enter multiple lines of text with a keyboard.\n \n See [text area usage guidelines](https://ui.cimpress.io/components/text-area/).\n */\nconst _TextArea = withStyleProps(forwardRef(TextArea), 'TextArea');\n\nexport { _TextArea as TextArea };\n"]}

package/dist/esm/components/text-inputs/text-field.js CHANGED Viewed

@@ -14,7 +14,7 @@ function TextField({ label, description, error: errorMessage, placeholder, UNSAF
             console.warn('TextField requires one of label / aria-label / aria-labelledby for accessibility');
         }
     }, [label, ariaLabel, ariaLabelledBy]);
-    return (_jsx(RACTextField, { ...props, ref: ref, className: clsx('cim-text-field', UNSAFE_className), style: UNSAFE_style, children: ({ isDisabled, isInvalid, isRequired }) => (_jsxs(_Fragment, { children: [_jsx(FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), _jsx(RACGroup, { className: "cim-text-field-input-group", isDisabled: isDisabled, isInvalid: isInvalid, children: _jsx(RACInput, { className: clsx('cim-text-field-input', textStyle({ variant: 'medium' })), placeholder: placeholder }) }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] })) }));
+    return (_jsx(RACTextField, { ...props, ref: ref, className: clsx('cim-text-field', UNSAFE_className), style: UNSAFE_style, children: ({ isDisabled, isInvalid, isRequired }) => (_jsxs(_Fragment, { children: [_jsx(FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), _jsx(RACGroup, { className: "cim-text-field-input-group", isDisabled: isDisabled, isInvalid: isInvalid, children: _jsx(RACInput, { className: clsx('cim-text-field-input', textStyle({ variant: 'body' })), placeholder: placeholder }) }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] })) }));
 }
 /**
  * Allows users to enter a single line of text with a keyboard.

package/dist/esm/components/text-inputs/text-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,KAAK,IAAI,QAAQ,EACjB,SAAS,IAAI,YAAY,EAEzB,KAAK,IAAI,QAAQ,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,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;AAyBnD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EAClH,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YAExG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC1C,8BACE,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EACjB,KAAC,QAAQ,IAAC,SAAS,EAAC,4BAA4B,EAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAC3F,KAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,~~QAAQ~~,EAAE,CAAC,CAAC,~~EACzE~~,WAAW,EAAE,WAAW,GACxB,GACO,EACX,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACY,CAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC,CAAC;AAEtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n Input as RACInput,\n TextField as RACTextField,\n type TextFieldProps as RACTextFieldProps,\n Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextFieldProps\n extends CommonProps,\n FieldWithPlaceholderProps<string>,\n Pick<\n RACTextFieldProps,\n \| 'value'\n \| 'defaultValue'\n \| 'onChange'\n \| 'isDisabled'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'type'\n \| 'autoFocus'\n \| 'autoComplete'\n \| 'inputMode'\n \| 'minLength'\n \| 'maxLength'\n \| 'pattern'\n \| 'onFocus'\n \| 'onBlur'\n > {}\n\nfunction TextField(\n { label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, ...props }: TextFieldProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TextField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACTextField {...props} ref={ref} className={clsx('cim-text-field', UNSAFE_className)} style={UNSAFE_style}>\n {/* RAC doesn't pass `isDisabled` or `isInvalid` to `Group` through context as it does with `NumberField`, so we need to pass them manually /}\n {({ isDisabled, isInvalid, isRequired }) => (\n <>\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-text-field-input-group\" isDisabled={isDisabled} isInvalid={isInvalid}>\n <RACInput\n className={clsx('cim-text-field-input', textStyle({ variant: '~~medium~~' }))}\n placeholder={placeholder}\n />\n </RACGroup>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n )}\n </RACTextField>\n );\n}\n\n/\n Allows users to enter a single line of text with a keyboard.\n \n See [text field usage guidelines](https://ui.cimpress.io/components/text-field/).\n */\nconst _TextField = withStyleProps(forwardRef(TextField), 'TextField');\n\nexport { _TextField as TextField };\n"]}
1	+ {"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,KAAK,IAAI,QAAQ,EACjB,SAAS,IAAI,YAAY,EAEzB,KAAK,IAAI,QAAQ,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,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;AAyBnD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EAClH,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YAExG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC1C,8BACE,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EACjB,KAAC,QAAQ,IAAC,SAAS,EAAC,4BAA4B,EAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAC3F,KAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,EACvE,WAAW,EAAE,WAAW,GACxB,GACO,EACX,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACY,CAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC,CAAC;AAEtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n Input as RACInput,\n TextField as RACTextField,\n type TextFieldProps as RACTextFieldProps,\n Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextFieldProps\n extends CommonProps,\n FieldWithPlaceholderProps<string>,\n Pick<\n RACTextFieldProps,\n \| 'value'\n \| 'defaultValue'\n \| 'onChange'\n \| 'isDisabled'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'type'\n \| 'autoFocus'\n \| 'autoComplete'\n \| 'inputMode'\n \| 'minLength'\n \| 'maxLength'\n \| 'pattern'\n \| 'onFocus'\n \| 'onBlur'\n > {}\n\nfunction TextField(\n { label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, ...props }: TextFieldProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TextField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACTextField {...props} ref={ref} className={clsx('cim-text-field', UNSAFE_className)} style={UNSAFE_style}>\n {/* RAC doesn't pass `isDisabled` or `isInvalid` to `Group` through context as it does with `NumberField`, so we need to pass them manually /}\n {({ isDisabled, isInvalid, isRequired }) => (\n <>\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-text-field-input-group\" isDisabled={isDisabled} isInvalid={isInvalid}>\n <RACInput\n className={clsx('cim-text-field-input', textStyle({ variant: 'body' }))}\n placeholder={placeholder}\n />\n </RACGroup>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n )}\n </RACTextField>\n );\n}\n\n/\n Allows users to enter a single line of text with a keyboard.\n \n See [text field usage guidelines](https://ui.cimpress.io/components/text-field/).\n */\nconst _TextField = withStyleProps(forwardRef(TextField), 'TextField');\n\nexport { _TextField as TextField };\n"]}

package/dist/esm/components/toggle/toggle.js CHANGED Viewed

@@ -14,7 +14,7 @@ function UNSTABLE_Toggle({ children, UNSAFE_className, UNSAFE_style, ...props },
             console.warn('Toggle requires one of children / aria-label / aria-labelledby for accessibility');
         }
     }, [children, ariaLabel, ariaLabelledBy]);
-    return (_jsxs(RACSwitch, { ...props, ref: ref, className: clsx('cim-toggle', UNSAFE_className), style: UNSAFE_style, children: [_jsx("div", { className: "cim-toggle-track-wrapper", "aria-hidden": true, children: _jsxs("div", { className: "cim-toggle-track", children: [_jsx(IconCheckBold, {}), _jsx(IconCloseBold, {}), _jsx("div", { className: "cim-toggle-track-head" })] }) }), children && (_jsx(Text, { as: "span", variant: "body", children: children }))] }));
+    return (_jsxs(RACSwitch, { ...props, ref: ref, className: clsx('cim-toggle', UNSAFE_className), style: UNSAFE_style, children: [_jsx("div", { className: "cim-toggle-track-wrapper", "aria-hidden": true, children: _jsxs("div", { className: "cim-toggle-track", children: [_jsx(IconCheckBold, {}), _jsx(IconCloseBold, {}), _jsx("div", { className: "cim-toggle-track-head" })] }) }), children && (_jsx(Text, { as: "span", variant: "medium", children: children }))] }));
 }
 /**
  * Allows users to turn a setting on or off.

package/dist/esm/components/toggle/toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,MAAM,IAAI,SAAS,EAAsC,MAAM,uBAAuB,CAAC;AAChG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAa7C,SAAS,eAAe,CACtB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAwB,EAC5E,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,SAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,cAAK,SAAS,EAAC,0BAA0B,iCACvC,eAAK,SAAS,EAAC,kBAAkB,aAC/B,KAAC,aAAa,KAAG,EACjB,KAAC,aAAa,KAAG,EACjB,cAAK,SAAS,EAAC,uBAAuB,GAAG,IACrC,GACF,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,~~MAAM~~,~~YAC3B~~,QAAQ,GACJ,CACR,IACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,cAAc,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,QAAQ,CAAC,CAAC;AAE/E,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Switch as RACSwitch, type SwitchProps as RACSwitchProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconCloseBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface UNSTABLE_ToggleProps\n extends CommonProps,\n AriaLabelingProps,\n Pick<\n RACSwitchProps,\n 'onChange' \| 'isSelected' \| 'isDisabled' \| 'isReadOnly' \| 'defaultSelected' \| 'autoFocus' \| 'name' \| 'value'\n > {\n /** The label rendered next to the toggle. /\n children?: StringLikeChildren;\n}\n\nfunction UNSTABLE_Toggle(\n { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_ToggleProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!children && !ariaLabel && !ariaLabelledBy) {\n console.warn('Toggle requires one of children / aria-label / aria-labelledby for accessibility');\n }\n }, [children, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACSwitch {...props} ref={ref} className={clsx('cim-toggle', UNSAFE_className)} style={UNSAFE_style}>\n <div className=\"cim-toggle-track-wrapper\" aria-hidden>\n <div className=\"cim-toggle-track\">\n <IconCheckBold />\n <IconCloseBold />\n <div className=\"cim-toggle-track-head\" />\n </div>\n </div>\n {children && (\n <Text as=\"span\" variant=\"~~body~~\">\n {children}\n </Text>\n )}\n </RACSwitch>\n );\n}\n\n/\n Allows users to turn a setting on or off.\n \n See [toggle usage guidelines](https://ui.cimpress.io/components/toggle/).\n */\nconst _UNSTABLE_Toggle = withStyleProps(forwardRef(UNSTABLE_Toggle), 'Toggle');\n\nexport { _UNSTABLE_Toggle as UNSTABLE_Toggle };\n"]}
1	+ {"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,MAAM,IAAI,SAAS,EAAsC,MAAM,uBAAuB,CAAC;AAChG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAa7C,SAAS,eAAe,CACtB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAwB,EAC5E,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,SAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,cAAK,SAAS,EAAC,0BAA0B,iCACvC,eAAK,SAAS,EAAC,kBAAkB,aAC/B,KAAC,aAAa,KAAG,EACjB,KAAC,aAAa,KAAG,EACjB,cAAK,SAAS,EAAC,uBAAuB,GAAG,IACrC,GACF,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,cAAc,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,QAAQ,CAAC,CAAC;AAE/E,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Switch as RACSwitch, type SwitchProps as RACSwitchProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconCloseBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface UNSTABLE_ToggleProps\n extends CommonProps,\n AriaLabelingProps,\n Pick<\n RACSwitchProps,\n 'onChange' \| 'isSelected' \| 'isDisabled' \| 'isReadOnly' \| 'defaultSelected' \| 'autoFocus' \| 'name' \| 'value'\n > {\n /** The label rendered next to the toggle. /\n children?: StringLikeChildren;\n}\n\nfunction UNSTABLE_Toggle(\n { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_ToggleProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!children && !ariaLabel && !ariaLabelledBy) {\n console.warn('Toggle requires one of children / aria-label / aria-labelledby for accessibility');\n }\n }, [children, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACSwitch {...props} ref={ref} className={clsx('cim-toggle', UNSAFE_className)} style={UNSAFE_style}>\n <div className=\"cim-toggle-track-wrapper\" aria-hidden>\n <div className=\"cim-toggle-track\">\n <IconCheckBold />\n <IconCloseBold />\n <div className=\"cim-toggle-track-head\" />\n </div>\n </div>\n {children && (\n <Text as=\"span\" variant=\"medium\">\n {children}\n </Text>\n )}\n </RACSwitch>\n );\n}\n\n/\n Allows users to turn a setting on or off.\n \n See [toggle usage guidelines](https://ui.cimpress.io/components/toggle/).\n */\nconst _UNSTABLE_Toggle = withStyleProps(forwardRef(UNSTABLE_Toggle), 'Toggle');\n\nexport { _UNSTABLE_Toggle as UNSTABLE_Toggle };\n"]}

package/dist/esm/components/toggle-button/toggle-button-group.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import { type ToggleButtonGroupProps as RACToggleButtonGroupProps } from 'react-aria-components';
+import type { CommonProps, LabellableProps } from '../types.js';
+export interface UNSTABLE_ToggleButtonGroupProps extends Omit<CommonProps, 'id'>, Omit<LabellableProps, 'label'>, Pick<RACToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled' | 'orientation'> {
+    /** Toggle buttons belonging to the group. Each button must have an `id` prop defined. */
+    children: ReactNode;
+}
+/**
+ * Allows users to toggle multiple options, with single or multiple selection.
+ *
+ * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
+ */
+declare const _UNSTABLE_ToggleButtonGroup: (props: UNSTABLE_ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_ToggleButtonGroup as UNSTABLE_ToggleButtonGroup };
+//# sourceMappingURL=toggle-button-group.d.ts.map

package/dist/esm/components/toggle-button/toggle-button-group.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAEL,KAAK,sBAAsB,IAAI,yBAAyB,EACzD,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,+BACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CACF,yBAAyB,EACzB,cAAc,GAAG,qBAAqB,GAAG,mBAAmB,GAAG,eAAe,GAAG,YAAY,GAAG,aAAa,CAC9G;IACH,yFAAyF;IACzF,QAAQ,EAAE,SAAS,CAAC;CACrB;AA0BD;;;;GAIG;AACH,QAAA,MAAM,2BAA2B,iLAA8E,CAAC;AAEhH,OAAO,EAAE,2BAA2B,IAAI,0BAA0B,EAAE,CAAC"}

package/dist/esm/components/toggle-button/toggle-button-group.js ADDED Viewed

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { ToggleButtonGroup as RACToggleButtonGroup, } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
+import { withStyleProps } from '../../with-style-props.js';
+function UNSTABLE_ToggleButtonGroup({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useProductionWarning(() => {
+        if (!ariaLabel && !ariaLabelledBy) {
+            console.warn('ToggleButtonGroup requires one of aria-label / aria-labelledby for accessibility');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    return (_jsx(RACToggleButtonGroup, { ...props, ref: ref, className: clsx('cim-toggle-button-group', UNSAFE_className), style: UNSAFE_style, children: children }));
+}
+/**
+ * Allows users to toggle multiple options, with single or multiple selection.
+ *
+ * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
+ */
+const _UNSTABLE_ToggleButtonGroup = withStyleProps(forwardRef(UNSTABLE_ToggleButtonGroup), 'ToggleButtonGroup');
+export { _UNSTABLE_ToggleButtonGroup as UNSTABLE_ToggleButtonGroup };
+//# sourceMappingURL=toggle-button-group.js.map

package/dist/esm/components/toggle-button/toggle-button-group.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toggle-button-group.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EACL,iBAAiB,IAAI,oBAAoB,GAE1C,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAc3D,SAAS,0BAA0B,CACjC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAmC,EACvF,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,KAAC,oBAAoB,OACf,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,yBAAyB,EAAE,gBAAgB,CAAC,EAC5D,KAAK,EAAE,YAAY,YAElB,QAAQ,GACY,CACxB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,2BAA2B,GAAG,cAAc,CAAC,UAAU,CAAC,0BAA0B,CAAC,EAAE,mBAAmB,CAAC,CAAC;AAEhH,OAAO,EAAE,2BAA2B,IAAI,0BAA0B,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport {\n ToggleButtonGroup as RACToggleButtonGroup,\n type ToggleButtonGroupProps as RACToggleButtonGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\n\nexport interface UNSTABLE_ToggleButtonGroupProps\n extends Omit<CommonProps, 'id'>,\n Omit<LabellableProps, 'label'>,\n Pick<\n RACToggleButtonGroupProps,\n 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled' | 'orientation'\n > {\n /** Toggle buttons belonging to the group. Each button must have an `id` prop defined. */\n children: ReactNode;\n}\n\nfunction UNSTABLE_ToggleButtonGroup(\n { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_ToggleButtonGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!ariaLabel && !ariaLabelledBy) {\n console.warn('ToggleButtonGroup requires one of aria-label / aria-labelledby for accessibility');\n }\n }, [ariaLabel, ariaLabelledBy]);\n\n return (\n <RACToggleButtonGroup\n {...props}\n ref={ref}\n className={clsx('cim-toggle-button-group', UNSAFE_className)}\n style={UNSAFE_style}\n >\n {children}\n </RACToggleButtonGroup>\n );\n}\n\n/**\n * Allows users to toggle multiple options, with single or multiple selection.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _UNSTABLE_ToggleButtonGroup = withStyleProps(forwardRef(UNSTABLE_ToggleButtonGroup), 'ToggleButtonGroup');\n\nexport { _UNSTABLE_ToggleButtonGroup as UNSTABLE_ToggleButtonGroup };\n"]}

package/dist/esm/components/toggle-button/toggle-button.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { type ToggleButtonProps as RACToggleButtonProps } from 'react-aria-components';
+import type { BaseButtonProps, TextButtonProps } from '../button/types.js';
+import type { CommonProps, Key } from '../types.js';
+export interface UNSTABLE_ToggleButtonProps extends Omit<CommonProps, 'id'>, TextButtonProps, Pick<BaseButtonProps, 'size' | 'fullWidth'>, Pick<RACToggleButtonProps, 'defaultSelected' | 'isSelected' | 'type' | 'onPress' | 'onHoverStart' | 'onHoverEnd' | 'onChange' | 'isDisabled'> {
+    /** An identifier for this button when used in a `ToggleButtonGroup`. Has to be unique across all buttons in the group. */
+    id?: Key;
+}
+/**
+ * Displays a labelled button that allows users to toggle between two states.
+ * Can be used standalone, or as part of `ToggleButtonGroup`.
+ *
+ * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
+ */
+declare const _UNSTABLE_ToggleButton: (props: UNSTABLE_ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_ToggleButton as UNSTABLE_ToggleButton };
+//# sourceMappingURL=toggle-button.d.ts.map

package/dist/esm/components/toggle-button/toggle-button.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmC,KAAK,iBAAiB,IAAI,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGxH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,eAAe,EACf,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,CAAC,EAC3C,IAAI,CACF,oBAAoB,EACpB,iBAAiB,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,CAClH;IACH,0HAA0H;IAC1H,EAAE,CAAC,EAAE,GAAG,CAAC;CACV;AAmCD;;;;;GAKG;AACH,QAAA,MAAM,sBAAsB,+KAAoE,CAAC;AAEjG,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,CAAC"}

package/dist/esm/components/toggle-button/toggle-button.js ADDED Viewed

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { ToggleButton as RACToggleButton } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+function UNSTABLE_ToggleButton({ children, size = 'medium', iconStart, iconEnd, isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsxs(RACToggleButton, { ...props, ref: ref, className: clsx('cim-button', 'cim-toggle-button', UNSAFE_className), style: UNSAFE_style, "data-variant": "secondary", "data-tone": "base", "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: isDisabled, children: [iconStart, _jsx("span", { className: "cim-button-text", children: children }), iconEnd] }));
+}
+/**
+ * Displays a labelled button that allows users to toggle between two states.
+ * Can be used standalone, or as part of `ToggleButtonGroup`.
+ *
+ * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
+ */
+const _UNSTABLE_ToggleButton = withStyleProps(forwardRef(UNSTABLE_ToggleButton), 'ToggleButton');
+export { _UNSTABLE_ToggleButton as UNSTABLE_ToggleButton };
+//# sourceMappingURL=toggle-button.js.map

package/dist/esm/components/toggle-button/toggle-button.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,IAAI,eAAe,EAAkD,MAAM,uBAAuB,CAAC;AACxH,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAgB3D,SAAS,qBAAqB,CAC5B,EACE,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACmB,EAC7B,GAAoC;IAEpC,OAAO,CACL,MAAC,eAAe,OACV,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,EACpE,KAAK,EAAE,YAAY,kBACN,WAAW,eACd,MAAM,eACL,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,UAAU,EAAE,UAAU,aAErB,SAAS,EACV,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,OAAO,IACQ,CACnB,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,sBAAsB,GAAG,cAAc,CAAC,UAAU,CAAC,qBAAqB,CAAC,EAAE,cAAc,CAAC,CAAC;AAEjG,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { ToggleButton as RACToggleButton, type ToggleButtonProps as RACToggleButtonProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { BaseButtonProps, TextButtonProps } from '../button/types.js';\nimport type { CommonProps, Key } from '../types.js';\n\nexport interface UNSTABLE_ToggleButtonProps\n extends Omit<CommonProps, 'id'>,\n TextButtonProps,\n Pick<BaseButtonProps, 'size' | 'fullWidth'>,\n Pick<\n RACToggleButtonProps,\n 'defaultSelected' | 'isSelected' | 'type' | 'onPress' | 'onHoverStart' | 'onHoverEnd' | 'onChange' | 'isDisabled'\n > {\n /** An identifier for this button when used in a `ToggleButtonGroup`. Has to be unique across all buttons in the group. */\n id?: Key;\n}\n\nfunction UNSTABLE_ToggleButton(\n {\n children,\n size = 'medium',\n iconStart,\n iconEnd,\n isDisabled,\n fullWidth,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: UNSTABLE_ToggleButtonProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n return (\n <RACToggleButton\n {...props}\n ref={ref}\n className={clsx('cim-button', 'cim-toggle-button', UNSAFE_className)}\n style={UNSAFE_style}\n data-variant=\"secondary\"\n data-tone=\"base\"\n data-size={size}\n data-full-width={fullWidth || undefined}\n isDisabled={isDisabled}\n >\n {iconStart}\n <span className=\"cim-button-text\">{children}</span>\n {iconEnd}\n </RACToggleButton>\n );\n}\n\n/**\n * Displays a labelled button that allows users to toggle between two states.\n * Can be used standalone, or as part of `ToggleButtonGroup`.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _UNSTABLE_ToggleButton = withStyleProps(forwardRef(UNSTABLE_ToggleButton), 'ToggleButton');\n\nexport { _UNSTABLE_ToggleButton as UNSTABLE_ToggleButton };\n"]}

package/dist/esm/components/toggle-button/toggle-icon-button.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { type ToggleButtonProps as RACToggleButtonProps } from 'react-aria-components';
+import type { BaseButtonProps, SingleIconButtonProps } from '../button/types.js';
+import type { CommonProps } from '../types.js';
+export interface UNSTABLE_ToggleIconButtonProps extends CommonProps, SingleIconButtonProps, Pick<BaseButtonProps, 'size' | 'fullWidth'>, Pick<RACToggleButtonProps, 'defaultSelected' | 'isSelected' | 'type' | 'onPress' | 'onHoverStart' | 'onHoverEnd' | 'onChange' | 'isDisabled'> {
+}
+/**
+ * Displays an icon-only button that allows users to toggle between two states.
+ * Can be used standalone, or as part of `ToggleButtonGroup`.
+ *
+ * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
+ */
+declare const _UNSTABLE_ToggleIconButton: (props: UNSTABLE_ToggleIconButtonProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_ToggleIconButton as UNSTABLE_ToggleIconButton };
+//# sourceMappingURL=toggle-icon-button.d.ts.map

package/dist/esm/components/toggle-button/toggle-icon-button.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-icon-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmC,KAAK,iBAAiB,IAAI,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGxH,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACjF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,8BACf,SAAQ,WAAW,EACjB,qBAAqB,EACrB,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,CAAC,EAC3C,IAAI,CACF,oBAAoB,EACpB,iBAAiB,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,CAClH;CAAG;AA+BR;;;;;GAKG;AACH,QAAA,MAAM,0BAA0B,mLAA4E,CAAC;AAE7G,OAAO,EAAE,0BAA0B,IAAI,yBAAyB,EAAE,CAAC"}

package/dist/esm/components/toggle-button/toggle-icon-button.js ADDED Viewed

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { ToggleButton as RACToggleButton } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+function UNSTABLE_ToggleIconButton({ icon, size = 'medium', isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsx(RACToggleButton, { ...props, ref: ref, className: clsx('cim-icon-button', 'cim-toggle-button', UNSAFE_className), style: UNSAFE_style, "data-variant": "secondary", "data-tone": "base", "data-size": size, "data-full-width": fullWidth || undefined, isDisabled: isDisabled, children: icon }));
+}
+/**
+ * Displays an icon-only button that allows users to toggle between two states.
+ * Can be used standalone, or as part of `ToggleButtonGroup`.
+ *
+ * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
+ */
+const _UNSTABLE_ToggleIconButton = withStyleProps(forwardRef(UNSTABLE_ToggleIconButton), 'ToggleIconButton');
+export { _UNSTABLE_ToggleIconButton as UNSTABLE_ToggleIconButton };
+//# sourceMappingURL=toggle-icon-button.js.map

package/dist/esm/components/toggle-button/toggle-icon-button.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toggle-icon-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,IAAI,eAAe,EAAkD,MAAM,uBAAuB,CAAC;AACxH,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAa3D,SAAS,yBAAyB,CAChC,EACE,IAAI,EACJ,IAAI,GAAG,QAAQ,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACuB,EACjC,GAAoC;IAEpC,OAAO,CACL,KAAC,eAAe,OACV,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,EACzE,KAAK,EAAE,YAAY,kBACN,WAAW,eACd,MAAM,eACL,IAAI,qBACE,SAAS,IAAI,SAAS,EACvC,UAAU,EAAE,UAAU,YAErB,IAAI,GACW,CACnB,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,0BAA0B,GAAG,cAAc,CAAC,UAAU,CAAC,yBAAyB,CAAC,EAAE,kBAAkB,CAAC,CAAC;AAE7G,OAAO,EAAE,0BAA0B,IAAI,yBAAyB,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { ToggleButton as RACToggleButton, type ToggleButtonProps as RACToggleButtonProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { BaseButtonProps, SingleIconButtonProps } from '../button/types.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_ToggleIconButtonProps\n extends CommonProps,\n SingleIconButtonProps,\n Pick<BaseButtonProps, 'size' | 'fullWidth'>,\n Pick<\n RACToggleButtonProps,\n 'defaultSelected' | 'isSelected' | 'type' | 'onPress' | 'onHoverStart' | 'onHoverEnd' | 'onChange' | 'isDisabled'\n > {}\n\nfunction UNSTABLE_ToggleIconButton(\n {\n icon,\n size = 'medium',\n isDisabled,\n fullWidth,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: UNSTABLE_ToggleIconButtonProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n return (\n <RACToggleButton\n {...props}\n ref={ref}\n className={clsx('cim-icon-button', 'cim-toggle-button', UNSAFE_className)}\n style={UNSAFE_style}\n data-variant=\"secondary\"\n data-tone=\"base\"\n data-size={size}\n data-full-width={fullWidth || undefined}\n isDisabled={isDisabled}\n >\n {icon}\n </RACToggleButton>\n );\n}\n\n/**\n * Displays an icon-only button that allows users to toggle between two states.\n * Can be used standalone, or as part of `ToggleButtonGroup`.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _UNSTABLE_ToggleIconButton = withStyleProps(forwardRef(UNSTABLE_ToggleIconButton), 'ToggleIconButton');\n\nexport { _UNSTABLE_ToggleIconButton as UNSTABLE_ToggleIconButton };\n"]}