@indielayer/ui 1.4.0 → 1.5.1

package/lib/components/menu/Menu.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as C, resolveComponent as B, openBlock as d, createElementBlock as n, normalizeStyle as g, unref as p, normalizeClass as i, Fragment as a, renderList as E, createBlock as u, withCtx as c, createVNode as r, createCommentVNode as w } from "vue";
+import { defineComponent as C, resolveComponent as B, openBlock as d, createElementBlock as n, normalizeStyle as E, unref as p, normalizeClass as i, Fragment as a, renderList as w, createBlock as u, withCtx as b, createVNode as r, createCommentVNode as M } from "vue";
 import { useCommon as m } from "../../composables/useCommon.js";
-import { useColors as M } from "../../composables/useColors.js";
-import { useTheme as N } from "../../composables/useTheme.js";
-import f from "./MenuItem.vue.js";
+import { useColors as N } from "../../composables/useColors.js";
+import { useTheme as g } from "../../composables/useTheme.js";
+import c from "./MenuItem.vue.js";
 import A from "../accordion/AccordionItem.vue.js";
 import S from "../divider/Divider.vue.js";
 const V = {
   ...m.props(),
-  ...M.props("primary"),
+  ...N.props("secondary"),
   items: Array,
   collapsible: {
     type: Boolean,
@@ -34,19 +34,19 @@ const V = {
   props: V,
   emits: ["expand", "item-click"],
   setup(y) {
-    const z = y, { styles: k, classes: v, className: $ } = N("Menu", {}, z);
+    const z = y, { styles: k, classes: v, className: $ } = g("Menu", {}, z);
     return (e, o) => {
-      const b = B("x-menu");
+      const f = B("x-menu");
       return e.items ? (d(), n("div", {
         key: 0,
-        style: g(p(k)),
+        style: E(p(k)),
         class: i([
           "space-y-1",
           p($),
           p(v).wrapper
         ])
       }, [
-        (d(!0), n(a, null, E(e.items, (l, t) => (d(), n(a, { key: t }, [
+        (d(!0), n(a, null, w(e.items, (l, t) => (d(), n(a, { key: t }, [
           l.items ? (d(), n(a, { key: 0 }, [
             l.collapsible !== !1 ? (d(), u(A, {
               key: 0,
@@ -57,8 +57,8 @@ const V = {
               class: "x-menu-inner space-y-1",
               onExpand: o[1] || (o[1] = (s) => e.$emit("expand"))
             }, {
-              default: c(({}) => [
-                r(f, {
+              default: b(({}) => [
+                r(c, {
                   item: l,
                   rounded: e.rounded,
                   color: l.color || e.color,
@@ -68,9 +68,9 @@ const V = {
                   class: "font-medium"
                 }, null, 8, ["item", "rounded", "color", "filled", "size", "disabled"])
               ]),
-              content: c(({ expand: s }) => [
-                r(b, {
-                  class: i(["border-l ml-4 border-gray-100 dark:border-gray-700", { "pl-1": e.filled }]),
+              content: b(({ expand: s }) => [
+                r(f, {
+                  class: i(["border-l ml-4 border-secondary-100 dark:border-secondary-700", { "pl-1": e.filled }]),
                   items: l.items,
                   color: l.color || e.color,
                   size: l.size || e.size,
@@ -86,7 +86,7 @@ const V = {
               ]),
               _: 2
             }, 1032, ["icon", "expanded", "disabled", "show-icon"])) : (d(), n(a, { key: 1 }, [
-              r(f, {
+              r(c, {
                 item: l,
                 rounded: e.rounded,
                 color: l.color || e.color,
@@ -97,8 +97,8 @@ const V = {
                 inactive: "",
                 onClick: o[2] || (o[2] = (s) => e.$emit("item-click"))
               }, null, 8, ["item", "rounded", "color", "filled", "size", "disabled"]),
-              r(b, {
-                class: i(["x-menu-inner space-y-1 ml-4 border-l border-gray-100 dark:border-gray-700", { "pl-1": e.filled }]),
+              r(f, {
+                class: i(["x-menu-inner space-y-1 ml-4 border-l border-secondary-100 dark:border-secondary-700", { "pl-1": e.filled }]),
                 items: l.items,
                 color: l.color || e.color,
                 size: l.size || e.size,
@@ -112,7 +112,7 @@ const V = {
               }, null, 8, ["class", "items", "color", "size", "collapsible", "collapse-icon", "expanded", "disabled", "rounded", "filled"])
             ], 64))
           ], 64)) : (d(), n(a, { key: 1 }, [
-            l.divider ? (d(), u(S, { key: 0 })) : (d(), u(f, {
+            l.divider ? (d(), u(S, { key: 0 })) : (d(), u(c, {
               key: 1,
               item: l,
               rounded: e.rounded,
@@ -126,7 +126,7 @@ const V = {
             }, null, 8, ["item", "rounded", "color", "filled", "size", "disabled", "class"]))
           ], 64))
         ], 64))), 128))
-      ], 6)) : w("", !0);
+      ], 6)) : M("", !0);
     };
   }
 });

package/lib/components/menu/theme/MenuItem.base.theme.js

@@ -1,58 +1,48 @@
-const x = {
+const l = {
   classes: {
-    wrapper: ({ props: r, data: a }) => {
-      const i = ["relative !flex items-center whitespace-nowrap px-3"];
-      return i.push({
-        "font-medium": a.isActive,
-        "cursor-pointer": !r.disabled,
-        // size
-        "py-1 text-xs": r.size === "xs",
-        "py-2 text-sm": r.size === "sm",
-        "py-1.5": !r.size || !["xs", "sm", "lg", "xl"].includes(r.size),
-        "py-3": r.size === "lg",
-        "py-4 text-lg": r.size === "xl",
-        rounded: r.rounded
-      }), i;
+    wrapper: ({ props: i, data: s }) => {
+      const r = ["relative !flex items-center whitespace-nowrap px-3"];
+      return i.disabled || r.push("cursor-pointer"), s.isActive && r.push("font-medium"), i.rounded && r.push("rounded"), i.size === "xs" ? r.push("py-1 text-xs") : i.size === "sm" ? r.push("py-1.5 text-sm") : i.size === "lg" ? r.push("py-3") : i.size === "xl" ? r.push("py-4 text-lg") : r.push("py-1.5"), r;
     }
   },
-  styles: ({ colors: r, props: a, css: i, data: l }) => {
-    const e = r.getPalette(a.color || "gray"), t = r.getPalette("gray");
-    return a.disabled ? i.variables({
+  styles: ({ colors: i, props: s, css: r, data: a }) => {
+    const e = i.getPalette(s.color || "gray"), t = i.getPalette("secondary");
+    return s.disabled ? r.variables({
       text: t[300],
       dark: {
         text: t[600]
       }
-    }) : a.filled ? l.isActive ? i.variables({
-      bg: a.selected ? e[100] : e[50],
-      text: e[500],
+    }) : s.filled ? a.isActive ? r.variables({
+      bg: s.selected ? e[100] : e[200],
+      text: e[800],
       hover: {
-        bg: a.selected ? e[100] : e[50],
-        text: e[500]
+        bg: (s.selected, e[200]),
+        text: e[800]
       },
       dark: {
-        bg: (a.selected, e[700]),
+        bg: (s.selected, e[700]),
         text: e[100],
         hover: {
-          bg: (a.selected, e[700]),
+          bg: (s.selected, e[700]),
           text: e[100]
         }
       }
-    }) : i.variables({
-      bg: a.selected ? t[50] : "transparent",
+    }) : r.variables({
+      bg: s.selected ? t[100] : "transparent",
       text: t[800],
       hover: {
-        bg: t[50],
+        bg: t[100],
         text: t[900]
       },
       dark: {
-        bg: a.selected ? t[800] : "transparent",
+        bg: s.selected ? t[800] : "transparent",
         text: t[200],
         hover: {
           bg: t[600],
           text: t[100]
         }
       }
-    }) : l.isActive ? i.variables({
+    }) : a.isActive ? r.variables({
       text: e[500],
       hover: {
         text: e[500],
@@ -65,7 +55,7 @@ const x = {
           border: e[500]
         }
       }
-    }) : i.variables({
+    }) : r.variables({
       text: t[800],
       hover: {
         text: t[900],
@@ -80,7 +70,7 @@ const x = {
       }
     });
   }
-}, d = x;
+}, d = l;
 export {
   d as default
 };

package/lib/components/modal/Modal.vue.d.ts

@@ -36,6 +36,7 @@ declare const modalProps: {
         type: PropType<[FormError[], FormError]>;
         default: () => never[];
     };
+    persistent: BooleanConstructor;
 };
 export type ModalSize = typeof modalSize[number];
 export type ModalProps = ExtractPublicPropTypes<typeof modalProps>;
@@ -79,6 +80,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<[FormError[], FormError]>;
         default: () => never[];
     };
+    persistent: BooleanConstructor;
 }, {
     open: () => void;
     close: () => void;
@@ -116,6 +118,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<[FormError[], FormError]>;
         default: () => never[];
     };
+    persistent: BooleanConstructor;
 }>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -132,6 +135,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     formDisabled: boolean;
     formAutoValidate: boolean;
     formErrors: [FormError[], FormError];
+    persistent: boolean;
 }, {}>, {
     image?(_: {}): any;
     header?(_: {}): any;

package/lib/components/modal/Modal.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as X, ref as f, watch as g, nextTick as B, useSlots as j, computed as H, openBlock as l, createBlock as p, Teleport as I, createElementBlock as i, normalizeStyle as M, unref as o, normalizeClass as a, createCommentVNode as s, createElementVNode as S, resolveDynamicComponent as P, withCtx as w, renderSlot as r, toDisplayString as v } from "vue";
-import { onClickOutside as W, useEventListener as K } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
-import { useTheme as L } from "../../composables/useTheme.js";
-import { useFocusTrap as q } from "../../composables/useFocusTrap.js";
-import { closeIcon as G } from "../../common/icons.js";
-import J from "../button/Button.vue.js";
-import Q from "../scroll/Scroll.vue.js";
-import U from "../form/Form.vue.js";
-const Y = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, Z = { key: 0 }, _ = ["xs", "sm", "md", "lg", "xl", "full"], x = {
+import { defineComponent as H, ref as f, watch as g, nextTick as B, useSlots as I, computed as M, openBlock as t, createBlock as p, Teleport as P, createElementBlock as i, normalizeStyle as W, unref as o, normalizeClass as s, createCommentVNode as a, createElementVNode as S, resolveDynamicComponent as K, withCtx as w, renderSlot as r, toDisplayString as v } from "vue";
+import { onClickOutside as L, useEventListener as q } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useTheme as G } from "../../composables/useTheme.js";
+import { useFocusTrap as J } from "../../composables/useFocusTrap.js";
+import { closeIcon as Q } from "../../common/icons.js";
+import U from "../button/Button.vue.js";
+import Y from "../scroll/Scroll.vue.js";
+import Z from "../form/Form.vue.js";
+const _ = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = {
   size: {
     type: String,
     default: "xl"
@@ -40,61 +40,67 @@ const Y = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
   formErrors: {
     type: [Array, Object],
     default: () => []
-  }
-}, ee = {
+  },
+  persistent: Boolean
+}, te = {
   name: "XModal",
   validators: {
-    size: _
+    size: ee
   }
-}, ue = /* @__PURE__ */ X({
-  ...ee,
-  props: x,
+}, ce = /* @__PURE__ */ H({
+  ...te,
+  props: oe,
   emits: ["update:modelValue", "submit"],
-  setup(V, { expose: $, emit: T }) {
-    const u = V, b = T, d = f(u.modelValue), n = f(!1), y = f(null), C = f(null), { initFocusTrap: D, clearFocusTrap: z } = q();
-    let m;
-    g(d, (e) => {
-      m && (m(), m = void 0), e && setTimeout(() => {
-        m = W(y, c);
+  setup(V, { expose: C, emit: T }) {
+    const n = V, b = T, u = f(n.modelValue), d = f(!1), y = f(null), $ = f(null), { initFocusTrap: D, clearFocusTrap: z } = J();
+    let c;
+    g(u, (e) => {
+      c && (c(), c = void 0), e && setTimeout(() => {
+        c = L(y, F, {
+          ignore: [".v-popper__popper"]
+        });
       });
-    }), g(() => u.modelValue, E, { immediate: !0 });
+    }), g(() => n.modelValue, E, { immediate: !0 });
     async function E() {
-      const e = u.modelValue;
-      e ? (d.value = e, await B(), n.value = e, await B(), D(y), document.body.style.overflow = "hidden") : (n.value = e, d.value = e, z(), document.body.style.overflow = "auto");
+      const e = n.modelValue;
+      e ? (u.value = e, await B(), d.value = e, await B(), D(y), document.body.style.overflow = "hidden") : (d.value = e, u.value = e, z(), document.body.style.overflow = "auto");
     }
-    typeof window < "u" && K(document, "keydown", A);
+    typeof window < "u" && q(document, "keydown", A);
     function A(e) {
-      e.key === "Escape" && d.value && c();
+      e.key === "Escape" && u.value && !n.persistent && m();
     }
-    function c() {
-      n.value = !1, setTimeout(() => {
+    function F() {
+      n.persistent || m();
+    }
+    function m() {
+      d.value = !1, setTimeout(() => {
         b("update:modelValue", !1);
       }, 150);
     }
-    function F() {
-      b("update:modelValue", !0), n.value = !0;
+    function O() {
+      b("update:modelValue", !0), d.value = !0;
     }
-    const k = j(), R = H(() => !!(k["tertiary-action"] || k["cancel-action"])), { styles: N, classes: t, className: O } = L("Modal", {}, u, {
-      visible: n
+    const k = I(), R = M(() => !!(k["tertiary-action"] || k["cancel-action"])), { styles: N, classes: l, className: X } = G("Modal", {}, n, {
+      visible: d
     });
-    return $({ open: F, close: c }), (e, h) => (l(), p(I, { to: "body" }, [
-      d.value ? (l(), i("div", {
+    return C({ open: O, close: m }), (e, h) => (t(), p(P, { to: "body" }, [
+      u.value ? (t(), i("div", {
         key: 0,
         ref_key: "modalWrapperRef",
-        ref: C,
-        style: M(o(N)),
-        class: a([
-          o(O),
-          o(t).wrapper,
-          n.value ? "visible" : "invisible ease-in duration-100"
+        ref: $,
+        style: W(o(N)),
+        class: s([
+          o(X),
+          o(l).wrapper,
+          d.value ? "visible" : "invisible ease-in duration-100"
         ])
       }, [
-        e.backdrop ? (l(), i("div", {
+        e.backdrop ? (t(), i("div", {
           key: 0,
-          class: a(o(t).backdrop)
-        }, null, 2)) : s("", !0),
-        S("div", Y, [
-          (l(), p(P(e.isForm ? U : "div"), {
+          class: s(o(l).backdrop)
+        }, null, 2)) : a("", !0),
+        S("div", _, [
+          (t(), p(K(e.isForm ? Z : "div"), {
             ref_key: "modalRef",
             ref: y,
             disabled: e.formDisabled,
@@ -102,78 +108,78 @@ const Y = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
             title: e.formTitle,
             description: e.formDescription,
             errors: e.formErrors,
-            class: a(o(t).modal),
+            class: s(o(l).modal),
             "auto-focus": "",
             "has-footer": !1,
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": "modal-headline",
-            onSubmit: h[0] || (h[0] = (oe) => e.$emit("submit"))
+            onSubmit: h[0] || (h[0] = (j) => e.$emit("submit", j))
           }, {
             default: w(() => [
               r(e.$slots, "image"),
-              e.hasHeader ? (l(), i("div", {
+              e.hasHeader ? (t(), i("div", {
                 key: 0,
-                class: a(o(t).header)
+                class: s(o(l).header)
               }, [
                 r(e.$slots, "header", {}, () => [
-                  e.label ? (l(), i("div", {
+                  e.label ? (t(), i("div", {
                     key: 0,
-                    class: a(o(t).label)
-                  }, v(e.label), 3)) : s("", !0),
-                  e.title ? (l(), i("div", {
+                    class: s(o(l).label)
+                  }, v(e.label), 3)) : a("", !0),
+                  e.title ? (t(), i("div", {
                     key: 1,
-                    class: a(o(t).title)
-                  }, v(e.title), 3)) : s("", !0)
+                    class: s(o(l).title)
+                  }, v(e.title), 3)) : a("", !0)
                 ])
-              ], 2)) : s("", !0),
-              e.$slots.default ? (l(), p(Q, {
+              ], 2)) : a("", !0),
+              e.$slots.default ? (t(), p(Y, {
                 key: 1,
                 scrollbar: !1,
                 vertical: ""
               }, {
                 default: w(() => [
                   S("div", {
-                    class: a(o(t).content)
+                    class: s(o(l).content)
                   }, [
-                    e.description ? (l(), i("div", {
+                    e.description ? (t(), i("div", {
                       key: 0,
-                      class: a(o(t).description)
-                    }, v(e.description), 3)) : s("", !0),
+                      class: s(o(l).description)
+                    }, v(e.description), 3)) : a("", !0),
                     r(e.$slots, "default")
                   ], 2)
                 ]),
                 _: 3
-              })) : s("", !0),
-              e.showClose ? (l(), p(J, {
+              })) : a("", !0),
+              e.showClose ? (t(), p(U, {
                 key: 2,
                 ghost: "",
-                size: "lg",
+                size: "sm",
                 tabindex: "-1",
-                icon: o(G),
-                class: a(o(t).closeIcon),
-                onClick: c
-              }, null, 8, ["icon", "class"])) : s("", !0),
-              e.hasActions ? (l(), i("div", {
+                icon: o(Q),
+                class: s(o(l).closeIcon),
+                onClick: m
+              }, null, 8, ["icon", "class"])) : a("", !0),
+              e.hasActions ? (t(), i("div", {
                 key: 3,
-                class: a(o(t).actions)
+                class: s(o(l).actions)
               }, [
                 r(e.$slots, "actions", {}, () => [
                   r(e.$slots, "cancel-action"),
-                  R.value ? (l(), i("div", Z)) : s("", !0),
+                  R.value ? (t(), i("div", x)) : a("", !0),
                   r(e.$slots, "tertiary-action"),
                   r(e.$slots, "secondary-action"),
                   r(e.$slots, "primary-action")
                 ])
-              ], 2)) : s("", !0)
+              ], 2)) : a("", !0)
             ]),
             _: 3
           }, 40, ["disabled", "auto-validate", "title", "description", "errors", "class"]))
         ])
-      ], 6)) : s("", !0)
+      ], 6)) : a("", !0)
     ]));
   }
 });
 export {
-  ue as default
+  ce as default
 };

package/lib/components/modal/theme/Modal.base.theme.js

@@ -1,21 +1,21 @@
 const a = {
   classes: {
     wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
-    backdrop: ({ data: s }) => {
-      const t = ["fixed inset-0 bg-gray-500 dark:bg-black transition-opacity"];
-      return s.visible ? t.push("ease-out duration-200 opacity-30 dark:opacity-70") : t.push("ease-in duration-100 opacity-0"), t;
+    backdrop: ({ data: e }) => {
+      const t = ["fixed inset-0 bg-secondary-500 dark:bg-black transition-opacity"];
+      return e.visible ? t.push("ease-out duration-200 opacity-30 dark:opacity-70") : t.push("ease-in duration-100 opacity-0"), t;
     },
-    modal: ({ props: s, data: t }) => {
-      const e = ["relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
-      return t.visible ? e.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : e.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), s.size === "xs" ? e.push("sm:max-w-xs") : s.size === "sm" ? e.push("sm:max-w-sm") : s.size === "lg" ? e.push("sm:max-w-xl") : s.size === "xl" ? e.push("sm:max-w-3xl") : e.push("sm:max-w-lg"), e;
+    modal: ({ props: e, data: t }) => {
+      const s = ["relative flex flex-col z-10 bg-white dark:bg-secondary-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
+      return t.visible ? s.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : s.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), e.size === "xs" ? s.push("sm:max-w-xs") : e.size === "sm" ? s.push("sm:max-w-sm") : e.size === "lg" ? s.push("sm:max-w-xl") : e.size === "xl" ? s.push("sm:max-w-3xl") : s.push("sm:max-w-lg"), s;
     },
     closeIcon: "!absolute top-2 z-10 right-2",
     header: "text-lg pl-6 py-4 border-b pr-12",
     content: "px-6 py-4",
-    actions: "bg-slate-50 dark:bg-gray-800 p-4 grid grid-flow-col gap-4",
-    label: "text-xs text-gray-500 mb-1",
-    title: "text-xl font-semibold mb-4",
-    description: "text-sm"
+    actions: ({ props: e, slots: t }) => ["flex gap-4 bg-secondary-50 dark:bg-secondary-800 p-4 justify-end"],
+    label: "text-xs text-secondary-500 mb-1",
+    title: "text-xl font-semibold",
+    description: "text-sm mb-8"
   }
 }, l = a;
 export {

package/lib/components/modal/theme/Modal.carbon.theme.js

@@ -2,11 +2,11 @@ const a = {
   classes: {
     wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
     backdrop: ({ data: t }) => {
-      const e = ["fixed inset-0 bg-gray-500 dark:bg-black transition-opacity"];
+      const e = ["fixed inset-0 bg-secondary-500 dark:bg-black transition-opacity"];
       return t.visible ? e.push("ease-out duration-200 opacity-70 dark:opacity-70") : e.push("ease-in duration-100 opacity-0"), e;
     },
     modal: ({ props: t, data: e }) => {
-      const s = ["relative flex flex-col z-10 bg-gray-200 dark:bg-gray-900 shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
+      const s = ["relative flex flex-col z-10 bg-secondary-200 dark:bg-secondary-900 shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
       return e.visible ? s.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : s.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), t.size === "xs" ? s.push("sm:max-w-xs") : t.size === "sm" ? s.push("sm:max-w-sm") : t.size === "lg" ? s.push("sm:max-w-xl") : t.size === "xl" ? s.push("sm:max-w-3xl") : s.push("sm:max-w-lg"), s;
     },
     closeIcon: "!absolute top-0 z-10 right-0",
@@ -19,7 +19,7 @@ const a = {
       const s = ["grid grid-flow-col gap-[1px]"];
       return e["tertiary-action"] || e["cancel-action"] ? s.push("grid-cols-4") : s.push("grid-cols-2"), s;
     },
-    label: "text-xs text-gray-500 mb-1",
+    label: "text-xs text-secondary-500 mb-1",
     title: "text-xl mb-4",
     description: "text-sm mb-4"
   }

package/lib/components/notifications/Notifications.vue.js

@@ -217,7 +217,7 @@ const se = { class: "flex items-center flex-wrap" }, re = {
                 e.removable ? (a(), k(E, {
                   key: 2,
                   icon: l(oe),
-                  class: "text-gray-400 hover:text-gray-500 ml-3 cursor-pointer",
+                  class: "text-secondary-400 hover:text-secondary-500 ml-3 cursor-pointer",
                   onClick: () => {
                     y(e);
                   }

package/lib/components/notifications/theme/Notifications.base.theme.js

@@ -2,7 +2,7 @@ const e = {
   classes: {
     wrapper: "fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen",
     list: "flex flex-col items-end w-full sm:w-[520px] px-4",
-    item: "w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border border-gray-700 dark:border-gray-100"
+    item: "w-full flex items-center rounded-md px-4 py-3 bg-secondary-800 dark:bg-secondary-50 text-white dark:text-secondary-900 border border-secondary-700 dark:border-secondary-100"
   }
 }, r = e;
 export {

package/lib/components/notifications/theme/Notifications.carbon.theme.js

@@ -2,9 +2,9 @@ const e = {
   classes: {
     wrapper: "fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen",
     list: "flex flex-col items-end w-full sm:w-[520px] px-4",
-    item: () => ["w-full flex items-center px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border-l-2 border-[color:var(--x-notification-icon)]"]
+    item: () => ["w-full flex items-center px-4 py-3 bg-secondary-800 dark:bg-secondary-50 text-white dark:text-secondary-900 border-l-2 border-[color:var(--x-notification-icon)]"]
   }
-}, r = e;
+}, t = e;
 export {
-  r as default
+  t as default
 };