@pathscale/ui 0.0.110 → 0.0.112

package/dist/components/colorpicker/ColorPicker.d.ts

@@ -2,7 +2,7 @@ import { type JSX } from "solid-js";
 import type { ColorFormat } from "./ColorUtils";
 import { IComponentBaseProps } from "../types";
 export type { ColorFormat } from "./ColorUtils";
-export type ColorPickerMode = "picker" | "wheel";
+export type ColorPickerMode = "picker" | "wheel" | "flower";
 export interface ColorPickerProps extends IComponentBaseProps {
     value?: string;
     onChange?: (color: string) => void;

package/dist/components/colorpicker/ColorPickerFlowerSelector.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from "solid-js";
+declare const ColorPickerFlowerSelector: () => JSX.Element;
+export default ColorPickerFlowerSelector;

package/dist/components/colorpicker/ColorPickerGradientSelector.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from "solid-js";
+declare const ColorPickerGradientSelector: () => JSX.Element;
+export default ColorPickerGradientSelector;

package/dist/components/colorpicker/ColorPickerWheelSelector.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from "solid-js";
+declare const ColorPickerWheelSelector: () => JSX.Element;
+export default ColorPickerWheelSelector;

package/dist/components/colorpicker/ColorWheelFlower.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "solid-js";
+export interface ColorWheelFlowerProps {
+    class?: string;
+    className?: string;
+}
+declare const ColorWheelFlower: (props: ColorWheelFlowerProps) => JSX.Element;
+export default ColorWheelFlower;

package/dist/components/colorpicker/index.d.ts

@@ -1,3 +1,26 @@
 export { default as ColorPicker, default } from "./ColorPicker";
 export type { ColorPickerProps, ColorFormat, ColorPickerMode } from "./ColorPicker";
+export { default as ColorPickerGradientSelector } from "./ColorPickerGradientSelector";
+export { default as ColorPickerWheelSelector } from "./ColorPickerWheelSelector";
+export { default as ColorPickerFlowerSelector } from "./ColorPickerFlowerSelector";
+export { default as SaturationBrightness } from "./SaturationBrightness";
+export { default as HueSlider } from "./HueSlider";
+export { default as LightnessSlider } from "./LightnessSlider";
+export { default as AlphaSlider } from "./AlphaSlider";
+export { default as ColorWheel } from "./ColorWheel";
+export { default as ColorWheelFlower } from "./ColorWheelFlower";
+export { default as ColorSwatches } from "./ColorSwatches";
+export { default as ColorInput } from "./ColorInput";
+export { default as ColorPreview } from "./ColorPreview";
+export { ColorPickerContext, useColorPickerContext } from "./colorpickerContext";
+export type { ColorPickerContextType } from "./colorpickerContext";
+export type { SaturationBrightnessProps } from "./SaturationBrightness";
+export type { HueSliderProps } from "./HueSlider";
+export type { LightnessSliderProps } from "./LightnessSlider";
+export type { AlphaSliderProps } from "./AlphaSlider";
+export type { ColorWheelProps } from "./ColorWheel";
+export type { ColorWheelFlowerProps } from "./ColorWheelFlower";
+export type { ColorSwatchesProps } from "./ColorSwatches";
+export type { ColorInputProps } from "./ColorInput";
+export type { ColorPreviewProps } from "./ColorPreview";
 export type { ColorValue, RGB, RGBA, HSL, HSLA } from "./ColorUtils";

package/dist/index.d.ts

@@ -16,7 +16,8 @@ export type { CarouselItemProps, CarouselProps } from "./components/carousel";
 export { default as ChatBubble } from "./components/chatbubble";
 export { default as Checkbox } from "./components/checkbox";
 export { default as ColorPicker } from "./components/colorpicker";
-export type { ColorPickerProps, ColorFormat, ColorValue } from "./components/colorpicker";
+export { AlphaSlider, ColorInput, ColorPickerContext, ColorPickerFlowerSelector, ColorPickerGradientSelector, ColorPickerWheelSelector, ColorPreview, ColorSwatches, ColorWheel, ColorWheelFlower, HueSlider, LightnessSlider, SaturationBrightness, useColorPickerContext, } from "./components/colorpicker";
+export type { AlphaSliderProps, ColorFormat, ColorInputProps, ColorPickerContextType, ColorPickerMode, ColorPickerProps, ColorPreviewProps, ColorSwatchesProps, ColorValue, ColorWheelFlowerProps, ColorWheelProps, HueSliderProps, LightnessSliderProps, SaturationBrightnessProps, } from "./components/colorpicker";
 export { CodeMockup, CodeMockupLine } from "./components/codemockup";
 export { Collapse, CollapseContent, CollapseDetails, CollapseTitle, Summary, } from "./components/collapse";
 export { default as ConnectionStatus } from "./components/connectionstatus";

package/dist/index.js

@@ -6471,6 +6471,106 @@ function getDefaultColor() {
         hex: "#ffffff"
     };
 }
+var AlphaSlider_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div role=slider aria-label="Alpha (opacity)"aria-valuemin=0 aria-valuemax=1><div class="absolute inset-0"></div><div class="absolute inset-0"></div><div>');
+const AlphaSlider_AlphaSlider = (props)=>{
+    const context = useColorPickerContext();
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let sliderRef;
+    const alpha = ()=>context.color().hsl.a;
+    const updateAlpha = (clientX)=>{
+        if (!sliderRef || context.disabled()) return;
+        const rect = sliderRef.getBoundingClientRect();
+        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const newAlpha = Math.round(100 * percentage) / 100;
+        const newColor = setAlpha(context.color(), newAlpha);
+        context.onChange(newColor);
+    };
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateAlpha(e.clientX);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateAlpha(e.clientX);
+            e.preventDefault();
+        }
+    };
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
+    };
+    const handleKeyDown = (e)=>{
+        if (context.disabled()) return;
+        const step = e.shiftKey ? 0.1 : 0.01;
+        let newAlpha = alpha();
+        switch(e.key){
+            case "ArrowLeft":
+            case "ArrowDown":
+                newAlpha = Math.max(0, alpha() - step);
+                e.preventDefault();
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                newAlpha = Math.min(1, alpha() + step);
+                e.preventDefault();
+                break;
+            default:
+                return;
+        }
+        const newColor = setAlpha(context.color(), newAlpha);
+        context.onChange(newColor);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+    });
+    const classes = ()=>twMerge("relative w-full h-6 rounded cursor-pointer select-none overflow-hidden", clsx({
+            "opacity-50 cursor-not-allowed": context.disabled()
+        }), props.class, props.className);
+    const thumbClasses = ()=>twMerge("absolute top-1/2 w-4 h-4 border-2 border-white rounded-full shadow-lg transform -translate-x-1/2 -translate-y-1/2 pointer-events-none", clsx({
+            "ring-2 ring-primary": isDragging()
+        }));
+    return (()=>{
+        var _el$ = AlphaSlider_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+        _el$.$$keydown = handleKeyDown;
+        _el$.$$mousedown = handleMouseDown;
+        var _ref$ = sliderRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
+        _el$2.style.setProperty("background-image", "linear-gradient(45deg, hsl(var(--b3)) 25%, transparent 25%), linear-gradient(-45deg, hsl(var(--b3)) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, hsl(var(--b3)) 75%), linear-gradient(-45deg, transparent 75%, hsl(var(--b3)) 75%)");
+        _el$2.style.setProperty("background-size", "8px 8px");
+        _el$2.style.setProperty("background-position", "0 0, 0 4px, 4px -4px, -4px 0px");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = context.disabled() ? -1 : 0, _v$3 = alpha(), _v$4 = context.disabled(), _v$5 = `linear-gradient(to right, transparent, ${context.color().hex})`, _v$6 = thumbClasses(), _v$7 = `${100 * alpha()}%`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.o = _v$4);
+            _v$5 !== _p$.i && (null != (_p$.i = _v$5) ? _el$3.style.setProperty("background", _v$5) : _el$3.style.removeProperty("background"));
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.n = _v$6);
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$4.style.setProperty("left", _v$7) : _el$4.style.removeProperty("left"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0
+        });
+        return _el$;
+    })();
+};
+const AlphaSlider = AlphaSlider_AlphaSlider;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown",
+    "keydown"
+]);
 var SaturationBrightness_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div role=slider aria-label="Saturation and brightness"aria-valuemin=0 aria-valuemax=100><div>');
 const SaturationBrightness = (props)=>{
     const context = useColorPickerContext();
@@ -6682,106 +6782,11 @@ const colorpicker_HueSlider = HueSlider;
     "mousedown",
     "keydown"
 ]);
-var AlphaSlider_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div role=slider aria-label="Alpha (opacity)"aria-valuemin=0 aria-valuemax=1><div class="absolute inset-0"></div><div class="absolute inset-0"></div><div>');
-const AlphaSlider_AlphaSlider = (props)=>{
-    const context = useColorPickerContext();
-    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
-    let sliderRef;
-    const alpha = ()=>context.color().hsl.a;
-    const updateAlpha = (clientX)=>{
-        if (!sliderRef || context.disabled()) return;
-        const rect = sliderRef.getBoundingClientRect();
-        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-        const newAlpha = Math.round(100 * percentage) / 100;
-        const newColor = setAlpha(context.color(), newAlpha);
-        context.onChange(newColor);
-    };
-    const handleMouseDown = (e)=>{
-        if (context.disabled()) return;
-        setIsDragging(true);
-        updateAlpha(e.clientX);
-        e.preventDefault();
-    };
-    const handleMouseMove = (e)=>{
-        if (isDragging()) {
-            updateAlpha(e.clientX);
-            e.preventDefault();
-        }
-    };
-    const handleMouseUp = ()=>{
-        setIsDragging(false);
-    };
-    const handleKeyDown = (e)=>{
-        if (context.disabled()) return;
-        const step = e.shiftKey ? 0.1 : 0.01;
-        let newAlpha = alpha();
-        switch(e.key){
-            case "ArrowLeft":
-            case "ArrowDown":
-                newAlpha = Math.max(0, alpha() - step);
-                e.preventDefault();
-                break;
-            case "ArrowRight":
-            case "ArrowUp":
-                newAlpha = Math.min(1, alpha() + step);
-                e.preventDefault();
-                break;
-            default:
-                return;
-        }
-        const newColor = setAlpha(context.color(), newAlpha);
-        context.onChange(newColor);
-    };
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
-        document.addEventListener("mousemove", handleMouseMove);
-        document.addEventListener("mouseup", handleMouseUp);
-    });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-    });
-    const classes = ()=>twMerge("relative w-full h-6 rounded cursor-pointer select-none overflow-hidden", clsx({
-            "opacity-50 cursor-not-allowed": context.disabled()
-        }), props.class, props.className);
-    const thumbClasses = ()=>twMerge("absolute top-1/2 w-4 h-4 border-2 border-white rounded-full shadow-lg transform -translate-x-1/2 -translate-y-1/2 pointer-events-none", clsx({
-            "ring-2 ring-primary": isDragging()
-        }));
-    return (()=>{
-        var _el$ = AlphaSlider_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
-        _el$.$$keydown = handleKeyDown;
-        _el$.$$mousedown = handleMouseDown;
-        var _ref$ = sliderRef;
-        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
-        _el$2.style.setProperty("background-image", "linear-gradient(45deg, hsl(var(--b3)) 25%, transparent 25%), linear-gradient(-45deg, hsl(var(--b3)) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, hsl(var(--b3)) 75%), linear-gradient(-45deg, transparent 75%, hsl(var(--b3)) 75%)");
-        _el$2.style.setProperty("background-size", "8px 8px");
-        _el$2.style.setProperty("background-position", "0 0, 0 4px, 4px -4px, -4px 0px");
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = classes(), _v$2 = context.disabled() ? -1 : 0, _v$3 = alpha(), _v$4 = context.disabled(), _v$5 = `linear-gradient(to right, transparent, ${context.color().hex})`, _v$6 = thumbClasses(), _v$7 = `${100 * alpha()}%`;
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
-            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.t = _v$2);
-            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.a = _v$3);
-            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.o = _v$4);
-            _v$5 !== _p$.i && (null != (_p$.i = _v$5) ? _el$3.style.setProperty("background", _v$5) : _el$3.style.removeProperty("background"));
-            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.n = _v$6);
-            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$4.style.setProperty("left", _v$7) : _el$4.style.removeProperty("left"));
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0,
-            o: void 0,
-            i: void 0,
-            n: void 0,
-            s: void 0
-        });
-        return _el$;
-    })();
-};
-const AlphaSlider = AlphaSlider_AlphaSlider;
-(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "mousedown",
-    "keydown"
-]);
+const ColorPickerGradientSelector = ()=>[
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_SaturationBrightness, {}),
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_HueSlider, {})
+    ];
+const colorpicker_ColorPickerGradientSelector = ColorPickerGradientSelector;
 var ColorWheel_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div role=slider aria-label="Color Wheel"><div>');
 const ColorWheel_ColorWheel = (props)=>{
     const context = useColorPickerContext();
@@ -6936,55 +6941,606 @@ const LightnessSlider_LightnessSlider = (props)=>{
         document.addEventListener("mouseup", handleMouseUp);
     });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+    });
+    const classes = ()=>twMerge("relative w-full h-6 rounded cursor-pointer select-none", clsx({
+            "opacity-50 cursor-not-allowed": context.disabled()
+        }), props.class, props.className);
+    const thumbClasses = ()=>twMerge("absolute top-1/2 w-4 h-4 border-2 border-white rounded-full shadow-lg transform -translate-x-1/2 -translate-y-1/2 pointer-events-none", clsx({
+            "ring-2 ring-primary": isDragging()
+        }));
+    const gradientStyle = ()=>{
+        const h = context.color().hsl.h;
+        const s = context.color().hsl.s;
+        return `linear-gradient(to right, hsl(${h}, ${s}%, 0%), hsl(${h}, ${s}%, 50%), hsl(${h}, ${s}%, 100%))`;
+    };
+    return (()=>{
+        var _el$ = LightnessSlider_tmpl$(), _el$2 = _el$.firstChild;
+        _el$.$$keydown = handleKeyDown;
+        _el$.$$mousedown = handleMouseDown;
+        var _ref$ = sliderRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = gradientStyle(), _v$3 = context.disabled() ? -1 : 0, _v$4 = lightness(), _v$5 = context.disabled(), _v$6 = thumbClasses(), _v$7 = `${lightness()}%`, _v$8 = `hsl(${context.color().hsl.h}, ${context.color().hsl.s}%, ${lightness()}%)`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$.style.setProperty("background", _v$2) : _el$.style.removeProperty("background"));
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.i = _v$5);
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.n = _v$6);
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("left", _v$7) : _el$2.style.removeProperty("left"));
+            _v$8 !== _p$.h && (null != (_p$.h = _v$8) ? _el$2.style.setProperty("background-color", _v$8) : _el$2.style.removeProperty("background-color"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0,
+            h: void 0
+        });
+        return _el$;
+    })();
+};
+const LightnessSlider = LightnessSlider_LightnessSlider;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown",
+    "keydown"
+]);
+const ColorPickerWheelSelector_ColorPickerWheelSelector = ()=>[
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorWheel, {}),
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(LightnessSlider, {})
+    ];
+const ColorPickerWheelSelector = ColorPickerWheelSelector_ColorPickerWheelSelector;
+const prefersReducedMotion = ()=>globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
+const motionDurations = {
+    route: 0.18,
+    routeAuth: 0.35,
+    fast: 0.2,
+    base: 0.3,
+    slow: 0.45
+};
+const motionEasings = {
+    out: "ease-out",
+    inOut: "ease-in-out"
+};
+const motionDistances = {
+    sm: 6,
+    md: 12,
+    lg: 20,
+    slideIn: 40
+};
+const defaultMotionTokens = {
+    durations: {
+        ...motionDurations
+    },
+    easings: {
+        ...motionEasings
+    },
+    distances: {
+        ...motionDistances
+    }
+};
+const mergeDefined = (base, overrides)=>{
+    const next = {
+        ...base
+    };
+    if (!overrides) return next;
+    for (const [key, value] of Object.entries(overrides))if (void 0 !== value) next[key] = value;
+    return next;
+};
+const mergeMotionTokens = (base, overrides)=>({
+        durations: mergeDefined(base.durations, overrides?.durations),
+        easings: mergeDefined(base.easings, overrides?.easings),
+        distances: mergeDefined(base.distances, overrides?.distances)
+    });
+const immediateDriver = ({ to, onUpdate, onComplete })=>{
+    onUpdate(to);
+    onComplete?.();
+    return {
+        stop: ()=>{}
+    };
+};
+let activeDriver = immediateDriver;
+const setMotionDriver = (driver)=>{
+    activeDriver = driver;
+};
+const getMotionDriver = ()=>activeDriver;
+const easeOutCubic = (t)=>1 - Math.pow(1 - t, 3);
+const easeInCubic = (t)=>t * t * t;
+const easeInOutCubic = (t)=>t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+const resolveEase = (easing)=>{
+    if ("function" == typeof easing) return easing;
+    switch(easing){
+        case "ease-in":
+            return easeInCubic;
+        case "ease-in-out":
+            return easeInOutCubic;
+        case "linear":
+            return (t)=>t;
+        case "ease-out":
+        default:
+            return easeOutCubic;
+    }
+};
+const resolveDuration = (transition)=>Math.max(0, (transition?.duration ?? 0) * 1000);
+const resolveDelay = (transition)=>Math.max(0, (transition?.delay ?? 0) * 1000);
+const readOpacity = (el)=>{
+    const value = Number.parseFloat(getComputedStyle(el).opacity);
+    return Number.isFinite(value) ? value : 1;
+};
+const runMotion = (el, from, to, transition, onComplete)=>{
+    const duration = resolveDuration(transition);
+    const delay = resolveDelay(transition);
+    const ease = resolveEase(transition?.easing);
+    const driver = getMotionDriver();
+    const controls = [];
+    const shouldTransform = void 0 !== from.x || void 0 !== from.y || void 0 !== from.scale || void 0 !== to.x || void 0 !== to.y || void 0 !== to.scale;
+    const transformState = {
+        x: from.x ?? 0,
+        y: from.y ?? 0,
+        scale: from.scale ?? 1
+    };
+    const applyTransform = ()=>{
+        if (!shouldTransform) return;
+        el.style.transform = `translate3d(${transformState.x}px, ${transformState.y}px, 0) scale(${transformState.scale})`;
+    };
+    if (void 0 !== from.opacity) el.style.opacity = String(from.opacity);
+    applyTransform();
+    const animationTargets = Object.keys(to);
+    if (0 === animationTargets.length) {
+        onComplete?.();
+        return {
+            stop: ()=>{}
+        };
+    }
+    let remaining = animationTargets.length;
+    const handleComplete = ()=>{
+        remaining -= 1;
+        if (remaining <= 0) onComplete?.();
+    };
+    const start = ()=>{
+        animationTargets.forEach((key)=>{
+            if ("opacity" === key) {
+                const fromValue = from.opacity ?? (void 0 !== to.opacity ? readOpacity(el) : 1);
+                const control = driver({
+                    from: fromValue,
+                    to: to.opacity ?? fromValue,
+                    duration,
+                    ease,
+                    onUpdate: (latest)=>{
+                        el.style.opacity = String(latest);
+                    },
+                    onComplete: handleComplete
+                });
+                controls.push(control);
+                return;
+            }
+            const fromValue = "scale" === key ? from.scale ?? 1 : "x" === key ? from.x ?? 0 : from.y ?? 0;
+            const toValue = to[key] ?? fromValue;
+            const control = driver({
+                from: fromValue,
+                to: toValue,
+                duration,
+                ease,
+                onUpdate: (latest)=>{
+                    if (!shouldTransform) return;
+                    if ("x" === key) transformState.x = latest;
+                    if ("y" === key) transformState.y = latest;
+                    if ("scale" === key) transformState.scale = latest;
+                    applyTransform();
+                },
+                onComplete: handleComplete
+            });
+            controls.push(control);
+        });
+    };
+    let timeoutId = null;
+    if (delay > 0) timeoutId = window.setTimeout(start, delay);
+    else start();
+    return {
+        stop: ()=>{
+            if (null !== timeoutId) clearTimeout(timeoutId);
+            controls.forEach((control)=>control.stop());
+        }
+    };
+};
+var ColorWheelFlower_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="absolute inset-0"><div class="absolute inset-0"><div class="absolute inset-0 rounded-full"></div></div><div class="absolute inset-0"><div class="absolute inset-0 rounded-full"></div></div></div><div class="relative z-10 w-[calc(100%-5px)] h-[calc(100%-5px)] rounded-full">'), ColorWheelFlower_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class=absolute><div class="relative w-[32px] h-[32px]"><span class="absolute rounded-full pointer-events-none"></span><button type=button><span>');
+const parseRgbToHsl = (rgbString)=>{
+    const match = rgbString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (!match) return {
+        hue: 0,
+        saturation: 0,
+        lightness: 100
+    };
+    const r = parseInt(match[1]);
+    const g = parseInt(match[2]);
+    const b = parseInt(match[3]);
+    const hsl = rgbToHsl(r, g, b);
+    return {
+        hue: hsl.h,
+        saturation: hsl.s,
+        lightness: hsl.l
+    };
+};
+const createColorItem = (rgb, offsetX, offsetY)=>({
+        rgb,
+        offsetX,
+        offsetY,
+        ...parseRgbToHsl(rgb)
+    });
+const readMotionState = (el)=>{
+    const styles = getComputedStyle(el);
+    const opacityValue = Number.parseFloat(styles.opacity);
+    const opacity = Number.isFinite(opacityValue) ? opacityValue : 1;
+    const transform = styles.transform;
+    if (!transform || "none" === transform) return {
+        opacity,
+        x: 0,
+        y: 0,
+        scale: 1
+    };
+    if ("undefined" != typeof DOMMatrixReadOnly) {
+        const matrix = new DOMMatrixReadOnly(transform);
+        return {
+            opacity,
+            x: matrix.m41,
+            y: matrix.m42,
+            scale: matrix.a
+        };
+    }
+    const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+    if (!matrixMatch) return {
+        opacity,
+        x: 0,
+        y: 0,
+        scale: 1
+    };
+    const values = matrixMatch[1].split(",").map((value)=>Number.parseFloat(value.trim()));
+    return {
+        opacity,
+        scale: Number.isFinite(values[0]) ? values[0] : 1,
+        x: Number.isFinite(values[4]) ? values[4] : 0,
+        y: Number.isFinite(values[5]) ? values[5] : 0
+    };
+};
+const getLiftOffset = (item, distance)=>{
+    const radius = Math.sqrt(item.offsetX ** 2 + item.offsetY ** 2);
+    if (!Number.isFinite(radius) || 0 === radius) return {
+        x: 0,
+        y: 0
+    };
+    return {
+        x: item.offsetX / radius * distance,
+        y: item.offsetY / radius * distance
+    };
+};
+const easeOutBack = (overshoot = 1.4)=>(t)=>{
+        const c1 = overshoot;
+        const c3 = c1 + 1;
+        return 1 + c3 * (t - 1) ** 3 + c1 * (t - 1) ** 2;
+    };
+const COLORS = [
+    createColorItem("rgb(245,245,61)", 34.641, -20),
+    createColorItem("rgb(245,153,61)", 20, -34.641),
+    createColorItem("rgb(245,61,61)", 0, -40),
+    createColorItem("rgb(245,61,153)", -20, -34.641),
+    createColorItem("rgb(245,61,245)", -34.641, -20),
+    createColorItem("rgb(153,61,245)", -40, 0),
+    createColorItem("rgb(61,61,245)", -34.641, 20),
+    createColorItem("rgb(61,153,245)", -20, 34.641),
+    createColorItem("rgb(61,245,245)", 0, 40),
+    createColorItem("rgb(61,245,153)", 20, 34.641),
+    createColorItem("rgb(61,245,61)", 34.641, 20),
+    createColorItem("rgb(153,245,61)", 40, 0),
+    createColorItem("rgb(240,217,194)", 10, -17.3205),
+    createColorItem("rgb(240,194,217)", -10, -17.3205),
+    createColorItem("rgb(217,194,240)", -20, 0),
+    createColorItem("rgb(194,217,240)", -10, 17.3205),
+    createColorItem("rgb(194,240,217)", 10, 17.3205),
+    createColorItem("rgb(217,240,194)", 20, 0),
+    createColorItem("rgb(255,255,255)", 0, 0)
+];
+const MAX_WAVE_DISTANCE = 2 * Math.max(...COLORS.map((item)=>Math.sqrt(item.offsetX ** 2 + item.offsetY ** 2)));
+const MAX_WAVE_DELAY = 0.12;
+const RAINBOW_GRADIENT = `conic-gradient(
+  from 0deg,
+  rgb(245,61,61) 0deg,
+  rgb(245,153,61) 30deg,
+  rgb(245,245,61) 60deg,
+  rgb(61,245,61) 120deg,
+  rgb(61,245,245) 180deg,
+  rgb(61,61,245) 240deg,
+  rgb(245,61,245) 300deg,
+  rgb(245,61,61) 360deg
+)`;
+const ColorWheelFlower = (props)=>{
+    const context = useColorPickerContext();
+    const [selectedIndex, setSelectedIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const [hoveredIndex, setHoveredIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const [pressedIndex, setPressedIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const reduceMotion = prefersReducedMotion();
+    const ringTransition = reduceMotion ? {
+        duration: 0
+    } : {
+        duration: motionDurations.slow,
+        easing: motionEasings.inOut
+    };
+    const hoverLift = reduceMotion ? 0 : motionDistances.sm;
+    const selectLift = reduceMotion ? 0 : motionDistances.md;
+    const pressScale = 0.96;
+    let outerRingRef;
+    let outerRingControl = null;
+    const handleDotClick = (index)=>{
+        if (context.disabled()) return;
+        if (selectedIndex() === index) {
+            setSelectedIndex(null);
+            const whiteColor = createColorFromHsl(0, 0, 100, context.color().hsl.a);
+            context.onChange(whiteColor);
+        } else {
+            setSelectedIndex(index);
+            const color = COLORS[index];
+            const newColor = createColorFromHsl(color.hue, color.saturation, color.lightness, context.color().hsl.a);
+            context.onChange(newColor);
+        }
+    };
+    const containerClasses = ()=>twMerge("relative w-[140px] h-[140px] flex items-center justify-center", clsx({
+            "opacity-50 cursor-not-allowed": context.disabled()
+        }), props.class, props.className);
+    const outerRingBackground = ()=>{
+        const idx = selectedIndex();
+        return null === idx ? RAINBOW_GRADIENT : `conic-gradient(${COLORS[idx].rgb}, ${COLORS[idx].rgb})`;
+    };
+    const outerRingTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (context.disabled()) return {
+            opacity: 0.5,
+            scale: 1
+        };
+        if (null !== selectedIndex()) return {
+            opacity: 1,
+            scale: 1.06
+        };
+        if (null !== hoveredIndex()) return {
+            opacity: 0.98,
+            scale: 1.03
+        };
+        return {
+            opacity: 0.92,
+            scale: 1
+        };
+    });
+    const outerRingGlow = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (context.disabled()) return "none";
+        const idx = hoveredIndex() ?? selectedIndex();
+        if (null === idx) return "0 0 12px rgba(255,255,255,0.12)";
+        const color = COLORS[idx].rgb;
+        return `0 0 12px rgba(255,255,255,0.35), 0 0 28px ${color}`;
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!outerRingRef) return;
+        const target = outerRingTarget();
+        outerRingControl?.stop();
+        outerRingControl = runMotion(outerRingRef, readMotionState(outerRingRef), target, ringTransition);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        outerRingControl?.stop();
     });
-    const classes = ()=>twMerge("relative w-full h-6 rounded cursor-pointer select-none", clsx({
-            "opacity-50 cursor-not-allowed": context.disabled()
-        }), props.class, props.className);
-    const thumbClasses = ()=>twMerge("absolute top-1/2 w-4 h-4 border-2 border-white rounded-full shadow-lg transform -translate-x-1/2 -translate-y-1/2 pointer-events-none", clsx({
-            "ring-2 ring-primary": isDragging()
-        }));
-    const gradientStyle = ()=>{
-        const h = context.color().hsl.h;
-        const s = context.color().hsl.s;
-        return `linear-gradient(to right, hsl(${h}, ${s}%, 0%), hsl(${h}, ${s}%, 50%), hsl(${h}, ${s}%, 100%))`;
-    };
     return (()=>{
-        var _el$ = LightnessSlider_tmpl$(), _el$2 = _el$.firstChild;
-        _el$.$$keydown = handleKeyDown;
-        _el$.$$mousedown = handleMouseDown;
-        var _ref$ = sliderRef;
-        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
+        var _el$ = ColorWheelFlower_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$2.nextSibling;
+        _el$3.style.setProperty("transform", "scale(1.1)");
+        var _ref$ = outerRingRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$4) : outerRingRef = _el$4;
+        _el$4.style.setProperty("transition", reduceMotion ? "none" : "background 450ms ease-in-out, box-shadow 300ms ease-out");
+        _el$5.style.setProperty("transform", "scale(0.9)");
+        _el$6.style.setProperty("background", "#0b1012");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+            each: COLORS,
+            children: (item, index)=>{
+                let motionRef;
+                let dotControl = null;
+                const isSelected = ()=>selectedIndex() === index();
+                const isHovered = ()=>hoveredIndex() === index();
+                const isPressed = ()=>pressedIndex() === index();
+                const hasSelection = ()=>null !== selectedIndex();
+                const hasHover = ()=>null !== hoveredIndex();
+                const dotBaseTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                    if (context.disabled()) return {
+                        opacity: 0.5,
+                        scale: 1,
+                        x: 0,
+                        y: 0
+                    };
+                    if (isSelected()) {
+                        const lift = getLiftOffset(item, selectLift);
+                        return {
+                            opacity: 1,
+                            scale: 1.18,
+                            x: lift.x,
+                            y: lift.y
+                        };
+                    }
+                    if (isHovered()) {
+                        const lift = getLiftOffset(item, hoverLift);
+                        return {
+                            opacity: 1,
+                            scale: 1.1,
+                            x: lift.x,
+                            y: lift.y
+                        };
+                    }
+                    if (hasSelection()) return {
+                        opacity: 1,
+                        scale: 0.98,
+                        x: 0,
+                        y: 0
+                    };
+                    if (hasHover()) return {
+                        opacity: 1,
+                        scale: 0.99,
+                        x: 0,
+                        y: 0
+                    };
+                    return {
+                        opacity: 1,
+                        scale: 1,
+                        x: 0,
+                        y: 0
+                    };
+                });
+                const dotTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                    const base = dotBaseTarget();
+                    if (!isPressed()) return base;
+                    return {
+                        ...base,
+                        scale: (base.scale ?? 1) * pressScale
+                    };
+                });
+                const glowOpacity = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                    if (context.disabled()) return 0;
+                    if (isHovered()) return 1;
+                    if (isSelected()) return 0.75;
+                    return 0;
+                });
+                const dotTransition = ()=>{
+                    if (reduceMotion) return {
+                        duration: 0
+                    };
+                    const anchorIndex = hoveredIndex() ?? selectedIndex();
+                    let delay = 0;
+                    if (null !== anchorIndex) {
+                        const anchor = COLORS[anchorIndex];
+                        const distance = Math.sqrt((item.offsetX - anchor.offsetX) ** 2 + (item.offsetY - anchor.offsetY) ** 2);
+                        delay = Math.min(MAX_WAVE_DELAY, distance / MAX_WAVE_DISTANCE * MAX_WAVE_DELAY);
+                    }
+                    if (isSelected()) return {
+                        duration: motionDurations.fast,
+                        easing: easeOutBack(1.25),
+                        delay
+                    };
+                    if (isHovered()) return {
+                        duration: motionDurations.fast,
+                        easing: motionEasings.out,
+                        delay
+                    };
+                    return {
+                        duration: motionDurations.base,
+                        easing: motionEasings.out,
+                        delay
+                    };
+                };
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+                    if (!motionRef) return;
+                    const target = dotTarget();
+                    const transition = dotTransition();
+                    dotControl?.stop();
+                    dotControl = runMotion(motionRef, readMotionState(motionRef), target, transition);
+                });
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+                    dotControl?.stop();
+                });
+                return (()=>{
+                    var _el$8 = ColorWheelFlower_tmpl$2(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.firstChild;
+                    _el$8.style.setProperty("transform", "translate(-50%, -50%)");
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
+                        motionRef = el;
+                    }, _el$9);
+                    _el$0.style.setProperty("top", "-5px");
+                    _el$0.style.setProperty("left", "-5px");
+                    _el$0.style.setProperty("right", "-5px");
+                    _el$0.style.setProperty("bottom", "-5px");
+                    _el$0.style.setProperty("background", "radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 65%)");
+                    _el$0.style.setProperty("transition", reduceMotion ? "none" : "opacity 200ms ease-out, box-shadow 200ms ease-out");
+                    _el$1.addEventListener("pointercancel", ()=>{
+                        if (!context.disabled()) setPressedIndex(null);
+                    });
+                    _el$1.addEventListener("pointerleave", ()=>{
+                        if (!context.disabled()) setPressedIndex(null);
+                    });
+                    _el$1.$$pointerup = ()=>{
+                        if (!context.disabled()) setPressedIndex(null);
+                    };
+                    _el$1.$$pointerdown = ()=>{
+                        if (!context.disabled()) setPressedIndex(index());
+                    };
+                    _el$1.addEventListener("blur", ()=>{
+                        if (!context.disabled()) setHoveredIndex(null);
+                    });
+                    _el$1.addEventListener("focus", ()=>{
+                        if (!context.disabled()) setHoveredIndex(index());
+                    });
+                    _el$1.addEventListener("mouseleave", ()=>{
+                        if (!context.disabled()) setHoveredIndex(null);
+                    });
+                    _el$1.addEventListener("mouseenter", ()=>{
+                        if (!context.disabled()) setHoveredIndex(index());
+                    });
+                    _el$1.$$click = ()=>handleDotClick(index());
+                    _el$1.style.setProperty("transition", reduceMotion ? "none" : "box-shadow 200ms ease-out");
+                    _el$10.style.setProperty("mix-blend-mode", "overlay");
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                        var _v$4 = `calc(50% + ${item.offsetX}px)`, _v$5 = `calc(50% + ${item.offsetY}px)`, _v$6 = glowOpacity(), _v$7 = `0 0 16px ${item.rgb}, 0 0 6px rgba(255,255,255,0.6)`, _v$8 = context.disabled() ? -1 : 0, _v$9 = clsx("w-full h-full rounded-full", "transition-shadow duration-200 ease-out", "focus:outline-none focus:ring-2 focus:ring-white/50", "relative z-10", {
+                            "cursor-not-allowed": context.disabled(),
+                            "cursor-pointer": !context.disabled()
+                        }), _v$0 = item.rgb, _v$1 = isSelected() ? "0 6px 16px rgba(0,0,0,0.35)" : isHovered() ? "0 4px 12px rgba(0,0,0,0.3)" : "0 2px 8px rgba(0,0,0,0.3)", _v$10 = `Select color ${item.rgb}`, _v$11 = selectedIndex() === index(), _v$12 = clsx("absolute inset-0 rounded-full border-2 border-white", "transition-opacity duration-300 ease-out"), _v$13 = selectedIndex() === index() ? "1" : "0";
+                        _v$4 !== _p$.e && (null != (_p$.e = _v$4) ? _el$8.style.setProperty("left", _v$4) : _el$8.style.removeProperty("left"));
+                        _v$5 !== _p$.t && (null != (_p$.t = _v$5) ? _el$8.style.setProperty("top", _v$5) : _el$8.style.removeProperty("top"));
+                        _v$6 !== _p$.a && (null != (_p$.a = _v$6) ? _el$0.style.setProperty("opacity", _v$6) : _el$0.style.removeProperty("opacity"));
+                        _v$7 !== _p$.o && (null != (_p$.o = _v$7) ? _el$0.style.setProperty("box-shadow", _v$7) : _el$0.style.removeProperty("box-shadow"));
+                        _v$8 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "tabindex", _p$.i = _v$8);
+                        _v$9 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$1, _p$.n = _v$9);
+                        _v$0 !== _p$.s && (null != (_p$.s = _v$0) ? _el$1.style.setProperty("background", _v$0) : _el$1.style.removeProperty("background"));
+                        _v$1 !== _p$.h && (null != (_p$.h = _v$1) ? _el$1.style.setProperty("box-shadow", _v$1) : _el$1.style.removeProperty("box-shadow"));
+                        _v$10 !== _p$.r && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "aria-label", _p$.r = _v$10);
+                        _v$11 !== _p$.d && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "aria-pressed", _p$.d = _v$11);
+                        _v$12 !== _p$.l && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$10, _p$.l = _v$12);
+                        _v$13 !== _p$.u && (null != (_p$.u = _v$13) ? _el$10.style.setProperty("opacity", _v$13) : _el$10.style.removeProperty("opacity"));
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0,
+                        o: void 0,
+                        i: void 0,
+                        n: void 0,
+                        s: void 0,
+                        h: void 0,
+                        r: void 0,
+                        d: void 0,
+                        l: void 0,
+                        u: void 0
+                    });
+                    return _el$8;
+                })();
+            }
+        }));
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = classes(), _v$2 = gradientStyle(), _v$3 = context.disabled() ? -1 : 0, _v$4 = lightness(), _v$5 = context.disabled(), _v$6 = thumbClasses(), _v$7 = `${lightness()}%`, _v$8 = `hsl(${context.color().hsl.h}, ${context.color().hsl.s}%, ${lightness()}%)`;
+            var _v$ = containerClasses(), _v$2 = outerRingBackground(), _v$3 = outerRingGlow();
             _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
-            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$.style.setProperty("background", _v$2) : _el$.style.removeProperty("background"));
-            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.a = _v$3);
-            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.o = _v$4);
-            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.i = _v$5);
-            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.n = _v$6);
-            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("left", _v$7) : _el$2.style.removeProperty("left"));
-            _v$8 !== _p$.h && (null != (_p$.h = _v$8) ? _el$2.style.setProperty("background-color", _v$8) : _el$2.style.removeProperty("background-color"));
+            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$4.style.setProperty("background", _v$2) : _el$4.style.removeProperty("background"));
+            _v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$4.style.setProperty("box-shadow", _v$3) : _el$4.style.removeProperty("box-shadow"));
             return _p$;
         }, {
             e: void 0,
             t: void 0,
-            a: void 0,
-            o: void 0,
-            i: void 0,
-            n: void 0,
-            s: void 0,
-            h: void 0
+            a: void 0
         });
         return _el$;
     })();
 };
-const LightnessSlider = LightnessSlider_LightnessSlider;
+const colorpicker_ColorWheelFlower = ColorWheelFlower;
 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "mousedown",
-    "keydown"
+    "click",
+    "pointerdown",
+    "pointerup"
 ]);
+const ColorPickerFlowerSelector_ColorPickerFlowerSelector = ()=>[
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorWheelFlower, {}),
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(LightnessSlider, {})
+    ];
+const ColorPickerFlowerSelector = ColorPickerFlowerSelector_ColorPickerFlowerSelector;
 var ColorSwatches_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), ColorSwatches_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button>");
 const ColorSwatches = (props)=>{
     const context = useColorPickerContext();
@@ -7168,117 +7724,6 @@ const colorpicker_ColorPreview = ColorPreview;
 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
     "click"
 ]);
-const immediateDriver = ({ to, onUpdate, onComplete })=>{
-    onUpdate(to);
-    onComplete?.();
-    return {
-        stop: ()=>{}
-    };
-};
-let activeDriver = immediateDriver;
-const setMotionDriver = (driver)=>{
-    activeDriver = driver;
-};
-const getMotionDriver = ()=>activeDriver;
-const easeOutCubic = (t)=>1 - Math.pow(1 - t, 3);
-const easeInCubic = (t)=>t * t * t;
-const easeInOutCubic = (t)=>t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-const resolveEase = (easing)=>{
-    if ("function" == typeof easing) return easing;
-    switch(easing){
-        case "ease-in":
-            return easeInCubic;
-        case "ease-in-out":
-            return easeInOutCubic;
-        case "linear":
-            return (t)=>t;
-        case "ease-out":
-        default:
-            return easeOutCubic;
-    }
-};
-const resolveDuration = (transition)=>Math.max(0, (transition?.duration ?? 0) * 1000);
-const resolveDelay = (transition)=>Math.max(0, (transition?.delay ?? 0) * 1000);
-const readOpacity = (el)=>{
-    const value = Number.parseFloat(getComputedStyle(el).opacity);
-    return Number.isFinite(value) ? value : 1;
-};
-const runMotion = (el, from, to, transition, onComplete)=>{
-    const duration = resolveDuration(transition);
-    const delay = resolveDelay(transition);
-    const ease = resolveEase(transition?.easing);
-    const driver = getMotionDriver();
-    const controls = [];
-    const shouldTransform = void 0 !== from.x || void 0 !== from.y || void 0 !== from.scale || void 0 !== to.x || void 0 !== to.y || void 0 !== to.scale;
-    const transformState = {
-        x: from.x ?? 0,
-        y: from.y ?? 0,
-        scale: from.scale ?? 1
-    };
-    const applyTransform = ()=>{
-        if (!shouldTransform) return;
-        el.style.transform = `translate3d(${transformState.x}px, ${transformState.y}px, 0) scale(${transformState.scale})`;
-    };
-    if (void 0 !== from.opacity) el.style.opacity = String(from.opacity);
-    applyTransform();
-    const animationTargets = Object.keys(to);
-    if (0 === animationTargets.length) {
-        onComplete?.();
-        return {
-            stop: ()=>{}
-        };
-    }
-    let remaining = animationTargets.length;
-    const handleComplete = ()=>{
-        remaining -= 1;
-        if (remaining <= 0) onComplete?.();
-    };
-    const start = ()=>{
-        animationTargets.forEach((key)=>{
-            if ("opacity" === key) {
-                const fromValue = from.opacity ?? (void 0 !== to.opacity ? readOpacity(el) : 1);
-                const control = driver({
-                    from: fromValue,
-                    to: to.opacity ?? fromValue,
-                    duration,
-                    ease,
-                    onUpdate: (latest)=>{
-                        el.style.opacity = String(latest);
-                    },
-                    onComplete: handleComplete
-                });
-                controls.push(control);
-                return;
-            }
-            const fromValue = "scale" === key ? from.scale ?? 1 : "x" === key ? from.x ?? 0 : from.y ?? 0;
-            const toValue = to[key] ?? fromValue;
-            const control = driver({
-                from: fromValue,
-                to: toValue,
-                duration,
-                ease,
-                onUpdate: (latest)=>{
-                    if (!shouldTransform) return;
-                    if ("x" === key) transformState.x = latest;
-                    if ("y" === key) transformState.y = latest;
-                    if ("scale" === key) transformState.scale = latest;
-                    applyTransform();
-                },
-                onComplete: handleComplete
-            });
-            controls.push(control);
-        });
-    };
-    let timeoutId = null;
-    if (delay > 0) timeoutId = window.setTimeout(start, delay);
-    else start();
-    return {
-        stop: ()=>{
-            if (null !== timeoutId) clearTimeout(timeoutId);
-            controls.forEach((control)=>control.stop());
-        }
-    };
-};
 var MotionDiv_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const MotionDiv_MotionDiv = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -7351,48 +7796,6 @@ const MotionDiv_MotionDiv = (props)=>{
     })();
 };
 const MotionDiv = MotionDiv_MotionDiv;
-const prefersReducedMotion = ()=>globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
-const motionDurations = {
-    route: 0.18,
-    routeAuth: 0.35,
-    fast: 0.2,
-    base: 0.3,
-    slow: 0.45
-};
-const motionEasings = {
-    out: "ease-out",
-    inOut: "ease-in-out"
-};
-const motionDistances = {
-    sm: 6,
-    md: 12,
-    lg: 20,
-    slideIn: 40
-};
-const defaultMotionTokens = {
-    durations: {
-        ...motionDurations
-    },
-    easings: {
-        ...motionEasings
-    },
-    distances: {
-        ...motionDistances
-    }
-};
-const mergeDefined = (base, overrides)=>{
-    const next = {
-        ...base
-    };
-    if (!overrides) return next;
-    for (const [key, value] of Object.entries(overrides))if (void 0 !== value) next[key] = value;
-    return next;
-};
-const mergeMotionTokens = (base, overrides)=>({
-        durations: mergeDefined(base.durations, overrides?.durations),
-        easings: mergeDefined(base.easings, overrides?.easings),
-        distances: mergeDefined(base.distances, overrides?.distances)
-    });
 const createMotionPresets = (tokens)=>{
     const durations = tokens.durations;
     const easings = tokens.easings;
@@ -7593,7 +7996,7 @@ const presets_resolvePreset = (name, options)=>{
     if (reduce) return noMotion;
     return motionPresets[name] ?? noMotion;
 };
-var ColorPicker_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex p-1 mb-3 bg-base-200 rounded-md"><button type=button>Gradient</button><button type=button>Wheel'), ColorPicker_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="pt-2 border-t border-base-300">'), ColorPicker_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=space-y-4>"), ColorPicker_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="fixed inset-0 z-40"aria-hidden=true>'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+var ColorPicker_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex p-1 mb-3 bg-base-200 rounded-md"><button type=button>Gradient</button><button type=button>Wheel</button><button type=button>Flower'), ColorPicker_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="pt-2 border-t border-base-300">'), ColorPicker_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=space-y-4>"), ColorPicker_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="fixed inset-0 z-40"aria-hidden=true>'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const DEFAULT_SWATCHES = [
     "#FF6B6B",
     "#4ECDC4",
@@ -7686,9 +8089,10 @@ const ColorPicker = (props)=>{
         }));
     };
     const ModeSwitcher = ()=>(()=>{
-            var _el$ = ColorPicker_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+            var _el$ = ColorPicker_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
             _el$2.$$click = ()=>setMode("picker");
             _el$3.$$click = ()=>setMode("wheel");
+            _el$4.$$click = ()=>setMode("flower");
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
                 var _v$ = clsx("flex-1 px-3 py-1 text-xs font-medium rounded-sm transition-colors", {
                     "bg-base-100 shadow-sm text-base-content": "picker" === mode(),
@@ -7696,13 +8100,18 @@ const ColorPicker = (props)=>{
                 }), _v$2 = clsx("flex-1 px-3 py-1 text-xs font-medium rounded-sm transition-colors", {
                     "bg-base-100 shadow-sm text-base-content": "wheel" === mode(),
                     "text-base-content/60 hover:text-base-content": "wheel" !== mode()
+                }), _v$3 = clsx("flex-1 px-3 py-1 text-xs font-medium rounded-sm transition-colors", {
+                    "bg-base-100 shadow-sm text-base-content": "flower" === mode(),
+                    "text-base-content/60 hover:text-base-content": "flower" !== mode()
                 });
                 _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
                 _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.t = _v$2);
+                _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.a = _v$3);
                 return _p$;
             }, {
                 e: void 0,
-                t: void 0
+                t: void 0,
+                a: void 0
             });
             return _el$;
         })();
@@ -7726,30 +8135,32 @@ const ColorPicker = (props)=>{
                 return [
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ModeSwitcher, {}),
                     (()=>{
-                        var _el$4 = ColorPicker_tmpl$3();
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                        var _el$5 = ColorPicker_tmpl$3();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                             get when () {
                                 return "picker" === mode();
                             },
                             get children () {
-                                return [
-                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_SaturationBrightness, {}),
-                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_HueSlider, {})
-                                ];
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorPickerGradientSelector, {});
                             }
                         }), null);
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                             get when () {
                                 return "wheel" === mode();
                             },
                             get children () {
-                                return [
-                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorWheel, {}),
-                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(LightnessSlider, {})
-                                ];
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorPickerWheelSelector, {});
+                            }
+                        }), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return "flower" === mode();
+                            },
+                            get children () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorPickerFlowerSelector, {});
                             }
                         }), null);
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                             get when () {
                                 return local.showAlpha;
                             },
@@ -7757,22 +8168,22 @@ const ColorPicker = (props)=>{
                                 return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(AlphaSlider, {});
                             }
                         }), null);
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorInput, {}), null);
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorInput, {}), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                             get when () {
                                 return local.swatches || DEFAULT_SWATCHES;
                             },
                             get children () {
-                                var _el$5 = ColorPicker_tmpl$2();
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorSwatches, {
+                                var _el$6 = ColorPicker_tmpl$2();
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorSwatches, {
                                     get swatches () {
                                         return local.swatches || DEFAULT_SWATCHES;
                                     }
                                 }));
-                                return _el$5;
+                                return _el$6;
                             }
                         }), null);
-                        return _el$4;
+                        return _el$5;
                     })()
                 ];
             }
@@ -7780,11 +8191,11 @@ const ColorPicker = (props)=>{
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorPickerContext.Provider, {
         value: contextValue,
         get children () {
-            var _el$6 = _tmpl$5();
-            _el$6.$$keydown = handleKeyDown;
+            var _el$7 = _tmpl$5();
+            _el$7.$$keydown = handleKeyDown;
             var _ref$ = containerRef;
-            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$6) : containerRef = _el$6;
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$7) : containerRef = _el$7;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
                 get ["class"] () {
                     return containerClasses();
                 },
@@ -7795,7 +8206,7 @@ const ColorPicker = (props)=>{
                     return local.style;
                 }
             }, others), false, true);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorPreview, {
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorPreview, {
                 get color () {
                     return color();
                 },
@@ -7807,7 +8218,7 @@ const ColorPicker = (props)=>{
                     return local["aria-label"] || "Color picker";
                 }
             }), null);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                 get when () {
                     return isOpen() && !local.disabled;
                 },
@@ -7815,17 +8226,17 @@ const ColorPicker = (props)=>{
                     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(PopoverContent, {});
                 }
             }), null);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                 get when () {
                     return isOpen() && !local.disabled;
                 },
                 get children () {
-                    var _el$7 = ColorPicker_tmpl$4();
-                    _el$7.$$click = ()=>setIsOpen(false);
-                    return _el$7;
+                    var _el$8 = ColorPicker_tmpl$4();
+                    _el$8.$$click = ()=>setIsOpen(false);
+                    return _el$8;
                 }
             }), null);
-            return _el$6;
+            return _el$7;
         }
     });
 };
@@ -8629,7 +9040,7 @@ const dividerStyles = cva("flex items-center whitespace-nowrap relative", {
         position: "center"
     }
 });
-const Divider_Divider = (props)=>{
+const Divider = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "text",
@@ -8664,8 +9075,8 @@ const Divider_Divider = (props)=>{
         children: content
     }));
 };
-const Divider = Divider_Divider;
-const divider = Divider;
+const divider_Divider = Divider;
+const divider = divider_Divider;
 var DockItem_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
 const DockItem_DockItem = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -14741,4 +15152,4 @@ const createRouteTransitionResolver = (options)=>{
         return fallback ?? noMotion;
     };
 };
-export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, colorpicker_ColorPicker as ColorPicker, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, EnhancedTable, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, MotionDiv, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, ToastStack_ToastStack as ToastStack, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, createMotionPresets, createMotionSystem, createPopmotionDriver, createRouteTransitionResolver, createStreamingTableStore, connectionstatus_ConnectionStatus as default, defaultMotionTokens, enablePopmotion, getMotionDriver, presets_getPreset as getPreset, immediateDriver, mergeMotionTokens, motionDistances, motionDurations, motionEasings, motionPresets, noMotion, prefersReducedMotion, presets_registerPreset as registerPreset, resolveEase, presets_resolvePreset as resolvePreset, routeTransition, runMotion, setMotionDriver, toastStore, useDesktop, useFormValidation };
+export { accordion_Accordion as Accordion, alert_Alert as Alert, AlphaSlider, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, colorpicker_ColorInput as ColorInput, colorpicker_ColorPicker as ColorPicker, ColorPickerContext, ColorPickerFlowerSelector, colorpicker_ColorPickerGradientSelector as ColorPickerGradientSelector, ColorPickerWheelSelector, colorpicker_ColorPreview as ColorPreview, colorpicker_ColorSwatches as ColorSwatches, ColorWheel, colorpicker_ColorWheelFlower as ColorWheelFlower, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, EnhancedTable, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, colorpicker_HueSlider as HueSlider, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, LightnessSlider, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, MotionDiv, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, colorpicker_SaturationBrightness as SaturationBrightness, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, ToastStack_ToastStack as ToastStack, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, createMotionPresets, createMotionSystem, createPopmotionDriver, createRouteTransitionResolver, createStreamingTableStore, connectionstatus_ConnectionStatus as default, defaultMotionTokens, enablePopmotion, getMotionDriver, presets_getPreset as getPreset, immediateDriver, mergeMotionTokens, motionDistances, motionDurations, motionEasings, motionPresets, noMotion, prefersReducedMotion, presets_registerPreset as registerPreset, resolveEase, presets_resolvePreset as resolvePreset, routeTransition, runMotion, setMotionDriver, toastStore, useColorPickerContext, useDesktop, useFormValidation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.110",
+  "version": "0.0.112",
   "author": "pathscale",
   "repository": {
     "type": "git",