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

package/dist/_chunk/color.jsx

@@ -1,16 +1,36 @@
+/*
+* 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/ColorArea.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorField.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorHandle.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorSlider.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorSwatch.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorWheel.tsx
 import { t as mergeStyles } from "./runtime.jsx";
-import { useProviderProps } from "../provider/index.jsx";
-import { CenterBaseline } from "../icon/center-baseline.jsx";
+import { a as useProviderProps } from "./provider.jsx";
+import { t as s2IntlStrings } from "./intl.jsx";
 import { a as useIsInForm, i as useFormProps } from "./form.jsx";
+import { t as HelpText } from "./HelpText.jsx";
+import { CenterBaseline } from "../icon/center-baseline.jsx";
 import { t as AlertTriangleIcon } from "./AlertTriangleIcon.jsx";
 import { t as Asterisk } from "./Asterisk.jsx";
 import { n as PrefixInputProvider, t as FieldPrefix } from "./prefix.jsx";
 import { i as InternalColorSwatchContext } from "./ColorSwatchPicker.jsx";
-import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
-import { useLocale } from "@proyecto-viviana/solidaria";
+import { Show, createContext, createMemo, createSignal, createTrackedEffect, createUniqueId, onCleanup, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { ColorArea, ColorAreaContext, ColorAreaThumb, ColorEditor, ColorField, ColorFieldContext, ColorFieldInput, ColorSlider, ColorSliderContext, ColorSliderLabel, ColorSliderOutput, ColorSliderThumb, ColorSliderTrack, ColorSwatch, ColorSwatchContext, ColorWheel, ColorWheelContext, ColorWheelThumb, ColorWheelTrack } from "@proyecto-viviana/solidaria-components";
+import { createStringFormatter, useLocale } from "@proyecto-viviana/solidaria";
 import { getColorChannels, normalizeColor, parseColor } from "@proyecto-viviana/solid-stately";
-import { Portal } from "solid-js/web";
+import { Portal } from "@solidjs/web";
 //#region src/color/ColorEditor.tsx
 const editorStyles = "qPpIvb";
 /**
@@ -32,198 +52,198 @@ const colorSliderRoot = function anonymous(props, overrides) {
 		rules += p[0];
 	}
 	if (props.orientation === "horizontal") {
-		if (!width) rules += " Zr151";
+		if (!width) rules += " Zr17";
 	}
-	if (props.orientation === "vertical") rules += " Fs151";
-	if (props.orientation === "vertical") rules += " sb151";
-	else if (props.orientation === "horizontal") rules += " se151";
-	rules += " Dxumf9b151";
-	rules += " CAH4W5d151";
-	rules += " Ub151";
+	if (props.orientation === "vertical") rules += " Fs17";
+	if (props.orientation === "vertical") rules += " sb17";
+	else if (props.orientation === "horizontal") rules += " se17";
+	rules += " Dxumf9b17";
+	rules += " CAH4W5d17";
+	rules += " Ub17";
 	return rules;
 };
 const colorSliderLabelWrapper = function anonymous(props) {
 	let rules = " ";
-	rules += " zv6x9r151";
-	rules += " yv6x9r151";
-	rules += " Bv6x9r151";
-	rules += " Av6x9r151";
-	rules += " sf151";
-	if (props.isDisabled) rules += " ri151";
-	else rules += " ri151";
+	rules += " zv6x9r17";
+	rules += " yv6x9r17";
+	rules += " Bv6x9r17";
+	rules += " Av6x9r17";
+	rules += " sf17";
+	if (props.isDisabled) rules += " ri17";
+	else rules += " ri17";
 	return rules;
 };
 const colorSliderLabel = 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 colorSliderOutput = function anonymous(props) {
 	let rules = " ";
-	rules += " zChk6v151";
-	rules += " yChk6v151";
-	rules += " BChk6v151";
-	rules += " AChk6v151";
-	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";
+	rules += " zChk6v17";
+	rules += " yChk6v17";
+	rules += " BChk6v17";
+	rules += " AChk6v17";
+	if (props.size === "XL") rules += " uxe7h417";
+	else if (props.size === "L") rules += " uxe7h417";
+	else if (props.size === "S") rules += " uxe7h417";
+	else if (props.size === "XS") rules += " uxe7h417";
+	else 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.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
-	rules += " ri151";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " pLw1gcc17";
+	rules += " ri17";
 	return rules;
 };
 const colorSliderTrack = function anonymous(props) {
 	let rules = " ";
-	rules += " zCPUPs151";
-	rules += " yCPUPs151";
-	rules += " BCPUPs151";
-	rules += " ACPUPs151";
-	if (props.orientation === "vertical") rules += " Zo151";
-	else if (props.orientation === "horizontal") rules += " Za151";
-	if (props.orientation === "vertical") rules += " Fb151";
-	else if (props.orientation === "horizontal") rules += " Fp151";
-	rules += " ob151";
-	rules += " nb151";
-	rules += " kb151";
-	rules += " jb151";
-	rules += " ONqvpG151";
-	rules += " Ola151";
-	rules += " _Mb151";
-	rules += " _Ka151";
-	if (props.isDisabled) rules += " _Le151";
-	else rules += " _Lf151";
-	if (props.isDisabled) rules += " gkDWoNd151";
+	rules += " zCPUPs17";
+	rules += " yCPUPs17";
+	rules += " BCPUPs17";
+	rules += " ACPUPs17";
+	if (props.orientation === "vertical") rules += " Zo17";
+	else if (props.orientation === "horizontal") rules += " Za17";
+	if (props.orientation === "vertical") rules += " Fb17";
+	else if (props.orientation === "horizontal") rules += " Fp17";
+	rules += " ob17";
+	rules += " nb17";
+	rules += " kb17";
+	rules += " jb17";
+	rules += " ONqvpG17";
+	rules += " Ola17";
+	rules += " _Mb17";
+	rules += " _Ka17";
+	if (props.isDisabled) rules += " _Le17";
+	else rules += " _Lf17";
+	if (props.isDisabled) rules += " gLX7Xt17";
 	return rules;
 };
 const colorSliderThumb = function anonymous(props) {
 	let rules = " ";
-	rules += " YEw2M9d151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.isFocusVisible) rules += " ZC151";
-	else rules += " Zu151";
-	if (props.isFocusVisible) rules += " Fx151";
-	else rules += " Ft151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " _oa151";
-	rules += " _jf151";
-	rules += " _kc151";
-	rules += " hc151";
-	rules += " mc151";
-	rules += " lc151";
-	if (props.isDisabled) rules += " ifbAdGe151";
-	else rules += " iB151";
-	rules += " _Lf151";
-	rules += " _Mb151";
-	rules += " O1lWhre151";
-	rules += " Ola151";
+	rules += " YEw2M9d17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isFocusVisible) rules += " ZC17";
+	else rules += " Zu17";
+	if (props.isFocusVisible) rules += " Fx17";
+	else rules += " Ft17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	rules += " og17";
+	rules += " ng17";
+	rules += " kg17";
+	rules += " jg17";
+	rules += " _oa17";
+	rules += " _jf17";
+	rules += " _kc17";
+	rules += " hc17";
+	rules += " mc17";
+	rules += " lc17";
+	if (props.isDisabled) rules += " iSNu3ze17";
+	else rules += " iB17";
+	rules += " _Lf17";
+	rules += " _Mb17";
+	rules += " O1lWhre17";
+	rules += " Ola17";
 	return rules;
 };
 /**
@@ -241,7 +261,8 @@ const colorSliderThumb = function anonymous(props) {
 * />
 * ```
 */ function ColorSlider$1(props) {
-	const [local, headlessProps] = splitProps(useProviderProps(useFormProps(props)), [
+	const mergedProps = useProviderProps(useFormProps(props));
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"styles",
 		"UNSAFE_className",
 		"UNSAFE_style",
@@ -359,54 +380,54 @@ const colorAreaRoot = function anonymous(props, overrides) {
 		if (p[1] === "M") minHeight = true;
 		rules += p[0];
 	}
-	if (!position) rules += " _Pc151";
-	if (!width) rules += " Zr151";
-	if (!height) rules += " Fs151";
-	if (!minWidth) rules += " Nm151";
-	if (!minHeight) rules += " Ml151";
-	rules += " ob151";
-	rules += " nb151";
-	rules += " kb151";
-	rules += " jb151";
-	rules += " ONqvpG151";
-	rules += " Ola151";
-	rules += " _Mb151";
-	rules += " _Ka151";
-	if (props.isDisabled) rules += " _Le151";
-	else rules += " _Lf151";
-	if (props.isDisabled) rules += " gkDWoNd151";
+	if (!position) rules += " _Pc17";
+	if (!width) rules += " Zr17";
+	if (!height) rules += " Fs17";
+	if (!minWidth) rules += " Nm17";
+	if (!minHeight) rules += " Ml17";
+	rules += " ob17";
+	rules += " nb17";
+	rules += " kb17";
+	rules += " jb17";
+	rules += " ONqvpG17";
+	rules += " Ola17";
+	rules += " _Mb17";
+	rules += " _Ka17";
+	if (props.isDisabled) rules += " _Le17";
+	else rules += " _Lf17";
+	if (props.isDisabled) rules += " gLX7Xt17";
 	return rules;
 };
 const colorAreaThumb = function anonymous(props) {
 	let rules = " ";
-	rules += " YEw2M9d151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.isFocusVisible) rules += " ZC151";
-	else rules += " Zu151";
-	if (props.isFocusVisible) rules += " Fx151";
-	else rules += " Ft151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " _oa151";
-	rules += " _jf151";
-	rules += " _kc151";
-	rules += " hc151";
-	rules += " mc151";
-	rules += " lc151";
-	if (props.isDisabled) rules += " ifbAdGe151";
-	else rules += " iB151";
-	rules += " _Lf151";
-	rules += " _Mb151";
-	rules += " O1lWhre151";
-	rules += " Ola151";
+	rules += " YEw2M9d17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isFocusVisible) rules += " ZC17";
+	else rules += " Zu17";
+	if (props.isFocusVisible) rules += " Fx17";
+	else rules += " Ft17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	rules += " og17";
+	rules += " ng17";
+	rules += " kg17";
+	rules += " jg17";
+	rules += " _oa17";
+	rules += " _jf17";
+	rules += " _kc17";
+	rules += " hc17";
+	rules += " mc17";
+	rules += " lc17";
+	if (props.isDisabled) rules += " iSNu3ze17";
+	else rules += " iB17";
+	rules += " _Lf17";
+	rules += " _Mb17";
+	rules += " O1lWhre17";
+	rules += " Ola17";
 	return rules;
 };
-const colorAreaThumbRing = " Za151 Fb151 og151 ng151 kg151 jg151 _oa151 _jf151 _kb151 hb151 mb151 lb151 i1lWhre151 ila151";
-const colorAreaLoupe = " _rgr5H3d151 _Ob151 _eb151 _fc151 _hb151 _Bb151";
+const colorAreaThumbRing = " Za17 Fb17 og17 ng17 kg17 jg17 _oa17 _jf17 _kb17 hb17 mb17 lb17 i1lWhre17 ila17";
+const colorAreaLoupe = " _rgr5H3d17 _Ob17 _eb17 _fc17 _hb17 _Bb17";
 const colorAreaLoupeEnterAnimation = "wG3fcb";
 const colorAreaLoupeExitAnimation = "pxSBSc";
 /**
@@ -470,11 +491,12 @@ function ColorAreaLoupe(props) {
 	const patternId = createUniqueId();
 	const [phase, setPhase] = createSignal(props.isOpen ? "open" : "closed");
 	const [rect, setRect] = createSignal(null);
-	createEffect(() => {
+	createTrackedEffect(() => {
 		if (props.isOpen) setPhase("open");
 		else if (phase() === "open") setPhase("exiting");
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		props.color.toString("css");
 		if (phase() === "closed" && !props.isOpen || typeof window === "undefined") {
 			setRect(null);
@@ -497,14 +519,16 @@ function ColorAreaLoupe(props) {
 		update();
 		window.addEventListener("scroll", update, true);
 		window.addEventListener("resize", update);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			window.removeEventListener("scroll", update, true);
 			window.removeEventListener("resize", update);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	return <Show when={phase() !== "closed" && typeof document !== "undefined" && rect()}>
       {(currentRect) => {
-		const borderWidth = 1;
 		const handleSize = 16;
 		const offset = 12;
 		const r = currentRect();
@@ -513,8 +537,8 @@ function ColorAreaLoupe(props) {
 			position: "fixed",
 			top: `${r.top + r.height / 2}px`,
 			left: `${r.left + r.width / 2}px`,
-			"margin-top": `${-64 - borderWidth * 2 - handleSize / 2 - offset}px`,
-			"margin-left": `${-48 / 2 - borderWidth}px`,
+			"margin-top": `${-66 - handleSize / 2 - offset}px`,
+			"margin-left": `-25px`,
 			"animation-name": phase() === "exiting" ? colorAreaLoupeExitAnimation : colorAreaLoupeEnterAnimation
 		}} onAnimationEnd={(event) => {
 			if (phase() === "exiting" && event.animationName === colorAreaLoupeExitAnimation) setPhase("closed");
@@ -526,7 +550,7 @@ function ColorAreaLoupe(props) {
               </pattern>
               <path d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z" fill={`url(#${patternId})`} />
               <path d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z" fill={props.color.toString("css")} />
-              <path class={" _Vb151 Vi151 Vlb151 tw151"} d="M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z" />
+              <path class={" _Vb17 Vi17 Vlb17 tw17"} d="M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z" />
             </svg>
           </Portal>;
 	}}
@@ -540,69 +564,69 @@ const colorWheelRoot = function anonymous(props, overrides) {
 		if (p[1] === "_P") position = true;
 		rules += p[0];
 	}
-	if (!position) rules += " _Pc151";
+	if (!position) rules += " _Pc17";
 	return rules;
 };
 const colorWheelTrack = function anonymous(props) {
 	let rules = " ";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " ONqvpG151";
-	rules += " Ola151";
-	rules += " _Mb151";
-	rules += " _Ka151";
-	if (props.isDisabled) rules += " _Le151";
-	else rules += " _Lf151";
-	if (props.isDisabled) rules += " gkDWoNd151";
+	rules += " og17";
+	rules += " ng17";
+	rules += " kg17";
+	rules += " jg17";
+	rules += " ONqvpG17";
+	rules += " Ola17";
+	rules += " _Mb17";
+	rules += " _Ka17";
+	if (props.isDisabled) rules += " _Le17";
+	else rules += " _Lf17";
+	if (props.isDisabled) rules += " gLX7Xt17";
 	return rules;
 };
 const colorWheelInnerBorder = function anonymous(props) {
 	let rules = " ";
-	rules += " _Pa151";
-	rules += " Ww151";
-	rules += " _lw151";
-	rules += " _Aw151";
-	rules += " _zw151";
-	rules += " _Ob151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " ONqvpG151";
-	rules += " Ola151";
-	rules += " _Mb151";
-	if (props.isDisabled) rules += " _Le151";
-	else rules += " _Lf151";
+	rules += " _Pa17";
+	rules += " Ww17";
+	rules += " _lw17";
+	rules += " _Aw17";
+	rules += " _zw17";
+	rules += " _Ob17";
+	rules += " og17";
+	rules += " ng17";
+	rules += " kg17";
+	rules += " jg17";
+	rules += " ONqvpG17";
+	rules += " Ola17";
+	rules += " _Mb17";
+	if (props.isDisabled) rules += " _Le17";
+	else rules += " _Lf17";
 	return rules;
 };
 const colorWheelThumb = function anonymous(props) {
 	let rules = " ";
-	rules += " YEw2M9d151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.isFocusVisible) rules += " ZC151";
-	else rules += " Zu151";
-	if (props.isFocusVisible) rules += " Fx151";
-	else rules += " Ft151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " _oa151";
-	rules += " _jf151";
-	rules += " _kc151";
-	rules += " hc151";
-	rules += " mc151";
-	rules += " lc151";
-	if (props.isDisabled) rules += " ifbAdGe151";
-	else rules += " iB151";
-	rules += " _Lf151";
-	rules += " _Mb151";
-	rules += " O1lWhre151";
-	rules += " Ola151";
+	rules += " YEw2M9d17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isFocusVisible) rules += " ZC17";
+	else rules += " Zu17";
+	if (props.isFocusVisible) rules += " Fx17";
+	else rules += " Ft17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	rules += " og17";
+	rules += " ng17";
+	rules += " kg17";
+	rules += " jg17";
+	rules += " _oa17";
+	rules += " _jf17";
+	rules += " _kc17";
+	rules += " hc17";
+	rules += " mc17";
+	rules += " lc17";
+	if (props.isDisabled) rules += " iSNu3ze17";
+	else rules += " iB17";
+	rules += " _Lf17";
+	rules += " _Mb17";
+	rules += " O1lWhre17";
+	rules += " Ola17";
 	return rules;
 };
 /**
@@ -618,7 +642,8 @@ const colorWheelThumb = function anonymous(props) {
 * />
 * ```
 */ function ColorWheel$1(props) {
-	const [local, headlessProps] = splitProps(useProviderProps(useFormProps(props)), [
+	const mergedProps = useProviderProps(useFormProps(props));
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"children",
 		"size",
 		"styles",
@@ -713,328 +738,249 @@ function createColorFieldStyles() {
 				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;
 		},
 		labelWrapper: 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;
 		},
 		label: 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;
 		},
 		group: 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 += " iBJTC6c17";
+				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";
-			rules += " -R_-Rv151";
-			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";
+			rules += " -R_-Rv17";
+			rules += " -m_-mb17";
+			rules += " -l_-lb17";
 			return rules;
 		},
-		input: " Td151 Qd151 Sd151 Rd151 g9151 p40ub4c151 pYFIK2bQKeKoe151 pYFIK2blc151 u40ub4c151 v40ub4c151 x40ub4c151 _xa151 _ub151 _vb151 Na151 Za151 _Le151 _je151 _Nc151 Pc151 _Yb151 _7c151",
-		helpText: 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;
-		},
-		errorIcon: " ZuUmpre151 FuUmpre151 It151 Isu151 HAxCW0c151 _va151 -_8sjo0b-tQQET4151 -_8sjo0b-ltQBRyrc151",
-		requiredIcon: " -_8sjo0b-t5ZbAob151",
-		noWrap: " _7c151"
+		input: " Td17 Qd17 Sd17 Rd17 g917 p40ub4c17 pYFIK2bX85CBd17 pYFIK2blc17 u40ub4c17 v40ub4c17 x40ub4c17 _xa17 _ub17 _vb17 Na17 Za17 _Le17 _je17 _Nc17 Pc17 _Yb17 _7c17",
+		errorIcon: " ZObNfn17 FObNfn17 It17 Isu17 HAxCW0c17 _va17 -_8sjo0b-tlIkJnc17 -_8sjo0b-ltQBRyrc17",
+		requiredIcon: " -_8sjo0b-t5ZbAob17",
+		noWrap: " _7c17"
 	};
 }
 let colorFieldStyles;
@@ -1057,7 +1003,8 @@ function getColorFieldStyles() {
 * ```
 */ function ColorField$1(props) {
 	const isInForm = useIsInForm();
-	const [local, headlessProps] = splitProps(useProviderProps(useFormProps(props)), [
+	const mergedProps = useProviderProps(useFormProps(props));
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"size",
 		"styles",
 		"UNSAFE_className",
@@ -1077,6 +1024,7 @@ function getColorFieldStyles() {
 	const labelPosition = () => local.labelPosition ?? "top";
 	const labelAlign = () => local.labelAlign ?? "start";
 	const necessityIndicator = () => local.necessityIndicator ?? "icon";
+	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
 	const fieldStyles = () => getColorFieldStyles();
 	const rootClassName = (renderProps) => [
 		local.UNSAFE_className,
@@ -1104,11 +1052,6 @@ function getColorFieldStyles() {
 		size: size(),
 		isFocusWithin: isFocusWithin()
 	});
-	const helpClass = (renderProps, isInvalid) => fieldStyles().helpText({
-		...renderProps,
-		size: size(),
-		isInvalid
-	});
 	return <ColorField {...headlessProps} description={local.description} errorMessage={local.errorMessage} class={rootClassName} style={local.UNSAFE_style} children={(renderProps) => <>
           <Show when={local.label}>
             <div class={labelWrapperClass()}>
@@ -1117,8 +1060,8 @@ function getColorFieldStyles() {
                 <Show when={renderProps.isRequired || necessityIndicator() === "label"}>
                   <span class={fieldStyles().noWrap}>
                     &nbsp;
-                    <Show when={necessityIndicator() === "icon"} fallback={<span aria-hidden={renderProps.isRequired ? true : void 0}>
-                          {renderProps.isRequired ? "(required)" : "(optional)"}
+                    <Show when={necessityIndicator() === "icon"} fallback={<span aria-hidden={renderProps.isRequired ? "true" : void 0}>
+                          {stringFormatter().format(renderProps.isRequired ? "label.(required)" : "label.(optional)")}
                         </span>}>
                       <Asterisk size={colorFieldIconSize(size())} class={fieldStyles().requiredIcon} style={colorFieldRequiredIconStyle(size())} aria-hidden="true" />
                     </Show>
@@ -1144,17 +1087,9 @@ function getColorFieldStyles() {
             </Show>
           </div>
 
-          <Show when={local.description && !renderProps.isInvalid}>
-            <ColorFieldDescription class={helpClass(renderProps, false)}>
-              {local.description}
-            </ColorFieldDescription>
-          </Show>
-
-          <Show when={local.errorMessage && renderProps.isInvalid}>
-            <ColorFieldError class={helpClass(renderProps, true)}>
-              {local.errorMessage}
-            </ColorFieldError>
-          </Show>
+          <HelpText size={size()} isDisabled={renderProps.isDisabled} isInvalid={renderProps.isInvalid} description={local.description}>
+            {local.errorMessage}
+          </HelpText>
         </>} />;
 }
 const ColorFieldContext$1 = ColorFieldContext;
@@ -1198,28 +1133,6 @@ function ColorFieldLabel(props) {
       {props.children}
     </label>;
 }
-function ColorFieldDescription(props) {
-	const context = useContext(ColorFieldContext);
-	if (!context) return null;
-	const descriptionProps = () => {
-		const { ref: _ref, ...rest } = context.descriptionProps;
-		return rest;
-	};
-	return <span {...descriptionProps()} slot="description" class={props.class}>
-      {props.children}
-    </span>;
-}
-function ColorFieldError(props) {
-	const context = useContext(ColorFieldContext);
-	if (!context) return null;
-	const errorMessageProps = () => {
-		const { ref: _ref, ...rest } = context.errorMessageProps;
-		return rest;
-	};
-	return <span {...errorMessageProps()} slot="errorMessage" class={props.class}>
-      {props.children}
-    </span>;
-}
 const colorSwatchRoot = function anonymous(props, overrides) {
 	let rules = " ";
 	let width = false;
@@ -1231,44 +1144,44 @@ const colorSwatchRoot = function anonymous(props, overrides) {
 		rules += p[0];
 	}
 	if (props.size === "L") {
-		if (!width) rules += " Zw151";
+		if (!width) rules += " Zw17";
 	} else if (props.size === "M") {
-		if (!width) rules += " ZC151";
+		if (!width) rules += " ZC17";
 	} else if (props.size === "S") {
-		if (!width) rules += " Zo151";
+		if (!width) rules += " Zo17";
 	} else if (props.size === "XS") {
-		if (!width) rules += " Zu151";
+		if (!width) rules += " Zu17";
 	}
 	if (props.size === "L") {
-		if (!height) rules += " Fv151";
+		if (!height) rules += " Fv17";
 	} else if (props.size === "M") {
-		if (!height) rules += " Fx151";
+		if (!height) rules += " Fx17";
 	} else if (props.size === "S") {
-		if (!height) rules += " Fp151";
+		if (!height) rules += " Fp17";
 	} else if (props.size === "XS") {
-		if (!height) rules += " Ft151";
+		if (!height) rules += " Ft17";
 	}
-	if (props.rounding === "full") rules += " og151";
-	else if (props.rounding === "none") rules += " od151";
-	else if (props.rounding === "default") rules += " oa151";
-	if (props.rounding === "full") rules += " ng151";
-	else if (props.rounding === "none") rules += " nd151";
-	else if (props.rounding === "default") rules += " na151";
-	if (props.rounding === "full") rules += " kg151";
-	else if (props.rounding === "none") rules += " kd151";
-	else if (props.rounding === "default") rules += " ka151";
-	if (props.rounding === "full") rules += " jg151";
-	else if (props.rounding === "none") rules += " jd151";
-	else if (props.rounding === "default") rules += " ja151";
-	rules += " iO2XpG151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mb151";
-	rules += " lb151";
-	rules += " _jf151";
-	rules += " _oa151";
-	rules += " _yb151";
-	rules += " -_8LZfRc-pYjUhNc151";
+	if (props.rounding === "full") rules += " og17";
+	else if (props.rounding === "none") rules += " od17";
+	else if (props.rounding === "default") rules += " oa17";
+	if (props.rounding === "full") rules += " ng17";
+	else if (props.rounding === "none") rules += " nd17";
+	else if (props.rounding === "default") rules += " na17";
+	if (props.rounding === "full") rules += " kg17";
+	else if (props.rounding === "none") rules += " kd17";
+	else if (props.rounding === "default") rules += " ka17";
+	if (props.rounding === "full") rules += " jg17";
+	else if (props.rounding === "none") rules += " jd17";
+	else if (props.rounding === "default") rules += " ja17";
+	rules += " iO2XpG17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mb17";
+	rules += " lb17";
+	rules += " _jf17";
+	rules += " _oa17";
+	rules += " _yb17";
+	rules += " -_8LZfRc-puNtkec17";
 	return rules;
 };
 /**
@@ -1331,44 +1244,44 @@ const ColorSwatchContext$1 = ColorSwatchContext;
 *   showSliders
 * />
 * ```
-*/ const colorPickerRoot = " sd151 _ta151 Ul151 ql151";
+*/ const colorPickerRoot = " sd17 _ta17 Ul17 ql17";
 const colorPickerLabel = function anonymous(props) {
 	let rules = " ";
-	if (props.size === "lg") rules += " pHKLAu151";
-	else if (props.size === "md") rules += " pHKLAu151";
-	else if (props.size === "sm") rules += " pHKLAu151";
+	if (props.size === "lg") rules += " pmiKvLd17";
+	else if (props.size === "md") rules += " pmiKvLd17";
+	else if (props.size === "sm") rules += " pmiKvLd17";
 	if (props.size === "lg") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "md") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "sm") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
-	if (props.size === "lg") rules += " uxe7h4151";
-	else if (props.size === "md") rules += " uxe7h4151";
-	else if (props.size === "sm") rules += " uxe7h4151";
+	if (props.size === "lg") rules += " uxe7h417";
+	else if (props.size === "md") rules += " uxe7h417";
+	else if (props.size === "sm") rules += " uxe7h417";
 	if (props.size === "lg") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "md") {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	} else if (props.size === "sm") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	}
 	if (props.size === "lg") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "md") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "sm") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
 	return rules;
 };