@pathscale/ui 1.1.54 → 1.1.56

package/dist/components/accordion/collapse.css

@@ -0,0 +1,248 @@
+@layer components {
+  .collapse-arrow > .collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transform: translateY(-100%) rotate(45deg);
+      top: 50%;
+      inset-inline-end: 1.4rem;
+      content: "";
+      transform-origin: 75% 75%;
+      box-shadow: 2px 2px;
+      pointer-events: none;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-arrow > .collapse-title:after {
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.2s;
+    }
+    }
+
+  .collapse-plus > .collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      top: 0.9rem;
+      inset-inline-end: 1.4rem;
+      --tw-content: "+";
+      content: var(--tw-content);
+      pointer-events: none;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-plus > .collapse-title:after {
+      transition-property: all;
+      transition-duration: 300ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    }
+
+  .collapse {
+      display: grid;
+      position: relative;
+      overflow: hidden;
+      border-radius: var(--radius-box, 1rem);
+      width: 100%;
+      grid-template-rows: max-content 0fr;
+      grid-template-columns: minmax(0, 1fr);
+      isolation: isolate;
+    }
+
+  .collapse:not(td, tr, colgroup) {
+      visibility: revert-layer;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse {
+      transition: grid-template-rows 0.2s;
+    }
+    }
+
+  .collapse > input:is([type="checkbox"], [type="radio"]) {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      opacity: 0;
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 1lh;
+      transition: background-color 0.2s ease-out;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ),
+    .collapse:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) {
+      grid-template-rows: max-content 1fr;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content,
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      content-visibility: visible;
+      min-height: fit-content;
+    }
+
+  @supports not (content-visibility: visible) {
+    .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content,
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      visibility: visible;
+    }
+    }
+
+  .collapse:focus-visible,
+    .collapse:has(> input:is([type="checkbox"], [type="radio"]):focus-visible),
+    .collapse:has(summary:focus-visible) {
+      outline-color: var(--color-base-content);
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+
+  .collapse:not(.collapse-close) > input[type="checkbox"],
+    .collapse:not(.collapse-close) > input[type="radio"]:not(:checked),
+    .collapse:not(.collapse-close) > .collapse-title {
+      cursor: pointer;
+    }
+
+  .collapse[tabindex]:focus:not(.collapse-close, .collapse[open]) > .collapse-title,
+    .collapse[tabindex]:focus-within:not(.collapse-close, .collapse[open]) > .collapse-title {
+      cursor: unset;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > :where(.collapse-content),
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      padding-bottom: 1rem;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse:is([open]).collapse-arrow > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse.collapse-open.collapse-arrow > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+    }
+
+  .collapse.collapse-open.collapse-plus > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse[tabindex].collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
+    .collapse.collapse-arrow[tabindex]:focus-within:not(.collapse-close) > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+
+  .collapse.collapse-arrow:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+
+  .collapse[open].collapse-plus > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse[tabindex].collapse-plus:focus:not(.collapse-close) > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse.collapse-plus:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse:is(details) {
+      width: 100%;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse:is(details)::details-content {
+      transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out, height 0.2s;
+      height: 0;
+      interpolate-size: allow-keywords;
+    }
+    .collapse:is(details):where([open])::details-content {
+      height: auto;
+    }
+    }
+
+  .collapse:is(details) summary {
+      position: relative;
+      display: block;
+    }
+
+  .collapse:is(details) summary::-webkit-details-marker {
+      display: none;
+    }
+
+  .collapse:is(details) > .collapse-content {
+      content-visibility: visible;
+    }
+
+  .collapse:is(details) summary {
+      outline: none;
+    }
+
+  .collapse-content {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      content-visibility: hidden;
+      grid-column-start: 1;
+      grid-row-start: 2;
+      min-height: 0;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      cursor: unset;
+    }
+
+  @supports not (content-visibility: hidden) {
+    .collapse-content {
+      visibility: hidden;
+    }
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-content {
+      transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out;
+    }
+    }
+
+  .collapse-open {
+      grid-template-rows: max-content 1fr;
+    }
+
+  .collapse-open > .collapse-content {
+      content-visibility: visible;
+      min-height: fit-content;
+      padding-bottom: 1rem;
+    }
+
+  @supports not (content-visibility: visible) {
+    .collapse-open > .collapse-content {
+      visibility: visible;
+    }
+    }
+
+  .collapse {
+      visibility: collapse;
+    }
+
+  .collapse-title {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      position: relative;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 1lh;
+      transition: background-color 0.2s ease-out;
+    }
+}

package/dist/components/accordion/index.d.ts

@@ -1 +1 @@
-export { default, Accordion, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, AccordionIndicator, type AccordionProps, type AccordionRootProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, type AccordionIndicatorProps, type AccordionSelectionMode, type AccordionVariant, type AccordionValue, } from "./Accordion";
+export { default, type AccordionProps } from "./Accordion";

package/dist/components/accordion/index.js

@@ -1,9 +1,3 @@
 import * as __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__ from "./Accordion.js";
-var __webpack_exports__Accordion = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.Accordion;
-var __webpack_exports__AccordionContent = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.AccordionContent;
-var __webpack_exports__AccordionIndicator = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.AccordionIndicator;
-var __webpack_exports__AccordionItem = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.AccordionItem;
-var __webpack_exports__AccordionRoot = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.AccordionRoot;
-var __webpack_exports__AccordionTrigger = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.AccordionTrigger;
 var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__["default"];
-export { __webpack_exports__Accordion as Accordion, __webpack_exports__AccordionContent as AccordionContent, __webpack_exports__AccordionIndicator as AccordionIndicator, __webpack_exports__AccordionItem as AccordionItem, __webpack_exports__AccordionRoot as AccordionRoot, __webpack_exports__AccordionTrigger as AccordionTrigger, __webpack_exports__default as default };
+export { __webpack_exports__default as default };

package/dist/components/alert/Alert.js

@@ -2,7 +2,6 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Alert.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Alert_classes_js_74d02f10__ from "./Alert.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=alert-default-icon fill=none height=16 viewBox="0 0 24 24"width=16 xmlns=http://www.w3.org/2000/svg><circle cx=12 cy=12 r=10 stroke=currentColor stroke-width=2></circle><path d="M12 16v-4M12 8h.01"stroke=currentColor stroke-linecap=round stroke-width=2>'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=alert-default-icon fill=none height=16 viewBox="0 0 24 24"width=16 xmlns=http://www.w3.org/2000/svg><circle cx=12 cy=12 r=10 stroke=currentColor stroke-width=2></circle><path d="M9 12l2 2 4-4"stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2>'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=alert-default-icon fill=none height=16 viewBox="0 0 24 24"width=16 xmlns=http://www.w3.org/2000/svg><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"stroke=currentColor stroke-width=2></path><path d="M12 9v4M12 17h.01"stroke=currentColor stroke-linecap=round stroke-width=2>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=alert-default-icon fill=none height=16 viewBox="0 0 24 24"width=16 xmlns=http://www.w3.org/2000/svg><circle cx=12 cy=12 r=10 stroke=currentColor stroke-width=2></circle><path d="M15 9l-6 6M9 9l6 6"stroke=currentColor stroke-linecap=round stroke-width=2>'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>"), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
 const AlertContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
 const useAlertContext = ()=>{
@@ -21,6 +20,13 @@ const STATUS_ICON_MAP = {
     warning: WarningIcon,
     danger: DangerIcon
 };
+const STATUS_CLASS_MAP = {
+    default: "alert--default",
+    accent: "alert--accent",
+    success: "alert--success",
+    warning: "alert--warning",
+    danger: "alert--danger"
+};
 const AlertRoot = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
@@ -39,10 +45,10 @@ const AlertRoot = (props)=>{
         get children () {
             var _el$5 = _tmpl$5();
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                role: "alert"
-            }, ()=>({
-                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Alert_classes_js_74d02f10__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Alert_classes_js_74d02f10__.CLASSES.status[status()], local.class, local.className)
-                }), {
+                role: "alert",
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("alert", STATUS_CLASS_MAP[status()], local.class, local.className);
+                },
                 "data-slot": "alert-root",
                 get ["data-status"] () {
                     return status();
@@ -74,9 +80,10 @@ const AlertIndicator = (props)=>{
     };
     return (()=>{
         var _el$6 = _tmpl$5();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Alert_classes_js_74d02f10__.CLASSES.slot.indicator, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("alert__indicator", local.class, local.className);
+            },
             "data-slot": "alert-indicator",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -109,9 +116,10 @@ const AlertContent = (props)=>{
     ]);
     return (()=>{
         var _el$7 = _tmpl$5();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Alert_classes_js_74d02f10__.CLASSES.slot.content, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("alert__content", local.class, local.className);
+            },
             "data-slot": "alert-content",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -134,9 +142,10 @@ const AlertTitle = (props)=>{
     ]);
     return (()=>{
         var _el$8 = _tmpl$6();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Alert_classes_js_74d02f10__.CLASSES.slot.title, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("alert__title", local.class, local.className);
+            },
             "data-slot": "alert-title",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -159,9 +168,10 @@ const AlertDescription = (props)=>{
     ]);
     return (()=>{
         var _el$9 = _tmpl$7();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Alert_classes_js_74d02f10__.CLASSES.slot.description, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("alert__description", local.class, local.className);
+            },
             "data-slot": "alert-description",
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/artboard/Artboard.d.ts

@@ -0,0 +1,9 @@
+import { type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ArtboardProps = IComponentBaseProps & {
+    demo?: boolean;
+    size?: 1 | 2 | 3 | 4 | 5 | 6;
+    horizontal?: boolean;
+};
+declare const Artboard: ParentComponent<ArtboardProps>;
+export default Artboard;

package/dist/components/artboard/Artboard.js

@@ -0,0 +1,42 @@
+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_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _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)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("artboard", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "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$ = _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 { artboard_Artboard as default };

package/dist/components/artboard/index.d.ts

@@ -0,0 +1 @@
+export { default, type ArtboardProps } from "./Artboard";

package/dist/components/artboard/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Artboard_js_4bf6eea9__ from "./Artboard.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Artboard_js_4bf6eea9__["default"];
+export { __webpack_exports__default as default };

package/dist/components/avatar/Avatar.js

@@ -2,7 +2,6 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Avatar.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Avatar_classes_js_3d1d7ea0__ from "./Avatar.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<img>");
 const AvatarContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
 const useAvatarContext = ()=>{
@@ -10,6 +9,15 @@ const useAvatarContext = ()=>{
     if (!ctx) throw new Error("Avatar compound components must be used within <Avatar>");
     return ctx;
 };
+const SIZE_CLASS_MAP = {
+    sm: "avatar--sm",
+    md: "",
+    lg: "avatar--lg"
+};
+const VARIANT_CLASS_MAP = {
+    default: "",
+    soft: "avatar--soft"
+};
 const AvatarRoot = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
@@ -36,9 +44,10 @@ const AvatarRoot = (props)=>{
         value: ctx,
         get children () {
             var _el$ = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Avatar_classes_js_3d1d7ea0__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Avatar_classes_js_3d1d7ea0__.CLASSES.size[size()], __WEBPACK_EXTERNAL_MODULE__Avatar_classes_js_3d1d7ea0__.CLASSES.variant[variant()], local.class, local.className)
-                }), {
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("avatar", SIZE_CLASS_MAP[size()], VARIANT_CLASS_MAP[variant()], local.class, local.className);
+                },
                 "data-slot": "avatar-root",
                 get ["data-theme"] () {
                     return local.dataTheme;
@@ -80,10 +89,10 @@ const AvatarImage = (props)=>{
             },
             get alt () {
                 return local.alt;
-            }
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Avatar_classes_js_3d1d7ea0__.CLASSES.slot.image, local.class, local.className)
-            }), {
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("avatar__image", local.class, local.className);
+            },
             "data-slot": "avatar-image",
             get style () {
                 return local.style;
@@ -94,6 +103,13 @@ const AvatarImage = (props)=>{
         return _el$2;
     })();
 };
+const COLOR_CLASS_MAP = {
+    default: "avatar__fallback--default",
+    accent: "avatar__fallback--accent",
+    success: "avatar__fallback--success",
+    warning: "avatar__fallback--warning",
+    danger: "avatar__fallback--danger"
+};
 const AvatarFallback = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
@@ -117,9 +133,10 @@ const AvatarFallback = (props)=>{
         },
         get children () {
             var _el$3 = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Avatar_classes_js_3d1d7ea0__.CLASSES.slot.fallback, __WEBPACK_EXTERNAL_MODULE__Avatar_classes_js_3d1d7ea0__.CLASSES.color[ctx.color()], local.class, local.className)
-                }), {
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("avatar__fallback", COLOR_CLASS_MAP[ctx.color()], local.class, local.className);
+                },
                 "data-slot": "avatar-fallback",
                 get ["data-theme"] () {
                     return local.dataTheme;

package/dist/components/avatar/AvatarGroup.js

@@ -1,7 +1,6 @@
 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_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Avatar_classes_js_3d1d7ea0__ from "./Avatar.classes.js";
 const VoidElementList = [
     "area",
     "base",
@@ -27,22 +26,23 @@ const AvatarGroup_AvatarGroup = (props)=>{
         "children"
     ]);
     const Tag = local.as || "div";
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Avatar_classes_js_3d1d7ea0__.CLASSES.group.base, __WEBPACK_EXTERNAL_MODULE__Avatar_classes_js_3d1d7ea0__.CLASSES.group.overlap, local.class, local.className);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("avatar-group -space-x-6", local.class, local.className);
     const ariaLabel = `Group of ${local.children.length} avatar photos`;
     if (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
     }, others, {
-        "aria-label": ariaLabel
-    }, ()=>({
-            class: classes()
-        })));
+        "aria-label": ariaLabel,
+        get ["class"] () {
+            return classes();
+        }
+    }));
     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
     }, others, {
-        "aria-label": ariaLabel
-    }, ()=>({
-            class: classes()
-        }), {
+        "aria-label": ariaLabel,
+        get ["class"] () {
+            return classes();
+        },
         get children () {
             return local.children;
         }

package/dist/components/background/Background.d.ts

@@ -0,0 +1,5 @@
+import type { Component, JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type BackgroundProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement>;
+declare const Background: Component<BackgroundProps>;
+export default Background;

package/dist/components/background/Background.js

@@ -0,0 +1,22 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Background_Background = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("bg-base-100 min-h-screen", local.class, local.className));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return classes();
+            }
+        }, others), false, false);
+        return _el$;
+    })();
+};
+const Background = Background_Background;
+export { Background as default };

package/dist/components/background/index.d.ts

@@ -0,0 +1 @@
+export { default, type BackgroundProps } from "./Background";

package/dist/components/background/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Background_js_2c32b392__ from "./Background.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Background_js_2c32b392__["default"];
+export { __webpack_exports__default as default };