@react-spectrum/s2 1.5.0 → 1.5.1

package/dist/private/Field.cjs.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} from 'react-aria-components/composeRenderProps';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {\n  control,\n  controlFont,\n  fieldInput,\n  fieldLabel,\n  StyleProps,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {FieldError, FieldErrorProps} from 'react-aria-components/FieldError';\nimport {ForwardedRef, forwardRef, ReactNode, useContext} from 'react';\nimport {getEventTarget} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {Group, GroupProps} from 'react-aria-components/Group';\nimport {IconContext} from './Icon';\nimport {\n  InputContext,\n  Input as RACInput,\n  InputProps as RACInputProps\n} from 'react-aria-components/Input';\nimport intlMessages from '../intl/*.json';\nimport {Label, LabelProps} from 'react-aria-components/Label';\nimport {mergeStyles} from '../style/runtime';\nimport {Provider} from 'react-aria-components/slots';\nimport {StyleString} from '../style/types';\nimport {Text} from 'react-aria-components/Text';\nimport {useDOMRef} from './useDOMRef';\nimport {useId} from 'react-aria/useId';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\ninterface FieldLabelProps\n  extends Omit<LabelProps, 'className' | 'style' | 'render' | '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(\n  props: FieldLabelProps,\n  ref: DOMRef<HTMLLabelElement>\n) {\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={\n          UNSAFE_className +\n          mergeStyles(\n            style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}),\n            props.styles\n          )\n        }>\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={\n                  includeNecessityIndicatorInAccessibilityName\n                    ? stringFormatter.format('label.(required)')\n                    : undefined\n                }\n                aria-hidden={!includeNecessityIndicatorInAccessibilityName}\n              />\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\n                aria-hidden={\n                  !includeNecessityIndicatorInAccessibilityName ? isRequired : undefined\n                }>\n                {isRequired\n                  ? stringFormatter.format('label.(required)')\n                  : 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\n                  ? `${labelProps.id} ${contextualHelpId}`\n                  : 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\n  extends Omit<GroupProps, 'className' | 'style' | 'render' | 'children' | 'prefix'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL';\n  children: ReactNode;\n  styles?: StyleString;\n  shouldTurnOffFocusRing?: boolean;\n  prefix?: ReactNode;\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...control({shape: 'default'}),\n  ...fieldInput(),\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    forcedColors: 'ButtonBorder',\n    isInvalid: {\n      default: baseColor('negative'),\n      forcedColors: 'Mark'\n    },\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: {\n    default: 'gray-25',\n    forcedColors: 'Field'\n  },\n  color: {\n    default: baseColor('neutral'),\n    forcedColors: 'ButtonText',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(\n  props: FieldGroupProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  let {children, prefix, shouldTurnOffFocusRing, ...otherProps} = props;\n  let ctx = useContext(InputContext);\n  let prefixId = useId();\n  let newAriaLabelledby = ctx?.['aria-labelledby'];\n  if (prefix) {\n    newAriaLabelledby = newAriaLabelledby ? `${newAriaLabelledby} ${prefixId}` : prefixId;\n  }\n  return (\n    <Group\n      ref={ref}\n      {...otherProps}\n      onPointerDown={e => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (\n          e.pointerType === 'mouse' &&\n          !(getEventTarget(e) as Element).closest('button,input,textarea,[role=\"button\"]')\n        ) {\n          e.preventDefault();\n          (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();\n        }\n      }}\n      onTouchEnd={e => {\n        let target = getEventTarget(e) as HTMLElement;\n        if (!target.isContentEditable && !target.closest('button,input,textarea,[role=\"button\"]')) {\n          e.preventDefault();\n          (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        ' ' +\n        centerBaselineBefore +\n        mergeStyles(\n          fieldGroupStyles({\n            ...renderProps,\n            isFocusWithin: shouldTurnOffFocusRing ? false : renderProps.isFocusWithin,\n            isFocusVisible: shouldTurnOffFocusRing ? false : renderProps.isFocusVisible,\n            size: props.size || 'M'\n          }),\n          props.styles\n        )\n      }>\n      {props.prefix ? (\n        <Provider\n          values={[\n            [\n              IconContext,\n              {\n                styles: style({\n                  size: fontRelative(20),\n                  '--iconPrimary': {type: 'fill', value: 'currentColor'}\n                })\n              }\n            ]\n          ]}>\n          <CenterBaseline\n            id={prefixId}\n            styles={style({\n              color: 'gray-600',\n              flexShrink: 0,\n              marginEnd: 'text-to-visual'\n            })}>\n            {props.prefix}\n          </CenterBaseline>\n        </Provider>\n      ) : null}\n      <InputContext.Consumer>\n        {ctx => (\n          <InputContext.Provider value={{...ctx, 'aria-labelledby': newAriaLabelledby}}>\n            {children}\n          </InputContext.Provider>\n        )}\n      </InputContext.Consumer>\n    </Group>\n  );\n});\n\nexport interface InputProps\n  extends Omit<RACInputProps, 'className' | 'style' | 'render'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className +\n        mergeStyles(\n          style({\n            padding: 0,\n            backgroundColor: 'transparent',\n            color: {\n              default: 'inherit',\n              '::placeholder': {\n                default: 'gray-600',\n                forcedColors: 'GrayText'\n              }\n            },\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          }),\n          styles\n        )\n      }\n    />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'XS' | '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  styles?: StyleString;\n}\n\nexport const helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: controlFont(),\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\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(\n  props: HelpTextProps & {\n    descriptionRef?: DOMRef<HTMLDivElement>;\n    errorRef?: DOMRef<HTMLDivElement>;\n  }\n): ReactNode {\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={mergeStyles(\n          helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled}),\n          props.styles\n        )}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  if (!props.isInvalid) {\n    return null;\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps =>\n        mergeStyles(\n          helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled}),\n          props.styles\n        )\n      }>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (\n        <>\n          {props.showErrorIcon && (\n            <CenterBaseline>\n              <AlertIcon\n                // @ts-ignore - ts doesn't know that AlertIcon is an icon and not a raw SVG\n                styles={style({\n                  size: {\n                    size: {\n                      XS: 14,\n                      S: 16,\n                      M: 20,\n                      L: 22,\n                      XL: 26\n                    }\n                  }\n                })({size: props.size || 'M'})}\n              />\n            </CenterBaseline>\n          )}\n          <span>{children || validationErrors.join(' ')}</span>\n        </>\n      ))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {\n  return (\n    <Provider\n      values={[\n        [\n          IconContext,\n          {\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: 'Mark'\n                  }\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      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.cjs.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} from 'react-aria-components/composeRenderProps';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {\n  control,\n  controlFont,\n  fieldInput,\n  fieldLabel,\n  StyleProps,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {FieldError, FieldErrorProps} from 'react-aria-components/FieldError';\nimport {ForwardedRef, forwardRef, ReactNode, useContext} from 'react';\nimport {getEventTarget} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {Group, GroupProps} from 'react-aria-components/Group';\nimport {IconContext} from './Icon';\nimport {\n  InputContext,\n  Input as RACInput,\n  InputProps as RACInputProps\n} from 'react-aria-components/Input';\nimport intlMessages from '../intl/*.json';\nimport {Label, LabelProps} from 'react-aria-components/Label';\nimport {mergeStyles} from '../style/runtime';\nimport {Provider} from 'react-aria-components/slots';\nimport {StyleString} from '../style/types';\nimport {Text} from 'react-aria-components/Text';\nimport {useDOMRef} from './useDOMRef';\nimport {useId} from 'react-aria/useId';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\ninterface FieldLabelProps\n  extends Omit<LabelProps, 'className' | 'style' | 'render' | '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(\n  props: FieldLabelProps,\n  ref: DOMRef<HTMLLabelElement>\n) {\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={\n          UNSAFE_className +\n          mergeStyles(\n            style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}),\n            props.styles\n          )\n        }>\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={\n                  includeNecessityIndicatorInAccessibilityName\n                    ? stringFormatter.format('label.(required)')\n                    : undefined\n                }\n                aria-hidden={!includeNecessityIndicatorInAccessibilityName}\n              />\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\n                aria-hidden={\n                  !includeNecessityIndicatorInAccessibilityName ? isRequired : undefined\n                }>\n                {isRequired\n                  ? stringFormatter.format('label.(required)')\n                  : 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\n                  ? `${labelProps.id} ${contextualHelpId}`\n                  : 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\n  extends Omit<GroupProps, 'className' | 'style' | 'render' | 'children' | 'prefix'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL';\n  children: ReactNode;\n  styles?: StyleString;\n  shouldTurnOffFocusRing?: boolean;\n  prefix?: ReactNode;\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...control({shape: 'default'}),\n  ...fieldInput(),\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    forcedColors: 'ButtonBorder',\n    isInvalid: {\n      default: baseColor('negative'),\n      forcedColors: 'Mark'\n    },\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: {\n    default: 'gray-25',\n    forcedColors: 'Field'\n  },\n  color: {\n    default: baseColor('neutral'),\n    forcedColors: 'ButtonText',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(\n  props: FieldGroupProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  let {children, prefix, shouldTurnOffFocusRing, ...otherProps} = props;\n  let ctx = useContext(InputContext);\n  let prefixId = useId();\n  let newAriaLabelledby = ctx?.['aria-labelledby'];\n  if (prefix) {\n    newAriaLabelledby = newAriaLabelledby ? `${newAriaLabelledby} ${prefixId}` : prefixId;\n  }\n  return (\n    <Group\n      ref={ref}\n      {...otherProps}\n      onPointerDown={e => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (\n          e.pointerType === 'mouse' &&\n          !(getEventTarget(e) as Element).closest('button,input,textarea,[role=\"button\"]')\n        ) {\n          e.preventDefault();\n          (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();\n        }\n      }}\n      onTouchEnd={e => {\n        let target = getEventTarget(e) as HTMLElement;\n        if (!target.isContentEditable && !target.closest('button,input,textarea,[role=\"button\"]')) {\n          e.preventDefault();\n          (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        ' ' +\n        centerBaselineBefore +\n        mergeStyles(\n          fieldGroupStyles({\n            ...renderProps,\n            isFocusWithin: shouldTurnOffFocusRing ? false : renderProps.isFocusWithin,\n            isFocusVisible: shouldTurnOffFocusRing ? false : renderProps.isFocusVisible,\n            size: props.size || 'M'\n          }),\n          props.styles\n        )\n      }>\n      {props.prefix ? (\n        <Provider\n          values={[\n            [\n              IconContext,\n              {\n                styles: style({\n                  size: fontRelative(20),\n                  '--iconPrimary': {type: 'fill', value: 'currentColor'}\n                })\n              }\n            ]\n          ]}>\n          <CenterBaseline\n            id={prefixId}\n            styles={style({\n              color: 'gray-600',\n              flexShrink: 0,\n              marginEnd: 'text-to-visual'\n            })}>\n            {props.prefix}\n          </CenterBaseline>\n        </Provider>\n      ) : null}\n      <InputContext.Consumer>\n        {ctx => (\n          <InputContext.Provider value={{...ctx, 'aria-labelledby': newAriaLabelledby}}>\n            {children}\n          </InputContext.Provider>\n        )}\n      </InputContext.Consumer>\n    </Group>\n  );\n});\n\nexport interface InputProps\n  extends Omit<RACInputProps, 'className' | 'style' | 'render'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className +\n        mergeStyles(\n          style({\n            padding: 0,\n            backgroundColor: 'transparent',\n            color: {\n              default: 'inherit',\n              '::placeholder': {\n                default: 'gray-600',\n                forcedColors: 'GrayText'\n              }\n            },\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          }),\n          styles\n        )\n      }\n    />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'XS' | '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  styles?: StyleString;\n}\n\nexport const helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: controlFont(),\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\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(\n  props: HelpTextProps & {\n    descriptionRef?: DOMRef<HTMLDivElement>;\n    errorRef?: DOMRef<HTMLDivElement>;\n  }\n): ReactNode {\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={mergeStyles(\n          helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled}),\n          props.styles\n        )}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  if (!props.isInvalid) {\n    return null;\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps =>\n        mergeStyles(\n          helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled}),\n          props.styles\n        )\n      }>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (\n        <>\n          {props.showErrorIcon && (\n            <CenterBaseline>\n              <AlertIcon\n                // @ts-ignore - ts doesn't know that AlertIcon is an icon and not a raw SVG\n                styles={style({\n                  size: {\n                    size: {\n                      XS: 14,\n                      S: 16,\n                      M: 20,\n                      L: 22,\n                      XL: 26\n                    }\n                  }\n                })({size: props.size || 'M'})}\n              />\n            </CenterBaseline>\n          )}\n          <span>{children || validationErrors.join(' ')}</span>\n        </>\n      ))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {\n  return (\n    <Provider\n      values={[\n        [\n          IconContext,\n          {\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: 'Mark'\n                  }\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      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.cjs.map"}