@cimpress-ui/react 0.3.0 → 0.4.0

package/dist/commonjs/components/tag/tag-group.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { type TagGroupProps as RACTagGroupProps, type TagListProps as RACTagListProps } from 'react-aria-components';
 import type { CollectionItem, CommonProps, FieldProps, Key } from '../types.js';
-export interface TagGroupProps<T extends CollectionItem = CollectionItem> extends CommonProps, Omit<FieldProps<Key[]>, 'validate' | 'error'>, Pick<RACTagGroupProps, 'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'>, Pick<RACTagListProps<T>, 'children' | 'items'> {
+export interface TagGroupProps<T extends CollectionItem = CollectionItem> extends CommonProps, Omit<FieldProps<Key[]>, 'validate' | 'error' | 'name'>, Pick<RACTagGroupProps, 'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'>, Pick<RACTagListProps<T>, 'children' | 'items'> {
     /** Whether the tag group is required. */
     isRequired?: boolean;
     /** The error message to display. */

package/dist/commonjs/components/tag/tag-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-group.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEhF,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EAEjB,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EAC7C,IAAI,CACF,gBAAgB,EAChB,eAAe,GAAG,qBAAqB,GAAG,cAAc,GAAG,cAAc,GAAG,mBAAmB,GAAG,UAAU,CAC7G,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChD,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,SAAS,CAAC;CACpC;AAwCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA3CG,CAAC,SAAS,cAAc,iKA2CwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"tag-group.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEhF,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EAEjB,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC,EACtD,IAAI,CACF,gBAAgB,EAChB,eAAe,GAAG,qBAAqB,GAAG,cAAc,GAAG,cAAc,GAAG,mBAAmB,GAAG,UAAU,CAC7G,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChD,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,SAAS,CAAC;CACpC;AAwCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA3CG,CAAC,SAAS,cAAc,iKA2CwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"tag-group.js","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAK+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,wEAAgH;AAsBhH,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,IAAI,KAAK,CAAC,aAAa,IAAI,IAAI,IAAI,KAAK,CAAC,aAAa,KAAK,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC;QAC5F,OAAO,CAAC,KAAK,CAAC,yFAAyF,CAAC,CAAC;IAC3G,CAAC;IAED,OAAO,CACL,wBAAC,gCAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAClD,KAAK,EAAE,YAAY,eACR,IAAI,aAEf,uBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,YAAG,KAAK,GAAkB,EAChE,uBAAC,+BAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,YACxF,QAAQ,GACE,EACZ,KAAK,IAAI,uBAAC,kCAAkB,cAAE,KAAK,GAAsB,EAC1D,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC9C,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  TagGroup as RACTagGroup,\n  TagList as RACTagList,\n  type TagGroupProps as RACTagGroupProps,\n  type TagListProps as RACTagListProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldErrorText, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CommonProps, FieldProps, Key } from '../types.js';\n\nexport interface TagGroupProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    // `TagGroup` doesn't support `validate` or `error` because it's not a form field\n    Omit<FieldProps<Key[]>, 'validate' | 'error'>,\n    Pick<\n      RACTagGroupProps,\n      'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'\n    >,\n    Pick<RACTagListProps<T>, 'children' | 'items'> {\n  /** Whether the tag group is required. */\n  isRequired?: boolean;\n  /** The error message to display. */\n  error?: string;\n  /** The size of the tags. */\n  size?: 'medium' | 'large';\n  /** Provides content to display when there are no tags in the group. */\n  renderEmptyState?: () => ReactNode;\n}\n\nfunction TagGroup<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    children,\n    isRequired,\n    items,\n    renderEmptyState,\n    size = 'medium',\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: TagGroupProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  if (props.selectionMode != null && props.selectionMode !== 'none' && props.onRemove != null) {\n    console.error('`onRemove` is not supported when `selectionMode` is set to anything other than `\"none\"`');\n  }\n\n  return (\n    <RACTagGroup\n      {...props}\n      ref={ref}\n      className={clsx('cim-tag-group', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-size={size}\n    >\n      <FormFieldLabel isRequired={isRequired}>{label}</FormFieldLabel>\n      <RACTagList className=\"cim-tag-group-list\" items={items} renderEmptyState={renderEmptyState}>\n        {children}\n      </RACTagList>\n      {error && <FormFieldErrorText>{error}</FormFieldErrorText>}\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACTagGroup>\n  );\n}\n\n/**\n * Displays a group of tags. Allows for selecting or removing tags.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _TagGroup = withStyleProps(forwardRef(TagGroup), 'TagGroup');\n\nexport { _TagGroup as TagGroup };\n"]}
+{"version":3,"file":"tag-group.js","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAK+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,wEAAgH;AAsBhH,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,IAAI,KAAK,CAAC,aAAa,IAAI,IAAI,IAAI,KAAK,CAAC,aAAa,KAAK,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC;QAC5F,OAAO,CAAC,KAAK,CAAC,yFAAyF,CAAC,CAAC;IAC3G,CAAC;IAED,OAAO,CACL,wBAAC,gCAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAClD,KAAK,EAAE,YAAY,eACR,IAAI,aAEf,uBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,YAAG,KAAK,GAAkB,EAChE,uBAAC,+BAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,YACxF,QAAQ,GACE,EACZ,KAAK,IAAI,uBAAC,kCAAkB,cAAE,KAAK,GAAsB,EAC1D,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC9C,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  TagGroup as RACTagGroup,\n  TagList as RACTagList,\n  type TagGroupProps as RACTagGroupProps,\n  type TagListProps as RACTagListProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldErrorText, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CommonProps, FieldProps, Key } from '../types.js';\n\nexport interface TagGroupProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    // `TagGroup` doesn't support `validate` or `error` because it's not a form field\n    Omit<FieldProps<Key[]>, 'validate' | 'error' | 'name'>,\n    Pick<\n      RACTagGroupProps,\n      'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'\n    >,\n    Pick<RACTagListProps<T>, 'children' | 'items'> {\n  /** Whether the tag group is required. */\n  isRequired?: boolean;\n  /** The error message to display. */\n  error?: string;\n  /** The size of the tags. */\n  size?: 'medium' | 'large';\n  /** Provides content to display when there are no tags in the group. */\n  renderEmptyState?: () => ReactNode;\n}\n\nfunction TagGroup<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    children,\n    isRequired,\n    items,\n    renderEmptyState,\n    size = 'medium',\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: TagGroupProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  if (props.selectionMode != null && props.selectionMode !== 'none' && props.onRemove != null) {\n    console.error('`onRemove` is not supported when `selectionMode` is set to anything other than `\"none\"`');\n  }\n\n  return (\n    <RACTagGroup\n      {...props}\n      ref={ref}\n      className={clsx('cim-tag-group', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-size={size}\n    >\n      <FormFieldLabel isRequired={isRequired}>{label}</FormFieldLabel>\n      <RACTagList className=\"cim-tag-group-list\" items={items} renderEmptyState={renderEmptyState}>\n        {children}\n      </RACTagList>\n      {error && <FormFieldErrorText>{error}</FormFieldErrorText>}\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACTagGroup>\n  );\n}\n\n/**\n * Displays a group of tags. Allows for selecting or removing tags.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _TagGroup = withStyleProps(forwardRef(TagGroup), 'TagGroup');\n\nexport { _TagGroup as TagGroup };\n"]}

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

@@ -13,7 +13,7 @@ const index_js_1 = require("../../icons/index.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 function Tag({ children, iconStart, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Tag, { ...props, ref: ref, className: (0, clsx_1.default)('cim-tag', UNSAFE_className), style: UNSAFE_style, textValue: textValue, children: ({ allowsRemoving }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconStart && (0, jsx_runtime_1.jsx)("div", { className: "cim-tag-icon", children: iconStart }), (0, jsx_runtime_1.jsx)("span", { className: "cim-tag-text", children: children }), allowsRemoving && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { slot: "remove", children: (0, jsx_runtime_1.jsx)(index_js_1.IconCloseBold, {}) }))] })) }));
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Tag, { ...props, ref: ref, className: (0, clsx_1.default)('cim-tag', UNSAFE_className), style: UNSAFE_style, textValue: textValue, children: ({ allowsRemoving }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconStart && (0, jsx_runtime_1.jsx)("div", { className: "cim-tag-icon", children: iconStart }), (0, jsx_runtime_1.jsx)("span", { className: "cim-tag-text", children: children }), allowsRemoving && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { slot: "remove", excludeFromTabOrder: true, children: (0, jsx_runtime_1.jsx)(index_js_1.IconCloseBold, {}) }))] })) }));
 }
 /**
  * Displays a single tag within a tag group.

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

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAyG;AACzG,yDAAkD;AAClD,mDAAqD;AACrD,mEAA2D;AAW3D,SAAS,GAAG,CACV,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAY,EAC3E,GAA8B;IAE9B,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,uBAAC,2BAAM,OACD,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,SAAS,EAAE,gBAAgB,CAAC,EAC5C,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACvB,6DACG,SAAS,IAAI,gCAAK,SAAS,EAAC,cAAc,YAAE,SAAS,GAAO,EAC7D,iCAAM,SAAS,EAAC,cAAc,YAAE,QAAQ,GAAQ,EAC/C,cAAc,IAAI,CACjB,uBAAC,8BAAS,IAAC,IAAI,EAAC,QAAQ,YACtB,uBAAC,wBAAa,KAAG,GACP,CACb,IACA,CACJ,GACM,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,IAAI,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AAEnC,mBAAG","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { Tag as RACTag, type TagProps as RACTagProps, Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCloseBold } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { StringLikeChildren } from '../types.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TagProps extends Omit<CommonProps, 'id'>, Pick<RACTagProps, 'id' | 'isDisabled'> {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** The icon to display at the start of the tag. */\n  iconStart?: ReactNode;\n}\n\nfunction Tag(\n  { children, iconStart, UNSAFE_className, UNSAFE_style, ...props }: TagProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACTag\n      {...props}\n      ref={ref}\n      className={clsx('cim-tag', UNSAFE_className)}\n      style={UNSAFE_style}\n      textValue={textValue}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {iconStart && <div className=\"cim-tag-icon\">{iconStart}</div>}\n          <span className=\"cim-tag-text\">{children}</span>\n          {allowsRemoving && (\n            <RACButton slot=\"remove\">\n              <IconCloseBold />\n            </RACButton>\n          )}\n        </>\n      )}\n    </RACTag>\n  );\n}\n\n/**\n * Displays a single tag within a tag group.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _Tag = withStyleProps(forwardRef(Tag), 'Tag');\n\nexport { _Tag as Tag };\n"]}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAyG;AACzG,yDAAkD;AAClD,mDAAqD;AACrD,mEAA2D;AAW3D,SAAS,GAAG,CACV,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAY,EAC3E,GAA8B;IAE9B,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,uBAAC,2BAAM,OACD,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,SAAS,EAAE,gBAAgB,CAAC,EAC5C,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACvB,6DACG,SAAS,IAAI,gCAAK,SAAS,EAAC,cAAc,YAAE,SAAS,GAAO,EAC7D,iCAAM,SAAS,EAAC,cAAc,YAAE,QAAQ,GAAQ,EAC/C,cAAc,IAAI,CACjB,uBAAC,8BAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,mBAAmB,kBAC1C,uBAAC,wBAAa,KAAG,GACP,CACb,IACA,CACJ,GACM,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,IAAI,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AAEnC,mBAAG","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { Tag as RACTag, type TagProps as RACTagProps, Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCloseBold } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { StringLikeChildren } from '../types.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TagProps extends Omit<CommonProps, 'id'>, Pick<RACTagProps, 'id' | 'isDisabled'> {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** The icon to display at the start of the tag. */\n  iconStart?: ReactNode;\n}\n\nfunction Tag(\n  { children, iconStart, UNSAFE_className, UNSAFE_style, ...props }: TagProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACTag\n      {...props}\n      ref={ref}\n      className={clsx('cim-tag', UNSAFE_className)}\n      style={UNSAFE_style}\n      textValue={textValue}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {iconStart && <div className=\"cim-tag-icon\">{iconStart}</div>}\n          <span className=\"cim-tag-text\">{children}</span>\n          {allowsRemoving && (\n            <RACButton slot=\"remove\" excludeFromTabOrder>\n              <IconCloseBold />\n            </RACButton>\n          )}\n        </>\n      )}\n    </RACTag>\n  );\n}\n\n/**\n * Displays a single tag within a tag group.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _Tag = withStyleProps(forwardRef(Tag), 'Tag');\n\nexport { _Tag as Tag };\n"]}

package/dist/commonjs/components/tag-field/tag-field-input.d.ts

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

package/dist/commonjs/components/tag-field/tag-field-input.d.ts.map

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

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagFieldInput = TagFieldInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const utils_js_1 = require("../typography/utils.js");
+/** @internal */
+function TagFieldInput({ isReadOnly, isRequired, isInvalid, placeholder, onFocusChange, 'aria-describedby': ariaDescribedby, }) {
+    const comboBoxState = (0, react_1.useContext)(react_aria_components_1.ComboBoxStateContext);
+    const inputContext = (0, react_1.useContext)(react_aria_components_1.InputContext);
+    // We use custom IDs for description and error message, so we need to manually attach them to the input
+    const { id: descriptionId } = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.TextContext, 'description');
+    const { id: errorMessageId } = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.TextContext, 'errorMessage');
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.InputContext.Provider, { value: {
+            ...inputContext,
+            // name: undefined,
+            // Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers
+            required: false,
+            'aria-required': isRequired,
+            'aria-invalid': isInvalid || undefined,
+        }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-combo-box-input', (0, utils_js_1.textStyle)({ variant: 'medium' })), 
+            // Ensure the popover opens when the input is clicked.
+            // By default, React Aria only opens the popover when the input is focused.
+            onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder, onFocus: () => onFocusChange(true), onBlur: () => onFocusChange(false), "aria-describedby": [descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') || undefined }) }));
+}
+//# sourceMappingURL=tag-field-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-field-input.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":";;;;;AAYA,sCA6CC;;AAzDD,gDAAwB;AACxB,iCAAmC;AACnC,iEAM+B;AAC/B,qDAAmD;AAEnD,gBAAgB;AAChB,SAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,aAAa,EACb,kBAAkB,EAAE,eAAe,GAQpC;IACC,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,4CAAuB,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,IAAA,kBAAU,EAAC,oCAAe,CAAC,CAAC;IAEjD,uGAAuG;IACvG,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,IAAA,yCAAiB,EAAC,mCAAc,EAAE,aAAa,CAAE,CAAC;IAChF,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,IAAA,yCAAiB,EAAC,mCAAc,EAAE,cAAc,CAAE,CAAC;IAElF,OAAO,CACL,uBAAC,oCAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,GAAG,YAAY;YACf,mBAAmB;YACnB,sIAAsI;YACtI,QAAQ,EAAE,KAAK;YACf,eAAe,EAAE,UAAU;YAC3B,cAAc,EAAE,SAAS,IAAI,SAAS;SACvC,YAED,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC;YACxE,sDAAsD;YACtD,2EAA2E;YAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,aAAc,CAAC,IAAI,EAAE,EACnD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,sBAChB,CAAC,aAAa,EAAE,cAAc,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,GACzG,GACuB,CAC5B,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useContext } from 'react';\nimport {\n  ComboBoxStateContext as RACComboBoxStateContext,\n  Input as RACInput,\n  InputContext as RACInputContext,\n  TextContext as RACTextContext,\n  useSlottedContext,\n} from 'react-aria-components';\nimport { textStyle } from '../typography/utils.js';\n\n/** @internal */\nexport function TagFieldInput({\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  placeholder,\n  onFocusChange,\n  'aria-describedby': ariaDescribedby,\n}: {\n  isReadOnly: boolean | undefined;\n  isRequired: boolean | undefined;\n  isInvalid: boolean | undefined;\n  placeholder: string | undefined;\n  onFocusChange: (isFocused: boolean) => void;\n  'aria-describedby': string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const inputContext = useContext(RACInputContext);\n\n  // We use custom IDs for description and error message, so we need to manually attach them to the input\n  const { id: descriptionId } = useSlottedContext(RACTextContext, 'description')!;\n  const { id: errorMessageId } = useSlottedContext(RACTextContext, 'errorMessage')!;\n\n  return (\n    <RACInputContext.Provider\n      value={{\n        ...inputContext,\n        // name: undefined,\n        // Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers\n        required: false,\n        'aria-required': isRequired,\n        'aria-invalid': isInvalid || undefined,\n      }}\n    >\n      <RACInput\n        className={clsx('cim-combo-box-input', textStyle({ variant: 'medium' }))}\n        // Ensure the popover opens when the input is clicked.\n        // By default, React Aria only opens the popover when the input is focused.\n        onClick={() => !isReadOnly && comboBoxState!.open()}\n        placeholder={placeholder}\n        onFocus={() => onFocusChange(true)}\n        onBlur={() => onFocusChange(false)}\n        aria-describedby={[descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') || undefined}\n      />\n    </RACInputContext.Provider>\n  );\n}\n"]}

package/dist/commonjs/components/tag-field/tag-field-list-box.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tag-field-list-box.d.ts.map

package/dist/commonjs/components/tag-field/tag-field-list-box.d.ts.map

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

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagFieldListBox = TagFieldListBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+/** @internal */
+function TagFieldListBox({ children, selectedKeys, setSelectedKeys, items, onScroll, }) {
+    const listState = (0, react_1.useContext)(react_aria_components_1.ListStateContext);
+    // Override RACListStateContext to allow multiple selection within the list
+    const updatedListState = (0, react_1.useMemo)(() => {
+        if (!listState || !listState.selectionManager) {
+            return listState;
+        }
+        // @ts-expect-error `selectionManager.state` is private
+        // This is a temporary mutation before a context update, so this is fine
+        // eslint-disable-next-line react-hooks/react-compiler
+        listState.selectionManager.state.selectionMode = 'multiple';
+        // @ts-expect-error `selectionManager.state` is private
+        listState.selectionManager.state.selectedKeys = selectedKeys;
+        // @ts-expect-error `selectionManager.state` is private
+        listState.selectionManager.state.setSelectedKeys = setSelectedKeys;
+        // @ts-expect-error `selectionManager.state` is private
+        listState.selectionManager.state.disallowEmptySelection = false;
+        return {
+            ...listState,
+        };
+    }, [listState, selectedKeys, setSelectedKeys]);
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListStateContext.Provider, { value: updatedListState, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }) }));
+}
+//# sourceMappingURL=tag-field-list-box.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";;AAMA,0CAyCC;;AA/CD,iCAA4C;AAC5C,iEAAuG;AAIvG,gBAAgB;AAChB,SAAgB,eAAe,CAA2B,EACxD,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,KAAK,EACL,QAAQ,GAIT;IACC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,wCAAmB,CAAC,CAAC;IAElD,2EAA2E;IAC3E,MAAM,gBAAgB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACpC,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;YAC9C,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,uDAAuD;QACvD,wEAAwE;QACxE,sDAAsD;QACtD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAAa,GAAG,UAAU,CAAC;QAC5D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;QAC7D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;QACnE,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,sBAAsB,GAAG,KAAK,CAAC;QAEhE,OAAO;YACL,GAAG,SAAS;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAE/C,OAAO,CACL,uBAAC,wCAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YACnD,uBAAC,+BAAU,IAAC,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC3E,QAAQ,GACE,GACgB,CAChC,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport { ListBox as RACListBox, ListStateContext as RACListStateContext } from 'react-aria-components';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { UNSTABLE_TagFieldProps } from './tag-field.js';\n\n/** @internal */\nexport function TagFieldListBox<T extends CollectionItem>({\n  children,\n  selectedKeys,\n  setSelectedKeys,\n  items,\n  onScroll,\n}: Pick<UNSTABLE_TagFieldProps<T>, 'children' | 'items' | 'onScroll'> & {\n  selectedKeys: Set<Key>;\n  setSelectedKeys: (keys: Set<Key>) => void;\n}) {\n  const listState = useContext(RACListStateContext);\n\n  // Override RACListStateContext to allow multiple selection within the list\n  const updatedListState = useMemo(() => {\n    if (!listState || !listState.selectionManager) {\n      return listState;\n    }\n\n    // @ts-expect-error `selectionManager.state` is private\n    // This is a temporary mutation before a context update, so this is fine\n    // eslint-disable-next-line react-hooks/react-compiler\n    listState.selectionManager.state.selectionMode = 'multiple';\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.selectedKeys = selectedKeys;\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.setSelectedKeys = setSelectedKeys;\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.disallowEmptySelection = false;\n\n    return {\n      ...listState,\n    };\n  }, [listState, selectedKeys, setSelectedKeys]);\n\n  return (\n    <RACListStateContext.Provider value={updatedListState}>\n      <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n        {children}\n      </RACListBox>\n    </RACListStateContext.Provider>\n  );\n}\n"]}

package/dist/commonjs/components/tag-field/tag-field-tags.d.ts

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

package/dist/commonjs/components/tag-field/tag-field-tags.d.ts.map

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

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagFieldTags = TagFieldTags;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const tag_group_js_1 = require("../tag/tag-group.js");
+const tag_js_1 = require("../tag/tag.js");
+/** @internal */
+function TagFieldTags({ inputId, selectedKeys, isDisabled, renderEmptyState, onRemove, }) {
+    const listState = (0, react_1.useContext)(react_aria_components_1.ListStateContext);
+    const selectedItems = (0, react_1.useMemo)(() => {
+        return [...selectedKeys.values()]
+            .map((key) => listState?.selectionManager.collection.getItem(key))
+            .filter((value) => !!value);
+    }, [selectedKeys, listState?.selectionManager.collection]);
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Provider, { values: [
+            // Reset contexts so that TagGroup doesn't inherit any data from RACComboBox
+            [react_aria_components_1.LabelContext, null],
+            [react_aria_components_1.ButtonContext, null],
+            [react_aria_components_1.TextContext, null],
+            [react_aria_components_1.ListStateContext, null],
+        ], children: (0, jsx_runtime_1.jsx)(tag_group_js_1.TagGroup, { "aria-labelledby": inputId, disabledKeys: isDisabled ? selectedKeys : undefined, renderEmptyState: renderEmptyState, onRemove: (keys) => {
+                keys.forEach(onRemove);
+            }, children: selectedItems.map((item) => ((0, jsx_runtime_1.jsx)(tag_js_1.Tag, { id: item.key, isDisabled: item.props.isDisabled, children: item.textValue }, item.key))) }) }));
+}
+//# sourceMappingURL=tag-field-tags.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-field-tags.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-tags.tsx"],"names":[],"mappings":";;AAcA,oCA6CC;;AA3DD,iCAA4C;AAC5C,iEAM+B;AAC/B,sDAA+C;AAC/C,0CAAmD;AAInD,gBAAgB;AAChB,SAAgB,YAAY,CAA2B,EACrD,OAAO,EACP,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,QAAQ,GAKT;IACC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,wCAAmB,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,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,uBAAC,gCAAW,IACV,MAAM,EAAE;YACN,4EAA4E;YAC5E,CAAC,oCAAe,EAAE,IAAI,CAAC;YACvB,CAAC,qCAAgB,EAAE,IAAI,CAAC;YACxB,CAAC,mCAAc,EAAE,IAAI,CAAC;YACtB,CAAC,wCAAmB,EAAE,IAAI,CAAC;SAC5B,YAED,uBAAC,uBAAQ,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,uBAAC,YAAG,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"]}

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

@@ -0,0 +1,43 @@
+import { type ListBoxProps as RACListBoxProps, type ComboBoxProps as RACComboBoxProps, type ListBoxItemProps as RACListBoxItemProps } from 'react-aria-components';
+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 {
+    /** 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'> {
+    selectedKeys?: Iterable<Key>;
+    defaultSelectedKeys?: Iterable<Key>;
+    onSelectionChange?: (keys: Set<Key>) => void;
+}
+/**
+ * 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)
+ */
+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'> {
+    /** 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 {
+    var displayName: string;
+}
+export interface UNSTABLE_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 {
+    var displayName: string;
+}
+//# sourceMappingURL=tag-field.d.ts.map

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

@@ -0,0 +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"}

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

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

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

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

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

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

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

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

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

@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
 const utils_js_1 = require("../typography/utils.js");
 function TextArea({ label, description, error: errorMessage, placeholder, autoCapitalize, autoCorrect, rows, spellCheck, wrap, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
-    (0, react_1.useEffect)(() => {
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
             console.warn('TextArea requires one of label / aria-label / aria-labelledby for accessibility');
         }

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

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

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

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

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

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

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

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