@pathscale/ui 0.0.72 → 0.0.74

package/dist/index.js

@@ -3784,7 +3784,7 @@ const Avatar_VoidElementList = [
     "track",
     "wbr"
 ];
-const Avatar_Avatar = (props)=>{
+const Avatar = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "src",
         "letters",
@@ -3800,20 +3800,22 @@ const Avatar_Avatar = (props)=>{
         "class",
         "className",
         "style",
-        "children"
+        "children",
+        "dataTheme"
     ]);
-    const Tag = local.as || "div";
-    const containerClass = ()=>twMerge("avatar", local.class, local.className, clsx({
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const Tag = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.as || "div");
+    const containerClass = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("avatar", local.class, local.className, clsx({
             "avatar-online": local.online,
             "avatar-offline": local.offline,
             "avatar-placeholder": !local.src
-        }));
-    const customSizeStyle = "number" == typeof local.size ? {
-        width: `${local.size}px`,
-        height: `${local.size}px`
-    } : void 0;
-    const baseInner = ()=>twMerge(local.innerClass);
-    const imgClasses = ()=>clsx(baseInner(), {
+        })));
+    const customSizeStyle = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>"number" == typeof local.size ? {
+            width: `${local.size}px`,
+            height: `${local.size}px`
+        } : void 0);
+    const baseInner = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge(local.innerClass));
+    const imgClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>clsx(baseInner(), {
             ring: local.border,
             "ring-offset-base-100 ring-offset-2": local.border,
             [`ring-${local.borderColor}`]: local.border && local.borderColor,
@@ -3823,8 +3825,8 @@ const Avatar_Avatar = (props)=>{
             "w-24 h-24": "md" === local.size,
             "w-14 h-14": "sm" === local.size,
             "w-10 h-10": "xs" === local.size
-        });
-    const placeholderClasses = ()=>clsx(baseInner(), {
+        }));
+    const placeholderClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>clsx(baseInner(), {
             "bg-neutral-focus": !local.color,
             "text-neutral-content": !local.color || "neutral" === local.color,
             [`bg-${local.color}`]: !!local.color,
@@ -3838,13 +3840,15 @@ const Avatar_Avatar = (props)=>{
             "w-24 h-24 text-xl": "md" === local.size,
             "w-14 h-14": "sm" === local.size,
             "w-10 h-10": "xs" === local.size
-        });
-    const resolved = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children)();
-    const isStringChild = "string" == typeof resolved;
+        }));
+    const isStringChild = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const child = resolvedChildren();
+        return "string" == typeof child;
+    });
     const renderContents = ()=>local.src ? (()=>{
             var _el$ = Avatar_tmpl$(), _el$2 = _el$.firstChild;
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                var _v$ = imgClasses(), _v$2 = customSizeStyle, _v$3 = local.src;
+                var _v$ = imgClasses(), _v$2 = customSizeStyle(), _v$3 = local.src;
                 _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
                 _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$2, _p$.t);
                 _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "src", _p$.a = _v$3);
@@ -3855,11 +3859,11 @@ const Avatar_Avatar = (props)=>{
                 a: void 0
             });
             return _el$;
-        })() : local.letters || isStringChild ? (()=>{
+        })() : local.letters || isStringChild() ? (()=>{
             var _el$3 = Avatar_tmpl$2(), _el$4 = _el$3.firstChild;
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.letters ?? resolved);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.letters ?? resolvedChildren());
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                var _v$4 = placeholderClasses(), _v$5 = customSizeStyle;
+                var _v$4 = placeholderClasses(), _v$5 = customSizeStyle();
                 _v$4 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.e = _v$4);
                 _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$3, _v$5, _p$.t);
                 return _p$;
@@ -3870,9 +3874,9 @@ const Avatar_Avatar = (props)=>{
             return _el$3;
         })() : (()=>{
             var _el$5 = _tmpl$3();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, resolvedChildren);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                var _v$6 = imgClasses(), _v$7 = customSizeStyle;
+                var _v$6 = imgClasses(), _v$7 = customSizeStyle();
                 _v$6 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, _p$.e = _v$6);
                 _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$5, _v$7, _p$.t);
                 return _p$;
@@ -3882,11 +3886,13 @@ const Avatar_Avatar = (props)=>{
             });
             return _el$5;
         })();
-    if (Avatar_VoidElementList.includes(Tag)) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-        component: Tag
+    if (Avatar_VoidElementList.includes(Tag())) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        get component () {
+            return Tag();
+        }
     }, others, {
         get ["data-theme"] () {
-            return others["dataTheme"];
+            return local.dataTheme;
         },
         get ["class"] () {
             return containerClass();
@@ -3896,10 +3902,12 @@ const Avatar_Avatar = (props)=>{
         }
     }));
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-        component: Tag
+        get component () {
+            return Tag();
+        }
     }, others, {
         get ["data-theme"] () {
-            return others["dataTheme"];
+            return local.dataTheme;
         },
         get ["class"] () {
             return containerClass();
@@ -3912,10 +3920,10 @@ const Avatar_Avatar = (props)=>{
         }
     }));
 };
-const Avatar = Object.assign(Avatar_Avatar, {
+const avatar_Avatar = Object.assign(Avatar, {
     Group: AvatarGroup
 });
-const avatar = Avatar;
+const avatar = avatar_Avatar;
 var Background_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const Background = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -6118,24 +6126,26 @@ const Checkbox = (props)=>{
 const checkbox_Checkbox = Checkbox;
 var CodeMockup_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const CodeMockup = (props)=>{
-    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
-        class: "",
-        "aria-label": "Code mockup"
-    }, props);
-    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "class",
+        "className",
         "children",
-        "dataTheme"
+        "dataTheme",
+        "aria-label"
     ]);
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("mockup-code w-full", local.class, local.className));
     return (()=>{
         var _el$ = CodeMockup_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
             get ["class"] () {
-                return twMerge("mockup-code w-full", local.class);
+                return classes();
             },
             get ["data-theme"] () {
                 return local.dataTheme;
+            },
+            get ["aria-label"] () {
+                return local["aria-label"] || "Code mockup";
             }
         }, rest), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
@@ -6356,11 +6366,8 @@ const copy_button_CopyButton = CopyButton;
 ]);
 var Countdown_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span role=timer><span>");
 const Countdown = (props)=>{
-    const { value, class: className, className: classNameAlt, dataTheme, ...rest } = props;
-    const displayedValue = Math.min(99, Math.max(0, value));
-    const countdownStyle = {
-        "--value": displayedValue
-    };
+    const { class: className, className: classNameAlt, dataTheme, ...rest } = props;
+    const displayedValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>Math.min(99, Math.max(0, props.value)));
     return (()=>{
         var _el$ = Countdown_tmpl$(), _el$2 = _el$.firstChild;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
@@ -6369,7 +6376,15 @@ const Countdown = (props)=>{
                 return twMerge("countdown", className, classNameAlt);
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_$p)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$2, countdownStyle, _$p));
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = `--value: ${displayedValue()}`, _v$2 = displayedValue();
+            _p$.e = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$2, _v$, _p$.e);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-content", _p$.t = _v$2);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
         return _el$;
     })();
 };
@@ -6382,6 +6397,8 @@ const Diff = (props)=>{
         "secondItem",
         "className"
     ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const resolvedSecondItem = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.secondItem);
     const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("diff aspect-[16/9]", local.class, local.className));
     return (()=>{
         var _el$ = Diff_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
@@ -6390,8 +6407,8 @@ const Diff = (props)=>{
                 return classes();
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.secondItem);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, resolvedChildren);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, resolvedSecondItem);
         return _el$;
     })();
 };
@@ -6850,12 +6867,12 @@ const DropdownMenu = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "class",
         "className",
-        "data-theme",
+        "dataTheme",
         "style",
         "id",
         "aria-labelledby"
     ]);
-    const classes = ()=>twMerge("dropdown-content menu p-2 shadow bg-base-100 rounded-box", local.class, local.className);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("dropdown-content menu p-2 shadow bg-base-100 rounded-box", local.class, local.className));
     return (()=>{
         var _el$ = DropdownMenu_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
@@ -6867,7 +6884,7 @@ const DropdownMenu = (props)=>{
             },
             tabindex: 0,
             get ["data-theme"] () {
-                return local["data-theme"];
+                return local.dataTheme;
             },
             get ["class"] () {
                 return classes();
@@ -7218,13 +7235,15 @@ const Flex = (props)=>{
         "shrink",
         "basis"
     ]);
-    const tag = local.as || "div";
+    const tag = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.as || "div");
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const classes = dist_clsx("flex", mapResponsiveProp(local.direction, directionMap), mapResponsiveProp(local.justify, justifyMap), mapResponsiveProp(local.align, alignMap), mapResponsiveProp(local.wrap, wrapMap), mapResponsiveProp(local.gap, gapMap), mapResponsiveProp(local.gapX, gapXMap), mapResponsiveProp(local.gapY, gapYMap), mapResponsiveProp(local.grow, growMap), mapResponsiveProp(local.shrink, shrinkMap), mapResponsiveProp(local.basis, basisMap), local.class);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge(dist_clsx("flex", mapResponsiveProp(local.direction, directionMap), mapResponsiveProp(local.justify, justifyMap), mapResponsiveProp(local.align, alignMap), mapResponsiveProp(local.wrap, wrapMap), mapResponsiveProp(local.gap, gapMap), mapResponsiveProp(local.gapX, gapXMap), mapResponsiveProp(local.gapY, gapYMap), mapResponsiveProp(local.grow, growMap), mapResponsiveProp(local.shrink, shrinkMap), mapResponsiveProp(local.basis, basisMap), local.class)));
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-        component: tag,
+        get component () {
+            return tag();
+        },
         get ["class"] () {
-            return twMerge(classes);
+            return classes();
         }
     }, rest, {
         get children () {
@@ -7766,13 +7785,15 @@ const Join = (props)=>{
         "class",
         "className",
         "dataTheme",
-        "style"
+        "style",
+        "children"
     ]);
-    const classes = ()=>twMerge("join", clsx({
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("join", clsx({
             "join-vertical": !local.responsive && local.vertical,
             "join-horizontal": !local.responsive && local.horizontal,
             "join-vertical lg:join-horizontal": local.responsive
-        }), local.class, local.className);
+        }), local.class, local.className));
     return (()=>{
         var _el$ = Join_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
@@ -7786,7 +7807,7 @@ const Join = (props)=>{
                 return local.style;
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
         return _el$;
     })();
 };
@@ -7990,14 +8011,14 @@ const MenuDropdown_MenuDropdown = (props)=>{
         "className",
         "style",
         "children",
-        "data-theme"
+        "dataTheme"
     ]);
-    const spanClasses = ()=>twMerge("menu-dropdown-toggle", local.class, local.className, clsx({
+    const spanClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("menu-dropdown-toggle", local.class, local.className, clsx({
             "menu-dropdown-show": local.open
-        }));
-    const ulClasses = ()=>clsx("menu-dropdown", {
+        })));
+    const ulClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>clsx("menu-dropdown", {
             "menu-dropdown-show": local.open
-        });
+        }));
     return [
         (()=>{
             var _el$ = MenuDropdown_tmpl$();
@@ -8009,7 +8030,7 @@ const MenuDropdown_MenuDropdown = (props)=>{
                     return local.style;
                 },
                 get ["data-theme"] () {
-                    return local["data-theme"];
+                    return local.dataTheme;
                 }
             }), false, true);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.label);
@@ -8633,11 +8654,12 @@ var Radio_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d95
 const Radio = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "class",
+        "className",
         "color",
         "size",
         "name",
         "type",
-        "data-theme",
+        "dataTheme",
         "aria-label",
         "aria-describedby",
         "aria-invalid",
@@ -8645,20 +8667,20 @@ const Radio = (props)=>{
         "aria-labelledby",
         "aria-checked"
     ]);
-    const classes = twMerge("radio", local.class, dist_clsx({
-        "radio-xs": "xs" === local.size,
-        "radio-sm": "sm" === local.size,
-        "radio-md": "md" === local.size,
-        "radio-lg": "lg" === local.size,
-        "radio-xl": "xl" === local.size,
-        "radio-primary": "primary" === local.color,
-        "radio-secondary": "secondary" === local.color,
-        "radio-accent": "accent" === local.color,
-        "radio-info": "info" === local.color,
-        "radio-success": "success" === local.color,
-        "radio-warning": "warning" === local.color,
-        "radio-error": "error" === local.color
-    }));
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("radio", local.class, local.className, dist_clsx({
+            "radio-xs": "xs" === local.size,
+            "radio-sm": "sm" === local.size,
+            "radio-md": "md" === local.size,
+            "radio-lg": "lg" === local.size,
+            "radio-xl": "xl" === local.size,
+            "radio-primary": "primary" === local.color,
+            "radio-secondary": "secondary" === local.color,
+            "radio-accent": "accent" === local.color,
+            "radio-info": "info" === local.color,
+            "radio-success": "success" === local.color,
+            "radio-warning": "warning" === local.color,
+            "radio-error": "error" === local.color
+        })));
     return (()=>{
         var _el$ = Radio_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
@@ -8666,9 +8688,11 @@ const Radio = (props)=>{
                 return local.name;
             },
             type: "radio",
-            class: classes,
+            get ["class"] () {
+                return classes();
+            },
             get ["data-theme"] () {
-                return local["data-theme"];
+                return local.dataTheme;
             },
             get ["aria-label"] () {
                 return local["aria-label"];
@@ -8697,6 +8721,7 @@ var Range_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d95
 const Range = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "class",
+        "className",
         "color",
         "size",
         "step",
@@ -8704,22 +8729,22 @@ const Range = (props)=>{
         "ticksStep",
         "min",
         "max",
-        "data-theme"
+        "dataTheme"
     ]);
-    const classes = twMerge("range", local.class, dist_clsx({
-        "range-xs": "xs" === local.size,
-        "range-sm": "sm" === local.size,
-        "range-md": "md" === local.size,
-        "range-lg": "lg" === local.size,
-        "range-xl": "xl" === local.size,
-        "range-primary": "primary" === local.color,
-        "range-secondary": "secondary" === local.color,
-        "range-accent": "accent" === local.color,
-        "range-info": "info" === local.color,
-        "range-success": "success" === local.color,
-        "range-warning": "warning" === local.color,
-        "range-error": "error" === local.color
-    }));
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("range", local.class, local.className, dist_clsx({
+            "range-xs": "xs" === local.size,
+            "range-sm": "sm" === local.size,
+            "range-md": "md" === local.size,
+            "range-lg": "lg" === local.size,
+            "range-xl": "xl" === local.size,
+            "range-primary": "primary" === local.color,
+            "range-secondary": "secondary" === local.color,
+            "range-accent": "accent" === local.color,
+            "range-info": "info" === local.color,
+            "range-success": "success" === local.color,
+            "range-warning": "warning" === local.color,
+            "range-error": "error" === local.color
+        })));
     const ticks = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
         const showTicks = local.displayTicks ?? (void 0 !== local.step && null !== local.step);
         if (!showTicks) return [];
@@ -8739,9 +8764,11 @@ const Range = (props)=>{
                 get step () {
                     return local.step;
                 },
-                class: classes,
+                get ["class"] () {
+                    return classes();
+                },
                 get ["data-theme"] () {
-                    return local["data-theme"];
+                    return local.dataTheme;
                 }
             }), false, false);
             return _el$;
@@ -9298,16 +9325,19 @@ const Skeleton = (props)=>{
         "className",
         "children"
     ]);
-    const classes = twMerge("skeleton", local.class, local.className);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("skeleton", local.class, local.className));
     return (()=>{
         var _el$ = Skeleton_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;
             },
-            class: classes
+            get ["class"] () {
+                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$;
     })();
 };
@@ -9384,19 +9414,21 @@ const StatSection_StatSection = (props)=>{
 };
 const StatSection = StatSection_StatSection;
 var Stat_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const Stat_Stat = (props)=>{
+const Stat = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "class",
-        "data-theme"
+        "className",
+        "dataTheme"
     ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("stat", clsx(local.class, local.className)));
     return (()=>{
         var _el$ = Stat_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
             get ["class"] () {
-                return twMerge("stat", clsx(local.class));
+                return classes();
             },
             get ["data-theme"] () {
-                return local["data-theme"];
+                return local.dataTheme;
             }
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
@@ -9418,7 +9450,7 @@ const StatFigure = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7_
 const StatActions = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(StatSection, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
         section: "actions"
     }, props));
-const Stat = Object.assign(Stat_Stat, {
+const stats_Stat = Object.assign(Stat, {
     Title: StatTitle,
     Value: StatValue,
     Desc: StatDesc,
@@ -9446,7 +9478,7 @@ const Stats = (props)=>{
     })();
 };
 const stats_Stats = Object.assign(Stats, {
-    Stat: Stat
+    Stat: stats_Stat
 });
 var Status_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
 const Status = (props)=>{
@@ -9491,7 +9523,7 @@ const Step_VoidElementList = [
     "track",
     "wbr"
 ];
-const Step_Step = (props)=>{
+const Step = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "value",
         "color",
@@ -9500,10 +9532,10 @@ const Step_Step = (props)=>{
         "className",
         "style",
         "children",
-        "data-theme"
+        "dataTheme"
     ]);
-    const Tag = local.as || "li";
-    const classes = ()=>twMerge("step", local.class, local.className, clsx({
+    const Tag = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.as || "li");
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("step", local.class, local.className, clsx({
             "step-neutral": "neutral" === local.color,
             "step-primary": "primary" === local.color,
             "step-secondary": "secondary" === local.color,
@@ -9512,13 +9544,15 @@ const Step_Step = (props)=>{
             "step-success": "success" === local.color,
             "step-warning": "warning" === local.color,
             "step-error": "error" === local.color
-        }));
-    if (Step_VoidElementList.includes(Tag)) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-        component: Tag
+        })));
+    if (Step_VoidElementList.includes(Tag())) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        get component () {
+            return Tag();
+        }
     }, others, {
         "aria-label": "Step",
         get ["data-theme"] () {
-            return local["data-theme"];
+            return local.dataTheme;
         },
         get ["data-content"] () {
             return local.value;
@@ -9531,11 +9565,13 @@ const Step_Step = (props)=>{
         }
     }));
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-        component: Tag
+        get component () {
+            return Tag();
+        }
     }, others, {
         "aria-label": "Step",
         get ["data-theme"] () {
-            return local["data-theme"];
+            return local.dataTheme;
         },
         get ["data-content"] () {
             return local.value;
@@ -9551,7 +9587,7 @@ const Step_Step = (props)=>{
         }
     }));
 };
-const Step = Step_Step;
+const steps_Step = Step;
 const Steps_VoidElementList = [
     "area",
     "base",
@@ -9578,20 +9614,22 @@ const Steps = (props)=>{
         "class",
         "className",
         "style",
-        "data-theme"
+        "dataTheme"
     ]);
-    const Tag = local.as || "ul";
-    const classes = ()=>twMerge("steps", local.class, local.className, clsx({
+    const Tag = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.as || "ul");
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("steps", local.class, local.className, clsx({
             "steps-vertical": local.vertical,
             "steps-horizontal": local.horizontal
-        }));
-    if (Steps_VoidElementList.includes(Tag)) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-        component: Tag
+        })));
+    if (Steps_VoidElementList.includes(Tag())) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        get component () {
+            return Tag();
+        }
     }, others, {
         role: "group",
         "aria-label": "Steps",
         get ["data-theme"] () {
-            return local["data-theme"];
+            return local.dataTheme;
         },
         get ["class"] () {
             return classes();
@@ -9601,12 +9639,14 @@ const Steps = (props)=>{
         }
     }));
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-        component: Tag
+        get component () {
+            return Tag();
+        }
     }, others, {
         role: "group",
         "aria-label": "Steps",
         get ["data-theme"] () {
-            return local["data-theme"];
+            return local.dataTheme;
         },
         get ["class"] () {
             return classes();
@@ -9620,7 +9660,7 @@ const Steps = (props)=>{
     }));
 };
 const steps_Steps = Object.assign(Steps, {
-    Step: Step
+    Step: steps_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">');
@@ -10185,39 +10225,25 @@ const TableRow = (props)=>{
         "children",
         "class",
         "active",
-        "noCell"
+        "noCell",
+        "className",
+        "dataTheme"
     ]);
-    const classAttr = ()=>twMerge(dist_clsx(local.class, {
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge(dist_clsx({
             active: local.active
-        }));
+        }), local.className, local.class));
     const resolved = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
     return (()=>{
         var _el$ = TableRow_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
             get ["class"] () {
-                return classAttr();
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
-            get when () {
-                return local.noCell;
-            },
-            get fallback () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
-                    get each () {
-                        return resolved.toArray();
-                    },
-                    children: (child, i)=>0 === i() ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_TableHeadCell, {
-                            children: child
-                        }) : (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TableCell, {
-                            children: child
-                        })
-                });
+                return classes();
             },
-            get children () {
-                return resolved();
+            get ["data-theme"] () {
+                return local.dataTheme;
             }
-        }));
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolved);
         return _el$;
     })();
 };
@@ -10968,8 +10994,9 @@ const WindowMockup = (props)=>{
         "backgroundColor",
         "frameColor"
     ]);
-    const borderColorValue = ()=>local.borderColor || local.frameColor || "neutral";
-    const classes = ()=>twMerge("mockup-window", local.class, local.className, local.border && `border border-${borderColorValue()}`, dist_clsx({
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const borderColorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.borderColor || local.frameColor || "neutral");
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("mockup-window", local.class, local.className, local.border && `border border-${borderColorValue()}`, dist_clsx({
             "border-neutral": "neutral" === borderColorValue(),
             "border-primary": "primary" === borderColorValue(),
             "border-secondary": "secondary" === borderColorValue(),
@@ -10986,8 +11013,8 @@ const WindowMockup = (props)=>{
             "bg-success": "success" === local.frameColor,
             "bg-warning": "warning" === local.frameColor,
             "bg-error": "error" === local.frameColor
-        }));
-    const innerClasses = ()=>twMerge("p-4", local.backgroundColor && `bg-${local.backgroundColor}`, local.border && `border-t border-${borderColorValue()}`, dist_clsx({
+        })));
+    const innerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("p-4", local.backgroundColor && `bg-${local.backgroundColor}`, local.border && `border-t border-${borderColorValue()}`, dist_clsx({
             "bg-neutral": "neutral" === local.backgroundColor,
             "bg-primary": "primary" === local.backgroundColor,
             "bg-secondary": "secondary" === local.backgroundColor,
@@ -10996,8 +11023,7 @@ const WindowMockup = (props)=>{
             "bg-success": "success" === local.backgroundColor,
             "bg-warning": "warning" === local.backgroundColor,
             "bg-error": "error" === local.backgroundColor
-        }));
-    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+        })));
     const innerElement = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
         const childrenArray = Array.isArray(resolvedChildren()) ? resolvedChildren() : [
             resolvedChildren()

package/package.json

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