@indielayer/ui 1.4.0 → 1.5.0

package/lib/components/label/Label.vue.d.ts

@@ -10,6 +10,7 @@ declare const labelProps: {
         type: StringConstructor;
         default: string;
     };
+    tooltip: StringConstructor;
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
@@ -30,6 +31,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    tooltip: StringConstructor;
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
@@ -45,6 +47,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    tooltip: StringConstructor;
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";

package/lib/components/label/Label.vue.js

@@ -1,8 +1,9 @@
-import { defineComponent as u, openBlock as o, createBlock as t, resolveDynamicComponent as s, normalizeStyle as f, unref as l, normalizeClass as r, withCtx as n, createTextVNode as b, toDisplayString as y, createCommentVNode as g, renderSlot as B } from "vue";
+import { defineComponent as f, openBlock as o, createBlock as t, resolveDynamicComponent as s, normalizeStyle as b, unref as l, normalizeClass as n, withCtx as r, createElementVNode as y, toDisplayString as g, createCommentVNode as i, renderSlot as B } from "vue";
 import { useTheme as C } from "../../composables/useTheme.js";
-import { useCommon as i } from "../../composables/useCommon.js";
-const S = {
-  ...i.props(),
+import { useCommon as p } from "../../composables/useCommon.js";
+import S from "../tooltip/ToggleTip.vue.js";
+const k = {
+  ...p.props(),
   label: String,
   disabled: Boolean,
   required: Boolean,
@@ -11,32 +12,37 @@ const S = {
   tag: {
     type: String,
     default: "label"
-  }
-}, k = {
+  },
+  tooltip: String
+}, _ = {
   name: "XLabel",
   validators: {
-    ...i.validators()
+    ...p.validators()
   }
-}, w = /* @__PURE__ */ u({
-  ...k,
-  props: S,
+}, D = /* @__PURE__ */ f({
+  ..._,
+  props: k,
   setup(m) {
-    const p = m, { styles: d, classes: a, className: c } = C("Label", {}, p);
-    return (e, _) => (o(), t(s(e.tag), {
-      style: f(l(d)),
-      class: r([l(c), l(a).wrapper])
+    const d = m, { styles: c, classes: a, className: u } = C("Label", {}, d);
+    return (e, h) => (o(), t(s(e.tag), {
+      style: b(l(c)),
+      class: n([l(u), l(a).wrapper])
     }, {
-      default: n(() => [
+      default: r(() => [
         e.label ? (o(), t(s(e.tag === "fieldset" ? "legend" : "p"), {
           key: 0,
           title: e.label,
-          class: r(l(a).label)
+          class: n(l(a).label)
         }, {
-          default: n(() => [
-            b(y(e.label), 1)
+          default: r(() => [
+            y("span", null, g(e.label), 1),
+            e.tooltip ? (o(), t(S, {
+              key: 0,
+              content: e.tooltip
+            }, null, 8, ["content"])) : i("", !0)
           ]),
           _: 1
-        }, 8, ["title", "class"])) : g("", !0),
+        }, 8, ["title", "class"])) : i("", !0),
         B(e.$slots, "default")
       ]),
       _: 3
@@ -44,5 +50,5 @@ const S = {
   }
 });
 export {
-  w as default
+  D as default
 };

package/lib/components/label/theme/Label.base.theme.js

@@ -5,7 +5,7 @@ const s = {
       return t.isInsideForm && e.push("mb-3"), t.block && e.push("w-full"), e;
     },
     label: ({ props: t }) => {
-      const e = "font-medium text-gray-800 dark:text-gray-200 mb-1";
+      const e = "flex items-center gap-2 font-medium text-secondary-800 dark:text-secondary-200 mb-1";
       return t.size === "xs" ? e + " text-xs" : t.size === "sm" ? e + " text-sm" : t.size === "lg" ? e + " text-lg" : t.size === "xl" ? e + " text-xl" : e;
     }
   }

package/lib/components/label/theme/Label.carbon.theme.js

@@ -4,9 +4,9 @@ const s = {
       const e = ["block relative align-bottom focus:outline-none"];
       return t.isInsideForm && e.push("mb-8"), t.block && e.push("w-full"), e;
     },
-    label: "text-xs text-gray-500 dark:text-gray-200 mb-2"
+    label: "text-xs text-secondary-500 dark:text-secondary-200 mb-2"
   }
-}, l = s;
+}, o = s;
 export {
-  l as default
+  o as default
 };

package/lib/components/link/Link.vue.js

@@ -3,7 +3,7 @@ import o from "./Link.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: o
-}, c = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-37edea5a"]]);
+}, m = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-81a39d2b"]]);
 export {
-  c as default
+  m as default
 };

package/lib/components/link/Link.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as m, openBlock as n, createBlock as p, resolveDynamicComponent as u, normalizeStyle as d, unref as o, normalizeClass as c, withCtx as f, createElementBlock as k, renderSlot as t, createVNode as y } from "vue";
+import { defineComponent as m, openBlock as n, createBlock as p, resolveDynamicComponent as d, normalizeStyle as u, unref as o, normalizeClass as c, withCtx as f, createElementBlock as k, renderSlot as t, createVNode as y } from "vue";
 import { useColors as h } from "../../composables/useColors.js";
 import { useTheme as g } from "../../composables/useTheme.js";
 import { externalIcon as B } from "../../common/icons.js";
@@ -7,7 +7,7 @@ const C = {
   key: 0,
   class: "inline-flex items-center"
 }, $ = {
-  ...h.props("primary"),
+  ...h.props("secondary"),
   tag: {
     type: String,
     default: "a"
@@ -21,9 +21,9 @@ const C = {
   props: $,
   setup(s) {
     const l = s, { styles: r, classes: a, className: i } = g("Link", {}, l);
-    return (e, v) => (n(), p(u(e.to ? e.tag !== "a" ? e.tag : "router-link" : e.tag), {
+    return (e, v) => (n(), p(d(e.to ? e.tag !== "a" ? e.tag : "router-link" : e.tag), {
       to: e.to,
-      style: d(o(r)),
+      style: u(o(r)),
       class: c([
         o(i),
         e.$style.link,

package/lib/components/loader/theme/Loader.base.theme.js

@@ -2,7 +2,7 @@ const e = {
   classes: {
     wrapper: "inline-flex items-center justify-center",
     iconSuccess: "text-green-500",
-    iconError: "text-red-500",
+    iconError: "text-error-500",
     label: "mx-2 text-sm"
   }
 }, t = e;

package/lib/components/loader/theme/Loader.carbon.theme.js

@@ -2,7 +2,7 @@ const e = {
   classes: {
     wrapper: "inline-flex items-center justify-center",
     iconSuccess: "text-green-500",
-    iconError: "text-red-500",
+    iconError: "text-error-500",
     label: "mx-2 text-sm"
   }
 }, t = e;

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 j, ref as f, watch as B, nextTick as g, useSlots as H, computed as I, openBlock as t, createBlock as p, Teleport as M, createElementBlock as i, normalizeStyle as P, unref as o, normalizeClass as s, createCommentVNode as a, createElementVNode as S, resolveDynamicComponent as W, withCtx as w, renderSlot as r, toDisplayString as v } from "vue";
+import { onClickOutside as K, useEventListener as L } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useTheme as q } from "../../composables/useTheme.js";
+import { useFocusTrap as G } from "../../composables/useFocusTrap.js";
+import { closeIcon as J } from "../../common/icons.js";
+import Q from "../button/Button.vue.js";
+import U from "../scroll/Scroll.vue.js";
+import Y from "../form/Form.vue.js";
+const Z = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = {
   size: {
     type: String,
     default: "xl"
@@ -40,61 +40,65 @@ 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
+}, oe = {
   name: "XModal",
   validators: {
-    size: _
+    size: x
   }
-}, ue = /* @__PURE__ */ X({
-  ...ee,
-  props: x,
+}, ce = /* @__PURE__ */ j({
+  ...oe,
+  props: ee,
   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: $, emit: C }) {
+    const n = V, b = C, u = f(n.modelValue), d = f(!1), y = f(null), T = f(null), { initFocusTrap: D, clearFocusTrap: z } = G();
+    let c;
+    B(u, (e) => {
+      c && (c(), c = void 0), e && setTimeout(() => {
+        c = K(y, F);
       });
-    }), g(() => u.modelValue, E, { immediate: !0 });
+    }), B(() => 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 g(), d.value = e, await g(), 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" && L(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 = H(), R = I(() => !!(k["tertiary-action"] || k["cancel-action"])), { styles: N, classes: l, className: X } = q("Modal", {}, n, {
+      visible: d
     });
-    return $({ open: F, close: c }), (e, h) => (l(), p(I, { to: "body" }, [
-      d.value ? (l(), i("div", {
+    return $({ open: O, close: m }), (e, h) => (t(), p(M, { 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: T,
+        style: P(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", Z, [
+          (t(), p(W(e.isForm ? Y : "div"), {
             ref_key: "modalRef",
             ref: y,
             disabled: e.formDisabled,
@@ -102,78 +106,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] = (te) => e.$emit("submit"))
           }, {
             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(U, {
                 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(Q, {
                 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(J),
+                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", _)) : 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
 };