@cimpress-ui/react 1.21.0 → 1.22.0

package/dist/esm/components/toggle-button/internal-toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useObjectRef } from '@react-aria/utils';\nimport { privateValidationStateProp, useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ReactNode, useContext, useRef, useState, type Ref } from 'react';\nimport {\n  TextContext as RACTextContext,\n  ToggleButton as RACToggleButton,\n  type ToggleButtonProps as RACToggleButtonProps,\n  ToggleGroupStateContext as RACToggleGroupStateContext,\n  useSlottedContext,\n} from 'react-aria-components';\nimport type { BaseButtonProps } from '../button/types.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ToggleButtonGroupContext } from './context.js';\n\nexport interface BaseToggleButtonProps\n  extends\n    Omit<CommonProps, 'id'>,\n    AriaLabelingProps,\n    Pick<BaseButtonProps, 'size' | 'fullWidth'>,\n    Pick<\n      RACToggleButtonProps,\n      | 'defaultSelected'\n      | 'isSelected'\n      | 'onPress'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onChange'\n      | 'isDisabled'\n      | 'autoFocus'\n    > {\n  /**\n   * The `<form>` element to associate the input with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n  /**\n   * The name of the input element, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n   */\n  name?: string;\n  /**\n   * The value of the input element, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#value).\n   *\n   * When used in a `ToggleButtonGroup`, `value` serves as an identifier for this button, and has to be unique across all buttons in the group.\n   */\n  value?: string;\n}\n\ninterface InternalToggleButtonProps extends BaseToggleButtonProps {\n  children?: ReactNode;\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\n/** @internal */\nexport function InternalToggleButton({\n  buttonRef: ref,\n  children,\n  size = 'medium',\n  isDisabled,\n  fullWidth,\n  UNSAFE_className,\n  UNSAFE_style,\n  form,\n  name,\n  value,\n  isSelected: consumerIsSelected,\n  defaultSelected: consumerDefaultSelected,\n  onChange,\n  ...props\n}: InternalToggleButtonProps) {\n  // State\n\n  const toggleButtonGroupContext = useContext(ToggleButtonGroupContext);\n  const toggleGroupState = useContext(RACToggleGroupStateContext);\n  const descriptionProps = useSlottedContext(RACTextContext, 'description');\n  const errorMessageProps = useSlottedContext(RACTextContext, 'errorMessage');\n\n  const validationState = useFormValidationState({\n    // If part of a group, validation is handled at group level\n    name: toggleButtonGroupContext ? undefined : name,\n    value,\n    validationBehavior: 'native',\n    [privateValidationStateProp]: toggleButtonGroupContext?.validationState ?? undefined,\n  });\n\n  const [isSelected, setIsSelected] = useControlledState(\n    toggleGroupState && value ? toggleGroupState.selectedKeys.has(value) : consumerIsSelected,\n    consumerDefaultSelected ?? false,\n    (newIsSelected) => {\n      onChange?.(newIsSelected);\n\n      if (toggleGroupState && value) {\n        toggleGroupState.setSelected(value, newIsSelected);\n      }\n\n      validationState.commitValidation();\n    },\n  );\n\n  // Validation\n\n  const buttonRef = useObjectRef(ref);\n  const formInputRef = useRef<HTMLInputElement>(null);\n  const formInputName = toggleButtonGroupContext?.name ?? name;\n\n  const [initialSelected] = useState(isSelected);\n  useFormReset(formInputRef, consumerDefaultSelected ?? initialSelected, setIsSelected);\n\n  useFormValidation(\n    {\n      focus: () => buttonRef.current?.focus(),\n      validationBehavior: 'native',\n    },\n    validationState,\n    formInputRef,\n  );\n\n  return (\n    <>\n      <RACToggleButton\n        {...props}\n        ref={buttonRef}\n        className={clsx('cim-toggle-button', UNSAFE_className)}\n        style={UNSAFE_style}\n        id={toggleButtonGroupContext ? value : undefined}\n        isDisabled={isDisabled}\n        isSelected={isSelected}\n        onChange={setIsSelected}\n        aria-describedby={\n          [\n            props['aria-describedby'],\n            toggleButtonGroupContext?.isInvalid ? errorMessageProps?.id : null,\n            descriptionProps?.id,\n          ]\n            .filter(Boolean)\n            .join(' ') || undefined\n        }\n        data-variant=\"secondary\"\n        data-tone=\"base\"\n        data-size={size}\n        data-full-width={fullWidth || undefined}\n      >\n        {children}\n      </RACToggleButton>\n\n      {formInputName && (\n        <input\n          ref={formInputRef}\n          style={{ display: 'none' }}\n          type=\"checkbox\"\n          form={toggleButtonGroupContext?.form ?? form}\n          name={formInputName}\n          checked={isSelected}\n          value={value}\n          required={toggleButtonGroupContext?.isRequired}\n          aria-invalid={\n            toggleButtonGroupContext?.validationState.displayValidation.isInvalid ??\n            validationState.displayValidation.isInvalid ??\n            undefined\n          }\n          onChange={() => {}}\n        />\n      )}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"internal-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormValidation } from '@react-aria/form';\nimport { useFormReset } from '@react-aria/utils';\nimport { privateValidationStateProp, useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ReactNode, useContext, useRef, useState, type Ref } from 'react';\nimport { useObjectRef } from 'react-aria';\nimport {\n  TextContext as RACTextContext,\n  ToggleButton as RACToggleButton,\n  type ToggleButtonProps as RACToggleButtonProps,\n  ToggleGroupStateContext as RACToggleGroupStateContext,\n  useSlottedContext,\n} from 'react-aria-components';\nimport type { BaseButtonProps } from '../button/types.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ToggleButtonGroupContext } from './context.js';\n\nexport interface BaseToggleButtonProps\n  extends\n    Omit<CommonProps, 'id'>,\n    AriaLabelingProps,\n    Pick<BaseButtonProps, 'size' | 'fullWidth'>,\n    Pick<\n      RACToggleButtonProps,\n      | 'defaultSelected'\n      | 'isSelected'\n      | 'onPress'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onChange'\n      | 'isDisabled'\n      | 'autoFocus'\n    > {\n  /**\n   * The `<form>` element to associate the input with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n  /**\n   * The name of the input element, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n   */\n  name?: string;\n  /**\n   * The value of the input element, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#value).\n   *\n   * When used in a `ToggleButtonGroup`, `value` serves as an identifier for this button, and has to be unique across all buttons in the group.\n   */\n  value?: string;\n}\n\ninterface InternalToggleButtonProps extends BaseToggleButtonProps {\n  children?: ReactNode;\n  buttonRef?: Ref<HTMLButtonElement>;\n}\n\n/** @internal */\nexport function InternalToggleButton({\n  buttonRef: ref,\n  children,\n  size = 'medium',\n  isDisabled,\n  fullWidth,\n  UNSAFE_className,\n  UNSAFE_style,\n  form,\n  name,\n  value,\n  isSelected: consumerIsSelected,\n  defaultSelected: consumerDefaultSelected,\n  onChange,\n  ...props\n}: InternalToggleButtonProps) {\n  // State\n\n  const toggleButtonGroupContext = useContext(ToggleButtonGroupContext);\n  const toggleGroupState = useContext(RACToggleGroupStateContext);\n  const descriptionProps = useSlottedContext(RACTextContext, 'description');\n  const errorMessageProps = useSlottedContext(RACTextContext, 'errorMessage');\n\n  const validationState = useFormValidationState({\n    // If part of a group, validation is handled at group level\n    name: toggleButtonGroupContext ? undefined : name,\n    value,\n    validationBehavior: 'native',\n    [privateValidationStateProp]: toggleButtonGroupContext?.validationState ?? undefined,\n  });\n\n  const [isSelected, setIsSelected] = useControlledState(\n    toggleGroupState && value ? toggleGroupState.selectedKeys.has(value) : consumerIsSelected,\n    consumerDefaultSelected ?? false,\n    (newIsSelected) => {\n      onChange?.(newIsSelected);\n\n      if (toggleGroupState && value) {\n        toggleGroupState.setSelected(value, newIsSelected);\n      }\n\n      validationState.commitValidation();\n    },\n  );\n\n  // Validation\n\n  const buttonRef = useObjectRef(ref);\n  const formInputRef = useRef<HTMLInputElement>(null);\n  const formInputName = toggleButtonGroupContext?.name ?? name;\n\n  const [initialSelected] = useState(isSelected);\n  useFormReset(formInputRef, consumerDefaultSelected ?? initialSelected, setIsSelected);\n\n  useFormValidation(\n    {\n      focus: () => buttonRef.current?.focus(),\n      validationBehavior: 'native',\n    },\n    validationState,\n    formInputRef,\n  );\n\n  return (\n    <>\n      <RACToggleButton\n        {...props}\n        ref={buttonRef}\n        className={clsx('cim-toggle-button', UNSAFE_className)}\n        style={UNSAFE_style}\n        id={toggleButtonGroupContext ? value : undefined}\n        isDisabled={isDisabled}\n        isSelected={isSelected}\n        onChange={setIsSelected}\n        aria-describedby={\n          [\n            props['aria-describedby'],\n            toggleButtonGroupContext?.isInvalid ? errorMessageProps?.id : null,\n            descriptionProps?.id,\n          ]\n            .filter(Boolean)\n            .join(' ') || undefined\n        }\n        data-variant=\"secondary\"\n        data-tone=\"base\"\n        data-size={size}\n        data-full-width={fullWidth || undefined}\n      >\n        {children}\n      </RACToggleButton>\n\n      {formInputName && (\n        <input\n          ref={formInputRef}\n          style={{ display: 'none' }}\n          type=\"checkbox\"\n          form={toggleButtonGroupContext?.form ?? form}\n          name={formInputName}\n          checked={isSelected}\n          value={value}\n          required={toggleButtonGroupContext?.isRequired}\n          aria-invalid={\n            toggleButtonGroupContext?.validationState.displayValidation.isInvalid ??\n            validationState.displayValidation.isInvalid ??\n            undefined\n          }\n          onChange={() => {}}\n        />\n      )}\n    </>\n  );\n}\n"]}

package/dist/esm/components/typography/link.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { type LinkProps as RACLinkProps } from 'react-aria-components';
 import type { NavigationProps, WithRequired } from '../types.js';
 import type { BaseTypographyProps, TextStyleOptions } from './types.js';
-export interface LinkProps extends Omit<BaseTypographyProps, 'id'>, WithRequired<NavigationProps, 'href'>, Pick<TextStyleOptions, 'variant' | 'fontStyle' | 'alignment'>, Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+export interface LinkProps extends BaseTypographyProps, WithRequired<NavigationProps, 'href'>, Pick<TextStyleOptions, 'variant' | 'fontStyle' | 'alignment'>, Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
     /** An icon displayed before the link text. */
     iconStart?: ReactNode;
     /** An icon displayed after the link text. */

package/dist/esm/components/typography/link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/link.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAMxE,MAAM,WAAW,SACf,SACE,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,EAC/B,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,GAAG,WAAW,CAAC,EAC7D,IAAI,CAAC,YAAY,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IAClE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA8BD;;;;GAIG;AACH,QAAA,MAAM,KAAK,8JAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/link.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAMxE,MAAM,WAAW,SACf,SACE,mBAAmB,EACnB,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,GAAG,WAAW,CAAC,EAC7D,IAAI,CAAC,YAAY,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IAClE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA8BD;;;;GAIG;AACH,QAAA,MAAM,KAAK,8JAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC"}

package/dist/esm/components/typography/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../src/components/typography/link.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkC,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3D,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,mDAAmD;AACnD,MAAM,WAAW,GAAG,QAAQ,CAAC;AAc7B,SAAS,IAAI,CACX,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa,EACpH,GAAoC;IAEpC,OAAO,CACL,MAAC,OAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,gBAAgB,CAAC,EAC3G,KAAK,EAAE,YAAY,aAElB,SAAS,IAAI,CACZ,8BACE,eAAM,SAAS,EAAC,eAAe,YAAE,SAAS,GAAQ,EACjD,WAAW,IACX,CACJ,EACD,eAAM,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAQ,EAChD,OAAO,IAAI,CACV,8BACG,WAAW,EACZ,eAAM,SAAS,EAAC,eAAe,YAAE,OAAO,GAAQ,IAC/C,CACJ,IACO,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,KAAK,GAAG,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport type { BaseTypographyProps, TextStyleOptions } from './types.js';\nimport { textStyle } from './utils.js';\n\n// Used to prevent word wrap between icons and text\nconst WORD_JOINER = '\\u2060';\n\nexport interface LinkProps\n  extends\n    Omit<BaseTypographyProps, 'id'>,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<TextStyleOptions, 'variant' | 'fontStyle' | 'alignment'>,\n    Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** An icon displayed before the link text. */\n  iconStart?: ReactNode;\n  /** An icon displayed after the link text. */\n  iconEnd?: ReactNode;\n}\n\nfunction Link(\n  { children, iconStart, iconEnd, UNSAFE_className, UNSAFE_style, variant, fontStyle, alignment, ...props }: LinkProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <RACLink\n      {...props}\n      ref={ref}\n      className={clsx('cim-link', textStyle({ tone: 'accent', variant, fontStyle, alignment }), UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      {iconStart && (\n        <>\n          <span className=\"cim-link-icon\">{iconStart}</span>\n          {WORD_JOINER}\n        </>\n      )}\n      <span className=\"cim-link-text\">{children}</span>\n      {iconEnd && (\n        <>\n          {WORD_JOINER}\n          <span className=\"cim-link-icon\">{iconEnd}</span>\n        </>\n      )}\n    </RACLink>\n  );\n}\n\n/**\n * Displays a textual link that allows users to navigate to another page or resource.\n *\n * See [link usage guidelines](https://ui.cimpress.io/components/link/).\n */\nconst _Link = withStyleProps(forwardRef(Link), 'Link');\n\nexport { _Link as Link };\n"]}
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../src/components/typography/link.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkC,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3D,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,mDAAmD;AACnD,MAAM,WAAW,GAAG,QAAQ,CAAC;AAc7B,SAAS,IAAI,CACX,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa,EACpH,GAAoC;IAEpC,OAAO,CACL,MAAC,OAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,gBAAgB,CAAC,EAC3G,KAAK,EAAE,YAAY,aAElB,SAAS,IAAI,CACZ,8BACE,eAAM,SAAS,EAAC,eAAe,YAAE,SAAS,GAAQ,EACjD,WAAW,IACX,CACJ,EACD,eAAM,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAQ,EAChD,OAAO,IAAI,CACV,8BACG,WAAW,EACZ,eAAM,SAAS,EAAC,eAAe,YAAE,OAAO,GAAQ,IAC/C,CACJ,IACO,CACX,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,KAAK,GAAG,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { NavigationProps, WithRequired } from '../types.js';\nimport type { BaseTypographyProps, TextStyleOptions } from './types.js';\nimport { textStyle } from './utils.js';\n\n// Used to prevent word wrap between icons and text\nconst WORD_JOINER = '\\u2060';\n\nexport interface LinkProps\n  extends\n    BaseTypographyProps,\n    WithRequired<NavigationProps, 'href'>,\n    Pick<TextStyleOptions, 'variant' | 'fontStyle' | 'alignment'>,\n    Pick<RACLinkProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  /** An icon displayed before the link text. */\n  iconStart?: ReactNode;\n  /** An icon displayed after the link text. */\n  iconEnd?: ReactNode;\n}\n\nfunction Link(\n  { children, iconStart, iconEnd, UNSAFE_className, UNSAFE_style, variant, fontStyle, alignment, ...props }: LinkProps,\n  ref: ForwardedRef<HTMLAnchorElement>,\n) {\n  return (\n    <RACLink\n      {...props}\n      ref={ref}\n      className={clsx('cim-link', textStyle({ tone: 'accent', variant, fontStyle, alignment }), UNSAFE_className)}\n      style={UNSAFE_style}\n    >\n      {iconStart && (\n        <>\n          <span className=\"cim-link-icon\">{iconStart}</span>\n          {WORD_JOINER}\n        </>\n      )}\n      <span className=\"cim-link-text\">{children}</span>\n      {iconEnd && (\n        <>\n          {WORD_JOINER}\n          <span className=\"cim-link-icon\">{iconEnd}</span>\n        </>\n      )}\n    </RACLink>\n  );\n}\n\n/**\n * Displays a textual link that allows users to navigate to another page or resource.\n *\n * See [link usage guidelines](https://ui.cimpress.io/components/link/).\n */\nconst _Link = withStyleProps(forwardRef(Link), 'Link');\n\nexport { _Link as Link };\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimpress-ui/react",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "Library of React components for building Cimpress UI interfaces.",
   "author": "Cimpress",
   "license": "Apache-2.0",
@@ -166,17 +166,17 @@
     }
   },
   "dependencies": {
-    "@internationalized/date": "^3.10.1",
-    "@react-aria/focus": "^3.21.3",
-    "@react-aria/form": "^3.1.3",
-    "@react-aria/interactions": "^3.26.0",
-    "@react-aria/live-announcer": "^3.4.4",
-    "@react-aria/utils": "^3.32.0",
-    "@react-stately/form": "^3.2.2",
-    "@react-stately/utils": "^3.11.0",
+    "@internationalized/date": "^3.12.1",
+    "@react-aria/focus": "^3.22.0",
+    "@react-aria/form": "^3.2.0",
+    "@react-aria/interactions": "^3.28.0",
+    "@react-aria/live-announcer": "^3.5.0",
+    "@react-aria/utils": "^3.34.0",
+    "@react-stately/form": "^3.3.0",
+    "@react-stately/utils": "^3.12.0",
     "clsx": "^2.1.1",
-    "react-aria": "^3.45.0",
-    "react-aria-components": "1.14.0"
+    "react-aria": "^3.48.0",
+    "react-aria-components": "1.17.0"
   },
   "peerDependencies": {
     "react": "^16.14 || ^17 || ^18 || ^19",
@@ -184,7 +184,7 @@
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.12",
-    "@internationalized/string-compiler": "^3.2.6",
+    "@internationalized/string-compiler": "^3.4.0",
     "@svgr/cli": "^8.1.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",

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

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

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

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

@@ -1,31 +0,0 @@
-"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, isReadOnly, renderEmptyState, onRemove, }) {
-    const listState = (0, react_1.useContext)(react_aria_components_1.ListStateContext);
-    // The plugin doesn't see `selectedKeys` as a legitimate dependency
-    // eslint-disable-next-line react-hooks/preserve-manual-memoization
-    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: isReadOnly
-                ? undefined
-                : (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

@@ -1 +0,0 @@
-{"version":3,"file":"tag-field-tags.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-tags.tsx"],"names":[],"mappings":";;AAcA,oCAoDC;;AAlED,iCAA4C;AAC5C,iEAM+B;AAC/B,sDAA+C;AAC/C,0CAAmD;AAInD,gBAAgB;AAChB,SAAgB,YAAY,CAA2B,EACrD,OAAO,EACP,YAAY,EACZ,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,QAAQ,GAKT;IACC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,wCAAmB,CAAC,CAAC;IAElD,mEAAmE;IACnE,mEAAmE;IACnE,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,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,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 { 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  // The plugin doesn't see `selectedKeys` as a legitimate dependency\n  // eslint-disable-next-line react-hooks/preserve-manual-memoization\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-tags.d.ts

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

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

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

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

@@ -1,28 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from 'react';
-import { ButtonContext as RACButtonContext, LabelContext as RACLabelContext, ListStateContext as RACListStateContext, Provider as RACProvider, TextContext as RACTextContext, } from 'react-aria-components';
-import { TagGroup } from '../tag/tag-group.js';
-import { Tag } from '../tag/tag.js';
-/** @internal */
-export function TagFieldTags({ inputId, selectedKeys, isDisabled, isReadOnly, renderEmptyState, onRemove, }) {
-    const listState = useContext(RACListStateContext);
-    // The plugin doesn't see `selectedKeys` as a legitimate dependency
-    // eslint-disable-next-line react-hooks/preserve-manual-memoization
-    const selectedItems = useMemo(() => {
-        return [...selectedKeys.values()]
-            .map((key) => listState?.selectionManager.collection.getItem(key))
-            .filter((value) => !!value);
-    }, [selectedKeys, listState?.selectionManager.collection]);
-    return (_jsx(RACProvider, { values: [
-            // Reset contexts so that TagGroup doesn't inherit any data from RACComboBox
-            [RACLabelContext, null],
-            [RACButtonContext, null],
-            [RACTextContext, null],
-            [RACListStateContext, null],
-        ], 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

@@ -1 +0,0 @@
-{"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,mEAAmE;IACnE,mEAAmE;IACnE,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  // The plugin doesn't see `selectedKeys` as a legitimate dependency\n  // eslint-disable-next-line react-hooks/preserve-manual-memoization\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"]}