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

package/dist/_chunk/numberfield.js

@@ -1,65 +1,164 @@
-import { useProviderProps } from "../provider/index.js";
+/*
+* 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/NumberField.tsx
+import { a as useProviderProps } from "./provider.js";
 import { n as getSlottedContextProps } from "./spectrum-context.js";
+import { t as s2IntlStrings } from "./intl.js";
+import { t as HelpText } from "./HelpText.js";
 import { a as createUIIcon } from "./spectrum-icon.js";
 import { t as AlertTriangleIcon } from "./AlertTriangleIcon.js";
-import { t as Asterisk } from "./macro-83d341382c2b3adbe4d61fd2d4cbcef9c975a50a2015d8b838b815a76d3721ad.js";
+import { t as Asterisk } from "./macro-d2704bd5d9b60d26ff1e50aa3db378885d30e50caf8dc7b31cfaf5dd36a09d85.js";
 /* empty css                                                                       */
 /* empty css                                                                       */
 /* empty css                                                                       */
 /* empty css                                                                       */
 /* empty css                                                                       */
 import { t as Dash } from "./Dash.js";
-import { n as PrefixInputProvider, t as FieldPrefix } from "./macro-4c350293382b43f3939cd4c2bbd6c7c1c18de5a45cd1a00695dffc1eba819d91.js";
+import { n as PrefixInputProvider, t as FieldPrefix } from "./prefix.js";
 /* empty css                                                                       */
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, spread, template } from "solid-js/web";
-import { Show, createContext, createSignal, createUniqueId, mergeProps as mergeProps$1, splitProps, useContext } from "solid-js";
+import { applyRef, className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, readShallow, runHydrationEvents, spread, template } from "@solidjs/web";
+import { Show, createContext, createSignal, createUniqueId, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { NumberField, NumberFieldContext, NumberFieldDecrementButton, NumberFieldGroup, NumberFieldIncrementButton, NumberFieldInput, NumberFieldLabel } from "@proyecto-viviana/solidaria-components";
+import { createStringFormatter, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
 //#region src/icon/ui-icons/Add.tsx
-var _tmpl$$1 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=8 height=8 viewBox="0 0 8 8"><path fill="var(--iconPrimary, #222)"d="M6.625 3.078H4.922V1.375a.922.922 0 0 0-1.844 0v1.703H1.375a.922.922 0 0 0 0 1.844h1.703v1.703a.922.922 0 0 0 1.844 0V4.922h1.703a.922.922 0 0 0 0-1.844">`), _tmpl$2$1 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=8 height=8 viewBox="0 0 8 8"><path fill="var(--iconPrimary, #222)"d="M7 3.04H4.96V1a.96.96 0 1 0-1.92 0v2.04H1a.96.96 0 1 0 0 1.92h2.04V7a.96.96 0 1 0 1.92 0V4.96H7a.96.96 0 1 0 0-1.92">`), _tmpl$3$1 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=10 height=10 viewBox="0 0 10 10"><path fill="var(--iconPrimary, #222)"d="M8.5 4H6V1.5a1 1 0 1 0-2 0V4H1.5a1 1 0 1 0 0 2H4v2.5a1 1 0 1 0 2 0V6h2.5a1 1 0 1 0 0-2">`), _tmpl$4$1 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=12 height=12 viewBox="0 0 12 12"><path fill="var(--iconPrimary, #222)"d="M10.021 4.959h-2.98v-2.98a1.04 1.04 0 1 0-2.082 0v2.98h-2.98a1.04 1.04 0 1 0 0 2.082h2.98v2.98a1.04 1.04 0 1 0 2.082 0v-2.98h2.98a1.04 1.04 0 1 0 0-2.082">`), _tmpl$5 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=12 height=12 viewBox="0 0 12 12"><path fill="var(--iconPrimary, #222)"d="M10.61 4.915H7.085V1.39a1.084 1.084 0 1 0-2.17 0v3.525H1.39a1.084 1.084 0 1 0 0 2.17h3.525v3.525a1.084 1.084 0 1 0 2.17 0V7.085h3.525a1.084 1.084 0 1 0 0-2.17">`);
+var _tmpl$$1 = /* @__PURE__ */ template(`<svg><path fill="var(--iconPrimary, #222)"d="M6.625 3.078H4.922V1.375a.922.922 0 0 0-1.844 0v1.703H1.375a.922.922 0 0 0 0 1.844h1.703v1.703a.922.922 0 0 0 1.844 0V4.922h1.703a.922.922 0 0 0 0-1.844">`);
+var _tmpl$2$1 = /* @__PURE__ */ template(`<svg><path fill="var(--iconPrimary, #222)"d="M7 3.04H4.96V1a.96.96 0 1 0-1.92 0v2.04H1a.96.96 0 1 0 0 1.92h2.04V7a.96.96 0 1 0 1.92 0V4.96H7a.96.96 0 1 0 0-1.92">`);
+var _tmpl$3$1 = /* @__PURE__ */ template(`<svg><path fill="var(--iconPrimary, #222)"d="M8.5 4H6V1.5a1 1 0 1 0-2 0V4H1.5a1 1 0 1 0 0 2H4v2.5a1 1 0 1 0 2 0V6h2.5a1 1 0 1 0 0-2">`);
+var _tmpl$4 = /* @__PURE__ */ template(`<svg><path fill="var(--iconPrimary, #222)"d="M10.021 4.959h-2.98v-2.98a1.04 1.04 0 1 0-2.082 0v2.98h-2.98a1.04 1.04 0 1 0 0 2.082h2.98v2.98a1.04 1.04 0 1 0 2.082 0v-2.98h2.98a1.04 1.04 0 1 0 0-2.082">`);
+var _tmpl$5 = /* @__PURE__ */ template(`<svg><path fill="var(--iconPrimary, #222)"d="M10.61 4.915H7.085V1.39a1.084 1.084 0 1 0-2.17 0v3.525H1.39a1.084 1.084 0 1 0 0 2.17h3.525v3.525a1.084 1.084 0 1 0 2.17 0V7.085h3.525a1.084 1.084 0 1 0 0-2.17">`);
+const styles = function anonymous(props) {
+	let rules = " ";
+	if (props.size === "S") rules += " Zh17";
+	else if (props.size === "XS") rules += " Zh17";
+	else if (props.size === "XL") rules += " Zj17";
+	else if (props.size === "L") rules += " Zj17";
+	else if (props.size === "M") rules += " Zi17";
+	if (props.size === "S") rules += " Fi17";
+	else if (props.size === "XS") rules += " Fi17";
+	else if (props.size === "XL") rules += " Fk17";
+	else if (props.size === "L") rules += " Fk17";
+	else if (props.size === "M") rules += " Fj17";
+	return rules;
+};
 function Add_XSSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return (() => {
-		var _el$ = getNextElement(_tmpl$$1);
-		spread(_el$, mergeProps(rest, { "class": className }), true, true);
-		runHydrationEvents();
-		return _el$;
-	})();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	var _el$ = getNextElement(_tmpl$$1);
+	spread(_el$, [
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "8",
+			height: "8",
+			viewBox: "0 0 8 8"
+		},
+		rest,
+		{ get "class"() {
+			return local.class;
+		} }
+	], true);
+	runHydrationEvents();
+	return _el$;
 }
 function Add_SSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return (() => {
-		var _el$2 = getNextElement(_tmpl$2$1);
-		spread(_el$2, mergeProps(rest, { "class": className }), true, true);
-		runHydrationEvents();
-		return _el$2;
-	})();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	var _el$2 = getNextElement(_tmpl$2$1);
+	spread(_el$2, [
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "8",
+			height: "8",
+			viewBox: "0 0 8 8"
+		},
+		rest,
+		{ get "class"() {
+			return local.class;
+		} }
+	], true);
+	runHydrationEvents();
+	return _el$2;
 }
 function Add_MSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return (() => {
-		var _el$3 = getNextElement(_tmpl$3$1);
-		spread(_el$3, mergeProps(rest, { "class": className }), true, true);
-		runHydrationEvents();
-		return _el$3;
-	})();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	var _el$3 = getNextElement(_tmpl$3$1);
+	spread(_el$3, [
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "10",
+			height: "10",
+			viewBox: "0 0 10 10"
+		},
+		rest,
+		{ get "class"() {
+			return local.class;
+		} }
+	], true);
+	runHydrationEvents();
+	return _el$3;
 }
 function Add_LSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return (() => {
-		var _el$4 = getNextElement(_tmpl$4$1);
-		spread(_el$4, mergeProps(rest, { "class": className }), true, true);
-		runHydrationEvents();
-		return _el$4;
-	})();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	var _el$4 = getNextElement(_tmpl$4);
+	spread(_el$4, [
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "12",
+			height: "12",
+			viewBox: "0 0 12 12"
+		},
+		rest,
+		{ get "class"() {
+			return local.class;
+		} }
+	], true);
+	runHydrationEvents();
+	return _el$4;
 }
 function Add_XLSvg(props) {
-	const { class: className, width: _width, height: _height, ...rest } = props;
-	return (() => {
-		var _el$5 = getNextElement(_tmpl$5);
-		spread(_el$5, mergeProps(rest, { "class": className }), true, true);
-		runHydrationEvents();
-		return _el$5;
-	})();
+	const [local, rest] = splitProps(props, [
+		"class",
+		"width",
+		"height"
+	]);
+	var _el$5 = getNextElement(_tmpl$5);
+	spread(_el$5, [
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "12",
+			height: "12",
+			viewBox: "0 0 12 12"
+		},
+		rest,
+		{ get "class"() {
+			return local.class;
+		} }
+	], true);
+	runHydrationEvents();
+	return _el$5;
 }
 const Add_XS = createUIIcon(Add_XSSvg);
 const Add_S = createUIIcon(Add_SSvg);
@@ -67,19 +166,40 @@ const Add_M = createUIIcon(Add_MSvg);
 const Add_L = createUIIcon(Add_LSvg);
 const Add_XL = createUIIcon(Add_XLSvg);
 function Add(props) {
-	const { size = "M", class: className, width: _width, height: _height, ...rest } = props;
+	const [local, rest] = splitProps(props, [
+		"size",
+		"class",
+		"width",
+		"height"
+	]);
+	const size = local.size ?? "M";
+	const mergedClass = () => `${local.class ?? ""}${styles({ size })}`;
 	switch (size) {
-		case "XS": return createComponent(Add_XS, mergeProps(rest, { "class": className }));
-		case "S": return createComponent(Add_S, mergeProps(rest, { "class": className }));
-		case "M": return createComponent(Add_M, mergeProps(rest, { "class": className }));
-		case "L": return createComponent(Add_L, mergeProps(rest, { "class": className }));
-		case "XL": return createComponent(Add_XL, mergeProps(rest, { "class": className }));
-		default: return createComponent(Add_M, mergeProps(rest, { "class": className }));
+		case "XS": return createComponent(Add_XS, mergeProps(rest, { get "class"() {
+			return mergedClass();
+		} }));
+		case "S": return createComponent(Add_S, mergeProps(rest, { get "class"() {
+			return mergedClass();
+		} }));
+		case "M": return createComponent(Add_M, mergeProps(rest, { get "class"() {
+			return mergedClass();
+		} }));
+		case "L": return createComponent(Add_L, mergeProps(rest, { get "class"() {
+			return mergedClass();
+		} }));
+		case "XL": return createComponent(Add_XL, mergeProps(rest, { get "class"() {
+			return mergedClass();
+		} }));
+		default: return createComponent(Add_M, mergeProps(rest, { get "class"() {
+			return mergedClass();
+		} }));
 	}
 }
 //#endregion
 //#region src/numberfield/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><!$><!/><!$><!/>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span class=" _7c17">&nbsp;<!$><!/>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
 const NumberFieldContext$1 = createContext(null);
 const numberFieldRoot = function anonymous(props, overrides) {
 	let rules = " ";
@@ -91,431 +211,312 @@ const numberFieldRoot = 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 numberFieldLabelWrapper = 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.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.labelPosition === "top") rules += " _qb17";
 	return rules;
 };
 const numberFieldLabel = 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 numberFieldGroup = 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";
+		if (props.isPressed) rules += " ilIkJnc17";
+		else if (props.isFocusVisible) rules += " ilIkJnc17";
+		else if (props.isHovered) rules += " ilIkJnc17";
+		else rules += " iuNtkec17";
+		rules += " ile17";
 	} else {
-		rules += " iAv83Hb151";
-		rules += " ila151";
+		rules += " iAv83Hb17";
+		rules += " ila17";
 	}
-	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";
-	if (props.isStepperHidden) rules += " -R_-Rv151";
-	else rules += " -R_-Rd151";
-	rules += " -m_-mb151";
-	rules += " -l_-lb151";
+	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";
+	if (props.isStepperHidden) rules += " -R_-Rv17";
+	else rules += " -R_-Rd17";
+	rules += " -m_-mb17";
+	rules += " -l_-lb17";
 	return rules;
 };
-const numberFieldInput = " Td151 Qd151 Sd151 Rd151 g9151 p40ub4c151 pYFIK2bQKeKoe151 pYFIK2blc151 u40ub4c151 v40ub4c151 x40ub4c151 _xa151 _ub151 _vb151 Na151 Za151 _Le151 _je151 _Nc151 Pc151 _Yb151 _7c151";
+const numberFieldInput = " Td17 Qd17 Sd17 Rd17 g917 p40ub4c17 pYFIK2bicq5417 pYFIK2blc17 u40ub4c17 v40ub4c17 x40ub4c17 _xa17 _ub17 _vb17 Na17 Za17 _Le17 _je17 _Nc17 Pc17 _Yb17 _7c17";
 const stepperContainer = function anonymous(props) {
 	let rules = " ";
-	rules += " sd151";
-	rules += " _tc151";
-	if (props.size === "XL") rules += " Ue151";
-	else if (props.size === "L") rules += " Ue151";
-	else if (props.size === "M") rules += " Ub151";
-	else if (props.size === "S") rules += " Ue151";
-	if (props.size === "XL") rules += " qe151";
-	else if (props.size === "L") rules += " qe151";
-	else if (props.size === "M") rules += " qb151";
-	else if (props.size === "S") rules += " qe151";
-	if (props.size === "XL") rules += " HWJpoB151";
-	else if (props.size === "L") rules += " HWJpoB151";
-	else if (props.size === "M") rules += " Hs151";
-	else if (props.size === "S") rules += " Hr151";
+	rules += " sd17";
+	rules += " _tc17";
+	if (props.size === "XL") rules += " Ue17";
+	else if (props.size === "L") rules += " Ue17";
+	else if (props.size === "M") rules += " Ub17";
+	else if (props.size === "S") rules += " Ue17";
+	if (props.size === "XL") rules += " qe17";
+	else if (props.size === "L") rules += " qe17";
+	else if (props.size === "M") rules += " qb17";
+	else if (props.size === "S") rules += " qe17";
+	if (props.size === "XL") rules += " HWJpoB17";
+	else if (props.size === "L") rules += " HWJpoB17";
+	else if (props.size === "M") rules += " Hs17";
+	else if (props.size === "S") rules += " Hr17";
 	return rules;
 };
 const inputButton = function anonymous(props) {
 	let rules = " ";
-	rules += " osmOfn151";
-	rules += " nsmOfn151";
-	rules += " ksmOfn151";
-	rules += " jsmOfn151";
-	rules += " sd151";
-	rules += " _Le151";
-	rules += " _Wa151";
-	rules += " _je151";
-	rules += " eb151";
-	rules += " _Ca151";
-	if (props.size === "XL") rules += " ZC151";
-	else if (props.size === "L") rules += " Zo151";
-	else if (props.size === "M") rules += " Zm151";
-	else if (props.size === "S") rules += " Zu151";
-	rules += " Fd151";
-	if (props.type === "increment") rules += " Iy151";
-	else rules += " Iw151";
-	rules += " fa151";
-	rules += " _va151";
-	rules += " Ma151";
-	rules += " Yd151";
-	rules += " Yle151";
-	rules += " Xb151";
-	rules += " Xlb151";
-	rules += " _2b151";
-	rules += " _2lb151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	else if (props.isPressed) rules += " gG1H3ce151";
-	else if (props.isFocusVisible) rules += " gG1H3ce151";
-	else if (props.isHovered) rules += " gG1H3ce151";
-	else rules += " gkDWoNd151";
-	if (props.isDisabled) rules += " gld151";
-	else if (props.isHovered) rules += " gle151";
-	else rules += " glc151";
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isPressed) rules += " pMwyHo151";
-	else if (props.isFocusVisible) rules += " pMwyHo151";
-	else if (props.isHovered) rules += " pMwyHo151";
-	else rules += " pHKLAu151";
-	rules += " pla151";
-	rules += " ri151";
+	rules += " osmOfn17";
+	rules += " nsmOfn17";
+	rules += " ksmOfn17";
+	rules += " jsmOfn17";
+	rules += " sd17";
+	rules += " _Le17";
+	rules += " _Wa17";
+	rules += " _je17";
+	rules += " eb17";
+	rules += " _Ca17";
+	if (props.size === "XL") rules += " ZC17";
+	else if (props.size === "L") rules += " Zo17";
+	else if (props.size === "M") rules += " Zm17";
+	else if (props.size === "S") rules += " Zu17";
+	rules += " Fd17";
+	if (props.type === "increment") rules += " Iy17";
+	else rules += " Iw17";
+	rules += " fa17";
+	rules += " _va17";
+	rules += " Ma17";
+	rules += " Yd17";
+	rules += " Yle17";
+	rules += " Xb17";
+	rules += " Xlb17";
+	rules += " _2b17";
+	rules += " _2lb17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	else if (props.isPressed) rules += " g8DRfdc17";
+	else if (props.isFocusVisible) rules += " g8DRfdc17";
+	else if (props.isHovered) rules += " g8DRfdc17";
+	else rules += " gLX7Xt17";
+	if (props.isDisabled) rules += " gld17";
+	else if (props.isHovered) rules += " gle17";
+	else rules += " glc17";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.isPressed) rules += " pBJTC6c17";
+	else if (props.isFocusVisible) rules += " pBJTC6c17";
+	else if (props.isHovered) rules += " pBJTC6c17";
+	else rules += " pmiKvLd17";
+	rules += " pla17";
+	rules += " ri17";
 	return rules;
 };
-const iconStyles = " _va151 -_8sjo0b-t5ZbAob151";
-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";
-	} 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";
-	return rules;
-};
-const fieldErrorIcon = " ZuUmpre151 FuUmpre151 It151 Isu151 HAxCW0c151 _va151 -_8sjo0b-tQQET4151 -_8sjo0b-ltQBRyrc151";
-const requiredIcon = " -_8sjo0b-t5ZbAob151";
-function NumberFieldDescription(props) {
-	const context = useContext(NumberFieldContext);
-	if (!context?.descriptionProps) 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 NumberFieldError(props) {
-	const context = useContext(NumberFieldContext);
-	if (!context?.errorMessageProps) 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 iconStyles = " _va17 -_8sjo0b-t5ZbAob17";
+const fieldErrorIcon = " ZObNfn17 FObNfn17 It17 Isu17 HAxCW0c17 _va17 -_8sjo0b-tlIkJnc17 -_8sjo0b-ltQBRyrc17";
+const requiredIcon = " -_8sjo0b-t5ZbAob17";
 function normalizeNumberFieldSize(size) {
 	return size ?? "M";
 }
@@ -541,9 +542,19 @@ function buttonPressScaleStyle(element, renderProps) {
 }
 /**
 * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
-*/
-function NumberField$1(props) {
-	const [local, headlessProps] = splitProps(mergeProps$1(useProviderProps(props), getSlottedContextProps(useContext(NumberFieldContext$1), props.slot) ?? {}, props), [
+*/ function NumberField$1(props) {
+	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
+	const contextProps = getSlottedContextProps(useContext(NumberFieldContext$1), props.slot);
+	const mergedProps = mergeProps$2(flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"size",
 		"styles",
 		"UNSAFE_className",
@@ -565,6 +576,7 @@ function NumberField$1(props) {
 	const labelPosition = () => local.labelPosition ?? "top";
 	const labelAlign = () => local.labelAlign ?? "start";
 	const necessityIndicator = () => local.necessityIndicator ?? "icon";
+	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
 	const [isFocusWithin, setIsFocusWithin] = createSignal(false);
 	let decrementButtonElement;
 	let incrementButtonElement;
@@ -600,11 +612,6 @@ function NumberField$1(props) {
 		size: size(),
 		type
 	});
-	const helpClass = (renderProps, isInvalid) => helpTextStyles({
-		...renderProps,
-		size: size(),
-		isInvalid
-	});
 	return createComponent(NumberField, mergeProps(headlessProps, {
 		get label() {
 			return local.label;
@@ -615,7 +622,7 @@ function NumberField$1(props) {
 		get errorMessage() {
 			return local.errorMessage;
 		},
-		"class": rootClassName,
+		class: rootClassName,
 		get style() {
 			return local.UNSAFE_style;
 		},
@@ -625,19 +632,23 @@ function NumberField$1(props) {
 					return local.label;
 				},
 				get children() {
-					var _el$3 = getNextElement(_tmpl$3);
-					insert(_el$3, createComponent(NumberFieldLabel, {
-						get ["class"]() {
+					var _el$ = getNextElement(_tmpl$2);
+					insert(_el$, createComponent(NumberFieldLabel, {
+						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() === "label";
 										},
@@ -645,25 +656,29 @@ function NumberField$1(props) {
 											return createComponent(Asterisk, {
 												"aria-hidden": "true",
 												size: "XS",
-												"class": requiredIcon,
+												class: requiredIcon,
 												get style() {
 													return requiredIconStyle(size());
 												}
 											});
 										},
-										children: "(required)"
-									}), _el$7, _co$);
-									return _el$4;
+										get children() {
+											return stringFormatter().format(renderProps.isRequired ? "label.(required)" : "label.(optional)");
+										}
+									}), _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$;
 				}
 			}),
 			createComponent(NumberFieldGroup, {
-				get ["class"]() {
+				get "class"() {
 					return groupClass(renderProps);
 				},
 				onPointerDown: (event) => {
@@ -674,13 +689,13 @@ function NumberField$1(props) {
 				onFocusOut: (event) => {
 					if (!event.currentTarget.contains(event.relatedTarget)) setIsFocusWithin(false);
 				},
-				get ["data-focused"]() {
+				get "data-focused"() {
 					return isFocusWithin() ? "true" : void 0;
 				},
-				get ["data-disabled"]() {
+				get "data-disabled"() {
 					return renderProps.isDisabled ? "true" : void 0;
 				},
-				get ["data-invalid"]() {
+				get "data-invalid"() {
 					return renderProps.isInvalid ? "true" : void 0;
 				},
 				get children() {
@@ -691,7 +706,7 @@ function NumberField$1(props) {
 							},
 							get fallback() {
 								return createComponent(NumberFieldInput, {
-									"class": inputClass,
+									class: inputClass,
 									get placeholder() {
 										return local.placeholder;
 									},
@@ -711,7 +726,7 @@ function NumberField$1(props) {
 									prefixId,
 									get children() {
 										return createComponent(NumberFieldInput, {
-											"class": inputClass,
+											class: inputClass,
 											get placeholder() {
 												return local.placeholder;
 											},
@@ -739,13 +754,17 @@ function NumberField$1(props) {
 								return !local.hideStepper;
 							},
 							get children() {
-								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);
-								insert(_el$8, createComponent(NumberFieldDecrementButton, {
+								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);
+								insert(_el$7, createComponent(NumberFieldDecrementButton, {
 									ref(r$) {
 										var _ref$ = decrementButtonElement;
-										typeof _ref$ === "function" ? _ref$(r$) : decrementButtonElement = r$;
+										typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : decrementButtonElement = r$;
 									},
-									get ["class"]() {
+									get "class"() {
 										return buttonClass("decrement");
 									},
 									style: (buttonRenderProps) => buttonPressScaleStyle(decrementButtonElement, buttonRenderProps),
@@ -754,16 +773,16 @@ function NumberField$1(props) {
 											get size() {
 												return size();
 											},
-											"class": iconStyles
+											class: iconStyles
 										});
 									}
-								}), _el$0, _co$2);
-								insert(_el$8, createComponent(NumberFieldIncrementButton, {
+								}), _el$9, _el$10);
+								insert(_el$7, createComponent(NumberFieldIncrementButton, {
 									ref(r$) {
 										var _ref$2 = incrementButtonElement;
-										typeof _ref$2 === "function" ? _ref$2(r$) : incrementButtonElement = r$;
+										typeof _ref$2 === "function" || Array.isArray(_ref$2) ? applyRef(_ref$2, r$) : incrementButtonElement = r$;
 									},
-									get ["class"]() {
+									get "class"() {
 										return buttonClass("increment");
 									},
 									style: (buttonRenderProps) => buttonPressScaleStyle(incrementButtonElement, buttonRenderProps),
@@ -772,45 +791,34 @@ function NumberField$1(props) {
 											get size() {
 												return size();
 											},
-											"class": iconStyles
+											class: iconStyles
 										});
 									}
-								}), _el$10, _co$3);
-								effect(() => className(_el$8, stepperClass()));
-								return _el$8;
+								}), _el$12, _el$13);
+								effect(() => readShallow(stepperClass()), (_v$, _$p) => {
+									className(_el$7, _v$, _$p);
+								});
+								return _el$7;
 							}
 						})
 					];
 				}
 			}),
-			createComponent(Show, {
-				get when() {
-					return memo(() => !!local.description)() && !renderProps.isInvalid;
+			createComponent(HelpText, {
+				get size() {
+					return size();
 				},
-				get children() {
-					return createComponent(NumberFieldDescription, {
-						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(NumberFieldError, {
-						get ["class"]() {
-							return helpClass(renderProps, true);
-						},
-						get children() {
-							return local.errorMessage;
-						}
-					});
+					return local.errorMessage;
 				}
 			})
 		]