@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/TagGroup.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TagGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  Collection,\n  TagList,\n  TagListProps,\n  TagRenderProps\n} from 'react-aria-components/TagGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {CollectionBuilder} from 'react-aria/CollectionBuilder';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  forwardRef,\n  ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {\n  DOMRef,\n  DOMRefValue,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  LabelableProps,\n  Node,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {FieldLabel, helpTextStyles} from './Field';\nimport {flushSync} from 'react-dom';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ButtonContext as RACButtonContext} from 'react-aria-components/Button';\nimport {TextContext as RACTextContext} from 'react-aria-components/Text';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from './useDOMRef';\nimport {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';\n// @ts-ignore\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n// Get types from RSP and extend those?\nexport interface TagProps\n  extends\n    Omit<\n      AriaTagProps,\n      'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes\n    >,\n    LabelableProps {\n  /** The children of the tag. */\n  children: ReactNode;\n}\n\nexport interface TagGroupProps<T>\n  extends\n    Omit<\n      AriaTagGroupProps,\n      'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>,\n    Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>,\n    StyleProps,\n    Omit<HelpTextProps, 'errorMessage'> {\n  /** A description for the tag group. */\n  description?: ReactNode;\n  /**\n   * The size of the tag group.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L';\n  /** Whether the tags are displayed in an emphasized style. */\n  isEmphasized?: boolean;\n  /** Provides content to display when there are no items in the tag group. */\n  renderEmptyState?: () => ReactNode;\n  /** Whether the tags are displayed in a error state. */\n  isInvalid?: boolean;\n  /** An error message for the field. */\n  errorMessage?: ReactNode;\n  /**\n   * Limit the number of rows initially shown. This will render a button that allows the user to\n   * expand to show all tags.\n   */\n  maxRows?: number;\n  /** The label to display on the action button. */\n  groupActionLabel?: string;\n  /** Handler that is called when the action button is pressed. */\n  onGroupAction?: () => void;\n}\n\nexport const TagGroupContext =\n  createContext<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst InternalTagGroupContext = createContext<TagGroupProps<any>>({});\n\n/**\n * Tags allow users to categorize content. They can represent keywords or people, and are grouped to\n * describe an item or a search request.\n */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T>(\n  props: TagGroupProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);\n  props = useFormProps(props);\n  let {onRemove} = props;\n  return (\n    <InternalTagGroupContext.Provider value={{onRemove}}>\n      <CollectionBuilder content={<Collection {...props} />}>\n        {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n      </CollectionBuilder>\n    </InternalTagGroupContext.Provider>\n  );\n});\n\nfunction TagGroupInner<T>({\n  props: {\n    label,\n    description,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    isEmphasized,\n    isInvalid,\n    errorMessage,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    size = 'M',\n    ...props\n  },\n  forwardedRef: ref,\n  collection\n}: {\n  props: TagGroupProps<T>;\n  forwardedRef: DOMRef<HTMLDivElement>;\n  collection: any;\n}) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    maxRows,\n    groupActionLabel,\n    onGroupAction,\n    renderEmptyState = () => stringFormatter.format('tag.noTags'),\n    ...otherProps\n  } = props;\n  let {direction} = useLocale();\n  let containerRef = useRef(null);\n  let tagsRef = useRef<HTMLDivElement | null>(null);\n  let actionsRef = useRef<HTMLDivElement | null>(null);\n  let hiddenTagsRef = useRef<HTMLDivElement | null>(null);\n  let [tagState, setTagState] = useState({\n    visibleTagCount: collection.size,\n    showCollapseButton: false\n  });\n  let [isCollapsed, setIsCollapsed] = useState(maxRows != null);\n  let {onRemove} = useContext(InternalTagGroupContext);\n  let isEmpty = collection.size === 0;\n  let showCollapseToggleButton =\n    tagState.showCollapseButton || tagState.visibleTagCount < collection.size;\n  let formContext = useContext(FormContext);\n  let domRef = useDOMRef(ref);\n\n  let allItems = useMemo(() => Array.from(collection) as Array<Node<T>>, [collection]);\n  let items = useMemo(\n    () =>\n      Array.from(collection).slice(\n        0,\n        !isCollapsed ? collection.size : tagState.visibleTagCount\n      ) as Array<Node<T>>,\n    [collection, tagState.visibleTagCount, isCollapsed]\n  );\n\n  let updateVisibleTagCount = () => {\n    if (maxRows == null) {\n      setTagState({visibleTagCount: collection.size, showCollapseButton: false});\n    }\n\n    if (maxRows != null && maxRows > 0) {\n      let computeVisibleTagCount = () => {\n        let currContainerRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currTagsRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currActionsRef: HTMLDivElement | null = actionsRef.current;\n        if (\n          !currContainerRef ||\n          !currTagsRef ||\n          collection.size === 0 ||\n          currContainerRef.parentElement == null\n        ) {\n          return {\n            visibleTagCount: 0,\n            showCollapseButton: false\n          };\n        }\n\n        // Count rows and show tags until we hit the maxRows.\n        // I think this is still a safe assumption, and we don't need to queryAll for role=tag\n        let tags = [...currTagsRef.children];\n        let currY = -Infinity;\n        let rowCount = 0;\n        let index = 0;\n        let tagWidths: number[] = [];\n        for (let tag of tags) {\n          let {width, y} = tag.getBoundingClientRect();\n\n          if (y !== currY) {\n            currY = y;\n            rowCount++;\n          }\n\n          if (rowCount > maxRows) {\n            break;\n          }\n          tagWidths.push(width);\n          index++;\n        }\n\n        // Remove tags until there is space for the collapse button and action button (if present) on the last row.\n        let buttons = currActionsRef ? [...currActionsRef.children] : [];\n        if (buttons.length > 0 && rowCount >= maxRows) {\n          let buttonsWidth = buttons.reduce(\n            (acc, curr) => (acc += curr.getBoundingClientRect().width),\n            0\n          );\n          let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);\n          buttonsWidth += margins * 2;\n          let end = direction === 'ltr' ? 'right' : 'left';\n          let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;\n          let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];\n          lastTagEnd += margins;\n          let availableWidth = containerEnd - lastTagEnd;\n\n          while (availableWidth <= buttonsWidth && index > 0) {\n            let tagWidth = tagWidths.pop();\n            if (tagWidth != null) {\n              availableWidth += tagWidth;\n            }\n            index--;\n          }\n        }\n\n        return {\n          visibleTagCount: Math.max(index, 1),\n          showCollapseButton: index < collection.size\n        };\n      };\n      let result = computeVisibleTagCount();\n      flushSync(() => {\n        setTagState(result);\n      });\n    }\n  };\n\n  let updateVisibleTagCountEffect = useEffectEvent(updateVisibleTagCount);\n\n  useResizeObserver({\n    ref: maxRows != null ? containerRef : undefined,\n    onResize: updateVisibleTagCount\n  });\n\n  useLayoutEffect(() => {\n    if (collection.size > 0 && maxRows != null && maxRows > 0) {\n      queueMicrotask(updateVisibleTagCountEffect);\n    }\n  }, [collection.size, maxRows]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateVisibleTagCountEffect());\n  }, []);\n\n  let handlePressCollapse = () => {\n    setIsCollapsed(prevCollapsed => !prevCollapsed);\n  };\n\n  let helpText: ReactNode = null;\n  if (!isInvalid && description) {\n    helpText = (\n      <Text slot=\"description\" styles={helpTextStyles({size})}>\n        {description}\n      </Text>\n    );\n  } else if (isInvalid) {\n    helpText = (\n      <div className={helpTextStyles({size, isInvalid})}>\n        <CenterBaseline>\n          <AlertIcon />\n        </CenterBaseline>\n        <Text slot=\"errorMessage\">{errorMessage}</Text>\n      </div>\n    );\n  }\n\n  return (\n    <AriaTagGroup\n      {...otherProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className +\n        style(field(), getAllowedOverrides())(\n          {\n            size,\n            labelPosition: labelPosition,\n            isInForm: !!formContext\n          },\n          props.styles\n        )\n      }>\n      <FieldLabel\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={props.contextualHelp}>\n        {label}\n      </FieldLabel>\n      <div\n        ref={containerRef}\n        className={style({\n          gridArea: 'input',\n          minWidth: 'full',\n          marginStart: {\n            default: -4,\n            isEmpty: 0\n          },\n          marginEnd: {\n            default: 4,\n            isEmpty: 0\n          },\n          position: 'relative'\n        })({isEmpty})}>\n        <FormContext.Provider value={{...formContext, size}}>\n          <Provider\n            values={[\n              [RACTextContext, undefined],\n              [RACButtonContext, undefined],\n              [TagGroupContext, {size, isEmphasized}]\n            ]}>\n            {/* invisible collection for measuring */}\n            {maxRows != null && (\n              <div\n                // @ts-ignore\n                inert={inertValue(true)}\n                ref={hiddenTagsRef}\n                className={style({\n                  display: 'inline',\n                  flexWrap: 'wrap',\n                  fontFamily: 'sans',\n                  position: 'absolute',\n                  top: 0,\n                  bottom: 0,\n                  start: -4,\n                  end: 4,\n                  visibility: 'hidden',\n                  overflow: 'hidden',\n                  opacity: 0\n                })}>\n                {allItems.map(item => {\n                  // pull off individual props as an allow list, don't want refs or other props getting through\n                  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n                  let {ref, ...itemProps} = item.props;\n                  return (\n                    <div\n                      style={itemProps.UNSAFE_style}\n                      key={item.key}\n                      className={itemProps.className({size, allowsRemoving: Boolean(onRemove)})}>\n                      <TagWrapper\n                        key={item.key}\n                        id={item.key}\n                        textValue={item.textValue}\n                        isInRealDOM\n                        size={size}\n                        allowsRemoving={!!onRemove}\n                        {...itemProps}\n                        children={itemProps.children({\n                          size,\n                          allowsRemoving: Boolean(onRemove),\n                          isInCtx: true\n                        })}\n                      />\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n            {/* real tag list */}\n            <TagList\n              ref={tagsRef}\n              items={items}\n              renderEmptyState={renderEmptyState}\n              className={style({\n                display: 'inline',\n                minWidth: 'full',\n                font: 'ui'\n              })}>\n              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}\n            </TagList>\n            {!isEmpty && (showCollapseToggleButton || groupActionLabel) && (\n              <ActionGroup\n                collection={collection}\n                aria-label={props['aria-label']}\n                aria-labelledby={props['aria-labelledby']}\n                actionsRef={actionsRef}\n                tagState={tagState}\n                size={size}\n                isCollapsed={isCollapsed}\n                handlePressCollapse={handlePressCollapse}\n                onGroupAction={onGroupAction}\n                groupActionLabel={groupActionLabel}\n              />\n            )}\n          </Provider>\n        </FormContext.Provider>\n      </div>\n      {helpText}\n    </AriaTagGroup>\n  );\n}\n\nfunction ActionGroup(props) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    actionsRef,\n    tagState,\n    size,\n    isCollapsed,\n    handlePressCollapse,\n    onGroupAction,\n    groupActionLabel,\n    collection,\n    // directly use aria-labelling from the TagGroup because we can't use the id from the TagList\n    // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back\n    // and forth with their prefix in an infinite loop\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  let actionsId = useId();\n  // might need to localize the aria-label which concatenates with this label\n  let actionGroupLabel = stringFormatter.format('tag.actions');\n  return (\n    <div\n      role=\"group\"\n      ref={actionsRef}\n      id={actionsId}\n      aria-label={ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel}\n      aria-labelledby={ariaLabelledBy ? ariaLabelledBy : undefined}\n      className={style({\n        display: 'inline'\n      })}>\n      {tagState.showCollapseButton && (\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={handlePressCollapse}>\n          {isCollapsed\n            ? stringFormatter.format('tag.showAllButtonLabel', {tagCount: collection.size})\n            : stringFormatter.format('tag.hideButtonLabel')}\n        </ActionButton>\n      )}\n      {groupActionLabel && onGroupAction && (\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={() => onGroupAction?.()}>\n          {groupActionLabel}\n        </ActionButton>\n      )}\n    </div>\n  );\n}\n\nconst tagStyles = style<\n  TagRenderProps & {\n    size?: 'S' | 'M' | 'L';\n    isEmphasized?: boolean;\n    isLink?: boolean;\n    allowsRemoving?: boolean;\n  }\n>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  display: 'inline-flex',\n  maxWidth: 'full',\n  verticalAlign: 'middle',\n  justifyContent: 'center',\n  transition: 'default',\n  // maxWidth: 'calc(self(height) * 7)', // s2 designs show a max width on tags but we pushed back on this in v3\n  backgroundColor: {\n    default: 'gray-100',\n    isHovered: {\n      default: 'gray-200'\n    },\n    isFocusVisible: {\n      default: 'gray-200'\n    },\n    isSelected: {\n      default: baseColor('neutral'),\n      isEmphasized: {\n        default: lightDark('accent-900', 'accent-700'),\n        isHovered: lightDark('accent-1000', 'accent-600'),\n        isPressed: lightDark('accent-1000', 'accent-600'),\n        isFocusVisible: lightDark('accent-1000', 'accent-600')\n      }\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: 'Highlight'\n    }\n  },\n  color: {\n    default: baseColor('neutral'),\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  paddingEnd: {\n    default: 'edge-to-text',\n    allowsRemoving: 0\n  },\n  margin: 4,\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 24\n} as const;\n\n/** An individual Tag for TagGroups. */\nexport const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag(\n  {children, textValue, ...props}: TagProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  textValue ||= typeof children === 'string' ? children : undefined;\n  let ctx = useSlottedContext(TagGroupContext);\n  let isInRealDOM = Boolean(ctx?.size);\n  let {size, isEmphasized} = ctx ?? {};\n  let domRef = useDOMRef(ref);\n\n  let backupRef = useRef(null);\n  domRef = domRef || backupRef;\n  let isLink = props.href != null;\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => tagStyles({size, isEmphasized, isLink, ...renderProps})}>\n      {composeRenderProps(children, (children, renderProps) => (\n        <TagWrapper isInRealDOM={isInRealDOM} isEmphasized={isEmphasized} {...renderProps}>\n          {typeof children === 'string' ? <Text>{children}</Text> : children}\n        </TagWrapper>\n      ))}\n    </AriaTag>\n  );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphasized, isSelected}) {\n  let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};\n\n  return (\n    <>\n      {isInRealDOM && (\n        <div\n          className={style({\n            display: 'flex',\n            minWidth: 0,\n            alignItems: 'center',\n            gap: 'text-to-visual',\n            forcedColorAdjust: 'none',\n            backgroundColor: 'transparent'\n          })}>\n          <Provider\n            values={[\n              [TextContext, {styles: style({order: 1, truncate: true})}],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    flexShrink: 0\n                  })\n                }\n              ],\n              [\n                AvatarContext,\n                {\n                  size: avatarSize[size],\n                  styles: style({order: 0})\n                }\n              ],\n              [\n                ImageContext,\n                {\n                  styles: style({\n                    size: fontRelative(20),\n                    flexShrink: 0,\n                    order: 0,\n                    aspectRatio: 'square',\n                    objectFit: 'contain',\n                    borderRadius: 'sm'\n                  })\n                }\n              ]\n            ]}>\n            {children}\n          </Provider>\n        </div>\n      )}\n      {!isInRealDOM && children}\n      {allowsRemoving && isInRealDOM && (\n        <ClearButton\n          slot=\"remove\"\n          size={size}\n          isStaticColor={isEmphasized && isSelected}\n          isDisabled={isDisabled}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"TagGroup.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TagGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagGroupProps as AriaTagGroupProps,\n  TagProps as AriaTagProps,\n  Collection,\n  TagList,\n  TagListProps,\n  TagRenderProps\n} from 'react-aria-components/TagGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {CollectionBuilder} from 'react-aria/CollectionBuilder';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';\nimport {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  forwardRef,\n  ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {\n  DOMRef,\n  DOMRefValue,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  LabelableProps,\n  Node,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {FieldLabel, helpTextStyles} from './Field';\nimport {flushSync} from 'react-dom';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ButtonContext as RACButtonContext} from 'react-aria-components/Button';\nimport {TextContext as RACTextContext} from 'react-aria-components/Text';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from './useDOMRef';\nimport {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n// Get types from RSP and extend those?\nexport interface TagProps\n  extends\n    Omit<\n      AriaTagProps,\n      'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes\n    >,\n    LabelableProps {\n  /** The children of the tag. */\n  children: ReactNode;\n}\n\nexport interface TagGroupProps<T>\n  extends\n    Omit<\n      AriaTagGroupProps,\n      'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>,\n    Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>,\n    StyleProps,\n    Omit<HelpTextProps, 'errorMessage'> {\n  /** A description for the tag group. */\n  description?: ReactNode;\n  /**\n   * The size of the tag group.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L';\n  /** Whether the tags are displayed in an emphasized style. */\n  isEmphasized?: boolean;\n  /** Provides content to display when there are no items in the tag group. */\n  renderEmptyState?: () => ReactNode;\n  /** Whether the tags are displayed in a error state. */\n  isInvalid?: boolean;\n  /** An error message for the field. */\n  errorMessage?: ReactNode;\n  /**\n   * Limit the number of rows initially shown. This will render a button that allows the user to\n   * expand to show all tags.\n   */\n  maxRows?: number;\n  /** The label to display on the action button. */\n  groupActionLabel?: string;\n  /** Handler that is called when the action button is pressed. */\n  onGroupAction?: () => void;\n}\n\nexport const TagGroupContext =\n  createContext<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst InternalTagGroupContext = createContext<TagGroupProps<any>>({});\n\n/**\n * Tags allow users to categorize content. They can represent keywords or people, and are grouped to\n * describe an item or a search request.\n */\nexport const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T>(\n  props: TagGroupProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);\n  props = useFormProps(props);\n  let {onRemove} = props;\n  return (\n    <InternalTagGroupContext.Provider value={{onRemove}}>\n      <CollectionBuilder content={<Collection {...props} />}>\n        {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}\n      </CollectionBuilder>\n    </InternalTagGroupContext.Provider>\n  );\n});\n\nfunction TagGroupInner<T>({\n  props: {\n    label,\n    description,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    isEmphasized,\n    isInvalid,\n    errorMessage,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    size = 'M',\n    ...props\n  },\n  forwardedRef: ref,\n  collection\n}: {\n  props: TagGroupProps<T>;\n  forwardedRef: DOMRef<HTMLDivElement>;\n  collection: any;\n}) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    maxRows,\n    groupActionLabel,\n    onGroupAction,\n    renderEmptyState = () => stringFormatter.format('tag.noTags'),\n    ...otherProps\n  } = props;\n  let {direction} = useLocale();\n  let containerRef = useRef(null);\n  let tagsRef = useRef<HTMLDivElement | null>(null);\n  let actionsRef = useRef<HTMLDivElement | null>(null);\n  let hiddenTagsRef = useRef<HTMLDivElement | null>(null);\n  let [tagState, setTagState] = useState({\n    visibleTagCount: collection.size,\n    showCollapseButton: false\n  });\n  let [isCollapsed, setIsCollapsed] = useState(maxRows != null);\n  let {onRemove} = useContext(InternalTagGroupContext);\n  let isEmpty = collection.size === 0;\n  let showCollapseToggleButton =\n    tagState.showCollapseButton || tagState.visibleTagCount < collection.size;\n  let formContext = useContext(FormContext);\n  let domRef = useDOMRef(ref);\n\n  let allItems = useMemo(() => Array.from(collection) as Array<Node<T>>, [collection]);\n  let items = useMemo(\n    () =>\n      Array.from(collection).slice(\n        0,\n        !isCollapsed ? collection.size : tagState.visibleTagCount\n      ) as Array<Node<T>>,\n    [collection, tagState.visibleTagCount, isCollapsed]\n  );\n\n  let updateVisibleTagCount = () => {\n    if (maxRows == null) {\n      setTagState({visibleTagCount: collection.size, showCollapseButton: false});\n    }\n\n    if (maxRows != null && maxRows > 0) {\n      let computeVisibleTagCount = () => {\n        let currContainerRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currTagsRef: HTMLDivElement | null = hiddenTagsRef.current;\n        let currActionsRef: HTMLDivElement | null = actionsRef.current;\n        if (\n          !currContainerRef ||\n          !currTagsRef ||\n          collection.size === 0 ||\n          currContainerRef.parentElement == null\n        ) {\n          return {\n            visibleTagCount: 0,\n            showCollapseButton: false\n          };\n        }\n\n        // Count rows and show tags until we hit the maxRows.\n        // I think this is still a safe assumption, and we don't need to queryAll for role=tag\n        let tags = [...currTagsRef.children];\n        let currY = -Infinity;\n        let rowCount = 0;\n        let index = 0;\n        let tagWidths: number[] = [];\n        for (let tag of tags) {\n          let {width, y} = tag.getBoundingClientRect();\n\n          if (y !== currY) {\n            currY = y;\n            rowCount++;\n          }\n\n          if (rowCount > maxRows) {\n            break;\n          }\n          tagWidths.push(width);\n          index++;\n        }\n\n        // Remove tags until there is space for the collapse button and action button (if present) on the last row.\n        let buttons = currActionsRef ? [...currActionsRef.children] : [];\n        if (buttons.length > 0 && rowCount >= maxRows) {\n          let buttonsWidth = buttons.reduce(\n            (acc, curr) => (acc += curr.getBoundingClientRect().width),\n            0\n          );\n          let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);\n          buttonsWidth += margins * 2;\n          let end = direction === 'ltr' ? 'right' : 'left';\n          let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;\n          let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];\n          lastTagEnd += margins;\n          let availableWidth = containerEnd - lastTagEnd;\n\n          while (availableWidth <= buttonsWidth && index > 0) {\n            let tagWidth = tagWidths.pop();\n            if (tagWidth != null) {\n              availableWidth += tagWidth;\n            }\n            index--;\n          }\n        }\n\n        return {\n          visibleTagCount: Math.max(index, 1),\n          showCollapseButton: index < collection.size\n        };\n      };\n      let result = computeVisibleTagCount();\n      flushSync(() => {\n        setTagState(result);\n      });\n    }\n  };\n\n  let updateVisibleTagCountEffect = useEffectEvent(updateVisibleTagCount);\n\n  useResizeObserver({\n    ref: maxRows != null ? containerRef : undefined,\n    onResize: updateVisibleTagCount\n  });\n\n  useLayoutEffect(() => {\n    if (collection.size > 0 && maxRows != null && maxRows > 0) {\n      queueMicrotask(updateVisibleTagCountEffect);\n    }\n  }, [collection.size, maxRows]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateVisibleTagCountEffect());\n  }, []);\n\n  let handlePressCollapse = () => {\n    setIsCollapsed(prevCollapsed => !prevCollapsed);\n  };\n\n  let helpText: ReactNode = null;\n  if (!isInvalid && description) {\n    helpText = (\n      <Text slot=\"description\" styles={helpTextStyles({size})}>\n        {description}\n      </Text>\n    );\n  } else if (isInvalid) {\n    helpText = (\n      <div className={helpTextStyles({size, isInvalid})}>\n        <CenterBaseline>\n          <AlertIcon />\n        </CenterBaseline>\n        <Text slot=\"errorMessage\">{errorMessage}</Text>\n      </div>\n    );\n  }\n\n  return (\n    <AriaTagGroup\n      {...otherProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className +\n        style(field(), getAllowedOverrides())(\n          {\n            size,\n            labelPosition: labelPosition,\n            isInForm: !!formContext\n          },\n          props.styles\n        )\n      }>\n      <FieldLabel\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={props.contextualHelp}>\n        {label}\n      </FieldLabel>\n      <div\n        ref={containerRef}\n        className={style({\n          gridArea: 'input',\n          minWidth: 'full',\n          marginStart: {\n            default: -4,\n            isEmpty: 0\n          },\n          marginEnd: {\n            default: 4,\n            isEmpty: 0\n          },\n          position: 'relative'\n        })({isEmpty})}>\n        <FormContext.Provider value={{...formContext, size}}>\n          <Provider\n            values={[\n              [RACTextContext, undefined],\n              [RACButtonContext, undefined],\n              [TagGroupContext, {size, isEmphasized}]\n            ]}>\n            {/* invisible collection for measuring */}\n            {maxRows != null && (\n              <div\n                // @ts-ignore\n                inert={inertValue(true)}\n                ref={hiddenTagsRef}\n                className={style({\n                  display: 'inline',\n                  flexWrap: 'wrap',\n                  fontFamily: 'sans',\n                  position: 'absolute',\n                  top: 0,\n                  bottom: 0,\n                  start: -4,\n                  end: 4,\n                  visibility: 'hidden',\n                  overflow: 'hidden',\n                  opacity: 0\n                })}>\n                {allItems.map(item => {\n                  // pull off individual props as an allow list, don't want refs or other props getting through\n                  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n                  let {ref, ...itemProps} = item.props;\n                  return (\n                    <div\n                      style={itemProps.UNSAFE_style}\n                      key={item.key}\n                      className={itemProps.className({size, allowsRemoving: Boolean(onRemove)})}>\n                      <TagWrapper\n                        key={item.key}\n                        id={item.key}\n                        textValue={item.textValue}\n                        isInRealDOM\n                        size={size}\n                        allowsRemoving={!!onRemove}\n                        {...itemProps}\n                        children={itemProps.children({\n                          size,\n                          allowsRemoving: Boolean(onRemove),\n                          isInCtx: true\n                        })}\n                      />\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n            {/* real tag list */}\n            <TagList\n              ref={tagsRef}\n              items={items}\n              renderEmptyState={renderEmptyState}\n              className={style({\n                display: 'inline',\n                minWidth: 'full',\n                font: 'ui'\n              })}>\n              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}\n            </TagList>\n            {!isEmpty && (showCollapseToggleButton || groupActionLabel) && (\n              <ActionGroup\n                collection={collection}\n                aria-label={props['aria-label']}\n                aria-labelledby={props['aria-labelledby']}\n                actionsRef={actionsRef}\n                tagState={tagState}\n                size={size}\n                isCollapsed={isCollapsed}\n                handlePressCollapse={handlePressCollapse}\n                onGroupAction={onGroupAction}\n                groupActionLabel={groupActionLabel}\n              />\n            )}\n          </Provider>\n        </FormContext.Provider>\n      </div>\n      {helpText}\n    </AriaTagGroup>\n  );\n}\n\nfunction ActionGroup(props) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    actionsRef,\n    tagState,\n    size,\n    isCollapsed,\n    handlePressCollapse,\n    onGroupAction,\n    groupActionLabel,\n    collection,\n    // directly use aria-labelling from the TagGroup because we can't use the id from the TagList\n    // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back\n    // and forth with their prefix in an infinite loop\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy\n  } = props;\n\n  let actionsId = useId();\n  // might need to localize the aria-label which concatenates with this label\n  let actionGroupLabel = stringFormatter.format('tag.actions');\n  return (\n    <div\n      role=\"group\"\n      ref={actionsRef}\n      id={actionsId}\n      aria-label={ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel}\n      aria-labelledby={ariaLabelledBy ? ariaLabelledBy : undefined}\n      className={style({\n        display: 'inline'\n      })}>\n      {tagState.showCollapseButton && (\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={handlePressCollapse}>\n          {isCollapsed\n            ? stringFormatter.format('tag.showAllButtonLabel', {tagCount: collection.size})\n            : stringFormatter.format('tag.hideButtonLabel')}\n        </ActionButton>\n      )}\n      {groupActionLabel && onGroupAction && (\n        <ActionButton\n          isQuiet\n          size={size}\n          styles={style({margin: 4})}\n          UNSAFE_style={{display: 'inline-flex'}}\n          onPress={() => onGroupAction?.()}>\n          {groupActionLabel}\n        </ActionButton>\n      )}\n    </div>\n  );\n}\n\nconst tagStyles = style<\n  TagRenderProps & {\n    size?: 'S' | 'M' | 'L';\n    isEmphasized?: boolean;\n    isLink?: boolean;\n    allowsRemoving?: boolean;\n  }\n>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  display: 'inline-flex',\n  maxWidth: 'full',\n  verticalAlign: 'middle',\n  justifyContent: 'center',\n  transition: 'default',\n  // maxWidth: 'calc(self(height) * 7)', // s2 designs show a max width on tags but we pushed back on this in v3\n  backgroundColor: {\n    default: 'gray-100',\n    isHovered: {\n      default: 'gray-200'\n    },\n    isFocusVisible: {\n      default: 'gray-200'\n    },\n    isSelected: {\n      default: baseColor('neutral'),\n      isEmphasized: {\n        default: lightDark('accent-900', 'accent-700'),\n        isHovered: lightDark('accent-1000', 'accent-600'),\n        isPressed: lightDark('accent-1000', 'accent-600'),\n        isFocusVisible: lightDark('accent-1000', 'accent-600')\n      }\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: 'Highlight'\n    }\n  },\n  color: {\n    default: baseColor('neutral'),\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  paddingEnd: {\n    default: 'edge-to-text',\n    allowsRemoving: 0\n  },\n  margin: 4,\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 24\n} as const;\n\n/** An individual Tag for TagGroups. */\nexport const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag(\n  {children, textValue, ...props}: TagProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  textValue ||= typeof children === 'string' ? children : undefined;\n  let ctx = useSlottedContext(TagGroupContext);\n  let isInRealDOM = Boolean(ctx?.size);\n  let {size, isEmphasized} = ctx ?? {};\n  let domRef = useDOMRef(ref);\n\n  let backupRef = useRef(null);\n  domRef = domRef || backupRef;\n  let isLink = props.href != null;\n  return (\n    <AriaTag\n      textValue={textValue}\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef)}\n      className={renderProps => tagStyles({size, isEmphasized, isLink, ...renderProps})}>\n      {composeRenderProps(children, (children, renderProps) => (\n        <TagWrapper isInRealDOM={isInRealDOM} isEmphasized={isEmphasized} {...renderProps}>\n          {typeof children === 'string' ? <Text>{children}</Text> : children}\n        </TagWrapper>\n      ))}\n    </AriaTag>\n  );\n});\n\nfunction TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphasized, isSelected}) {\n  let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};\n\n  return (\n    <>\n      {isInRealDOM && (\n        <div\n          className={style({\n            display: 'flex',\n            minWidth: 0,\n            alignItems: 'center',\n            gap: 'text-to-visual',\n            forcedColorAdjust: 'none',\n            backgroundColor: 'transparent'\n          })}>\n          <Provider\n            values={[\n              [TextContext, {styles: style({order: 1, truncate: true})}],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    flexShrink: 0\n                  })\n                }\n              ],\n              [\n                AvatarContext,\n                {\n                  size: avatarSize[size],\n                  styles: style({order: 0})\n                }\n              ],\n              [\n                ImageContext,\n                {\n                  styles: style({\n                    size: fontRelative(20),\n                    flexShrink: 0,\n                    order: 0,\n                    aspectRatio: 'square',\n                    objectFit: 'contain',\n                    borderRadius: 'sm'\n                  })\n                }\n              ]\n            ]}>\n            {children}\n          </Provider>\n        </div>\n      )}\n      {!isInRealDOM && children}\n      {allowsRemoving && isInRealDOM && (\n        <ClearButton\n          slot=\"remove\"\n          size={size}\n          isStaticColor={isEmphasized && isSelected}\n          isDisabled={isDisabled}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"TagGroup.mjs.map"}

package/dist/private/TextField.cjs

@@ -60,7 +60,7 @@ const $cce7e7de6810e1b5$export$f5c9f3c2c4054eec = /*#__PURE__*/ (0, $tjrHw$react
     return /*#__PURE__*/ (0, $tjrHw$reactjsxruntime.jsx)($cce7e7de6810e1b5$export$d22444a338b6e3c2, {
         ...props,
         ref: ref,
-        fieldGroupCss: " ea131 Fd131",
+        fieldGroupCss: " ea151 Fd151",
         children: /*#__PURE__*/ (0, $tjrHw$reactjsxruntime.jsx)($cce7e7de6810e1b5$var$TextAreaInput, {})
     });
 });
@@ -94,51 +94,51 @@ const $cce7e7de6810e1b5$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $tjrHw$react
                 if (p[1] === "y") gridColumnEnd = true;
                 rules += p[0];
             }
-            rules += ' se131';
+            rules += ' se151';
             if (props.isInForm) {
-                if (!gridColumnStart) rules += ' z2mU131';
+                if (!gridColumnStart) rules += ' z2mU151';
             }
             if (props.isInForm) {
                 if (props.labelPosition === "side") {
-                    if (!gridColumnEnd) rules += ' yvoofG131';
+                    if (!gridColumnEnd) rules += ' yvoofG151';
                 }
             }
-            if (props.isInForm) rules += ' DLwlgod131';
+            if (props.isInForm) rules += ' DLwlgod151';
             else {
-                if (props.labelPosition === "side") rules += ' DPlN5qb131';
-                else if (props.labelPosition === "top") rules += ' DM8Mfn131';
+                if (props.labelPosition === "side") rules += ' DPlN5qb151';
+                else if (props.labelPosition === "top") rules += ' DM8Mfn151';
             }
-            if (props.labelPosition === "side") rules += ' EPlN5qb131';
-            else if (props.labelPosition === "top") rules += ' E4w1sLc131';
-            if (props.labelPosition === "side") rules += ' CbRM95c131';
-            else if (props.labelPosition === "top") rules += ' Cxaocre131';
+            if (props.labelPosition === "side") rules += ' EPlN5qb151';
+            else if (props.labelPosition === "top") rules += ' E4w1sLc151';
+            if (props.labelPosition === "side") rules += ' CbRM95c151';
+            else if (props.labelPosition === "top") rules += ' Cxaocre151';
             if (props.size === "XL") {
-                rules += ' -_6BNtrc-e131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-e151';
+                rules += ' vx151';
             } else if (props.size === "L") {
-                rules += ' -_6BNtrc-d131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-d151';
+                rules += ' vx151';
             } else if (props.size === "S") {
-                rules += ' -_6BNtrc-b131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-b151';
+                rules += ' vx151';
             } else if (props.size === "XS") {
-                rules += ' -_6BNtrc-a131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-a151';
+                rules += ' vx151';
             } else {
-                rules += ' -_6BNtrc-c131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-c151';
+                rules += ' vx151';
             }
-            rules += ' ea131';
-            rules += ' _Fd131';
-            rules += ' _FnuYUweb131';
-            if (props.size === "XL") rules += ' -BhX7R-Fz131';
-            else if (props.size === "L") rules += ' -BhX7R-Fv131';
-            else if (props.size === "S") rules += ' -BhX7R-Fp131';
-            else if (props.size === "XS") rules += ' -BhX7R-Fn131';
-            else rules += ' -BhX7R-Fx131';
-            rules += ' -AJjOLd-UVkF0Db131';
-            rules += ' qg131';
-            rules += ' __ca131';
+            rules += ' ea151';
+            rules += ' _Fd151';
+            rules += ' _FnuYUweb151';
+            if (props.size === "XL") rules += ' -BhX7R-Fz151';
+            else if (props.size === "L") rules += ' -BhX7R-Fv151';
+            else if (props.size === "S") rules += ' -BhX7R-Fp151';
+            else if (props.size === "XS") rules += ' -BhX7R-Fn151';
+            else rules += ' -BhX7R-Fx151';
+            rules += ' -AJjOLd-UVkF0Db151';
+            rules += ' qg151';
+            rules += ' __ca151';
             return rules;
         }({
             size: props.size,
@@ -224,32 +224,32 @@ function $cce7e7de6810e1b5$var$TextAreaInput() {
         placeholder: placeholder ?? ' ',
         className: function anonymous(props) {
             let rules = " ";
-            rules += ' Sd131';
-            rules += ' Rd131';
-            rules += ' Tu7Fubd131';
-            rules += ' Qu7Fubd131';
-            rules += ' MAyFGYc131';
-            rules += ' _oa131';
-            rules += ' g9131';
-            rules += ' p40ub4c131';
-            rules += ' pYFIK2bn131';
-            rules += ' pYFIK2blc131';
-            rules += ' u40ub4c131';
-            rules += ' v40ub4c131';
-            rules += ' x40ub4c131';
-            rules += ' _xa131';
-            rules += ' _F40ub4c131';
-            rules += ' _ub131';
-            rules += ' Na131';
-            rules += ' _Le131';
-            rules += ' _je131';
-            rules += ' _Qc131';
-            rules += ' _Nc131';
-            if (props.size === "XL") rules += ' -M_-Mk131';
-            else if (props.size === "L") rules += ' -M_-Mh131';
-            else if (props.size === "S") rules += ' -M_-Mg131';
-            else if (props.size === "XS") rules += ' -M_-Mf131';
-            else rules += ' -M_-Mi131';
+            rules += ' Sd151';
+            rules += ' Rd151';
+            rules += ' Tu7Fubd151';
+            rules += ' Qu7Fubd151';
+            rules += ' MAyFGYc151';
+            rules += ' _oa151';
+            rules += ' g9151';
+            rules += ' p40ub4c151';
+            rules += ' pYFIK2bn151';
+            rules += ' pYFIK2blc151';
+            rules += ' u40ub4c151';
+            rules += ' v40ub4c151';
+            rules += ' x40ub4c151';
+            rules += ' _xa151';
+            rules += ' _F40ub4c151';
+            rules += ' _ub151';
+            rules += ' Na151';
+            rules += ' _Le151';
+            rules += ' _je151';
+            rules += ' _Qc151';
+            rules += ' _Nc151';
+            if (props.size === "XL") rules += ' -M_-Mk151';
+            else if (props.size === "L") rules += ' -M_-Mh151';
+            else if (props.size === "S") rules += ' -M_-Mg151';
+            else if (props.size === "XS") rules += ' -M_-Mf151';
+            else rules += ' -M_-Mi151';
             return rules;
         }
     });

package/dist/private/TextField.css

@@ -1,218 +1,218 @@
 @layer _.a {
-  .Fd131 {
+  .Fd151 {
     height: auto;
   }
 
-  .se131 {
+  .se151 {
     display: grid;
   }
 
-  .z2mU131 {
+  .z2mU151 {
     grid-column-start: 1;
   }
 
-  .yvoofG131 {
+  .yvoofG151 {
     grid-column-end: span 2;
   }
 
-  .DM8Mfn131 {
+  .DM8Mfn151 {
     grid-template-columns: 1fr;
   }
 
-  .DPlN5qb131 {
+  .DPlN5qb151 {
     grid-template-columns: auto 1fr;
   }
 
-  .DLwlgod131 {
+  .DLwlgod151 {
     grid-template-columns: subgrid;
   }
 
-  .E4w1sLc131 {
+  .E4w1sLc151 {
     grid-template-rows: auto 1fr auto;
   }
 
-  .EPlN5qb131 {
+  .EPlN5qb151 {
     grid-template-rows: auto 1fr;
   }
 
-  .Cxaocre131 {
+  .Cxaocre151 {
     grid-template-areas: "label"
                          "input"
                          "helptext";
   }
 
-  .CbRM95c131 {
+  .CbRM95c151 {
     grid-template-areas: "label input"
                          "label helptext";
   }
 
-  .-_6BNtrc-c131 {
+  .-_6BNtrc-c151 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a131 {
+  .-_6BNtrc-a151 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b131 {
+  .-_6BNtrc-b151 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d131 {
+  .-_6BNtrc-d151 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e131 {
+  .-_6BNtrc-e151 {
     --fs: pow(1.125, 2);
   }
 
-  .vx131 {
+  .vx151 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .ea131 {
+  .ea151 {
     align-items: baseline;
   }
 
-  ._Fd131 {
+  ._Fd151 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .-BhX7R-Fx131 {
+  .-BhX7R-Fx151 {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fn131 {
+  .-BhX7R-Fn151 {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fp131 {
+  .-BhX7R-Fp151 {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fv131 {
+  .-BhX7R-Fv151 {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fz131 {
+  .-BhX7R-Fz151 {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-AJjOLd-UVkF0Db131 {
+  .-AJjOLd-UVkF0Db151 {
     --field-gap: calc((var(--field-height) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .qg131 {
+  .qg151 {
     column-gap: .75rem;
   }
 
-  .__ca131 {
+  .__ca151 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .Sd131 {
+  .Sd151 {
     padding-inline-start: 0;
   }
 
-  .Rd131 {
+  .Rd151 {
     padding-inline-end: 0;
   }
 
-  .Tu7Fubd131 {
+  .Tu7Fubd151 {
     padding-top: calc((var(--M) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .Qu7Fubd131 {
+  .Qu7Fubd151 {
     padding-bottom: calc((var(--M) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .MAyFGYc131 {
+  .MAyFGYc151 {
     min-height: var(--M);
   }
 
-  ._oa131 {
+  ._oa151 {
     box-sizing: border-box;
   }
 
-  .g9131 {
+  .g9151 {
     background-color: #0000;
   }
 
-  .p40ub4c131 {
+  .p40ub4c151 {
     color: inherit;
   }
 
-  .u40ub4c131 {
+  .u40ub4c151 {
     font-family: inherit;
   }
 
-  .v40ub4c131 {
+  .v40ub4c151 {
     font-size: inherit;
   }
 
-  .x40ub4c131 {
+  .x40ub4c151 {
     font-weight: inherit;
   }
 
-  ._xa131 {
+  ._xa151 {
     font-synthesis-weight: none;
   }
 
-  ._F40ub4c131 {
+  ._F40ub4c151 {
     line-height: inherit;
   }
 
-  ._ub131 {
+  ._ub151 {
     flex-grow: 1;
   }
 
-  .Na131 {
+  .Na151 {
     min-width: 0;
   }
 
-  ._Le131 {
+  ._Le151 {
     outline-style: none;
   }
 
-  ._je131 {
+  ._je151 {
     border-style: none;
   }
 
-  ._Qc131 {
+  ._Qc151 {
     resize: none;
   }
 
-  ._Nc131 {
+  ._Nc151 {
     overflow-x: hidden;
   }
 
-  .-M_-Mi131 {
+  .-M_-Mi151 {
     --M: calc(2rem * var(--s2-scale));
   }
 
-  .-M_-Mf131 {
+  .-M_-Mf151 {
     --M: calc(1.25rem * var(--s2-scale));
   }
 
-  .-M_-Mg131 {
+  .-M_-Mg151 {
     --M: calc(1.5rem * var(--s2-scale));
   }
 
-  .-M_-Mh131 {
+  .-M_-Mh151 {
     --M: calc(2.5rem * var(--s2-scale));
   }
 
-  .-M_-Mk131 {
+  .-M_-Mk151 {
     --M: calc(3rem * var(--s2-scale));
   }
 }
 
 @layer _.b {
-  ._FnuYUweb131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb151:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 
-  .pYFIK2bn131::placeholder {
+  .pYFIK2bn151::placeholder {
     color: light-dark(#717171, #8a8a8a);
   }
 }
@@ -221,7 +221,7 @@
 
 @layer _.c.l {
   @media (forced-colors: active) {
-    .pYFIK2blc131::placeholder {
+    .pYFIK2blc151::placeholder {
       color: graytext;
     }
   }