@react-spectrum/s2 3.0.0-nightly-63d4359d6-250428 → 3.0.0-nightly-1dd65ffc5-250430

package/dist/TextField.css

@@ -1,231 +1,237 @@
 @layer _.a {
-  .ka {
+  .el {
     height: auto;
   }
 
-  ._0f {
+  .mb {
     display: grid;
   }
 
-  .__b-3t1y {
+  .L2mU {
     grid-column-start: 1;
   }
 
-  .__c-yqnebx {
+  .NvoofG {
     grid-column-end: span 2;
   }
 
-  .__i-2wzs0i {
+  .SM8Mfn {
     grid-template-columns: 1fr;
   }
 
-  .__i-ar5vcf {
+  .SPlN5qb {
     grid-template-columns: auto 1fr;
   }
 
-  .__i-1a97rzt {
+  .SLwlgod {
     grid-template-columns: subgrid;
   }
 
-  .__j-1a6w430 {
+  ._F4w1sLc {
     grid-template-rows: auto 1fr auto;
   }
 
-  .__j-ar5vcf {
+  ._FPlN5qb {
     grid-template-rows: auto 1fr;
   }
 
-  .__k-1srn173 {
+  ._uxaocre {
     grid-template-areas: "label"
                          "input"
                          "helptext";
   }
 
-  .__k-18h2yqz {
+  ._ubRM95c {
     grid-template-areas: "label input"
                          "label helptext";
   }
 
-  ._ee {
+  .aa {
     font-size: .875rem;
   }
 
-  ._ea {
+  .ai {
     font-size: .6875rem;
   }
 
-  ._ec {
+  .af {
     font-size: .75rem;
   }
 
-  ._eg {
+  .ae {
     font-size: 1rem;
   }
 
-  ._ei {
+  .ah {
     font-size: 1.125rem;
   }
 
-  ._2d {
+  .Fb {
     align-items: baseline;
   }
 
-  ._ga {
+  .gb {
     line-height: 1.3;
   }
 
-  .-aqrvqh_k-f {
+  .-BhX7R-ec {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-g {
+  .-BhX7R-ea {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-h {
+  .-BhX7R-eb {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-i {
+  .-BhX7R-ed {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-j {
+  .-BhX7R-ee {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-_1inj1bc_i--prjw07 {
-    --field-gap: calc((var(--field-height)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
+  .-AJjOLd-p8R8pb {
+    --field-gap: calc((var(--field-height)  - var(--_n, 0px)  - var(--_m, 0px)  - 1lh) / 2);
   }
 
-  .je {
+  .ka {
     column-gap: .75rem;
   }
 
-  .__S-yksgrp {
+  ._Ga {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .Ca {
+  .oa {
     padding-inline-start: 0;
   }
 
-  .Da {
+  .na {
     padding-inline-end: 0;
   }
 
-  .E-1dbqcch {
-    padding-top: calc((var(--o)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
+  .r11HdCe {
+    padding-top: calc((var(--s)  - var(--_n, 0px)  - var(--_m, 0px)  - 1lh) / 2);
   }
 
-  .F-1dbqcch {
-    padding-bottom: calc((var(--o)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
+  .v11HdCe {
+    padding-bottom: calc((var(--s)  - var(--_n, 0px)  - var(--_m, 0px)  - 1lh) / 2);
   }
 
-  .o-375tou {
-    min-height: var(--o);
+  .sOSFGYc {
+    min-height: var(--s);
   }
 
-  .__oa {
+  ._qa {
     box-sizing: border-box;
   }
 
-  .ba {
+  .cd {
     background-color: #0000;
   }
 
-  .a-17zqamw {
+  .d40ub4c {
     color: inherit;
   }
 
-  ._d-17zqamw {
+  .b40ub4c {
     font-family: inherit;
   }
 
-  ._e-17zqamw {
+  .a40ub4c {
     font-size: inherit;
   }
 
-  ._f-17zqamw {
+  .D40ub4c {
     font-variation-settings: inherit;
+  }
+
+  .E40ub4c {
     font-weight: inherit;
+  }
+
+  .Ca {
     font-synthesis-weight: none;
   }
 
-  ._g-17zqamw {
+  .g40ub4c {
     line-height: inherit;
   }
 
-  .__a-3t1y {
+  ._Ha {
     flex-grow: 1;
   }
 
-  .qo {
+  .uf {
     min-width: 0;
   }
 
-  ._Ma {
+  .ta {
     outline-style: none;
   }
 
-  .wf {
+  .Rb {
     border-style: none;
   }
 
-  .__Ja {
+  .__ja {
     resize: none;
   }
 
-  .__wb {
+  ._oa {
     overflow-x: hidden;
   }
 
-  .-_375tou_o-f {
-    --o: calc(2rem * var(--s2-scale));
+  .-s_-sb {
+    --s: calc(2rem * var(--s2-scale));
   }
 
-  .-_375tou_o-g {
-    --o: calc(1.25rem * var(--s2-scale));
+  .-s_-se {
+    --s: calc(1.25rem * var(--s2-scale));
   }
 
-  .-_375tou_o-h {
-    --o: calc(1.5rem * var(--s2-scale));
+  .-s_-sc {
+    --s: calc(1.5rem * var(--s2-scale));
   }
 
-  .-_375tou_o-i {
-    --o: calc(2.5rem * var(--s2-scale));
+  .-s_-sa {
+    --s: calc(2.5rem * var(--s2-scale));
   }
 
-  .-_375tou_o-j {
-    --o: calc(3rem * var(--s2-scale));
+  .-s_-sd {
+    --s: calc(3rem * var(--s2-scale));
   }
 }
 
 @layer _.b {
-  ._g-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .gca:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 }
 
-@layer _.b.b {
+@layer _.b.a {
   @media not ((hover: hover) and (pointer: fine)) {
-    ._ebf {
+    .aab {
       font-size: 1.0625rem;
     }
 
-    ._ebb {
+    .aaj {
       font-size: .8125rem;
     }
 
-    ._ebd {
+    .aag {
       font-size: .9375rem;
     }
 
-    ._ebh {
+    .aad {
       font-size: 1.1875rem;
     }
 
-    ._ebj {
+    .aac {
       font-size: 1.375rem;
     }
   }

package/dist/TextField.css.map

@@ -1 +1 @@
-{"mappings":"AC4EqB;EAAA;;;;EA6Ce;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqEnB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlHI;EA6Ce;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["b5f6eedb906c59d7","packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["@import \"ab36e6acf2667a8b\";\n@import \"67d58da798418a3e\";\n@import \"83cde29013713f83\";\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 {\n  TextArea as AriaTextArea,\n  TextAreaContext as AriaTextAreaContext,\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  composeRenderProps,\n  ContextValue,\n  InputContext,\n  useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}\n      fieldGroupCss={style({\n        alignItems: 'baseline',\n        height: 'auto'\n      })}>\n      <TextAreaInput />\n    </TextFieldBase>\n  );\n});\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    fieldGroupCss,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...textFieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaTextField\n      {...textFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        {/* TODO: set GroupContext in RAC TextField */}\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                {children}\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>))}\n    </AriaTextField>\n  );\n});\n\nfunction TextAreaInput() {\n  // Force re-render when value changes so we update the height.\n  useSlottedContext(AriaTextAreaContext) ?? {};\n  let onHeightChange = (input: HTMLTextAreaElement) => {\n    // TODO: only do this if an explicit height is not given?\n    if (input) {\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  };\n\n  return (\n    <AriaTextArea\n      ref={onHeightChange}\n      // Workaround for baseline alignment bug in Safari.\n      // https://bugs.webkit.org/show_bug.cgi?id=142968\n      placeholder=\" \"\n      className={style({\n        paddingX: 0,\n        paddingY: centerPadding(),\n        minHeight: 'control',\n        boxSizing: 'border-box',\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        lineHeight: '[inherit]',\n        flexGrow: 1,\n        minWidth: 0,\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        resize: 'none',\n        overflowX: 'hidden'\n      })} />\n  );\n}\n"],"names":[],"version":3,"file":"TextField.css.map"}
+{"mappings":"AC4EqB;EAAA;;;;EA6Ce;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqEnB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArEmB;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["b5f6eedb906c59d7","packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["@import \"ab36e6acf2667a8b\";\n@import \"67d58da798418a3e\";\n@import \"83cde29013713f83\";\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 {\n  TextArea as AriaTextArea,\n  TextAreaContext as AriaTextAreaContext,\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  composeRenderProps,\n  ContextValue,\n  InputContext,\n  useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}\n      fieldGroupCss={style({\n        alignItems: 'baseline',\n        height: 'auto'\n      })}>\n      <TextAreaInput />\n    </TextFieldBase>\n  );\n});\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    fieldGroupCss,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...textFieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaTextField\n      {...textFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        {/* TODO: set GroupContext in RAC TextField */}\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                {children}\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>))}\n    </AriaTextField>\n  );\n});\n\nfunction TextAreaInput() {\n  // Force re-render when value changes so we update the height.\n  useSlottedContext(AriaTextAreaContext) ?? {};\n  let onHeightChange = (input: HTMLTextAreaElement) => {\n    // TODO: only do this if an explicit height is not given?\n    if (input) {\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  };\n\n  return (\n    <AriaTextArea\n      ref={onHeightChange}\n      // Workaround for baseline alignment bug in Safari.\n      // https://bugs.webkit.org/show_bug.cgi?id=142968\n      placeholder=\" \"\n      className={style({\n        paddingX: 0,\n        paddingY: centerPadding(),\n        minHeight: 'control',\n        boxSizing: 'border-box',\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        lineHeight: '[inherit]',\n        flexGrow: 1,\n        minWidth: 0,\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        resize: 'none',\n        overflowX: 'hidden'\n      })} />\n  );\n}\n"],"names":[],"version":3,"file":"TextField.css.map"}

package/dist/TextField.mjs

@@ -41,7 +41,7 @@ const $d946f50010ba937f$export$f5c9f3c2c4054eec = /*#__PURE__*/ (0, $fsr8S$forwa
     return /*#__PURE__*/ (0, $fsr8S$jsx)($d946f50010ba937f$export$d22444a338b6e3c2, {
         ...props,
         ref: ref,
-        fieldGroupCss: " _2d ka",
+        fieldGroupCss: " Fb el",
         children: /*#__PURE__*/ (0, $fsr8S$jsx)($d946f50010ba937f$var$TextAreaInput, {})
     });
 });
@@ -66,60 +66,60 @@ const $d946f50010ba937f$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $fsr8S$forwa
         ref: domRef,
         style: UNSAFE_style,
         className: UNSAFE_className + function anonymous(props, overrides) {
-            let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
-            rules += matches.join('');
-            let $__b = false;
-            let $__c = false;
+            let rules = " ";
+            let gridColumnStart = false;
+            let gridColumnEnd = false;
+            let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g);
             for (let p of matches){
-                if (/^\s*__b/.test(p)) $__b = true;
-                if (/^\s*__c/.test(p)) $__c = true;
+                if (p[1] === "L") gridColumnStart = true;
+                if (p[1] === "N") gridColumnEnd = true;
+                rules += p[0];
             }
-            rules += ' _0f';
-            if (!$__b) {
-                if (props.isInForm) rules += ' __b-3t1y';
+            rules += ' mb';
+            if (props.isInForm) {
+                if (!gridColumnStart) rules += ' L2mU';
             }
-            if (!$__c) {
-                if (props.isInForm) {
-                    if (props.labelPosition === "side") rules += ' __c-yqnebx';
+            if (props.isInForm) {
+                if (props.labelPosition === "side") {
+                    if (!gridColumnEnd) rules += ' NvoofG';
                 }
             }
-            if (props.isInForm) rules += ' __i-1a97rzt';
+            if (props.isInForm) rules += ' SLwlgod';
             else {
-                if (props.labelPosition === "side") rules += ' __i-ar5vcf';
-                else if (props.labelPosition === "top") rules += ' __i-2wzs0i';
+                if (props.labelPosition === "side") rules += ' SPlN5qb';
+                else if (props.labelPosition === "top") rules += ' SM8Mfn';
             }
-            if (props.labelPosition === "side") rules += ' __j-ar5vcf';
-            else if (props.labelPosition === "top") rules += ' __j-1a6w430';
-            if (props.labelPosition === "side") rules += ' __k-18h2yqz';
-            else if (props.labelPosition === "top") rules += ' __k-1srn173';
+            if (props.labelPosition === "side") rules += ' _FPlN5qb';
+            else if (props.labelPosition === "top") rules += ' _F4w1sLc';
+            if (props.labelPosition === "side") rules += ' _ubRM95c';
+            else if (props.labelPosition === "top") rules += ' _uxaocre';
             if (props.size === "XL") {
-                rules += ' _ebj';
-                rules += ' _ei';
+                rules += ' ah';
+                rules += ' aac';
             } else if (props.size === "L") {
-                rules += ' _ebh';
-                rules += ' _eg';
+                rules += ' ae';
+                rules += ' aad';
             } else if (props.size === "S") {
-                rules += ' _ebd';
-                rules += ' _ec';
+                rules += ' af';
+                rules += ' aag';
             } else if (props.size === "XS") {
-                rules += ' _ebb';
-                rules += ' _ea';
+                rules += ' ai';
+                rules += ' aaj';
             } else {
-                rules += ' _ebf';
-                rules += ' _ee';
+                rules += ' aa';
+                rules += ' aab';
             }
-            rules += ' _2d';
-            rules += ' _g-1x99dlob';
-            rules += ' _ga';
-            if (props.size === "XL") rules += ' -aqrvqh_k-j';
-            else if (props.size === "L") rules += ' -aqrvqh_k-i';
-            else if (props.size === "S") rules += ' -aqrvqh_k-h';
-            else if (props.size === "XS") rules += ' -aqrvqh_k-g';
-            else rules += ' -aqrvqh_k-f';
-            rules += ' -_1inj1bc_i--prjw07';
-            rules += ' je';
-            rules += ' __S-yksgrp';
+            rules += ' Fb';
+            rules += ' gb';
+            rules += ' gca';
+            if (props.size === "XL") rules += ' -BhX7R-ee';
+            else if (props.size === "L") rules += ' -BhX7R-ed';
+            else if (props.size === "S") rules += ' -BhX7R-eb';
+            else if (props.size === "XS") rules += ' -BhX7R-ea';
+            else rules += ' -BhX7R-ec';
+            rules += ' -AJjOLd-p8R8pb';
+            rules += ' ka';
+            rules += ' _Ga';
             return rules;
         }({
             size: props.size,
@@ -197,30 +197,32 @@ function $d946f50010ba937f$var$TextAreaInput() {
         // https://bugs.webkit.org/show_bug.cgi?id=142968
         placeholder: " ",
         className: function anonymous(props) {
-            let rules = " .";
+            let rules = " ";
+            rules += ' oa';
+            rules += ' na';
+            rules += ' r11HdCe';
+            rules += ' v11HdCe';
+            rules += ' sOSFGYc';
+            rules += ' _qa';
+            rules += ' cd';
+            rules += ' d40ub4c';
+            rules += ' b40ub4c';
+            rules += ' a40ub4c';
+            rules += ' D40ub4c';
+            rules += ' E40ub4c';
             rules += ' Ca';
-            rules += ' Da';
-            rules += ' E-1dbqcch';
-            rules += ' F-1dbqcch';
-            rules += ' o-375tou';
-            rules += ' __oa';
-            rules += ' ba';
-            rules += ' a-17zqamw';
-            rules += ' _d-17zqamw';
-            rules += ' _e-17zqamw';
-            rules += ' _f-17zqamw';
-            rules += ' _g-17zqamw';
-            rules += ' __a-3t1y';
-            rules += ' qo';
-            rules += ' _Ma';
-            rules += ' wf';
-            rules += ' __Ja';
-            rules += ' __wb';
-            if (props.size === "XL") rules += ' -_375tou_o-j';
-            else if (props.size === "L") rules += ' -_375tou_o-i';
-            else if (props.size === "S") rules += ' -_375tou_o-h';
-            else if (props.size === "XS") rules += ' -_375tou_o-g';
-            else rules += ' -_375tou_o-f';
+            rules += ' g40ub4c';
+            rules += ' _Ha';
+            rules += ' uf';
+            rules += ' ta';
+            rules += ' Rb';
+            rules += ' __ja';
+            rules += ' _oa';
+            if (props.size === "XL") rules += ' -s_-sd';
+            else if (props.size === "L") rules += ' -s_-sa';
+            else if (props.size === "S") rules += ' -s_-sc';
+            else if (props.size === "XS") rules += ' -s_-se';
+            else rules += ' -s_-sb';
             return rules;
         }
     });

package/dist/TextField.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TextField.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 {\n  TextArea as AriaTextArea,\n  TextAreaContext as AriaTextAreaContext,\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  composeRenderProps,\n  ContextValue,\n  InputContext,\n  useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}\n      fieldGroupCss={style({\n        alignItems: 'baseline',\n        height: 'auto'\n      })}>\n      <TextAreaInput />\n    </TextFieldBase>\n  );\n});\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    fieldGroupCss,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...textFieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaTextField\n      {...textFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        {/* TODO: set GroupContext in RAC TextField */}\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                {children}\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>))}\n    </AriaTextField>\n  );\n});\n\nfunction TextAreaInput() {\n  // Force re-render when value changes so we update the height.\n  useSlottedContext(AriaTextAreaContext) ?? {};\n  let onHeightChange = (input: HTMLTextAreaElement) => {\n    // TODO: only do this if an explicit height is not given?\n    if (input) {\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  };\n\n  return (\n    <AriaTextArea\n      ref={onHeightChange}\n      // Workaround for baseline alignment bug in Safari.\n      // https://bugs.webkit.org/show_bug.cgi?id=142968\n      placeholder=\" \"\n      className={style({\n        paddingX: 0,\n        paddingY: centerPadding(),\n        minHeight: 'control',\n        boxSizing: 'border-box',\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        lineHeight: '[inherit]',\n        flexGrow: 1,\n        minWidth: 0,\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        resize: 'none',\n        overflowX: 'hidden'\n      })} />\n  );\n}\n"],"names":[],"version":3,"file":"TextField.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TextField.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 {\n  TextArea as AriaTextArea,\n  TextAreaContext as AriaTextAreaContext,\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  composeRenderProps,\n  ContextValue,\n  InputContext,\n  useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the text field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nexport const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}>\n      <Input />\n    </TextFieldBase>\n  );\n});\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nexport const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n  return (\n    <TextFieldBase\n      {...props}\n      ref={ref}\n      fieldGroupCss={style({\n        alignItems: 'baseline',\n        height: 'auto'\n      })}>\n      <TextAreaInput />\n    </TextFieldBase>\n  );\n});\n\nexport const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    fieldGroupCss,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...textFieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaTextField\n      {...textFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        {/* TODO: set GroupContext in RAC TextField */}\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                {children}\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>))}\n    </AriaTextField>\n  );\n});\n\nfunction TextAreaInput() {\n  // Force re-render when value changes so we update the height.\n  useSlottedContext(AriaTextAreaContext) ?? {};\n  let onHeightChange = (input: HTMLTextAreaElement) => {\n    // TODO: only do this if an explicit height is not given?\n    if (input) {\n      let prevAlignment = input.style.alignSelf;\n      let prevOverflow = input.style.overflow;\n      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n      // The measure/applied height is also incorrect/reset if we turn on and off\n      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n      let isFirefox = 'MozAppearance' in input.style;\n      if (!isFirefox) {\n        input.style.overflow = 'hidden';\n      }\n      input.style.alignSelf = 'start';\n      input.style.height = 'auto';\n      // offsetHeight - clientHeight accounts for the border/padding.\n      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n      input.style.overflow = prevOverflow;\n      input.style.alignSelf = prevAlignment;\n    }\n  };\n\n  return (\n    <AriaTextArea\n      ref={onHeightChange}\n      // Workaround for baseline alignment bug in Safari.\n      // https://bugs.webkit.org/show_bug.cgi?id=142968\n      placeholder=\" \"\n      className={style({\n        paddingX: 0,\n        paddingY: centerPadding(),\n        minHeight: 'control',\n        boxSizing: 'border-box',\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        lineHeight: '[inherit]',\n        flexGrow: 1,\n        minWidth: 0,\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        resize: 'none',\n        overflowX: 'hidden'\n      })} />\n  );\n}\n"],"names":[],"version":3,"file":"TextField.mjs.map"}