@pathscale/ui 0.0.109 → 0.0.111

package/dist/index.js

@@ -4794,7 +4794,7 @@ const xt = globalThis[ot], Se = {
     cloneNode: 1,
     children: 1,
     key: 1
-}, q = {}, rt = [];
+}, cally_q = {}, rt = [];
 class at extends Text {
 }
 const Ce = A("atomico/id"), $ = A("atomico/type"), X = A("atomico/ref"), zt = A("atomico/vnode"), Pe = ()=>{};
@@ -4802,7 +4802,7 @@ function Ne(e, t, n) {
     return Kt(this, e, t, n);
 }
 const Ht = (e, t, ...n)=>{
-    const s = t || q;
+    const s = t || cally_q;
     let { children: r } = s;
     if (r = r ?? (n.length ? n : rt), e === Pe) return r;
     const o = e ? e instanceof Node ? 1 : e.prototype instanceof HTMLElement && 2 : 0;
@@ -4831,9 +4831,9 @@ function Kt(e, t, n = Ce, s, r) {
     (e || !t) && (r = r || "svg" == e.type, o = "host" != e.type && (1 == e.raw ? (t && e.clone ? t[X] : t) != e.type : 2 == e.raw ? !(t instanceof e.type) : t ? t[X] || t.localName != e.type : !t), o && null != e.type && (1 == e.raw && e.clone ? (s = !0, t = e.type.cloneNode(!0), t[X] = e.type) : t = 1 == e.raw ? e.type : 2 == e.raw ? new e.type() : r ? document.createElementNS("http://www.w3.org/2000/svg", e.type) : document.createElement(e.type, e.is ? {
         is: e.is
     } : void 0)));
-    const a = t[n] ? t[n] : q, { vnode: u = q, cycle: i = 0 } = a;
+    const a = t[n] ? t[n] : cally_q, { vnode: u = cally_q, cycle: i = 0 } = a;
     let { fragment: l, handlers: c } = a;
-    const { children: d = rt, props: f = q } = u;
+    const { children: d = rt, props: f = cally_q } = u;
     if (c = o ? {} : c || {}, e.static && !o) return t;
     if (e.shadow && !t.shadowRoot && t.attachShadow({
         mode: "open",
@@ -4992,9 +4992,9 @@ const Re = Ht("host", {
         }
     });
     return t.value = e, t;
-}, p = (e, t, n)=>(null == t ? t = {
+}, cally_p = (e, t, n)=>(null == t ? t = {
         key: n
-    } : t.key = n, Ht(e, t)), I = p, Wt = H`*,*:before,*:after{box-sizing:border-box}button{padding:0;touch-action:manipulation;cursor:pointer;user-select:none}`, Jt = H`.vh{position:absolute;transform:scale(0)}`;
+    } : t.key = n, Ht(e, t)), I = cally_p, Wt = H`*,*:before,*:after{box-sizing:border-box}button{padding:0;touch-action:manipulation;cursor:pointer;user-select:none}`, Jt = H`.vh{position:absolute;transform:scale(0)}`;
 function lt() {
     const e = /* @__PURE__ */ new Date();
     return new cally_v(e.getFullYear(), e.getMonth() + 1, e.getDate());
@@ -5284,7 +5284,7 @@ const We = (e, t)=>(t + e) % 7, Je = cally_j((e)=>{
         shadowDom: !0,
         focus: r,
         children: [
-            /* @__PURE__ */ p("div", {
+            /* @__PURE__ */ cally_p("div", {
                 id: "h",
                 part: "heading",
                 children: s.formatter.format(w(s.yearMonth))
@@ -5294,18 +5294,18 @@ const We = (e, t)=>(t + e) % 7, Je = cally_j((e)=>{
                 "aria-labelledby": "h",
                 part: "table",
                 children: [
-                    /* @__PURE__ */ p("thead", {
-                        children: /* @__PURE__ */ p("tr", {
+                    /* @__PURE__ */ cally_p("thead", {
+                        children: /* @__PURE__ */ cally_p("tr", {
                             part: "tr head",
                             children: s.daysLong.map((o, a)=>/* @__PURE__ */ I("th", {
                                     part: `th day day-${We(t.firstDayOfWeek, a)}`,
                                     scope: "col",
                                     children: [
-                                        /* @__PURE__ */ p("span", {
+                                        /* @__PURE__ */ cally_p("span", {
                                             class: "vh",
                                             children: o
                                         }),
-                                        /* @__PURE__ */ p("span", {
+                                        /* @__PURE__ */ cally_p("span", {
                                             "aria-hidden": "true",
                                             children: s.daysVisible[a]
                                         })
@@ -5313,14 +5313,14 @@ const We = (e, t)=>(t + e) % 7, Je = cally_j((e)=>{
                                 }))
                         })
                     }),
-                    /* @__PURE__ */ p("tbody", {
-                        children: s.weeks.map((o, a)=>/* @__PURE__ */ p("tr", {
+                    /* @__PURE__ */ cally_p("tbody", {
+                        children: s.weeks.map((o, a)=>/* @__PURE__ */ cally_p("tr", {
                                 part: "tr week",
                                 children: o.map((u, i)=>{
                                     const l = s.getDayProps(u);
-                                    return /* @__PURE__ */ p("td", {
+                                    return /* @__PURE__ */ cally_p("td", {
                                         part: "td",
-                                        children: l && /* @__PURE__ */ p("button", {
+                                        children: l && /* @__PURE__ */ cally_p("button", {
                                             ...l,
                                             children: u.day
                                         })
@@ -5347,11 +5347,11 @@ const We = (e, t)=>(t + e) % 7, Je = cally_j((e)=>{
 });
 customElements.define("calendar-month", Je);
 function kt(e) {
-    return /* @__PURE__ */ p("button", {
+    return /* @__PURE__ */ cally_p("button", {
         part: `button ${e.name} ${e.onclick ? "" : "disabled"}`,
         onclick: e.onclick,
         "aria-disabled": e.onclick ? null : "true",
-        children: /* @__PURE__ */ p("slot", {
+        children: /* @__PURE__ */ cally_p("slot", {
             name: e.name,
             children: e.children
         })
@@ -5364,7 +5364,7 @@ function dt(e) {
         "aria-labelledby": "h",
         part: "container",
         children: [
-            /* @__PURE__ */ p("div", {
+            /* @__PURE__ */ cally_p("div", {
                 id: "h",
                 class: "vh",
                 "aria-live": "polite",
@@ -5374,32 +5374,32 @@ function dt(e) {
             /* @__PURE__ */ I("div", {
                 part: "header",
                 children: [
-                    /* @__PURE__ */ p(kt, {
+                    /* @__PURE__ */ cally_p(kt, {
                         name: "previous",
                         onclick: e.previous,
                         children: "Previous"
                     }),
-                    /* @__PURE__ */ p("slot", {
+                    /* @__PURE__ */ cally_p("slot", {
                         part: "heading",
                         name: "heading",
-                        children: /* @__PURE__ */ p("div", {
+                        children: /* @__PURE__ */ cally_p("div", {
                             "aria-hidden": "true",
                             children: e.format.formatRange(t, n)
                         })
                     }),
-                    /* @__PURE__ */ p(kt, {
+                    /* @__PURE__ */ cally_p(kt, {
                         name: "next",
                         onclick: e.next,
                         children: "Next"
                     })
                 ]
             }),
-            /* @__PURE__ */ p(ft, {
+            /* @__PURE__ */ cally_p(ft, {
                 value: e,
                 onselectday: e.onSelect,
                 onfocusday: e.onFocus,
                 onhoverday: e.onHover,
-                children: /* @__PURE__ */ p("slot", {})
+                children: /* @__PURE__ */ cally_p("slot", {})
             })
         ]
     });
@@ -5553,10 +5553,10 @@ const Qe = cally_j((e)=>{
     function a(u) {
         n(u.detail), o.dispatch();
     }
-    return /* @__PURE__ */ p("host", {
+    return /* @__PURE__ */ cally_p("host", {
         shadowDom: !0,
         focus: o.focus,
-        children: /* @__PURE__ */ p(dt, {
+        children: /* @__PURE__ */ cally_p(dt, {
             ...e,
             ...o,
             type: "date",
@@ -5595,10 +5595,10 @@ const Mt = (e, t)=>cally_v.compare(e, t) < 0 ? [
         y.stopPropagation(), i ? (n(Mt(i, h)), l(void 0), u(w(h)), o.dispatch()) : (l(h), a(w(h)));
     }
     const g = i ? Mt(i, c ?? i) : t;
-    return /* @__PURE__ */ p("host", {
+    return /* @__PURE__ */ cally_p("host", {
         shadowDom: !0,
         focus: o.focus,
-        children: /* @__PURE__ */ p(dt, {
+        children: /* @__PURE__ */ cally_p(dt, {
             ...e,
             ...o,
             type: "range",
@@ -5631,10 +5631,10 @@ const tn = cally_j((e)=>{
         ], l = t.findIndex((c)=>c.equals(u.detail));
         l < 0 ? i.push(u.detail) : i.splice(l, 1), n(i), o.dispatch();
     }
-    return /* @__PURE__ */ p("host", {
+    return /* @__PURE__ */ cally_p("host", {
         shadowDom: !0,
         focus: o.focus,
-        children: /* @__PURE__ */ p(dt, {
+        children: /* @__PURE__ */ cally_p(dt, {
             ...e,
             ...o,
             type: "multi",
@@ -6250,292 +6250,2206 @@ const Checkbox = (props)=>{
     })();
 };
 const checkbox_Checkbox = Checkbox;
-var CodeMockup_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const CodeMockup = (props)=>{
-    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "class",
-        "className",
-        "children",
-        "dataTheme",
-        "aria-label"
-    ]);
-    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("mockup-code w-full", local.class, local.className));
-    return (()=>{
-        var _el$ = CodeMockup_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get ["class"] () {
-                return classes();
+const ColorPickerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)(void 0);
+function useColorPickerContext() {
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(ColorPickerContext);
+    if (!context) throw new Error("useColorPickerContext must be used within a ColorPickerContext.Provider");
+    return context;
+}
+function hexToRgb(hex) {
+    const cleaned = hex.replace(/^#/, "");
+    if (3 === cleaned.length) {
+        const r = Number.parseInt(cleaned[0] + cleaned[0], 16);
+        const g = Number.parseInt(cleaned[1] + cleaned[1], 16);
+        const b = Number.parseInt(cleaned[2] + cleaned[2], 16);
+        return {
+            r,
+            g,
+            b
+        };
+    }
+    if (6 === cleaned.length) {
+        const r = Number.parseInt(cleaned.substring(0, 2), 16);
+        const g = Number.parseInt(cleaned.substring(2, 4), 16);
+        const b = Number.parseInt(cleaned.substring(4, 6), 16);
+        return {
+            r,
+            g,
+            b
+        };
+    }
+    return null;
+}
+function rgbToHex(r, g, b) {
+    const toHex = (n)=>{
+        const hex = Math.max(0, Math.min(255, Math.round(n))).toString(16);
+        return 1 === hex.length ? `0${hex}` : hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function rgbToHsl(r, g, b) {
+    const rNorm = r / 255;
+    const gNorm = g / 255;
+    const bNorm = b / 255;
+    const max = Math.max(rNorm, gNorm, bNorm);
+    const min = Math.min(rNorm, gNorm, bNorm);
+    const delta = max - min;
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (0 !== delta) {
+        s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+        switch(max){
+            case rNorm:
+                h = ((gNorm - bNorm) / delta + (gNorm < bNorm ? 6 : 0)) / 6;
+                break;
+            case gNorm:
+                h = ((bNorm - rNorm) / delta + 2) / 6;
+                break;
+            case bNorm:
+                h = ((rNorm - gNorm) / delta + 4) / 6;
+                break;
+        }
+    }
+    return {
+        h: Math.round(360 * h),
+        s: Math.round(100 * s),
+        l: Math.round(100 * l)
+    };
+}
+function hslToRgb(h, s, l) {
+    const hNorm = h / 360;
+    const sNorm = s / 100;
+    const lNorm = l / 100;
+    const hue2rgb = (p, q, t)=>{
+        let tNorm = t;
+        if (tNorm < 0) tNorm += 1;
+        if (tNorm > 1) tNorm -= 1;
+        if (tNorm < 1 / 6) return p + (q - p) * 6 * tNorm;
+        if (tNorm < 0.5) return q;
+        if (tNorm < 2 / 3) return p + (q - p) * (2 / 3 - tNorm) * 6;
+        return p;
+    };
+    if (0 === sNorm) {
+        const gray = Math.round(255 * lNorm);
+        return {
+            r: gray,
+            g: gray,
+            b: gray
+        };
+    }
+    const q = lNorm < 0.5 ? lNorm * (1 + sNorm) : lNorm + sNorm - lNorm * sNorm;
+    const p = 2 * lNorm - q;
+    return {
+        r: Math.round(255 * hue2rgb(p, q, hNorm + 1 / 3)),
+        g: Math.round(255 * hue2rgb(p, q, hNorm)),
+        b: Math.round(255 * hue2rgb(p, q, hNorm - 1 / 3))
+    };
+}
+function parseColor(color) {
+    const trimmed = color.trim();
+    if (trimmed.startsWith("#")) {
+        const rgb = hexToRgb(trimmed);
+        if (!rgb) return null;
+        const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+        return {
+            rgb: {
+                ...rgb,
+                a: 1
             },
-            get ["data-theme"] () {
-                return local.dataTheme;
+            hsl: {
+                ...hsl,
+                a: 1
             },
-            get ["aria-label"] () {
-                return local["aria-label"] || "Code mockup";
-            }
-        }, rest), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
-        return _el$;
-    })();
-};
-const codemockup_CodeMockup = CodeMockup;
-var CodeMockupLine_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<pre><code>");
-const CodeMockupLine_CodeMockupLine = (props)=>{
-    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
-        dataPrefix: ">",
-        status: null,
-        class: ""
-    }, props);
-    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
-        "dataPrefix",
-        "status",
-        "innerProps",
-        "innerRef",
-        "class",
-        "children",
-        "dataTheme"
-    ]);
-    const statusClass = ()=>twMerge(dist_clsx({
-            "bg-info": "info" === local.status,
-            "bg-success": "success" === local.status,
-            "bg-warning": "warning" === local.status,
-            "bg-error": "error" === local.status,
-            "text-info-content": "info" === local.status,
-            "text-success-content": "success" === local.status,
-            "text-warning-content": "warning" === local.status,
-            "text-error-content": "error" === local.status
-        }), local.class);
-    const prefix = ()=>false !== local.dataPrefix ? local.dataPrefix || ">" : void 0;
-    return (()=>{
-        var _el$ = CodeMockupLine_tmpl$(), _el$2 = _el$.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get ["class"] () {
-                return statusClass();
+            hex: trimmed
+        };
+    }
+    const rgbMatch = trimmed.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/);
+    if (rgbMatch) {
+        const r = Number.parseInt(rgbMatch[1], 10);
+        const g = Number.parseInt(rgbMatch[2], 10);
+        const b = Number.parseInt(rgbMatch[3], 10);
+        const a = rgbMatch[4] ? Number.parseFloat(rgbMatch[4]) : 1;
+        const hsl = rgbToHsl(r, g, b);
+        return {
+            rgb: {
+                r,
+                g,
+                b,
+                a
             },
-            get ["data-prefix"] () {
-                return prefix();
+            hsl: {
+                ...hsl,
+                a
             },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            }
-        }, rest), false, true);
-        var _ref$ = local.innerRef;
-        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$2) : local.innerRef = _el$2;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>local.innerProps), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
-        return _el$;
-    })();
-};
-const CodeMockupLine = CodeMockupLine_CodeMockupLine;
-var CollapseDetails_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<details>");
-function CollapseDetails_classesFn({ className, icon, open }) {
-    return twMerge("collapse", className, clsx({
-        "collapse-arrow": "arrow" === icon,
-        "collapse-plus": "plus" === icon,
-        "collapse-open": true === open,
-        "collapse-close": false === open
-    }));
+            hex: rgbToHex(r, g, b)
+        };
+    }
+    const hslMatch = trimmed.match(/hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+)\s*)?\)/);
+    if (hslMatch) {
+        const h = Number.parseFloat(hslMatch[1]);
+        const s = Number.parseFloat(hslMatch[2]);
+        const l = Number.parseFloat(hslMatch[3]);
+        const a = hslMatch[4] ? Number.parseFloat(hslMatch[4]) : 1;
+        const rgb = hslToRgb(h, s, l);
+        return {
+            rgb: {
+                ...rgb,
+                a
+            },
+            hsl: {
+                h,
+                s,
+                l,
+                a
+            },
+            hex: rgbToHex(rgb.r, rgb.g, rgb.b)
+        };
+    }
+    return null;
 }
-function CollapseDetails(props) {
-    const classes = CollapseDetails_classesFn({
-        className: props.class,
-        icon: props.icon,
-        open: props.open
+function formatColor(color, format) {
+    switch(format){
+        case "hex":
+            return color.hex;
+        case "rgb":
+            return `rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`;
+        case "rgba":
+            return `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`;
+        case "hsl":
+            return `hsl(${color.hsl.h}, ${color.hsl.s}%, ${color.hsl.l}%)`;
+        case "hsla":
+            return `hsla(${color.hsl.h}, ${color.hsl.s}%, ${color.hsl.l}%, ${color.hsl.a})`;
+        default:
+            return color.hex;
+    }
+}
+function setAlpha(color, alpha) {
+    const clampedAlpha = Math.max(0, Math.min(1, alpha));
+    return {
+        ...color,
+        rgb: {
+            ...color.rgb,
+            a: clampedAlpha
+        },
+        hsl: {
+            ...color.hsl,
+            a: clampedAlpha
+        }
+    };
+}
+function createColorFromHsl(h, s, l, a = 1) {
+    const rgb = hslToRgb(h, s, l);
+    return {
+        rgb: {
+            ...rgb,
+            a
+        },
+        hsl: {
+            h,
+            s,
+            l,
+            a
+        },
+        hex: rgbToHex(rgb.r, rgb.g, rgb.b)
+    };
+}
+function getDefaultColor() {
+    return {
+        rgb: {
+            r: 255,
+            g: 255,
+            b: 255,
+            a: 1
+        },
+        hsl: {
+            h: 0,
+            s: 0,
+            l: 100,
+            a: 1
+        },
+        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$ = CollapseDetails_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
-            class: classes,
-            get open () {
-                return props.open;
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        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$;
     })();
-}
-CollapseDetails.Title = Summary;
-var Collapse_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), Collapse_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input type=checkbox class=peer>");
-const Collapse_classesFn = ({ className, icon, open })=>twMerge("collapse", className, clsx({
-        "collapse-arrow": "arrow" === icon,
-        "collapse-plus": "plus" === icon,
-        "collapse-open": true === open,
-        "collapse-close": false === open
-    }));
-const Collapse = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "checkbox",
-        "icon",
-        "open",
-        "onOpen",
-        "onClose",
-        "onToggle",
-        "dataTheme",
-        "class",
-        "className",
-        "style"
-    ]);
-    const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
-    const isControlled = void 0 !== local.open;
-    const isChecked = ()=>isControlled ? local.open : internalOpen();
-    const handleCheckboxChange = ()=>{
-        if (local.onToggle) local.onToggle();
-        if (isControlled) {
-            if (local.open && local.onClose) local.onClose();
-            if (!local.open && local.onOpen) local.onOpen();
-        } else {
-            const next = !internalOpen();
-            setInternalOpen(next);
-            if (next && local.onOpen) local.onOpen();
-            if (!next && local.onClose) local.onClose();
-        }
+};
+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();
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let containerRef;
+    let cursorRef;
+    const saturation = ()=>context.color().hsl.s;
+    const brightness = ()=>100 - context.color().hsl.l;
+    const updateColor = (x, y)=>{
+        if (!containerRef || context.disabled()) return;
+        const rect = containerRef.getBoundingClientRect();
+        const s = Math.max(0, Math.min(100, (x - rect.left) / rect.width * 100));
+        const l = Math.max(0, Math.min(100, 100 - (y - rect.top) / rect.height * 100));
+        const newColor = createColorFromHsl(context.color().hsl.h, s, l, context.color().hsl.a);
+        context.onChange(newColor);
     };
-    const handleBlur = (e)=>{
-        if (!local.checkbox) {
-            local.onToggle?.();
-            local.onClose?.();
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateColor(e.clientX, e.clientY);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateColor(e.clientX, e.clientY);
+            e.preventDefault();
         }
-        if ("function" == typeof others.onBlur) others.onBlur(e);
     };
-    const handleFocus = (e)=>{
-        if (!local.checkbox) {
-            local.onToggle?.();
-            local.onOpen?.();
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
+    };
+    const handleKeyDown = (e)=>{
+        if (context.disabled()) return;
+        const step = e.shiftKey ? 10 : 1;
+        let s = saturation();
+        let l = 100 - brightness();
+        switch(e.key){
+            case "ArrowLeft":
+                s = Math.max(0, s - step);
+                e.preventDefault();
+                break;
+            case "ArrowRight":
+                s = Math.min(100, s + step);
+                e.preventDefault();
+                break;
+            case "ArrowUp":
+                l = Math.min(100, l + step);
+                e.preventDefault();
+                break;
+            case "ArrowDown":
+                l = Math.max(0, l - step);
+                e.preventDefault();
+                break;
+            default:
+                return;
         }
-        if ("function" == typeof others.onFocus) others.onFocus(e);
+        const newColor = createColorFromHsl(context.color().hsl.h, s, l, context.color().hsl.a);
+        context.onChange(newColor);
     };
-    return (()=>{
-        var _el$ = Collapse_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get ["aria-expanded"] () {
-                return local.open;
-            }
-        }, others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return Collapse_classesFn({
-                    className: twMerge(local.class, local.className),
-                    icon: local.icon,
-                    open: local.open
-                });
-            },
-            get style () {
-                return local.style;
-            },
-            get tabIndex () {
-                return local.checkbox || isChecked() ? void 0 : 0;
-            },
-            onBlur: handleBlur,
-            onFocus: handleFocus
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
-            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.checkbox);
-            return ()=>_c$() && (()=>{
-                    var _el$2 = Collapse_tmpl$2();
-                    _el$2.addEventListener("change", handleCheckboxChange);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>el, _el$2);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "tabindex", isChecked() ? 0 : void 0));
-                    return _el$2;
-                })();
-        })(), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children, null);
+    (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-48 rounded cursor-crosshair select-none", clsx({
+            "opacity-50 cursor-not-allowed": context.disabled()
+        }), props.class, props.className);
+    const cursorClasses = ()=>twMerge("absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-1/2", clsx({
+            "ring-2 ring-primary": isDragging()
+        }));
+    return (()=>{
+        var _el$ = SaturationBrightness_tmpl$(), _el$2 = _el$.firstChild;
+        _el$.$$keydown = handleKeyDown;
+        _el$.$$mousedown = handleMouseDown;
+        var _ref$ = containerRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
+        var _ref$2 = cursorRef;
+        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$2) : cursorRef = _el$2;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = `
+          linear-gradient(to top, #000, transparent),
+          linear-gradient(to right, #fff, hsl(${context.color().hsl.h}, 100%, 50%))
+        `, _v$3 = context.disabled() ? -1 : 0, _v$4 = saturation(), _v$5 = context.disabled(), _v$6 = cursorClasses(), _v$7 = `${saturation()}%`, _v$8 = `${brightness()}%`;
+            _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("top", _v$8) : _el$2.style.removeProperty("top"));
+            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 collapse_Collapse = Object.assign(Collapse, {
-    Details: CollapseDetails,
-    Title: CollapseTitle,
-    Content: CollapseContent
-});
-const breakpoints = [
-    "base",
-    "sm",
-    "md",
-    "lg",
-    "xl"
-];
-function isJSXElement(node) {
-    return "object" == typeof node && null !== node;
-}
-function wrapWithElementIfInvalid({ node, wrapper = "div", className = "" }) {
-    null == node || "string" == typeof node || "number" == typeof node || isJSXElement(node);
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, {
-        component: wrapper,
-        class: className,
-        children: node
+const colorpicker_SaturationBrightness = SaturationBrightness;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown",
+    "keydown"
+]);
+var HueSlider_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=slider aria-label=Hue aria-valuemin=0 aria-valuemax=360><div>");
+const HueSlider = (props)=>{
+    const context = useColorPickerContext();
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let sliderRef;
+    const hue = ()=>context.color().hsl.h;
+    const updateHue = (clientX)=>{
+        if (!sliderRef || context.disabled()) return;
+        const rect = sliderRef.getBoundingClientRect();
+        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const newHue = Math.round(360 * percentage);
+        const newColor = createColorFromHsl(newHue, context.color().hsl.s, context.color().hsl.l, context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateHue(e.clientX);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateHue(e.clientX);
+            e.preventDefault();
+        }
+    };
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
+    };
+    const handleKeyDown = (e)=>{
+        if (context.disabled()) return;
+        const step = e.shiftKey ? 10 : 1;
+        let newHue = hue();
+        switch(e.key){
+            case "ArrowLeft":
+            case "ArrowDown":
+                newHue = (hue() - step + 360) % 360;
+                e.preventDefault();
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                newHue = (hue() + step) % 360;
+                e.preventDefault();
+                break;
+            default:
+                return;
+        }
+        const newColor = createColorFromHsl(newHue, context.color().hsl.s, context.color().hsl.l, context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
     });
-}
-function mapResponsiveProp(prop, classMap) {
-    if (void 0 === prop) return [];
-    if ("string" == typeof prop || "boolean" == typeof prop) return [
-        classMap[String(prop)]
-    ];
-    return breakpoints.flatMap((bp)=>{
-        const value = prop[bp];
-        if (void 0 === value) return [];
-        const className = classMap[String(value)];
-        return "base" === bp ? [
-            className
-        ] : [
-            `${bp}:${className}`
-        ];
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
     });
-}
-function useDesktop(breakpoint = 1024) {
-    const [isDesktop, setIsDesktop] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
-    const checkIfDesktop = ()=>{
-        const width = window.innerWidth;
-        setIsDesktop(width >= breakpoint);
+    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()
+        }));
+    return (()=>{
+        var _el$ = HueSlider_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$;
+        _el$.style.setProperty("background", "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = context.disabled() ? -1 : 0, _v$3 = hue(), _v$4 = context.disabled(), _v$5 = thumbClasses(), _v$6 = `${hue() / 360 * 100}%`, _v$7 = `hsl(${hue()}, 100%, 50%)`;
+            _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 && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.i = _v$5);
+            _v$6 !== _p$.n && (null != (_p$.n = _v$6) ? _el$2.style.setProperty("left", _v$6) : _el$2.style.removeProperty("left"));
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("background-color", _v$7) : _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
+        });
+        return _el$;
+    })();
+};
+const colorpicker_HueSlider = HueSlider;
+(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();
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let containerRef;
+    let cursorRef;
+    const hue = ()=>context.color().hsl.h;
+    const saturation = ()=>context.color().hsl.s;
+    const lightness = ()=>context.color().hsl.l;
+    const updateColor = (x, y)=>{
+        if (!containerRef || context.disabled()) return;
+        const rect = containerRef.getBoundingClientRect();
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const dx = x - rect.left - centerX;
+        const dy = y - rect.top - centerY;
+        let angle = 180 / Math.PI * Math.atan2(dy, dx) + 90;
+        if (angle < 0) angle += 360;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const radius = rect.width / 2;
+        const s = Math.min(100, distance / radius * 100);
+        const newColor = createColorFromHsl(Math.round(angle), Math.round(s), lightness(), context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateColor(e.clientX, e.clientY);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateColor(e.clientX, e.clientY);
+            e.preventDefault();
+        }
+    };
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
     };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
-        checkIfDesktop();
-        window.addEventListener("resize", checkIfDesktop);
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
     });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        window.removeEventListener("resize", checkIfDesktop);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
     });
-    return isDesktop;
-}
-const directionMap = {
-    row: "flex-row",
-    col: "flex-col",
-    "row-reverse": "flex-row-reverse",
-    "col-reverse": "flex-col-reverse"
+    const classes = ()=>twMerge("relative w-48 h-48 rounded-full cursor-crosshair select-none overflow-hidden mx-auto", clsx({
+            "opacity-50 cursor-not-allowed": context.disabled()
+        }), props.class, props.className);
+    const cursorPosition = ()=>{
+        const hRad = (hue() - 90) * (Math.PI / 180);
+        const sNorm = saturation() / 100;
+        const x = 50 + 50 * sNorm * Math.cos(hRad);
+        const y = 50 + 50 * sNorm * Math.sin(hRad);
+        return {
+            x,
+            y
+        };
+    };
+    const cursorClasses = ()=>twMerge("absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-1/2", clsx({
+            "ring-2 ring-primary": isDragging()
+        }));
+    return (()=>{
+        var _el$ = ColorWheel_tmpl$(), _el$2 = _el$.firstChild;
+        _el$.$$mousedown = handleMouseDown;
+        var _ref$ = containerRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
+        _el$.style.setProperty("background", "\n          radial-gradient(circle, white 0%, transparent 100%),\n          conic-gradient(\n            from 0deg,\n            hsl(0, 100%, 50%),\n            hsl(60, 100%, 50%),\n            hsl(120, 100%, 50%),\n            hsl(180, 100%, 50%),\n            hsl(240, 100%, 50%),\n            hsl(300, 100%, 50%),\n            hsl(360, 100%, 50%)\n          )\n        ");
+        var _ref$2 = cursorRef;
+        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$2) : cursorRef = _el$2;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = context.disabled() ? -1 : 0, _v$3 = `Hue ${Math.round(hue())}deg, Saturation ${Math.round(saturation())}%`, _v$4 = context.disabled(), _v$5 = cursorClasses(), _v$6 = `${cursorPosition().x}%`, _v$7 = `${cursorPosition().y}%`, _v$8 = `hsl(${hue()}, ${saturation()}%, 50%)`;
+            _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-valuetext", _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 && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.i = _v$5);
+            _v$6 !== _p$.n && (null != (_p$.n = _v$6) ? _el$2.style.setProperty("left", _v$6) : _el$2.style.removeProperty("left"));
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("top", _v$7) : _el$2.style.removeProperty("top"));
+            _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 justifyMap = {
-    start: "justify-start",
-    center: "justify-center",
-    end: "justify-end",
-    between: "justify-between",
-    around: "justify-around",
-    evenly: "justify-evenly"
+const ColorWheel = ColorWheel_ColorWheel;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown"
+]);
+var LightnessSlider_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=slider aria-label=Lightness aria-valuemin=0 aria-valuemax=100><div>");
+const LightnessSlider_LightnessSlider = (props)=>{
+    const context = useColorPickerContext();
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let sliderRef;
+    const lightness = ()=>context.color().hsl.l;
+    const updateLightness = (clientX)=>{
+        if (!sliderRef || context.disabled()) return;
+        const rect = sliderRef.getBoundingClientRect();
+        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const newLightness = Math.round(100 * percentage);
+        const newColor = createColorFromHsl(context.color().hsl.h, context.color().hsl.s, newLightness, context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateLightness(e.clientX);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateLightness(e.clientX);
+            e.preventDefault();
+        }
+    };
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
+    };
+    const handleKeyDown = (e)=>{
+        if (context.disabled()) return;
+        const step = e.shiftKey ? 10 : 1;
+        let newL = lightness();
+        switch(e.key){
+            case "ArrowLeft":
+            case "ArrowDown":
+                newL = Math.max(0, newL - step);
+                e.preventDefault();
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                newL = Math.min(100, newL + step);
+                e.preventDefault();
+                break;
+            default:
+                return;
+        }
+        const newColor = createColorFromHsl(context.color().hsl.h, context.color().hsl.s, newL, context.color().hsl.a);
+        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", 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 alignMap = {
-    start: "items-start",
-    center: "items-center",
-    end: "items-end",
-    stretch: "items-stretch",
-    baseline: "items-baseline"
+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 wrapMap = {
-    wrap: "flex-wrap",
-    nowrap: "flex-nowrap",
-    "wrap-reverse": "flex-wrap-reverse"
+const motionEasings = {
+    out: "ease-out",
+    inOut: "ease-in-out"
 };
-const gapMap = {
-    none: "gap-0",
-    sm: "gap-2",
-    md: "gap-4",
-    lg: "gap-6",
-    xl: "gap-8"
+const motionDistances = {
+    sm: 6,
+    md: 12,
+    lg: 20,
+    slideIn: 40
 };
-const gapXMap = {
-    none: "gap-x-0",
-    sm: "gap-x-2",
-    md: "gap-x-4",
+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="w-[32px] h-[32px]"><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 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 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 reduceMotion = prefersReducedMotion();
+    const dotTransition = reduceMotion ? {
+        duration: 0
+    } : {
+        duration: motionDurations.fast,
+        easing: motionEasings.out
+    };
+    const ringTransition = reduceMotion ? {
+        duration: 0
+    } : {
+        duration: motionDurations.base,
+        easing: motionEasings.out
+    };
+    const hoverLift = reduceMotion ? 0 : motionDistances.sm / 2;
+    const selectLift = reduceMotion ? 0 : motionDistances.sm;
+    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.04
+        };
+        if (null !== hoveredIndex()) return {
+            opacity: 0.96,
+            scale: 1.02
+        };
+        return {
+            opacity: 0.9,
+            scale: 1
+        };
+    });
+    (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();
+    });
+    return (()=>{
+        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 500ms 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 hasSelection = ()=>null !== selectedIndex();
+                const hasHover = ()=>null !== hoveredIndex();
+                const dotTarget = (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: 0.65,
+                        scale: 0.92,
+                        x: 0,
+                        y: 0
+                    };
+                    if (hasHover()) return {
+                        opacity: 0.85,
+                        scale: 0.96,
+                        x: 0,
+                        y: 0
+                    };
+                    return {
+                        opacity: 0.95,
+                        scale: 1,
+                        x: 0,
+                        y: 0
+                    };
+                });
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+                    if (!motionRef) return;
+                    const target = dotTarget();
+                    dotControl?.stop();
+                    dotControl = runMotion(motionRef, readMotionState(motionRef), target, dotTransition);
+                });
+                (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.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.addEventListener("blur", ()=>{
+                        if (!context.disabled()) setHoveredIndex(null);
+                    });
+                    _el$0.addEventListener("focus", ()=>{
+                        if (!context.disabled()) setHoveredIndex(index());
+                    });
+                    _el$0.addEventListener("mouseleave", ()=>{
+                        if (!context.disabled()) setHoveredIndex(null);
+                    });
+                    _el$0.addEventListener("mouseenter", ()=>{
+                        if (!context.disabled()) setHoveredIndex(index());
+                    });
+                    _el$0.$$click = ()=>handleDotClick(index());
+                    _el$0.style.setProperty("box-shadow", "0 2px 8px rgba(0,0,0,0.3)");
+                    _el$1.style.setProperty("mix-blend-mode", "overlay");
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                        var _v$3 = `calc(50% + ${item.offsetX}px)`, _v$4 = `calc(50% + ${item.offsetY}px)`, _v$5 = context.disabled() ? -1 : 0, _v$6 = 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$7 = item.rgb, _v$8 = `Select color ${item.rgb}`, _v$9 = selectedIndex() === index(), _v$0 = clsx("absolute inset-0 rounded-full border-2 border-white", "transition-opacity duration-300 ease-out"), _v$1 = selectedIndex() === index() ? "1" : "0";
+                        _v$3 !== _p$.e && (null != (_p$.e = _v$3) ? _el$8.style.setProperty("left", _v$3) : _el$8.style.removeProperty("left"));
+                        _v$4 !== _p$.t && (null != (_p$.t = _v$4) ? _el$8.style.setProperty("top", _v$4) : _el$8.style.removeProperty("top"));
+                        _v$5 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "tabindex", _p$.a = _v$5);
+                        _v$6 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$0, _p$.o = _v$6);
+                        _v$7 !== _p$.i && (null != (_p$.i = _v$7) ? _el$0.style.setProperty("background", _v$7) : _el$0.style.removeProperty("background"));
+                        _v$8 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "aria-label", _p$.n = _v$8);
+                        _v$9 !== _p$.s && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "aria-pressed", _p$.s = _v$9);
+                        _v$0 !== _p$.h && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$1, _p$.h = _v$0);
+                        _v$1 !== _p$.r && (null != (_p$.r = _v$1) ? _el$1.style.setProperty("opacity", _v$1) : _el$1.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
+                    });
+                    return _el$8;
+                })();
+            }
+        }));
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = containerClasses(), _v$2 = outerRingBackground();
+            _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$4.style.setProperty("background", _v$2) : _el$4.style.removeProperty("background"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
+        return _el$;
+    })();
+};
+const colorpicker_ColorWheelFlower = ColorWheelFlower;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+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();
+    const handleSwatchClick = (swatch)=>{
+        if (context.disabled()) return;
+        const color = parseColor(swatch);
+        if (color) context.onChange(color);
+    };
+    const handleKeyDown = (e, swatch)=>{
+        if (context.disabled()) return;
+        if ("Enter" === e.key || " " === e.key) {
+            e.preventDefault();
+            handleSwatchClick(swatch);
+        }
+    };
+    const classes = ()=>twMerge("grid grid-cols-8 gap-2 w-full", clsx({
+            "opacity-50 pointer-events-none": context.disabled()
+        }), props.class, props.className);
+    const swatchClasses = (swatch)=>{
+        const isSelected = context.color().hex.toLowerCase() === swatch.toLowerCase();
+        return twMerge("w-8 h-8 rounded cursor-pointer border-2 transition-all duration-150", clsx({
+            "border-primary ring-2 ring-primary ring-offset-2 ring-offset-base-100": isSelected,
+            "border-base-300 hover:scale-110 hover:shadow-lg": !isSelected
+        }));
+    };
+    return (()=>{
+        var _el$ = ColorSwatches_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+            get each () {
+                return props.swatches;
+            },
+            children: (swatch)=>(()=>{
+                    var _el$2 = ColorSwatches_tmpl$2();
+                    _el$2.$$keydown = (e)=>handleKeyDown(e, swatch);
+                    _el$2.$$click = ()=>handleSwatchClick(swatch);
+                    null != swatch ? _el$2.style.setProperty("background-color", swatch) : _el$2.style.removeProperty("background-color");
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-label", `Select color ${swatch}`);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                        var _v$ = swatchClasses(swatch), _v$2 = context.disabled(), _v$3 = context.disabled() ? -1 : 0;
+                        _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
+                        _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
+                        _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "tabindex", _p$.a = _v$3);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0
+                    });
+                    return _el$2;
+                })()
+        }));
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, classes()));
+        return _el$;
+    })();
+};
+const colorpicker_ColorSwatches = ColorSwatches;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click",
+    "keydown"
+]);
+var ColorInput_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><input type=text aria-label="Color value"><select aria-label="Color format"><option value=hex>HEX</option><option value=rgb>RGB</option><option value=rgba>RGBA</option><option value=hsl>HSL</option><option value=hsla>HSLA');
+const ColorInput = (props)=>{
+    const context = useColorPickerContext();
+    const [inputValue, setInputValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)("");
+    const [isValid, setIsValid] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(true);
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const formatted = formatColor(context.color(), context.format());
+        setInputValue(formatted);
+        setIsValid(true);
+    });
+    const handleInput = (e)=>{
+        const target = e.target;
+        const value = target.value;
+        setInputValue(value);
+        const parsed = parseColor(value);
+        parsed ? setIsValid(true) : setIsValid(false);
+    };
+    const handleKeyDown = (e)=>{
+        if ("Enter" === e.key) applyColor();
+    };
+    const handleBlur = ()=>{
+        applyColor();
+    };
+    const applyColor = ()=>{
+        const parsed = parseColor(inputValue());
+        if (parsed) {
+            context.onChange(parsed);
+            setIsValid(true);
+        } else {
+            const formatted = formatColor(context.color(), context.format());
+            setInputValue(formatted);
+            setIsValid(true);
+        }
+    };
+    const handleFormatChange = (e)=>{
+        const target = e.target;
+        const newFormat = target.value;
+        context.onFormatChange(newFormat);
+    };
+    const inputClasses = ()=>twMerge("flex-1 px-3 py-2 text-sm border rounded-l focus:outline-none focus:ring-2 focus:ring-primary", clsx({
+            "border-error focus:ring-error": !isValid(),
+            "border-base-300": isValid(),
+            "bg-base-200 cursor-not-allowed": context.disabled(),
+            "bg-base-100 text-base-content": !context.disabled()
+        }));
+    const selectClasses = ()=>twMerge("px-3 py-2 text-sm border border-l-0 rounded-r focus:outline-none focus:ring-2 focus:ring-primary bg-base-100 text-base-content border-base-300", clsx({
+            "bg-base-200 cursor-not-allowed": context.disabled()
+        }));
+    return (()=>{
+        var _el$ = ColorInput_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        _el$2.addEventListener("blur", handleBlur);
+        _el$2.$$keydown = handleKeyDown;
+        _el$2.$$input = handleInput;
+        _el$3.addEventListener("change", handleFormatChange);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = twMerge("flex w-full", props.class, props.className), _v$2 = context.disabled(), _v$3 = inputClasses(), _v$4 = !isValid(), _v$5 = context.disabled(), _v$6 = selectClasses();
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-invalid", _p$.o = _v$4);
+            _v$5 !== _p$.i && (_el$3.disabled = _p$.i = _v$5);
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.n = _v$6);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$2.value = inputValue());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$3.value = context.format());
+        return _el$;
+    })();
+};
+const colorpicker_ColorInput = ColorInput;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "input",
+    "keydown"
+]);
+var ColorPreview_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button><div class="w-full h-full relative">'), ColorPreview_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0">');
+const ColorPreview = (props)=>{
+    const classes = ()=>twMerge("w-10 h-10 rounded border-2 cursor-pointer transition-all duration-150 overflow-hidden", clsx({
+            "border-base-300 hover:scale-110 hover:shadow-lg": !props.disabled,
+            "border-base-200 opacity-50 cursor-not-allowed": props.disabled
+        }), props.class, props.className);
+    const hasAlpha = ()=>props.color.hsl.a < 1;
+    return (()=>{
+        var _el$ = ColorPreview_tmpl$(), _el$2 = _el$.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.addEventListener)(_el$, "click", props.onClick, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!hasAlpha());
+            return ()=>_c$() && (()=>{
+                    var _el$3 = ColorPreview_tmpl$2();
+                    _el$3.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$3.style.setProperty("background-size", "8px 8px");
+                    _el$3.style.setProperty("background-position", "0 0, 0 4px, 4px -4px, -4px 0px");
+                    return _el$3;
+                })();
+        })(), _el$2);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = props.disabled, _v$3 = `Current color: ${formatColor(props.color, "hex")}`, _v$4 = props.disabled ? -1 : 0, _v$5 = `rgba(${props.color.rgb.r}, ${props.color.rgb.g}, ${props.color.rgb.b}, ${props.color.rgb.a})`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (_el$.disabled = _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-label", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.o = _v$4);
+            _v$5 !== _p$.i && (null != (_p$.i = _v$5) ? _el$2.style.setProperty("background-color", _v$5) : _el$2.style.removeProperty("background-color"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0
+        });
+        return _el$;
+    })();
+};
+const colorpicker_ColorPreview = ColorPreview;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+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, [
+        "initial",
+        "animate",
+        "exit",
+        "transition",
+        "isExiting",
+        "onExitComplete",
+        "animateKey",
+        "children",
+        "ref"
+    ]);
+    const [elementRef, setElementRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
+    let activeControl = null;
+    let lastTrigger;
+    let lastIsExiting = false;
+    let hasAnimated = false;
+    const stopActive = ()=>{
+        activeControl?.stop();
+        activeControl = null;
+    };
+    const runEnter = (target, from, to, transition)=>{
+        if (!to) return;
+        stopActive();
+        activeControl = runMotion(target, from ?? {}, to ?? {}, transition);
+    };
+    const runExit = (target, from, to, transition, onComplete)=>{
+        if (!to) return void onComplete?.();
+        stopActive();
+        activeControl = runMotion(target, from ?? {}, to ?? {}, transition, onComplete);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const target = elementRef();
+        if (!target) return;
+        const isExiting = Boolean(local.isExiting);
+        const trigger = local.animateKey;
+        const initial = local.initial;
+        const animate = local.animate;
+        const exit = local.exit;
+        const transition = local.transition;
+        const onComplete = local.onExitComplete;
+        if (isExiting) {
+            if (!lastIsExiting) {
+                lastIsExiting = true;
+                hasAnimated = false;
+                runExit(target, animate ?? initial, exit, transition, onComplete);
+            }
+            return;
+        }
+        lastIsExiting = false;
+        if (!hasAnimated || trigger !== lastTrigger) {
+            lastTrigger = trigger;
+            hasAnimated = true;
+            runEnter(target, initial, animate, transition);
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        stopActive();
+    });
+    return (()=>{
+        var _el$ = MotionDiv_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
+            setElementRef(el);
+            if ("function" == typeof local.ref) local.ref(el);
+        }, _el$);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, rest, false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const MotionDiv = MotionDiv_MotionDiv;
+const createMotionPresets = (tokens)=>{
+    const durations = tokens.durations;
+    const easings = tokens.easings;
+    const distances = tokens.distances;
+    return {
+        route: {
+            initial: {
+                opacity: 0
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0
+            },
+            transition: {
+                duration: durations.route,
+                easing: easings.out
+            }
+        },
+        routeAuth: {
+            initial: {
+                opacity: 0,
+                x: distances.slideIn
+            },
+            animate: {
+                opacity: 1,
+                x: 0
+            },
+            exit: {
+                opacity: 0,
+                x: -distances.slideIn
+            },
+            transition: {
+                duration: durations.routeAuth,
+                easing: easings.inOut
+            }
+        },
+        routeAuthBack: {
+            initial: {
+                opacity: 0,
+                x: -distances.slideIn
+            },
+            animate: {
+                opacity: 1,
+                x: 0
+            },
+            exit: {
+                opacity: 0,
+                x: distances.slideIn
+            },
+            transition: {
+                duration: durations.routeAuth,
+                easing: easings.inOut
+            }
+        },
+        authSwap: {
+            initial: {
+                opacity: 0.92
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0.92
+            },
+            transition: {
+                duration: durations.fast,
+                easing: easings.out
+            }
+        },
+        fade: {
+            initial: {
+                opacity: 0
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0
+            },
+            transition: {
+                duration: durations.base,
+                easing: easings.out,
+                delay: 0.08
+            }
+        },
+        fadeUp: {
+            initial: {
+                opacity: 0,
+                y: distances.sm
+            },
+            animate: {
+                opacity: 1,
+                y: 0
+            },
+            exit: {
+                opacity: 0,
+                y: -distances.sm
+            },
+            transition: {
+                duration: durations.base,
+                easing: easings.out,
+                delay: 0.08
+            }
+        },
+        scaleIn: {
+            initial: {
+                opacity: 0,
+                scale: 0.96
+            },
+            animate: {
+                opacity: 1,
+                scale: 1
+            },
+            exit: {
+                opacity: 0,
+                scale: 0.96
+            },
+            transition: {
+                duration: durations.fast,
+                easing: easings.out,
+                delay: 0.08
+            }
+        },
+        toast: {
+            initial: {
+                opacity: 0,
+                y: distances.sm
+            },
+            animate: {
+                opacity: 1,
+                y: 0
+            },
+            exit: {
+                opacity: 0,
+                y: -distances.sm
+            },
+            transition: {
+                duration: durations.fast,
+                easing: easings.out
+            }
+        },
+        routeDashboard: {
+            initial: {
+                opacity: 0,
+                y: distances.md,
+                scale: 0.985
+            },
+            animate: {
+                opacity: 1,
+                y: 0,
+                scale: 1
+            },
+            exit: {
+                opacity: 0,
+                y: -distances.sm,
+                scale: 0.985
+            },
+            transition: {
+                duration: durations.route,
+                easing: easings.out
+            }
+        }
+    };
+};
+const motionPresets = createMotionPresets(defaultMotionTokens);
+const routeTransition = motionPresets.route;
+const noMotion = {
+    initial: {
+        opacity: 1,
+        y: 0,
+        x: 0,
+        scale: 1
+    },
+    animate: {
+        opacity: 1,
+        y: 0,
+        x: 0,
+        scale: 1
+    },
+    exit: {
+        opacity: 1,
+        y: 0,
+        x: 0,
+        scale: 1
+    },
+    transition: {
+        duration: 0
+    }
+};
+const presets_getPreset = (name)=>motionPresets[name];
+const presets_registerPreset = (name, preset)=>{
+    motionPresets[name] = preset;
+};
+const presets_resolvePreset = (name, options)=>{
+    const reduce = options?.reduceMotion ?? prefersReducedMotion();
+    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</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",
+    "#45B7D1",
+    "#FFA07A",
+    "#98D8C8",
+    "#F7DC6F",
+    "#BB8FCE",
+    "#85929E",
+    "#FF5733",
+    "#C70039",
+    "#900C3F",
+    "#581845",
+    "#2ECC71",
+    "#3498DB",
+    "#9B59B6",
+    "#E74C3C"
+];
+const ColorPicker = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "value",
+        "onChange",
+        "format",
+        "disabled",
+        "swatches",
+        "showAlpha",
+        "placement",
+        "initialMode",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "aria-label"
+    ]);
+    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [internalColor, setInternalColor] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(getDefaultColor());
+    const [currentFormat, setCurrentFormat] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.format || "hex");
+    const [mode, setMode] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.initialMode || "picker");
+    let containerRef;
+    const color = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (local.value) {
+            const parsed = parseColor(local.value);
+            if (parsed) {
+                setInternalColor(parsed);
+                return parsed;
+            }
+        }
+        return internalColor();
+    });
+    const handleColorChange = (newColor)=>{
+        setInternalColor(newColor);
+        if (local.onChange) {
+            const formatted = formatColor(newColor, currentFormat());
+            local.onChange(formatted);
+        }
+    };
+    const handleFormatChange = (newFormat)=>{
+        setCurrentFormat(newFormat);
+        if (local.onChange) {
+            const formatted = formatColor(color(), newFormat);
+            local.onChange(formatted);
+        }
+    };
+    const togglePicker = ()=>{
+        if (!local.disabled) setIsOpen(!isOpen());
+    };
+    const handleKeyDown = (e)=>{
+        if ("Escape" === e.key && isOpen()) {
+            setIsOpen(false);
+            e.preventDefault();
+        }
+    };
+    const contextValue = {
+        color,
+        format: currentFormat,
+        disabled: ()=>local.disabled || false,
+        onChange: handleColorChange,
+        onFormatChange: handleFormatChange
+    };
+    const containerClasses = ()=>twMerge("relative inline-block", clsx({
+            "opacity-50": local.disabled
+        }), local.class, local.className);
+    const popoverClasses = ()=>{
+        const base = "z-50 p-4 bg-base-100 rounded-lg shadow-xl border border-base-300 min-w-[280px]";
+        return twMerge(base, "absolute mt-2", clsx({
+            "bottom-full mb-2 mt-0": "top" === local.placement,
+            "top-full mt-2": "bottom" === local.placement || !local.placement,
+            "right-full mr-2": "left" === local.placement,
+            "left-full ml-2": "right" === local.placement
+        }));
+    };
+    const ModeSwitcher = ()=>(()=>{
+            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(),
+                    "text-base-content/60 hover:text-base-content": "picker" !== mode()
+                }), _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,
+                a: void 0
+            });
+            return _el$;
+        })();
+    const PopoverContent = ()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(MotionDiv, {
+            get initial () {
+                return motionPresets.fadeUp.initial;
+            },
+            get animate () {
+                return motionPresets.fadeUp.animate;
+            },
+            get exit () {
+                return motionPresets.fadeUp.exit;
+            },
+            get transition () {
+                return motionPresets.fadeUp.transition;
+            },
+            get ["class"] () {
+                return popoverClasses();
+            },
+            get children () {
+                return [
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ModeSwitcher, {}),
+                    (()=>{
+                        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_ColorPickerGradientSelector, {});
+                            }
+                        }), 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 "wheel" === mode();
+                            },
+                            get children () {
+                                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$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return local.showAlpha;
+                            },
+                            get children () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(AlphaSlider, {});
+                            }
+                        }), null);
+                        (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$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$6;
+                            }
+                        }), null);
+                        return _el$5;
+                    })()
+                ];
+            }
+        });
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorPickerContext.Provider, {
+        value: contextValue,
+        get children () {
+            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$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();
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }, others), false, true);
+            (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();
+                },
+                get disabled () {
+                    return local.disabled;
+                },
+                onClick: togglePicker,
+                get ["aria-label"] () {
+                    return local["aria-label"] || "Color picker";
+                }
+            }), null);
+            (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 () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(PopoverContent, {});
+                }
+            }), null);
+            (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$8 = ColorPicker_tmpl$4();
+                    _el$8.$$click = ()=>setIsOpen(false);
+                    return _el$8;
+                }
+            }), null);
+            return _el$7;
+        }
+    });
+};
+const colorpicker_ColorPicker = ColorPicker;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click",
+    "keydown"
+]);
+var CodeMockup_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const CodeMockup = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "children",
+        "dataTheme",
+        "aria-label"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("mockup-code w-full", local.class, local.className));
+    return (()=>{
+        var _el$ = CodeMockup_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return classes();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["aria-label"] () {
+                return local["aria-label"] || "Code mockup";
+            }
+        }, rest), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const codemockup_CodeMockup = CodeMockup;
+var CodeMockupLine_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<pre><code>");
+const CodeMockupLine_CodeMockupLine = (props)=>{
+    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        dataPrefix: ">",
+        status: null,
+        class: ""
+    }, props);
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
+        "dataPrefix",
+        "status",
+        "innerProps",
+        "innerRef",
+        "class",
+        "children",
+        "dataTheme"
+    ]);
+    const statusClass = ()=>twMerge(dist_clsx({
+            "bg-info": "info" === local.status,
+            "bg-success": "success" === local.status,
+            "bg-warning": "warning" === local.status,
+            "bg-error": "error" === local.status,
+            "text-info-content": "info" === local.status,
+            "text-success-content": "success" === local.status,
+            "text-warning-content": "warning" === local.status,
+            "text-error-content": "error" === local.status
+        }), local.class);
+    const prefix = ()=>false !== local.dataPrefix ? local.dataPrefix || ">" : void 0;
+    return (()=>{
+        var _el$ = CodeMockupLine_tmpl$(), _el$2 = _el$.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return statusClass();
+            },
+            get ["data-prefix"] () {
+                return prefix();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, rest), false, true);
+        var _ref$ = local.innerRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$2) : local.innerRef = _el$2;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>local.innerProps), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        return _el$;
+    })();
+};
+const CodeMockupLine = CodeMockupLine_CodeMockupLine;
+var CollapseDetails_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<details>");
+function CollapseDetails_classesFn({ className, icon, open }) {
+    return twMerge("collapse", className, clsx({
+        "collapse-arrow": "arrow" === icon,
+        "collapse-plus": "plus" === icon,
+        "collapse-open": true === open,
+        "collapse-close": false === open
+    }));
+}
+function CollapseDetails(props) {
+    const classes = CollapseDetails_classesFn({
+        className: props.class,
+        icon: props.icon,
+        open: props.open
+    });
+    return (()=>{
+        var _el$ = CollapseDetails_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+            class: classes,
+            get open () {
+                return props.open;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
+}
+CollapseDetails.Title = Summary;
+var Collapse_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), Collapse_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input type=checkbox class=peer>");
+const Collapse_classesFn = ({ className, icon, open })=>twMerge("collapse", className, clsx({
+        "collapse-arrow": "arrow" === icon,
+        "collapse-plus": "plus" === icon,
+        "collapse-open": true === open,
+        "collapse-close": false === open
+    }));
+const Collapse = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "checkbox",
+        "icon",
+        "open",
+        "onOpen",
+        "onClose",
+        "onToggle",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const isControlled = void 0 !== local.open;
+    const isChecked = ()=>isControlled ? local.open : internalOpen();
+    const handleCheckboxChange = ()=>{
+        if (local.onToggle) local.onToggle();
+        if (isControlled) {
+            if (local.open && local.onClose) local.onClose();
+            if (!local.open && local.onOpen) local.onOpen();
+        } else {
+            const next = !internalOpen();
+            setInternalOpen(next);
+            if (next && local.onOpen) local.onOpen();
+            if (!next && local.onClose) local.onClose();
+        }
+    };
+    const handleBlur = (e)=>{
+        if (!local.checkbox) {
+            local.onToggle?.();
+            local.onClose?.();
+        }
+        if ("function" == typeof others.onBlur) others.onBlur(e);
+    };
+    const handleFocus = (e)=>{
+        if (!local.checkbox) {
+            local.onToggle?.();
+            local.onOpen?.();
+        }
+        if ("function" == typeof others.onFocus) others.onFocus(e);
+    };
+    return (()=>{
+        var _el$ = Collapse_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["aria-expanded"] () {
+                return local.open;
+            }
+        }, others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return Collapse_classesFn({
+                    className: twMerge(local.class, local.className),
+                    icon: local.icon,
+                    open: local.open
+                });
+            },
+            get style () {
+                return local.style;
+            },
+            get tabIndex () {
+                return local.checkbox || isChecked() ? void 0 : 0;
+            },
+            onBlur: handleBlur,
+            onFocus: handleFocus
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.checkbox);
+            return ()=>_c$() && (()=>{
+                    var _el$2 = Collapse_tmpl$2();
+                    _el$2.addEventListener("change", handleCheckboxChange);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>el, _el$2);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "tabindex", isChecked() ? 0 : void 0));
+                    return _el$2;
+                })();
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children, null);
+        return _el$;
+    })();
+};
+const collapse_Collapse = Object.assign(Collapse, {
+    Details: CollapseDetails,
+    Title: CollapseTitle,
+    Content: CollapseContent
+});
+const breakpoints = [
+    "base",
+    "sm",
+    "md",
+    "lg",
+    "xl"
+];
+function isJSXElement(node) {
+    return "object" == typeof node && null !== node;
+}
+function wrapWithElementIfInvalid({ node, wrapper = "div", className = "" }) {
+    null == node || "string" == typeof node || "number" == typeof node || isJSXElement(node);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, {
+        component: wrapper,
+        class: className,
+        children: node
+    });
+}
+function mapResponsiveProp(prop, classMap) {
+    if (void 0 === prop) return [];
+    if ("string" == typeof prop || "boolean" == typeof prop) return [
+        classMap[String(prop)]
+    ];
+    return breakpoints.flatMap((bp)=>{
+        const value = prop[bp];
+        if (void 0 === value) return [];
+        const className = classMap[String(value)];
+        return "base" === bp ? [
+            className
+        ] : [
+            `${bp}:${className}`
+        ];
+    });
+}
+function useDesktop(breakpoint = 1024) {
+    const [isDesktop, setIsDesktop] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const checkIfDesktop = ()=>{
+        const width = window.innerWidth;
+        setIsDesktop(width >= breakpoint);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        checkIfDesktop();
+        window.addEventListener("resize", checkIfDesktop);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        window.removeEventListener("resize", checkIfDesktop);
+    });
+    return isDesktop;
+}
+const directionMap = {
+    row: "flex-row",
+    col: "flex-col",
+    "row-reverse": "flex-row-reverse",
+    "col-reverse": "flex-col-reverse"
+};
+const justifyMap = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly"
+};
+const alignMap = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+    baseline: "items-baseline"
+};
+const wrapMap = {
+    wrap: "flex-wrap",
+    nowrap: "flex-nowrap",
+    "wrap-reverse": "flex-wrap-reverse"
+};
+const gapMap = {
+    none: "gap-0",
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    xl: "gap-8"
+};
+const gapXMap = {
+    none: "gap-x-0",
+    sm: "gap-x-2",
+    md: "gap-x-4",
     lg: "gap-x-6",
     xl: "gap-x-8"
 };
@@ -7045,7 +8959,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",
@@ -7080,8 +8994,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, [
@@ -8181,7 +10095,7 @@ const NumberField = (props)=>{
     })();
 };
 const form_NumberField = NumberField;
-var FormDropdown_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), FormDropdown_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>"), FormDropdown_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), FormDropdown_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="text-error ml-1">*'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=ml-2>");
+var FormDropdown_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), FormDropdown_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>"), FormDropdown_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), FormDropdown_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="text-error ml-1">*'), FormDropdown_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=ml-2>");
 const FormDropdown_FormDropdown = (props)=>{
     const { errors, touched, setData } = useFormValidation();
     const [local, _] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -8262,7 +10176,7 @@ const FormDropdown_FormDropdown = (props)=>{
                                     return _el$2;
                                 })(),
                                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>local.icon || (()=>{
-                                        var _el$6 = _tmpl$5();
+                                        var _el$6 = FormDropdown_tmpl$5();
                                         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(icon_Icon, {
                                             name: "icon-[mdi-light--chevron-down]",
                                             width: 20,
@@ -9853,7 +11767,7 @@ const Select = (props)=>{
 };
 const select_Select = Select;
 var ShowcaseSection_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="opacity-0 group-hover/title:opacity-100 text-base-content/70 transition-opacity">#'), ShowcaseSection_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<h2 class="text-xl font-semibold group/title">'), ShowcaseSection_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=space-y-3>");
-const ShowcaseSection = (props)=>{
+const ShowcaseSection_ShowcaseSection = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "id",
         "title",
@@ -9918,7 +11832,7 @@ const ShowcaseSection = (props)=>{
         return _el$;
     })();
 };
-const showcase_section_ShowcaseSection = ShowcaseSection;
+const ShowcaseSection = ShowcaseSection_ShowcaseSection;
 var ShowcaseBlock_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<p class="text-base-content/70 mb-4">'), ShowcaseBlock_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="bg-base-200 shadow-sm p-6 rounded-lg"><h3 class="text-lg font-semibold mb-2 text-base-content"></h3><div>');
 const ShowcaseBlock = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -10611,7 +12525,7 @@ const steps_Steps = Object.assign(Steps, {
 });
 const steps = steps_Steps;
 var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><ellipse></svg>", false, true, false), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle></svg>", false, true, false), SvgBackground_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=0 r=100 opacity=0.7></svg>", false, true, false), SvgBackground_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=0 r=120></svg>", false, true, false), SvgBackground_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=400 r=100 opacity=0.7></svg>", false, true, false), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=400 r=120></svg>", false, true, false), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=0 cy=200 r=70 opacity=0.6></svg>", false, true, false), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=0 r=100></svg>", false, true, false), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=400 cy=200 r=100></svg>", false, true, false), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><circle cx=200 cy=400 r=100></svg>", false, true, false), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div><svg viewBox="0 0 400 400"xmlns=http://www.w3.org/2000/svg><rect width=400 height=400></rect></svg></div><canvas></canvas><div class="relative z-10 h-full w-full">'), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
-function hexToRgb(hex) {
+function SvgBackground_hexToRgb(hex) {
     hex = hex.replace(/^#/, "");
     const bigint = Number.parseInt(hex, 16);
     const r = bigint >> 16 & 255;
@@ -10630,8 +12544,8 @@ function SvgBackground(props) {
     let canvasRef;
     const [isBackgroundReady, setBackgroundReady] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
     const getIntermediateColor = (t)=>{
-        const start = hexToRgb(colorStart);
-        const end = hexToRgb(colorEnd);
+        const start = SvgBackground_hexToRgb(colorStart);
+        const end = SvgBackground_hexToRgb(colorEnd);
         const r = Math.round(start.r + (end.r - start.r) * t);
         const g = Math.round(start.g + (end.g - start.g) * t);
         const b = Math.round(start.b + (end.b - start.b) * t);
@@ -12313,64 +14227,26 @@ const StreamingTable = (props)=>{
                                 get disabled () {
                                     return currentPage() === totalPages() - 1;
                                 },
-                                size: "sm",
-                                children: "\xBB"
-                            })
-                        ];
-                    }
-                }), _el$4);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>currentPage() + 1, _el$7);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, totalPages, null);
-                return _el$3;
-            }
-        }), null);
-        return _el$;
-    })();
-};
-const streaming_table_StreamingTable = StreamingTable;
-(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "click"
-]);
-var Tab_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a role=tab>");
-const Tab = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "class",
-        "className",
-        "color",
-        "bgColor",
-        "borderColor",
-        "active",
-        "disabled"
-    ]);
-    const classes = ()=>twMerge("tab", local.class, local.className, clsx({
-            [`[--tab-bg:${local.bgColor}]`]: local.bgColor,
-            [`[--tab-border-color:${local.borderColor}]`]: local.borderColor,
-            "text-neutral": "neutral" === local.color,
-            "text-primary": "primary" === local.color,
-            "text-secondary": "secondary" === local.color,
-            "text-accent": "accent" === local.color,
-            "text-info": "info" === local.color,
-            "text-success": "success" === local.color,
-            "text-warning": "warning" === local.color,
-            "text-error": "error" === local.color,
-            "tab-active": local.active,
-            "tab-disabled": local.disabled
-        }));
-    return (()=>{
-        var _el$ = Tab_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get ["class"] () {
-                return classes();
+                                size: "sm",
+                                children: "\xBB"
+                            })
+                        ];
+                    }
+                }), _el$4);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>currentPage() + 1, _el$7);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, totalPages, null);
+                return _el$3;
             }
-        }, others), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        }), null);
         return _el$;
     })();
 };
-const tabs_Tab = Tab;
-var RadioTab_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input role=tab type=radio>"), RadioTab_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const RadioTab = (props)=>{
+const streaming_table_StreamingTable = StreamingTable;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+var Tab_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a role=tab>");
+const Tab = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "class",
@@ -12379,10 +14255,7 @@ const RadioTab = (props)=>{
         "bgColor",
         "borderColor",
         "active",
-        "disabled",
-        "label",
-        "name",
-        "contentClassName"
+        "disabled"
     ]);
     const classes = ()=>twMerge("tab", local.class, local.className, clsx({
             [`[--tab-bg:${local.bgColor}]`]: local.bgColor,
@@ -12398,740 +14271,356 @@ const RadioTab = (props)=>{
             "tab-active": local.active,
             "tab-disabled": local.disabled
         }));
-    const contentClasses = ()=>twMerge("tab-content", local.contentClassName);
-    return [
-        (()=>{
-            var _el$ = RadioTab_tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-                get ["class"] () {
-                    return classes();
-                },
-                get name () {
-                    return local.name;
-                },
-                get ["aria-label"] () {
-                    return local.label;
-                },
-                get disabled () {
-                    return local.disabled;
-                }
-            }, others), false, false);
-            return _el$;
-        })(),
-        (()=>{
-            var _el$2 = RadioTab_tmpl$2();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, contentClasses()));
-            return _el$2;
-        })()
-    ];
-};
-const tabs_RadioTab = RadioTab;
-var Tabs_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=tablist>");
-const Tabs = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "class",
-        "className",
-        "variant",
-        "size",
-        "position"
-    ]);
-    const classes = ()=>twMerge("tabs", local.class, local.className, clsx({
-            "tabs-boxed": "boxed" === local.variant,
-            "tabs-bordered": "bordered" === local.variant,
-            "tabs-lift": "lift" === local.variant,
-            "tabs-xl": "xl" === local.size,
-            "tabs-lg": "lg" === local.size,
-            "tabs-md": "md" === local.size,
-            "tabs-sm": "sm" === local.size,
-            "tabs-xs": "xs" === local.size,
-            "tabs-top": "top" === local.position,
-            "tabs-bottom": "bottom" === local.position
-        }));
     return (()=>{
-        var _el$ = Tabs_tmpl$();
+        var _el$ = Tab_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
             get ["class"] () {
                 return classes();
-            }
-        }, others), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
-        return _el$;
-    })();
-};
-const tabs_Tabs = Object.assign(Tabs, {
-    Tab: tabs_Tab,
-    RadioTab: tabs_RadioTab
-});
-var Textarea_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<textarea>");
-const Textarea = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "color",
-        "size",
-        "dataTheme",
-        "class",
-        "className",
-        "style",
-        "resize"
-    ]);
-    const classes = ()=>twMerge("textarea", local.class, local.className, clsx({
-            "textarea-xl": "xl" === local.size,
-            "textarea-lg": "lg" === local.size,
-            "textarea-md": "md" === local.size,
-            "textarea-sm": "sm" === local.size,
-            "textarea-xs": "xs" === local.size,
-            "textarea-primary": "primary" === local.color,
-            "textarea-secondary": "secondary" === local.color,
-            "textarea-accent": "accent" === local.color,
-            "textarea-ghost": "ghost" === local.color,
-            "textarea-info": "info" === local.color,
-            "textarea-success": "success" === local.color,
-            "textarea-warning": "warning" === local.color,
-            "textarea-error": "error" === local.color,
-            "resize-y": "y" === local.resize,
-            "resize-x": "x" === local.resize,
-            "resize-none": "none" === local.resize,
-            "resize-both": "both" === local.resize
-        }));
-    return (()=>{
-        var _el$ = Textarea_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, false);
-        return _el$;
-    })();
-};
-const textarea_Textarea = Textarea;
-var Timeline_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<ul>");
-const Timeline_Timeline = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "vertical",
-        "horizontal",
-        "responsive",
-        "snap",
-        "compact",
-        "class",
-        "className",
-        "style",
-        "dataTheme"
-    ]);
-    const classes = twMerge("timeline", dist_clsx({
-        "timeline-vertical": local.vertical,
-        "timeline-horizontal": local.horizontal,
-        "timeline-vertical lg:timeline-horizontal": local.responsive,
-        "timeline-snap-icon": local.snap,
-        "timeline-compact": local.compact
-    }), local.class, local.className);
-    return (()=>{
-        var _el$ = Timeline_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            class: classes,
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
-        return _el$;
-    })();
-};
-const Timeline = Timeline_Timeline;
-var TimelineEnd_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const TimelineEnd = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "box",
-        "class",
-        "style"
-    ]);
-    const classes = twMerge("timeline-end", clsx({
-        "timeline-box": local.box ?? true
-    }), local.class);
-    return (()=>{
-        var _el$ = TimelineEnd_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            class: classes,
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
-        return _el$;
-    })();
-};
-const timeline_TimelineEnd = TimelineEnd;
-var TimelineItem_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<hr>"), TimelineItem_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li>");
-const TimelineItem = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "connect",
-        "startClassName",
-        "endClassName",
-        "class",
-        "style"
-    ]);
-    return (()=>{
-        var _el$ = TimelineItem_tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return local.class;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
-            get when () {
-                return "both" === local.connect || "start" === local.connect;
-            },
-            get children () {
-                var _el$2 = TimelineItem_tmpl$();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, local.startClassName));
-                return _el$2;
-            }
-        }), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children, null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
-            get when () {
-                return "both" === local.connect || "end" === local.connect;
-            },
-            get children () {
-                var _el$3 = TimelineItem_tmpl$();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, local.endClassName));
-                return _el$3;
-            }
-        }), null);
-        return _el$;
-    })();
-};
-const timeline_TimelineItem = TimelineItem;
-var TimelineMiddle_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), TimelineMiddle_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 20 20"fill=currentColor class="w-5 h-5"><path fill-rule=evenodd d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"clip-rule=evenodd>');
-const TimelineMiddle = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "class",
-        "style",
-        "children"
-    ]);
-    const classes = twMerge("timeline-middle", local.class);
-    return (()=>{
-        var _el$ = TimelineMiddle_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            class: classes,
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children ?? TimelineMiddle_tmpl$2());
+            }
+        }, others), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
         return _el$;
     })();
 };
-const timeline_TimelineMiddle = TimelineMiddle;
-var TimelineStart_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const TimelineStart = (props)=>{
+const tabs_Tab = Tab;
+var RadioTab_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input role=tab type=radio>"), RadioTab_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const RadioTab = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "box",
+        "children",
         "class",
-        "style"
+        "className",
+        "color",
+        "bgColor",
+        "borderColor",
+        "active",
+        "disabled",
+        "label",
+        "name",
+        "contentClassName"
     ]);
-    const classes = twMerge("timeline-start", clsx({
-        "timeline-box": local.box
-    }), local.class);
-    return (()=>{
-        var _el$ = TimelineStart_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            class: classes,
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
-        return _el$;
-    })();
-};
-const timeline_TimelineStart = TimelineStart;
-var Toast_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const horizontalOptions = {
-    start: "toast-start",
-    center: "toast-center",
-    end: "toast-end"
-};
-const verticalOptions = {
-    top: "toast-top",
-    middle: "toast-middle",
-    bottom: "toast-bottom"
+    const classes = ()=>twMerge("tab", local.class, local.className, clsx({
+            [`[--tab-bg:${local.bgColor}]`]: local.bgColor,
+            [`[--tab-border-color:${local.borderColor}]`]: local.borderColor,
+            "text-neutral": "neutral" === local.color,
+            "text-primary": "primary" === local.color,
+            "text-secondary": "secondary" === local.color,
+            "text-accent": "accent" === local.color,
+            "text-info": "info" === local.color,
+            "text-success": "success" === local.color,
+            "text-warning": "warning" === local.color,
+            "text-error": "error" === local.color,
+            "tab-active": local.active,
+            "tab-disabled": local.disabled
+        }));
+    const contentClasses = ()=>twMerge("tab-content", local.contentClassName);
+    return [
+        (()=>{
+            var _el$ = RadioTab_tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                get ["class"] () {
+                    return classes();
+                },
+                get name () {
+                    return local.name;
+                },
+                get ["aria-label"] () {
+                    return local.label;
+                },
+                get disabled () {
+                    return local.disabled;
+                }
+            }, others), false, false);
+            return _el$;
+        })(),
+        (()=>{
+            var _el$2 = RadioTab_tmpl$2();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, contentClasses()));
+            return _el$2;
+        })()
+    ];
 };
-const Toast = (props)=>{
+const tabs_RadioTab = RadioTab;
+var Tabs_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=tablist>");
+const Tabs = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "horizontal",
-        "vertical",
+        "children",
         "class",
         "className",
-        "style",
-        "dataTheme",
-        "max"
+        "variant",
+        "size",
+        "position"
     ]);
-    const positionClasses = [
-        horizontalOptions[local.horizontal || "end"],
-        verticalOptions[local.vertical || "bottom"]
-    ];
-    const limitedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
-        const childrenArray = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>props.children).toArray();
-        if (local.max && local.max > 0) return childrenArray.slice(-local.max);
-        return childrenArray;
-    });
+    const classes = ()=>twMerge("tabs", local.class, local.className, clsx({
+            "tabs-boxed": "boxed" === local.variant,
+            "tabs-bordered": "bordered" === local.variant,
+            "tabs-lift": "lift" === local.variant,
+            "tabs-xl": "xl" === local.size,
+            "tabs-lg": "lg" === local.size,
+            "tabs-md": "md" === local.size,
+            "tabs-sm": "sm" === local.size,
+            "tabs-xs": "xs" === local.size,
+            "tabs-top": "top" === local.position,
+            "tabs-bottom": "bottom" === local.position
+        }));
     return (()=>{
-        var _el$ = Toast_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            role: "status",
+        var _el$ = Tabs_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
             get ["class"] () {
-                return twMerge("toast", ...positionClasses, local.class, local.className);
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
+                return classes();
             }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, limitedChildren);
+        }, others), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
         return _el$;
     })();
 };
-const toast_Toast = Toast;
-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;
-    const distances = tokens.distances;
-    return {
-        route: {
-            initial: {
-                opacity: 0
-            },
-            animate: {
-                opacity: 1
-            },
-            exit: {
-                opacity: 0
-            },
-            transition: {
-                duration: durations.route,
-                easing: easings.out
-            }
-        },
-        routeAuth: {
-            initial: {
-                opacity: 0,
-                x: distances.slideIn
-            },
-            animate: {
-                opacity: 1,
-                x: 0
-            },
-            exit: {
-                opacity: 0,
-                x: -distances.slideIn
-            },
-            transition: {
-                duration: durations.routeAuth,
-                easing: easings.inOut
-            }
-        },
-        routeAuthBack: {
-            initial: {
-                opacity: 0,
-                x: -distances.slideIn
-            },
-            animate: {
-                opacity: 1,
-                x: 0
-            },
-            exit: {
-                opacity: 0,
-                x: distances.slideIn
-            },
-            transition: {
-                duration: durations.routeAuth,
-                easing: easings.inOut
-            }
-        },
-        authSwap: {
-            initial: {
-                opacity: 0.92
-            },
-            animate: {
-                opacity: 1
+const tabs_Tabs = Object.assign(Tabs, {
+    Tab: tabs_Tab,
+    RadioTab: tabs_RadioTab
+});
+var Textarea_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<textarea>");
+const Textarea = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "color",
+        "size",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "resize"
+    ]);
+    const classes = ()=>twMerge("textarea", local.class, local.className, clsx({
+            "textarea-xl": "xl" === local.size,
+            "textarea-lg": "lg" === local.size,
+            "textarea-md": "md" === local.size,
+            "textarea-sm": "sm" === local.size,
+            "textarea-xs": "xs" === local.size,
+            "textarea-primary": "primary" === local.color,
+            "textarea-secondary": "secondary" === local.color,
+            "textarea-accent": "accent" === local.color,
+            "textarea-ghost": "ghost" === local.color,
+            "textarea-info": "info" === local.color,
+            "textarea-success": "success" === local.color,
+            "textarea-warning": "warning" === local.color,
+            "textarea-error": "error" === local.color,
+            "resize-y": "y" === local.resize,
+            "resize-x": "x" === local.resize,
+            "resize-none": "none" === local.resize,
+            "resize-both": "both" === local.resize
+        }));
+    return (()=>{
+        var _el$ = Textarea_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
             },
-            exit: {
-                opacity: 0.92
+            get ["class"] () {
+                return classes();
             },
-            transition: {
-                duration: durations.fast,
-                easing: easings.out
+            get style () {
+                return local.style;
             }
-        },
-        fade: {
-            initial: {
-                opacity: 0
-            },
-            animate: {
-                opacity: 1
-            },
-            exit: {
-                opacity: 0
+        }), false, false);
+        return _el$;
+    })();
+};
+const textarea_Textarea = Textarea;
+var Timeline_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<ul>");
+const Timeline_Timeline = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "vertical",
+        "horizontal",
+        "responsive",
+        "snap",
+        "compact",
+        "class",
+        "className",
+        "style",
+        "dataTheme"
+    ]);
+    const classes = twMerge("timeline", dist_clsx({
+        "timeline-vertical": local.vertical,
+        "timeline-horizontal": local.horizontal,
+        "timeline-vertical lg:timeline-horizontal": local.responsive,
+        "timeline-snap-icon": local.snap,
+        "timeline-compact": local.compact
+    }), local.class, local.className);
+    return (()=>{
+        var _el$ = Timeline_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            class: classes,
+            get ["data-theme"] () {
+                return local.dataTheme;
             },
-            transition: {
-                duration: durations.base,
-                easing: easings.out,
-                delay: 0.08
+            get style () {
+                return local.style;
             }
-        },
-        fadeUp: {
-            initial: {
-                opacity: 0,
-                y: distances.sm
-            },
-            animate: {
-                opacity: 1,
-                y: 0
-            },
-            exit: {
-                opacity: 0,
-                y: -distances.sm
-            },
-            transition: {
-                duration: durations.base,
-                easing: easings.out,
-                delay: 0.08
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
+};
+const Timeline = Timeline_Timeline;
+var TimelineEnd_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const TimelineEnd = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "box",
+        "class",
+        "style"
+    ]);
+    const classes = twMerge("timeline-end", clsx({
+        "timeline-box": local.box ?? true
+    }), local.class);
+    return (()=>{
+        var _el$ = TimelineEnd_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            class: classes,
+            get style () {
+                return local.style;
             }
-        },
-        scaleIn: {
-            initial: {
-                opacity: 0,
-                scale: 0.96
-            },
-            animate: {
-                opacity: 1,
-                scale: 1
-            },
-            exit: {
-                opacity: 0,
-                scale: 0.96
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
+};
+const timeline_TimelineEnd = TimelineEnd;
+var TimelineItem_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<hr>"), TimelineItem_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li>");
+const TimelineItem = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "connect",
+        "startClassName",
+        "endClassName",
+        "class",
+        "style"
+    ]);
+    return (()=>{
+        var _el$ = TimelineItem_tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return local.class;
             },
-            transition: {
-                duration: durations.fast,
-                easing: easings.out,
-                delay: 0.08
+            get style () {
+                return local.style;
             }
-        },
-        toast: {
-            initial: {
-                opacity: 0,
-                y: distances.sm
-            },
-            animate: {
-                opacity: 1,
-                y: 0
-            },
-            exit: {
-                opacity: 0,
-                y: -distances.sm
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return "both" === local.connect || "start" === local.connect;
             },
-            transition: {
-                duration: durations.fast,
-                easing: easings.out
+            get children () {
+                var _el$2 = TimelineItem_tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, local.startClassName));
+                return _el$2;
             }
-        },
-        routeDashboard: {
-            initial: {
-                opacity: 0,
-                y: distances.md,
-                scale: 0.985
-            },
-            animate: {
-                opacity: 1,
-                y: 0,
-                scale: 1
-            },
-            exit: {
-                opacity: 0,
-                y: -distances.sm,
-                scale: 0.985
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return "both" === local.connect || "end" === local.connect;
             },
-            transition: {
-                duration: durations.route,
-                easing: easings.out
-            }
-        }
-    };
-};
-const motionPresets = createMotionPresets(defaultMotionTokens);
-const routeTransition = motionPresets.route;
-const noMotion = {
-    initial: {
-        opacity: 1,
-        y: 0,
-        x: 0,
-        scale: 1
-    },
-    animate: {
-        opacity: 1,
-        y: 0,
-        x: 0,
-        scale: 1
-    },
-    exit: {
-        opacity: 1,
-        y: 0,
-        x: 0,
-        scale: 1
-    },
-    transition: {
-        duration: 0
-    }
-};
-const presets_getPreset = (name)=>motionPresets[name];
-const presets_registerPreset = (name, preset)=>{
-    motionPresets[name] = preset;
-};
-const presets_resolvePreset = (name, options)=>{
-    const reduce = options?.reduceMotion ?? prefersReducedMotion();
-    if (reduce) return noMotion;
-    return motionPresets[name] ?? noMotion;
-};
-const immediateDriver = ({ to, onUpdate, onComplete })=>{
-    onUpdate(to);
-    onComplete?.();
-    return {
-        stop: ()=>{}
-    };
+            get children () {
+                var _el$3 = TimelineItem_tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, local.endClassName));
+                return _el$3;
+            }
+        }), null);
+        return _el$;
+    })();
 };
-let activeDriver = immediateDriver;
-const setMotionDriver = (driver)=>{
-    activeDriver = driver;
+const timeline_TimelineItem = TimelineItem;
+var TimelineMiddle_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), TimelineMiddle_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 20 20"fill=currentColor class="w-5 h-5"><path fill-rule=evenodd d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"clip-rule=evenodd>');
+const TimelineMiddle = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "style",
+        "children"
+    ]);
+    const classes = twMerge("timeline-middle", local.class);
+    return (()=>{
+        var _el$ = TimelineMiddle_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            class: classes,
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children ?? TimelineMiddle_tmpl$2());
+        return _el$;
+    })();
 };
-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 timeline_TimelineMiddle = TimelineMiddle;
+var TimelineStart_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const TimelineStart = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "box",
+        "class",
+        "style"
+    ]);
+    const classes = twMerge("timeline-start", clsx({
+        "timeline-box": local.box
+    }), local.class);
+    return (()=>{
+        var _el$ = TimelineStart_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            class: classes,
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
 };
-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 timeline_TimelineStart = TimelineStart;
+var Toast_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const horizontalOptions = {
+    start: "toast-start",
+    center: "toast-center",
+    end: "toast-end"
 };
-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());
-        }
-    };
+const verticalOptions = {
+    top: "toast-top",
+    middle: "toast-middle",
+    bottom: "toast-bottom"
 };
-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, [
-        "initial",
-        "animate",
-        "exit",
-        "transition",
-        "isExiting",
-        "onExitComplete",
-        "animateKey",
-        "children",
-        "ref"
+const Toast = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "horizontal",
+        "vertical",
+        "class",
+        "className",
+        "style",
+        "dataTheme",
+        "max"
     ]);
-    const [elementRef, setElementRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
-    let activeControl = null;
-    let lastTrigger;
-    let lastIsExiting = false;
-    let hasAnimated = false;
-    const stopActive = ()=>{
-        activeControl?.stop();
-        activeControl = null;
-    };
-    const runEnter = (target, from, to, transition)=>{
-        if (!to) return;
-        stopActive();
-        activeControl = runMotion(target, from ?? {}, to ?? {}, transition);
-    };
-    const runExit = (target, from, to, transition, onComplete)=>{
-        if (!to) return void onComplete?.();
-        stopActive();
-        activeControl = runMotion(target, from ?? {}, to ?? {}, transition, onComplete);
-    };
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        const target = elementRef();
-        if (!target) return;
-        const isExiting = Boolean(local.isExiting);
-        const trigger = local.animateKey;
-        const initial = local.initial;
-        const animate = local.animate;
-        const exit = local.exit;
-        const transition = local.transition;
-        const onComplete = local.onExitComplete;
-        if (isExiting) {
-            if (!lastIsExiting) {
-                lastIsExiting = true;
-                hasAnimated = false;
-                runExit(target, animate ?? initial, exit, transition, onComplete);
-            }
-            return;
-        }
-        lastIsExiting = false;
-        if (!hasAnimated || trigger !== lastTrigger) {
-            lastTrigger = trigger;
-            hasAnimated = true;
-            runEnter(target, initial, animate, transition);
-        }
-    });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        stopActive();
+    const positionClasses = [
+        horizontalOptions[local.horizontal || "end"],
+        verticalOptions[local.vertical || "bottom"]
+    ];
+    const limitedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const childrenArray = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>props.children).toArray();
+        if (local.max && local.max > 0) return childrenArray.slice(-local.max);
+        return childrenArray;
     });
     return (()=>{
-        var _el$ = MotionDiv_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
-            setElementRef(el);
-            if ("function" == typeof local.ref) local.ref(el);
-        }, _el$);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, rest, false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        var _el$ = Toast_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "status",
+            get ["class"] () {
+                return twMerge("toast", ...positionClasses, local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, limitedChildren);
         return _el$;
     })();
 };
-const MotionDiv = MotionDiv_MotionDiv;
+const toast_Toast = Toast;
 const [toasts, setToasts] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)([]);
 let toastCounter = 0;
 const toastTimers = new Map();
@@ -13582,4 +15071,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, 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, showcase_section_ShowcaseSection as 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 };