@proyecto-viviana/ui 0.5.0 → 0.6.0

package/dist/_chunk/color.jsx

@@ -0,0 +1,1408 @@
+import { t as mergeStyles } from "./runtime.jsx";
+import { useProviderProps } from "../provider/index.jsx";
+import { CenterBaseline } from "../icon/center-baseline.jsx";
+import { a as useIsInForm, i as useFormProps } from "./form.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 { 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 { getColorChannels, normalizeColor, parseColor } from "@proyecto-viviana/solid-stately";
+import { Portal } from "solid-js/web";
+//#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) {
+	const [local, headlessProps] = splitProps(props, ["class"]);
+	return <ColorEditor {...headlessProps} class={[editorStyles, local.class].filter(Boolean).join(" ")} />;
+}
+//#endregion
+//#region src/color/index.tsx
+createContext({ size: "md" });
+const colorSliderRoot = function anonymous(props, overrides) {
+	let rules = " ";
+	let width = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "Z") width = true;
+		rules += p[0];
+	}
+	if (props.orientation === "horizontal") {
+		if (!width) rules += " Zr151";
+	}
+	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";
+	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";
+	return rules;
+};
+const colorSliderLabel = function anonymous(props) {
+	let rules = " ";
+	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.isStaticColor) rules += " pl151";
+	else if (props.isDisabled) rules += " pUvnvv151";
+	else rules += " pUUi0Fe151";
+	rules += " plb151";
+	rules += " ri151";
+	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";
+	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";
+	else rules += " pUUi0Fe151";
+	rules += " ri151";
+	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";
+	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";
+	return rules;
+};
+/**
+* A color slider allows users to adjust a single color channel.
+*
+* @example
+* ```tsx
+* const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))
+*
+* <ColorSlider
+*   channel="hue"
+*   value={color()}
+*   onChange={setColor}
+*   label="Hue"
+* />
+* ```
+*/ function ColorSlider$1(props) {
+	const [local, headlessProps] = splitProps(useProviderProps(useFormProps(props)), [
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"size",
+		"showValue",
+		"label",
+		"contextualHelp"
+	]);
+	const locale = useLocale();
+	const orientation = () => headlessProps.orientation ?? "horizontal";
+	const hasExplicitAriaLabel = () => Boolean(headlessProps["aria-label"] || headlessProps["aria-labelledby"]);
+	const hasVisibleLabel = () => orientation() === "horizontal" && (Boolean(local.label) || local.label === void 0 && !hasExplicitAriaLabel());
+	const labelForAria = () => hasVisibleLabel() ? local.label ?? " " : void 0;
+	const ariaLabel = () => headlessProps["aria-label"] ?? (orientation() === "vertical" && typeof local.label === "string" ? local.label : void 0);
+	return <ColorSlider {...headlessProps} label={labelForAria()} aria-label={ariaLabel()} class={(renderProps) => [
+		local.UNSAFE_className,
+		local.class,
+		colorSliderRoot(renderProps, mergeStyles(local.styles))
+	].filter(Boolean).join(" ")} style={() => ({
+		"grid-template-areas": "\"label output\" \"track track\"",
+		...local.UNSAFE_style
+	})}>
+      {(renderProps) => <>
+          <Show when={hasVisibleLabel()}>
+            <div class={colorSliderLabelWrapper(renderProps)} style={{ "grid-area": "label" }}>
+              <ColorSliderLabel class={colorSliderLabel(renderProps)}>
+                {local.label ?? renderProps.color.getChannelName(renderProps.channel, locale().locale)}
+                <Show when={local.contextualHelp}>
+                  <span data-slot="contextualHelp">{local.contextualHelp}</span>
+                </Show>
+              </ColorSliderLabel>
+            </div>
+          </Show>
+          <Show when={renderProps.orientation === "horizontal"}>
+            <ColorSliderOutput class={colorSliderOutput(renderProps)} style={{ "grid-area": "output" }} />
+          </Show>
+          <ColorSliderTrack$1>{() => <ColorSliderThumb$1 />}</ColorSliderTrack$1>
+        </>}
+    </ColorSlider>;
+}
+/**
+* The track component for a color slider.
+*/ function ColorSliderTrack$1(props) {
+	const [local, headlessProps] = splitProps(props, [
+		"children",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class"
+	]);
+	return <ColorSliderTrack {...headlessProps} class={(renderProps) => [
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(colorSliderTrack(renderProps), local.styles)
+	].filter(Boolean).join(" ")} style={(renderProps) => {
+		const background = renderProps.defaultStyle.background;
+		return {
+			"grid-area": "track",
+			background: renderProps.isDisabled || !background ? void 0 : `${background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,
+			...local.UNSAFE_style
+		};
+	}}>
+      {local.children}
+    </ColorSliderTrack>;
+}
+/**
+* The thumb component for a color slider.
+*/ function ColorSliderThumb$1(props = {}) {
+	const [local, headlessProps] = splitProps(props, [
+		"children",
+		"ref",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class"
+	]);
+	let thumbElement;
+	return <ColorSliderThumb {...headlessProps} ref={(element) => {
+		thumbElement = element;
+		local.ref?.(element);
+	}} class={(renderProps) => [
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(colorSliderThumb(renderProps), local.styles)
+	].filter(Boolean).join(" ")} style={(renderProps) => ({
+		background: renderProps.isDisabled ? void 0 : `linear-gradient(${renderProps.color.toString("css")}, ${renderProps.color.toString("css")}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,
+		"background-color": void 0,
+		...local.UNSAFE_style
+	})}>
+      {(renderProps) => typeof local.children === "function" ? local.children(renderProps) : <>
+            {local.children ?? <div class={colorAreaThumbRing} />}
+            <ColorAreaLoupe isOpen={renderProps.isDragging} color={renderProps.color} anchor={() => thumbElement} />
+          </>}
+    </ColorSliderThumb>;
+}
+const legacyColorAreaSizes = {
+	sm: "12rem",
+	md: "16rem",
+	lg: "20rem"
+};
+const colorAreaRoot = function anonymous(props, overrides) {
+	let rules = " ";
+	let position = false;
+	let width = false;
+	let height = false;
+	let minWidth = false;
+	let minHeight = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "_P") position = true;
+		if (p[1] === "Z") width = true;
+		if (p[1] === "F") height = true;
+		if (p[1] === "N") minWidth = true;
+		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";
+	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";
+	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 colorAreaLoupeEnterAnimation = "wG3fcb";
+const colorAreaLoupeExitAnimation = "pxSBSc";
+/**
+* A color area allows users to select a color by dragging in a 2D gradient.
+*
+* @example
+* ```tsx
+* const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))
+*
+* <ColorArea
+*   value={color()}
+*   onChange={setColor}
+*   xChannel="saturation"
+*   yChannel="lightness"
+* />
+* ```
+*/ function ColorArea$1(props) {
+	const [local, headlessProps] = splitProps(props, [
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style"
+	]);
+	return <ColorArea {...headlessProps} 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,
+		position: void 0,
+		...local.UNSAFE_style
+	})}>
+      {() => <ColorAreaThumb$1 />}
+    </ColorArea>;
+}
+function ColorAreaThumb$1(props = {}) {
+	const [local, headlessProps] = splitProps(props, [
+		"children",
+		"ref",
+		"class",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style"
+	]);
+	let thumbElement;
+	return <ColorAreaThumb {...headlessProps} ref={(element) => {
+		thumbElement = element;
+		local.ref?.(element);
+	}} class={(renderProps) => [
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(colorAreaThumb(renderProps), local.styles)
+	].filter(Boolean).join(" ")} style={(renderProps) => ({
+		background: renderProps.isDisabled ? void 0 : `linear-gradient(${renderProps.color.toString("css")}, ${renderProps.color.toString("css")}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,
+		"background-color": void 0,
+		...local.UNSAFE_style
+	})}>
+      {(renderProps) => typeof local.children === "function" ? local.children(renderProps) : <>
+            {local.children ?? <div class={colorAreaThumbRing} />}
+            <ColorAreaLoupe isOpen={renderProps.isDragging} color={renderProps.color} anchor={() => thumbElement} />
+          </>}
+    </ColorAreaThumb>;
+}
+function ColorAreaLoupe(props) {
+	const patternId = createUniqueId();
+	const [phase, setPhase] = createSignal(props.isOpen ? "open" : "closed");
+	const [rect, setRect] = createSignal(null);
+	createEffect(() => {
+		if (props.isOpen) setPhase("open");
+		else if (phase() === "open") setPhase("exiting");
+	});
+	createEffect(() => {
+		props.color.toString("css");
+		if (phase() === "closed" && !props.isOpen || typeof window === "undefined") {
+			setRect(null);
+			return;
+		}
+		const update = () => {
+			const element = props.anchor();
+			if (!element) {
+				setRect(null);
+				return;
+			}
+			const next = element.getBoundingClientRect();
+			setRect({
+				top: next.top,
+				left: next.left,
+				width: next.width,
+				height: next.height
+			});
+		};
+		update();
+		window.addEventListener("scroll", update, true);
+		window.addEventListener("resize", update);
+		onCleanup(() => {
+			window.removeEventListener("scroll", update, true);
+			window.removeEventListener("resize", update);
+		});
+	});
+	return <Show when={phase() !== "closed" && typeof document !== "undefined" && rect()}>
+      {(currentRect) => {
+		const borderWidth = 1;
+		const handleSize = 16;
+		const offset = 12;
+		const r = currentRect();
+		return <Portal mount={document.body}>
+            <svg aria-hidden="true" class={colorAreaLoupe} width={50} height={66} style={{
+			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`,
+			"animation-name": phase() === "exiting" ? colorAreaLoupeExitAnimation : colorAreaLoupeEnterAnimation
+		}} onAnimationEnd={(event) => {
+			if (phase() === "exiting" && event.animationName === colorAreaLoupeExitAnimation) setPhase("closed");
+		}}>
+              <pattern id={patternId} x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
+                <rect fill="white" x="0" y="0" width="16" height="16" />
+                <rect fill="#E1E1E1" x="0" y="0" width="8" height="8" />
+                <rect fill="#E1E1E1" x="8" y="8" width="8" height="8" />
+              </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" />
+            </svg>
+          </Portal>;
+	}}
+    </Show>;
+}
+const colorWheelRoot = function anonymous(props, overrides) {
+	let rules = " ";
+	let position = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "_P") position = true;
+		rules += p[0];
+	}
+	if (!position) rules += " _Pc151";
+	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";
+	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";
+	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";
+	return rules;
+};
+/**
+* A color wheel allows users to select a hue by dragging around a circular track.
+*
+* @example
+* ```tsx
+* const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))
+*
+* <ColorWheel
+*   value={color()}
+*   onChange={setColor}
+* />
+* ```
+*/ function ColorWheel$1(props) {
+	const [local, headlessProps] = splitProps(useProviderProps(useFormProps(props)), [
+		"children",
+		"size",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class"
+	]);
+	const thickness = 24;
+	const authoredSize = () => local.size ?? 192;
+	const outerRadius = () => Math.max(authoredSize(), 175) / 2;
+	const innerRadius = () => outerRadius() - thickness;
+	const renderChildren = (renderProps) => {
+		const children = local.children;
+		return children ? typeof children === "function" ? children(renderProps) : children : <>
+        <ColorWheelTrack$1 />
+        <div class={colorWheelInnerBorder(renderProps)} />
+        <ColorWheelThumb$1 />
+      </>;
+	};
+	return <ColorWheel {...headlessProps} outerRadius={outerRadius()} innerRadius={innerRadius()} class={(renderProps) => [
+		local.UNSAFE_className,
+		local.class,
+		colorWheelRoot(renderProps, mergeStyles(local.styles))
+	].filter(Boolean).join(" ")} style={() => ({
+		width: `${outerRadius() * 2}px`,
+		height: `${outerRadius() * 2}px`,
+		...local.UNSAFE_style
+	})}>
+      {renderChildren}
+    </ColorWheel>;
+}
+/**
+* The circular track for a color wheel.
+*/ function ColorWheelTrack$1(props = {}) {
+	const [local, headlessProps] = splitProps(props, [
+		"children",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class"
+	]);
+	return <ColorWheelTrack {...headlessProps} class={(renderProps) => [
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(colorWheelTrack(renderProps), local.styles)
+	].filter(Boolean).join(" ")} style={(renderProps) => ({
+		background: renderProps.isDisabled || !renderProps.defaultStyle.background ? void 0 : renderProps.defaultStyle.background,
+		...local.UNSAFE_style
+	})}>
+      {local.children}
+    </ColorWheelTrack>;
+}
+/**
+* The thumb component for a color wheel.
+*/ function ColorWheelThumb$1(props = {}) {
+	const [local, headlessProps] = splitProps(props, [
+		"children",
+		"ref",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class"
+	]);
+	let thumbElement;
+	return <ColorWheelThumb {...headlessProps} ref={(element) => {
+		thumbElement = element;
+		local.ref?.(element);
+	}} class={(renderProps) => [
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(colorWheelThumb(renderProps), local.styles)
+	].filter(Boolean).join(" ")} style={(renderProps) => ({
+		background: renderProps.isDisabled ? void 0 : `linear-gradient(${renderProps.color.toString("css")}, ${renderProps.color.toString("css")}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,
+		"background-color": void 0,
+		...local.UNSAFE_style
+	})}>
+      {(renderProps) => typeof local.children === "function" ? local.children(renderProps) : <>
+            {local.children ?? <div class={colorAreaThumbRing} />}
+            <ColorAreaLoupe isOpen={renderProps.isDragging} color={renderProps.color} anchor={() => thumbElement} />
+          </>}
+    </ColorWheelThumb>;
+}
+function createColorFieldStyles() {
+	return {
+		root: function anonymous(props, overrides) {
+			let rules = " ";
+			let gridColumnStart = false;
+			let gridColumnEnd = false;
+			let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+			for (let p of matches) {
+				if (p[1] === "z") gridColumnStart = true;
+				if (p[1] === "y") gridColumnEnd = true;
+				rules += p[0];
+			}
+			rules += " se151";
+			if (props.isInForm) {
+				if (!gridColumnStart) rules += " z2mU151";
+			}
+			if (props.isInForm) {
+				if (props.labelPosition === "side") {
+					if (!gridColumnEnd) rules += " yvoofG151";
+				}
+			}
+			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.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";
+			}
+			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";
+			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";
+			return rules;
+		},
+		label: function anonymous(props) {
+			let rules = " ";
+			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.isStaticColor) rules += " pl151";
+			else if (props.isDisabled) rules += " pUvnvv151";
+			else rules += " pUUi0Fe151";
+			rules += " plb151";
+			rules += " ri151";
+			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.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";
+			}
+			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.isPressed) rules += " pMwyHo151";
+				else if (props.isFocusVisible) rules += " pMwyHo151";
+				else if (props.isHovered) rules += " pMwyHo151";
+				else rules += " pHKLAu151";
+				rules += " plb151";
+			}
+			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";
+			if (props.isDisabled) {
+				rules += " ifbAdGe151";
+				rules += " ilc151";
+			} else if (props.isFocusWithin) {
+				if (props.isInvalid) rules += " iQxdzb151";
+				else rules += " iMwyHo151";
+				rules += " ild151";
+			} 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";
+			} 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"
+	};
+}
+let colorFieldStyles;
+function getColorFieldStyles() {
+	colorFieldStyles ??= createColorFieldStyles();
+	return colorFieldStyles;
+}
+/**
+* A color field allows users to enter a color value as text.
+*
+* @example
+* ```tsx
+* const [color, setColor] = createSignal(parseColor('#ff0000'))
+*
+* <ColorField
+*   value={color()}
+*   onChange={setColor}
+*   label="Color"
+* />
+* ```
+*/ function ColorField$1(props) {
+	const isInForm = useIsInForm();
+	const [local, headlessProps] = splitProps(useProviderProps(useFormProps(props)), [
+		"size",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"label",
+		"description",
+		"errorMessage",
+		"labelPosition",
+		"labelAlign",
+		"necessityIndicator",
+		"prefix"
+	]);
+	const [isFocusWithin, setIsFocusWithin] = createSignal(false);
+	const prefixId = createUniqueId();
+	const size = () => normalizeColorFieldSize(local.size);
+	const labelPosition = () => local.labelPosition ?? "top";
+	const labelAlign = () => local.labelAlign ?? "start";
+	const necessityIndicator = () => local.necessityIndicator ?? "icon";
+	const fieldStyles = () => getColorFieldStyles();
+	const rootClassName = (renderProps) => [
+		local.UNSAFE_className,
+		local.class,
+		fieldStyles().root({
+			...renderProps,
+			size: size(),
+			labelPosition: labelPosition(),
+			isInForm
+		}, local.styles)
+	].filter(Boolean).join(" ");
+	const labelWrapperClass = () => fieldStyles().labelWrapper({
+		size: size(),
+		labelPosition: labelPosition(),
+		labelAlign: labelAlign()
+	});
+	const labelClass = (renderProps) => fieldStyles().label({
+		...renderProps,
+		size: size(),
+		labelPosition: labelPosition(),
+		isStaticColor: false
+	});
+	const groupClass = (renderProps) => fieldStyles().group({
+		...renderProps,
+		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()}>
+              <ColorFieldLabel class={labelClass(renderProps)}>
+                {local.label}
+                <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)"}
+                        </span>}>
+                      <Asterisk size={colorFieldIconSize(size())} class={fieldStyles().requiredIcon} style={colorFieldRequiredIconStyle(size())} aria-hidden="true" />
+                    </Show>
+                  </span>
+                </Show>
+              </ColorFieldLabel>
+            </div>
+          </Show>
+
+          <div role="presentation" class={groupClass(renderProps)} onPointerDown={(event) => {
+		if (event.pointerType === "mouse") focusColorFieldInput(event);
+	}} onTouchEnd={focusColorFieldInput} onFocusIn={() => setIsFocusWithin(true)} onFocusOut={() => setIsFocusWithin(false)} data-focused={isFocusWithin() ? "true" : void 0} data-disabled={renderProps.isDisabled ? "true" : void 0} data-invalid={renderProps.isInvalid ? "true" : void 0}>
+            <Show when={local.prefix} fallback={<ColorFieldInput class={fieldStyles().input} />}>
+              <FieldPrefix id={prefixId}>{local.prefix}</FieldPrefix>
+              <PrefixInputProvider context={ColorFieldContext} prefixId={prefixId}>
+                <ColorFieldInput class={fieldStyles().input} />
+              </PrefixInputProvider>
+            </Show>
+            <Show when={renderProps.isInvalid && !renderProps.isDisabled}>
+              <CenterBaseline>
+                <AlertTriangleIcon styles={fieldStyles().errorIcon} />
+              </CenterBaseline>
+            </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>
+        </>} />;
+}
+const ColorFieldContext$1 = ColorFieldContext;
+function normalizeColorFieldSize(size) {
+	switch (size) {
+		case "sm": return "S";
+		case "md": return "M";
+		case "lg": return "L";
+		case "S":
+		case "M":
+		case "L":
+		case "XL": return size;
+		default: return "M";
+	}
+}
+function colorFieldIconSize(size) {
+	return size === "S" ? "M" : size;
+}
+function focusColorFieldInput(event) {
+	if (event.target?.closest("button,input,textarea,[role='button']")) return;
+	event.preventDefault();
+	event.currentTarget.querySelector("input")?.focus();
+}
+function colorFieldRequiredIconStyle(size) {
+	const pixelSize = size === "L" || size === "XL" ? 10 : 8;
+	return {
+		width: `${pixelSize}px`,
+		height: `${pixelSize}px`
+	};
+}
+function ColorFieldLabel(props) {
+	const context = useContext(ColorFieldContext);
+	if (!context) return null;
+	context.setLabelElement(true);
+	onCleanup(() => context.setLabelElement(false));
+	const labelProps = () => {
+		const { ref: _ref, ...rest } = context.labelProps;
+		return rest;
+	};
+	return <label {...labelProps()} class={props.class}>
+      {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;
+	let height = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "Z") width = true;
+		if (p[1] === "F") height = true;
+		rules += p[0];
+	}
+	if (props.size === "L") {
+		if (!width) rules += " Zw151";
+	} else if (props.size === "M") {
+		if (!width) rules += " ZC151";
+	} else if (props.size === "S") {
+		if (!width) rules += " Zo151";
+	} else if (props.size === "XS") {
+		if (!width) rules += " Zu151";
+	}
+	if (props.size === "L") {
+		if (!height) rules += " Fv151";
+	} else if (props.size === "M") {
+		if (!height) rules += " Fx151";
+	} else if (props.size === "S") {
+		if (!height) rules += " Fp151";
+	} else if (props.size === "XS") {
+		if (!height) rules += " Ft151";
+	}
+	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";
+	return rules;
+};
+/**
+* A color swatch displays a color sample.
+*
+* @example
+* ```tsx
+* <ColorSwatch color={parseColor('#ff0000')} aria-label="Selected color" />
+* ```
+*/ function ColorSwatch$1(props) {
+	const pickerContext = useContext(InternalColorSwatchContext);
+	const [local, headlessProps] = splitProps(props, [
+		"size",
+		"rounding",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"color"
+	]);
+	const size = () => local.size ?? pickerContext?.size ?? "M";
+	const rounding = () => local.rounding ?? pickerContext?.rounding ?? "default";
+	const color = createMemo(() => normalizeColor(local.color ?? "#fff0"));
+	const getClassName = (renderProps) => {
+		return [
+			local.UNSAFE_className,
+			local.class,
+			colorSwatchRoot({
+				...renderProps,
+				size: size(),
+				rounding: rounding()
+			}, mergeStyles(local.styles))
+		].filter(Boolean).join(" ");
+	};
+	const getStyle = (renderProps) => {
+		const swatchColor = renderProps.color;
+		const colorValue = swatchColor.toString("css");
+		return {
+			background: swatchColor.getChannelValue("alpha") > 0 ? `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px` : "linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat",
+			...local.UNSAFE_style
+		};
+	};
+	const swatch = <ColorSwatch {...headlessProps} color={color()} class={getClassName} style={getStyle} />;
+	if (pickerContext) return pickerContext.useWrapper(swatch, color, rounding);
+	return swatch;
+}
+const ColorSwatchContext$1 = ColorSwatchContext;
+/**
+* A complete color picker component with area, sliders, and input.
+*
+* @example
+* ```tsx
+* const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))
+*
+* <ColorPicker
+*   value={color()}
+*   onChange={setColor}
+*   label="Pick a color"
+*   showInput
+*   showSliders
+* />
+* ```
+*/ const colorPickerRoot = " sd151 _ta151 Ul151 ql151";
+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 += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "md") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "sm") {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	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 += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "md") {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	} else if (props.size === "sm") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	}
+	if (props.size === "lg") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "md") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "sm") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	return rules;
+};
+function ColorPicker(props) {
+	const size = () => props.size ?? "md";
+	return <div class={[colorPickerRoot, props.class].filter(Boolean).join(" ")}>
+      <Show when={props.label}>
+        <span class={colorPickerLabel({ size: size() })}>{props.label}</span>
+      </Show>
+
+      <ColorArea$1 value={props.value} defaultValue={props.defaultValue} onChange={props.onChange} xChannel="saturation" yChannel="lightness" UNSAFE_style={{
+		width: legacyColorAreaSizes[size()],
+		height: legacyColorAreaSizes[size()]
+	}} isDisabled={props.isDisabled} />
+
+      <Show when={props.showSliders !== false}>
+        <ColorSlider$1 value={props.value} defaultValue={props.defaultValue} onChange={props.onChange} channel="hue" label="Hue" size={size()} showValue isDisabled={props.isDisabled} />
+
+        <ColorSlider$1 value={props.value} defaultValue={props.defaultValue} onChange={props.onChange} channel="alpha" label="Alpha" size={size()} showValue isDisabled={props.isDisabled} />
+      </Show>
+
+      <Show when={props.showInput}>
+        <ColorField$1 value={props.value} defaultValue={props.defaultValue} onChange={(color) => {
+		if (color && props.onChange) props.onChange(color);
+	}} label="Hex" size={size()} isDisabled={props.isDisabled} />
+      </Show>
+    </div>;
+}
+ColorWheel$1.Track = ColorWheelTrack$1;
+ColorWheel$1.Thumb = ColorWheelThumb$1;
+const ColorSliderContext$1 = ColorSliderContext;
+const ColorAreaContext$1 = ColorAreaContext;
+const ColorWheelContext$1 = ColorWheelContext;
+//#endregion
+export { ColorPicker as a, ColorSwatch$1 as c, ColorWheelContext$1 as d, ColorWheelThumb$1 as f, ColorEditor$1 as g, parseColor as h, ColorFieldContext$1 as i, ColorSwatchContext$1 as l, getColorChannels as m, ColorAreaContext$1 as n, ColorSlider$1 as o, ColorWheelTrack$1 as p, ColorField$1 as r, ColorSliderContext$1 as s, ColorArea$1 as t, ColorWheel$1 as u };
+
+//# sourceMappingURL=color.jsx.map