@react-spectrum/textfield 3.10.6 → 3.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/import.mjs +14 -12
  2. package/dist/main.css +1 -1
  3. package/dist/main.js +14 -12
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +14 -12
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +4 -4
  8. package/dist/types.d.ts.map +1 -1
  9. package/package.json +13 -13
  10. package/src/TextArea.tsx +7 -8
  11. package/src/TextField.tsx +4 -5
  12. package/src/TextFieldBase.tsx +3 -3
package/dist/import.mjs CHANGED
@@ -2,6 +2,7 @@ import "./main.css";
2
2
  import {useLayoutEffect as $evhxb$useLayoutEffect, chain as $evhxb$chain, mergeProps as $evhxb$mergeProps} from "@react-aria/utils";
3
3
  import $evhxb$react, {useRef as $evhxb$useRef, useCallback as $evhxb$useCallback, useImperativeHandle as $evhxb$useImperativeHandle, cloneElement as $evhxb$cloneElement, forwardRef as $evhxb$forwardRef} from "react";
4
4
  import {useControlledState as $evhxb$useControlledState} from "@react-stately/utils";
5
+ import {useFormProps as $evhxb$useFormProps} from "@react-spectrum/form";
5
6
  import {useProviderProps as $evhxb$useProviderProps} from "@react-spectrum/provider";
6
7
  import {useTextField as $evhxb$useTextField} from "@react-aria/textfield";
7
8
  import $evhxb$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
@@ -11,9 +12,11 @@ import {Field as $evhxb$Field} from "@react-spectrum/label";
11
12
  import {useFocusRing as $evhxb$useFocusRing} from "@react-aria/focus";
12
13
  import {useHover as $evhxb$useHover} from "@react-aria/interactions";
13
14
 
15
+
14
16
  function $parcel$interopDefault(a) {
15
17
  return a && a.__esModule ? a.default : a;
16
18
  }
19
+
17
20
  function $parcel$export(e, n, v, s) {
18
21
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
19
22
  }
@@ -129,7 +132,7 @@ $c14528ddc146317f$export$9fcb3d6af94a9d12 = `YO3Nla_spectrum-Textfield-wrapper--
129
132
 
130
133
 
131
134
  function $599adb75312e6492$var$TextFieldBase(props, ref) {
132
- let { validationState: validationState, icon: icon, isQuiet: isQuiet = false, isDisabled: isDisabled, multiLine: multiLine, autoFocus: autoFocus, inputClassName: inputClassName, wrapperChildren: wrapperChildren, labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, inputRef: userInputRef, isLoading: isLoading, loadingIndicator: loadingIndicator, validationIconClassName: validationIconClassName, disableFocusRing: disableFocusRing } = props;
135
+ let { validationState: validationState = props.isInvalid ? "invalid" : null, icon: icon, isQuiet: isQuiet = false, isDisabled: isDisabled, multiLine: multiLine, autoFocus: autoFocus, inputClassName: inputClassName, wrapperChildren: wrapperChildren, labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, inputRef: userInputRef, isLoading: isLoading, loadingIndicator: loadingIndicator, validationIconClassName: validationIconClassName, disableFocusRing: disableFocusRing } = props;
133
136
  let { hoverProps: hoverProps, isHovered: isHovered } = (0, $evhxb$useHover)({
134
137
  isDisabled: isDisabled
135
138
  });
@@ -199,11 +202,14 @@ const $599adb75312e6492$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $evhxb$forwa
199
202
 
200
203
 
201
204
 
205
+
202
206
  function $cc187bf91f8eea73$var$TextArea(props, ref) {
203
207
  props = (0, $evhxb$useProviderProps)(props);
208
+ props = (0, $evhxb$useFormProps)(props);
204
209
  let { isDisabled: isDisabled = false, isQuiet: isQuiet = false, isReadOnly: isReadOnly = false, isRequired: isRequired = false, onChange: onChange, ...otherProps } = props;
210
+ var _props_defaultValue;
205
211
  // not in stately because this is so we know when to re-measure, which is a spectrum design
206
- let [inputValue, setInputValue] = (0, $evhxb$useControlledState)(props.value, props.defaultValue, ()=>{});
212
+ let [inputValue, setInputValue] = (0, $evhxb$useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : "", ()=>{});
207
213
  let inputRef = (0, $evhxb$useRef)(null);
208
214
  let onHeightChange = (0, $evhxb$useCallback)(()=>{
209
215
  // Quiet textareas always grow based on their text content.
@@ -237,7 +243,7 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
237
243
  inputRef
238
244
  ]);
239
245
  if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text");
240
- let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $evhxb$useTextField)({
246
+ let result = (0, $evhxb$useTextField)({
241
247
  ...props,
242
248
  onChange: (0, $evhxb$chain)(onChange, setInputValue),
243
249
  inputElementType: "textarea"
@@ -246,10 +252,7 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
246
252
  ...otherProps,
247
253
  ref: ref,
248
254
  inputRef: inputRef,
249
- labelProps: labelProps,
250
- inputProps: inputProps,
251
- descriptionProps: descriptionProps,
252
- errorMessageProps: errorMessageProps,
255
+ ...result,
253
256
  multiLine: true,
254
257
  isDisabled: isDisabled,
255
258
  isQuiet: isQuiet,
@@ -278,17 +281,16 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
278
281
 
279
282
 
280
283
 
284
+
281
285
  function $265457f9427aa380$var$TextField(props, ref) {
282
286
  props = (0, $evhxb$useProviderProps)(props);
287
+ props = (0, $evhxb$useFormProps)(props);
283
288
  let inputRef = (0, $evhxb$useRef)(null);
284
- let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $evhxb$useTextField)(props, inputRef);
289
+ let result = (0, $evhxb$useTextField)(props, inputRef);
285
290
  if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text");
286
291
  return /*#__PURE__*/ (0, $evhxb$react).createElement((0, $599adb75312e6492$export$d22444a338b6e3c2), {
287
292
  ...props,
288
- labelProps: labelProps,
289
- inputProps: inputProps,
290
- descriptionProps: descriptionProps,
291
- errorMessageProps: errorMessageProps,
293
+ ...result,
292
294
  ref: ref,
293
295
  inputRef: inputRef
294
296
  });
package/dist/main.css CHANGED
@@ -1 +1 @@
1
- .YO3Nla_i18nFontFamily{font-synthesis:weight;font-family:adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.YO3Nla_i18nFontFamily:lang(ar){font-family:myriad-arabic,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.YO3Nla_i18nFontFamily:lang(he){font-family:myriad-hebrew,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.YO3Nla_i18nFontFamily:lang(zh){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Heiti TC Light,sans-serif}.YO3Nla_i18nFontFamily:lang(zh-Hans){font-family:adobe-clean-han-simplified-c,source-han-simplified-c,SimSun,Heiti SC Light,sans-serif}.YO3Nla_i18nFontFamily:lang(zh-Hant){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Microsoft JhengHei UI,Microsoft JhengHei,Heiti TC Light,sans-serif}.YO3Nla_i18nFontFamily:lang(zh-SG),.YO3Nla_i18nFontFamily:lang(zh-CN){font-family:adobe-clean-han-simplified-c,source-han-simplified-c,SimSun,Heiti SC Light,sans-serif}.YO3Nla_i18nFontFamily:lang(ko){font-family:adobe-clean-han-korean,source-han-korean,Malgun Gothic,Apple Gothic,sans-serif}.YO3Nla_i18nFontFamily:lang(ja){font-family:adobe-clean-han-japanese,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Osaka,YuGothic,Yu Gothic,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,sans-serif}.YO3Nla_spectrum-FocusRing-ring{--spectrum-focus-ring-border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-focus-ring-gap:var(--spectrum-alias-input-focusring-gap);--spectrum-focus-ring-size:var(--spectrum-alias-input-focusring-size);--spectrum-focus-ring-border-size:0px;--spectrum-focus-ring-color:var(--spectrum-high-contrast-focus-ring-color,var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)))}.YO3Nla_spectrum-FocusRing-ring:after{border-radius:calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));content:"";margin:calc(-1*var(--spectrum-focus-ring-border-size));pointer-events:none;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-out,margin var(--spectrum-global-animation-duration-100,.13s)ease-out;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.YO3Nla_spectrum-FocusRing.YO3Nla_focus-ring:after{margin:calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size));box-shadow:0 0 0 var(--spectrum-focus-ring-size)var(--spectrum-focus-ring-color)}.YO3Nla_spectrum-FocusRing--quiet:after{border-radius:0}.YO3Nla_spectrum-FocusRing--quiet.YO3Nla_focus-ring:after{margin:0 0 calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size))0;box-shadow:0 var(--spectrum-focus-ring-size)0 var(--spectrum-focus-ring-color)}.YO3Nla_spectrum-Textfield{min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));display:inline-flex;position:relative}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--quiet.YO3Nla_spectrum-Textfield--multiline .YO3Nla_spectrum-Textfield-input{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));overflow-x:hidden}.YO3Nla_spectrum-Textfield-input{box-sizing:border-box;border:var(--spectrum-alias-input-border-size)solid;border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));padding:3px var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))5px calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) - 1px);text-indent:0;height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));vertical-align:top;font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-in-out;-webkit-appearance:none;-moz-appearance:textfield;outline:none;inline-size:100%;margin:0;overflow:visible}.YO3Nla_spectrum-Textfield-input::placeholder,.YO3Nla_spectrum-Textfield-input.YO3Nla_is-placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));font-synthesis:none;transition:color var(--spectrum-global-animation-duration-100,.13s)ease-in-out;opacity:1}.YO3Nla_spectrum-Textfield-input::-moz-placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s)ease-in-out;opacity:1}.YO3Nla_spectrum-Textfield-input:lang(ja)::placeholder,.YO3Nla_spectrum-Textfield-input:lang(ja).YO3Nla_is-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(ja)::-moz-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(zh)::placeholder,.YO3Nla_spectrum-Textfield-input:lang(zh).YO3Nla_is-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(zh)::-moz-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(ko)::placeholder,.YO3Nla_spectrum-Textfield-input:lang(ko).YO3Nla_is-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(ko)::-moz-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(ar)::placeholder,.YO3Nla_spectrum-Textfield-input:lang(ar).YO3Nla_is-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(ar)::-moz-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(he)::placeholder,.YO3Nla_spectrum-Textfield-input:lang(he).YO3Nla_is-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(he)::-moz-placeholder{font-style:normal}:-webkit-any()::placeholder{font-style:normal}:is()::placeholder{font-style:normal}:-webkit-any().YO3Nla_is-placeholder{font-style:normal}:is().YO3Nla_is-placeholder{font-style:normal}:is()::-moz-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}.YO3Nla_spectrum-Textfield-input:disabled{resize:none;opacity:1}.YO3Nla_spectrum-Textfield-input:disabled::placeholder,.YO3Nla_spectrum-Textfield-input:disabled.YO3Nla_is-placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}.YO3Nla_spectrum-Textfield-input::-ms-clear{width:0;height:0}.YO3Nla_spectrum-Textfield-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.YO3Nla_spectrum-Textfield-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.YO3Nla_spectrum-Textfield-input:-moz-ui-invalid{box-shadow:none}.YO3Nla_spectrum-Textfield--multiline .YO3Nla_spectrum-Textfield-input{min-height:var(--spectrum-global-dimension-size-700);padding:3px var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))5px calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) - 1px);resize:none;height:auto;overflow:auto}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input{border-width:0 0 var(--spectrum-alias-input-border-size)0;border-radius:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0)}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0)}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0)}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:var(--spectrum-textfield-quiet-padding-x,0);padding-left:var(--spectrum-textfield-quiet-padding-x,0)}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:var(--spectrum-textfield-quiet-padding-x,0);padding-left:var(--spectrum-textfield-quiet-padding-x,0)}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-input:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-input:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-input:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-input:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield-wrapper.YO3Nla_spectrum-Textfield-wrapper--quiet{grid-template-rows:auto}.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline{flex:auto;min-height:0}.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline .YO3Nla_spectrum-Textfield-input{line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height))}.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline.YO3Nla_spectrum-Textfield--quiet{flex:0 auto;max-height:100%}.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input{max-height:100%}.YO3Nla_spectrum-Textfield-validationIcon{pointer-events:all;transition:color var(--spectrum-global-animation-duration-100,.13s)ease-in-out;position:absolute}.YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2)}.YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2)}.YO3Nla_spectrum-Textfield-validationIcon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2)}.YO3Nla_spectrum-Textfield-validationIcon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2)}.YO3Nla_spectrum-Textfield-validationIcon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2)}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-validationIcon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-validationIcon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-validationIcon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:0}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon{width:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));height:var(--spectrum-icon-alert-medium-height,var(--spectrum-global-dimension-size-225));top:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-height,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon{width:var(--spectrum-icon-checkmark-medium-width);height:var(--spectrum-icon-checkmark-medium-height);top:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-checkmark-medium-height)/2))}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon{height:var(--spectrum-icon-info-medium-height,var(--spectrum-global-dimension-size-225));width:var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225));top:var(--spectrum-global-dimension-size-85);transition:fill var(--spectrum-global-animation-duration-100,.13s)ease-in-out;display:block;position:absolute}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield-inputIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--spectrum-global-dimension-size-150) + var(--spectrum-global-dimension-size-225) + var(--spectrum-global-dimension-size-65))}.YO3Nla_spectrum-Textfield-inputIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--spectrum-global-dimension-size-150) + var(--spectrum-global-dimension-size-225) + var(--spectrum-global-dimension-size-65))}.YO3Nla_spectrum-Textfield-inputIcon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--spectrum-global-dimension-size-150) + var(--spectrum-global-dimension-size-225) + var(--spectrum-global-dimension-size-65))}.YO3Nla_spectrum-Textfield-inputIcon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--spectrum-global-dimension-size-150) + var(--spectrum-global-dimension-size-225) + var(--spectrum-global-dimension-size-65))}.YO3Nla_spectrum-Textfield-inputIcon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--spectrum-global-dimension-size-150) + var(--spectrum-global-dimension-size-225) + var(--spectrum-global-dimension-size-65))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-inputIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225)))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-inputIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225)))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-inputIcon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225)))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-inputIcon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225)))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-inputIcon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225)))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-inputIcon~.YO3Nla_spectrum-Textfield-icon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-inputIcon~.YO3Nla_spectrum-Textfield-icon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-inputIcon~.YO3Nla_spectrum-Textfield-icon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-inputIcon~.YO3Nla_spectrum-Textfield-icon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-inputIcon~.YO3Nla_spectrum-Textfield-icon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.YO3Nla_spectrum-Textfield-inputIcon.YO3Nla_spectrum-Textfield--multiline{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader{top:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-loader-circle-small-width,var(--spectrum-global-dimension-static-size-200))/2));position:absolute}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)) + calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)) + calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)) + calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)) + calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)) + calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2))}.YO3Nla_spectrum-Textfield--quiet:is(.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader):not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:0}.YO3Nla_spectrum-Textfield--quiet:-webkit-any(.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader):not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:0}.YO3Nla_spectrum-Textfield--quiet:is(.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader):not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:0}.YO3Nla_spectrum-Textfield--quiet:-webkit-any(.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader):-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:0}.YO3Nla_spectrum-Textfield--quiet:is(.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:0}.YO3Nla_spectrum-Textfield-input{background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}.YO3Nla_spectrum-Textfield-input::placeholder,.YO3Nla_spectrum-Textfield-input.YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-alias-border-color-hover));box-shadow:none}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered::placeholder,.YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered.YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}.YO3Nla_spectrum-Textfield-input:active{background-color:var(--spectrum-textfield-background-color-down,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-mouse-focus));color:var(--spectrum-textfield-text-color-down,var(--spectrum-alias-text-color-down))}.YO3Nla_spectrum-Textfield-input:active::placeholder,.YO3Nla_spectrum-Textfield-input:active.YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}.YO3Nla_spectrum-Textfield-input:focus,.YO3Nla_spectrum-Textfield-input.YO3Nla_is-focused{border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield-input[disabled]{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.YO3Nla_spectrum-Textfield-input[disabled]::placeholder,.YO3Nla_spectrum-Textfield-input[disabled].YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.YO3Nla_spectrum-Textfield-input[disabled]~.YO3Nla_spectrum-Textfield-icon{fill:var(--spectrum-textfield-icon-color-disabled,var(--spectrum-global-color-gray-500))}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled::placeholder,.YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled.YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled~.YO3Nla_spectrum-Textfield-icon{fill:var(--spectrum-textfield-icon-color-disabled,var(--spectrum-global-color-gray-500))}:-webkit-any()::placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:is()::placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:-webkit-any().YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:is().YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:-webkit-any()~.YO3Nla_spectrum-Textfield-icon{fill:var(--spectrum-textfield-icon-color-disabled,var(--spectrum-global-color-gray-500))}:is()~.YO3Nla_spectrum-Textfield-icon{fill:var(--spectrum-textfield-icon-color-disabled,var(--spectrum-global-color-gray-500))}.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid.YO3Nla_is-hovered,.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid:active,.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid:focus,.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid.YO3Nla_is-focused{border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid.YO3Nla_focus-ring:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input{background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-alias-border-color))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-alias-border-color-hover))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-mouse-focus))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:focus,.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_is-focused{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:disabled,.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered{border-color:var(--spectrum-textfield-border-color-error-hover,var(--spectrum-semantic-negative-color-state-hover))}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input:active{border-color:var(--spectrum-textfield-border-color-error-down,var(--spectrum-semantic-negative-color-state-down))}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input:focus{border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield--quiet.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active){box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon{fill:var(--spectrum-alert-success-icon-color,var(--spectrum-semantic-positive-color-icon))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon{fill:var(--spectrum-alert-error-icon-color,var(--spectrum-semantic-negative-color-icon))}@media (forced-colors:active){.YO3Nla_spectrum-Textfield-input{--spectrum-textfield-border-color:CanvasText;--spectrum-textfield-text-color-disabled:GrayText;--spectrum-textfield-border-color-disabled:GrayText;--spectrum-textfield-quiet-border-color-disabled:GrayText;--spectrum-textfield-quiet-border-color-key-focus:Highlight;--spectrum-textfield-border-color-key-focus:Highlight;--spectrum-textfield-placeholder-text-color:GrayText;--spectrum-textfield-placeholder-text-color-hover:GrayText}.YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring{outline:2px solid Highlight;outline:2px solid Highlight}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring{forced-color-adjust:none;box-shadow:0 1px 0 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));outline:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring .YO3Nla_spectrum-Textfield-input{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:-webkit-any() .YO3Nla_spectrum-Textfield-input{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:is() .YO3Nla_spectrum-Textfield-input{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}}
1
+ .YO3Nla_i18nFontFamily{font-synthesis:weight;font-family:adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.YO3Nla_i18nFontFamily:lang(ar){font-family:myriad-arabic,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.YO3Nla_i18nFontFamily:lang(he){font-family:myriad-hebrew,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.YO3Nla_i18nFontFamily:lang(zh){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Heiti TC Light,sans-serif}.YO3Nla_i18nFontFamily:lang(zh-Hans){font-family:adobe-clean-han-simplified-c,source-han-simplified-c,SimSun,Heiti SC Light,sans-serif}.YO3Nla_i18nFontFamily:lang(zh-Hant){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Microsoft JhengHei UI,Microsoft JhengHei,Heiti TC Light,sans-serif}.YO3Nla_i18nFontFamily:lang(zh-SG),.YO3Nla_i18nFontFamily:lang(zh-CN){font-family:adobe-clean-han-simplified-c,source-han-simplified-c,SimSun,Heiti SC Light,sans-serif}.YO3Nla_i18nFontFamily:lang(ko){font-family:adobe-clean-han-korean,source-han-korean,Malgun Gothic,Apple Gothic,sans-serif}.YO3Nla_i18nFontFamily:lang(ja){font-family:adobe-clean-han-japanese,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Osaka,YuGothic,Yu Gothic,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,sans-serif}.YO3Nla_spectrum-FocusRing-ring{--spectrum-focus-ring-border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-focus-ring-gap:var(--spectrum-alias-input-focusring-gap);--spectrum-focus-ring-size:var(--spectrum-alias-input-focusring-size);--spectrum-focus-ring-border-size:0px;--spectrum-focus-ring-color:var(--spectrum-high-contrast-focus-ring-color,var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)))}.YO3Nla_spectrum-FocusRing-ring:after{border-radius:calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));content:"";margin:calc(-1*var(--spectrum-focus-ring-border-size));pointer-events:none;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-out,margin var(--spectrum-global-animation-duration-100,.13s)ease-out;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.YO3Nla_spectrum-FocusRing.YO3Nla_focus-ring:after{margin:calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size));box-shadow:0 0 0 var(--spectrum-focus-ring-size)var(--spectrum-focus-ring-color)}.YO3Nla_spectrum-FocusRing--quiet:after{border-radius:0}.YO3Nla_spectrum-FocusRing--quiet.YO3Nla_focus-ring:after{margin:0 0 calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size))0;box-shadow:0 var(--spectrum-focus-ring-size)0 var(--spectrum-focus-ring-color)}.YO3Nla_spectrum-Textfield{min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));display:inline-flex;position:relative}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--quiet.YO3Nla_spectrum-Textfield--multiline .YO3Nla_spectrum-Textfield-input{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));overflow-x:hidden}.YO3Nla_spectrum-Textfield-input{box-sizing:border-box;border:var(--spectrum-alias-input-border-size)solid;border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));padding:3px var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))5px calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) - 1px);text-indent:0;height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));vertical-align:top;font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-in-out;-webkit-appearance:none;-moz-appearance:textfield;outline:none;inline-size:100%;margin:0;overflow:visible}.YO3Nla_spectrum-Textfield-input::placeholder,.YO3Nla_spectrum-Textfield-input.YO3Nla_is-placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));font-synthesis:none;transition:color var(--spectrum-global-animation-duration-100,.13s)ease-in-out;opacity:1}.YO3Nla_spectrum-Textfield-input::-moz-placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s)ease-in-out;opacity:1}.YO3Nla_spectrum-Textfield-input:lang(ja)::placeholder,.YO3Nla_spectrum-Textfield-input:lang(ja).YO3Nla_is-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(ja)::-moz-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(zh)::placeholder,.YO3Nla_spectrum-Textfield-input:lang(zh).YO3Nla_is-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(zh)::-moz-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(ko)::placeholder,.YO3Nla_spectrum-Textfield-input:lang(ko).YO3Nla_is-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(ko)::-moz-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(ar)::placeholder,.YO3Nla_spectrum-Textfield-input:lang(ar).YO3Nla_is-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(ar)::-moz-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(he)::placeholder,.YO3Nla_spectrum-Textfield-input:lang(he).YO3Nla_is-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input:lang(he)::-moz-placeholder{font-style:normal}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}.YO3Nla_spectrum-Textfield-input:disabled{resize:none;opacity:1}.YO3Nla_spectrum-Textfield-input:disabled::placeholder,.YO3Nla_spectrum-Textfield-input:disabled.YO3Nla_is-placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}.YO3Nla_spectrum-Textfield-input::-ms-clear{width:0;height:0}.YO3Nla_spectrum-Textfield-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.YO3Nla_spectrum-Textfield-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.YO3Nla_spectrum-Textfield-input:-moz-ui-invalid{box-shadow:none}.YO3Nla_spectrum-Textfield--multiline .YO3Nla_spectrum-Textfield-input{min-height:var(--spectrum-global-dimension-size-700);padding:3px var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))5px calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) - 1px);resize:none;height:auto;overflow:auto}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input{border-width:0 0 var(--spectrum-alias-input-border-size)0;border-radius:0;padding-inline-start:var(--spectrum-textfield-quiet-padding-x,0);padding-inline-end:var(--spectrum-textfield-quiet-padding-x,0)}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-input{padding-inline-end:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input,.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-input{padding-inline-end:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.YO3Nla_spectrum-Textfield-wrapper.YO3Nla_spectrum-Textfield-wrapper--quiet{grid-template-rows:auto}.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline{flex:auto;min-height:0}.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline .YO3Nla_spectrum-Textfield-input{line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height))}.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline.YO3Nla_spectrum-Textfield--quiet{flex:0 auto;max-height:100%}.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input{max-height:100%}.YO3Nla_spectrum-Textfield-validationIcon{pointer-events:all;transition:color var(--spectrum-global-animation-duration-100,.13s)ease-in-out;padding-inline-end:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2);position:absolute}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-validationIcon{padding-inline-end:0}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon{width:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));height:var(--spectrum-icon-alert-medium-height,var(--spectrum-global-dimension-size-225));top:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-height,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2))}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon{width:var(--spectrum-icon-checkmark-medium-width);height:var(--spectrum-icon-checkmark-medium-height);top:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-checkmark-medium-height)/2))}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon{height:var(--spectrum-icon-info-medium-height,var(--spectrum-global-dimension-size-225));width:var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225));top:var(--spectrum-global-dimension-size-85);transition:fill var(--spectrum-global-animation-duration-100,.13s)ease-in-out;display:block;position:absolute}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--spectrum-global-dimension-size-150)}.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon{padding-inline-start:calc(var(--spectrum-global-dimension-size-150) + var(--spectrum-global-dimension-size-225) + var(--spectrum-global-dimension-size-65))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon{padding-inline-start:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225)))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon~.YO3Nla_spectrum-Textfield-icon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon~.YO3Nla_spectrum-Textfield-icon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon~.YO3Nla_spectrum-Textfield-icon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon~.YO3Nla_spectrum-Textfield-icon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon~.YO3Nla_spectrum-Textfield-icon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon.YO3Nla_spectrum-Textfield--multiline{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader{top:calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-loader-circle-small-width,var(--spectrum-global-dimension-static-size-200))/2));position:absolute}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)) + calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)) + calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)) + calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)) + calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2))}.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(calc(calc(var(--spectrum-textfield-icon-frame)/2) - calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)) + calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2))}.YO3Nla_spectrum-Textfield--quiet:is(.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader){padding-inline-end:0}.YO3Nla_spectrum-Textfield-input{background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}.YO3Nla_spectrum-Textfield-input::placeholder,.YO3Nla_spectrum-Textfield-input.YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-alias-border-color-hover));box-shadow:none}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered::placeholder,.YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered.YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}.YO3Nla_spectrum-Textfield-input:active{background-color:var(--spectrum-textfield-background-color-down,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-mouse-focus));color:var(--spectrum-textfield-text-color-down,var(--spectrum-alias-text-color-down))}.YO3Nla_spectrum-Textfield-input:active::placeholder,.YO3Nla_spectrum-Textfield-input:active.YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}.YO3Nla_spectrum-Textfield-input:focus,.YO3Nla_spectrum-Textfield-input.YO3Nla_is-focused{border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield-input[disabled]{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.YO3Nla_spectrum-Textfield-input[disabled]::placeholder,.YO3Nla_spectrum-Textfield-input[disabled].YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.YO3Nla_spectrum-Textfield-input[disabled]~.YO3Nla_spectrum-Textfield-icon{fill:var(--spectrum-textfield-icon-color-disabled,var(--spectrum-global-color-gray-500))}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled::placeholder,.YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled.YO3Nla_is-placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled~.YO3Nla_spectrum-Textfield-icon{fill:var(--spectrum-textfield-icon-color-disabled,var(--spectrum-global-color-gray-500))}.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid.YO3Nla_is-hovered,.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid:active,.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid:focus,.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid.YO3Nla_is-focused{border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid.YO3Nla_focus-ring:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input{background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-alias-border-color))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-alias-border-color-hover))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-mouse-focus))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:focus,.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_is-focused{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:disabled,.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered{border-color:var(--spectrum-textfield-border-color-error-hover,var(--spectrum-semantic-negative-color-state-hover))}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input:active{border-color:var(--spectrum-textfield-border-color-error-down,var(--spectrum-semantic-negative-color-state-down))}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input:focus,.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input.YO3Nla_is-focused{border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield--quiet.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active){box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon{fill:var(--spectrum-alert-success-icon-color,var(--spectrum-semantic-positive-color-icon))}.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon{fill:var(--spectrum-alert-error-icon-color,var(--spectrum-semantic-negative-color-icon))}@media (forced-colors:active){.YO3Nla_spectrum-Textfield-input{--spectrum-textfield-border-color:CanvasText;--spectrum-textfield-text-color-disabled:GrayText;--spectrum-textfield-border-color-disabled:GrayText;--spectrum-textfield-quiet-border-color-disabled:GrayText;--spectrum-textfield-quiet-border-color-key-focus:Highlight;--spectrum-textfield-border-color-key-focus:Highlight;--spectrum-textfield-placeholder-text-color:GrayText;--spectrum-textfield-placeholder-text-color-hover:GrayText}.YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring{outline:2px solid Highlight;outline:2px solid Highlight}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring{forced-color-adjust:none;box-shadow:0 1px 0 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));outline:0}.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring .YO3Nla_spectrum-Textfield-input{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}}
package/dist/main.js CHANGED
@@ -2,6 +2,7 @@ require("./main.css");
2
2
  var $74aPB$reactariautils = require("@react-aria/utils");
3
3
  var $74aPB$react = require("react");
4
4
  var $74aPB$reactstatelyutils = require("@react-stately/utils");
5
+ var $74aPB$reactspectrumform = require("@react-spectrum/form");
5
6
  var $74aPB$reactspectrumprovider = require("@react-spectrum/provider");
6
7
  var $74aPB$reactariatextfield = require("@react-aria/textfield");
7
8
  var $74aPB$spectrumiconsuiAlertMedium = require("@spectrum-icons/ui/AlertMedium");
@@ -11,9 +12,11 @@ var $74aPB$reactspectrumlabel = require("@react-spectrum/label");
11
12
  var $74aPB$reactariafocus = require("@react-aria/focus");
12
13
  var $74aPB$reactariainteractions = require("@react-aria/interactions");
13
14
 
15
+
14
16
  function $parcel$export(e, n, v, s) {
15
17
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
16
18
  }
19
+
17
20
  function $parcel$interopDefault(a) {
18
21
  return a && a.__esModule ? a.default : a;
19
22
  }
@@ -133,7 +136,7 @@ $40cb3a00c193680f$export$9fcb3d6af94a9d12 = `YO3Nla_spectrum-Textfield-wrapper--
133
136
 
134
137
 
135
138
  function $86793250183ac29e$var$TextFieldBase(props, ref) {
136
- let { validationState: validationState, icon: icon, isQuiet: isQuiet = false, isDisabled: isDisabled, multiLine: multiLine, autoFocus: autoFocus, inputClassName: inputClassName, wrapperChildren: wrapperChildren, labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, inputRef: userInputRef, isLoading: isLoading, loadingIndicator: loadingIndicator, validationIconClassName: validationIconClassName, disableFocusRing: disableFocusRing } = props;
139
+ let { validationState: validationState = props.isInvalid ? "invalid" : null, icon: icon, isQuiet: isQuiet = false, isDisabled: isDisabled, multiLine: multiLine, autoFocus: autoFocus, inputClassName: inputClassName, wrapperChildren: wrapperChildren, labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, inputRef: userInputRef, isLoading: isLoading, loadingIndicator: loadingIndicator, validationIconClassName: validationIconClassName, disableFocusRing: disableFocusRing } = props;
137
140
  let { hoverProps: hoverProps, isHovered: isHovered } = (0, $74aPB$reactariainteractions.useHover)({
138
141
  isDisabled: isDisabled
139
142
  });
@@ -203,11 +206,14 @@ const $86793250183ac29e$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $74aPB$react
203
206
 
204
207
 
205
208
 
209
+
206
210
  function $eec649e464f3832d$var$TextArea(props, ref) {
207
211
  props = (0, $74aPB$reactspectrumprovider.useProviderProps)(props);
212
+ props = (0, $74aPB$reactspectrumform.useFormProps)(props);
208
213
  let { isDisabled: isDisabled = false, isQuiet: isQuiet = false, isReadOnly: isReadOnly = false, isRequired: isRequired = false, onChange: onChange, ...otherProps } = props;
214
+ var _props_defaultValue;
209
215
  // not in stately because this is so we know when to re-measure, which is a spectrum design
210
- let [inputValue, setInputValue] = (0, $74aPB$reactstatelyutils.useControlledState)(props.value, props.defaultValue, ()=>{});
216
+ let [inputValue, setInputValue] = (0, $74aPB$reactstatelyutils.useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : "", ()=>{});
211
217
  let inputRef = (0, $74aPB$react.useRef)(null);
212
218
  let onHeightChange = (0, $74aPB$react.useCallback)(()=>{
213
219
  // Quiet textareas always grow based on their text content.
@@ -241,7 +247,7 @@ function $eec649e464f3832d$var$TextArea(props, ref) {
241
247
  inputRef
242
248
  ]);
243
249
  if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text");
244
- let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $74aPB$reactariatextfield.useTextField)({
250
+ let result = (0, $74aPB$reactariatextfield.useTextField)({
245
251
  ...props,
246
252
  onChange: (0, $74aPB$reactariautils.chain)(onChange, setInputValue),
247
253
  inputElementType: "textarea"
@@ -250,10 +256,7 @@ function $eec649e464f3832d$var$TextArea(props, ref) {
250
256
  ...otherProps,
251
257
  ref: ref,
252
258
  inputRef: inputRef,
253
- labelProps: labelProps,
254
- inputProps: inputProps,
255
- descriptionProps: descriptionProps,
256
- errorMessageProps: errorMessageProps,
259
+ ...result,
257
260
  multiLine: true,
258
261
  isDisabled: isDisabled,
259
262
  isQuiet: isQuiet,
@@ -282,17 +285,16 @@ function $eec649e464f3832d$var$TextArea(props, ref) {
282
285
 
283
286
 
284
287
 
288
+
285
289
  function $34fd51d50eb4b056$var$TextField(props, ref) {
286
290
  props = (0, $74aPB$reactspectrumprovider.useProviderProps)(props);
291
+ props = (0, $74aPB$reactspectrumform.useFormProps)(props);
287
292
  let inputRef = (0, $74aPB$react.useRef)(null);
288
- let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $74aPB$reactariatextfield.useTextField)(props, inputRef);
293
+ let result = (0, $74aPB$reactariatextfield.useTextField)(props, inputRef);
289
294
  if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text");
290
295
  return /*#__PURE__*/ (0, ($parcel$interopDefault($74aPB$react))).createElement((0, $86793250183ac29e$export$d22444a338b6e3c2), {
291
296
  ...props,
292
- labelProps: labelProps,
293
- inputProps: inputProps,
294
- descriptionProps: descriptionProps,
295
- errorMessageProps: errorMessageProps,
297
+ ...result,
296
298
  ref: ref,
297
299
  inputRef: inputRef
298
300
  });
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C;ACZ1C;;;;;;;;;;CAUC;;ACVD;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACVD,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AArBA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,0BAA0B,EAAE,0CAA0C,CAAC;AAC/G,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAuC,CAAC,0BAA0B,EAAE,0CAAqC,CAAC;AAC1G,4CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,4CAAkD,CAAC,oCAAoC,CAAC;AACxF,4CAA8C,CAAC,iCAAiC,EAAE,0CAA4C,CAAC;AAC/H,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,0CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAA6C,CAAC,gCAAgC,EAAE,0CAAiC,CAAC;AAClH,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAA+C,CAAC,iCAAiC,CAAC;AAClF,4CAAsD,CAAC,wCAAwC,CAAC;;;;;ADkBhG,SAAS,oCAAc,KAAyB,EAAE,GAAsB;IACtE,IAAI,mBACF,eAAe,QACf,IAAI,WACJ,UAAU,mBACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,mBACd,eAAe,cACf,UAAU,cACV,UAAU,oBACV,gBAAgB,qBAChB,iBAAiB,EACjB,UAAU,YAAY,aACtB,SAAS,oBACT,gBAAgB,2BAChB,uBAAuB,oBACvB,gBAAgB,EACjB,GAAG;IACJ,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAkB;IACpC,IAAI,kBAAkB,CAAA,GAAA,mBAAK,EAA0C;IACrE,IAAI,WAAW,gBAAgB;IAE/B,sCAAsC;IACtC,CAAA,GAAA,gCAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,4CAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,SACX,SAAS,QAAQ;YAErB;YACA;gBACE,OAAO,SAAS;YAClB;QACF,CAAA;IAEA,IAAI,cAAiC,YAAY,aAAa;IAC9D,IAAI,YAAY,oBAAoB,aAAa,CAAC;IAElD,IAAI,MAAM;QACR,IAAI,mBAAmB,CAAA,GAAA,oCAAS,EAC9B,CAAA,GAAA,gEAAK,GACL,KAAK,SAAS,KAAK,MAAM,kBACzB;QAGF,qBAAO,CAAA,GAAA,yBAAW,EAAE,MAAM;8BACxB;YACA,MAAM;QACR;IACF;IAEA,IAAI,iBAAiB,0BAAY,0DAAC,CAAA,GAAA,2DAAU,yBAAO,0DAAC,CAAA,GAAA,+DAAc;IAClE,IAAI,2BAAa,CAAA,GAAA,yBAAW,EAAE,gBAAgB;QAC5C,kBAAkB,CAAA,GAAA,oCAAS,EACzB,CAAA,GAAA,gEAAK,GACL,qCACA;IAEJ;IAEA,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW,EAAE;QAC9C,aAAa;mBACb;IACF;IAEA,IAAI,0BACF,0DAAC;QACC,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,gEAAK,GACL,sBACA;YACE,+BAA+B;YAC/B,6BAA6B,oBAAoB,WAAW,CAAC;YAC7D,gCAAgC;YAChC,6BAA6B;YAC7B,iCAAiC;YACjC,cAAc,CAAC,oBAAoB;QACrC;qBAGJ,0DAAC;QACE,GAAG,CAAA,GAAA,gCAAS,EAAE,YAAY,YAAY,WAAW;QAClD,KAAK;QACL,MAAM,YAAY,IAAI;QACtB,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,gEAAK,GACL,4BACA;YACE,gCAAgC;YAChC,cAAc;QAChB,GACA;QAGL,MACA,mBAAmB,CAAC,aAAa,CAAC,aAAa,aAAa,MAC5D,aAAa,kBACb;IAIL,qBACE,0DAAC,CAAA,GAAA,+BAAI;QACF,GAAG,KAAK;QACT,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,kBACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,gEAAK,GACL,8BACA;YACE,qCAAqC;QACvC;QAGJ,eAAe;QACf,KAAK;OACJ;AAGP;AAEA,MAAM,0DAAiB,CAAA,GAAA,uBAAS,EAAE;;;;;;ADnJlC,SAAS,+BAAS,KAA6B,EAAE,GAAsB;IACrE,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,cACF,aAAa,gBACb,UAAU,mBACV,aAAa,mBACb,aAAa,iBACb,QAAQ,EACR,GAAG,YACJ,GAAG;IAEJ,2FAA2F;IAC3F,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,2CAAiB,EAAE,MAAM,OAAO,MAAM,cAAc,KAAO;IAC7F,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAuB;IAE3C,IAAI,iBAAiB,CAAA,GAAA,wBAAU,EAAE;QAC/B,2DAA2D;QAC3D,6EAA6E;QAC7E,IAAI,AAAC,CAAA,WAAW,CAAC,MAAM,MAAK,KAAM,SAAS,SAAS;YAClD,IAAI,QAAQ,SAAS;YACrB,IAAI,gBAAgB,MAAM,MAAM;YAChC,IAAI,eAAe,MAAM,MAAM;YAC/B,6FAA6F;YAC7F,2EAA2E;YAC3E,mFAAmF;YACnF,IAAI,YAAY,mBAAmB,MAAM;YACzC,IAAI,CAAC,WACH,MAAM,MAAM,WAAW;YAEzB,MAAM,MAAM,YAAY;YACxB,MAAM,MAAM,SAAS;YACrB,+DAA+D;YAC/D,MAAM,MAAM,SAAS,CAAC,EAAE,MAAM,eAAgB,CAAA,MAAM,eAAe,MAAM,YAAW,EAAG,EAAE,CAAC;YAC1F,MAAM,MAAM,WAAW;YACvB,MAAM,MAAM,YAAY;QAC1B;IACF,GAAG;QAAC;QAAS;QAAU,MAAM;KAAO;IAEpC,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,SAAS,SACX;IAEJ,GAAG;QAAC;QAAgB;QAAY;KAAS;IAEzC,IAAI,MAAM,aACR,QAAQ,KAAK;IAGf,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,sCAAW,EAAE;QAC/E,GAAG,KAAK;QACR,UAAU,CAAA,GAAA,2BAAI,EAAE,UAAU;QAC1B,kBAAkB;IACpB,GAAG;IAEH,qBACE,0DAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACV,YAAY;QACZ,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,WAAA;QACA,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,YAAY;;AAElB;AAEA;;;;CAIC,GACD,IAAI,0DAAY,CAAA,GAAA,sCAAI,EAAE,WAAW;;;AGhGjC;;;;;;;;;;CAUC;;;;AAQD,SAAS,gCAAU,KAA6B,EAAE,GAAsB;IACtE,QAAQ,CAAA,GAAA,6CAAe,EAAE;IAEzB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IACxC,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,sCAAW,EAAE,OAAO;IAExF,IAAI,MAAM,aACR,QAAQ,KAAK;IAGf,qBACE,0DAAC,CAAA,GAAA,yCAAY;QACV,GAAG,KAAK;QACT,YAAY;QACZ,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,KAAK;QACL,UAAU;;AAEhB;AAEA;;;;CAIC,GACD,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE;;","sources":["packages/@react-spectrum/textfield/src/index.ts","packages/@react-spectrum/textfield/src/TextArea.tsx","packages/@react-spectrum/textfield/src/TextFieldBase.tsx","packages/@adobe/spectrum-css-temp/components/textfield/vars.css","packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {TextArea} from './TextArea';\nexport {TextField} from './TextField';\nexport {TextFieldBase} from './TextFieldBase';\nexport type {SpectrumTextFieldProps} from '@react-types/textfield';\n","/*\n * Copyright 2020 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 {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n isDisabled = false,\n isQuiet = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n ...otherProps\n } = props;\n\n // not in stately because this is so we know when to re-measure, which is a spectrum design\n let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});\n let inputRef = useRef<HTMLTextAreaElement>(null);\n\n let onHeightChange = useCallback(() => {\n // Quiet textareas always grow based on their text content.\n // Standard textareas also grow by default, unless an explicit height is set.\n if ((isQuiet || !props.height) && inputRef.current) {\n let input = inputRef.current;\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 }, [isQuiet, inputRef, props.height]);\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n onHeightChange();\n }\n }, [onHeightChange, inputValue, inputRef]);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n }\n\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({\n ...props,\n onChange: chain(onChange, setInputValue),\n inputElementType: 'textarea'\n }, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n multiLine\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n isReadOnly={isReadOnly}\n isRequired={isRequired} />\n );\n}\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 */\nlet _TextArea = React.forwardRef(TextArea);\nexport {_TextArea as TextArea};\n","/*\n * Copyright 2020 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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {mergeProps} from '@react-aria/utils';\nimport {PressEvents} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {\n wrapperChildren?: ReactElement | ReactElement[],\n inputClassName?: string,\n validationIconClassName?: string,\n multiLine?: boolean,\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n descriptionProps?: HTMLAttributes<HTMLElement>,\n errorMessageProps?: HTMLAttributes<HTMLElement>,\n inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>,\n loadingIndicator?: ReactElement,\n isLoading?: boolean,\n disableFocusRing?: boolean\n}\n\nfunction TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {\n let {\n validationState,\n icon,\n isQuiet = false,\n isDisabled,\n multiLine,\n autoFocus,\n inputClassName,\n wrapperChildren,\n labelProps,\n inputProps,\n descriptionProps,\n errorMessageProps,\n inputRef: userInputRef,\n isLoading,\n loadingIndicator,\n validationIconClassName,\n disableFocusRing\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let domRef = useRef<HTMLDivElement>(null);\n let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n let inputRef = userInputRef || defaultInputRef;\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 let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n let isInvalid = validationState === 'invalid' && !isDisabled;\n\n if (icon) {\n let UNSAFE_className = classNames(\n styles,\n icon.props && icon.props.UNSAFE_className,\n 'spectrum-Textfield-icon'\n );\n\n icon = cloneElement(icon, {\n UNSAFE_className,\n size: 'S'\n });\n }\n\n let validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;\n let validation = cloneElement(validationIcon, {\n UNSAFE_className: classNames(\n styles,\n 'spectrum-Textfield-validationIcon',\n validationIconClassName\n )\n });\n\n let {focusProps, isFocusVisible} = useFocusRing({\n isTextInput: true,\n autoFocus\n });\n\n let textField = (\n <div\n className={\n classNames(\n styles,\n 'spectrum-Textfield',\n {\n 'spectrum-Textfield--invalid': isInvalid,\n 'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n 'spectrum-Textfield--loadable': loadingIndicator,\n 'spectrum-Textfield--quiet': isQuiet,\n 'spectrum-Textfield--multiline': multiLine,\n 'focus-ring': !disableFocusRing && isFocusVisible\n }\n )\n }>\n <ElementType\n {...mergeProps(inputProps, hoverProps, focusProps)}\n ref={inputRef as any}\n rows={multiLine ? 1 : undefined}\n className={\n classNames(\n styles,\n 'spectrum-Textfield-input',\n {\n 'spectrum-Textfield-inputIcon': icon,\n 'is-hovered': isHovered\n },\n inputClassName\n )\n } />\n {icon}\n {validationState && !isLoading && !isDisabled ? validation : null}\n {isLoading && loadingIndicator}\n {wrapperChildren}\n </div>\n );\n\n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n wrapperClassName={\n classNames(\n styles,\n 'spectrum-Textfield-wrapper',\n {\n 'spectrum-Textfield-wrapper--quiet': isQuiet\n }\n )\n }\n showErrorIcon={false}\n ref={domRef}>\n {textField}\n </Field>\n );\n}\n\nconst _TextFieldBase = forwardRef(TextFieldBase);\nexport {_TextFieldBase as TextFieldBase};\n","/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 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 React, {forwardRef, Ref, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n\n let inputRef = useRef<HTMLInputElement>(null);\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...props}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n ref={ref}\n inputRef={inputRef} />\n );\n}\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 */\nconst _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n"],"names":[],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/textfield/src/index.ts","packages/@react-spectrum/textfield/src/TextArea.tsx","packages/@react-spectrum/textfield/src/TextFieldBase.tsx","packages/@adobe/spectrum-css-temp/components/textfield/vars.css","packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {TextArea} from './TextArea';\nexport {TextField} from './TextField';\nexport {TextFieldBase} from './TextFieldBase';\nexport type {SpectrumTextFieldProps} from '@react-types/textfield';\n","/*\n * Copyright 2020 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 {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useRef} from 'react';\nimport {SpectrumTextAreaProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n isDisabled = false,\n isQuiet = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n ...otherProps\n } = props;\n\n // not in stately because this is so we know when to re-measure, which is a spectrum design\n let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue ?? '', () => {});\n let inputRef = useRef<HTMLTextAreaElement>(null);\n\n let onHeightChange = useCallback(() => {\n // Quiet textareas always grow based on their text content.\n // Standard textareas also grow by default, unless an explicit height is set.\n if ((isQuiet || !props.height) && inputRef.current) {\n let input = inputRef.current;\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 }, [isQuiet, inputRef, props.height]);\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n onHeightChange();\n }\n }, [onHeightChange, inputValue, inputRef]);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n }\n\n let result = useTextField({\n ...props,\n onChange: chain(onChange, setInputValue),\n inputElementType: 'textarea'\n }, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n {...result}\n multiLine\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n isReadOnly={isReadOnly}\n isRequired={isRequired} />\n );\n}\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 */\nlet _TextArea = React.forwardRef(TextArea);\nexport {_TextArea as TextArea};\n","/*\n * Copyright 2020 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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {mergeProps} from '@react-aria/utils';\nimport {PressEvents, ValidationResult} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | 'validate'>, PressEvents, Partial<ValidationResult> {\n wrapperChildren?: ReactElement | ReactElement[],\n inputClassName?: string,\n validationIconClassName?: string,\n multiLine?: boolean,\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n descriptionProps?: HTMLAttributes<HTMLElement>,\n errorMessageProps?: HTMLAttributes<HTMLElement>,\n inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>,\n loadingIndicator?: ReactElement,\n isLoading?: boolean,\n disableFocusRing?: boolean\n}\n\nfunction TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {\n let {\n validationState = props.isInvalid ? 'invalid' : null,\n icon,\n isQuiet = false,\n isDisabled,\n multiLine,\n autoFocus,\n inputClassName,\n wrapperChildren,\n labelProps,\n inputProps,\n descriptionProps,\n errorMessageProps,\n inputRef: userInputRef,\n isLoading,\n loadingIndicator,\n validationIconClassName,\n disableFocusRing\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let domRef = useRef<HTMLDivElement>(null);\n let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n let inputRef = userInputRef || defaultInputRef;\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 let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n let isInvalid = validationState === 'invalid' && !isDisabled;\n\n if (icon) {\n let UNSAFE_className = classNames(\n styles,\n icon.props && icon.props.UNSAFE_className,\n 'spectrum-Textfield-icon'\n );\n\n icon = cloneElement(icon, {\n UNSAFE_className,\n size: 'S'\n });\n }\n\n let validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;\n let validation = cloneElement(validationIcon, {\n UNSAFE_className: classNames(\n styles,\n 'spectrum-Textfield-validationIcon',\n validationIconClassName\n )\n });\n\n let {focusProps, isFocusVisible} = useFocusRing({\n isTextInput: true,\n autoFocus\n });\n\n let textField = (\n <div\n className={\n classNames(\n styles,\n 'spectrum-Textfield',\n {\n 'spectrum-Textfield--invalid': isInvalid,\n 'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n 'spectrum-Textfield--loadable': loadingIndicator,\n 'spectrum-Textfield--quiet': isQuiet,\n 'spectrum-Textfield--multiline': multiLine,\n 'focus-ring': !disableFocusRing && isFocusVisible\n }\n )\n }>\n <ElementType\n {...mergeProps(inputProps, hoverProps, focusProps)}\n ref={inputRef as any}\n rows={multiLine ? 1 : undefined}\n className={\n classNames(\n styles,\n 'spectrum-Textfield-input',\n {\n 'spectrum-Textfield-inputIcon': icon,\n 'is-hovered': isHovered\n },\n inputClassName\n )\n } />\n {icon}\n {validationState && !isLoading && !isDisabled ? validation : null}\n {isLoading && loadingIndicator}\n {wrapperChildren}\n </div>\n );\n\n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n wrapperClassName={\n classNames(\n styles,\n 'spectrum-Textfield-wrapper',\n {\n 'spectrum-Textfield-wrapper--quiet': isQuiet\n }\n )\n }\n showErrorIcon={false}\n ref={domRef}>\n {textField}\n </Field>\n );\n}\n\nconst _TextFieldBase = forwardRef(TextFieldBase);\nexport {_TextFieldBase as TextFieldBase};\n","/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 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 React, {forwardRef, Ref, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n\n let inputRef = useRef<HTMLInputElement>(null);\n let result = useTextField(props, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...props}\n {...result}\n ref={ref}\n inputRef={inputRef} />\n );\n}\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 */\nconst _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n"],"names":[],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -2,6 +2,7 @@ import "./main.css";
2
2
  import {useLayoutEffect as $evhxb$useLayoutEffect, chain as $evhxb$chain, mergeProps as $evhxb$mergeProps} from "@react-aria/utils";
3
3
  import $evhxb$react, {useRef as $evhxb$useRef, useCallback as $evhxb$useCallback, useImperativeHandle as $evhxb$useImperativeHandle, cloneElement as $evhxb$cloneElement, forwardRef as $evhxb$forwardRef} from "react";
4
4
  import {useControlledState as $evhxb$useControlledState} from "@react-stately/utils";
5
+ import {useFormProps as $evhxb$useFormProps} from "@react-spectrum/form";
5
6
  import {useProviderProps as $evhxb$useProviderProps} from "@react-spectrum/provider";
6
7
  import {useTextField as $evhxb$useTextField} from "@react-aria/textfield";
7
8
  import $evhxb$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
@@ -11,9 +12,11 @@ import {Field as $evhxb$Field} from "@react-spectrum/label";
11
12
  import {useFocusRing as $evhxb$useFocusRing} from "@react-aria/focus";
12
13
  import {useHover as $evhxb$useHover} from "@react-aria/interactions";
13
14
 
15
+
14
16
  function $parcel$interopDefault(a) {
15
17
  return a && a.__esModule ? a.default : a;
16
18
  }
19
+
17
20
  function $parcel$export(e, n, v, s) {
18
21
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
19
22
  }
@@ -129,7 +132,7 @@ $c14528ddc146317f$export$9fcb3d6af94a9d12 = `YO3Nla_spectrum-Textfield-wrapper--
129
132
 
130
133
 
131
134
  function $599adb75312e6492$var$TextFieldBase(props, ref) {
132
- let { validationState: validationState, icon: icon, isQuiet: isQuiet = false, isDisabled: isDisabled, multiLine: multiLine, autoFocus: autoFocus, inputClassName: inputClassName, wrapperChildren: wrapperChildren, labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, inputRef: userInputRef, isLoading: isLoading, loadingIndicator: loadingIndicator, validationIconClassName: validationIconClassName, disableFocusRing: disableFocusRing } = props;
135
+ let { validationState: validationState = props.isInvalid ? "invalid" : null, icon: icon, isQuiet: isQuiet = false, isDisabled: isDisabled, multiLine: multiLine, autoFocus: autoFocus, inputClassName: inputClassName, wrapperChildren: wrapperChildren, labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, inputRef: userInputRef, isLoading: isLoading, loadingIndicator: loadingIndicator, validationIconClassName: validationIconClassName, disableFocusRing: disableFocusRing } = props;
133
136
  let { hoverProps: hoverProps, isHovered: isHovered } = (0, $evhxb$useHover)({
134
137
  isDisabled: isDisabled
135
138
  });
@@ -199,11 +202,14 @@ const $599adb75312e6492$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $evhxb$forwa
199
202
 
200
203
 
201
204
 
205
+
202
206
  function $cc187bf91f8eea73$var$TextArea(props, ref) {
203
207
  props = (0, $evhxb$useProviderProps)(props);
208
+ props = (0, $evhxb$useFormProps)(props);
204
209
  let { isDisabled: isDisabled = false, isQuiet: isQuiet = false, isReadOnly: isReadOnly = false, isRequired: isRequired = false, onChange: onChange, ...otherProps } = props;
210
+ var _props_defaultValue;
205
211
  // not in stately because this is so we know when to re-measure, which is a spectrum design
206
- let [inputValue, setInputValue] = (0, $evhxb$useControlledState)(props.value, props.defaultValue, ()=>{});
212
+ let [inputValue, setInputValue] = (0, $evhxb$useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : "", ()=>{});
207
213
  let inputRef = (0, $evhxb$useRef)(null);
208
214
  let onHeightChange = (0, $evhxb$useCallback)(()=>{
209
215
  // Quiet textareas always grow based on their text content.
@@ -237,7 +243,7 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
237
243
  inputRef
238
244
  ]);
239
245
  if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text");
240
- let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $evhxb$useTextField)({
246
+ let result = (0, $evhxb$useTextField)({
241
247
  ...props,
242
248
  onChange: (0, $evhxb$chain)(onChange, setInputValue),
243
249
  inputElementType: "textarea"
@@ -246,10 +252,7 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
246
252
  ...otherProps,
247
253
  ref: ref,
248
254
  inputRef: inputRef,
249
- labelProps: labelProps,
250
- inputProps: inputProps,
251
- descriptionProps: descriptionProps,
252
- errorMessageProps: errorMessageProps,
255
+ ...result,
253
256
  multiLine: true,
254
257
  isDisabled: isDisabled,
255
258
  isQuiet: isQuiet,
@@ -278,17 +281,16 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
278
281
 
279
282
 
280
283
 
284
+
281
285
  function $265457f9427aa380$var$TextField(props, ref) {
282
286
  props = (0, $evhxb$useProviderProps)(props);
287
+ props = (0, $evhxb$useFormProps)(props);
283
288
  let inputRef = (0, $evhxb$useRef)(null);
284
- let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $evhxb$useTextField)(props, inputRef);
289
+ let result = (0, $evhxb$useTextField)(props, inputRef);
285
290
  if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text");
286
291
  return /*#__PURE__*/ (0, $evhxb$react).createElement((0, $599adb75312e6492$export$d22444a338b6e3c2), {
287
292
  ...props,
288
- labelProps: labelProps,
289
- inputProps: inputProps,
290
- descriptionProps: descriptionProps,
291
- errorMessageProps: errorMessageProps,
293
+ ...result,
292
294
  ref: ref,
293
295
  inputRef: inputRef
294
296
  });
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C;ACZ1C;;;;;;;;;;CAUC;;ACVD;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACVD,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AArBA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,0BAA0B,EAAE,0CAA0C,CAAC;AAC/G,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAuC,CAAC,0BAA0B,EAAE,0CAAqC,CAAC;AAC1G,4CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,4CAAkD,CAAC,oCAAoC,CAAC;AACxF,4CAA8C,CAAC,iCAAiC,EAAE,0CAA4C,CAAC;AAC/H,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,0CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAA6C,CAAC,gCAAgC,EAAE,0CAAiC,CAAC;AAClH,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAA+C,CAAC,iCAAiC,CAAC;AAClF,4CAAsD,CAAC,wCAAwC,CAAC;;;;;ADkBhG,SAAS,oCAAc,KAAyB,EAAE,GAAsB;IACtE,IAAI,mBACF,eAAe,QACf,IAAI,WACJ,UAAU,mBACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,mBACd,eAAe,cACf,UAAU,cACV,UAAU,oBACV,gBAAgB,qBAChB,iBAAiB,EACjB,UAAU,YAAY,aACtB,SAAS,oBACT,gBAAgB,2BAChB,uBAAuB,oBACvB,gBAAgB,EACjB,GAAG;IACJ,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,kBAAkB,CAAA,GAAA,aAAK,EAA0C;IACrE,IAAI,WAAW,gBAAgB;IAE/B,sCAAsC;IACtC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yBAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,SACX,SAAS,QAAQ;YAErB;YACA;gBACE,OAAO,SAAS;YAClB;QACF,CAAA;IAEA,IAAI,cAAiC,YAAY,aAAa;IAC9D,IAAI,YAAY,oBAAoB,aAAa,CAAC;IAElD,IAAI,MAAM;QACR,IAAI,mBAAmB,CAAA,GAAA,iBAAS,EAC9B,CAAA,GAAA,gEAAK,GACL,KAAK,SAAS,KAAK,MAAM,kBACzB;QAGF,qBAAO,CAAA,GAAA,mBAAW,EAAE,MAAM;8BACxB;YACA,MAAM;QACR;IACF;IAEA,IAAI,iBAAiB,0BAAY,gCAAC,CAAA,GAAA,iCAAU,yBAAO,gCAAC,CAAA,GAAA,qCAAc;IAClE,IAAI,2BAAa,CAAA,GAAA,mBAAW,EAAE,gBAAgB;QAC5C,kBAAkB,CAAA,GAAA,iBAAS,EACzB,CAAA,GAAA,gEAAK,GACL,qCACA;IAEJ;IAEA,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAC9C,aAAa;mBACb;IACF;IAEA,IAAI,0BACF,gCAAC;QACC,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,gEAAK,GACL,sBACA;YACE,+BAA+B;YAC/B,6BAA6B,oBAAoB,WAAW,CAAC;YAC7D,gCAAgC;YAChC,6BAA6B;YAC7B,iCAAiC;YACjC,cAAc,CAAC,oBAAoB;QACrC;qBAGJ,gCAAC;QACE,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY,YAAY,WAAW;QAClD,KAAK;QACL,MAAM,YAAY,IAAI;QACtB,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,gEAAK,GACL,4BACA;YACE,gCAAgC;YAChC,cAAc;QAChB,GACA;QAGL,MACA,mBAAmB,CAAC,aAAa,CAAC,aAAa,aAAa,MAC5D,aAAa,kBACb;IAIL,qBACE,gCAAC,CAAA,GAAA,YAAI;QACF,GAAG,KAAK;QACT,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,kBACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,gEAAK,GACL,8BACA;YACE,qCAAqC;QACvC;QAGJ,eAAe;QACf,KAAK;OACJ;AAGP;AAEA,MAAM,0DAAiB,CAAA,GAAA,iBAAS,EAAE;;;;;;ADnJlC,SAAS,+BAAS,KAA6B,EAAE,GAAsB;IACrE,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,IAAI,cACF,aAAa,gBACb,UAAU,mBACV,aAAa,mBACb,aAAa,iBACb,QAAQ,EACR,GAAG,YACJ,GAAG;IAEJ,2FAA2F;IAC3F,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,yBAAiB,EAAE,MAAM,OAAO,MAAM,cAAc,KAAO;IAC7F,IAAI,WAAW,CAAA,GAAA,aAAK,EAAuB;IAE3C,IAAI,iBAAiB,CAAA,GAAA,kBAAU,EAAE;QAC/B,2DAA2D;QAC3D,6EAA6E;QAC7E,IAAI,AAAC,CAAA,WAAW,CAAC,MAAM,MAAK,KAAM,SAAS,SAAS;YAClD,IAAI,QAAQ,SAAS;YACrB,IAAI,gBAAgB,MAAM,MAAM;YAChC,IAAI,eAAe,MAAM,MAAM;YAC/B,6FAA6F;YAC7F,2EAA2E;YAC3E,mFAAmF;YACnF,IAAI,YAAY,mBAAmB,MAAM;YACzC,IAAI,CAAC,WACH,MAAM,MAAM,WAAW;YAEzB,MAAM,MAAM,YAAY;YACxB,MAAM,MAAM,SAAS;YACrB,+DAA+D;YAC/D,MAAM,MAAM,SAAS,CAAC,EAAE,MAAM,eAAgB,CAAA,MAAM,eAAe,MAAM,YAAW,EAAG,EAAE,CAAC;YAC1F,MAAM,MAAM,WAAW;YACvB,MAAM,MAAM,YAAY;QAC1B;IACF,GAAG;QAAC;QAAS;QAAU,MAAM;KAAO;IAEpC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,SAAS,SACX;IAEJ,GAAG;QAAC;QAAgB;QAAY;KAAS;IAEzC,IAAI,MAAM,aACR,QAAQ,KAAK;IAGf,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAC/E,GAAG,KAAK;QACR,UAAU,CAAA,GAAA,YAAI,EAAE,UAAU;QAC1B,kBAAkB;IACpB,GAAG;IAEH,qBACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACV,YAAY;QACZ,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,WAAA;QACA,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,YAAY;;AAElB;AAEA;;;;CAIC,GACD,IAAI,0DAAY,CAAA,GAAA,YAAI,EAAE,WAAW;;;AGhGjC;;;;;;;;;;CAUC;;;;AAQD,SAAS,gCAAU,KAA6B,EAAE,GAAsB;IACtE,QAAQ,CAAA,GAAA,uBAAe,EAAE;IAEzB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IACxC,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE,OAAO;IAExF,IAAI,MAAM,aACR,QAAQ,KAAK;IAGf,qBACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,KAAK;QACT,YAAY;QACZ,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,KAAK;QACL,UAAU;;AAEhB;AAEA;;;;CAIC,GACD,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE;;","sources":["packages/@react-spectrum/textfield/src/index.ts","packages/@react-spectrum/textfield/src/TextArea.tsx","packages/@react-spectrum/textfield/src/TextFieldBase.tsx","packages/@adobe/spectrum-css-temp/components/textfield/vars.css","packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {TextArea} from './TextArea';\nexport {TextField} from './TextField';\nexport {TextFieldBase} from './TextFieldBase';\nexport type {SpectrumTextFieldProps} from '@react-types/textfield';\n","/*\n * Copyright 2020 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 {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n isDisabled = false,\n isQuiet = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n ...otherProps\n } = props;\n\n // not in stately because this is so we know when to re-measure, which is a spectrum design\n let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});\n let inputRef = useRef<HTMLTextAreaElement>(null);\n\n let onHeightChange = useCallback(() => {\n // Quiet textareas always grow based on their text content.\n // Standard textareas also grow by default, unless an explicit height is set.\n if ((isQuiet || !props.height) && inputRef.current) {\n let input = inputRef.current;\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 }, [isQuiet, inputRef, props.height]);\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n onHeightChange();\n }\n }, [onHeightChange, inputValue, inputRef]);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n }\n\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({\n ...props,\n onChange: chain(onChange, setInputValue),\n inputElementType: 'textarea'\n }, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n multiLine\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n isReadOnly={isReadOnly}\n isRequired={isRequired} />\n );\n}\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 */\nlet _TextArea = React.forwardRef(TextArea);\nexport {_TextArea as TextArea};\n","/*\n * Copyright 2020 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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {mergeProps} from '@react-aria/utils';\nimport {PressEvents} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {\n wrapperChildren?: ReactElement | ReactElement[],\n inputClassName?: string,\n validationIconClassName?: string,\n multiLine?: boolean,\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n descriptionProps?: HTMLAttributes<HTMLElement>,\n errorMessageProps?: HTMLAttributes<HTMLElement>,\n inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>,\n loadingIndicator?: ReactElement,\n isLoading?: boolean,\n disableFocusRing?: boolean\n}\n\nfunction TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {\n let {\n validationState,\n icon,\n isQuiet = false,\n isDisabled,\n multiLine,\n autoFocus,\n inputClassName,\n wrapperChildren,\n labelProps,\n inputProps,\n descriptionProps,\n errorMessageProps,\n inputRef: userInputRef,\n isLoading,\n loadingIndicator,\n validationIconClassName,\n disableFocusRing\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let domRef = useRef<HTMLDivElement>(null);\n let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n let inputRef = userInputRef || defaultInputRef;\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 let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n let isInvalid = validationState === 'invalid' && !isDisabled;\n\n if (icon) {\n let UNSAFE_className = classNames(\n styles,\n icon.props && icon.props.UNSAFE_className,\n 'spectrum-Textfield-icon'\n );\n\n icon = cloneElement(icon, {\n UNSAFE_className,\n size: 'S'\n });\n }\n\n let validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;\n let validation = cloneElement(validationIcon, {\n UNSAFE_className: classNames(\n styles,\n 'spectrum-Textfield-validationIcon',\n validationIconClassName\n )\n });\n\n let {focusProps, isFocusVisible} = useFocusRing({\n isTextInput: true,\n autoFocus\n });\n\n let textField = (\n <div\n className={\n classNames(\n styles,\n 'spectrum-Textfield',\n {\n 'spectrum-Textfield--invalid': isInvalid,\n 'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n 'spectrum-Textfield--loadable': loadingIndicator,\n 'spectrum-Textfield--quiet': isQuiet,\n 'spectrum-Textfield--multiline': multiLine,\n 'focus-ring': !disableFocusRing && isFocusVisible\n }\n )\n }>\n <ElementType\n {...mergeProps(inputProps, hoverProps, focusProps)}\n ref={inputRef as any}\n rows={multiLine ? 1 : undefined}\n className={\n classNames(\n styles,\n 'spectrum-Textfield-input',\n {\n 'spectrum-Textfield-inputIcon': icon,\n 'is-hovered': isHovered\n },\n inputClassName\n )\n } />\n {icon}\n {validationState && !isLoading && !isDisabled ? validation : null}\n {isLoading && loadingIndicator}\n {wrapperChildren}\n </div>\n );\n\n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n wrapperClassName={\n classNames(\n styles,\n 'spectrum-Textfield-wrapper',\n {\n 'spectrum-Textfield-wrapper--quiet': isQuiet\n }\n )\n }\n showErrorIcon={false}\n ref={domRef}>\n {textField}\n </Field>\n );\n}\n\nconst _TextFieldBase = forwardRef(TextFieldBase);\nexport {_TextFieldBase as TextFieldBase};\n","/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 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 React, {forwardRef, Ref, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n\n let inputRef = useRef<HTMLInputElement>(null);\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...props}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n ref={ref}\n inputRef={inputRef} />\n );\n}\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 */\nconst _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n"],"names":[],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/textfield/src/index.ts","packages/@react-spectrum/textfield/src/TextArea.tsx","packages/@react-spectrum/textfield/src/TextFieldBase.tsx","packages/@adobe/spectrum-css-temp/components/textfield/vars.css","packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {TextArea} from './TextArea';\nexport {TextField} from './TextField';\nexport {TextFieldBase} from './TextFieldBase';\nexport type {SpectrumTextFieldProps} from '@react-types/textfield';\n","/*\n * Copyright 2020 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 {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useRef} from 'react';\nimport {SpectrumTextAreaProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n isDisabled = false,\n isQuiet = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n ...otherProps\n } = props;\n\n // not in stately because this is so we know when to re-measure, which is a spectrum design\n let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue ?? '', () => {});\n let inputRef = useRef<HTMLTextAreaElement>(null);\n\n let onHeightChange = useCallback(() => {\n // Quiet textareas always grow based on their text content.\n // Standard textareas also grow by default, unless an explicit height is set.\n if ((isQuiet || !props.height) && inputRef.current) {\n let input = inputRef.current;\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 }, [isQuiet, inputRef, props.height]);\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n onHeightChange();\n }\n }, [onHeightChange, inputValue, inputRef]);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n }\n\n let result = useTextField({\n ...props,\n onChange: chain(onChange, setInputValue),\n inputElementType: 'textarea'\n }, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n {...result}\n multiLine\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n isReadOnly={isReadOnly}\n isRequired={isRequired} />\n );\n}\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 */\nlet _TextArea = React.forwardRef(TextArea);\nexport {_TextArea as TextArea};\n","/*\n * Copyright 2020 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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {mergeProps} from '@react-aria/utils';\nimport {PressEvents, ValidationResult} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | 'validate'>, PressEvents, Partial<ValidationResult> {\n wrapperChildren?: ReactElement | ReactElement[],\n inputClassName?: string,\n validationIconClassName?: string,\n multiLine?: boolean,\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n descriptionProps?: HTMLAttributes<HTMLElement>,\n errorMessageProps?: HTMLAttributes<HTMLElement>,\n inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>,\n loadingIndicator?: ReactElement,\n isLoading?: boolean,\n disableFocusRing?: boolean\n}\n\nfunction TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {\n let {\n validationState = props.isInvalid ? 'invalid' : null,\n icon,\n isQuiet = false,\n isDisabled,\n multiLine,\n autoFocus,\n inputClassName,\n wrapperChildren,\n labelProps,\n inputProps,\n descriptionProps,\n errorMessageProps,\n inputRef: userInputRef,\n isLoading,\n loadingIndicator,\n validationIconClassName,\n disableFocusRing\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let domRef = useRef<HTMLDivElement>(null);\n let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n let inputRef = userInputRef || defaultInputRef;\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 let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n let isInvalid = validationState === 'invalid' && !isDisabled;\n\n if (icon) {\n let UNSAFE_className = classNames(\n styles,\n icon.props && icon.props.UNSAFE_className,\n 'spectrum-Textfield-icon'\n );\n\n icon = cloneElement(icon, {\n UNSAFE_className,\n size: 'S'\n });\n }\n\n let validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;\n let validation = cloneElement(validationIcon, {\n UNSAFE_className: classNames(\n styles,\n 'spectrum-Textfield-validationIcon',\n validationIconClassName\n )\n });\n\n let {focusProps, isFocusVisible} = useFocusRing({\n isTextInput: true,\n autoFocus\n });\n\n let textField = (\n <div\n className={\n classNames(\n styles,\n 'spectrum-Textfield',\n {\n 'spectrum-Textfield--invalid': isInvalid,\n 'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n 'spectrum-Textfield--loadable': loadingIndicator,\n 'spectrum-Textfield--quiet': isQuiet,\n 'spectrum-Textfield--multiline': multiLine,\n 'focus-ring': !disableFocusRing && isFocusVisible\n }\n )\n }>\n <ElementType\n {...mergeProps(inputProps, hoverProps, focusProps)}\n ref={inputRef as any}\n rows={multiLine ? 1 : undefined}\n className={\n classNames(\n styles,\n 'spectrum-Textfield-input',\n {\n 'spectrum-Textfield-inputIcon': icon,\n 'is-hovered': isHovered\n },\n inputClassName\n )\n } />\n {icon}\n {validationState && !isLoading && !isDisabled ? validation : null}\n {isLoading && loadingIndicator}\n {wrapperChildren}\n </div>\n );\n\n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n wrapperClassName={\n classNames(\n styles,\n 'spectrum-Textfield-wrapper',\n {\n 'spectrum-Textfield-wrapper--quiet': isQuiet\n }\n )\n }\n showErrorIcon={false}\n ref={domRef}>\n {textField}\n </Field>\n );\n}\n\nconst _TextFieldBase = forwardRef(TextFieldBase);\nexport {_TextFieldBase as TextFieldBase};\n","/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 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 React, {forwardRef, Ref, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n\n let inputRef = useRef<HTMLInputElement>(null);\n let result = useTextField(props, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...props}\n {...result}\n ref={ref}\n inputRef={inputRef} />\n );\n}\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 */\nconst _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n"],"names":[],"version":3,"file":"module.js.map"}
package/dist/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import { PressEvents } from "@react-types/shared";
1
+ import { PressEvents, ValidationResult } from "@react-types/shared";
2
2
  import React, { HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, RefObject, TextareaHTMLAttributes } from "react";
3
- import { SpectrumTextFieldProps, TextFieldRef } from "@react-types/textfield";
4
- interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {
3
+ import { SpectrumTextFieldProps, TextFieldRef, SpectrumTextAreaProps } from "@react-types/textfield";
4
+ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | 'validate'>, PressEvents, Partial<ValidationResult> {
5
5
  wrapperChildren?: ReactElement | ReactElement[];
6
6
  inputClassName?: string;
7
7
  validationIconClassName?: string;
@@ -21,7 +21,7 @@ export const TextFieldBase: React.ForwardRefExoticComponent<TextFieldBaseProps &
21
21
  * a sizable amount of text to enter. They allow for all customizations that
22
22
  * are available to text fields.
23
23
  */
24
- export let TextArea: React.ForwardRefExoticComponent<SpectrumTextFieldProps & React.RefAttributes<TextFieldRef>>;
24
+ export let TextArea: React.ForwardRefExoticComponent<SpectrumTextAreaProps & React.RefAttributes<TextFieldRef>>;
25
25
  /**
26
26
  * TextFields are text inputs that allow users to input custom text entries
27
27
  * with a keyboard. Various decorations can be displayed around the field to
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;AAwBA,4BAA6B,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAAE,WAAW;IACxF,eAAe,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IACnD,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,GAAG,uBAAuB,mBAAmB,CAAC,CAAC;IAChG,gBAAgB,CAAC,EAAE,eAAe,WAAW,CAAC,CAAC;IAC/C,iBAAiB,CAAC,EAAE,eAAe,WAAW,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,UAAU,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC7D,gBAAgB,CAAC,EAAE,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAkID,OAAA,MAAM,sGAA0C,CAAC;AC5EjD;;;;GAIG;AACH,OAAA,IAAI,qGAAsC,CAAC;ACxD3C;;;;GAIG;AACH,OAAA,MAAM,sGAAkC,CAAC;AC5BzC,YAAY,EAAC,sBAAsB,EAAC,MAAM,wBAAwB,CAAC","sources":["packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/TextFieldBase.tsx","packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/TextArea.tsx","packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/TextField.tsx","packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/index.ts","packages/@react-spectrum/textfield/src/index.ts"],"sourcesContent":[null,null,null,null,"/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {TextArea} from './TextArea';\nexport {TextField} from './TextField';\nexport {TextFieldBase} from './TextFieldBase';\nexport type {SpectrumTextFieldProps} from '@react-types/textfield';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;AAwBA,4BAA6B,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,CAAC,gBAAgB,CAAC;IAChI,eAAe,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IACnD,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,GAAG,uBAAuB,mBAAmB,CAAC,CAAC;IAChG,gBAAgB,CAAC,EAAE,eAAe,WAAW,CAAC,CAAC;IAC/C,iBAAiB,CAAC,EAAE,eAAe,WAAW,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,UAAU,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC7D,gBAAgB,CAAC,EAAE,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAkID,OAAA,MAAM,sGAA0C,CAAC;AC7EjD;;;;GAIG;AACH,OAAA,IAAI,oGAAsC,CAAC;ACxD3C;;;;GAIG;AACH,OAAA,MAAM,sGAAkC,CAAC;AC3BzC,YAAY,EAAC,sBAAsB,EAAC,MAAM,wBAAwB,CAAC","sources":["packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/TextFieldBase.tsx","packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/TextArea.tsx","packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/TextField.tsx","packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/index.ts","packages/@react-spectrum/textfield/src/index.ts"],"sourcesContent":[null,null,null,null,"/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {TextArea} from './TextArea';\nexport {TextField} from './TextField';\nexport {TextFieldBase} from './TextFieldBase';\nexport type {SpectrumTextFieldProps} from '@react-types/textfield';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/textfield",
3
- "version": "3.10.6",
3
+ "version": "3.11.0",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,17 +36,17 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/focus": "^3.14.2",
40
- "@react-aria/i18n": "^3.8.3",
41
- "@react-aria/interactions": "^3.19.0",
42
- "@react-aria/textfield": "^3.12.1",
43
- "@react-aria/utils": "^3.21.0",
44
- "@react-spectrum/label": "^3.15.0",
45
- "@react-spectrum/utils": "^3.11.0",
46
- "@react-stately/utils": "^3.8.0",
47
- "@react-types/shared": "^3.21.0",
48
- "@react-types/textfield": "^3.8.1",
49
- "@spectrum-icons/ui": "^3.6.0",
39
+ "@react-aria/focus": "^3.15.0",
40
+ "@react-aria/interactions": "^3.20.0",
41
+ "@react-aria/textfield": "^3.13.0",
42
+ "@react-aria/utils": "^3.22.0",
43
+ "@react-spectrum/form": "^3.7.0",
44
+ "@react-spectrum/label": "^3.16.0",
45
+ "@react-spectrum/utils": "^3.11.2",
46
+ "@react-stately/utils": "^3.9.0",
47
+ "@react-types/shared": "^3.22.0",
48
+ "@react-types/textfield": "^3.9.0",
49
+ "@spectrum-icons/ui": "^3.6.2",
50
50
  "@swc/helpers": "^0.5.0"
51
51
  },
52
52
  "devDependencies": {
@@ -60,5 +60,5 @@
60
60
  "publishConfig": {
61
61
  "access": "public"
62
62
  },
63
- "gitHead": "4122e44d1991c90507d630d35ed297f89db435d3"
63
+ "gitHead": "9ce2f674eab2cc8912800d3162dcf00a1ce94274"
64
64
  }
package/src/TextArea.tsx CHANGED
@@ -12,14 +12,16 @@
12
12
 
13
13
  import {chain, useLayoutEffect} from '@react-aria/utils';
14
14
  import React, {Ref, useCallback, useRef} from 'react';
15
- import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
15
+ import {SpectrumTextAreaProps, TextFieldRef} from '@react-types/textfield';
16
16
  import {TextFieldBase} from './TextFieldBase';
17
17
  import {useControlledState} from '@react-stately/utils';
18
+ import {useFormProps} from '@react-spectrum/form';
18
19
  import {useProviderProps} from '@react-spectrum/provider';
19
20
  import {useTextField} from '@react-aria/textfield';
20
21
 
21
- function TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
22
+ function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef>) {
22
23
  props = useProviderProps(props);
24
+ props = useFormProps(props);
23
25
  let {
24
26
  isDisabled = false,
25
27
  isQuiet = false,
@@ -30,7 +32,7 @@ function TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
30
32
  } = props;
31
33
 
32
34
  // not in stately because this is so we know when to re-measure, which is a spectrum design
33
- let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});
35
+ let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue ?? '', () => {});
34
36
  let inputRef = useRef<HTMLTextAreaElement>(null);
35
37
 
36
38
  let onHeightChange = useCallback(() => {
@@ -66,7 +68,7 @@ function TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
66
68
  console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');
67
69
  }
68
70
 
69
- let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({
71
+ let result = useTextField({
70
72
  ...props,
71
73
  onChange: chain(onChange, setInputValue),
72
74
  inputElementType: 'textarea'
@@ -77,10 +79,7 @@ function TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
77
79
  {...otherProps}
78
80
  ref={ref}
79
81
  inputRef={inputRef}
80
- labelProps={labelProps}
81
- inputProps={inputProps}
82
- descriptionProps={descriptionProps}
83
- errorMessageProps={errorMessageProps}
82
+ {...result}
84
83
  multiLine
85
84
  isDisabled={isDisabled}
86
85
  isQuiet={isQuiet}
package/src/TextField.tsx CHANGED
@@ -13,14 +13,16 @@
13
13
  import React, {forwardRef, Ref, useRef} from 'react';
14
14
  import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
15
15
  import {TextFieldBase} from './TextFieldBase';
16
+ import {useFormProps} from '@react-spectrum/form';
16
17
  import {useProviderProps} from '@react-spectrum/provider';
17
18
  import {useTextField} from '@react-aria/textfield';
18
19
 
19
20
  function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
20
21
  props = useProviderProps(props);
22
+ props = useFormProps(props);
21
23
 
22
24
  let inputRef = useRef<HTMLInputElement>(null);
23
- let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);
25
+ let result = useTextField(props, inputRef);
24
26
 
25
27
  if (props.placeholder) {
26
28
  console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');
@@ -29,10 +31,7 @@ function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
29
31
  return (
30
32
  <TextFieldBase
31
33
  {...props}
32
- labelProps={labelProps}
33
- inputProps={inputProps}
34
- descriptionProps={descriptionProps}
35
- errorMessageProps={errorMessageProps}
34
+ {...result}
36
35
  ref={ref}
37
36
  inputRef={inputRef} />
38
37
  );
package/src/TextFieldBase.tsx CHANGED
@@ -15,14 +15,14 @@ import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
15
15
  import {classNames, createFocusableRef} from '@react-spectrum/utils';
16
16
  import {Field} from '@react-spectrum/label';
17
17
  import {mergeProps} from '@react-aria/utils';
18
- import {PressEvents} from '@react-types/shared';
18
+ import {PressEvents, ValidationResult} from '@react-types/shared';
19
19
  import React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';
20
20
  import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
21
21
  import styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
22
22
  import {useFocusRing} from '@react-aria/focus';
23
23
  import {useHover} from '@react-aria/interactions';
24
24
 
25
- interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {
25
+ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | 'validate'>, PressEvents, Partial<ValidationResult> {
26
26
  wrapperChildren?: ReactElement | ReactElement[],
27
27
  inputClassName?: string,
28
28
  validationIconClassName?: string,
@@ -39,7 +39,7 @@ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, P
39
39
 
40
40
  function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
41
41
  let {
42
- validationState,
42
+ validationState = props.isInvalid ? 'invalid' : null,
43
43
  icon,
44
44
  isQuiet = false,
45
45
  isDisabled,