@pathscale/ui 0.0.39 → 0.0.41

package/dist/index.js

@@ -1,5 +1,7 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__felte_solid_6a709b1d__ from "@felte/solid";
+import * as __WEBPACK_EXTERNAL_MODULE__felte_validator_zod_bb07151a__ from "@felte/validator-zod";
 const CLASS_PART_SEPARATOR = '-';
 const createClassGroupUtils = (config)=>{
     const classMap = createClassMap(config);
@@ -3533,6 +3535,43 @@ const Alert = (props)=>{
     })();
 };
 const alert_Alert = Alert;
+var Artboard_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Artboard = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "demo",
+        "size",
+        "horizontal",
+        "dataTheme",
+        "class",
+        "className"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("artboard", local.class, local.className, dist_clsx({
+            "artboard-demo": local.demo ?? true,
+            "phone-1": 1 === local.size,
+            "phone-2": 2 === local.size,
+            "phone-3": 3 === local.size,
+            "phone-4": 4 === local.size,
+            "phone-5": 5 === local.size,
+            "phone-6": 6 === local.size,
+            horizontal: local.horizontal
+        })));
+    return (()=>{
+        var _el$ = Artboard_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const artboard_Artboard = Artboard;
 const VoidElementList = [
     "area",
     "base",
@@ -3854,6 +3893,56 @@ const BreadcrumbsItem = (props)=>{
     })();
 };
 const breadcrumbs_BreadcrumbsItem = BreadcrumbsItem;
+var BrowserMockup_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=mockup-browser-toolbar><div class=input><input type=text readonly></div></div><div>");
+const BrowserMockup = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "dataTheme",
+        "class",
+        "className",
+        "inputClassName",
+        "innerClassName",
+        "children",
+        "url",
+        "variant"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const variant = ()=>local.variant ?? "border";
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("mockup-browser border", dist_clsx({
+            "border-base-300": "border" === variant(),
+            "bg-base-300": "background" === variant()
+        }), local.class, local.className));
+    const inputClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("input", dist_clsx({
+            "border-base-300": "border" === variant()
+        }), local.inputClassName));
+    const innerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("flex justify-center px-4 py-16", dist_clsx({
+            "border-t border-base-300": "border" === variant(),
+            "bg-base-200": "background" === variant()
+        }), local.innerClassName));
+    return (()=>{
+        var _el$ = BrowserMockup_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$2.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, resolvedChildren);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = inputClasses(), _v$2 = innerClasses();
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, _p$.t = _v$2);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$4.value = local.url);
+        return _el$;
+    })();
+};
+const browsermockup_BrowserMockup = BrowserMockup;
 var Loading_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
 const Loading = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -4205,7 +4294,7 @@ const ChatBubbleTime = (props)=>(()=>{
         return _el$;
     })();
 const chatbubble_ChatBubbleTime = ChatBubbleTime;
-const ChatBubbleAvatar = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(avatar, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+const ChatBubbleAvatar_ChatBubbleAvatar = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(avatar, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
         get size () {
             return props.size ?? "xs";
         },
@@ -4216,7 +4305,7 @@ const ChatBubbleAvatar = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d
             return twMerge("chat-image", props.class);
         }
     }));
-const chatbubble_ChatBubbleAvatar = ChatBubbleAvatar;
+const ChatBubbleAvatar = ChatBubbleAvatar_ChatBubbleAvatar;
 var ChatBubbleMessage_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const ChatBubbleMessage_ChatBubbleMessage = (props)=>{
     const bubbleClass = clsx({
@@ -4282,7 +4371,7 @@ const ChatBubble = (props)=>{
 const chatbubble_ChatBubble = Object.assign(ChatBubble, {
     Header: ChatBubbleHeader,
     Time: chatbubble_ChatBubbleTime,
-    Avatar: chatbubble_ChatBubbleAvatar,
+    Avatar: ChatBubbleAvatar,
     Message: ChatBubbleMessage,
     Footer: chatbubble_ChatBubbleFooter
 });
@@ -4596,56 +4685,6 @@ const Countdown = (props)=>{
     })();
 };
 const countdown_Countdown = Countdown;
-var BrowserMockup_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=mockup-browser-toolbar><div class=input><input type=text readonly></div></div><div>");
-const BrowserMockup = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "dataTheme",
-        "class",
-        "className",
-        "inputClassName",
-        "innerClassName",
-        "children",
-        "url",
-        "variant"
-    ]);
-    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const variant = ()=>local.variant ?? "border";
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("mockup-browser border", dist_clsx({
-            "border-base-300": "border" === variant(),
-            "bg-base-300": "background" === variant()
-        }), local.class, local.className));
-    const inputClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("input", dist_clsx({
-            "border-base-300": "border" === variant()
-        }), local.inputClassName));
-    const innerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("flex justify-center px-4 py-16", dist_clsx({
-            "border-t border-base-300": "border" === variant(),
-            "bg-base-200": "background" === variant()
-        }), local.innerClassName));
-    return (()=>{
-        var _el$ = BrowserMockup_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$2.nextSibling;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, resolvedChildren);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = inputClasses(), _v$2 = innerClasses();
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.e = _v$);
-            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, _p$.t = _v$2);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0
-        });
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$4.value = local.url);
-        return _el$;
-    })();
-};
-const browsermockup_BrowserMockup = BrowserMockup;
 var Diff_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=diff-item-1></div><div class=diff-item-2></div><div class=diff-resizer>");
 const Diff = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -5403,6 +5442,7 @@ const Label = (props)=>{
         "class",
         "className"
     ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
     const classes = ()=>twMerge("label", local.class, local.className);
     return (()=>{
         var _el$ = Label_tmpl$(), _el$2 = _el$.firstChild;
@@ -5415,11 +5455,56 @@ const Label = (props)=>{
             }
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.title);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren, null);
         return _el$;
     })();
 };
 const form_Label = Label;
+const FormValidationContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+function useFormValidation() {
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(FormValidationContext);
+    if (!context) throw new Error("useFormValidation must be used within a ValidatedForm");
+    return context;
+}
+function ValidatedForm(props) {
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "schema",
+        "onSubmit",
+        "initialValues"
+    ]);
+    const { form, errors, touched, data, isValid, isSubmitting } = (0, __WEBPACK_EXTERNAL_MODULE__felte_solid_6a709b1d__.createForm)({
+        initialValues: local.initialValues,
+        extend: [
+            (0, __WEBPACK_EXTERNAL_MODULE__felte_validator_zod_bb07151a__.validator)({
+                schema: local.schema
+            })
+        ],
+        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,
+            data,
+            isValid,
+            isSubmitting
+        }));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FormValidationContext.Provider, {
+        get value () {
+            return contextValue();
+        },
+        get children () {
+            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();
+                }
+            }));
+        }
+    });
+}
+const form_ValidatedForm = ValidatedForm;
 var Form_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<form role=form>");
 const Form = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -5428,6 +5513,7 @@ const Form = (props)=>{
         "class",
         "className"
     ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
     const classes = ()=>twMerge("form-control", local.class, local.className);
     return (()=>{
         var _el$ = Form_tmpl$();
@@ -5439,12 +5525,13 @@ const Form = (props)=>{
                 return classes();
             }
         }), 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$;
     })();
 };
 const form_Form = Object.assign(Form, {
-    Label: form_Label
+    Label: form_Label,
+    Validated: form_ValidatedForm
 });
 const colsMap = {
     1: "grid-cols-1",
@@ -7406,6 +7493,151 @@ 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><div class="absolute inset-0 z-0"></div><div class="relative z-10 h-full w-full">'), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
+function parseHSL(hslString) {
+    const match = hslString.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
+    if (!match) return null;
+    return {
+        h: parseInt(match[1]),
+        s: parseInt(match[2]),
+        l: parseInt(match[3])
+    };
+}
+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;
+}
+function SvgBackground(props) {
+    const { colorStart = 'hsl(129, 100%, 72%)', colorEnd = 'hsl(227, 100%, 50%)', 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;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (animated) {
+            const animate = ()=>{
+                setAnimationTime((prev)=>prev + 0.008 * animationSpeed);
+                animationFrame = requestAnimationFrame(animate);
+            };
+            animate();
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        if (animationFrame) cancelAnimationFrame(animationFrame);
+    });
+    const gradientId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>`svg-bg-gradient-${Math.random().toString(36).substr(2, 9)}`, void 0, {
+        equals: false
+    });
+    const filterId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>`svg-bg-filter-${Math.random().toString(36).substr(2, 9)}`, void 0, {
+        equals: false
+    });
+    const startHSL = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>parseHSL(colorStart));
+    const endHSL = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>parseHSL(colorEnd));
+    const animatedValues = (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();
+        if (start && end) {
+            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;
+        if (Math.floor(10 * time) % 50 === 0) console.log(`Time: ${time.toFixed(2)}, Mix1: ${colorMix.toFixed(3)}, Mix2: ${colorMix2.toFixed(3)}, Combined: ${combinedWave.toFixed(3)}, C1: ${color1}, C2: ${color2}`);
+        return {
+            color1,
+            color2,
+            turbFreq1,
+            turbFreq2
+        };
+    });
+    const staticSvg = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const values = animatedValues();
+        const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700" width="700" height="700">
+        <defs>
+          <linearGradient gradientTransform="rotate(63, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="${gradientId()}">
+            <stop stop-color="${values.color1}" stop-opacity="1" offset="0%"></stop>
+            <stop stop-color="${values.color2}" stop-opacity="1" offset="100%"></stop>
+          </linearGradient>
+          <filter id="${filterId()}" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feTurbulence type="fractalNoise" baseFrequency="${values.turbFreq1} ${values.turbFreq2}" numOctaves="2" seed="10" stitchTiles="stitch" result="turbulence"></feTurbulence>
+            <feGaussianBlur stdDeviation="${blurIntensity} ${blurIntensity}" in="turbulence" edgeMode="duplicate" result="blur"></feGaussianBlur>
+            <feBlend mode="color-dodge" in="SourceGraphic" in2="blur" result="blend"></feBlend>
+          </filter>
+        </defs>
+        <rect width="700" height="700" fill="url(#${gradientId()})" filter="url(#${filterId()})"></rect>
+      </svg>
+    `;
+        return `data:image/svg+xml;base64,${btoa(svg)}`;
+    });
+    const backgroundStyle = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
+            position: 'relative',
+            ...style,
+            '--svg-bg': `url("${staticSvg()}")`
+        }));
+    return (()=>{
+        var _el$ = SvgBackground_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, `relative ${className}`);
+        _el$2.style.setProperty("background-image", "var(--svg-bg)");
+        _el$2.style.setProperty("background-size", "cover");
+        _el$2.style.setProperty("background-position", "center");
+        _el$2.style.setProperty("background-repeat", "no-repeat");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, darkness > 0 && (()=>{
+            var _el$4 = SvgBackground_tmpl$2();
+            _el$4.style.setProperty("background-color", `rgba(0, 0, 0, ${darkness})`);
+            _el$4.style.setProperty("pointer-events", "none");
+            return _el$4;
+        })(), _el$3);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = backgroundStyle(), _v$2 = opacity.toString();
+            _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"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
+        return _el$;
+    })();
+}
 function isJSXElement(node) {
     return "object" == typeof node && null !== node;
 }
@@ -8353,41 +8585,4 @@ const WindowMockup = (props)=>{
     })();
 };
 const windowmockup_WindowMockup = WindowMockup;
-var Artboard_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const Artboard = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "demo",
-        "size",
-        "horizontal",
-        "dataTheme",
-        "class",
-        "className"
-    ]);
-    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("artboard", local.class, local.className, dist_clsx({
-            "artboard-demo": local.demo ?? true,
-            "phone-1": 1 === local.size,
-            "phone-2": 2 === local.size,
-            "phone-3": 3 === local.size,
-            "phone-4": 4 === local.size,
-            "phone-5": 5 === local.size,
-            "phone-6": 6 === local.size,
-            horizontal: local.horizontal
-        })));
-    return (()=>{
-        var _el$ = Artboard_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
-        return _el$;
-    })();
-};
-const artboard_Artboard = Artboard;
-export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, copy_button_CopyButton as CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, grid_Grid as Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input_Input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal as Modal, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, Sidenav, skeleton_Skeleton as Skeleton, Stack, stats_Stats as Stats, status_Status as Status, steps as Steps, Summary, Swap, table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup };
+export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, copy_button_CopyButton as CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, grid_Grid as Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input_Input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal as Modal, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, Sidenav, skeleton_Skeleton as Skeleton, Stack, stats_Stats as Stats, status_Status as Status, steps as Steps, Summary, SvgBackground, Swap, table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, useFormValidation };

package/package.json

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