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

package/dist/_chunk/color.js

@@ -1,38 +1,66 @@
+/*
+* 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 { mergeStyles } from "../style/runtime.js";
-import { useProviderProps } from "../provider/index.js";
-import { CenterBaseline } from "../icon/center-baseline.js";
+import { a as useProviderProps } from "./provider.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";
+import { t as Asterisk } from "./macro-d2704bd5d9b60d26ff1e50aa3db378885d30e50caf8dc7b31cfaf5dd36a09d85.js";
 /* empty css                                                                       */
 /* 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";
 import { i as InternalColorSwatchContext } from "./ColorSwatchPicker.js";
 /* empty css                                                                       */
-import { Portal, className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, setStyleProperty, spread, template } from "solid-js/web";
-import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
-import { useLocale } from "@proyecto-viviana/solidaria";
+import { Portal, addEvent, className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, readShallow, runHydrationEvents, scope, setAttribute, setStyleProperty, spread, template } from "@solidjs/web";
+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";
 //#region src/color/ColorEditor.tsx
 const editorStyles = "qPpIvb";
 /**
 * A complete color editor with area, hue slider, alpha slider,
 * color space selector, and channel fields.
-*/
-function ColorEditor$1(props) {
+*/ function ColorEditor$1(props) {
 	const [local, headlessProps] = splitProps(props, ["class"]);
-	return createComponent(ColorEditor, mergeProps(headlessProps, { get ["class"]() {
+	return createComponent(ColorEditor, mergeProps(headlessProps, { get "class"() {
 		return [editorStyles, local.class].filter(Boolean).join(" ");
 	} }));
 }
 //#endregion
 //#region src/color/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=contextualHelp>`), _tmpl$2 = /*#__PURE__*/ template(`<div style=grid-area:label>`), _tmpl$3 = /*#__PURE__*/ template(`<div>`), _tmpl$4 = /*#__PURE__*/ template(`<div class=" Za151 Fb151 og151 ng151 kg151 jg151 _oa151 _jf151 _kb151 hb151 mb151 lb151 i1lWhre151 ila151">`), _tmpl$5 = /*#__PURE__*/ template(`<svg aria-hidden=true class=" _rgr5H3d151 _Ob151 _eb151 _fc151 _hb151 _Bb151"width=50 height=66 style=position:fixed;margin-top:-86px;margin-left:-25px><pattern x=0 y=0 width=16 height=16 patternUnits=userSpaceOnUse><rect fill=white x=0 y=0 width=16 height=16></rect><rect fill=#E1E1E1 x=0 y=0 width=8 height=8></rect><rect fill=#E1E1E1 x=8 y=8 width=8 height=8></rect></pattern><path d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"></path><path d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"></path><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">`), _tmpl$6 = /*#__PURE__*/ template(`<span>&nbsp;<!$><!/>`), _tmpl$7 = /*#__PURE__*/ template(`<div role=presentation><!$><!/><!$><!/>`), _tmpl$8 = /*#__PURE__*/ template(`<span>`), _tmpl$9 = /*#__PURE__*/ template(`<label>`), _tmpl$0 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/><!$><!/><!$><!/>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span data-slot=contextualHelp>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div style=grid-area:label>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div class=" Za17 Fb17 og17 ng17 kg17 jg17 _oa17 _jf17 _kb17 hb17 mb17 lb17 i1lWhre17 ila17">`);
+var _tmpl$5 = /* @__PURE__ */ template(`<svg aria-hidden=true class=" _rgr5H3d17 _Ob17 _eb17 _fc17 _hb17 _Bb17"width=50 height=66 style=position:fixed;margin-top:-86px;margin-left:-25px><pattern x=0 y=0 width=16 height=16 patternUnits=userSpaceOnUse><rect fill=white x=0 y=0 width=16 height=16></rect><rect fill=#E1E1E1 x=0 y=0 width=8 height=8></rect><rect fill=#E1E1E1 x=8 y=8 width=8 height=8></rect></pattern><path d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"></path><path d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"></path><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">`);
+var _tmpl$6 = /* @__PURE__ */ template(`<span>&nbsp;<!$><!/>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div role=presentation><!$><!/><!$><!/>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/><!$><!/>`);
 createContext({ size: "md" });
 const colorSliderRoot = function anonymous(props, overrides) {
 	let rules = " ";
@@ -43,198 +71,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;
 };
 /**
@@ -251,9 +279,9 @@ const colorSliderThumb = function anonymous(props) {
 *   label="Hue"
 * />
 * ```
-*/
-function ColorSlider$1(props) {
-	const [local, headlessProps] = splitProps(useProviderProps(useFormProps(props)), [
+*/ function ColorSlider$1(props) {
+	const mergedProps = useProviderProps(useFormProps(props));
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"styles",
 		"UNSAFE_className",
 		"UNSAFE_style",
@@ -273,10 +301,10 @@ function ColorSlider$1(props) {
 		get label() {
 			return labelForAria();
 		},
-		get ["aria-label"]() {
+		get "aria-label"() {
 			return ariaLabel();
 		},
-		"class": (renderProps) => [
+		class: (renderProps) => [
 			local.UNSAFE_className,
 			local.class,
 			colorSliderRoot(renderProps, mergeStyles(local.styles))
@@ -293,23 +321,29 @@ function ColorSlider$1(props) {
 				get children() {
 					var _el$ = getNextElement(_tmpl$2);
 					insert(_el$, createComponent(ColorSliderLabel, {
-						get ["class"]() {
+						get "class"() {
 							return colorSliderLabel(renderProps);
 						},
 						get children() {
-							return [memo(() => local.label ?? renderProps.color.getChannelName(renderProps.channel, locale().locale)), createComponent(Show, {
+							return [memo(() => {
+								return local.label ?? renderProps.color.getChannelName(renderProps.channel, locale().locale);
+							}), createComponent(Show, {
 								get when() {
 									return local.contextualHelp;
 								},
 								get children() {
 									var _el$2 = getNextElement(_tmpl$);
-									insert(_el$2, () => local.contextualHelp);
+									insert(_el$2, () => {
+										return local.contextualHelp;
+									});
 									return _el$2;
 								}
 							})];
 						}
 					}));
-					effect(() => className(_el$, colorSliderLabelWrapper(renderProps)));
+					effect(() => readShallow(colorSliderLabelWrapper(renderProps)), (_v$, _$p) => {
+						className(_el$, _v$, _$p);
+					});
 					return _el$;
 				}
 			}),
@@ -319,7 +353,7 @@ function ColorSlider$1(props) {
 				},
 				get children() {
 					return createComponent(ColorSliderOutput, {
-						get ["class"]() {
+						get "class"() {
 							return colorSliderOutput(renderProps);
 						},
 						style: { "grid-area": "output" }
@@ -332,8 +366,7 @@ function ColorSlider$1(props) {
 }
 /**
 * The track component for a color slider.
-*/
-function ColorSliderTrack$1(props) {
+*/ function ColorSliderTrack$1(props) {
 	const [local, headlessProps] = splitProps(props, [
 		"children",
 		"styles",
@@ -342,7 +375,7 @@ function ColorSliderTrack$1(props) {
 		"class"
 	]);
 	return createComponent(ColorSliderTrack, mergeProps(headlessProps, {
-		"class": (renderProps) => [
+		class: (renderProps) => [
 			local.UNSAFE_className,
 			local.class,
 			mergeStyles(colorSliderTrack(renderProps), local.styles)
@@ -362,8 +395,7 @@ function ColorSliderTrack$1(props) {
 }
 /**
 * The thumb component for a color slider.
-*/
-function ColorSliderThumb$1(props = {}) {
+*/ function ColorSliderThumb$1(props = {}) {
 	const [local, headlessProps] = splitProps(props, [
 		"children",
 		"ref",
@@ -378,7 +410,7 @@ function ColorSliderThumb$1(props = {}) {
 			thumbElement = element;
 			local.ref?.(element);
 		},
-		"class": (renderProps) => [
+		class: (renderProps) => [
 			local.UNSAFE_className,
 			local.class,
 			mergeStyles(colorSliderThumb(renderProps), local.styles)
@@ -388,11 +420,15 @@ function ColorSliderThumb$1(props = {}) {
 			"background-color": void 0,
 			...local.UNSAFE_style
 		}),
-		children: (renderProps) => typeof local.children === "function" ? local.children(renderProps) : [memo(() => local.children ?? (() => {
-			var _el$3 = getNextElement(_tmpl$3);
-			className(_el$3, colorAreaThumbRing);
-			return _el$3;
-		})()), createComponent(ColorAreaLoupe, {
+		children: (renderProps) => typeof local.children === "function" ? local.children(renderProps) : [memo(() => {
+			return local.children ?? (() => {
+				var _el$3 = getNextElement(_tmpl$3);
+				effect(() => readShallow(colorAreaThumbRing), (_v$, _$p) => {
+					className(_el$3, _v$, _$p);
+				});
+				return _el$3;
+			})();
+		}), createComponent(ColorAreaLoupe, {
 			get isOpen() {
 				return renderProps.isDragging;
 			},
@@ -424,53 +460,53 @@ 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 colorAreaThumbRing = " Za17 Fb17 og17 ng17 kg17 jg17 _oa17 _jf17 _kb17 hb17 mb17 lb17 i1lWhre17 ila17";
 const colorAreaLoupeEnterAnimation = "wG3fcb";
 const colorAreaLoupeExitAnimation = "pxSBSc";
 /**
@@ -487,15 +523,14 @@ const colorAreaLoupeExitAnimation = "pxSBSc";
 *   yChannel="lightness"
 * />
 * ```
-*/
-function ColorArea$1(props) {
+*/ function ColorArea$1(props) {
 	const [local, headlessProps] = splitProps(props, [
 		"styles",
 		"UNSAFE_className",
 		"UNSAFE_style"
 	]);
 	return createComponent(ColorArea, mergeProps(headlessProps, {
-		"class": (renderProps) => [local.UNSAFE_className, colorAreaRoot(renderProps, mergeStyles(local.styles))].filter(Boolean).join(" "),
+		class: (renderProps) => [local.UNSAFE_className, colorAreaRoot(renderProps, mergeStyles(local.styles))].filter(Boolean).join(" "),
 		style: (renderProps) => ({
 			...renderProps.defaultStyle,
 			background: renderProps.isDisabled ? void 0 : renderProps.defaultStyle.background,
@@ -520,7 +555,7 @@ function ColorAreaThumb$1(props = {}) {
 			thumbElement = element;
 			local.ref?.(element);
 		},
-		"class": (renderProps) => [
+		class: (renderProps) => [
 			local.UNSAFE_className,
 			local.class,
 			mergeStyles(colorAreaThumb(renderProps), local.styles)
@@ -530,7 +565,9 @@ function ColorAreaThumb$1(props = {}) {
 			"background-color": void 0,
 			...local.UNSAFE_style
 		}),
-		children: (renderProps) => typeof local.children === "function" ? local.children(renderProps) : [memo(() => local.children ?? getNextElement(_tmpl$4)), createComponent(ColorAreaLoupe, {
+		children: (renderProps) => typeof local.children === "function" ? local.children(renderProps) : [memo(() => {
+			return local.children ?? getNextElement(_tmpl$4);
+		}), createComponent(ColorAreaLoupe, {
 			get isOpen() {
 				return renderProps.isDragging;
 			},
@@ -545,11 +582,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);
@@ -572,14 +610,19 @@ 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 createComponent(Show, {
 		get when() {
-			return memo(() => !!(phase() !== "closed" && typeof document !== "undefined"))() && rect();
+			return memo(() => {
+				return !!(phase() !== "closed" && typeof document !== "undefined");
+			})() ? rect() : phase() !== "closed" && typeof document !== "undefined";
 		},
 		children: (currentRect) => {
 			const r = currentRect();
@@ -588,24 +631,27 @@ function ColorAreaLoupe(props) {
 					return document.body;
 				},
 				get children() {
-					var _el$5 = getNextElement(_tmpl$5), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
+					var _el$5 = getNextElement(_tmpl$5);
+					var _el$6 = _el$5.firstChild;
+					var _el$7 = _el$6.nextSibling;
+					var _el$8 = _el$7.nextSibling;
 					_el$5.addEventListener("animationend", (event) => {
 						if (phase() === "exiting" && event.animationName === colorAreaLoupeExitAnimation) setPhase("closed");
 					});
 					setAttribute(_el$6, "id", patternId);
 					setAttribute(_el$7, "fill", `url(#${patternId})`);
-					effect((_p$) => {
-						var _v$ = `${r.top + r.height / 2}px`, _v$2 = `${r.left + r.width / 2}px`, _v$3 = phase() === "exiting" ? colorAreaLoupeExitAnimation : colorAreaLoupeEnterAnimation, _v$4 = props.color.toString("css");
-						_v$ !== _p$.e && setStyleProperty(_el$5, "top", _p$.e = _v$);
-						_v$2 !== _p$.t && setStyleProperty(_el$5, "left", _p$.t = _v$2);
-						_v$3 !== _p$.a && setStyleProperty(_el$5, "animation-name", _p$.a = _v$3);
-						_v$4 !== _p$.o && setAttribute(_el$8, "fill", _p$.o = _v$4);
-						return _p$;
-					}, {
-						e: void 0,
-						t: void 0,
-						a: void 0,
-						o: void 0
+					effect(() => {
+						return {
+							e: `${r.top + r.height / 2}px`,
+							t: `${r.left + r.width / 2}px`,
+							a: phase() === "exiting" ? colorAreaLoupeExitAnimation : colorAreaLoupeEnterAnimation,
+							o: props.color.toString("css")
+						};
+					}, ({ e, t, a, o }, _p$) => {
+						e !== _p$?.e && setStyleProperty(_el$5, "top", e);
+						t !== _p$?.t && setStyleProperty(_el$5, "left", t);
+						a !== _p$?.a && setStyleProperty(_el$5, "animation-name", a);
+						o !== _p$?.o && setAttribute(_el$8, "fill", o);
 					});
 					return _el$5;
 				}
@@ -621,69 +667,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;
 };
 /**
@@ -698,9 +744,9 @@ const colorWheelThumb = function anonymous(props) {
 *   onChange={setColor}
 * />
 * ```
-*/
-function ColorWheel$1(props) {
-	const [local, headlessProps] = splitProps(useProviderProps(useFormProps(props)), [
+*/ function ColorWheel$1(props) {
+	const mergedProps = useProviderProps(useFormProps(props));
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"children",
 		"size",
 		"styles",
@@ -718,7 +764,9 @@ function ColorWheel$1(props) {
 			createComponent(ColorWheelTrack$1, {}),
 			(() => {
 				var _el$9 = getNextElement(_tmpl$3);
-				effect(() => className(_el$9, colorWheelInnerBorder(renderProps)));
+				effect(() => readShallow(colorWheelInnerBorder(renderProps)), (_v$, _$p) => {
+					className(_el$9, _v$, _$p);
+				});
 				return _el$9;
 			})(),
 			createComponent(ColorWheelThumb$1, {})
@@ -731,7 +779,7 @@ function ColorWheel$1(props) {
 		get innerRadius() {
 			return innerRadius();
 		},
-		"class": (renderProps) => [
+		class: (renderProps) => [
 			local.UNSAFE_className,
 			local.class,
 			colorWheelRoot(renderProps, mergeStyles(local.styles))
@@ -746,8 +794,7 @@ function ColorWheel$1(props) {
 }
 /**
 * The circular track for a color wheel.
-*/
-function ColorWheelTrack$1(props = {}) {
+*/ function ColorWheelTrack$1(props = {}) {
 	const [local, headlessProps] = splitProps(props, [
 		"children",
 		"styles",
@@ -756,7 +803,7 @@ function ColorWheelTrack$1(props = {}) {
 		"class"
 	]);
 	return createComponent(ColorWheelTrack, mergeProps(headlessProps, {
-		"class": (renderProps) => [
+		class: (renderProps) => [
 			local.UNSAFE_className,
 			local.class,
 			mergeStyles(colorWheelTrack(renderProps), local.styles)
@@ -772,8 +819,7 @@ function ColorWheelTrack$1(props = {}) {
 }
 /**
 * The thumb component for a color wheel.
-*/
-function ColorWheelThumb$1(props = {}) {
+*/ function ColorWheelThumb$1(props = {}) {
 	const [local, headlessProps] = splitProps(props, [
 		"children",
 		"ref",
@@ -788,7 +834,7 @@ function ColorWheelThumb$1(props = {}) {
 			thumbElement = element;
 			local.ref?.(element);
 		},
-		"class": (renderProps) => [
+		class: (renderProps) => [
 			local.UNSAFE_className,
 			local.class,
 			mergeStyles(colorWheelThumb(renderProps), local.styles)
@@ -798,7 +844,9 @@ function ColorWheelThumb$1(props = {}) {
 			"background-color": void 0,
 			...local.UNSAFE_style
 		}),
-		children: (renderProps) => typeof local.children === "function" ? local.children(renderProps) : [memo(() => local.children ?? getNextElement(_tmpl$4)), createComponent(ColorAreaLoupe, {
+		children: (renderProps) => typeof local.children === "function" ? local.children(renderProps) : [memo(() => {
+			return local.children ?? getNextElement(_tmpl$4);
+		}), createComponent(ColorAreaLoupe, {
 			get isOpen() {
 				return renderProps.isDragging;
 			},
@@ -821,328 +869,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";
-			} 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;
-		},
-		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";
+				if (props.isPressed) rules += " ilIkJnc17";
+				else if (props.isFocusVisible) rules += " ilIkJnc17";
+				else if (props.isHovered) rules += " ilIkJnc17";
+				else rules += " iuNtkec17";
+				rules += " ile17";
 			} else {
-				rules += " _Fd151";
-				rules += " _FnuYUweb151";
+				rules += " iAv83Hb17";
+				rules += " ila17";
 			}
-			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;
 		},
-		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;
@@ -1163,10 +1132,10 @@ function getColorFieldStyles() {
 *   label="Color"
 * />
 * ```
-*/
-function ColorField$1(props) {
+*/ 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",
@@ -1186,6 +1155,7 @@ function ColorField$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 fieldStyles = () => getColorFieldStyles();
 	const rootClassName = (renderProps) => [
 		local.UNSAFE_className,
@@ -1213,11 +1183,6 @@ function ColorField$1(props) {
 		size: size(),
 		isFocusWithin: isFocusWithin()
 	});
-	const helpClass = (renderProps, isInvalid) => fieldStyles().helpText({
-		...renderProps,
-		size: size(),
-		isInvalid
-	});
 	return createComponent(ColorField, mergeProps(headlessProps, {
 		get description() {
 			return local.description;
@@ -1225,7 +1190,7 @@ function ColorField$1(props) {
 		get errorMessage() {
 			return local.errorMessage;
 		},
-		"class": rootClassName,
+		class: rootClassName,
 		get style() {
 			return local.UNSAFE_style;
 		},
@@ -1235,36 +1200,42 @@ function ColorField$1(props) {
 					return local.label;
 				},
 				get children() {
-					var _el$1 = getNextElement(_tmpl$3);
-					insert(_el$1, createComponent(ColorFieldLabel, {
-						get ["class"]() {
+					var _el$11 = getNextElement(_tmpl$3);
+					insert(_el$11, createComponent(ColorFieldLabel, {
+						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$10 = getNextElement(_tmpl$6), _el$12 = _el$10.firstChild.nextSibling, [_el$13, _co$] = getNextMarker(_el$12.nextSibling);
-									insert(_el$10, createComponent(Show, {
+									var _el$12 = getNextElement(_tmpl$6);
+									var _el$14 = _el$12.firstChild.nextSibling;
+									var [_el$15, _el$16] = getNextMarker(_el$14.nextSibling);
+									insert(_el$12, createComponent(Show, {
 										get when() {
 											return necessityIndicator() === "icon";
 										},
 										get fallback() {
-											return (() => {
-												var _el$19 = getNextElement(_tmpl$8);
-												insert(_el$19, () => renderProps.isRequired ? "(required)" : "(optional)");
-												effect(() => setAttribute(_el$19, "aria-hidden", renderProps.isRequired ? true : void 0));
-												return _el$19;
-											})();
+											var _el$24 = getNextElement(_tmpl$8);
+											insert(_el$24, scope(() => {
+												return stringFormatter().format(renderProps.isRequired ? "label.(required)" : "label.(optional)");
+											}));
+											effect(() => renderProps.isRequired ? "true" : void 0, (_v$) => {
+												setAttribute(_el$24, "aria-hidden", _v$);
+											});
+											return _el$24;
 										},
 										get children() {
 											return createComponent(Asterisk, {
 												get size() {
 													return colorFieldIconSize(size());
 												},
-												get ["class"]() {
+												get "class"() {
 													return fieldStyles().requiredIcon;
 												},
 												get style() {
@@ -1273,31 +1244,39 @@ function ColorField$1(props) {
 												"aria-hidden": "true"
 											});
 										}
-									}), _el$13, _co$);
-									effect(() => className(_el$10, fieldStyles().noWrap));
-									return _el$10;
+									}), _el$15, _el$16);
+									effect(() => readShallow(fieldStyles().noWrap), (_v$, _$p) => {
+										className(_el$12, _v$, _$p);
+									});
+									return _el$12;
 								}
 							})];
 						}
 					}));
-					effect(() => className(_el$1, labelWrapperClass()));
-					return _el$1;
+					effect(() => readShallow(labelWrapperClass()), (_v$, _$p) => {
+						className(_el$11, _v$, _$p);
+					});
+					return _el$11;
 				}
 			}),
 			(() => {
-				var _el$14 = getNextElement(_tmpl$7), _el$15 = _el$14.firstChild, [_el$16, _co$2] = getNextMarker(_el$15.nextSibling), _el$17 = _el$16.nextSibling, [_el$18, _co$3] = getNextMarker(_el$17.nextSibling);
-				_el$14.$$focusout = () => setIsFocusWithin(false);
-				_el$14.$$focusin = () => setIsFocusWithin(true);
-				_el$14.$$touchend = focusColorFieldInput;
-				_el$14.$$pointerdown = (event) => {
+				var _el$17 = getNextElement(_tmpl$7);
+				var _el$18 = _el$17.firstChild;
+				var [_el$19, _el$20] = getNextMarker(_el$18.nextSibling);
+				var _el$21 = _el$19.nextSibling;
+				var [_el$22, _el$23] = getNextMarker(_el$21.nextSibling);
+				_el$17._$$focusout = () => setIsFocusWithin(false);
+				_el$17._$$focusin = () => setIsFocusWithin(true);
+				addEvent(_el$17, "touchend", focusColorFieldInput, true);
+				_el$17._$$pointerdown = (event) => {
 					if (event.pointerType === "mouse") focusColorFieldInput(event);
 				};
-				insert(_el$14, createComponent(Show, {
+				insert(_el$17, createComponent(Show, {
 					get when() {
 						return local.prefix;
 					},
 					get fallback() {
-						return createComponent(ColorFieldInput, { get ["class"]() {
+						return createComponent(ColorFieldInput, { get "class"() {
 							return fieldStyles().input;
 						} });
 					},
@@ -1311,16 +1290,18 @@ function ColorField$1(props) {
 							context: ColorFieldContext,
 							prefixId,
 							get children() {
-								return createComponent(ColorFieldInput, { get ["class"]() {
+								return createComponent(ColorFieldInput, { get "class"() {
 									return fieldStyles().input;
 								} });
 							}
 						})];
 					}
-				}), _el$16, _co$2);
-				insert(_el$14, createComponent(Show, {
+				}), _el$19, _el$20);
+				insert(_el$17, 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() {
@@ -1329,51 +1310,38 @@ function ColorField$1(props) {
 							} });
 						} });
 					}
-				}), _el$18, _co$3);
-				effect((_p$) => {
-					var _v$5 = groupClass(renderProps), _v$6 = isFocusWithin() ? "true" : void 0, _v$7 = renderProps.isDisabled ? "true" : void 0, _v$8 = renderProps.isInvalid ? "true" : void 0;
-					_v$5 !== _p$.e && className(_el$14, _p$.e = _v$5);
-					_v$6 !== _p$.t && setAttribute(_el$14, "data-focused", _p$.t = _v$6);
-					_v$7 !== _p$.a && setAttribute(_el$14, "data-disabled", _p$.a = _v$7);
-					_v$8 !== _p$.o && setAttribute(_el$14, "data-invalid", _p$.o = _v$8);
-					return _p$;
-				}, {
-					e: void 0,
-					t: void 0,
-					a: void 0,
-					o: void 0
+				}), _el$22, _el$23);
+				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$17, e, _p$?.e);
+					t !== _p$?.t && setAttribute(_el$17, "data-focused", t);
+					a !== _p$?.a && setAttribute(_el$17, "data-disabled", a);
+					o !== _p$?.o && setAttribute(_el$17, "data-invalid", o);
 				});
 				runHydrationEvents();
-				return _el$14;
+				return _el$17;
 			})(),
-			createComponent(Show, {
-				get when() {
-					return memo(() => !!local.description)() && !renderProps.isInvalid;
+			createComponent(HelpText, {
+				get size() {
+					return size();
 				},
-				get children() {
-					return createComponent(ColorFieldDescription, {
-						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(ColorFieldError, {
-						get ["class"]() {
-							return helpClass(renderProps, true);
-						},
-						get children() {
-							return local.errorMessage;
-						}
-					});
+					return local.errorMessage;
 				}
 			})
 		]
@@ -1416,55 +1384,15 @@ function ColorFieldLabel(props) {
 		const { ref: _ref, ...rest } = context.labelProps;
 		return rest;
 	};
-	return (() => {
-		var _el$20 = getNextElement(_tmpl$9);
-		spread(_el$20, mergeProps(labelProps, { get ["class"]() {
-			return props.class;
-		} }), false, true);
-		insert(_el$20, () => props.children);
-		runHydrationEvents();
-		return _el$20;
-	})();
-}
-function ColorFieldDescription(props) {
-	const context = useContext(ColorFieldContext);
-	if (!context) return null;
-	const descriptionProps = () => {
-		const { ref: _ref, ...rest } = context.descriptionProps;
-		return rest;
-	};
-	return (() => {
-		var _el$21 = getNextElement(_tmpl$8);
-		spread(_el$21, mergeProps(descriptionProps, {
-			"slot": "description",
-			get ["class"]() {
-				return props.class;
-			}
-		}), false, true);
-		insert(_el$21, () => props.children);
-		runHydrationEvents();
-		return _el$21;
-	})();
-}
-function ColorFieldError(props) {
-	const context = useContext(ColorFieldContext);
-	if (!context) return null;
-	const errorMessageProps = () => {
-		const { ref: _ref, ...rest } = context.errorMessageProps;
-		return rest;
-	};
-	return (() => {
-		var _el$22 = getNextElement(_tmpl$8);
-		spread(_el$22, mergeProps(errorMessageProps, {
-			"slot": "errorMessage",
-			get ["class"]() {
-				return props.class;
-			}
-		}), false, true);
-		insert(_el$22, () => props.children);
-		runHydrationEvents();
-		return _el$22;
-	})();
+	var _el$25 = getNextElement(_tmpl$9);
+	spread(_el$25, [labelProps, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$25, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$25;
 }
 const colorSwatchRoot = function anonymous(props, overrides) {
 	let rules = " ";
@@ -1477,44 +1405,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;
 };
 /**
@@ -1524,8 +1452,7 @@ const colorSwatchRoot = function anonymous(props, overrides) {
 * ```tsx
 * <ColorSwatch color={parseColor('#ff0000')} aria-label="Selected color" />
 * ```
-*/
-function ColorSwatch$1(props) {
+*/ function ColorSwatch$1(props) {
 	const pickerContext = useContext(InternalColorSwatchContext);
 	const [local, headlessProps] = splitProps(props, [
 		"size",
@@ -1562,7 +1489,7 @@ function ColorSwatch$1(props) {
 		get color() {
 			return color();
 		},
-		"class": getClassName,
+		class: getClassName,
 		style: getStyle
 	}));
 	if (pickerContext) return pickerContext.useWrapper(swatch, color, rounding);
@@ -1584,159 +1511,170 @@ 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;
 };
 function ColorPicker(props) {
 	const size = () => props.size ?? "md";
-	return (() => {
-		var _el$23 = getNextElement(_tmpl$0), _el$25 = _el$23.firstChild, [_el$26, _co$4] = getNextMarker(_el$25.nextSibling), _el$27 = _el$26.nextSibling, [_el$28, _co$5] = getNextMarker(_el$27.nextSibling), _el$29 = _el$28.nextSibling, [_el$30, _co$6] = getNextMarker(_el$29.nextSibling), _el$31 = _el$30.nextSibling, [_el$32, _co$7] = getNextMarker(_el$31.nextSibling);
-		insert(_el$23, createComponent(Show, {
-			get when() {
+	var _el$26 = getNextElement(_tmpl$10);
+	var _el$28 = _el$26.firstChild;
+	var [_el$29, _el$30] = getNextMarker(_el$28.nextSibling);
+	var _el$31 = _el$29.nextSibling;
+	var [_el$32, _el$33] = getNextMarker(_el$31.nextSibling);
+	var _el$34 = _el$32.nextSibling;
+	var [_el$35, _el$36] = getNextMarker(_el$34.nextSibling);
+	var _el$37 = _el$35.nextSibling;
+	var [_el$38, _el$39] = getNextMarker(_el$37.nextSibling);
+	insert(_el$26, createComponent(Show, {
+		get when() {
+			return props.label;
+		},
+		get children() {
+			var _el$27 = getNextElement(_tmpl$8);
+			insert(_el$27, () => {
 				return props.label;
-			},
-			get children() {
-				var _el$24 = getNextElement(_tmpl$8);
-				insert(_el$24, () => props.label);
-				effect(() => className(_el$24, colorPickerLabel({ size: size() })));
-				return _el$24;
-			}
-		}), _el$26, _co$4);
-		insert(_el$23, createComponent(ColorArea$1, {
-			get value() {
-				return props.value;
-			},
-			get defaultValue() {
-				return props.defaultValue;
-			},
-			get onChange() {
-				return props.onChange;
-			},
-			xChannel: "saturation",
-			yChannel: "lightness",
-			get UNSAFE_style() {
-				return {
-					width: legacyColorAreaSizes[size()],
-					height: legacyColorAreaSizes[size()]
-				};
-			},
-			get isDisabled() {
-				return props.isDisabled;
-			}
-		}), _el$28, _co$5);
-		insert(_el$23, createComponent(Show, {
-			get when() {
-				return props.showSliders !== false;
-			},
-			get children() {
-				return [createComponent(ColorSlider$1, {
-					get value() {
-						return props.value;
-					},
-					get defaultValue() {
-						return props.defaultValue;
-					},
-					get onChange() {
-						return props.onChange;
-					},
-					channel: "hue",
-					label: "Hue",
-					get size() {
-						return size();
-					},
-					showValue: true,
-					get isDisabled() {
-						return props.isDisabled;
-					}
-				}), createComponent(ColorSlider$1, {
-					get value() {
-						return props.value;
-					},
-					get defaultValue() {
-						return props.defaultValue;
-					},
-					get onChange() {
-						return props.onChange;
-					},
-					channel: "alpha",
-					label: "Alpha",
-					get size() {
-						return size();
-					},
-					showValue: true,
-					get isDisabled() {
-						return props.isDisabled;
-					}
-				})];
-			}
-		}), _el$30, _co$6);
-		insert(_el$23, createComponent(Show, {
-			get when() {
-				return props.showInput;
-			},
-			get children() {
-				return createComponent(ColorField$1, {
-					get value() {
-						return props.value;
-					},
-					get defaultValue() {
-						return props.defaultValue;
-					},
-					onChange: (color) => {
-						if (color && props.onChange) props.onChange(color);
-					},
-					label: "Hex",
-					get size() {
-						return size();
-					},
-					get isDisabled() {
-						return props.isDisabled;
-					}
-				});
-			}
-		}), _el$32, _co$7);
-		effect(() => className(_el$23, [colorPickerRoot, props.class].filter(Boolean).join(" ")));
-		return _el$23;
-	})();
+			});
+			effect(() => readShallow(colorPickerLabel({ size: size() })), (_v$, _$p) => {
+				className(_el$27, _v$, _$p);
+			});
+			return _el$27;
+		}
+	}), _el$29, _el$30);
+	insert(_el$26, createComponent(ColorArea$1, {
+		get value() {
+			return props.value;
+		},
+		get defaultValue() {
+			return props.defaultValue;
+		},
+		get onChange() {
+			return props.onChange;
+		},
+		xChannel: "saturation",
+		yChannel: "lightness",
+		get UNSAFE_style() {
+			return {
+				width: legacyColorAreaSizes[size()],
+				height: legacyColorAreaSizes[size()]
+			};
+		},
+		get isDisabled() {
+			return props.isDisabled;
+		}
+	}), _el$32, _el$33);
+	insert(_el$26, createComponent(Show, {
+		get when() {
+			return props.showSliders !== false;
+		},
+		get children() {
+			return [createComponent(ColorSlider$1, {
+				get value() {
+					return props.value;
+				},
+				get defaultValue() {
+					return props.defaultValue;
+				},
+				get onChange() {
+					return props.onChange;
+				},
+				channel: "hue",
+				label: "Hue",
+				get size() {
+					return size();
+				},
+				showValue: true,
+				get isDisabled() {
+					return props.isDisabled;
+				}
+			}), createComponent(ColorSlider$1, {
+				get value() {
+					return props.value;
+				},
+				get defaultValue() {
+					return props.defaultValue;
+				},
+				get onChange() {
+					return props.onChange;
+				},
+				channel: "alpha",
+				label: "Alpha",
+				get size() {
+					return size();
+				},
+				showValue: true,
+				get isDisabled() {
+					return props.isDisabled;
+				}
+			})];
+		}
+	}), _el$35, _el$36);
+	insert(_el$26, createComponent(Show, {
+		get when() {
+			return props.showInput;
+		},
+		get children() {
+			return createComponent(ColorField$1, {
+				get value() {
+					return props.value;
+				},
+				get defaultValue() {
+					return props.defaultValue;
+				},
+				onChange: (color) => {
+					if (color && props.onChange) props.onChange(color);
+				},
+				label: "Hex",
+				get size() {
+					return size();
+				},
+				get isDisabled() {
+					return props.isDisabled;
+				}
+			});
+		}
+	}), _el$38, _el$39);
+	effect(() => readShallow([colorPickerRoot, props.class].filter(Boolean).join(" ")), (_v$, _$p) => {
+		className(_el$26, _v$, _$p);
+	});
+	return _el$26;
 }
 ColorWheel$1.Track = ColorWheelTrack$1;
 ColorWheel$1.Thumb = ColorWheelThumb$1;