@indielayer/ui 0.0.0-dev-20240129122517 → 0.0.0-dev-20240205224808

package/lib/components/select/Select.vue.js

@@ -1,35 +1,37 @@
-import { defineComponent as ve, ref as A, computed as I, watch as O, nextTick as U, unref as s, openBlock as a, createBlock as c, mergeProps as X, toHandlers as H, withCtx as h, createElementVNode as E, createElementBlock as o, normalizeClass as R, Fragment as p, renderList as z, createTextVNode as C, toDisplayString as m, createVNode as K, withDirectives as pe, vModelSelect as ce, renderSlot as me, createCommentVNode as ye } from "vue";
-import { useEventListener as be } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { defineComponent as pe, ref as A, computed as I, watch as O, nextTick as U, unref as s, openBlock as o, createBlock as c, mergeProps as X, toHandlers as H, withCtx as b, createElementVNode as C, createElementBlock as a, normalizeClass as R, Fragment as v, renderList as E, createTextVNode as z, toDisplayString as m, createVNode as K, withDirectives as ve, vModelSelect as ce, renderSlot as me, createCommentVNode as ye } from "vue";
+import { useEventListener as he } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useColors as be } from "../../composables/useColors.js";
 import { useCommon as G } from "../../composables/useCommon.js";
 import { useInputtable as D } from "../../composables/useInputtable.js";
 import { useInteractive as J } from "../../composables/useInteractive.js";
-import { useTheme as he } from "../../composables/useTheme.js";
-import { checkIcon as ke, selectIcon as ge } from "../../common/icons.js";
-import we from "../label/Label.vue.js";
+import { useTheme as ke } from "../../composables/useTheme.js";
+import { checkIcon as ge, selectIcon as we } from "../../common/icons.js";
+import Ae from "../label/Label.vue.js";
 import W from "../tag/Tag.vue.js";
-import Ae from "../icon/Icon.vue.js";
-import Ie from "../menu/MenuItem.vue.js";
-import Re from "../spinner/Spinner.vue.js";
-import Ve from "../popover/Popover.vue.js";
-import "../popover/Popover.vue2.js";
-import _e from "../popover/PopoverContainer.vue.js";
-import $e from "../inputFooter/InputFooter.vue.js";
+import Ie from "../icon/Icon.vue.js";
+import Re from "../menu/MenuItem.vue.js";
+import Ve from "../spinner/Spinner.vue.js";
+import _e from "../popover/Popover.vue.js";
+import "../popover/Popover.vue3.js";
+import $e from "../popover/PopoverContainer.vue.js";
+import Ce from "../inputFooter/InputFooter.vue.js";
 const Ee = { class: "relative" }, ze = {
   key: 0,
   class: "flex gap-1 flex-wrap"
-}, Ce = {
+}, Se = {
   key: 0,
-  class: "text-gray-400 dark:text-gray-500"
-}, Se = { key: 1 }, Ne = {
+  class: "text-secondary-400 dark:text-secondary-500"
+}, Ne = { key: 1 }, Oe = {
   key: 0,
   class: "flex gap-1 flex-wrap"
-}, Oe = {
+}, De = {
   key: 0,
-  class: "text-gray-400 dark:text-gray-500"
-}, De = { key: 1 }, Le = {
+  class: "text-secondary-400 dark:text-secondary-500"
+}, Le = { key: 1 }, Be = {
   key: 1,
-  class: "px-2 text-center text-gray-400"
-}, Be = ["id", "name", "disabled", "multiple", "readonly"], Te = ["value", "disabled"], Fe = {
+  class: "px-2 text-center text-secondary-400"
+}, Te = ["id", "name", "disabled", "multiple", "readonly"], Fe = ["value", "disabled"], Pe = {
+  ...be.props("primary"),
   ...G.props(),
   ...J.props(),
   ...D.props(),
@@ -38,14 +40,14 @@ const Ee = { class: "relative" }, ze = {
   multiple: Boolean,
   flat: Boolean,
   native: Boolean
-}, Pe = {
+}, qe = {
   name: "XSelect",
   validators: {
     ...G.validators()
   }
-}, il = /* @__PURE__ */ ve({
-  ...Pe,
-  props: Fe,
+}, nl = /* @__PURE__ */ pe({
+  ...qe,
+  props: Pe,
   emits: D.emits(),
   setup(Q, { expose: Y, emit: Z }) {
     const r = Q, V = Z, k = A(null), S = A(null), _ = A(null), f = A(null), u = A(), t = I({
@@ -62,7 +64,7 @@ const Ee = { class: "relative" }, ze = {
         label: e.label,
         active: i,
         disabled: e.disabled,
-        iconRight: i ? ke : void 0,
+        iconRight: i ? ge : void 0,
         onClick: () => T(e.value)
       };
     })), L = I(() => {
@@ -125,8 +127,8 @@ const Ee = { class: "relative" }, ze = {
         else
           t.value = e;
         r.native || U(() => {
-          var n, v, w;
-          (n = k.value) == null || n.dispatchEvent(new Event("input")), (v = k.value) == null || v.dispatchEvent(new Event("change")), (w = S.value) == null || w.$el.focus();
+          var n, p, w;
+          (n = k.value) == null || n.dispatchEvent(new Event("input")), (p = k.value) == null || p.dispatchEvent(new Event("change")), (w = S.value) == null || w.$el.focus();
         });
       }
     }
@@ -144,16 +146,16 @@ const Ee = { class: "relative" }, ze = {
       return i ? i.label : "";
     }
     const { focus: q, blur: le } = J(k), {
-      errorInternal: x,
+      errorInternal: j,
       hideFooterInternal: ie,
-      inputListeners: j,
+      inputListeners: x,
       reset: te,
       validate: ne,
-      setError: ae,
+      setError: oe,
       isFocused: re,
-      isInsideForm: oe
+      isInsideForm: ae
     } = D(r, { focus: q, emit: V, withListeners: !0 }), se = I(() => {
-      const { focus: e, blur: i } = s(j);
+      const { focus: e, blur: i } = s(x);
       return {
         focus: e,
         blur: i
@@ -161,12 +163,12 @@ const Ee = { class: "relative" }, ze = {
     });
     let g = null;
     O([re, y], ([e, i]) => {
-      e || i ? g || (g = be(document, "keydown", ue)) : g && (g(), g = null);
+      e || i ? g || (g = he(document, "keydown", ue)) : g && (g(), g = null);
     }, {
       immediate: !0
     });
     function ue(e) {
-      var i, l, n, v, w;
+      var i, l, n, p, w;
       if (d.value.length !== 0)
         if (e.code === "ArrowDown") {
           if (e.preventDefault(), !y.value) {
@@ -185,40 +187,41 @@ const Ee = { class: "relative" }, ze = {
             (n = f.value) == null || n.show();
             return;
           }
-          typeof u.value < "u" && (T(d.value[u.value].value), r.multiple || (v = f.value) == null || v.hide());
+          typeof u.value < "u" && (T(d.value[u.value].value), r.multiple || (p = f.value) == null || p.hide());
         } else
           e.code === "Tab" && y.value && (e.preventDefault(), (w = f.value) == null || w.hide(), r.native || U(() => {
             var M;
             (M = S.value) == null || M.$el.focus();
           }));
     }
-    const { styles: de, classes: b, className: fe } = he("Select", {}, r, { errorInternal: x });
-    return Y({ focus: q, blur: le, reset: te, validate: ne, setError: ae }), (e, i) => (a(), c(we, X({
+    const { styles: de, classes: h, className: fe } = ke("Select", {}, r, { errorInternal: j });
+    return Y({ focus: q, blur: le, reset: te, validate: ne, setError: oe }), (e, i) => (o(), c(Ae, X({
       ref_key: "labelRef",
       ref: S,
       tabindex: "0",
       class: ["group", [
         s(fe),
-        s(b).wrapper
+        s(h).wrapper
       ]],
       style: s(de),
       disabled: e.disabled,
       required: e.required,
-      "is-inside-form": s(oe),
-      label: e.label
+      "is-inside-form": s(ae),
+      label: e.label,
+      tooltip: e.tooltip
     }, H(se.value)), {
-      default: h(() => [
-        E("div", Ee, [
-          e.native && !e.multiple ? (a(), o("div", {
+      default: b(() => [
+        C("div", Ee, [
+          e.native && !e.multiple ? (o(), a("div", {
             key: 0,
-            class: R(s(b).box),
+            class: R(s(h).box),
             onClick: i[0] || (i[0] = (l) => {
               var n;
               return (n = k.value) == null ? void 0 : n.click();
             })
           }, [
-            e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (a(), o("div", ze, [
-              (a(!0), o(p, null, z(t.value, (l) => (a(), c(W, {
+            e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (o(), a("div", ze, [
+              (o(!0), a(v, null, E(t.value, (l) => (o(), c(W, {
                 key: l,
                 size: "xs",
                 outlined: "",
@@ -227,31 +230,28 @@ const Ee = { class: "relative" }, ze = {
                   P(n, l);
                 }
               }, {
-                default: h(() => [
-                  C(m($(l)), 1)
+                default: b(() => [
+                  z(m($(l)), 1)
                 ]),
                 _: 2
               }, 1032, ["onRemove"]))), 128))
-            ])) : !e.multiple && !F(t.value) ? (a(), o(p, { key: 1 }, [
-              C(m($(t.value)), 1)
-            ], 64)) : (a(), o(p, { key: 2 }, [
-              e.placeholder ? (a(), o("div", Ce, m(e.placeholder), 1)) : (a(), o("div", Se, " "))
+            ])) : !e.multiple && !F(t.value) ? (o(), a(v, { key: 1 }, [
+              z(m($(t.value)), 1)
+            ], 64)) : (o(), a(v, { key: 2 }, [
+              e.placeholder ? (o(), a("div", Se, m(e.placeholder), 1)) : (o(), a("div", Ne, " "))
             ], 64))
-          ], 2)) : (a(), c(Ve, {
+          ], 2)) : (o(), c(_e, {
             key: 1,
             ref_key: "popoverRef",
             ref: f,
-            block: "",
-            disabled: e.disabled || e.loading || e.readonly,
-            "dismiss-on-click": !e.multiple,
-            align: "left"
+            disabled: e.disabled || e.loading || e.readonly
           }, {
-            content: h(() => [
-              K(_e, {
-                class: R(s(b).content)
+            content: b(() => [
+              K($e, {
+                class: R(s(h).content)
               }, {
-                default: h(() => [
-                  d.value.length > 0 ? (a(!0), o(p, { key: 0 }, z(d.value, (l, n) => (a(), c(Ie, {
+                default: b(() => [
+                  d.value.length > 0 ? (o(!0), a(v, { key: 0 }, E(d.value, (l, n) => (o(), c(Re, {
                     key: n,
                     ref_for: !0,
                     ref_key: "itemsRef",
@@ -260,23 +260,23 @@ const Ee = { class: "relative" }, ze = {
                     size: e.size,
                     disabled: l.disabled,
                     selected: n === u.value,
-                    color: "primary",
+                    color: e.color,
                     filled: "",
                     onClick: i[1] || (i[1] = () => {
-                      var v;
-                      return !e.multiple && ((v = f.value) == null ? void 0 : v.hide());
+                      var p;
+                      return !e.multiple && ((p = f.value) == null ? void 0 : p.hide());
                     })
-                  }, null, 8, ["item", "size", "disabled", "selected"]))), 128)) : (a(), o("div", Le, " No options "))
+                  }, null, 8, ["item", "size", "disabled", "selected", "color"]))), 128)) : (o(), a("div", Be, " No options "))
                 ]),
                 _: 1
               }, 8, ["class"])
             ]),
-            default: h(() => [
-              E("div", {
-                class: R([s(b).box])
+            default: b(() => [
+              C("div", {
+                class: R([s(h).box])
               }, [
-                e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (a(), o("div", Ne, [
-                  (a(!0), o(p, null, z(t.value, (l) => (a(), c(W, {
+                e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (o(), a("div", Oe, [
+                  (o(!0), a(v, null, E(t.value, (l) => (o(), c(W, {
                     key: l,
                     size: "xs",
                     outlined: "",
@@ -285,21 +285,21 @@ const Ee = { class: "relative" }, ze = {
                       P(n, l);
                     }
                   }, {
-                    default: h(() => [
-                      C(m($(l)), 1)
+                    default: b(() => [
+                      z(m($(l)), 1)
                     ]),
                     _: 2
                   }, 1032, ["onRemove"]))), 128))
-                ])) : !e.multiple && !F(t.value) ? (a(), o(p, { key: 1 }, [
-                  C(m($(t.value)), 1)
-                ], 64)) : (a(), o(p, { key: 2 }, [
-                  e.placeholder ? (a(), o("div", Oe, m(e.placeholder), 1)) : (a(), o("div", De, " "))
+                ])) : !e.multiple && !F(t.value) ? (o(), a(v, { key: 1 }, [
+                  z(m($(t.value)), 1)
+                ], 64)) : (o(), a(v, { key: 2 }, [
+                  e.placeholder ? (o(), a("div", De, m(e.placeholder), 1)) : (o(), a("div", Le, " "))
                 ], 64))
               ], 2)
             ]),
             _: 1
-          }, 8, ["disabled", "dismiss-on-click"])),
-          pe(E("select", X({
+          }, 8, ["disabled"])),
+          ve(C("select", X({
             id: e.id,
             ref_key: "elRef",
             ref: k,
@@ -310,39 +310,39 @@ const Ee = { class: "relative" }, ze = {
             disabled: e.disabled || e.loading,
             multiple: e.multiple,
             readonly: e.readonly
-          }, H(s(j), !0)), [
-            (a(!0), o(p, null, z(e.options, (l, n) => (a(), o("option", {
+          }, H(s(x), !0)), [
+            (o(!0), a(v, null, E(e.options, (l, n) => (o(), a("option", {
               key: n,
               value: l.value,
               disabled: l.disabled
-            }, m(l.label), 9, Te))), 128))
-          ], 16, Be), [
+            }, m(l.label), 9, Fe))), 128))
+          ], 16, Te), [
             [ce, t.value]
           ]),
-          E("div", {
-            class: R(s(b).iconWrapper)
+          C("div", {
+            class: R(s(h).iconWrapper)
           }, [
-            e.loading ? (a(), c(Re, {
+            e.loading ? (o(), c(Ve, {
               key: 0,
               size: e.size
             }, null, 8, ["size"])) : me(e.$slots, "icon", { key: 1 }, () => [
-              K(Ae, {
-                icon: s(ge),
-                class: R([s(b).icon])
+              K(Ie, {
+                icon: s(we),
+                class: R([s(h).icon])
               }, null, 8, ["icon", "class"])
             ])
           ], 2)
         ]),
-        s(ie) ? ye("", !0) : (a(), c($e, {
+        s(ie) ? ye("", !0) : (o(), c(Ce, {
           key: 0,
-          error: s(x),
+          error: s(j),
           helper: e.helper
         }, null, 8, ["error", "helper"]))
       ]),
       _: 3
-    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class"]));
+    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
   }
 });
 export {
-  il as default
+  nl as default
 };

package/lib/components/select/theme/Select.base.theme.js

@@ -1,22 +1,22 @@
-const s = {
+const t = {
   classes: {
     wrapper: "",
-    box: ({ props: e, data: t }) => {
-      const r = ["w-full border border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm"];
-      return !t.errorInternal && !e.disabled && r.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-2 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed") : r.push("bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"), t.errorInternal ? r.push("border-red-500 dark:border-red-400 group-focus:outline-red-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
+    box: ({ props: e, data: s }) => {
+      const r = ["w-full border border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm"];
+      return !s.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-2 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed") : r.push("bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), s.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
     },
-    content: "py-1 max-h-72 overflow-y-auto",
+    content: "p-1 max-h-72 overflow-y-auto",
     iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",
     icon: ({ props: e }) => {
-      const t = [""];
-      return e.size === "sm" || e.size === "xs" ? t.push("h-3 w-3") : e.size === "lg" ? t.push("h-6 w-6") : e.size === "xl" ? t.push("h-7 w-7") : t.push("h-5 w-5"), e.disabled ? t.push("text-gray-300 dark:text-gray-500") : t.push("text-gray-500 dark:text-gray-400"), t;
+      const s = [""];
+      return e.size === "sm" || e.size === "xs" ? s.push("h-3 w-3") : e.size === "lg" ? s.push("h-6 w-6") : e.size === "xl" ? s.push("h-7 w-7") : s.push("h-5 w-5"), e.disabled ? s.push("text-secondary-300 dark:text-secondary-500") : s.push("text-secondary-500 dark:text-secondary-400"), s;
     }
   },
-  styles: ({ colors: e, css: t }) => {
+  styles: ({ colors: e, css: s }) => {
     const r = e.getPalette("primary");
-    return t.get("border", r[500]);
+    return s.get("border", r[500]);
   }
-}, a = s;
+}, o = t;
 export {
-  a as default
+  o as default
 };

package/lib/components/select/theme/Select.carbon.theme.js

@@ -1,22 +1,22 @@
-const a = {
+const o = {
   classes: {
     wrapper: "",
-    box: ({ props: e, data: t }) => {
-      const r = ["w-full border-b text-sm px-4 border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out"];
-      return !t.errorInternal && !e.disabled && r.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" || e.size === "sm" ? r.push("py-1.5") : e.size === "lg" || e.size === "xl" ? r.push("py-3.5") : r.push("py-2.5"), e.disabled ? r.push("bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed") : e.readonly ? r.push("bg-white dark:bg-gray-900 text-gray-700") : r.push("bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200"), t.errorInternal ? r.push("border-red-500 dark:border-red-400 group-focus:outline-red-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
+    box: ({ props: e, data: s }) => {
+      const r = ["w-full border-b text-sm px-4 border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out"];
+      return !s.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" || e.size === "sm" ? r.push("py-1.5") : e.size === "lg" || e.size === "xl" ? r.push("py-3.5") : r.push("py-2.5"), e.disabled ? r.push("bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : e.readonly ? r.push("bg-white dark:bg-secondary-900 text-secondary-700") : r.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), s.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
     },
     content: "py-1 max-h-72 overflow-y-auto",
     iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",
     icon: ({ props: e }) => {
-      const t = ["h-5 w-5"];
-      return e.disabled ? t.push("text-gray-300 dark:text-gray-500") : t.push("text-gray-500 dark:text-gray-400"), t;
+      const s = ["h-5 w-5"];
+      return e.disabled ? s.push("text-secondary-300 dark:text-secondary-500") : s.push("text-secondary-500 dark:text-secondary-400"), s;
     }
   },
-  styles: ({ colors: e, css: t }) => {
+  styles: ({ colors: e, css: s }) => {
     const r = e.getPalette("primary");
-    return t.get("border", r[500]);
+    return s.get("border", r[500]);
   }
-}, s = a;
+}, t = o;
 export {
-  s as default
+  t as default
 };

package/lib/components/skeleton/theme/Skeleton.base.theme.js

@@ -1,7 +1,7 @@
 const a = {
   classes: {
     wrapper: ({ props: s }) => {
-      const e = ["animate-pulse bg-gray-300 dark:bg-gray-600"];
+      const e = ["animate-pulse bg-secondary-300 dark:bg-secondary-600"];
       return s.shape === "circle" ? e.push("w-8 h-8 rounded-full") : e.push("rounded-md"), e;
     }
   }

package/lib/components/slider/Slider.vue.d.ts

@@ -25,6 +25,7 @@ declare const sliderProps: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -71,6 +72,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -118,6 +120,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;

package/lib/components/slider/Slider.vue.js

@@ -135,7 +135,7 @@ const oe = { class: "flex items-center relative w-full" }, ae = { class: "-mx-2"
         ]),
         l(y) ? (k(), Q("p", {
           key: 0,
-          class: "text-sm text-red-500 mt-1",
+          class: "text-sm text-error-500 mt-1",
           textContent: U(l(y))
         }, null, 8, se)) : Y("", !0)
       ]),

package/lib/components/slider/theme/Slider.carbon.theme.js

@@ -1,16 +1,16 @@
-const s = {
+const o = {
   classes: {
     wrapper: "",
-    drag: "w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900"
+    drag: "w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-secondary-900 dark:bg-secondary-100"
   },
-  styles: ({ props: t, colors: e, css: r }) => {
-    const a = e.getPalette("primary"), l = e.getPalette(t.color);
-    return r.variables({
-      bg: l[500],
+  styles: ({ props: r, colors: e, css: t }) => {
+    const a = e.getPalette("primary"), s = e.getPalette(r.color);
+    return t.variables({
+      bg: s[500],
       border: a[500]
     });
   }
-}, o = s;
+}, l = o;
 export {
-  o as default
+  l as default
 };

package/lib/components/stepper/Stepper.vue.js

@@ -7,7 +7,7 @@ import A from "../icon/Icon.vue.js";
 import { stepperIncompleteIcon as F, errorIcon as L, successIcon as T, stepperPristineIcon as W } from "../../common/icons.js";
 const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" }, G = { class: "grid text-left" }, H = { class: "text-sm truncate" }, J = {
   key: 0,
-  class: "text-xs text-gray-500"
+  class: "text-xs text-secondary-500"
 }, K = {
   ...v.validators(),
   variant: ["line"]
@@ -44,22 +44,22 @@ const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" },
   ...O,
   props: M,
   emits: ["update:modelValue"],
-  setup(y, { emit: g }) {
-    const l = y, _ = g, b = c(null), S = c(null), h = c(null);
+  setup(y, { emit: _ }) {
+    const n = y, g = _, b = c(null), S = c(null), h = c(null);
     function k(t, a) {
-      t.disabled || !l.interactive || _("update:modelValue", a);
+      t.disabled || !n.interactive || g("update:modelValue", a);
     }
     function C(t, a) {
-      return t.status === "incomplete" ? l.iconIncomplete || F : t.status === "error" ? l.iconError || L : t.status === "complete" ? l.iconComplete || T : l.iconPristine || W;
+      return t.status === "incomplete" ? n.iconIncomplete || F : t.status === "error" ? n.iconError || L : t.status === "complete" ? n.iconComplete || T : n.iconPristine || W;
     }
-    const { styles: w, classes: n, className: x } = D("Stepper", {}, l);
+    const { styles: w, classes: l, className: x } = D("Stepper", {}, n);
     return (t, a) => (i(), d("div", null, [
       r("div", {
         ref_key: "wrapperRef",
         ref: S,
         class: s(["relative", [
           o(x),
-          o(n).wrapper
+          o(l).wrapper
         ]]),
         style: B(o(w))
       }, [
@@ -69,19 +69,19 @@ const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" },
           scrollbar: !1,
           horizontal: "",
           mousewheel: "",
-          class: s(o(n).scroller)
+          class: s(o(l).scroller)
         }, {
           default: p(() => [
             r("div", {
               ref_key: "stepperRef",
               ref: h,
-              class: s(["relative", o(n).list])
+              class: s(["relative", o(l).list])
             }, [
               (i(!0), d(R, null, V(t.steps, (e, m) => (i(), N(z(t.interactive ? "button" : "div"), {
                 key: m,
-                class: s([o(n).step, {
+                class: s([o(l).step, {
                   "cursor-pointer": t.interactive && !e.disabled,
-                  "text-gray-400 dark:text-gray-600": e.disabled,
+                  "text-secondary-400 dark:text-secondary-600": e.disabled,
                   "flex-1": t.grow
                 }]),
                 disabled: e.disabled || !t.interactive,
@@ -90,13 +90,13 @@ const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" },
                 default: p(() => [
                   r("div", j, [
                     r("div", {
-                      class: s(["h-0.5 w-full mb-2", [e.status === "complete" || e.status === "incomplete" ? "bg-primary-500" : "bg-gray-200 dark:bg-gray-700"]])
+                      class: s(["h-0.5 w-full mb-2", [e.status === "complete" || e.status === "incomplete" ? "bg-primary-500" : "bg-secondary-200 dark:bg-secondary-700"]])
                     }, null, 2),
                     r("div", q, [
                       u(A, {
                         icon: C(e),
                         size: "sm",
-                        class: s([o(n).icon, {
+                        class: s([o(l).icon, {
                           "text-primary-500": e.status === "complete" || e.status === "incomplete",
                           "text-error-500": e.status === "error"
                         }])
@@ -116,7 +116,7 @@ const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" },
         }, 8, ["class"])
       ], 6),
       r("div", {
-        class: s(o(n).content)
+        class: s(o(l).content)
       }, [
         P(t.$slots, "default")
       ], 2)