@react-spectrum/s2 3.0.0-nightly-fd7075c5f-250128 → 3.0.0-nightly-e3ed3c7f6-250130

package/dist/Field.css.map

@@ -1 +1 @@
-{"mappings":"AC2EiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBiC;;;;EAgC9B;;;;EAAA;;;;EAyBK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwEuB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8DH;;;;EAAA;;;;EAWF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7PD;EAoLM;;;;EAAA;;;;;AA3J2B;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IA2J3B;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAyEL;;;;;;AApOgC;EAAA;IAAA;;;;IAyDzB;;;;IAAA;;;;IAAA;;;;IAgKL;;;;;;AAhKK;EAAA;IAAA","sources":["18dc2c1262434547","packages/@react-spectrum/s2/src/Field.tsx"],"sourcesContent":["@import \"5451fbb197e5f742\";\n@import \"4c96520903762dec\";\n@import \"dec1ed3fcae5e2a0\";\n@import \"7f2f9d36b130a0fc\";\n@import \"d78be91638043334\";\n@import \"1287e36439fa04a9\";\n@import \"ae2e3271ad92acb6\";\n@import \"657c7598b6083861\";\n@import \"227d65898b7fdc0f\";\n@import \"312761f7202cddfd\";\n@import \"bf76db767f0fbbad\";\n","/*\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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  size?: 'S' | 'M' | 'L' | 'XL',\n  necessityIndicator?: NecessityIndicator,\n  labelAlign?: Alignment,\n  labelPosition?: 'top' | 'side',\n  includeNecessityIndicatorInAccessibilityName?: boolean,\n  staticColor?: 'white' | 'black' | 'auto',\n  contextualHelp?: ReactNode,\n  isQuiet?: boolean,\n  children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' &&\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n            }\n            {necessityIndicator === 'label' &&\n              /* The necessity label is hidden to screen readers if the field is required because\n              * aria-required is set on the field in that case. That will already be announced,\n              * so no need to duplicate it here. If optional, we do want it to be announced here.\n              */\n              <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n                {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n              </span>\n            }\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  children?: ReactNode,\n  styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...fieldInput(),\n  display: 'flex',\n  alignItems: 'center',\n  height: 'control',\n  boxSizing: 'border-box',\n  paddingX: 'edge-to-text',\n  font: 'control',\n  borderRadius: 'control',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    isInvalid: 'negative',\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <Group\n      ref={ref}\n      {...props}\n      onPointerDown={(e) => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      onPointerUp={e => {\n        if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n        fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n        props.styles\n      )} />\n  );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(style({\n        padding: 0,\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        flexGrow: 1,\n        flexShrink: 1,\n        minWidth: 0,\n        width: 'full',\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        truncate: true\n      }), styles)} />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  isDisabled?: boolean,\n  isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode,\n  showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative',\n    isDisabled: 'disabled'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n        {props.showErrorIcon &&\n          <CenterBaseline>\n            <AlertIcon />\n          </CenterBaseline>\n        }\n        <span>{children || validationErrors.join(' ')}</span>\n      </>))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}) {\n  return (\n    <Provider\n      values={[\n        [IconContext, {\n          render: centerBaseline({\n            slot: 'icon',\n            styles: style({\n              order: 0,\n              flexShrink: 0,\n              '--iconPrimary': {\n                type: 'fill',\n                value: {\n                  default: 'negative',\n                  forcedColors: 'ButtonText'\n                }\n              }\n            })}),\n          styles: style({\n            size: fontRelative(20),\n            marginStart: 'text-to-visual',\n            marginEnd: fontRelative(-2),\n            flexShrink: 0\n          })\n        }]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.css.map"}
+{"mappings":"AC2EiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBiC;;;;EAgC9B;;;;EAAA;;;;EAyBK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwEuB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8DH;;;;EAAA;;;;EAWF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7PD;EAoLM;;;;EAAA;;;;;AA3J2B;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IA2J3B;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAyEL;;;;;;AApOgC;EAAA;IAAA;;;;IAyDzB;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAgKL;;;;;;AAhKK;EAAA;IAAA","sources":["18dc2c1262434547","packages/@react-spectrum/s2/src/Field.tsx"],"sourcesContent":["@import \"5451fbb197e5f742\";\n@import \"4c96520903762dec\";\n@import \"dec1ed3fcae5e2a0\";\n@import \"7f2f9d36b130a0fc\";\n@import \"d78be91638043334\";\n@import \"1287e36439fa04a9\";\n@import \"ae2e3271ad92acb6\";\n@import \"657c7598b6083861\";\n@import \"227d65898b7fdc0f\";\n@import \"312761f7202cddfd\";\n@import \"bf76db767f0fbbad\";\n","/*\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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  size?: 'S' | 'M' | 'L' | 'XL',\n  necessityIndicator?: NecessityIndicator,\n  labelAlign?: Alignment,\n  labelPosition?: 'top' | 'side',\n  includeNecessityIndicatorInAccessibilityName?: boolean,\n  staticColor?: 'white' | 'black' | 'auto',\n  contextualHelp?: ReactNode,\n  isQuiet?: boolean,\n  children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' &&\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n            }\n            {necessityIndicator === 'label' &&\n              /* The necessity label is hidden to screen readers if the field is required because\n              * aria-required is set on the field in that case. That will already be announced,\n              * so no need to duplicate it here. If optional, we do want it to be announced here.\n              */\n              <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n                {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n              </span>\n            }\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  children?: ReactNode,\n  styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...fieldInput(),\n  display: 'flex',\n  alignItems: 'center',\n  height: 'control',\n  boxSizing: 'border-box',\n  paddingX: 'edge-to-text',\n  font: 'control',\n  borderRadius: 'control',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    isInvalid: 'negative',\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <Group\n      ref={ref}\n      {...props}\n      onPointerDown={(e) => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      onPointerUp={e => {\n        if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n        fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n        props.styles\n      )} />\n  );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(style({\n        padding: 0,\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        flexGrow: 1,\n        flexShrink: 1,\n        minWidth: 0,\n        width: 'full',\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        truncate: true\n      }), styles)} />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  isDisabled?: boolean,\n  isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode,\n  showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative',\n    isDisabled: 'disabled'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n        {props.showErrorIcon &&\n          <CenterBaseline>\n            <AlertIcon />\n          </CenterBaseline>\n        }\n        <span>{children || validationErrors.join(' ')}</span>\n      </>))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}) {\n  return (\n    <Provider\n      values={[\n        [IconContext, {\n          render: centerBaseline({\n            slot: 'icon',\n            styles: style({\n              order: 0,\n              flexShrink: 0,\n              '--iconPrimary': {\n                type: 'fill',\n                value: {\n                  default: 'negative',\n                  forcedColors: 'ButtonText'\n                }\n              }\n            })}),\n          styles: style({\n            size: fontRelative(20),\n            marginStart: 'text-to-visual',\n            marginEnd: fontRelative(-2),\n            flexShrink: 0\n          })\n        }]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.css.map"}

package/dist/Field.mjs

@@ -51,16 +51,16 @@ const $9afd80978c252040$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $7A6HT$forwa
     return /*#__PURE__*/ (0, $7A6HT$jsxs)("div", {
         className: function anonymous(props) {
             let rules = " .";
-            rules += ' __b-hr3t0p';
-            rules += ' __c-hr3t0p';
-            rules += ' __d-hr3t0p';
             rules += ' __e-hr3t0p';
-            rules += ' _0c';
-            if (props.labelAlign === "end") rules += ' _kc';
-            else if (props.labelAlign === "start") rules += ' _ka';
-            if (props.labelPosition === "top") rules += ' F-1inj1bc';
-            if (props.isQuiet) rules += ' __na';
-            else if (props.labelPosition === "top") rules += ' __ne';
+            rules += ' __f-hr3t0p';
+            rules += ' __g-hr3t0p';
+            rules += ' __h-hr3t0p';
+            rules += ' _3c';
+            if (props.labelAlign === "end") rules += ' _nc';
+            else if (props.labelAlign === "start") rules += ' _na';
+            if (props.labelPosition === "top") rules += ' I-1inj1bc';
+            if (props.isQuiet) rules += ' __qa';
+            else if (props.labelPosition === "top") rules += ' __qe';
             return rules;
         }({
             labelAlign: labelAlign,
@@ -74,33 +74,33 @@ const $9afd80978c252040$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $7A6HT$forwa
                 style: UNSAFE_style,
                 className: UNSAFE_className + (0, $feb886035e0d4633$export$e618dc39ac9ad607)(function anonymous(props) {
                     let rules = " .";
-                    rules += ' _d-bc1l9oh';
-                    rules += ' _d-1uotwbwg';
-                    rules += ' _d-eo0c6sf';
-                    rules += ' _d-enzzrge';
-                    rules += ' _d-enzykdd';
-                    rules += ' _d-enzwzjc';
-                    rules += ' _d-enzrfpb';
-                    rules += ' _da';
+                    rules += ' _g-bc1l9oh';
+                    rules += ' _g-1uotwbwg';
+                    rules += ' _g-eo0c6sf';
+                    rules += ' _g-enzzrge';
+                    rules += ' _g-enzykdd';
+                    rules += ' _g-enzwzjc';
+                    rules += ' _g-enzrfpb';
+                    rules += ' _ga';
                     if (props.size === "XL") {
-                        rules += ' _ebj';
-                        rules += ' _ei';
+                        rules += ' _hbj';
+                        rules += ' _hi';
                     } else if (props.size === "L") {
-                        rules += ' _ebh';
-                        rules += ' _eg';
+                        rules += ' _hbh';
+                        rules += ' _hg';
                     } else if (props.size === "S") {
-                        rules += ' _ebd';
-                        rules += ' _ec';
+                        rules += ' _hbd';
+                        rules += ' _hc';
                     } else if (props.size === "XS") {
-                        rules += ' _ebb';
-                        rules += ' _ea';
+                        rules += ' _hbb';
+                        rules += ' _ha';
                     } else {
-                        rules += ' _ebf';
-                        rules += ' _ee';
+                        rules += ' _hbf';
+                        rules += ' _he';
                     }
-                    rules += ' _fb';
-                    rules += ' _g-1x99dlob';
-                    rules += ' _ga';
+                    rules += ' _ib';
+                    rules += ' _j-1x99dlob';
+                    rules += ' _ja';
                     rules += ' aa_____K';
                     if (props.isStaticColor) rules += ' a_____G';
                     else if (props.isDisabled) rules += ' aj';
@@ -110,7 +110,7 @@ const $9afd80978c252040$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $7A6HT$forwa
                         else if (props.isHovered) rules += ' an';
                         else rules += ' am';
                     }
-                    rules += ' __Ib';
+                    rules += ' __Lb';
                     return rules;
                 }({
                     labelPosition: labelPosition,
@@ -121,12 +121,12 @@ const $9afd80978c252040$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $7A6HT$forwa
                 children: [
                     props.children,
                     (isRequired || necessityIndicator === 'label') && /*#__PURE__*/ (0, $7A6HT$jsxs)("span", {
-                        className: " _qb",
+                        className: " _tb",
                         children: [
                             "\xa0",
                             necessityIndicator === 'icon' && /*#__PURE__*/ (0, $7A6HT$jsx)((0, $8373af657584cab2$export$2e2bcd8739ae039), {
                                 size: size === 'S' ? 'M' : size,
-                                className: " -rwx0fg_e-b",
+                                className: " -rwx0fg_d-b",
                                 "aria-label": includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined
                             }),
                             necessityIndicator === 'label' && /* The necessity label is hidden to screen readers if the field is required because
@@ -141,11 +141,11 @@ const $9afd80978c252040$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $7A6HT$forwa
                 ]
             }),
             contextualHelp && /*#__PURE__*/ (0, $7A6HT$jsxs)("span", {
-                className: " _qb",
+                className: " _tb",
                 children: [
                     "\xa0",
                     /*#__PURE__*/ (0, $7A6HT$jsx)((0, $1f4b04be3f24aae3$export$768dac55bb57081d), {
-                        styles: " _0e ko",
+                        styles: " _3e jo",
                         children: /*#__PURE__*/ (0, $7A6HT$jsx)((0, $8e176595bc49ca3f$export$41b9afaaba473494).Provider, {
                             value: {
                                 id: contextualHelpId,
@@ -162,61 +162,61 @@ const $9afd80978c252040$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $7A6HT$forwa
 });
 const $9afd80978c252040$var$fieldGroupStyles = function anonymous(props) {
     let rules = " .";
-    if (props.isFocusVisible) rules += ' _Mb';
-    else rules += ' _Ma';
-    rules += ' da_____M';
-    rules += ' dx';
-    rules += ' _Oc';
-    rules += ' _N-3t1z';
-    rules += ' __b-g2ozi1';
-    rules += ' __c-g2ozi1';
-    rules += ' __d-g2ozi1';
+    if (props.isFocusVisible) rules += ' _Pb';
+    else rules += ' _Pa';
+    rules += ' ca_____M';
+    rules += ' cx';
+    rules += ' _Rc';
+    rules += ' _Q-3t1z';
     rules += ' __e-g2ozi1';
-    if (props.size === "XL") rules += ' qj';
-    else if (props.size === "L") rules += ' qi';
-    else if (props.size === "S") rules += ' qh';
-    else if (props.size === "XS") rules += ' qg';
-    else rules += ' qf';
-    if (props.isQuiet) rules += ' __na';
-    else rules += ' __n-1s8glxue';
-    if (props.size === "XL") rules += ' -usygro_l-____g';
-    else if (props.size === "L") rules += ' -usygro_l-___0';
-    else if (props.size === "S") rules += ' -usygro_l-___u';
-    else rules += ' -usygro_l-___K';
-    rules += ' m-rwozxi';
-    rules += ' _0d';
-    rules += ' _2c';
-    rules += ' k-375toq';
-    rules += ' __oa';
-    rules += ' C-375tnm';
-    rules += ' D-375tnn';
-    rules += ' _d-bc1l9oh';
-    rules += ' _d-1uotwbwg';
-    rules += ' _d-eo0c6sf';
-    rules += ' _d-enzzrge';
-    rules += ' _d-enzykdd';
-    rules += ' _d-enzwzjc';
-    rules += ' _d-enzrfpb';
-    rules += ' _da';
+    rules += ' __f-g2ozi1';
+    rules += ' __g-g2ozi1';
+    rules += ' __h-g2ozi1';
+    if (props.size === "XL") rules += ' pj';
+    else if (props.size === "L") rules += ' pi';
+    else if (props.size === "S") rules += ' ph';
+    else if (props.size === "XS") rules += ' pg';
+    else rules += ' pf';
+    if (props.isQuiet) rules += ' __qa';
+    else rules += ' __q-1s8glxue';
+    if (props.size === "XL") rules += ' -usygro_k-____g';
+    else if (props.size === "L") rules += ' -usygro_k-___0';
+    else if (props.size === "S") rules += ' -usygro_k-___u';
+    else rules += ' -usygro_k-___K';
+    rules += ' l-rwozxi';
+    rules += ' _3d';
+    rules += ' _5c';
+    rules += ' j-375top';
+    rules += ' __ra';
+    rules += ' F-375tnp';
+    rules += ' G-375tnq';
+    rules += ' _g-bc1l9oh';
+    rules += ' _g-1uotwbwg';
+    rules += ' _g-eo0c6sf';
+    rules += ' _g-enzzrge';
+    rules += ' _g-enzykdd';
+    rules += ' _g-enzwzjc';
+    rules += ' _g-enzrfpb';
+    rules += ' _ga';
     if (props.size === "XL") {
-        rules += ' _ebj';
-        rules += ' _ei';
+        rules += ' _hbj';
+        rules += ' _hi';
     } else if (props.size === "L") {
-        rules += ' _ebh';
-        rules += ' _eg';
+        rules += ' _hbh';
+        rules += ' _hg';
     } else if (props.size === "S") {
-        rules += ' _ebd';
-        rules += ' _ec';
+        rules += ' _hbd';
+        rules += ' _hc';
     } else if (props.size === "XS") {
-        rules += ' _ebb';
-        rules += ' _ea';
+        rules += ' _hbb';
+        rules += ' _ha';
     } else {
-        rules += ' _ebf';
-        rules += ' _ee';
+        rules += ' _hbf';
+        rules += ' _he';
     }
-    rules += ' _fb';
-    rules += ' _g-1x99dlob';
-    rules += ' _ga';
+    rules += ' _ib';
+    rules += ' _j-1x99dlob';
+    rules += ' _ja';
     if (props.isDisabled) rules += ' aj';
     else {
         if (props.isPressed) rules += ' ao';
@@ -224,48 +224,102 @@ const $9afd80978c252040$var$fieldGroupStyles = function anonymous(props) {
         else if (props.isHovered) rules += ' ao';
         else rules += ' an';
     }
-    rules += ' _wh';
-    rules += ' _xh';
-    rules += ' _yh';
     rules += ' _zh';
+    rules += ' _Ah';
+    rules += ' _Bh';
+    rules += ' _Ch';
+    rules += ' tc';
     rules += ' uc';
-    rules += ' vc';
+    rules += ' r-375tox';
     rules += ' s-375toy';
-    rules += ' t-375toz';
-    rules += ' wa';
-    rules += ' _Pa';
-    rules += ' _R-375x7f';
+    rules += ' za';
     rules += ' _Sa';
+    rules += ' _U-375x7f';
+    rules += ' _Va';
     if (props.isDisabled) {
-        rules += ' ca_____O';
-        rules += ' ci';
+        rules += ' xa_____O';
+        rules += ' xi';
     } else if (props.isFocusWithin) {
-        rules += ' ca_____M';
-        if (props.isInvalid) rules += ' cP';
-        else rules += ' co';
+        rules += ' xa_____M';
+        if (props.isInvalid) rules += ' xP';
+        else rules += ' xo';
     } else if (props.isInvalid) {
-        if (props.isPressed) rules += ' cQ';
-        else if (props.isFocusVisible) rules += ' cP';
-        else if (props.isHovered) rules += ' cP';
-        else rules += ' cO';
+        if (props.isPressed) rules += ' xQ';
+        else if (props.isFocusVisible) rules += ' xP';
+        else if (props.isHovered) rules += ' xP';
+        else rules += ' xO';
     } else {
-        if (props.isPressed) rules += ' cj';
-        else if (props.isFocusVisible) rules += ' cj';
-        else if (props.isHovered) rules += ' cj';
-        else rules += ' ci';
+        if (props.isPressed) rules += ' xj';
+        else if (props.isFocusVisible) rules += ' xj';
+        else if (props.isHovered) rules += ' xj';
+        else rules += ' xi';
+    }
+    if (props.isDisabled) {
+        rules += ' ya_____O';
+        rules += ' yi';
+    } else if (props.isFocusWithin) {
+        rules += ' ya_____M';
+        if (props.isInvalid) rules += ' yP';
+        else rules += ' yo';
+    } else if (props.isInvalid) {
+        if (props.isPressed) rules += ' yQ';
+        else if (props.isFocusVisible) rules += ' yP';
+        else if (props.isHovered) rules += ' yP';
+        else rules += ' yO';
+    } else {
+        if (props.isPressed) rules += ' yj';
+        else if (props.isFocusVisible) rules += ' yj';
+        else if (props.isHovered) rules += ' yj';
+        else rules += ' yi';
+    }
+    if (props.isDisabled) {
+        rules += ' va_____O';
+        rules += ' vi';
+    } else if (props.isFocusWithin) {
+        rules += ' va_____M';
+        if (props.isInvalid) rules += ' vP';
+        else rules += ' vo';
+    } else if (props.isInvalid) {
+        if (props.isPressed) rules += ' vQ';
+        else if (props.isFocusVisible) rules += ' vP';
+        else if (props.isHovered) rules += ' vP';
+        else rules += ' vO';
+    } else {
+        if (props.isPressed) rules += ' vj';
+        else if (props.isFocusVisible) rules += ' vj';
+        else if (props.isHovered) rules += ' vj';
+        else rules += ' vi';
+    }
+    if (props.isDisabled) {
+        rules += ' wa_____O';
+        rules += ' wi';
+    } else if (props.isFocusWithin) {
+        rules += ' wa_____M';
+        if (props.isInvalid) rules += ' wP';
+        else rules += ' wo';
+    } else if (props.isInvalid) {
+        if (props.isPressed) rules += ' wQ';
+        else if (props.isFocusVisible) rules += ' wP';
+        else if (props.isHovered) rules += ' wP';
+        else rules += ' wO';
+    } else {
+        if (props.isPressed) rules += ' wj';
+        else if (props.isFocusVisible) rules += ' wj';
+        else if (props.isHovered) rules += ' wj';
+        else rules += ' wi';
     }
     rules += ' bd';
-    if (props.isDisabled) rules += ' __Ib';
-    else rules += ' __Ie';
-    rules += ' -_375tnm_C-I';
-    rules += ' -_375tnn_D-I';
+    if (props.isDisabled) rules += ' __Lb';
+    else rules += ' __Le';
+    rules += ' -_375tnp_F-I';
+    rules += ' -_375tnq_G-I';
+    rules += ' -_375tox_r-c';
     rules += ' -_375toy_s-c';
-    rules += ' -_375toz_t-c';
-    if (props.size === "XL") rules += ' -_375toq_k-j';
-    else if (props.size === "L") rules += ' -_375toq_k-i';
-    else if (props.size === "S") rules += ' -_375toq_k-h';
-    else if (props.size === "XS") rules += ' -_375toq_k-g';
-    else rules += ' -_375toq_k-f';
+    if (props.size === "XL") rules += ' -_375top_j-j';
+    else if (props.size === "L") rules += ' -_375top_j-i';
+    else if (props.size === "S") rules += ' -_375top_j-h';
+    else if (props.size === "XS") rules += ' -_375top_j-g';
+    else rules += ' -_375top_j-f';
     return rules;
 };
 const $9afd80978c252040$export$f0fe469072bc6950 = /*#__PURE__*/ (0, $7A6HT$forwardRef)(function FieldGroup(props, ref) {
@@ -298,48 +352,48 @@ const $9afd80978c252040$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $7A6HT$forwa
         ...otherProps,
         ref: ref,
         style: UNSAFE_style,
-        className: UNSAFE_className + (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" Ea Fa Ca Da ba a-17zqamw _d-17zqamw _e-17zqamw _f-17zqamw __a-3t1y _9-3t1y qo lb _Ma wf __wb __xb _na _qb", styles)
+        className: UNSAFE_className + (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" Ha Ia Fa Ga ba a-17zqamw _g-17zqamw _h-17zqamw _i-17zqamw __d-3t1y __c-3t1y po kb _Pa zf __zb __Ab _qa _tb", styles)
     });
 });
 const $9afd80978c252040$var$helpTextStyles = function anonymous(props) {
     let rules = " .";
-    rules += ' __b-1le9d6f';
-    rules += ' __c-1le9d6f';
-    rules += ' __d-1le9d6f';
     rules += ' __e-1le9d6f';
-    rules += ' _0d';
-    rules += ' _2d';
+    rules += ' __f-1le9d6f';
+    rules += ' __g-1le9d6f';
+    rules += ' __h-1le9d6f';
+    rules += ' _3d';
+    rules += ' _5d';
+    rules += ' hbH';
+    rules += ' hG';
     rules += ' ibH';
     rules += ' iG';
-    rules += ' jbH';
-    rules += ' jG';
-    rules += ' _d-bc1l9oh';
-    rules += ' _d-1uotwbwg';
-    rules += ' _d-eo0c6sf';
-    rules += ' _d-enzzrge';
-    rules += ' _d-enzykdd';
-    rules += ' _d-enzwzjc';
-    rules += ' _d-enzrfpb';
-    rules += ' _da';
+    rules += ' _g-bc1l9oh';
+    rules += ' _g-1uotwbwg';
+    rules += ' _g-eo0c6sf';
+    rules += ' _g-enzzrge';
+    rules += ' _g-enzykdd';
+    rules += ' _g-enzwzjc';
+    rules += ' _g-enzrfpb';
+    rules += ' _ga';
     if (props.size === "XL") {
-        rules += ' _ebj';
-        rules += ' _ei';
+        rules += ' _hbj';
+        rules += ' _hi';
     } else if (props.size === "L") {
-        rules += ' _ebh';
-        rules += ' _eg';
+        rules += ' _hbh';
+        rules += ' _hg';
     } else if (props.size === "S") {
-        rules += ' _ebd';
-        rules += ' _ec';
+        rules += ' _hbd';
+        rules += ' _hc';
     } else if (props.size === "XS") {
-        rules += ' _ebb';
-        rules += ' _ea';
+        rules += ' _hbb';
+        rules += ' _ha';
     } else {
-        rules += ' _ebf';
-        rules += ' _ee';
+        rules += ' _hbf';
+        rules += ' _he';
     }
-    rules += ' _fb';
-    rules += ' _g-1x99dlob';
-    rules += ' _ga';
+    rules += ' _ib';
+    rules += ' _j-1x99dlob';
+    rules += ' _ja';
     if (props.isDisabled) rules += ' aj';
     else if (props.isInvalid) {
         if (props.isPressed) rules += ' aP';
@@ -352,11 +406,11 @@ const $9afd80978c252040$var$helpTextStyles = function anonymous(props) {
         else if (props.isHovered) rules += ' an';
         else rules += ' am';
     }
-    rules += ' -rwx0fg_e-b';
-    rules += ' __ne';
-    rules += ' E-1inj1bc';
-    if (props.isDisabled) rules += ' __Ib';
-    else rules += ' __Ie';
+    rules += ' -rwx0fg_d-b';
+    rules += ' __qe';
+    rules += ' H-1inj1bc';
+    if (props.isDisabled) rules += ' __Lb';
+    else rules += ' __Le';
     return rules;
 };
 function $9afd80978c252040$export$a67c0bc59081311a(props) {
@@ -399,9 +453,9 @@ function $9afd80978c252040$export$bda0d075e0e342c9(props) {
                 {
                     render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                         slot: 'icon',
-                        styles: " __B-3t1x _9-3t1x -rwx0fg_e-e -rwx0fg_e-a_____8"
+                        styles: " __E-3t1x __c-3t1x -rwx0fg_d-e -rwx0fg_d-a_____8"
                     }),
-                    styles: " l-1sthc3k k-1sthc3k yG ybH z-177861o _9-3t1x"
+                    styles: " k-1sthc3k j-1sthc3k BG BbH C-177861o __c-3t1x"
                 }
             ]
         ],

package/dist/Field.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  size?: 'S' | 'M' | 'L' | 'XL',\n  necessityIndicator?: NecessityIndicator,\n  labelAlign?: Alignment,\n  labelPosition?: 'top' | 'side',\n  includeNecessityIndicatorInAccessibilityName?: boolean,\n  staticColor?: 'white' | 'black' | 'auto',\n  contextualHelp?: ReactNode,\n  isQuiet?: boolean,\n  children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' &&\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n            }\n            {necessityIndicator === 'label' &&\n              /* The necessity label is hidden to screen readers if the field is required because\n              * aria-required is set on the field in that case. That will already be announced,\n              * so no need to duplicate it here. If optional, we do want it to be announced here.\n              */\n              <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n                {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n              </span>\n            }\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  children?: ReactNode,\n  styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...fieldInput(),\n  display: 'flex',\n  alignItems: 'center',\n  height: 'control',\n  boxSizing: 'border-box',\n  paddingX: 'edge-to-text',\n  font: 'control',\n  borderRadius: 'control',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    isInvalid: 'negative',\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <Group\n      ref={ref}\n      {...props}\n      onPointerDown={(e) => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      onPointerUp={e => {\n        if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n        fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n        props.styles\n      )} />\n  );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(style({\n        padding: 0,\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        flexGrow: 1,\n        flexShrink: 1,\n        minWidth: 0,\n        width: 'full',\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        truncate: true\n      }), styles)} />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  isDisabled?: boolean,\n  isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode,\n  showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative',\n    isDisabled: 'disabled'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n        {props.showErrorIcon &&\n          <CenterBaseline>\n            <AlertIcon />\n          </CenterBaseline>\n        }\n        <span>{children || validationErrors.join(' ')}</span>\n      </>))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}) {\n  return (\n    <Provider\n      values={[\n        [IconContext, {\n          render: centerBaseline({\n            slot: 'icon',\n            styles: style({\n              order: 0,\n              flexShrink: 0,\n              '--iconPrimary': {\n                type: 'fill',\n                value: {\n                  default: 'negative',\n                  forcedColors: 'ButtonText'\n                }\n              }\n            })}),\n          styles: style({\n            size: fontRelative(20),\n            marginStart: 'text-to-visual',\n            marginEnd: fontRelative(-2),\n            flexShrink: 0\n          })\n        }]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  size?: 'S' | 'M' | 'L' | 'XL',\n  necessityIndicator?: NecessityIndicator,\n  labelAlign?: Alignment,\n  labelPosition?: 'top' | 'side',\n  includeNecessityIndicatorInAccessibilityName?: boolean,\n  staticColor?: 'white' | 'black' | 'auto',\n  contextualHelp?: ReactNode,\n  isQuiet?: boolean,\n  children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' &&\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n            }\n            {necessityIndicator === 'label' &&\n              /* The necessity label is hidden to screen readers if the field is required because\n              * aria-required is set on the field in that case. That will already be announced,\n              * so no need to duplicate it here. If optional, we do want it to be announced here.\n              */\n              <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n                {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n              </span>\n            }\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  children?: ReactNode,\n  styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...fieldInput(),\n  display: 'flex',\n  alignItems: 'center',\n  height: 'control',\n  boxSizing: 'border-box',\n  paddingX: 'edge-to-text',\n  font: 'control',\n  borderRadius: 'control',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    isInvalid: 'negative',\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <Group\n      ref={ref}\n      {...props}\n      onPointerDown={(e) => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      onPointerUp={e => {\n        if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n        fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n        props.styles\n      )} />\n  );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(style({\n        padding: 0,\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        flexGrow: 1,\n        flexShrink: 1,\n        minWidth: 0,\n        width: 'full',\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        truncate: true\n      }), styles)} />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  isDisabled?: boolean,\n  isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode,\n  showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative',\n    isDisabled: 'disabled'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n        {props.showErrorIcon &&\n          <CenterBaseline>\n            <AlertIcon />\n          </CenterBaseline>\n        }\n        <span>{children || validationErrors.join(' ')}</span>\n      </>))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}) {\n  return (\n    <Provider\n      values={[\n        [IconContext, {\n          render: centerBaseline({\n            slot: 'icon',\n            styles: style({\n              order: 0,\n              flexShrink: 0,\n              '--iconPrimary': {\n                type: 'fill',\n                value: {\n                  default: 'negative',\n                  forcedColors: 'ButtonText'\n                }\n              }\n            })}),\n          styles: style({\n            size: fontRelative(20),\n            marginStart: 'text-to-visual',\n            marginEnd: fontRelative(-2),\n            flexShrink: 0\n          })\n        }]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.mjs.map"}