@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/_chunk/textfield.js

@@ -1,57 +1,75 @@
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/TextField.tsx
 import { mergeStyles } from "../style/runtime.js";
-import { useProviderProps } from "../provider/index.js";
+import { a as useProviderProps } from "./provider.js";
 import { n as getSlottedContextProps } from "./spectrum-context.js";
-import { CenterBaseline } from "../icon/center-baseline.js";
+import { t as s2IntlStrings } from "./intl.js";
 import { a as useIsInForm, i as useFormProps } from "./form.js";
+import { t as HelpText } from "./HelpText.js";
+import { CenterBaseline } from "../icon/center-baseline.js";
 import { t as AlertTriangleIcon } from "./AlertTriangleIcon.js";
-import { t as Asterisk } from "./macro-83d341382c2b3adbe4d61fd2d4cbcef9c975a50a2015d8b838b815a76d3721ad.js";
-/* empty css                                                                       */
+import { t as Asterisk } from "./macro-d2704bd5d9b60d26ff1e50aa3db378885d30e50caf8dc7b31cfaf5dd36a09d85.js";
 /* empty css                                                                       */
 /* empty css                                                                       */
 /* empty css                                                                       */
 /* empty css                                                                       */
 /* empty css                                                                       */
-import { n as PrefixInputProvider, t as FieldPrefix } from "./macro-4c350293382b43f3939cd4c2bbd6c7c1c18de5a45cd1a00695dffc1eba819d91.js";
+import { n as PrefixInputProvider, t as FieldPrefix } from "./prefix.js";
 /* empty css                                                                       */
-import { t as FieldSuffix } from "./suffix.js";
-import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, template } from "solid-js/web";
-import { Show, createContext, createEffect, createSignal, createUniqueId, mergeProps as mergeProps$1, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { t as FieldSuffix } from "./macro-0361b094d9bd535e9aa78171d167be1adedb9085fc3997d58504ad5e4f96253f.js";
+import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, readShallow, runHydrationEvents, scope, setAttribute, template } from "@solidjs/web";
+import { Show, children, createContext, createSignal, createTrackedEffect, createUniqueId, onSettled, useContext } from "solid-js";
+import { mergeProps as mergeProps$1, splitProps } from "@proyecto-viviana/solidaria/utils";
 import { Input, Label, TextArea, TextField, TextFieldContext } from "@proyecto-viviana/solidaria-components";
+import { createStringFormatter, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
 //#region src/textfield/s2-textarea-styles.ts
-const textAreaFieldGroupStyles = " ea151 Fd151";
+const textAreaFieldGroupStyles = " ea17 Fd17";
 const textAreaInputStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " Sd151";
-	rules += " Rd151";
-	rules += " Tu7Fubd151";
-	rules += " Qu7Fubd151";
-	rules += " MAyFGYc151";
-	rules += " _oa151";
-	rules += " g9151";
-	rules += " p40ub4c151";
-	rules += " pYFIK2bQKeKoe151";
-	rules += " pYFIK2blc151";
-	rules += " u40ub4c151";
-	rules += " v40ub4c151";
-	rules += " x40ub4c151";
-	rules += " _xa151";
-	rules += " _F40ub4c151";
-	rules += " _ub151";
-	rules += " Na151";
-	rules += " _Le151";
-	rules += " _je151";
-	rules += " _Qc151";
-	rules += " _Nc151";
-	if (props.size === "XL") rules += " -M_-Mk151";
-	else if (props.size === "L") rules += " -M_-Mh151";
-	else if (props.size === "S") rules += " -M_-Mg151";
-	else if (props.size === "XS") rules += " -M_-Mf151";
-	else rules += " -M_-Mi151";
+	rules += " Sd17";
+	rules += " Rd17";
+	rules += " Tu7Fubd17";
+	rules += " Qu7Fubd17";
+	rules += " MAyFGYc17";
+	rules += " _oa17";
+	rules += " g917";
+	rules += " p40ub4c17";
+	rules += " pYFIK2bicq5417";
+	rules += " pYFIK2blc17";
+	rules += " u40ub4c17";
+	rules += " v40ub4c17";
+	rules += " x40ub4c17";
+	rules += " _xa17";
+	rules += " _F40ub4c17";
+	rules += " _ub17";
+	rules += " Na17";
+	rules += " _Le17";
+	rules += " _je17";
+	rules += " _Qc17";
+	rules += " _Nc17";
+	if (props.size === "XL") rules += " -M_-Mk17";
+	else if (props.size === "L") rules += " -M_-Mh17";
+	else if (props.size === "S") rules += " -M_-Mg17";
+	else if (props.size === "XS") rules += " -M_-Mf17";
+	else rules += " -M_-Mi17";
 	return rules;
 };
 //#endregion
 //#region src/textfield/TextArea.tsx
-var _tmpl$$1 = /*#__PURE__*/ template(`<span>`), _tmpl$2$1 = /*#__PURE__*/ template(`<span class=" _7c151">&nbsp;<!$><!/>`), _tmpl$3$1 = /*#__PURE__*/ template(`<div>`), _tmpl$4$1 = /*#__PURE__*/ template(`<div role=presentation><!$><!/><!$><!/>`);
+var _tmpl$$1 = /* @__PURE__ */ template(`<span class=" _7c17">&nbsp;<!$><!/>`);
+var _tmpl$2$1 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$3$1 = /* @__PURE__ */ template(`<div role=presentation><!$><!/><!$><!/>`);
+var _tmpl$4$1 = /* @__PURE__ */ template(`<span>`);
 const TextAreaContext = createContext(null);
 const textAreaRoot = function anonymous(props, overrides) {
 	let rules = " ";
@@ -63,366 +81,247 @@ const textAreaRoot = function anonymous(props, overrides) {
 		if (p[1] === "y") gridColumnEnd = true;
 		rules += p[0];
 	}
-	rules += " se151";
+	rules += " se17";
 	if (props.isInForm) {
-		if (!gridColumnStart) rules += " z2mU151";
+		if (!gridColumnStart) rules += " z2mU17";
 	}
 	if (props.isInForm) {
 		if (props.labelPosition === "side") {
-			if (!gridColumnEnd) rules += " yvoofG151";
+			if (!gridColumnEnd) rules += " yvoofG17";
 		}
 	}
-	if (props.isInForm) rules += " DLwlgod151";
-	else if (props.labelPosition === "side") rules += " DPlN5qb151";
-	else if (props.labelPosition === "top") rules += " DM8Mfn151";
-	if (props.labelPosition === "side") rules += " EPlN5qb151";
-	else if (props.labelPosition === "top") rules += " E4w1sLc151";
-	if (props.labelPosition === "side") rules += " CfFpp6c151";
-	else if (props.labelPosition === "top") rules += " C1xyRcb151";
+	if (props.isInForm) rules += " DLwlgod17";
+	else if (props.labelPosition === "side") rules += " DPlN5qb17";
+	else if (props.labelPosition === "top") rules += " DM8Mfn17";
+	if (props.labelPosition === "side") rules += " EPlN5qb17";
+	else if (props.labelPosition === "top") rules += " E4w1sLc17";
+	if (props.labelPosition === "side") rules += " CfFpp6c17";
+	else if (props.labelPosition === "top") rules += " C1xyRcb17";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
-	rules += " ea151";
-	rules += " _Fd151";
-	rules += " _FnuYUweb151";
-	if (props.size === "XL") rules += " -BhX7R-Fz151";
-	else if (props.size === "L") rules += " -BhX7R-Fv151";
-	else if (props.size === "S") rules += " -BhX7R-Fp151";
-	else if (props.size === "XS") rules += " -BhX7R-Fn151";
-	else rules += " -BhX7R-Fx151";
-	rules += " -AJjOLd-UVkF0Db151";
-	rules += " qg151";
-	rules += " __ca151";
+	rules += " ea17";
+	rules += " _Fd17";
+	rules += " _FnuYUweb17";
+	if (props.size === "XL") rules += " -BhX7R-Fz17";
+	else if (props.size === "L") rules += " -BhX7R-Fv17";
+	else if (props.size === "S") rules += " -BhX7R-Fp17";
+	else if (props.size === "XS") rules += " -BhX7R-Fn17";
+	else rules += " -BhX7R-Fx17";
+	rules += " -AJjOLd-UVkF0Db17";
+	rules += " qg17";
+	rules += " __ca17";
 	return rules;
 };
 const textAreaLabelWrapper = function anonymous(props) {
 	let rules = " ";
-	rules += " zv6x9r151";
-	rules += " yv6x9r151";
-	rules += " Bv6x9r151";
-	rules += " Av6x9r151";
-	rules += " sf151";
-	if (props.labelAlign === "end") rules += " _Wb151";
-	else if (props.labelAlign === "start") rules += " _Wd151";
-	if (props.labelPosition === "top") rules += " QgOnRt151";
-	if (props.isQuiet) rules += " _qd151";
-	else if (props.labelPosition === "top") rules += " _qb151";
+	rules += " zv6x9r17";
+	rules += " yv6x9r17";
+	rules += " Bv6x9r17";
+	rules += " Av6x9r17";
+	rules += " sf17";
+	if (props.labelAlign === "end") rules += " _Wb17";
+	else if (props.labelAlign === "start") rules += " _Wd17";
+	if (props.labelPosition === "top") rules += " QgOnRt17";
+	if (props.isQuiet) rules += " _qd17";
+	else if (props.labelPosition === "top") rules += " _qb17";
 	return rules;
 };
 const textAreaLabel = function anonymous(props) {
 	let rules = " ";
-	rules += " uxe7h4151";
+	rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
 	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.isStaticColor) rules += " pl151";
-	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
-	rules += " plb151";
-	rules += " ri151";
+	if (props.isStaticColor) rules += " pl17";
+	else if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " ptacXCd17";
+	rules += " plb17";
+	rules += " ri17";
 	return rules;
 };
 const fieldGroupStyles$1 = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " uxe7h4151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
-	rules += " xb151";
-	rules += " _xa151";
+	rules += " xb17";
+	rules += " _xa17";
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
 	if (props.isDisabled) {
-		rules += " pUvnvv151";
-		rules += " plc151";
+		rules += " p8H6Pad17";
+		rules += " plc17";
 	} else {
-		if (props.isPressed) rules += " pMwyHo151";
-		else if (props.isFocusVisible) rules += " pMwyHo151";
-		else if (props.isHovered) rules += " pMwyHo151";
-		else rules += " pHKLAu151";
-		rules += " plb151";
+		if (props.isPressed) rules += " pBJTC6c17";
+		else if (props.isFocusVisible) rules += " pBJTC6c17";
+		else if (props.isHovered) rules += " pBJTC6c17";
+		else rules += " pmiKvLd17";
+		rules += " plb17";
 	}
-	rules += " sd151";
-	rules += " eb151";
-	rules += " _oa151";
-	rules += " SMBFGYc151";
-	rules += " RfBFGYc151";
-	if (props.size === "XL") rules += " Nl151";
-	else if (props.size === "L") rules += " Nj151";
-	else if (props.size === "S") rules += " Nf151";
-	else if (props.size === "XS") rules += " Ne151";
-	else rules += " Nk151";
-	rules += " ob151";
-	rules += " nb151";
-	rules += " kb151";
-	rules += " jb151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mCPFGYc151";
-	rules += " l5OFGYc151";
-	rules += " _jf151";
+	rules += " sd17";
+	rules += " eb17";
+	rules += " _oa17";
+	rules += " SMBFGYc17";
+	rules += " RfBFGYc17";
+	if (props.size === "XL") rules += " Nl17";
+	else if (props.size === "L") rules += " Nj17";
+	else if (props.size === "S") rules += " Nf17";
+	else if (props.size === "XS") rules += " Ne17";
+	else rules += " Nk17";
+	rules += " ob17";
+	rules += " nb17";
+	rules += " kb17";
+	rules += " jb17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mCPFGYc17";
+	rules += " l5OFGYc17";
+	rules += " _jf17";
 	if (props.isDisabled) {
-		rules += " ifbAdGe151";
-		rules += " ilc151";
+		rules += " iSNu3ze17";
+		rules += " ilc17";
 	} else if (props.isFocusWithin) {
-		if (props.isInvalid) rules += " iQxdzb151";
-		else rules += " iMwyHo151";
-		rules += " ild151";
+		if (props.isInvalid) rules += " ilIkJnc17";
+		else rules += " iUn0UTc17";
+		rules += " ild17";
 	} else if (props.isInvalid) {
-		if (props.isPressed) rules += " iQxdzb151";
-		else if (props.isFocusVisible) rules += " iQxdzb151";
-		else if (props.isHovered) rules += " iQxdzb151";
-		else rules += " iYjUhNc151";
-		rules += " ile151";
-	} else {
-		rules += " iAv83Hb151";
-		rules += " ila151";
-	}
-	rules += " gHPXipd151";
-	rules += " gl1kG7o151";
-	rules += " _iRvAxPd151";
-	rules += " _ilc151";
-	rules += " __mrmLYsd151";
-	rules += " FRuFGYc151";
-	rules += " zXcEWr151";
-	rules += " yXcEWr151";
-	rules += " BXcEWr151";
-	rules += " AXcEWr151";
-	if (props.isQuiet) rules += " _qd151";
-	else rules += " _qtb151";
-	if (props.size === "XL") rules += " -Anxdcc-Zt151";
-	else if (props.size === "L") rules += " -Anxdcc-ZStdtne151";
-	else if (props.size === "S") rules += " -Anxdcc-Zr151";
-	else rules += " -Anxdcc-Z3fn9H151";
-	rules += " __v6TNLWb151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.isDisabled) rules += " ri151";
-	else rules += " rD151";
-	if (props.size === "XL") rules += " -F_-Fz151";
-	else if (props.size === "L") rules += " -F_-Fv151";
-	else if (props.size === "S") rules += " -F_-Fp151";
-	else if (props.size === "XS") rules += " -F_-Fn151";
-	else rules += " -F_-Fx151";
-	rules += " -S_-Sv151";
-	rules += " -R_-Rv151";
-	rules += " -m_-mb151";
-	rules += " -l_-lb151";
-	return rules;
-};
-const helpTextStyles$1 = function anonymous(props) {
-	let rules = " ";
-	rules += " zzBWQ8d151";
-	rules += " yzBWQ8d151";
-	rules += " BzBWQ8d151";
-	rules += " AzBWQ8d151";
-	rules += " sd151";
-	rules += " ea151";
-	rules += " Uc151";
-	rules += " Usd151";
-	rules += " qc151";
-	rules += " qsd151";
-	if (props.size === "XL") rules += " uxe7h4151";
-	else if (props.size === "L") rules += " uxe7h4151";
-	else if (props.size === "S") rules += " uxe7h4151";
-	else if (props.size === "XS") rules += " uxe7h4151";
-	else rules += " uxe7h4151";
-	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
-	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
-	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
-	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		if (props.isPressed) rules += " ilIkJnc17";
+		else if (props.isFocusVisible) rules += " ilIkJnc17";
+		else if (props.isHovered) rules += " ilIkJnc17";
+		else rules += " iuNtkec17";
+		rules += " ile17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " iAv83Hb17";
+		rules += " ila17";
 	}
-	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else {
-		rules += " xb151";
-		rules += " _xa151";
-	}
-	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	}
-	if (props.isDisabled) {
-		rules += " pUvnvv151";
-		rules += " plc151";
-	} else if (props.isInvalid) {
-		rules += " pYjUhNc151";
-		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
-	rules += " -_8sjo0b-t5ZbAob151";
-	rules += " _qb151";
-	rules += " TgOnRt151";
-	if (props.isDisabled) rules += " ri151";
-	else rules += " rD151";
+	rules += " gHPXipd17";
+	rules += " gl1kG7o17";
+	rules += " _iRvAxPd17";
+	rules += " _ilc17";
+	rules += " __mh0dLcd17";
+	rules += " FRuFGYc17";
+	rules += " zXcEWr17";
+	rules += " yXcEWr17";
+	rules += " BXcEWr17";
+	rules += " AXcEWr17";
+	if (props.isQuiet) rules += " _qd17";
+	else rules += " _qtb17";
+	if (props.size === "XL") rules += " -Anxdcc-Zt17";
+	else if (props.size === "L") rules += " -Anxdcc-ZStdtne17";
+	else if (props.size === "S") rules += " -Anxdcc-Zr17";
+	else rules += " -Anxdcc-Z3fn9H17";
+	rules += " __v6TNLWb17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isDisabled) rules += " ri17";
+	else rules += " rD17";
+	if (props.size === "XL") rules += " -F_-Fz17";
+	else if (props.size === "L") rules += " -F_-Fv17";
+	else if (props.size === "S") rules += " -F_-Fp17";
+	else if (props.size === "XS") rules += " -F_-Fn17";
+	else rules += " -F_-Fx17";
+	rules += " -S_-Sv17";
+	rules += " -R_-Rv17";
+	rules += " -m_-mb17";
+	rules += " -l_-lb17";
 	return rules;
 };
-const fieldErrorIcon$1 = " ZuUmpre151 FuUmpre151 It151 Isu151 HAxCW0c151 _va151 -_8sjo0b-tQQET4151 -_8sjo0b-ltQBRyrc151";
-const requiredIcon$1 = " -_8sjo0b-t5ZbAob151";
-function TextAreaDescription(props) {
-	const context = useContext(TextFieldContext);
-	if (!context) return null;
-	const descriptionProps = () => {
-		const { ref: _ref, ...rest } = context.descriptionProps;
-		return rest;
-	};
-	return (() => {
-		var _el$ = getNextElement(_tmpl$$1);
-		spread(_el$, mergeProps(descriptionProps, {
-			"slot": "description",
-			get ["class"]() {
-				return props.class;
-			}
-		}), false, true);
-		insert(_el$, () => props.children);
-		runHydrationEvents();
-		return _el$;
-	})();
-}
-function TextAreaError(props) {
-	const context = useContext(TextFieldContext);
-	if (!context) return null;
-	const errorMessageProps = () => {
-		const { ref: _ref, ...rest } = context.errorMessageProps;
-		return rest;
-	};
-	return (() => {
-		var _el$2 = getNextElement(_tmpl$$1);
-		spread(_el$2, mergeProps(errorMessageProps, {
-			"slot": "errorMessage",
-			get ["class"]() {
-				return props.class;
-			}
-		}), false, true);
-		insert(_el$2, () => props.children);
-		runHydrationEvents();
-		return _el$2;
-	})();
-}
+const fieldErrorIcon$1 = " ZObNfn17 FObNfn17 It17 Isu17 HAxCW0c17 _va17 -_8sjo0b-tlIkJnc17 -_8sjo0b-ltQBRyrc17";
+const requiredIcon$1 = " -_8sjo0b-t5ZbAob17";
 function normalizeTextAreaSize(size) {
 	switch (size) {
 		case "sm": return "S";
@@ -462,9 +361,19 @@ function resizeTextArea(element) {
 /**
 * TextAreas are multiline text inputs, useful for cases where users have
 * a sizable amount of text to enter.
-*/
-function TextArea$1(props) {
-	const [local, headlessProps] = splitProps(mergeProps$1(useProviderProps(props), getSlottedContextProps(useContext(TextAreaContext), props.slot) ?? {}, props), [
+*/ function TextArea$1(props) {
+	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
+	const contextProps = getSlottedContextProps(useContext(TextAreaContext), props.slot);
+	const mergedProps = mergeProps$2(flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"size",
 		"variant",
 		"styles",
@@ -484,15 +393,16 @@ function TextArea$1(props) {
 	const labelPosition = () => local.labelPosition ?? "top";
 	const labelAlign = () => local.labelAlign ?? "start";
 	const necessityIndicator = () => local.necessityIndicator ?? "icon";
-	onMount(() => {
+	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
+	onSettled(() => {
 		const element = textAreaElement;
 		if (!element) return;
 		const resize = () => resizeTextArea(element);
 		element.addEventListener("input", resize);
 		queueMicrotask(resize);
-		onCleanup(() => element.removeEventListener("input", resize));
+		return () => element.removeEventListener("input", resize);
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		headlessProps.value;
 		headlessProps.defaultValue;
 		queueMicrotask(() => resizeTextArea(textAreaElement));
@@ -524,11 +434,6 @@ function TextArea$1(props) {
 		isFocusWithin: isFocusWithin()
 	}), textAreaFieldGroupStyles);
 	const textAreaInputClass = () => textAreaInputStyles({});
-	const helpClass = (renderProps, isInvalid) => helpTextStyles$1({
-		...renderProps,
-		size: size(),
-		isInvalid
-	});
 	return createComponent(TextField, mergeProps(headlessProps, {
 		get label() {
 			return local.label;
@@ -539,7 +444,7 @@ function TextArea$1(props) {
 		get errorMessage() {
 			return local.errorMessage;
 		},
-		"class": rootClassName,
+		class: rootClassName,
 		get style() {
 			return local.UNSAFE_style;
 		},
@@ -549,34 +454,42 @@ function TextArea$1(props) {
 					return local.label;
 				},
 				get children() {
-					var _el$3 = getNextElement(_tmpl$3$1);
-					insert(_el$3, createComponent(Label, {
-						get ["class"]() {
+					var _el$ = getNextElement(_tmpl$2$1);
+					insert(_el$, createComponent(Label, {
+						get "class"() {
 							return labelClass(renderProps);
 						},
 						get children() {
-							return [memo(() => local.label), createComponent(Show, {
+							return [memo(() => {
+								return local.label;
+							}), createComponent(Show, {
 								get when() {
 									return renderProps.isRequired || necessityIndicator() === "label";
 								},
 								get children() {
-									var _el$4 = getNextElement(_tmpl$2$1), _el$6 = _el$4.firstChild.nextSibling, [_el$7, _co$] = getNextMarker(_el$6.nextSibling);
-									insert(_el$4, createComponent(Show, {
+									var _el$2 = getNextElement(_tmpl$$1);
+									var _el$4 = _el$2.firstChild.nextSibling;
+									var [_el$5, _el$6] = getNextMarker(_el$4.nextSibling);
+									insert(_el$2, createComponent(Show, {
 										get when() {
 											return necessityIndicator() === "icon";
 										},
 										get fallback() {
-											return (() => {
-												var _el$11 = getNextElement(_tmpl$$1);
-												insert(_el$11, () => renderProps.isRequired ? "(required)" : "(optional)");
-												effect(() => setAttribute(_el$11, "aria-hidden", renderProps.isRequired ? true : void 0));
-												return _el$11;
-											})();
+											var _el$14 = getNextElement(_tmpl$4$1);
+											insert(_el$14, scope(() => {
+												return stringFormatter().format(renderProps.isRequired ? "label.(required)" : "label.(optional)");
+											}));
+											effect(() => renderProps.isRequired ? true : void 0, (_v$) => {
+												setAttribute(_el$14, "aria-hidden", _v$);
+											});
+											return _el$14;
 										},
 										get children() {
 											return createComponent(Asterisk, {
 												get size() {
-													return memo(() => size() === "S")() ? "M" : size();
+													return memo(() => {
+														return size() === "S";
+													})() ? "M" : size();
 												},
 												styles: requiredIcon$1,
 												get style() {
@@ -585,28 +498,34 @@ function TextArea$1(props) {
 												"aria-hidden": "true"
 											});
 										}
-									}), _el$7, _co$);
-									return _el$4;
+									}), _el$5, _el$6);
+									return _el$2;
 								}
 							})];
 						}
 					}));
-					effect(() => className(_el$3, labelWrapperClass()));
-					return _el$3;
+					effect(() => readShallow(labelWrapperClass()), (_v$, _$p) => {
+						className(_el$, _v$, _$p);
+					});
+					return _el$;
 				}
 			}),
 			(() => {
-				var _el$8 = getNextElement(_tmpl$4$1), _el$9 = _el$8.firstChild, [_el$0, _co$2] = getNextMarker(_el$9.nextSibling), _el$1 = _el$0.nextSibling, [_el$10, _co$3] = getNextMarker(_el$1.nextSibling);
-				_el$8.$$focusout = (event) => {
+				var _el$7 = getNextElement(_tmpl$3$1);
+				var _el$8 = _el$7.firstChild;
+				var [_el$9, _el$10] = getNextMarker(_el$8.nextSibling);
+				var _el$11 = _el$9.nextSibling;
+				var [_el$12, _el$13] = getNextMarker(_el$11.nextSibling);
+				_el$7._$$focusout = (event) => {
 					if (!event.currentTarget.contains(event.relatedTarget)) setIsFocusWithin(false);
 				};
-				_el$8.$$focusin = () => setIsFocusWithin(true);
-				_el$8.$$touchend = focusFieldInput$1;
-				_el$8.$$pointerdown = (event) => {
+				_el$7._$$focusin = () => setIsFocusWithin(true);
+				_el$7._$$touchend = focusFieldInput$1;
+				_el$7._$$pointerdown = (event) => {
 					if (event.pointerType === "mouse") focusFieldInput$1(event);
 				};
-				insert(_el$8, createComponent(TextArea, {
-					get ["class"]() {
+				insert(_el$7, createComponent(TextArea, {
+					get "class"() {
 						return textAreaInputClass();
 					},
 					get placeholder() {
@@ -616,61 +535,50 @@ function TextArea$1(props) {
 						textAreaElement = element;
 						resizeTextArea(element);
 					}
-				}), _el$0, _co$2);
-				insert(_el$8, createComponent(Show, {
+				}), _el$9, _el$10);
+				insert(_el$7, createComponent(Show, {
 					get when() {
-						return memo(() => !!renderProps.isInvalid)() && !renderProps.isDisabled;
+						return memo(() => {
+							return !!renderProps.isInvalid;
+						})() ? !renderProps.isDisabled : renderProps.isInvalid;
 					},
 					get children() {
 						return createComponent(CenterBaseline, { get children() {
 							return createComponent(AlertTriangleIcon, { styles: fieldErrorIcon$1 });
 						} });
 					}
-				}), _el$10, _co$3);
-				effect((_p$) => {
-					var _v$ = groupClass(renderProps), _v$2 = isFocusWithin() ? "true" : void 0, _v$3 = renderProps.isDisabled ? "true" : void 0, _v$4 = renderProps.isInvalid ? "true" : void 0;
-					_v$ !== _p$.e && className(_el$8, _p$.e = _v$);
-					_v$2 !== _p$.t && setAttribute(_el$8, "data-focused", _p$.t = _v$2);
-					_v$3 !== _p$.a && setAttribute(_el$8, "data-disabled", _p$.a = _v$3);
-					_v$4 !== _p$.o && setAttribute(_el$8, "data-invalid", _p$.o = _v$4);
-					return _p$;
-				}, {
-					e: void 0,
-					t: void 0,
-					a: void 0,
-					o: void 0
+				}), _el$12, _el$13);
+				effect(() => {
+					return {
+						e: readShallow(groupClass(renderProps)),
+						t: isFocusWithin() ? "true" : void 0,
+						a: renderProps.isDisabled ? "true" : void 0,
+						o: renderProps.isInvalid ? "true" : void 0
+					};
+				}, ({ e, t, a, o }, _p$) => {
+					className(_el$7, e, _p$?.e);
+					t !== _p$?.t && setAttribute(_el$7, "data-focused", t);
+					a !== _p$?.a && setAttribute(_el$7, "data-disabled", a);
+					o !== _p$?.o && setAttribute(_el$7, "data-invalid", o);
 				});
 				runHydrationEvents();
-				return _el$8;
+				return _el$7;
 			})(),
-			createComponent(Show, {
-				get when() {
-					return memo(() => !!local.description)() && !renderProps.isInvalid;
+			createComponent(HelpText, {
+				get size() {
+					return size();
 				},
-				get children() {
-					return createComponent(TextAreaDescription, {
-						get ["class"]() {
-							return helpClass(renderProps, false);
-						},
-						get children() {
-							return local.description;
-						}
-					});
-				}
-			}),
-			createComponent(Show, {
-				get when() {
-					return memo(() => !!local.errorMessage)() && renderProps.isInvalid;
+				get isDisabled() {
+					return renderProps.isDisabled;
+				},
+				get isInvalid() {
+					return renderProps.isInvalid;
+				},
+				get description() {
+					return local.description;
 				},
 				get children() {
-					return createComponent(TextAreaError, {
-						get ["class"]() {
-							return helpClass(renderProps, true);
-						},
-						get children() {
-							return local.errorMessage;
-						}
-					});
+					return local.errorMessage;
 				}
 			})
 		]
@@ -684,7 +592,10 @@ delegateEvents([
 ]);
 //#endregion
 //#region src/textfield/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span>`), _tmpl$2 = /*#__PURE__*/ template(`<span class=" _7c151">&nbsp;<!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<div>`), _tmpl$4 = /*#__PURE__*/ template(`<div role=presentation><!$><!/><!$><!/>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span class=" _7c17">&nbsp;<!$><!/>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div role=presentation><!$><!/><!$><!/>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span>`);
 const TextFieldContext$1 = createContext(null);
 const textFieldRoot = function anonymous(props, overrides) {
 	let rules = " ";
@@ -696,369 +607,250 @@ const textFieldRoot = function anonymous(props, overrides) {
 		if (p[1] === "y") gridColumnEnd = true;
 		rules += p[0];
 	}
-	rules += " se151";
+	rules += " se17";
 	if (props.isInForm) {
-		if (!gridColumnStart) rules += " z2mU151";
+		if (!gridColumnStart) rules += " z2mU17";
 	}
 	if (props.isInForm) {
 		if (props.labelPosition === "side") {
-			if (!gridColumnEnd) rules += " yvoofG151";
+			if (!gridColumnEnd) rules += " yvoofG17";
 		}
 	}
-	if (props.isInForm) rules += " DLwlgod151";
-	else if (props.labelPosition === "side") rules += " DPlN5qb151";
-	else if (props.labelPosition === "top") rules += " DM8Mfn151";
-	if (props.labelPosition === "side") rules += " EPlN5qb151";
-	else if (props.labelPosition === "top") rules += " E4w1sLc151";
-	if (props.labelPosition === "side") rules += " CfFpp6c151";
-	else if (props.labelPosition === "top") rules += " C1xyRcb151";
+	if (props.isInForm) rules += " DLwlgod17";
+	else if (props.labelPosition === "side") rules += " DPlN5qb17";
+	else if (props.labelPosition === "top") rules += " DM8Mfn17";
+	if (props.labelPosition === "side") rules += " EPlN5qb17";
+	else if (props.labelPosition === "top") rules += " E4w1sLc17";
+	if (props.labelPosition === "side") rules += " CfFpp6c17";
+	else if (props.labelPosition === "top") rules += " C1xyRcb17";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
-	rules += " ea151";
-	rules += " _Fd151";
-	rules += " _FnuYUweb151";
-	if (props.size === "XL") rules += " -BhX7R-Fz151";
-	else if (props.size === "L") rules += " -BhX7R-Fv151";
-	else if (props.size === "S") rules += " -BhX7R-Fp151";
-	else if (props.size === "XS") rules += " -BhX7R-Fn151";
-	else rules += " -BhX7R-Fx151";
-	rules += " -AJjOLd-UVkF0Db151";
-	rules += " qg151";
-	rules += " __ca151";
+	rules += " ea17";
+	rules += " _Fd17";
+	rules += " _FnuYUweb17";
+	if (props.size === "XL") rules += " -BhX7R-Fz17";
+	else if (props.size === "L") rules += " -BhX7R-Fv17";
+	else if (props.size === "S") rules += " -BhX7R-Fp17";
+	else if (props.size === "XS") rules += " -BhX7R-Fn17";
+	else rules += " -BhX7R-Fx17";
+	rules += " -AJjOLd-UVkF0Db17";
+	rules += " qg17";
+	rules += " __ca17";
 	return rules;
 };
 const textFieldLabelWrapper = function anonymous(props) {
 	let rules = " ";
-	rules += " zv6x9r151";
-	rules += " yv6x9r151";
-	rules += " Bv6x9r151";
-	rules += " Av6x9r151";
-	rules += " sf151";
-	if (props.labelAlign === "end") rules += " _Wb151";
-	else if (props.labelAlign === "start") rules += " _Wd151";
-	if (props.labelPosition === "top") rules += " QgOnRt151";
-	if (props.isQuiet) rules += " _qd151";
-	else if (props.labelPosition === "top") rules += " _qb151";
+	rules += " zv6x9r17";
+	rules += " yv6x9r17";
+	rules += " Bv6x9r17";
+	rules += " Av6x9r17";
+	rules += " sf17";
+	if (props.labelAlign === "end") rules += " _Wb17";
+	else if (props.labelAlign === "start") rules += " _Wd17";
+	if (props.labelPosition === "top") rules += " QgOnRt17";
+	if (props.isQuiet) rules += " _qd17";
+	else if (props.labelPosition === "top") rules += " _qb17";
 	return rules;
 };
 const textFieldLabel = function anonymous(props) {
 	let rules = " ";
-	rules += " uxe7h4151";
+	rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
 	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.isStaticColor) rules += " pl151";
-	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
-	rules += " plb151";
-	rules += " ri151";
+	if (props.isStaticColor) rules += " pl17";
+	else if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " ptacXCd17";
+	rules += " plb17";
+	rules += " ri17";
 	return rules;
 };
 const fieldGroupStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " uxe7h4151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
-	rules += " xb151";
-	rules += " _xa151";
+	rules += " xb17";
+	rules += " _xa17";
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
 	if (props.isDisabled) {
-		rules += " pUvnvv151";
-		rules += " plc151";
+		rules += " p8H6Pad17";
+		rules += " plc17";
 	} else {
-		if (props.surface === "tutor") rules += " pFCEV4b151";
-		else if (props.isPressed) rules += " pMwyHo151";
-		else if (props.isFocusVisible) rules += " pMwyHo151";
-		else if (props.isHovered) rules += " pMwyHo151";
-		else rules += " pHKLAu151";
-		rules += " plb151";
+		if (props.surface === "tutor") rules += " pFCEV4b17";
+		else if (props.isPressed) rules += " pBJTC6c17";
+		else if (props.isFocusVisible) rules += " pBJTC6c17";
+		else if (props.isHovered) rules += " pBJTC6c17";
+		else rules += " pmiKvLd17";
+		rules += " plb17";
 	}
-	rules += " sd151";
-	rules += " eb151";
-	rules += " _oa151";
-	rules += " SMBFGYc151";
-	rules += " RfBFGYc151";
-	if (props.size === "XL") rules += " Nl151";
-	else if (props.size === "L") rules += " Nj151";
-	else if (props.size === "S") rules += " Nf151";
-	else if (props.size === "XS") rules += " Ne151";
-	else rules += " Nk151";
-	rules += " ob151";
-	rules += " nb151";
-	rules += " kb151";
-	rules += " jb151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mCPFGYc151";
-	rules += " l5OFGYc151";
-	rules += " _jf151";
+	rules += " sd17";
+	rules += " eb17";
+	rules += " _oa17";
+	rules += " SMBFGYc17";
+	rules += " RfBFGYc17";
+	if (props.size === "XL") rules += " Nl17";
+	else if (props.size === "L") rules += " Nj17";
+	else if (props.size === "S") rules += " Nf17";
+	else if (props.size === "XS") rules += " Ne17";
+	else rules += " Nk17";
+	rules += " ob17";
+	rules += " nb17";
+	rules += " kb17";
+	rules += " jb17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mCPFGYc17";
+	rules += " l5OFGYc17";
+	rules += " _jf17";
 	if (props.isDisabled) {
-		rules += " ifbAdGe151";
-		rules += " ilc151";
+		rules += " iSNu3ze17";
+		rules += " ilc17";
 	} else if (props.isFocusWithin) {
-		if (props.isInvalid) rules += " iQxdzb151";
-		else rules += " iMwyHo151";
-		rules += " ild151";
+		if (props.isInvalid) rules += " ilIkJnc17";
+		else rules += " iUn0UTc17";
+		rules += " ild17";
 	} else if (props.isInvalid) {
-		if (props.isPressed) rules += " iQxdzb151";
-		else if (props.isFocusVisible) rules += " iQxdzb151";
-		else if (props.isHovered) rules += " iQxdzb151";
-		else rules += " iYjUhNc151";
-		rules += " ile151";
-	} else {
-		rules += " iAv83Hb151";
-		rules += " ila151";
-	}
-	if (props.surface === "tutor") rules += " gkIIWye151";
-	else rules += " gHPXipd151";
-	rules += " gl1kG7o151";
-	rules += " _iRvAxPd151";
-	rules += " _ilc151";
-	rules += " __mrmLYsd151";
-	rules += " FRuFGYc151";
-	rules += " zXcEWr151";
-	rules += " yXcEWr151";
-	rules += " BXcEWr151";
-	rules += " AXcEWr151";
-	if (props.isQuiet) rules += " _qd151";
-	else rules += " _qtb151";
-	if (props.size === "XL") rules += " -Anxdcc-Zt151";
-	else if (props.size === "L") rules += " -Anxdcc-ZStdtne151";
-	else if (props.size === "S") rules += " -Anxdcc-Zr151";
-	else rules += " -Anxdcc-Z3fn9H151";
-	rules += " __v6TNLWb151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.isDisabled) rules += " ri151";
-	else rules += " rD151";
-	if (props.size === "XL") rules += " -F_-Fz151";
-	else if (props.size === "L") rules += " -F_-Fv151";
-	else if (props.size === "S") rules += " -F_-Fp151";
-	else if (props.size === "XS") rules += " -F_-Fn151";
-	else rules += " -F_-Fx151";
-	rules += " -S_-Sv151";
-	rules += " -R_-Rv151";
-	rules += " -m_-mb151";
-	rules += " -l_-lb151";
-	return rules;
-};
-const textFieldInput = " Td151 Qd151 Sd151 Rd151 g9151 p40ub4c151 pYFIK2bQKeKoe151 pYFIK2blc151 u40ub4c151 v40ub4c151 x40ub4c151 _xa151 _ub151 _vb151 Na151 Za151 _Le151 _je151 _Nc151 Pc151 _Yb151 _7c151";
-const helpTextStyles = function anonymous(props) {
-	let rules = " ";
-	rules += " zzBWQ8d151";
-	rules += " yzBWQ8d151";
-	rules += " BzBWQ8d151";
-	rules += " AzBWQ8d151";
-	rules += " sd151";
-	rules += " ea151";
-	rules += " Uc151";
-	rules += " Usd151";
-	rules += " qc151";
-	rules += " qsd151";
-	if (props.size === "XL") rules += " uxe7h4151";
-	else if (props.size === "L") rules += " uxe7h4151";
-	else if (props.size === "S") rules += " uxe7h4151";
-	else if (props.size === "XS") rules += " uxe7h4151";
-	else rules += " uxe7h4151";
-	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
-	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
-	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
-	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
-	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
-	}
-	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
+		if (props.isPressed) rules += " ilIkJnc17";
+		else if (props.isFocusVisible) rules += " ilIkJnc17";
+		else if (props.isHovered) rules += " ilIkJnc17";
+		else rules += " iuNtkec17";
+		rules += " ile17";
 	} else {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " iAv83Hb17";
+		rules += " ila17";
 	}
-	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	}
-	if (props.isDisabled) {
-		rules += " pUvnvv151";
-		rules += " plc151";
-	} else if (props.isInvalid) {
-		rules += " pYjUhNc151";
-		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
-	rules += " -_8sjo0b-t5ZbAob151";
-	rules += " _qb151";
-	rules += " TgOnRt151";
-	if (props.isDisabled) rules += " ri151";
-	else rules += " rD151";
+	if (props.surface === "tutor") rules += " gkIIWye17";
+	else rules += " gHPXipd17";
+	rules += " gl1kG7o17";
+	rules += " _iRvAxPd17";
+	rules += " _ilc17";
+	rules += " __mh0dLcd17";
+	rules += " FRuFGYc17";
+	rules += " zXcEWr17";
+	rules += " yXcEWr17";
+	rules += " BXcEWr17";
+	rules += " AXcEWr17";
+	if (props.isQuiet) rules += " _qd17";
+	else rules += " _qtb17";
+	if (props.size === "XL") rules += " -Anxdcc-Zt17";
+	else if (props.size === "L") rules += " -Anxdcc-ZStdtne17";
+	else if (props.size === "S") rules += " -Anxdcc-Zr17";
+	else rules += " -Anxdcc-Z3fn9H17";
+	rules += " __v6TNLWb17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isDisabled) rules += " ri17";
+	else rules += " rD17";
+	if (props.size === "XL") rules += " -F_-Fz17";
+	else if (props.size === "L") rules += " -F_-Fv17";
+	else if (props.size === "S") rules += " -F_-Fp17";
+	else if (props.size === "XS") rules += " -F_-Fn17";
+	else rules += " -F_-Fx17";
+	rules += " -S_-Sv17";
+	rules += " -R_-Rv17";
+	rules += " -m_-mb17";
+	rules += " -l_-lb17";
 	return rules;
 };
-const fieldErrorIcon = " ZuUmpre151 FuUmpre151 It151 Isu151 HAxCW0c151 _va151 -_8sjo0b-tQQET4151 -_8sjo0b-ltQBRyrc151";
-const requiredIcon = " -_8sjo0b-t5ZbAob151";
-function TextFieldDescription(props) {
-	const context = useContext(TextFieldContext);
-	if (!context) return null;
-	const descriptionProps = () => {
-		const { ref: _ref, ...rest } = context.descriptionProps;
-		return rest;
-	};
-	return (() => {
-		var _el$ = getNextElement(_tmpl$);
-		spread(_el$, mergeProps(descriptionProps, {
-			"slot": "description",
-			get ["class"]() {
-				return props.class;
-			}
-		}), false, true);
-		insert(_el$, () => props.children);
-		runHydrationEvents();
-		return _el$;
-	})();
-}
-function TextFieldError(props) {
-	const context = useContext(TextFieldContext);
-	if (!context) return null;
-	const errorMessageProps = () => {
-		const { ref: _ref, ...rest } = context.errorMessageProps;
-		return rest;
-	};
-	return (() => {
-		var _el$2 = getNextElement(_tmpl$);
-		spread(_el$2, mergeProps(errorMessageProps, {
-			"slot": "errorMessage",
-			get ["class"]() {
-				return props.class;
-			}
-		}), false, true);
-		insert(_el$2, () => props.children);
-		runHydrationEvents();
-		return _el$2;
-	})();
-}
+const textFieldInput = " Td17 Qd17 Sd17 Rd17 g917 p40ub4c17 pYFIK2bicq5417 pYFIK2blc17 u40ub4c17 v40ub4c17 x40ub4c17 _xa17 _ub17 _vb17 Na17 Za17 _Le17 _je17 _Nc17 Pc17 _Yb17 _7c17";
+const fieldErrorIcon = " ZObNfn17 FObNfn17 It17 Isu17 HAxCW0c17 _va17 -_8sjo0b-tlIkJnc17 -_8sjo0b-ltQBRyrc17";
+const requiredIcon = " -_8sjo0b-t5ZbAob17";
 function normalizeTextFieldSize(size) {
 	switch (size) {
 		case "sm": return "S";
@@ -1085,7 +877,9 @@ function requiredIconStyle(size) {
 }
 function TextField$1(props) {
 	const isInForm = useIsInForm();
-	const [local, headlessProps] = splitProps(useProviderProps(useFormProps(mergeProps$1(getSlottedContextProps(useContext(TextFieldContext$1), props.slot) ?? {}, props))), [
+	const contextProps = getSlottedContextProps(useContext(TextFieldContext$1), props.slot);
+	const mergedProps = useProviderProps(useFormProps(mergeProps$2(contextProps ?? {}, props)));
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"size",
 		"variant",
 		"styles",
@@ -1105,14 +899,19 @@ function TextField$1(props) {
 	]);
 	const prefixId = createUniqueId();
 	const suffixId = createUniqueId();
-	const adornmentIds = () => [local.prefix ? prefixId : null, local.suffix ? suffixId : null].filter(Boolean).join(" ");
+	const prefixNode = children(() => local.prefix);
+	const suffixNode = children(() => local.suffix);
+	const adornmentIds = () => [prefixNode() ? prefixId : null, suffixNode() ? suffixId : null].filter(Boolean).join(" ");
 	const size = () => normalizeTextFieldSize(local.size);
 	const labelPosition = () => local.labelPosition ?? "top";
 	const labelAlign = () => local.labelAlign ?? "start";
 	const necessityIndicator = () => local.necessityIndicator ?? "icon";
+	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
 	const normalizedHeadlessProps = mergeProps$1(headlessProps, {
 		get isInvalid() {
-			return headlessProps.isInvalid ?? local.validationState === "invalid";
+			if (headlessProps.isInvalid !== void 0) return headlessProps.isInvalid;
+			if (local.validationState === "invalid") return true;
+			if (local.validationState === "valid") return false;
 		},
 		get validationBehavior() {
 			return headlessProps.validationBehavior ?? (local.validationState ? "aria" : void 0);
@@ -1145,11 +944,6 @@ function TextField$1(props) {
 		isFocusWithin: renderProps.isFocused,
 		surface: local.surface ?? "well"
 	});
-	const helpClass = (renderProps, isInvalid) => helpTextStyles({
-		...renderProps,
-		size: size(),
-		isInvalid
-	});
 	return createComponent(TextField, mergeProps(normalizedHeadlessProps, {
 		get label() {
 			return local.label;
@@ -1160,7 +954,7 @@ function TextField$1(props) {
 		get errorMessage() {
 			return local.errorMessage;
 		},
-		"class": rootClassName,
+		class: rootClassName,
 		get style() {
 			return local.UNSAFE_style;
 		},
@@ -1170,34 +964,42 @@ function TextField$1(props) {
 					return local.label;
 				},
 				get children() {
-					var _el$3 = getNextElement(_tmpl$3);
-					insert(_el$3, createComponent(Label, {
-						get ["class"]() {
+					var _el$ = getNextElement(_tmpl$2);
+					insert(_el$, createComponent(Label, {
+						get "class"() {
 							return labelClass(renderProps);
 						},
 						get children() {
-							return [memo(() => local.label), createComponent(Show, {
+							return [memo(() => {
+								return local.label;
+							}), createComponent(Show, {
 								get when() {
 									return renderProps.isRequired || necessityIndicator() === "label";
 								},
 								get children() {
-									var _el$4 = getNextElement(_tmpl$2), _el$6 = _el$4.firstChild.nextSibling, [_el$7, _co$] = getNextMarker(_el$6.nextSibling);
-									insert(_el$4, createComponent(Show, {
+									var _el$2 = getNextElement(_tmpl$);
+									var _el$4 = _el$2.firstChild.nextSibling;
+									var [_el$5, _el$6] = getNextMarker(_el$4.nextSibling);
+									insert(_el$2, createComponent(Show, {
 										get when() {
 											return necessityIndicator() === "icon";
 										},
 										get fallback() {
-											return (() => {
-												var _el$11 = getNextElement(_tmpl$);
-												insert(_el$11, () => renderProps.isRequired ? "(required)" : "(optional)");
-												effect(() => setAttribute(_el$11, "aria-hidden", renderProps.isRequired ? true : void 0));
-												return _el$11;
-											})();
+											var _el$14 = getNextElement(_tmpl$4);
+											insert(_el$14, scope(() => {
+												return stringFormatter().format(renderProps.isRequired ? "label.(required)" : "label.(optional)");
+											}));
+											effect(() => renderProps.isRequired ? true : void 0, (_v$) => {
+												setAttribute(_el$14, "aria-hidden", _v$);
+											});
+											return _el$14;
 										},
 										get children() {
 											return createComponent(Asterisk, {
 												get size() {
-													return memo(() => size() === "S")() ? "M" : size();
+													return memo(() => {
+														return size() === "S";
+													})() ? "M" : size();
 												},
 												styles: requiredIcon,
 												get style() {
@@ -1206,40 +1008,46 @@ function TextField$1(props) {
 												"aria-hidden": "true"
 											});
 										}
-									}), _el$7, _co$);
-									return _el$4;
+									}), _el$5, _el$6);
+									return _el$2;
 								}
 							})];
 						}
 					}));
-					effect(() => className(_el$3, labelWrapperClass()));
-					return _el$3;
+					effect(() => readShallow(labelWrapperClass()), (_v$, _$p) => {
+						className(_el$, _v$, _$p);
+					});
+					return _el$;
 				}
 			}),
 			(() => {
-				var _el$8 = getNextElement(_tmpl$4), _el$9 = _el$8.firstChild, [_el$0, _co$2] = getNextMarker(_el$9.nextSibling), _el$1 = _el$0.nextSibling, [_el$10, _co$3] = getNextMarker(_el$1.nextSibling);
-				_el$8.$$touchend = focusFieldInput;
-				_el$8.$$pointerdown = (event) => {
+				var _el$7 = getNextElement(_tmpl$3);
+				var _el$8 = _el$7.firstChild;
+				var [_el$9, _el$10] = getNextMarker(_el$8.nextSibling);
+				var _el$11 = _el$9.nextSibling;
+				var [_el$12, _el$13] = getNextMarker(_el$11.nextSibling);
+				_el$7._$$touchend = focusFieldInput;
+				_el$7._$$pointerdown = (event) => {
 					if (event.pointerType === "mouse") focusFieldInput(event);
 				};
-				insert(_el$8, createComponent(Show, {
+				insert(_el$7, createComponent(Show, {
 					get when() {
-						return local.prefix || local.suffix;
+						return prefixNode() || suffixNode();
 					},
 					get fallback() {
-						return createComponent(Input, { "class": textFieldInput });
+						return createComponent(Input, { class: textFieldInput });
 					},
 					get children() {
 						return [
 							createComponent(Show, {
 								get when() {
-									return local.prefix;
+									return prefixNode();
 								},
 								get children() {
 									return createComponent(FieldPrefix, {
 										id: prefixId,
 										get children() {
-											return local.prefix;
+											return prefixNode();
 										}
 									});
 								}
@@ -1250,81 +1058,70 @@ function TextField$1(props) {
 									return adornmentIds();
 								},
 								get children() {
-									return createComponent(Input, { "class": textFieldInput });
+									return createComponent(Input, { class: textFieldInput });
 								}
 							}),
 							createComponent(Show, {
 								get when() {
-									return local.suffix;
+									return suffixNode();
 								},
 								get children() {
 									return createComponent(FieldSuffix, {
 										id: suffixId,
 										get children() {
-											return local.suffix;
+											return suffixNode();
 										}
 									});
 								}
 							})
 						];
 					}
-				}), _el$0, _co$2);
-				insert(_el$8, createComponent(Show, {
+				}), _el$9, _el$10);
+				insert(_el$7, createComponent(Show, {
 					get when() {
-						return memo(() => !!renderProps.isInvalid)() && !renderProps.isDisabled;
+						return memo(() => {
+							return !!renderProps.isInvalid;
+						})() ? !renderProps.isDisabled : renderProps.isInvalid;
 					},
 					get children() {
 						return createComponent(CenterBaseline, { get children() {
 							return createComponent(AlertTriangleIcon, { styles: fieldErrorIcon });
 						} });
 					}
-				}), _el$10, _co$3);
-				effect((_p$) => {
-					var _v$ = groupClass(renderProps), _v$2 = renderProps.isFocused ? "true" : void 0, _v$3 = renderProps.isFocusVisible ? "true" : void 0, _v$4 = renderProps.isDisabled ? "true" : void 0, _v$5 = renderProps.isInvalid ? "true" : void 0;
-					_v$ !== _p$.e && className(_el$8, _p$.e = _v$);
-					_v$2 !== _p$.t && setAttribute(_el$8, "data-focused", _p$.t = _v$2);
-					_v$3 !== _p$.a && setAttribute(_el$8, "data-focus-visible", _p$.a = _v$3);
-					_v$4 !== _p$.o && setAttribute(_el$8, "data-disabled", _p$.o = _v$4);
-					_v$5 !== _p$.i && setAttribute(_el$8, "data-invalid", _p$.i = _v$5);
-					return _p$;
-				}, {
-					e: void 0,
-					t: void 0,
-					a: void 0,
-					o: void 0,
-					i: void 0
+				}), _el$12, _el$13);
+				effect(() => {
+					return {
+						e: readShallow(groupClass(renderProps)),
+						t: renderProps.isFocused ? "true" : void 0,
+						a: renderProps.isFocusVisible ? "true" : void 0,
+						o: renderProps.isDisabled ? "true" : void 0,
+						i: renderProps.isInvalid ? "true" : void 0
+					};
+				}, ({ e, t, a, o, i }, _p$) => {
+					className(_el$7, e, _p$?.e);
+					t !== _p$?.t && setAttribute(_el$7, "data-focused", t);
+					a !== _p$?.a && setAttribute(_el$7, "data-focus-visible", a);
+					o !== _p$?.o && setAttribute(_el$7, "data-disabled", o);
+					i !== _p$?.i && setAttribute(_el$7, "data-invalid", i);
 				});
 				runHydrationEvents();
-				return _el$8;
+				return _el$7;
 			})(),
-			createComponent(Show, {
-				get when() {
-					return memo(() => !!local.description)() && !renderProps.isInvalid;
+			createComponent(HelpText, {
+				get size() {
+					return size();
 				},
-				get children() {
-					return createComponent(TextFieldDescription, {
-						get ["class"]() {
-							return helpClass(renderProps, false);
-						},
-						get children() {
-							return local.description;
-						}
-					});
-				}
-			}),
-			createComponent(Show, {
-				get when() {
-					return memo(() => !!local.errorMessage)() && renderProps.isInvalid;
+				get isDisabled() {
+					return renderProps.isDisabled;
+				},
+				get isInvalid() {
+					return renderProps.isInvalid;
+				},
+				get description() {
+					return local.description;
 				},
 				get children() {
-					return createComponent(TextFieldError, {
-						get ["class"]() {
-							return helpClass(renderProps, true);
-						},
-						get children() {
-							return local.errorMessage;
-						}
-					});
+					return local.errorMessage;
 				}
 			})
 		]