@pathscale/ui 0.0.58 → 0.0.60

package/dist/index.js

@@ -3623,12 +3623,14 @@ const Alert = (props)=>{
         "class",
         "className",
         "style",
+        "children",
         "aria-atomic",
         "aria-live",
         "aria-relevant",
         "aria-label",
         "aria-labelledby"
     ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
     const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("alert", local.class, local.className, clsx({
             "alert-vertical": "vertical" === local.layout,
             "alert-horizontal": "horizontal" === local.layout,
@@ -3674,7 +3676,7 @@ const Alert = (props)=>{
             }
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.icon, null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren, null);
         return _el$;
     })();
 };
@@ -4462,15 +4464,15 @@ class jt extends _t {
 }
 class le extends _t {
 }
-const x = "Custom", ue = null, fe = {
+const cally_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 != x && R(n) && n != ue ? n : {
+    const { type: o, reflect: a, event: u, value: i, attr: l = he(t) } = n?.name != cally_x && R(n) && n != ue ? n : {
         type: n
-    }, c = o?.name === x && o.map, d = null != i ? o != Function && T(i) ? i : ()=>i : null;
+    }, c = o?.name === cally_x && o.map, d = null != i ? o != Function && T(i) ? i : ()=>i : null;
     Object.defineProperty(e, t, {
         configurable: !0,
         set (f) {
@@ -4490,7 +4492,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 === 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)=>{
+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)=>{
     try {
         return {
             value: e(t),
@@ -4525,7 +4527,7 @@ let ge = 0;
 const ve = (e)=>{
     const t = (e?.dataset || {})?.hydrate || "";
     return t || "c" + ge++;
-}, j = (e, t = HTMLElement)=>{
+}, cally_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 +4862,7 @@ const Re = Ht("host", {
         t
     ]), (t || e).value;
 }, Le = (e)=>{
-    const t = j(()=>($e(t, cally_().current), Re), {
+    const t = cally_j(()=>($e(t, cally_().current), Re), {
         props: {
             value: {
                 type: Object,
@@ -5152,7 +5154,7 @@ const tt = lt(), ft = Le({
     }
 });
 customElements.define("calendar-ctx", ft);
-const We = (e, t)=>(t + e) % 7, Je = j((e)=>{
+const We = (e, t)=>(t + e) % 7, Je = cally_j((e)=>{
     const t = Ue(ft), n = ae(), s = Ke({
         props: e,
         context: t
@@ -5424,7 +5426,7 @@ function yt({ months: e, pageBy: t, locale: n, focusedDate: s, setFocusedDate: r
         focus: y
     };
 }
-const Qe = j((e)=>{
+const Qe = cally_j((e)=>{
     const [t, n] = N("value"), [s = t, r] = N("focusedDate"), o = yt({
         ...e,
         focusedDate: s,
@@ -5455,7 +5457,7 @@ const Mt = (e, t)=>v.compare(e, t) < 0 ? [
     ] : [
         t,
         e
-    ], Ve = j((e)=>{
+    ], Ve = cally_j((e)=>{
     const [t, n] = Be("value"), [s = t[0], r] = N("focusedDate"), o = yt({
         ...e,
         focusedDate: s,
@@ -5499,7 +5501,7 @@ const Mt = (e, t)=>v.compare(e, t) < 0 ? [
     styles: mt
 });
 customElements.define("calendar-range", Ve);
-const tn = j((e)=>{
+const tn = cally_j((e)=>{
     const [t, n] = qe("value"), [s = t[0], r] = N("focusedDate"), o = yt({
         ...e,
         focusedDate: s,
@@ -7714,32 +7716,58 @@ const Link = (props)=>{
         "color",
         "hover",
         "class",
-        "data-theme"
+        "className",
+        "dataTheme",
+        "style",
+        "asChild",
+        "aria-current",
+        "aria-label",
+        "aria-describedby"
     ]);
-    const classes = twMerge("link", dist_clsx({
-        "link-hover": false !== local.hover,
-        "link-neutral": "neutral" === local.color,
-        "link-primary": "primary" === local.color,
-        "link-secondary": "secondary" === local.color,
-        "link-accent": "accent" === local.color,
-        "link-info": "info" === local.color,
-        "link-success": "success" === local.color,
-        "link-warning": "warning" === local.color,
-        "link-error": "error" === local.color
-    }), local.class);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("link", dist_clsx({
+            "link-hover": false !== local.hover,
+            "link-neutral": "neutral" === local.color,
+            "link-primary": "primary" === local.color,
+            "link-secondary": "secondary" === local.color,
+            "link-accent": "accent" === local.color,
+            "link-info": "info" === local.color,
+            "link-success": "success" === local.color,
+            "link-warning": "warning" === local.color,
+            "link-error": "error" === local.color,
+            "link-ghost": "ghost" === local.color
+        }), local.class, local.className));
+    const ariaCurrent = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local["aria-current"]);
+    const ariaLabel = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local["aria-label"]);
+    const ariaDescribedby = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local["aria-describedby"]);
+    if (local.asChild) return resolvedChildren();
     return (()=>{
         var _el$ = Link_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
             get href () {
                 return local.href;
             },
-            class: classes,
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            },
             get ["data-theme"] () {
-                return local["data-theme"];
+                return local.dataTheme;
+            },
+            get ["aria-current"] () {
+                return ariaCurrent();
+            },
+            get ["aria-label"] () {
+                return ariaLabel();
+            },
+            get ["aria-describedby"] () {
+                return ariaDescribedby();
             },
             rel: "noopener noreferrer"
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
         return _el$;
     })();
 };
@@ -8226,7 +8254,7 @@ const NavbarRow = (props)=>{
         "dataTheme"
     ]);
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("flex items-center", local.class, local.className, clsx({
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("flex items-center", clsx({
             "border-b border-gray-200": true === local.bordered,
             "px-4 py-2": false !== local.padded,
             "bg-base-100": !local.color || "ghost" === local.color,
@@ -8238,7 +8266,7 @@ const NavbarRow = (props)=>{
             "bg-success text-success-content": "success" === local.color,
             "bg-warning text-warning-content": "warning" === local.color,
             "bg-error text-error-content": "error" === local.color
-        })));
+        }), local.class, local.className));
     return (()=>{
         var _el$ = NavbarRow_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
@@ -9483,252 +9511,392 @@ 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)('<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;
-    }
+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;
     return {
-        h: Math.round(360 * h),
-        s: Math.round(100 * s),
-        l: Math.round(100 * l)
+        r,
+        g,
+        b
     };
 }
-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])
+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')}`;
     };
-    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;
+    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))));
         }
-        return {
-            h: Math.round(360 * h),
-            s: Math.round(100 * s),
-            l: Math.round(100 * l)
+        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;
+                })());
+            }
+        }
+        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: 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 (animated) {
-            const animate = ()=>{
-                setAnimationTime((prev)=>prev + 0.008 * animationSpeed);
-                animationFrame = requestAnimationFrame(animate);
+        if (window && 'ResizeObserver' in window) {
+            const observer = new ResizeObserver(()=>{
+                renderSvgToCanvas();
+            });
+            if (containerRef) observer.observe(containerRef);
+            return ()=>{
+                if (containerRef) observer.unobserve(containerRef);
             };
-            animate();
         }
-    });
-    (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
-        };
+        renderSvgToCanvas();
     });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        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}`);
+        setTimeout(()=>{
+            renderSvgToCanvas();
+        }, 0);
     });
-    const backgroundStyle = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
+    const backgroundStyle = ()=>({
             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$ = 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);
+        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);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            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);
+            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);
             return _p$;
         }, {
             e: void 0,
-            t: void 0,
-            a: void 0,
-            o: void 0,
-            i: void 0
+            t: void 0
         });
-        return _el$;
+        return _el$14;
     })();
 }
 var Swap_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label><input type=checkbox>");

package/dist/styles/icons/generated-icons.css

@@ -1 +1 @@
-.iconify{background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.iconify,.iconify-color{display:inline-block;height:1em;width:1em}.iconify-color{background-repeat:no-repeat;background-size:100% 100%}.icon-[mdi-light--chevron-left]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.41 18.16 8.75 12.5l5.66-5.66.7.71-4.95 4.95 4.95 4.95z'/%3E%3C/svg%3E")}.icon-[mdi-light--chevron-left].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--chevron-left].iconify-color{background-image:var(--svg)}.icon-[mdi-light--chevron-right]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m8.59 18.16 5.66-5.66-5.66-5.66-.7.71 4.95 4.95-4.95 4.95z'/%3E%3C/svg%3E")}.icon-[mdi-light--chevron-right].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--chevron-right].iconify-color{background-image:var(--svg)}.icon-[mdi-light--home]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m16 8.41-4.5-4.5L4.41 11H6v8h3v-6h5v6h3v-8h1.59L17 9.41V6h-1zM2 12l9.5-9.5L15 6V5h3v4l3 3h-3v8h-5v-6h-3v6H5v-8z'/%3E%3C/svg%3E")}.icon-[mdi-light--home].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--home].iconify-color{background-image:var(--svg)}
+.iconify{background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.iconify,.iconify-color{display:inline-block;height:1em;width:1em}.iconify-color{background-repeat:no-repeat;background-size:100% 100%}.icon-[mdi-light--chevron-left]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.41 18.16 8.75 12.5l5.66-5.66.7.71-4.95 4.95 4.95 4.95z'/%3E%3C/svg%3E")}.icon-[mdi-light--chevron-left].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--chevron-left].iconify-color{background-image:var(--svg)}.icon-[mdi-light--chevron-right]{--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m8.59 18.16 5.66-5.66-5.66-5.66-.7.71 4.95 4.95-4.95 4.95z'/%3E%3C/svg%3E")}.icon-[mdi-light--chevron-right].iconify{-webkit-mask-image:var(--svg);mask-image:var(--svg)}.icon-[mdi-light--chevron-right].iconify-color{background-image:var(--svg)}

package/package.json

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