@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Color.jsx

@@ -0,0 +1,1344 @@
+import { filterDOMProps, useRenderProps } from "./utils.jsx";
+import { Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, untrack, useContext } from "solid-js";
+import { createColorArea, createColorField, createColorSlider, createColorSwatch, createColorWheel, createFocusRing, createHover, createListBox, createOption, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { createColorAreaState, createColorFieldState, createColorSliderState, createColorWheelState, createListState, normalizeColor } from "@proyecto-viviana/solid-stately";
+//#region src/Color.tsx
+/**
+* Color components for solidaria-components
+*
+* Pre-wired headless color picker components that combine state + aria hooks.
+* Port of react-aria-components color components.
+*/
+const ColorPickerContextInternal = createContext(null);
+const ColorPickerStateContextInternal = createContext(null);
+const ColorSwatchContextInternal = createContext(null);
+const ColorSwatchPickerContextInternal = createContext(null);
+const ColorSliderContext = createContext(null);
+/**
+* A color slider allows users to adjust a single color channel.
+*/
+function ColorSlider(props) {
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, stateProps, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"label"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"onChangeEnd",
+		"channel",
+		"colorSpace"
+	], [
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details",
+		"isDisabled",
+		"name",
+		"form",
+		"orientation",
+		"channelName"
+	]);
+	const state = createColorSliderState(() => ({
+		value: stateProps.value ?? pickerContext?.value,
+		defaultValue: stateProps.defaultValue,
+		onChange: stateProps.onChange ?? pickerContext?.onChange,
+		onChangeEnd: stateProps.onChangeEnd,
+		channel: stateProps.channel,
+		colorSpace: stateProps.colorSpace,
+		orientation: ariaProps.orientation,
+		isDisabled: ariaProps.isDisabled
+	}));
+	let trackRef;
+	const setTrackRef = (el) => {
+		trackRef = el;
+	};
+	let inputRef;
+	const setInputRef = (el) => {
+		inputRef = el;
+	};
+	const colorSliderAria = createColorSlider(() => ({
+		id: ariaProps.id,
+		channel: stateProps.channel,
+		label: local.label,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		"aria-details": ariaProps["aria-details"],
+		isDisabled: ariaProps.isDisabled,
+		name: ariaProps.name,
+		form: ariaProps.form,
+		orientation: ariaProps.orientation,
+		channelName: ariaProps.channelName
+	}), () => state, () => trackRef ?? null, () => inputRef ?? null);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		channel: state.channel,
+		orientation: state.orientation,
+		value: state.getThumbValue(),
+		valueLabel: state.getThumbValueLabel(),
+		color: state.value,
+		defaultStyle: colorSliderAria.trackProps.style ?? {}
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSlider"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return <ColorSliderContext.Provider value={{
+		state,
+		get trackProps() {
+			return colorSliderAria.trackProps;
+		},
+		get thumbProps() {
+			return colorSliderAria.thumbProps;
+		},
+		get inputProps() {
+			return colorSliderAria.inputProps;
+		},
+		get outputProps() {
+			return colorSliderAria.outputProps;
+		},
+		get labelProps() {
+			return colorSliderAria.labelProps;
+		},
+		get trackRef() {
+			return trackRef;
+		},
+		setTrackRef,
+		setInputRef
+	}}>
+      <div {...domProps()} class={renderProps.class()} style={renderProps.style()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0} data-orientation={state.orientation} slot={local.slot || void 0}>
+        {renderProps.renderChildren()}
+      </div>
+    </ColorSliderContext.Provider>;
+}
+/**
+* The label element of a color slider.
+*/
+function ColorSliderLabel(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ColorSliderContext);
+	if (!context) throw new Error("ColorSliderLabel must be used within a ColorSlider");
+	const labelProps = () => {
+		const { ref: _ref, ...rest } = context.labelProps;
+		return rest;
+	};
+	return <label {...domProps} {...labelProps()} class={local.class}>
+      {local.children}
+    </label>;
+}
+/**
+* The output element of a color slider.
+*/
+function ColorSliderOutput(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ColorSliderContext);
+	if (!context) throw new Error("ColorSliderOutput must be used within a ColorSlider");
+	const state = context.state;
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		channel: state.channel,
+		orientation: state.orientation,
+		value: state.getThumbValue(),
+		valueLabel: state.getThumbValueLabel(),
+		color: state.value,
+		defaultStyle: context.trackProps.style ?? {}
+	}));
+	const children = () => typeof local.children === "function" ? local.children(renderValues()) : local.children ?? renderValues().valueLabel;
+	return <output {...domProps} {...context.outputProps} class={local.class}>
+      {children()}
+    </output>;
+}
+/**
+* The track element of a color slider.
+*/
+function ColorSliderTrack(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ColorSliderContext);
+	if (!context) throw new Error("ColorSliderTrack must be used within a ColorSlider");
+	const state = context.state;
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		orientation: state.orientation,
+		defaultStyle: context.trackProps.style ?? {}
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSlider-track"
+	}, renderValues);
+	const cleanTrackProps = () => {
+		const { ref: _ref, style: _trackStyle, ...rest } = context.trackProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const trackStyle = context.trackProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...trackStyle,
+			...renderStyle
+		};
+	};
+	return <div {...domProps} ref={context.setTrackRef} {...cleanTrackProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0} data-orientation={state.orientation}>
+      {renderProps.renderChildren()}
+    </div>;
+}
+/**
+* The thumb element of a color slider.
+*/
+function ColorSliderThumb(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"ref"
+	]);
+	const context = useContext(ColorSliderContext);
+	if (!context) throw new Error("ColorSliderThumb must be used within a ColorSlider");
+	const state = context.state;
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered(),
+		color: state.getDisplayColor(),
+		defaultStyle: context.thumbProps.style ?? {}
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSlider-thumb"
+	}, renderValues);
+	const cleanThumbProps = () => {
+		const { ref: _ref, style: _thumbStyle, ...rest } = context.thumbProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	const mergedInputProps = () => {
+		return mergeProps$1(context.inputProps, cleanFocusProps());
+	};
+	const mergedStyle = () => {
+		const thumbStyle = context.thumbProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...thumbStyle,
+			...renderStyle
+		};
+	};
+	return <div {...domProps} {...cleanThumbProps()} {...cleanHoverProps()} ref={local.ref} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-hovered={isHovered() || void 0}>
+      <input ref={context.setInputRef} {...mergedInputProps()} />
+      {renderProps.renderChildren()}
+    </div>;
+}
+ColorSlider.Track = ColorSliderTrack;
+ColorSlider.Thumb = ColorSliderThumb;
+ColorSlider.Label = ColorSliderLabel;
+ColorSlider.Output = ColorSliderOutput;
+const ColorAreaContext = createContext(null);
+/**
+* A color area allows users to select a color using a 2D gradient.
+*/
+function ColorArea(props) {
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, stateProps, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"onChangeEnd",
+		"xChannel",
+		"yChannel",
+		"colorSpace"
+	], [
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details",
+		"isDisabled",
+		"xName",
+		"yName",
+		"form"
+	]);
+	const state = createColorAreaState(() => ({
+		value: stateProps.value ?? pickerContext?.value,
+		defaultValue: stateProps.defaultValue,
+		onChange: stateProps.onChange ?? pickerContext?.onChange,
+		onChangeEnd: stateProps.onChangeEnd,
+		xChannel: stateProps.xChannel,
+		yChannel: stateProps.yChannel,
+		colorSpace: stateProps.colorSpace,
+		isDisabled: ariaProps.isDisabled
+	}));
+	let areaRef;
+	const setAreaRef = (el) => {
+		areaRef = el;
+	};
+	const colorAreaAria = createColorArea(() => ({
+		id: ariaProps.id,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		"aria-details": ariaProps["aria-details"],
+		isDisabled: ariaProps.isDisabled,
+		xName: ariaProps.xName,
+		yName: ariaProps.yName,
+		form: ariaProps.form
+	}), () => state, () => areaRef ?? null);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		xChannel: state.xChannel,
+		yChannel: state.yChannel,
+		color: state.value,
+		defaultStyle: colorAreaAria.colorAreaProps.style ?? {}
+	}));
+	const childRenderValues = {
+		get isDisabled() {
+			return state.isDisabled;
+		},
+		get isDragging() {
+			return state.isDragging;
+		},
+		get xChannel() {
+			return state.xChannel;
+		},
+		get yChannel() {
+			return state.yChannel;
+		},
+		get color() {
+			return state.value;
+		},
+		get defaultStyle() {
+			return colorAreaAria.colorAreaProps.style ?? {};
+		}
+	};
+	const colorAreaChildren = () => {
+		const children = props.children;
+		return typeof children === "function" ? children(childRenderValues) : children;
+	};
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorArea"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const cleanColorAreaProps = () => {
+		const { ref: _ref, style: _areaStyle, ...rest } = colorAreaAria.colorAreaProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const areaStyle = colorAreaAria.colorAreaProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...areaStyle,
+			...renderStyle
+		};
+	};
+	return <ColorAreaContext.Provider value={{
+		state,
+		get colorAreaProps() {
+			return colorAreaAria.colorAreaProps;
+		},
+		get gradientProps() {
+			return colorAreaAria.gradientProps;
+		},
+		get thumbProps() {
+			return colorAreaAria.thumbProps;
+		},
+		get xInputProps() {
+			return colorAreaAria.xInputProps;
+		},
+		get yInputProps() {
+			return colorAreaAria.yInputProps;
+		},
+		areaRef,
+		setAreaRef
+	}}>
+      <div ref={setAreaRef} {...domProps()} {...cleanColorAreaProps()} class={renderProps.class()} style={mergedStyle()} slot={local.slot ?? void 0} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0}>
+        {colorAreaChildren()}
+      </div>
+    </ColorAreaContext.Provider>;
+}
+/**
+* The gradient background of a color area.
+*/
+function ColorAreaGradient(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ColorAreaContext);
+	if (!context) throw new Error("ColorAreaGradient must be used within a ColorArea");
+	const { state } = context;
+	const renderValues = createMemo(() => ({ isDisabled: state.isDisabled }));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorArea-gradient"
+	}, renderValues);
+	const cleanGradientProps = () => {
+		const { ref: _ref, style: _gradStyle, ...rest } = context.gradientProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const gradStyle = context.gradientProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...gradStyle,
+			...renderStyle
+		};
+	};
+	return <div {...domProps} {...cleanGradientProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0}>
+      {renderProps.renderChildren()}
+    </div>;
+}
+/**
+* The thumb element of a color area.
+*/
+function ColorAreaThumb(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"ref"
+	]);
+	const context = useContext(ColorAreaContext);
+	if (!context) throw new Error("ColorAreaThumb must be used within a ColorArea");
+	const { state } = context;
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	let xInputRef;
+	let yInputRef;
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		color: state.getDisplayColor(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorArea-thumb"
+	}, renderValues);
+	const cleanThumbProps = () => {
+		const { ref: _ref, style: _thumbStyle, ...rest } = context.thumbProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	const mergedXInputProps = () => {
+		const { value: _value, ...inputProps } = context.xInputProps;
+		return mergeProps$1(inputProps, cleanFocusProps());
+	};
+	const mergedYInputProps = () => {
+		const { value: _value, ...inputProps } = context.yInputProps;
+		return mergeProps$1(inputProps, cleanFocusProps());
+	};
+	const mergedStyle = () => {
+		const thumbStyle = context.thumbProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...thumbStyle,
+			...renderStyle
+		};
+	};
+	const syncInputValue = (input, value) => {
+		const nextValue = String(value);
+		const update = () => {
+			if (input && input.value !== nextValue) input.value = nextValue;
+		};
+		update();
+		queueMicrotask(update);
+	};
+	createEffect(() => {
+		syncInputValue(xInputRef, state.getXValue());
+	});
+	createEffect(() => {
+		syncInputValue(yInputRef, state.getYValue());
+	});
+	return <div {...domProps} ref={local.ref} {...cleanThumbProps()} {...cleanHoverProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-hovered={isHovered() || void 0}>
+      <input {...mergedXInputProps()} ref={(el) => {
+		xInputRef = el;
+		syncInputValue(el, state.getXValue());
+	}} />
+      <input {...mergedYInputProps()} ref={(el) => {
+		yInputRef = el;
+		syncInputValue(el, state.getYValue());
+	}} />
+      {renderProps.renderChildren()}
+    </div>;
+}
+ColorArea.Gradient = ColorAreaGradient;
+ColorArea.Thumb = ColorAreaThumb;
+const ColorWheelContext = createContext(null);
+/**
+* A color wheel allows users to select a hue using a circular control.
+*/
+function ColorWheel(props) {
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, stateProps, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"onChangeEnd"
+	], [
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details",
+		"aria-errormessage",
+		"isDisabled",
+		"name",
+		"form",
+		"outerRadius",
+		"innerRadius"
+	]);
+	const state = createColorWheelState(() => ({
+		value: stateProps.value ?? pickerContext?.value,
+		defaultValue: stateProps.defaultValue,
+		onChange: stateProps.onChange ?? pickerContext?.onChange,
+		onChangeEnd: stateProps.onChangeEnd,
+		isDisabled: ariaProps.isDisabled
+	}));
+	let wheelRef;
+	const setWheelRef = (el) => {
+		wheelRef = el;
+	};
+	const colorWheelAria = createColorWheel(() => ({
+		id: ariaProps.id,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		"aria-details": ariaProps["aria-details"],
+		"aria-errormessage": ariaProps["aria-errormessage"],
+		isDisabled: ariaProps.isDisabled,
+		name: ariaProps.name,
+		form: ariaProps.form,
+		outerRadius: ariaProps.outerRadius,
+		innerRadius: ariaProps.innerRadius
+	}), () => state, () => wheelRef ?? null);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		hue: state.getHue(),
+		color: state.value,
+		defaultStyle: { position: "relative" }
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorWheel"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return <ColorWheelContext.Provider value={{
+		state,
+		get trackProps() {
+			return colorWheelAria.trackProps;
+		},
+		get thumbProps() {
+			return colorWheelAria.thumbProps;
+		},
+		get inputProps() {
+			return colorWheelAria.inputProps;
+		},
+		get wheelRef() {
+			return wheelRef;
+		},
+		setWheelRef
+	}}>
+      <div ref={setWheelRef} {...domProps()} class={renderProps.class()} style={renderProps.style()} slot={local.slot || void 0} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0}>
+        {renderProps.renderChildren()}
+      </div>
+    </ColorWheelContext.Provider>;
+}
+/**
+* The track element of a color wheel.
+*/
+function ColorWheelTrack(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ColorWheelContext);
+	if (!context) throw new Error("ColorWheelTrack must be used within a ColorWheel");
+	const state = context.state;
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		defaultStyle: context.trackProps.style ?? {}
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorWheel-track"
+	}, renderValues);
+	const cleanTrackProps = () => {
+		const { ref: _ref, style: _trackStyle, ...rest } = context.trackProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const trackStyle = context.trackProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...trackStyle,
+			...renderStyle
+		};
+	};
+	return <div {...domProps} {...cleanTrackProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0}>
+      {renderProps.renderChildren()}
+    </div>;
+}
+/**
+* The thumb element of a color wheel.
+*/
+function ColorWheelThumb(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"ref"
+	]);
+	const context = useContext(ColorWheelContext);
+	if (!context) throw new Error("ColorWheelThumb must be used within a ColorWheel");
+	const state = context.state;
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		color: state.getDisplayColor(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered(),
+		defaultStyle: context.thumbProps.style ?? {}
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorWheel-thumb"
+	}, renderValues);
+	const cleanThumbProps = () => {
+		const { ref: _ref, style: _thumbStyle, ...rest } = context.thumbProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	const mergedInputProps = () => {
+		return mergeProps$1(context.inputProps, cleanFocusProps());
+	};
+	const mergedStyle = () => {
+		const thumbStyle = context.thumbProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...thumbStyle,
+			...renderStyle
+		};
+	};
+	return <div {...domProps} ref={local.ref} {...cleanThumbProps()} {...cleanHoverProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-hovered={isHovered() || void 0}>
+      <input {...mergedInputProps()} />
+      {renderProps.renderChildren()}
+    </div>;
+}
+ColorWheel.Track = ColorWheelTrack;
+ColorWheel.Thumb = ColorWheelThumb;
+const ColorFieldContext = createContext(null);
+/**
+* A color field allows users to enter a color value as text.
+*/
+function ColorField(props) {
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, stateProps, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"label",
+		"description",
+		"errorMessage"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"channel",
+		"colorSpace",
+		"colorFormat"
+	], [
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details",
+		"aria-errormessage",
+		"name",
+		"form",
+		"isWheelDisabled",
+		"isDisabled",
+		"isReadOnly",
+		"isRequired",
+		"isInvalid",
+		"validationBehavior",
+		"autoFocus",
+		"excludeFromTabOrder",
+		"placeholder"
+	]);
+	const [hasRegisteredLabelElement, setHasRegisteredLabelElement] = createSignal(false);
+	const state = createColorFieldState(() => ({
+		value: stateProps.value ?? pickerContext?.value,
+		defaultValue: stateProps.defaultValue,
+		onChange: stateProps.onChange ?? ((color) => {
+			if (color) pickerContext?.onChange?.(color);
+		}),
+		channel: stateProps.channel,
+		colorSpace: stateProps.colorSpace,
+		colorFormat: stateProps.colorFormat,
+		isDisabled: ariaProps.isDisabled,
+		isReadOnly: ariaProps.isReadOnly,
+		isInvalid: ariaProps.isInvalid,
+		isRequired: ariaProps.isRequired
+	}));
+	let inputRef;
+	const setInputRef = (el) => {
+		inputRef = el;
+	};
+	const colorFieldAria = createColorField(() => ({
+		id: ariaProps.id,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		"aria-details": ariaProps["aria-details"],
+		"aria-errormessage": ariaProps["aria-errormessage"],
+		name: ariaProps.name,
+		form: ariaProps.form,
+		isWheelDisabled: ariaProps.isWheelDisabled,
+		isDisabled: ariaProps.isDisabled,
+		isReadOnly: ariaProps.isReadOnly,
+		isRequired: ariaProps.isRequired,
+		isInvalid: ariaProps.isInvalid,
+		validationBehavior: ariaProps.validationBehavior,
+		autoFocus: ariaProps.autoFocus,
+		excludeFromTabOrder: ariaProps.excludeFromTabOrder,
+		placeholder: ariaProps.placeholder,
+		channel: stateProps.channel,
+		colorSpace: stateProps.colorSpace
+	}), () => state, () => inputRef ?? null);
+	const describedBy = () => {
+		const invalid = ariaProps.isInvalid || state.isInvalid;
+		return [
+			ariaProps["aria-describedby"],
+			local.description && !invalid ? colorFieldAria.descriptionProps.id : void 0,
+			invalid && local.errorMessage ? colorFieldAria.errorMessageProps.id : void 0
+		].filter(Boolean).join(" ") || void 0;
+	};
+	const fieldInputProps = () => {
+		const labelledBy = ariaProps["aria-labelledby"] ?? (!ariaProps["aria-label"] && (local.label || hasRegisteredLabelElement()) ? colorFieldAria.labelProps.id : void 0);
+		return {
+			...colorFieldAria.inputProps,
+			"aria-label": labelledBy ? void 0 : colorFieldAria.inputProps["aria-label"],
+			"aria-labelledby": labelledBy,
+			"aria-describedby": describedBy(),
+			"aria-errormessage": (ariaProps.isInvalid || state.isInvalid) && local.errorMessage ? colorFieldAria.errorMessageProps.id : colorFieldAria.inputProps["aria-errormessage"]
+		};
+	};
+	const hiddenInputValue = createMemo(() => Number.isNaN(state.numberValue) ? "" : String(state.numberValue));
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isReadOnly: state.isReadOnly,
+		isRequired: state.isRequired,
+		isInvalid: state.isInvalid,
+		color: state.value,
+		channel: state.channel ?? "hex"
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorField"
+	}, renderValues);
+	const childRenderValues = {
+		get isDisabled() {
+			return state.isDisabled;
+		},
+		get isReadOnly() {
+			return state.isReadOnly;
+		},
+		get isRequired() {
+			return state.isRequired;
+		},
+		get isInvalid() {
+			return state.isInvalid;
+		},
+		get color() {
+			return state.value;
+		},
+		get channel() {
+			return state.channel ?? "hex";
+		}
+	};
+	let hasRenderedChildren = false;
+	let renderedChildren;
+	const renderChildren = () => {
+		if (!hasRenderedChildren) {
+			const children = local.children;
+			renderedChildren = typeof children === "function" ? untrack(() => children(childRenderValues)) : children;
+			hasRenderedChildren = true;
+		}
+		return renderedChildren;
+	};
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return <ColorFieldContext.Provider value={{
+		state,
+		get inputProps() {
+			return fieldInputProps();
+		},
+		get labelProps() {
+			return colorFieldAria.labelProps;
+		},
+		get descriptionProps() {
+			return colorFieldAria.descriptionProps;
+		},
+		get errorMessageProps() {
+			return colorFieldAria.errorMessageProps;
+		},
+		setInputRef,
+		setLabelElement: setHasRegisteredLabelElement
+	}}>
+      <>
+        <div {...domProps()} class={renderProps.class()} style={renderProps.style()} slot={local.slot ?? void 0} data-disabled={state.isDisabled || void 0} data-readonly={state.isReadOnly || void 0} data-invalid={state.isInvalid || void 0} data-required={state.isRequired || void 0} data-channel={state.channel ?? "hex"}>
+          <Show when={local.label}>
+            <label {...colorFieldAria.labelProps}>{local.label}</label>
+          </Show>
+
+          {renderChildren()}
+        </div>
+        <Show when={state.channel && ariaProps.name}>
+          <input type="hidden" name={ariaProps.name} form={ariaProps.form} value={hiddenInputValue()} />
+        </Show>
+      </>
+    </ColorFieldContext.Provider>;
+}
+/**
+* The input element of a color field.
+*/
+function ColorFieldInput(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"ref"
+	]);
+	const context = useContext(ColorFieldContext);
+	if (!context) throw new Error("ColorFieldInput must be used within a ColorField");
+	const state = context.state;
+	const inputValue = createMemo(() => state.inputValue);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isReadOnly: state.isReadOnly,
+		isInvalid: state.isInvalid,
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorField-input"
+	}, renderValues);
+	const cleanInputProps = () => {
+		const { ref: _ref, style: _inputStyle, value: _value, ...rest } = context.inputProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	return <input {...domProps} {...cleanInputProps()} {...cleanFocusProps()} {...cleanHoverProps()} ref={(el) => {
+		context.setInputRef(el);
+		local.ref?.(el);
+	}} class={renderProps.class()} style={renderProps.style()} value={inputValue()} data-disabled={state.isDisabled || void 0} data-readonly={state.isReadOnly || void 0} data-invalid={state.isInvalid || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-hovered={isHovered() || void 0} />;
+}
+ColorField.Input = ColorFieldInput;
+/**
+* A color swatch displays a preview of a color.
+*/
+function ColorSwatch(props) {
+	const swatchContext = useContext(ColorSwatchContextInternal);
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"color",
+		"colorName"
+	], [
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details"
+	]);
+	const resolvedColor = createMemo(() => {
+		return local.color ?? swatchContext?.color ?? pickerContext?.value ?? "#fff0";
+	});
+	const swatchAria = createColorSwatch(() => ({
+		id: rest.id,
+		slot: local.slot,
+		color: resolvedColor(),
+		colorName: local.colorName,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		"aria-details": ariaProps["aria-details"]
+	}));
+	const renderValues = createMemo(() => ({
+		color: swatchAria.color,
+		colorValue: swatchAria.color.toString("css")
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSwatch"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const cleanSwatchProps = () => {
+		const { ref: _ref, style: _swatchStyle, ...rest } = swatchAria.swatchProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const swatchStyle = swatchAria.swatchProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...swatchStyle,
+			...renderStyle
+		};
+	};
+	return <div {...domProps()} {...cleanSwatchProps()} class={renderProps.class()} style={mergedStyle()}>
+      {renderProps.renderChildren()}
+    </div>;
+}
+const ColorSliderStateContext = ColorSliderContext;
+const ColorAreaStateContext = ColorAreaContext;
+const ColorWheelStateContext = ColorWheelContext;
+const ColorWheelTrackContext = ColorWheelContext;
+const ColorFieldStateContext = ColorFieldContext;
+const ColorSwatchContext = ColorSwatchContextInternal;
+const ColorPickerContext = ColorPickerContextInternal;
+const ColorPickerStateContext = ColorPickerStateContextInternal;
+const ColorSwatchPickerContext = ColorSwatchPickerContextInternal;
+const ColorThumb = ColorSliderThumb;
+function ColorPicker(props) {
+	const [local] = splitProps(props, [
+		"value",
+		"defaultValue",
+		"onChange",
+		"children",
+		"class",
+		"style",
+		"slot"
+	]);
+	const [internalColor, setInternalColor] = createSignal(normalizeColor(local.defaultValue ?? "#ff0000"));
+	const color = createMemo(() => {
+		if (local.value !== void 0) return normalizeColor(local.value);
+		return internalColor();
+	});
+	const setColor = (nextColor) => {
+		if (local.value === void 0) setInternalColor(nextColor);
+		local.onChange?.(nextColor);
+	};
+	const renderValues = createMemo(() => ({ color: color() }));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorPicker"
+	}, renderValues);
+	return <ColorPickerStateContextInternal.Provider value={{
+		color: () => color(),
+		setColor
+	}}>
+      <ColorPickerContextInternal.Provider value={{
+		get value() {
+			return color();
+		},
+		onChange: setColor
+	}}>
+        <div class={renderProps.class()} style={renderProps.style()}>
+          {renderProps.renderChildren()}
+        </div>
+      </ColorPickerContextInternal.Provider>
+    </ColorPickerStateContextInternal.Provider>;
+}
+function ColorSwatchPicker(props) {
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, rest] = splitProps(props, [
+		"value",
+		"defaultValue",
+		"onChange",
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details",
+		"layout",
+		"children",
+		"class",
+		"style",
+		"slot"
+	]);
+	const [itemMap, setItemMap] = createSignal(/* @__PURE__ */ new Map());
+	const [itemOrder, setItemOrder] = createSignal([]);
+	const [internalColor, setInternalColor] = createSignal(normalizeColor(local.defaultValue ?? pickerContext?.value ?? "#ff0000"));
+	const selectedColor = createMemo(() => {
+		if (local.value !== void 0) return normalizeColor(local.value);
+		if (pickerContext?.value !== void 0) return normalizeColor(pickerContext.value);
+		return internalColor();
+	});
+	const selectedKey = createMemo(() => selectedColor().toString("hexa"));
+	const isControlled = createMemo(() => local.value !== void 0 || pickerContext?.value !== void 0);
+	const registerItem = (item) => {
+		setItemMap((prev) => {
+			const next = new Map(prev);
+			next.set(item.key, item);
+			return next;
+		});
+		setItemOrder((prev) => prev.includes(item.key) ? prev : [...prev, item.key]);
+	};
+	const unregisterItem = (key) => {
+		setItemMap((prev) => {
+			if (!prev.has(key)) return prev;
+			const next = new Map(prev);
+			next.delete(key);
+			return next;
+		});
+		setItemOrder((prev) => prev.filter((itemKey) => itemKey !== key));
+	};
+	const items = createMemo(() => {
+		const map = itemMap();
+		return itemOrder().map((key) => map.get(key)).filter((item) => item != null);
+	});
+	const state = createListState({
+		get items() {
+			return items();
+		},
+		get getKey() {
+			return (item) => item.key;
+		},
+		get getTextValue() {
+			return (item) => item.textValue;
+		},
+		get getDisabled() {
+			return (item) => !!item.isDisabled;
+		},
+		selectionMode: "single",
+		disallowEmptySelection: true,
+		get selectedKeys() {
+			return [selectedKey()];
+		},
+		onSelectionChange(keys) {
+			if (keys === "all") return;
+			const key = keys.values().next().value;
+			if (!key) return;
+			const item = itemMap().get(key);
+			if (!item) return;
+			if (!isControlled()) setInternalColor(item.color);
+			(local.onChange ?? pickerContext?.onChange)?.(item.color);
+		}
+	});
+	const listBoxAria = createListBox(() => ({
+		id: local.id,
+		"aria-label": local["aria-label"] ?? (!local["aria-labelledby"] ? "Color swatch picker" : void 0),
+		"aria-labelledby": local["aria-labelledby"],
+		"aria-describedby": local["aria-describedby"],
+		"aria-details": local["aria-details"],
+		shouldFocusWrap: true
+	}), state);
+	const resolveDirection = () => {
+		if (typeof document === "undefined") return "ltr";
+		return document.dir === "rtl" ? "rtl" : "ltr";
+	};
+	const findNextEnabledKey = (from, direction) => {
+		const collection = state.collection();
+		const getAdjacent = direction === "next" ? (key) => collection.getKeyAfter(key) : (key) => collection.getKeyBefore(key);
+		let key = from != null ? getAdjacent(from) : (direction === "next" ? () => collection.getFirstKey() : () => collection.getLastKey())();
+		while (key != null && state.isDisabled(key)) key = getAdjacent(key);
+		return key;
+	};
+	const getBoundaryEnabledKey = (direction) => {
+		const collection = state.collection();
+		const getAdjacent = direction === "next" ? (key) => collection.getKeyAfter(key) : (key) => collection.getKeyBefore(key);
+		let key = (direction === "next" ? () => collection.getFirstKey() : () => collection.getLastKey())();
+		while (key != null && state.isDisabled(key)) key = getAdjacent(key);
+		return key;
+	};
+	const getOptionElementForKey = (listbox, key) => {
+		if (!listbox || key == null) return null;
+		const keyString = String(key);
+		for (const optionElement of listbox.querySelectorAll("[role=\"option\"]")) if (optionElement.id === keyString) return optionElement;
+		return null;
+	};
+	const findGridKey = (listbox, key, nextKey, shouldSkip) => {
+		let candidate = key;
+		const previousRect = getOptionElementForKey(listbox, candidate)?.getBoundingClientRect();
+		if (!previousRect) return null;
+		while (candidate != null) {
+			candidate = nextKey(candidate);
+			if (candidate == null) return null;
+			const itemRect = getOptionElementForKey(listbox, candidate)?.getBoundingClientRect();
+			if (!itemRect) return null;
+			if (!shouldSkip(previousRect, itemRect)) return candidate;
+		}
+		return null;
+	};
+	const isSameRow = (prevRect, itemRect) => prevRect.y === itemRect.y || prevRect.x !== itemRect.x;
+	const getGridKeyBelow = (listbox, key) => findGridKey(listbox, key, (current) => findNextEnabledKey(current, "next"), isSameRow);
+	const getGridKeyAbove = (listbox, key) => findGridKey(listbox, key, (current) => findNextEnabledKey(current, "prev"), isSameRow);
+	const getGridKeyRightOf = (key) => resolveDirection() === "rtl" ? findNextEnabledKey(key, "prev") : findNextEnabledKey(key, "next");
+	const getGridKeyLeftOf = (key) => resolveDirection() === "rtl" ? findNextEnabledKey(key, "next") : findNextEnabledKey(key, "prev");
+	const handleGridKeyDown = (e) => {
+		if ((local.layout ?? "grid") !== "grid") return false;
+		if (e.key !== "ArrowRight" && e.key !== "ArrowLeft" && e.key !== "ArrowDown" && e.key !== "ArrowUp") return false;
+		const listbox = e.currentTarget;
+		const initialKey = state.focusedKey() ?? (e.key === "ArrowUp" || e.key === "ArrowLeft" ? getBoundaryEnabledKey("prev") : getBoundaryEnabledKey("next"));
+		if (initialKey == null) return false;
+		let nextKey = null;
+		switch (e.key) {
+			case "ArrowDown":
+				nextKey = getGridKeyBelow(listbox, initialKey) ?? getBoundaryEnabledKey("next");
+				break;
+			case "ArrowUp":
+				nextKey = getGridKeyAbove(listbox, initialKey) ?? getBoundaryEnabledKey("prev");
+				break;
+			case "ArrowRight":
+				nextKey = getGridKeyRightOf(initialKey) ?? (resolveDirection() === "rtl" ? getBoundaryEnabledKey("prev") : getBoundaryEnabledKey("next"));
+				break;
+			case "ArrowLeft":
+				nextKey = getGridKeyLeftOf(initialKey) ?? (resolveDirection() === "rtl" ? getBoundaryEnabledKey("next") : getBoundaryEnabledKey("prev"));
+				break;
+		}
+		if (nextKey == null) return false;
+		state.setFocusedKey(nextKey);
+		if (state.selectionMode() === "single") state.replaceSelection(nextKey);
+		e.preventDefault();
+		e.stopPropagation();
+		return true;
+	};
+	const getListBoxKeyDown = () => {
+		return listBoxAria.listBoxProps.onKeyDown;
+	};
+	const onColorSwatchPickerKeyDown = (e) => {
+		if (handleGridKeyDown(e)) return;
+		getListBoxKeyDown()?.(e);
+	};
+	createEffect(() => {
+		const key = selectedKey();
+		if (key) state.setFocusedKey(key);
+	});
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing({ within: true });
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const renderValues = createMemo(() => ({
+		isFocused: state.isFocused() || isFocused(),
+		isFocusVisible: isFocusVisible(),
+		selectedColor: selectedColor(),
+		layout: local.layout ?? "grid"
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSwatchPicker"
+	}, renderValues);
+	const cleanListBoxProps = () => {
+		const { ref: _ref, onKeyDown: _onKeyDown, ...restListBoxProps } = listBoxAria.listBoxProps;
+		return restListBoxProps;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...restFocusProps } = focusProps;
+		return restFocusProps;
+	};
+	return <ColorSwatchPickerContextInternal.Provider value={{
+		state,
+		registerItem,
+		unregisterItem
+	}}>
+      <div {...mergeProps$1(domProps(), cleanListBoxProps(), cleanFocusProps(), { onKeyDown: onColorSwatchPickerKeyDown })} class={renderProps.class()} style={renderProps.style()} slot={local.slot ?? void 0} data-focused={state.isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-layout={local.layout ?? "grid"}>
+        {local.children}
+      </div>
+    </ColorSwatchPickerContextInternal.Provider>;
+}
+function ColorSwatchPickerItem(props) {
+	const context = useContext(ColorSwatchPickerContextInternal);
+	if (!context) throw new Error("ColorSwatchPickerItem must be used within a ColorSwatchPicker");
+	const [local, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"color"
+	], ["isDisabled", "aria-label"]);
+	const color = createMemo(() => normalizeColor(local.color));
+	const key = createMemo(() => color().toString("hexa"));
+	const textValue = createMemo(() => {
+		const locale = globalThis.navigator?.language ?? "en-US";
+		return color().getColorName(locale);
+	});
+	createEffect(() => {
+		const itemKey = key();
+		context.registerItem({
+			key: itemKey,
+			color: color(),
+			textValue: textValue(),
+			isDisabled: ariaProps.isDisabled
+		});
+		onCleanup(() => context.unregisterItem(itemKey));
+	});
+	const optionAria = createOption(() => ({
+		key: key(),
+		isDisabled: ariaProps.isDisabled,
+		"aria-label": ariaProps["aria-label"] ?? textValue()
+	}), context.state);
+	const renderValues = createMemo(() => ({
+		isSelected: optionAria.isSelected(),
+		isFocused: optionAria.isFocused(),
+		isFocusVisible: optionAria.isFocusVisible(),
+		isPressed: optionAria.isPressed(),
+		isDisabled: optionAria.isDisabled(),
+		color: color()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSwatchPickerItem"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const cleanOptionProps = () => {
+		const { ref: _ref, ...restOptionProps } = optionAria.optionProps;
+		return restOptionProps;
+	};
+	return <div {...mergeProps$1(domProps(), cleanOptionProps())} class={renderProps.class()} style={renderProps.style()}>
+      <ColorSwatchContextInternal.Provider value={{ color: color() }}>
+        {renderProps.children ? renderProps.renderChildren() : <ColorSwatch />}
+      </ColorSwatchContextInternal.Provider>
+    </div>;
+}
+//#endregion
+export { ColorArea, ColorAreaContext, ColorAreaGradient, ColorAreaStateContext, ColorAreaThumb, ColorField, ColorFieldContext, ColorFieldInput, ColorFieldStateContext, ColorPicker, ColorPickerContext, ColorPickerStateContext, ColorSlider, ColorSliderContext, ColorSliderLabel, ColorSliderOutput, ColorSliderStateContext, ColorSliderThumb, ColorSliderTrack, ColorSwatch, ColorSwatchContext, ColorSwatchPicker, ColorSwatchPickerContext, ColorSwatchPickerItem, ColorThumb, ColorWheel, ColorWheelContext, ColorWheelStateContext, ColorWheelThumb, ColorWheelTrack, ColorWheelTrackContext };
+
+//# sourceMappingURL=Color.jsx.map