@pathscale/ui 0.0.57 → 0.0.58

package/dist/index.js

@@ -4462,15 +4462,15 @@ class jt extends _t {
 }
 class le extends _t {
 }
-const cally_x = "Custom", ue = null, fe = {
+const x = "Custom", ue = null, fe = {
     true: 1,
     "": 1,
     1: 1
 };
 function de(e, t, n, s, r) {
-    const { type: o, reflect: a, event: u, value: i, attr: l = he(t) } = n?.name != cally_x && R(n) && n != ue ? n : {
+    const { type: o, reflect: a, event: u, value: i, attr: l = he(t) } = n?.name != x && R(n) && n != ue ? n : {
         type: n
-    }, c = o?.name === cally_x && o.map, d = null != i ? o != Function && T(i) ? i : ()=>i : null;
+    }, c = o?.name === x && o.map, d = null != i ? o != Function && T(i) ? i : ()=>i : null;
     Object.defineProperty(e, t, {
         configurable: !0,
         set (f) {
@@ -4490,7 +4490,7 @@ function de(e, t, n, s, r) {
         type: o
     };
 }
-const Yt = (e, { type: t, base: n = CustomEvent, ...s })=>e.dispatchEvent(new n(t, s)), he = (e)=>e.replace(/([A-Z])/g, "-$1").toLowerCase(), me = (e, t, n, s)=>null != s && (t != Boolean || s) ? e.setAttribute(n, t?.name === cally_x && t?.serialize ? t?.serialize(s) : R(s) ? JSON.stringify(s) : t == Boolean ? "" : s) : e.removeAttribute(n), ye = (e, t)=>e == Boolean ? !!fe[t] : e == Number ? Number(t) : e == String ? t : e == Array || e == Object ? JSON.parse(t) : e.name == cally_x ? t : new e(t), pe = ({ map: e }, t)=>{
+const Yt = (e, { type: t, base: n = CustomEvent, ...s })=>e.dispatchEvent(new n(t, s)), he = (e)=>e.replace(/([A-Z])/g, "-$1").toLowerCase(), me = (e, t, n, s)=>null != s && (t != Boolean || s) ? e.setAttribute(n, t?.name === x && t?.serialize ? t?.serialize(s) : R(s) ? JSON.stringify(s) : t == Boolean ? "" : s) : e.removeAttribute(n), ye = (e, t)=>e == Boolean ? !!fe[t] : e == Number ? Number(t) : e == String ? t : e == Array || e == Object ? JSON.parse(t) : e.name == x ? t : new e(t), pe = ({ map: e }, t)=>{
     try {
         return {
             value: e(t),
@@ -4525,7 +4525,7 @@ let ge = 0;
 const ve = (e)=>{
     const t = (e?.dataset || {})?.hydrate || "";
     return t || "c" + ge++;
-}, cally_j = (e, t = HTMLElement)=>{
+}, j = (e, t = HTMLElement)=>{
     const n = {}, s = {}, r = "prototype" in t && t.prototype instanceof Element, o = r ? t : "base" in t ? t.base : HTMLElement, { props: a, styles: u } = r ? e : t;
     class i extends o {
         constructor(){
@@ -4860,7 +4860,7 @@ const Re = Ht("host", {
         t
     ]), (t || e).value;
 }, Le = (e)=>{
-    const t = cally_j(()=>($e(t, cally_().current), Re), {
+    const t = j(()=>($e(t, cally_().current), Re), {
         props: {
             value: {
                 type: Object,
@@ -5152,7 +5152,7 @@ const tt = lt(), ft = Le({
     }
 });
 customElements.define("calendar-ctx", ft);
-const We = (e, t)=>(t + e) % 7, Je = cally_j((e)=>{
+const We = (e, t)=>(t + e) % 7, Je = j((e)=>{
     const t = Ue(ft), n = ae(), s = Ke({
         props: e,
         context: t
@@ -5424,7 +5424,7 @@ function yt({ months: e, pageBy: t, locale: n, focusedDate: s, setFocusedDate: r
         focus: y
     };
 }
-const Qe = cally_j((e)=>{
+const Qe = j((e)=>{
     const [t, n] = N("value"), [s = t, r] = N("focusedDate"), o = yt({
         ...e,
         focusedDate: s,
@@ -5455,7 +5455,7 @@ const Mt = (e, t)=>v.compare(e, t) < 0 ? [
     ] : [
         t,
         e
-    ], Ve = cally_j((e)=>{
+    ], Ve = j((e)=>{
     const [t, n] = Be("value"), [s = t[0], r] = N("focusedDate"), o = yt({
         ...e,
         focusedDate: s,
@@ -5499,7 +5499,7 @@ const Mt = (e, t)=>v.compare(e, t) < 0 ? [
     styles: mt
 });
 customElements.define("calendar-range", Ve);
-const tn = cally_j((e)=>{
+const tn = j((e)=>{
     const [t, n] = qe("value"), [s = t[0], r] = N("focusedDate"), o = yt({
         ...e,
         focusedDate: s,
@@ -7242,7 +7242,6 @@ function ValidatedForm_ValidatedForm(props) {
         ],
         onSubmit: local.onSubmit
     });
-    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
     const contextValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
             errors,
             touched,
@@ -7258,7 +7257,7 @@ function ValidatedForm_ValidatedForm(props) {
             return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(form_Form, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
                 ref: form,
                 get children () {
-                    return resolvedChildren();
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"function" == typeof local.children)() ? local.children() : local.children;
                 }
             }));
         }
@@ -9484,392 +9483,252 @@ const steps_Steps = Object.assign(Steps, {
     Step: Step
 });
 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), _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) {
-    hex = hex.replace(/^#/, '');
-    const bigint = parseInt(hex, 16);
-    const r = bigint >> 16 & 255;
-    const g = bigint >> 8 & 255;
-    const b = 255 & bigint;
+var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><svg class="absolute inset-0 w-full h-full z-0"viewBox="0 0 400 400"preserveAspectRatio="xMidYMid slice"xmlns=http://www.w3.org/2000/svg><defs><linearGradient gradientTransform="rotate(63, 0.5, 0.5)"x1=50% y1=0% x2=50% y2=100%><stop stop-opacity=1 offset=0%></stop><stop stop-opacity=1 offset=100%></stop></linearGradient></defs><rect width=400 height=400></rect></svg><div class="relative z-10 h-full w-full">'), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><filter x=-20% y=-20% width=140% height=140% filterUnits=objectBoundingBox primitiveUnits=userSpaceOnUse color-interpolation-filters=sRGB></svg>", false, true, false), SvgBackground_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><feGaussianBlur in=SourceGraphic result=blur></svg>", false, true, false), SvgBackground_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><feTurbulence type=fractalNoise numOctaves=2 seed=10 stitchTiles=stitch result=turbulence></svg>", false, true, false), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><feGaussianBlur in=turbulence result=blur></svg>", false, true, false), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><feBlend in=SourceGraphic in2=blur result=blend></svg>", false, true, false), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
+function hexToHsl(hex) {
+    hex = hex.replace('#', '');
+    const r = parseInt(hex.substr(0, 2), 16) / 255;
+    const g = parseInt(hex.substr(2, 2), 16) / 255;
+    const b = parseInt(hex.substr(4, 2), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch(max){
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
     return {
-        r,
-        g,
-        b
+        h: Math.round(360 * h),
+        s: Math.round(100 * s),
+        l: Math.round(100 * l)
     };
 }
-function SvgBackground(props) {
-    const { colorStart = '#6366f1', colorEnd = '#4f46e5', backgroundColor = '#000000', opacity = 1, blurIntensity = 40, density = 5, darkness = 0, class: className = '', style = {}, children } = props;
-    let containerRef;
-    let svgRef;
-    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 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);
-        return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+function parseColor(colorString) {
+    const hslMatch = colorString.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
+    if (hslMatch) return {
+        h: parseInt(hslMatch[1]),
+        s: parseInt(hslMatch[2]),
+        l: parseInt(hslMatch[3])
     };
-    const generateShapes = ()=>{
-        const normalizedDensity = Math.max(1, density);
-        const maxShapes = Math.min(200, Math.max(10, Math.ceil(15 + 8 * Math.sqrt(normalizedDensity))));
-        const colors = [];
-        for(let i = 0; i < maxShapes; i++){
-            const randomOffset = 0.1 * Math.sin(0.1 * i);
-            const t = i / (maxShapes - 1) + randomOffset;
-            colors.push(getIntermediateColor(Math.max(0, Math.min(1, t))));
-        }
-        const seed = 42;
-        const random = (i)=>{
-            const x = 10000 * Math.sin(seed + 100 * i);
-            return x - Math.floor(x);
-        };
-        const gridSize = Math.ceil(Math.sqrt(maxShapes / 1.5));
-        const cellWidth = 400 / gridSize;
-        const cellHeight = 400 / gridSize;
-        const minRadius = 40;
-        const baseCount = Math.ceil(gridSize * gridSize * 0.8);
-        const baseShapes = [];
-        const coveredGrid = Array(gridSize).fill(0).map(()=>Array(gridSize).fill(false));
-        for(let i = 0; i < gridSize; i++)for(let j = 0; j < gridSize; j++){
-            if (baseShapes.length >= baseCount) continue;
-            const isLeftSide = i < gridSize / 3;
-            const leftSideMultiplier = isLeftSide ? 3 : 1;
-            const skipChance = Math.max(0, (0.2 - normalizedDensity / 100) * leftSideMultiplier);
-            if (random(100 * i + j) < skipChance) continue;
-            coveredGrid[i][j] = true;
-            const randomOffsetMultiplier = isLeftSide ? 1.5 : 1;
-            const randomOffset = 0.4 * Math.min(cellWidth, cellHeight) * (1 - Math.min(1, normalizedDensity / 50)) * randomOffsetMultiplier;
-            const cx = i * cellWidth + cellWidth / 2 + (2 * random(200 * i + j) - 1) * randomOffset;
-            const cy = j * cellHeight + cellHeight / 2 + (2 * random(300 * i + j) - 1) * randomOffset;
-            const sizeRatioBase = Math.max(0.6, 1.2 - 0.15 * Math.log10(normalizedDensity + 1));
-            const sizeRatio = isLeftSide ? 0.8 * sizeRatioBase : sizeRatioBase;
-            const baseRadius = Math.min(cellWidth, cellHeight) * sizeRatio;
-            const sizeVariationBase = Math.max(0.2, 0.5 - normalizedDensity / 200);
-            const sizeVariation = isLeftSide ? 1.5 * sizeVariationBase : sizeVariationBase;
-            const radius = Math.max(minRadius, baseRadius * (0.8 + random(400 * i + j) * sizeVariation));
-            const colorIndexBase = Math.floor(random(500 * i + j) * colors.length);
-            const colorIndex = isLeftSide ? Math.floor((colorIndexBase + random(600 * i + j) * colors.length) / 2) : colorIndexBase;
-            const color = colors[colorIndex];
-            const opacity = isLeftSide && random(700 * i + j) > 0.6 ? 0.7 + 0.3 * random(800 * i + j) : 1;
-            const ellipseChance = isLeftSide ? 0.6 : 0.4;
-            if (random(600 * i + j) > 1 - ellipseChance) {
-                const rx = radius;
-                const ry = Math.max(minRadius, radius * (0.6 + 0.8 * random(700 * i + j)));
-                const rotation = 360 * random(800 * i + j);
-                baseShapes.push((()=>{
-                    var _el$ = SvgBackground_tmpl$();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "fill", color);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "transform", `rotate(${rotation} ${cx} ${cy})`);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                        var _v$ = cx.toString(), _v$2 = cy.toString(), _v$3 = rx.toString(), _v$4 = ry.toString(), _v$5 = opacity.toString();
-                        _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "cx", _p$.e = _v$);
-                        _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "cy", _p$.t = _v$2);
-                        _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "rx", _p$.a = _v$3);
-                        _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "ry", _p$.o = _v$4);
-                        _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "opacity", _p$.i = _v$5);
-                        return _p$;
-                    }, {
-                        e: void 0,
-                        t: void 0,
-                        a: void 0,
-                        o: void 0,
-                        i: void 0
-                    });
-                    return _el$;
-                })());
-            } else baseShapes.push((()=>{
-                var _el$2 = SvgBackground_tmpl$2();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "fill", color);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                    var _v$6 = cx.toString(), _v$7 = cy.toString(), _v$8 = radius.toString(), _v$9 = opacity.toString();
-                    _v$6 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "cx", _p$.e = _v$6);
-                    _v$7 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "cy", _p$.t = _v$7);
-                    _v$8 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "r", _p$.a = _v$8);
-                    _v$9 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "opacity", _p$.o = _v$9);
-                    return _p$;
-                }, {
-                    e: void 0,
-                    t: void 0,
-                    a: void 0,
-                    o: void 0
-                });
-                return _el$2;
-            })());
-        }
-        for(let i = 0; i < gridSize; i++)for(let j = 0; j < gridSize; j++)if (!coveredGrid[i][j]) {
-            const isLeftSide = i < gridSize / 3;
-            if (isLeftSide && random(900 * i + j) < 0.3) continue;
-            const cx = i * cellWidth + cellWidth / 2;
-            const cy = j * cellHeight + cellHeight / 2;
-            const radiusBase = 0.7 * Math.min(cellWidth, cellHeight);
-            const radius = Math.max(minRadius, isLeftSide ? 0.8 * radiusBase : radiusBase);
-            const colorIndex = Math.floor(random(900 * i + j) * colors.length);
-            const opacity = isLeftSide ? 0.7 + 0.3 * random(950 * i + j) : 1;
-            baseShapes.push((()=>{
-                var _el$3 = SvgBackground_tmpl$2();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                    var _v$0 = cx.toString(), _v$1 = cy.toString(), _v$10 = radius.toString(), _v$11 = colors[colorIndex], _v$12 = opacity.toString();
-                    _v$0 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "cx", _p$.e = _v$0);
-                    _v$1 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "cy", _p$.t = _v$1);
-                    _v$10 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "r", _p$.a = _v$10);
-                    _v$11 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "fill", _p$.o = _v$11);
-                    _v$12 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "opacity", _p$.i = _v$12);
-                    return _p$;
-                }, {
-                    e: void 0,
-                    t: void 0,
-                    a: void 0,
-                    o: void 0,
-                    i: void 0
-                });
-                return _el$3;
-            })());
-        }
-        const edgeShapes = [
-            (()=>{
-                var _el$4 = SvgBackground_tmpl$3();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "fill", colorStart);
-                return _el$4;
-            })(),
-            (()=>{
-                var _el$5 = SvgBackground_tmpl$4();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "fill", getIntermediateColor(0.25)));
-                return _el$5;
-            })(),
-            (()=>{
-                var _el$6 = _tmpl$5();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "fill", getIntermediateColor(0.75)));
-                return _el$6;
-            })(),
-            (()=>{
-                var _el$7 = _tmpl$6();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$7, "fill", colorEnd);
-                return _el$7;
-            })(),
-            (()=>{
-                var _el$8 = _tmpl$7();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$8, "fill", getIntermediateColor(0.65)));
-                return _el$8;
-            })(),
-            (()=>{
-                var _el$9 = _tmpl$8();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$9, "fill", getIntermediateColor(0.15)));
-                return _el$9;
-            })(),
-            (()=>{
-                var _el$0 = _tmpl$9();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "fill", getIntermediateColor(0.4)));
-                return _el$0;
-            })(),
-            (()=>{
-                var _el$1 = _tmpl$0();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "fill", getIntermediateColor(0.85)));
-                return _el$1;
-            })()
-        ];
-        const accentShapes = [];
-        const accentCount = Math.max(0, maxShapes - baseShapes.length - edgeShapes.length);
-        const leftSideAccentCount = Math.floor(0.6 * accentCount);
-        const rightSideAccentCount = accentCount - leftSideAccentCount;
-        for(let i = 0; i < leftSideAccentCount; i++){
-            const cx = 20 + 120 * random(1000 + i);
-            const cy = 20 + 360 * random(2000 + i);
-            const radius = minRadius * (0.5 + 0.6 * random(3000 + i));
-            const colorIndex = Math.floor(random(4000 + i) * colors.length);
-            const opacity = 0.6 + 0.4 * random(5500 + i);
-            if (random(5000 + i) > 0.4) accentShapes.push((()=>{
-                var _el$10 = SvgBackground_tmpl$2();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                    var _v$13 = cx.toString(), _v$14 = cy.toString(), _v$15 = radius.toString(), _v$16 = colors[colorIndex], _v$17 = opacity.toString();
-                    _v$13 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "cx", _p$.e = _v$13);
-                    _v$14 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "cy", _p$.t = _v$14);
-                    _v$15 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "r", _p$.a = _v$15);
-                    _v$16 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "fill", _p$.o = _v$16);
-                    _v$17 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "opacity", _p$.i = _v$17);
-                    return _p$;
-                }, {
-                    e: void 0,
-                    t: void 0,
-                    a: void 0,
-                    o: void 0,
-                    i: void 0
-                });
-                return _el$10;
-            })());
-            else {
-                const rx = radius;
-                const ry = radius * (0.4 + 0.6 * random(6000 + i));
-                const rotation = 360 * random(7000 + i);
-                accentShapes.push((()=>{
-                    var _el$11 = SvgBackground_tmpl$();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "transform", `rotate(${rotation} ${cx} ${cy})`);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                        var _v$18 = cx.toString(), _v$19 = cy.toString(), _v$20 = rx.toString(), _v$21 = ry.toString(), _v$22 = colors[colorIndex], _v$23 = opacity.toString();
-                        _v$18 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "cx", _p$.e = _v$18);
-                        _v$19 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "cy", _p$.t = _v$19);
-                        _v$20 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "rx", _p$.a = _v$20);
-                        _v$21 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "ry", _p$.o = _v$21);
-                        _v$22 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "fill", _p$.i = _v$22);
-                        _v$23 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "opacity", _p$.n = _v$23);
-                        return _p$;
-                    }, {
-                        e: void 0,
-                        t: void 0,
-                        a: void 0,
-                        o: void 0,
-                        i: void 0,
-                        n: void 0
-                    });
-                    return _el$11;
-                })());
-            }
-        }
-        for(let i = 0; i < rightSideAccentCount; i++){
-            const cx = 140 + 260 * random(8000 + i);
-            const cy = 20 + 360 * random(9000 + i);
-            const radius = minRadius * (0.7 + 0.8 * random(10000 + i));
-            const colorIndex = Math.floor(random(11000 + i) * colors.length);
-            if (random(12000 + i) > 0.3) accentShapes.push((()=>{
-                var _el$12 = SvgBackground_tmpl$2();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                    var _v$24 = cx.toString(), _v$25 = cy.toString(), _v$26 = radius.toString(), _v$27 = colors[colorIndex];
-                    _v$24 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "cx", _p$.e = _v$24);
-                    _v$25 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "cy", _p$.t = _v$25);
-                    _v$26 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "r", _p$.a = _v$26);
-                    _v$27 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "fill", _p$.o = _v$27);
-                    return _p$;
-                }, {
-                    e: void 0,
-                    t: void 0,
-                    a: void 0,
-                    o: void 0
-                });
-                return _el$12;
-            })());
-            else {
-                const rx = radius;
-                const ry = radius * (0.5 + 0.8 * random(13000 + i));
-                const rotation = 360 * random(14000 + i);
-                accentShapes.push((()=>{
-                    var _el$13 = SvgBackground_tmpl$();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "transform", `rotate(${rotation} ${cx} ${cy})`);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                        var _v$28 = cx.toString(), _v$29 = cy.toString(), _v$30 = rx.toString(), _v$31 = ry.toString(), _v$32 = colors[colorIndex];
-                        _v$28 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "cx", _p$.e = _v$28);
-                        _v$29 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "cy", _p$.t = _v$29);
-                        _v$30 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "rx", _p$.a = _v$30);
-                        _v$31 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "ry", _p$.o = _v$31);
-                        _v$32 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "fill", _p$.i = _v$32);
-                        return _p$;
-                    }, {
-                        e: void 0,
-                        t: void 0,
-                        a: void 0,
-                        o: void 0,
-                        i: void 0
-                    });
-                    return _el$13;
-                })());
-            }
+    const hexMatch = colorString.match(/^#?([a-fA-F0-9]{6})$/);
+    if (hexMatch) return hexToHsl(colorString);
+    const rgbMatch = colorString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (rgbMatch) {
+        const r = parseInt(rgbMatch[1]) / 255;
+        const g = parseInt(rgbMatch[2]) / 255;
+        const b = parseInt(rgbMatch[3]) / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0;
+        let s = 0;
+        const l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch(max){
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
         }
-        return [
-            ...edgeShapes,
-            ...baseShapes,
-            ...accentShapes
-        ];
-    };
-    const renderSvgToCanvas = ()=>{
-        if (!svgRef || !canvasRef) return;
-        const svgData = new XMLSerializer().serializeToString(svgRef);
-        const svgBlob = new Blob([
-            svgData
-        ], {
-            type: 'image/svg+xml'
-        });
-        const svgUrl = URL.createObjectURL(svgBlob);
-        const img = new Image();
-        img.src = svgUrl;
-        img.onload = ()=>{
-            if (!canvasRef) return;
-            if (containerRef) {
-                const rect = containerRef.getBoundingClientRect();
-                const blurPadding = Math.ceil(2 * blurIntensity);
-                canvasRef.width = rect.width + 2 * blurPadding;
-                canvasRef.height = rect.height + 2 * blurPadding;
-            }
-            const ctx = canvasRef.getContext('2d');
-            if (!ctx) return;
-            ctx.clearRect(0, 0, canvasRef.width, canvasRef.height);
-            ctx.fillStyle = backgroundColor;
-            ctx.fillRect(0, 0, canvasRef.width, canvasRef.height);
-            ctx.drawImage(img, 2 * -blurIntensity, 2 * -blurIntensity, canvasRef.width + 4 * blurIntensity, canvasRef.height + 4 * blurIntensity);
-            URL.revokeObjectURL(svgUrl);
-            setBackgroundReady(true);
+        return {
+            h: Math.round(360 * h),
+            s: Math.round(100 * s),
+            l: Math.round(100 * l)
         };
+    }
+    return {
+        h: 0,
+        s: 0,
+        l: 0
     };
+}
+function interpolateHue(h1, h2, t) {
+    const diff = h2 - h1;
+    if (Math.abs(diff) > 180) if (diff > 0) h1 += 360;
+    else h2 += 360;
+    return (h1 + (h2 - h1) * t + 360) % 360;
+}
+let instanceCounter = 0;
+function generateStableId() {
+    return `svg-bg-${++instanceCounter}-${Date.now()}`;
+}
+function SvgBackground(props) {
+    const { colorStart = '#000000', colorEnd = '#333333', opacity = 1, blurIntensity = 36, turbulenceFrequency = 0.007, animated = false, animationSpeed = 1, class: className = '', style = {}, children, darkness = 0 } = props;
+    const [animationTime, setAnimationTime] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(0);
+    let animationFrame = null;
+    let gradientStop1Ref;
+    let gradientStop2Ref;
+    let turbulenceRef;
+    const gradientId = `gradient-${generateStableId()}`;
+    const filterId = `filter-${generateStableId()}`;
+    const shouldUseFilters = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>blurIntensity > 0 && turbulenceFrequency > 0.001);
+    const isGrayscaleColors = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const startHSL = parseColor(colorStart);
+        const endHSL = parseColor(colorEnd);
+        return startHSL.s < 15 && endHSL.s < 15;
+    });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
-        if (window && 'ResizeObserver' in window) {
-            const observer = new ResizeObserver(()=>{
-                renderSvgToCanvas();
-            });
-            if (containerRef) observer.observe(containerRef);
-            return ()=>{
-                if (containerRef) observer.unobserve(containerRef);
+        if (animated) {
+            const animate = ()=>{
+                setAnimationTime((prev)=>prev + 0.008 * animationSpeed);
+                animationFrame = requestAnimationFrame(animate);
             };
+            animate();
         }
-        renderSvgToCanvas();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        if (animationFrame) cancelAnimationFrame(animationFrame);
+    });
+    const startHSL = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>parseColor(colorStart));
+    const endHSL = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>parseColor(colorEnd));
+    const animatedColors = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (!animated) return {
+            color1: colorStart,
+            color2: colorEnd,
+            turbFreq1: turbulenceFrequency,
+            turbFreq2: 0.4 * turbulenceFrequency
+        };
+        const time = animationTime();
+        const baseSpeed = 0.001 * animationSpeed;
+        const freq1 = time * baseSpeed * 7;
+        const freq2 = time * baseSpeed * 11;
+        const freq3 = time * baseSpeed * 13;
+        const freq4 = time * baseSpeed * 17;
+        const freq5 = time * baseSpeed * 19;
+        const wave1 = 0.3 * Math.sin(freq1);
+        const wave2 = 0.25 * Math.sin(freq2);
+        const wave3 = 0.2 * Math.sin(freq3);
+        const wave4 = 0.15 * Math.sin(freq4);
+        const wave5 = 0.1 * Math.sin(freq5);
+        const combinedWave = wave1 + wave2 + wave3 + wave4 + wave5;
+        const colorMix = (combinedWave + 1) / 2;
+        const wave1b = 0.3 * Math.cos(freq2);
+        const wave2b = 0.25 * Math.cos(freq3);
+        const wave3b = 0.2 * Math.cos(freq4);
+        const wave4b = 0.15 * Math.cos(freq5);
+        const wave5b = 0.1 * Math.cos(freq1);
+        const combinedWave2 = wave1b + wave2b + wave3b + wave4b + wave5b;
+        const colorMix2 = (combinedWave2 + 1) / 2;
+        const turbMix1 = (0.5 * Math.sin(0.3 * freq1) + 0.5 * Math.cos(0.2 * freq2) + 1) / 2;
+        const turbMix2 = (0.5 * Math.cos(0.2 * freq3) + 0.5 * Math.sin(0.3 * freq4) + 1) / 2;
+        let color1 = colorStart;
+        let color2 = colorEnd;
+        const start = startHSL();
+        const end = endHSL();
+        const h1 = interpolateHue(start.h, end.h, colorMix);
+        const s1 = start.s + (end.s - start.s) * colorMix;
+        const l1 = start.l + (end.l - start.l) * colorMix;
+        const h2 = interpolateHue(start.h, end.h, colorMix2);
+        const s2 = start.s + (end.s - start.s) * colorMix2;
+        const l2 = start.l + (end.l - start.l) * colorMix2;
+        color1 = `hsl(${Math.round(h1)}, ${Math.round(s1)}%, ${Math.round(l1)}%)`;
+        color2 = `hsl(${Math.round(h2)}, ${Math.round(s2)}%, ${Math.round(l2)}%)`;
+        const turbFreq1 = turbulenceFrequency + 0.01 * turbulenceFrequency * turbMix1;
+        const turbFreq2 = 0.4 * turbulenceFrequency + 0.01 * turbulenceFrequency * turbMix2;
+        return {
+            color1,
+            color2,
+            turbFreq1,
+            turbFreq2
+        };
     });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        setTimeout(()=>{
-            renderSvgToCanvas();
-        }, 0);
+        const colors = animatedColors();
+        if (gradientStop1Ref) gradientStop1Ref.setAttribute('stop-color', colors.color1);
+        if (gradientStop2Ref) gradientStop2Ref.setAttribute('stop-color', colors.color2);
+        if (turbulenceRef) turbulenceRef.setAttribute('baseFrequency', `${colors.turbFreq1} ${colors.turbFreq2}`);
     });
-    const backgroundStyle = ()=>({
+    const backgroundStyle = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
             position: 'relative',
-            overflow: 'hidden',
             ...style
-        });
-    const canvasStyle = ()=>({
-            position: 'absolute',
-            top: `-${2 * blurIntensity}px`,
-            left: `-${2 * blurIntensity}px`,
-            width: `calc(100% + ${4 * blurIntensity}px)`,
-            height: `calc(100% + ${4 * blurIntensity}px)`,
-            'z-index': '0',
-            opacity: opacity.toString(),
-            filter: `blur(${blurIntensity}px)`
-        });
+        }));
     return (()=>{
-        var _el$14 = _tmpl$1(), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$15.nextSibling, _el$19 = _el$18.nextSibling;
-        var _ref$ = containerRef;
-        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$14) : containerRef = _el$14;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$14, `relative flex items-center justify-center ${className}`);
-        _el$15.style.setProperty("display", "none");
-        var _ref$2 = svgRef;
-        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$16) : svgRef = _el$16;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$17, "fill", backgroundColor);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$16, generateShapes, null);
-        var _ref$3 = canvasRef;
-        "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$18) : canvasRef = _el$18;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$14, darkness > 0 && (()=>{
-            var _el$20 = _tmpl$10();
-            _el$20.style.setProperty("background-color", `rgba(0, 0, 0, ${darkness})`);
-            _el$20.style.setProperty("pointer-events", "none");
-            return _el$20;
-        })(), _el$19);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$19, children);
+        var _el$ = SvgBackground_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$3.nextSibling, _el$8 = _el$2.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, `relative ${className}`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "id", gradientId);
+        var _ref$ = gradientStop1Ref;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$5) : gradientStop1Ref = _el$5;
+        var _ref$2 = gradientStop2Ref;
+        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$6) : gradientStop2Ref = _el$6;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!shouldUseFilters());
+            return ()=>_c$() && (()=>{
+                    var _el$9 = SvgBackground_tmpl$2();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$9, "id", filterId);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, (()=>{
+                        var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!isGrayscaleColors());
+                        return ()=>_c$2() ? (()=>{
+                                var _el$0 = SvgBackground_tmpl$3();
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "stdDeviation", `${0.3 * blurIntensity} ${0.3 * blurIntensity}`);
+                                return _el$0;
+                            })() : [
+                                (()=>{
+                                    var _el$1 = SvgBackground_tmpl$4();
+                                    var _ref$3 = turbulenceRef;
+                                    "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$1) : turbulenceRef = _el$1;
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "baseFrequency", `${animatedColors().turbFreq1} ${animatedColors().turbFreq2}`));
+                                    return _el$1;
+                                })(),
+                                (()=>{
+                                    var _el$10 = _tmpl$5();
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "stdDeviation", `${blurIntensity} ${blurIntensity}`);
+                                    return _el$10;
+                                })(),
+                                (()=>{
+                                    var _el$11 = _tmpl$6();
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "mode", "color-dodge");
+                                    return _el$11;
+                                })()
+                            ];
+                    })());
+                    return _el$9;
+                })();
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$7, "fill", `url(#${gradientId})`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, darkness > 0 && (()=>{
+            var _el$12 = _tmpl$7();
+            _el$12.style.setProperty("background-color", `rgba(0, 0, 0, ${darkness})`);
+            _el$12.style.setProperty("pointer-events", "none");
+            return _el$12;
+        })(), _el$8);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, children);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$33 = backgroundStyle(), _v$34 = canvasStyle();
-            _p$.e = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$14, _v$33, _p$.e);
-            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$18, _v$34, _p$.t);
+            var _v$ = backgroundStyle(), _v$2 = opacity.toString(), _v$3 = animatedColors().color1, _v$4 = animatedColors().color2, _v$5 = shouldUseFilters() ? `url(#${filterId})` : 'none';
+            _p$.e = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$, _p$.e);
+            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$2.style.setProperty("opacity", _v$2) : _el$2.style.removeProperty("opacity"));
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "stop-color", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "stop-color", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$7, "filter", _p$.i = _v$5);
             return _p$;
         }, {
             e: void 0,
-            t: void 0
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0
         });
-        return _el$14;
+        return _el$;
     })();
 }
 var Swap_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label><input type=checkbox>");

package/package.json

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