@defaultusr/dai-ui 1.0.6 → 1.0.7

package/dist/main.js

@@ -1,119 +1,50 @@
-import { useFormControl as S, PopoverDialog as ee, Combobox as oe, ComboboxInput as te, ComboboxOptions as ae, ComboboxOption as le, MenuItems as se, MenuItem as ne, Tab as ie, TabList as re } from "vue-composable-ui";
-import { Menu as Ho, Popover as Fo, TabContainer as Ro, TabPanel as Go } from "vue-composable-ui";
-import { reactive as de, watch as T, onUnmounted as q, defineComponent as f, computed as B, createBlock as h, openBlock as s, resolveDynamicComponent as ue, normalizeClass as g, withCtx as v, createElementBlock as d, createCommentVNode as p, createElementVNode as r, renderSlot as y, createTextVNode as U, toDisplayString as _, useId as z, unref as c, createVNode as M, Transition as A, mergeModels as I, useModel as w, useTemplateRef as L, ref as N, onMounted as j, mergeProps as C, withDirectives as P, vModelText as ce, Fragment as Y, renderList as D, vModelSelect as pe, vModelCheckbox as me, vModelRadio as fe, nextTick as ve, normalizeStyle as O, Teleport as H, TransitionGroup as he, withModifiers as be } from "vue";
-import './assets/main.css';function ye(n, ...e) {
+import { useFormControl as A, PopoverDialog as ee, Combobox as oe, ComboboxInput as te, ComboboxOptions as ae, ComboboxOption as le, MenuItems as ne, MenuItem as ie, Tab as se, TabList as re } from "vue-composable-ui";
+import { Menu as Uo, Popover as Xo, TabContainer as Zo, TabPanel as Do } from "vue-composable-ui";
+import { reactive as de, watch as z, onUnmounted as F, defineComponent as p, createElementBlock as r, openBlock as n, renderSlot as b, createTextVNode as S, toDisplayString as k, normalizeClass as g, createBlock as h, createCommentVNode as m, createElementVNode as d, useId as q, computed as B, unref as c, createVNode as V, withCtx as v, Transition as T, mergeModels as I, useModel as w, useTemplateRef as L, ref as U, onMounted as j, mergeProps as C, withDirectives as P, vModelText as ue, Fragment as Y, renderList as R, vModelSelect as ce, vModelCheckbox as me, vModelRadio as pe, resolveDynamicComponent as fe, nextTick as ve, normalizeStyle as N, Teleport as G, TransitionGroup as he, withModifiers as be } from "vue";
+import './assets/main.css';function _e(i, ...e) {
   let a = [];
   const t = de(e);
   function o() {
-    t.length && (n.classList.add(...t), a = [...t]);
+    t.length && (i.classList.add(...t), a = [...t]);
   }
   function l() {
-    n.classList.remove(...a);
+    i.classList.remove(...a);
   }
-  return T(
+  return z(
     t,
     () => {
       l(), o();
     },
     { immediate: !0 }
-  ), q(l), {
+  ), F(l), {
     classList: t
   };
 }
-const ge = {
-  key: 0,
-  class: "dai-btn__spinner"
-}, ke = { class: "dai-btn__caption" }, $o = /* @__PURE__ */ f({
-  __name: "btn",
+const ye = { class: "dai-label" }, O = /* @__PURE__ */ p({
+  __name: "label",
   props: {
-    submit: { type: [Boolean, String] },
-    reset: { type: Boolean },
-    href: {},
-    icon: {},
-    iconAfter: {},
-    color: { default: "primary" },
-    variant: {},
-    plain: { type: Boolean },
-    muted: { type: Boolean },
-    outlined: { type: Boolean },
-    size: {},
-    sm: { type: Boolean },
-    lg: { type: Boolean },
-    loading: { type: Boolean },
-    block: { type: Boolean },
-    rounded: { type: Boolean },
-    condensed: { type: Boolean }
+    text: {}
   },
-  setup(n) {
-    const e = n, a = B(() => e.submit ? "submit" : e.reset ? "reset" : "button"), t = B(() => e.variant ? e.variant : e.plain ? "plain" : e.muted ? "muted" : e.outlined ? "outlined" : "flat"), o = B(() => e.size ? e.size : e.sm ? "small" : e.lg ? "large" : "medium");
-    return (l, i) => (s(), h(ue(l.href ? "a" : "button"), {
-      type: l.href ? void 0 : a.value,
-      form: typeof l.submit == "string" ? l.submit : void 0,
-      href: l.href,
-      class: g(["dai-btn", {
-        [`dai-btn--${l.color}`]: l.color,
-        "dai-btn--flat": t.value === "flat",
-        "dai-btn--plain": t.value === "plain",
-        "dai-btn--muted": t.value === "muted",
-        "dai-btn--outlined": t.value === "outlined",
-        "dai-btn--sm": o.value === "small",
-        "dai-btn--lg": o.value === "large",
-        "dai-btn--loading": l.loading,
-        "dai-btn--block": l.block,
-        "dai-btn--rounded": l.rounded,
-        "dai-btn--condensed": l.condensed
-      }])
-    }, {
-      default: v(() => [
-        l.loading ? (s(), d("span", ge, i[0] || (i[0] = [
-          r("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            fill: "none",
-            viewBox: "0 0 24 24"
-          }, [
-            r("circle", {
-              opacity: "0.25",
-              cx: "12",
-              cy: "12",
-              r: "10",
-              stroke: "currentColor",
-              "stroke-width": "4"
-            }),
-            r("path", {
-              opacity: "0.75",
-              fill: "currentColor",
-              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            })
-          ], -1)
-        ]))) : p("", !0),
-        r("span", ke, [
-          l.icon ? (s(), d("div", {
-            key: 0,
-            class: g([l.icon, "dai-btn__icon"])
-          }, null, 2)) : p("", !0),
-          y(l.$slots, "default"),
-          l.iconAfter ? (s(), d("div", {
-            key: 1,
-            class: g([l.iconAfter, "dai-btn__icon"])
-          }, null, 2)) : p("", !0)
-        ])
-      ]),
-      _: 3
-    }, 8, ["type", "form", "href", "class"]));
+  setup(i) {
+    return (e, a) => (n(), r("label", ye, [
+      b(e.$slots, "default", {}, () => [
+        S(k(e.text), 1)
+      ])
+    ]));
   }
-}), _e = { class: "dai-label" }, F = /* @__PURE__ */ f({
-  __name: "label",
+}), ge = { class: "dai-hint" }, X = /* @__PURE__ */ p({
+  __name: "hint",
   props: {
     text: {}
   },
-  setup(n) {
-    return (e, a) => (s(), d("label", _e, [
-      y(e.$slots, "default", {}, () => [
-        U(_(e.text), 1)
+  setup(i) {
+    return (e, a) => (n(), r("div", ge, [
+      b(e.$slots, "default", {}, () => [
+        S(k(e.text), 1)
       ])
     ]));
   }
-}), we = { class: "dai-form-control__input-group__box" }, $e = /* @__PURE__ */ f({
+}), ke = { class: "dai-form-control__input-group__box" }, we = /* @__PURE__ */ p({
   __name: "inputGroup",
   props: {
     label: {},
@@ -126,8 +57,8 @@ const ge = {
     lg: { type: Boolean },
     sm: { type: Boolean }
   },
-  setup(n) {
-    return (e, a) => (s(), d("div", {
+  setup(i) {
+    return (e, a) => (n(), r("div", {
       class: g(["dai-form-control__input-group", {
         "dai-form-control__input-group--labeled": !!e.label,
         "dai-form-control__input-group--outlined": e.outlined,
@@ -139,25 +70,22 @@ const ge = {
         "dai-form-control__input-group--invalid": e.invalid
       }])
     }, [
-      e.label ? (s(), h(F, {
+      e.label ? (n(), h(O, {
         key: 0,
         text: e.label,
         for: e.labelFor,
         class: "dai-form-control__input-group__label"
-      }, null, 8, ["text", "for"])) : p("", !0),
-      r("div", we, [
-        y(e.$slots, "default")
+      }, null, 8, ["text", "for"])) : m("", !0),
+      d("div", ke, [
+        b(e.$slots, "default")
       ])
     ], 2));
   }
-}), Be = { class: "dai-form-control__container" }, Ve = {
-  key: 0,
-  class: "dai-form-control__hint"
-}, Me = {
+}), $e = { class: "dai-form-control__container" }, Be = {
   key: 0,
   class: "dai-form-control__validation-message",
   role: "alert"
-}, R = /* @__PURE__ */ f({
+}, Z = /* @__PURE__ */ p({
   inheritAttrs: !1,
   __name: "formControl",
   props: {
@@ -176,9 +104,9 @@ const ge = {
     sm: { type: Boolean },
     autocomplete: { type: [String, Boolean], default: "off" }
   },
-  setup(n) {
-    const e = n, a = e.id || z(), t = B(() => typeof e.autocomplete == "string" ? e.autocomplete : e.autocomplete ? "on" : "off");
-    return (o, l) => (s(), d("div", {
+  setup(i) {
+    const e = i, a = e.id || q(), t = B(() => typeof e.autocomplete == "string" ? e.autocomplete : e.autocomplete ? "on" : "off");
+    return (o, l) => (n(), r("div", {
       class: g(["dai-form-control", {
         [o.$attrs.class]: o.$attrs.class,
         "dai-form-control--label-inline": o.labelInline,
@@ -186,13 +114,13 @@ const ge = {
         "dai-form-control--lg": o.lg
       }])
     }, [
-      o.label && !o.labelInside ? (s(), h(F, {
+      o.label && !o.labelInside ? (n(), h(O, {
         key: 0,
         for: c(a),
         text: o.label
-      }, null, 8, ["for", "text"])) : p("", !0),
-      r("div", Be, [
-        M($e, {
+      }, null, 8, ["for", "text"])) : m("", !0),
+      d("div", $e, [
+        V(we, {
           label: o.labelInside ? o.label : void 0,
           "label-for": c(a),
           outlined: o.outlined,
@@ -204,63 +132,66 @@ const ge = {
           invalid: o.invalid
         }, {
           default: v(() => [
-            y(o.$slots, "default", {
+            b(o.$slots, "default", {
               attrs: { id: c(a), disabled: o.disabled, autocomplete: t.value, ...o.$attrs, class: "" }
             })
           ]),
           _: 3
         }, 8, ["label", "label-for", "outlined", "muted", "rounded", "lg", "sm", "disabled", "invalid"]),
-        o.hint ? (s(), d("div", Ve, _(o.hint), 1)) : p("", !0),
-        M(A, { name: "dai-form-control__validation-message-transition" }, {
+        o.hint ? (n(), h(X, {
+          key: 0,
+          text: o.hint
+        }, null, 8, ["text"])) : m("", !0),
+        V(T, { name: "dai-form-control__validation-message-transition" }, {
           default: v(() => [
-            o.validationMessage ? (s(), d("div", Me, [
-              l[0] || (l[0] = r("svg", {
+            o.validationMessage ? (n(), r("div", Be, [
+              l[0] || (l[0] = d("svg", {
                 xmlns: "http://www.w3.org/2000/svg",
                 viewBox: "0 0 256 256",
                 class: ""
               }, [
-                r("path", {
+                d("path", {
                   fill: "currentColor",
                   d: "M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71Zm-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73ZM116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0Zm28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16Z"
                 })
               ], -1)),
-              U(" " + _(o.validationMessage), 1)
-            ])) : p("", !0)
+              S(" " + k(o.validationMessage), 1)
+            ])) : m("", !0)
           ]),
           _: 1
         })
       ])
     ], 2));
   }
-}), Ce = (n, e) => {
-  const a = n.__vccOpts || n;
+}), Ve = (i, e) => {
+  const a = i.__vccOpts || i;
   for (const [t, o] of e)
     a[t] = o;
   return a;
-}, Ie = {}, Ee = {
+}, Me = {}, Ce = {
   type: "button",
   class: "dai-form-control__btn",
   tabindex: "-1",
   "aria-hidden": "true"
 };
-function Le(n, e) {
-  return s(), d("button", Ee, [
-    y(n.$slots, "default")
+function Ie(i, e) {
+  return n(), r("button", Ce, [
+    b(i.$slots, "default")
   ]);
 }
-const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "title", "value"], Te = {
+const H = /* @__PURE__ */ Ve(Me, [["render", Ie]]), Ee = ["type", "pattern", "title", "value"], Le = {
   key: 0,
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
   viewBox: "0 0 24 24",
   stroke: "currentColor"
-}, Ae = {
+}, qe = {
   key: 1,
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
   viewBox: "0 0 24 24",
   stroke: "currentColor"
-}, Bo = /* @__PURE__ */ f({
+}, _o = /* @__PURE__ */ p({
   __name: "input",
   props: /* @__PURE__ */ I({
     type: { default: "text" },
@@ -291,21 +222,21 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
     filesModifiers: {}
   }),
   emits: ["update:modelValue", "update:files"],
-  setup(n) {
-    const e = n, a = w(n, "modelValue"), t = w(n, "files", {
+  setup(i) {
+    const e = i, a = w(i, "modelValue"), t = w(i, "files", {
       set($) {
         return o.value && (o.value.files = $), $;
       }
-    }), o = L("formElement"), { isValid: l, validationMessage: i, validate: m } = S(
+    }), o = L("formElement"), { isValid: l, validationMessage: s, validate: f } = A(
       o,
       e.validators,
       e.showValidationError
-    ), u = N(!1);
-    T(a, () => {
+    ), u = U(!1);
+    z(a, () => {
       t.value = o.value?.files || null;
     });
-    let k;
-    const b = B(() => e.type === "password" ? u.value ? "text" : "password" : e.type), E = B(() => e.mask ? e.mask : e.type === "tel" ? {
+    let y;
+    const _ = B(() => e.type === "password" ? u.value ? "text" : "password" : e.type), E = B(() => e.mask ? e.mask : e.type === "tel" ? {
       mask: "{+7} (000) 000-00-00"
     } : e.mask), K = B(() => e.pattern ? e.pattern : e.type === "tel" ? "^\\+7 \\(9\\d{2}\\) \\d{3}-\\d{2}-\\d{2}" : e.pattern), Q = B(() => e.title ? e.title : e.type === "tel" ? "+7 (999) 888-77-66" : e.title);
     function W() {
@@ -315,59 +246,59 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
       a.value = "";
     }
     function x($) {
-      if (k)
+      if (y)
         return;
-      const { value: V } = $.target;
-      a.value = V;
+      const { value: M } = $.target;
+      a.value = M;
     }
     return j(() => {
       E.value && import("./chunks/index.W-qQIppj.js").then(($) => {
-        k = $.default(
+        y = $.default(
           o.value,
           E.value
-        ), k.on("accept", () => {
-          a.value = k.value;
+        ), y.on("accept", () => {
+          a.value = y.value;
         });
       });
-    }), ($, V) => (s(), h(R, C(e, {
-      "validation-message": $.showValidationError ? "" : c(i),
+    }), ($, M) => (n(), h(Z, C(e, {
+      "validation-message": $.showValidationError ? "" : c(s),
       invalid: !c(l)
     }), {
-      default: v(({ attrs: X }) => [
-        y($.$slots, "prepend"),
-        r("input", C({
+      default: v(({ attrs: D }) => [
+        b($.$slots, "prepend"),
+        d("input", C({
           ref_key: "formElement",
           ref: o
-        }, X, {
-          type: b.value,
+        }, D, {
+          type: _.value,
           pattern: K.value,
           title: Q.value,
           value: a.value,
           onInputPassive: x,
-          onKeyupPassive: V[0] || (V[0] = (ko) => !c(l) && c(m)()),
+          onKeyupPassive: M[0] || (M[0] = (vo) => !c(l) && c(f)()),
           class: "dai-form-control__input"
-        }), null, 16, ze),
-        y($.$slots, "append"),
-        e.type === "password" && a.value ? (s(), h(Z, {
+        }), null, 16, Ee),
+        b($.$slots, "append"),
+        e.type === "password" && a.value ? (n(), h(H, {
           key: 0,
           onClick: W
         }, {
           default: v(() => [
-            u.value ? (s(), d("svg", Ae, V[2] || (V[2] = [
-              r("path", {
+            u.value ? (n(), r("svg", qe, M[2] || (M[2] = [
+              d("path", {
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 "stroke-width": "2",
                 d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
               }, null, -1)
-            ]))) : (s(), d("svg", Te, V[1] || (V[1] = [
-              r("path", {
+            ]))) : (n(), r("svg", Le, M[1] || (M[1] = [
+              d("path", {
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 "stroke-width": "2",
                 d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
               }, null, -1),
-              r("path", {
+              d("path", {
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 "stroke-width": "2",
@@ -376,19 +307,19 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
             ])))
           ]),
           _: 1
-        })) : p("", !0),
-        $.clearable && a.value && !X.disabled ? (s(), h(Z, {
+        })) : m("", !0),
+        $.clearable && a.value && !D.disabled ? (n(), h(H, {
           key: 1,
           onClick: J
         }, {
-          default: v(() => V[3] || (V[3] = [
-            r("svg", {
+          default: v(() => M[3] || (M[3] = [
+            d("svg", {
               xmlns: "http://www.w3.org/2000/svg",
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor"
             }, [
-              r("path", {
+              d("path", {
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 "stroke-width": "2",
@@ -398,87 +329,12 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
           ])),
           _: 1,
           __: [3]
-        })) : p("", !0)
+        })) : m("", !0)
       ]),
       _: 3
     }, 16, ["validation-message", "invalid"]));
   }
-}), Se = ["id"], je = ["for"], Pe = { class: "form-control__container" }, Oe = { class: "form-control__input-group" }, Ue = ["for"], Ne = {
-  key: 0,
-  class: "form-control__hint"
-}, Xe = {
-  key: 1,
-  class: "form-control__validation-message",
-  role: "alert"
-}, G = /* @__PURE__ */ f({
-  inheritAttrs: !1,
-  __name: "formControl",
-  props: {
-    id: {},
-    containerId: {},
-    label: {},
-    labelInline: { type: Boolean },
-    labelInside: { type: Boolean },
-    hint: {},
-    validationMessage: {},
-    outlined: { type: Boolean },
-    muted: { type: Boolean },
-    rounded: { type: Boolean },
-    disabled: { type: Boolean },
-    invalid: { type: Boolean },
-    lg: { type: Boolean },
-    sm: { type: Boolean },
-    autocomplete: { type: [String, Boolean], default: "off" }
-  },
-  setup(n) {
-    const e = n, a = e.id || z(), t = B(() => typeof e.autocomplete == "string" ? e.autocomplete : e.autocomplete ? "on" : "off");
-    return (o, l) => (s(), d("div", {
-      id: o.containerId,
-      class: g(["form-control", {
-        [o.$attrs.class]: o.$attrs.class,
-        "form-control--label-inline": o.labelInline,
-        "form-control--label-inside": o.labelInside,
-        "form-control--outlined": o.outlined,
-        "form-control--muted": o.muted,
-        "form-control--rounded": o.rounded,
-        "form-control--disabled": o.disabled,
-        "form-control--invalid": o.invalid,
-        "form-control--lg": o.lg,
-        "form-control--sm": o.sm
-      }])
-    }, [
-      o.label && !o.labelInside ? (s(), d("label", {
-        key: 0,
-        for: c(a)
-      }, _(o.label), 9, je)) : p("", !0),
-      r("div", Pe, [
-        r("div", Oe, [
-          o.label && o.labelInside ? (s(), d("label", {
-            key: 0,
-            for: c(a)
-          }, _(o.label), 9, Ue)) : p("", !0),
-          y(o.$slots, "default", {
-            attrs: { id: c(a), disabled: o.disabled, autocomplete: t.value, ...o.$attrs, class: "" }
-          })
-        ]),
-        o.hint ? (s(), d("div", Ne, _(o.hint), 1)) : p("", !0),
-        o.validationMessage ? (s(), d("div", Xe, [
-          l[0] || (l[0] = r("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 256 256",
-            class: ""
-          }, [
-            r("path", {
-              fill: "currentColor",
-              d: "M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71Zm-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73ZM116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0Zm28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16Z"
-            })
-          ], -1)),
-          U(" " + _(o.validationMessage), 1)
-        ])) : p("", !0)
-      ])
-    ], 10, Se));
-  }
-}), Vo = /* @__PURE__ */ f({
+}), yo = /* @__PURE__ */ p({
   __name: "textarea",
   props: /* @__PURE__ */ I({
     autosize: { type: Boolean },
@@ -489,40 +345,40 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(n) {
-    const e = n, a = w(n, "modelValue"), t = L("formElement"), { isValid: o, validationMessage: l, validate: i } = S(
+  setup(i) {
+    const e = i, a = w(i, "modelValue"), t = L("formElement"), { isValid: o, validationMessage: l, validate: s } = A(
       t,
       e.validators,
       e.showValidationError
     );
-    function m() {
+    function f() {
       if (!e.autosize) return;
-      const u = t.value, k = u.offsetHeight - u.clientHeight;
-      u.style.height = "auto", u.style.height = `${u.scrollHeight + k}px`;
+      const u = t.value, y = u.offsetHeight - u.clientHeight;
+      u.style.height = "auto", u.style.height = `${u.scrollHeight + y}px`;
     }
-    return j(m), (u, k) => (s(), h(G, {
+    return j(f), (u, y) => (n(), h(Z, {
       "validation-message": u.showValidationError ? "" : c(l),
       invalid: !c(o)
     }, {
-      default: v(({ attrs: b }) => [
-        P(r("textarea", C({
+      default: v(({ attrs: _ }) => [
+        P(d("textarea", C({
           ref_key: "formElement",
           ref: t
-        }, { ...b }, {
-          "onUpdate:modelValue": k[0] || (k[0] = (E) => a.value = E),
-          onKeyupPassive: k[1] || (k[1] = (E) => !c(o) && c(i)()),
-          onInputPassive: m,
+        }, { ..._ }, {
+          "onUpdate:modelValue": y[0] || (y[0] = (E) => a.value = E),
+          onKeyupPassive: y[1] || (y[1] = (E) => !c(o) && c(s)()),
+          onInputPassive: f,
           class: ["form-control__textarea", {
             "form-control__textarea--autosize": u.autosize
           }]
         }), null, 16), [
-          [ce, a.value]
+          [ue, a.value]
         ])
       ]),
       _: 1
     }, 8, ["validation-message", "invalid"]));
   }
-}), Ze = ["value"], Mo = /* @__PURE__ */ f({
+}), ze = ["value"], go = /* @__PURE__ */ p({
   __name: "select",
   props: /* @__PURE__ */ I({
     options: {},
@@ -535,39 +391,39 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(n) {
-    const e = n, a = w(n, "modelValue"), t = L("formElement"), { isValid: o, validationMessage: l, validate: i } = S(
+  setup(i) {
+    const e = i, a = w(i, "modelValue"), t = L("formElement"), { isValid: o, validationMessage: l, validate: s } = A(
       t,
       e.validators,
       e.showValidationError
     );
-    return (m, u) => (s(), h(R, {
-      "validation-message": m.showValidationError ? "" : c(l),
+    return (f, u) => (n(), h(Z, {
+      "validation-message": f.showValidationError ? "" : c(l),
       invalid: !c(o)
     }, {
-      default: v(({ attrs: k }) => [
-        P(r("select", C({
+      default: v(({ attrs: y }) => [
+        P(d("select", C({
           class: "dai-select",
           ref_key: "formElement",
           ref: t
-        }, { ...k }, {
-          "onUpdate:modelValue": u[0] || (u[0] = (b) => a.value = b)
+        }, { ...y }, {
+          "onUpdate:modelValue": u[0] || (u[0] = (_) => a.value = _)
         }), [
-          y(m.$slots, "default", {}, () => [
-            (s(!0), d(Y, null, D(m.options, (b) => (s(), d("option", {
-              value: b[m.optionValue],
-              key: b[m.optionValue]
-            }, _(b[m.optionText]), 9, Ze))), 128))
+          b(f.$slots, "default", {}, () => [
+            (n(!0), r(Y, null, R(f.options, (_) => (n(), r("option", {
+              value: _[f.optionValue],
+              key: _[f.optionValue]
+            }, k(_[f.optionText]), 9, ze))), 128))
           ])
         ], 16), [
-          [pe, a.value]
+          [ce, a.value]
         ]),
-        u[1] || (u[1] = r("svg", {
+        u[1] || (u[1] = d("svg", {
           class: "dai-select__btn",
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: "0 0 16 16"
         }, [
-          r("path", {
+          d("path", {
             fill: "currentColor",
             "fill-rule": "evenodd",
             d: "M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06",
@@ -579,13 +435,10 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
       __: [1]
     }, 8, ["validation-message", "invalid"]));
   }
-}), qe = { class: "flex items-center h-5" }, Ye = ["id"], De = {
+}), Te = ["id"], Ae = {
   key: 0,
-  class: "ml-3 text-sm"
-}, He = ["for"], Fe = {
-  key: 0,
-  class: "text-secondary-500 dark:text-secondary-400"
-}, Co = /* @__PURE__ */ f({
+  class: "dai-checkbox-control__label"
+}, ko = /* @__PURE__ */ p({
   inheritAttrs: !1,
   __name: "checkbox",
   props: /* @__PURE__ */ I({
@@ -599,47 +452,52 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(n) {
-    const e = n, a = w(n, "modelValue"), t = z(), o = L("formElement"), { isValid: l } = S(
+  setup(i) {
+    const e = i, a = w(i, "modelValue"), t = q(), o = L("formElement"), { isValid: l } = A(
       o,
       e.validators,
       e.showValidationError
     );
-    return (i, m) => (s(), d("div", {
-      class: g(["flex items-start", i.$attrs.class])
+    return (s, f) => (n(), r("div", {
+      class: g(["dai-checkbox-control", s.$attrs.class])
     }, [
-      r("div", qe, [
-        P(r("input", C({
-          ref_key: "formElement",
-          ref: o,
-          "onUpdate:modelValue": m[0] || (m[0] = (u) => a.value = u)
-        }, { ...i.$attrs, class: "" }, {
-          id: c(t),
-          type: "checkbox",
-          class: ["checkbox", {
-            [`checkbox--${i.color}`]: i.color,
-            "checkbox--invalid": !c(l)
-          }]
-        }), null, 16, Ye), [
-          [me, a.value]
-        ])
+      P(d("input", C({
+        ref_key: "formElement",
+        ref: o,
+        "onUpdate:modelValue": f[0] || (f[0] = (u) => a.value = u)
+      }, { ...s.$attrs, class: "" }, {
+        id: c(t),
+        type: "checkbox",
+        class: ["dai-checkbox", {
+          [`dai-checkbox--${s.color}`]: s.color,
+          "dai-checkbox--invalid": !c(l)
+        }]
+      }), null, 16, Te), [
+        [me, a.value]
       ]),
-      i.label ? (s(), d("div", De, [
-        r("label", {
-          for: c(t),
-          class: "font-medium select-none cursor-pointer"
-        }, _(i.label), 9, He),
-        i.hint ? (s(), d("p", Fe, _(i.hint), 1)) : p("", !0)
-      ])) : p("", !0)
+      s.label ? (n(), r("div", Ae, [
+        V(O, { for: c(t) }, {
+          default: v(() => [
+            b(s.$slots, "default", {}, () => [
+              S(k(s.label), 1)
+            ])
+          ]),
+          _: 3
+        }, 8, ["for"]),
+        s.hint ? (n(), h(X, {
+          key: 0,
+          text: s.hint
+        }, null, 8, ["text"])) : m("", !0)
+      ])) : m("", !0)
     ], 2));
   }
-}), Re = { class: "flex items-center h-5" }, Ge = ["value", "id"], Ke = {
+}), Se = { class: "flex items-center h-5" }, je = ["value", "id"], Pe = {
   key: 0,
   class: "text-sm"
-}, Qe = ["for"], We = {
+}, Oe = ["for"], Ne = {
   key: 0,
   class: "text-secondary-500 dark:text-secondary-400"
-}, Io = /* @__PURE__ */ f({
+}, wo = /* @__PURE__ */ p({
   inheritAttrs: !1,
   __name: "radio",
   props: /* @__PURE__ */ I({
@@ -654,48 +512,123 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(n) {
-    const e = n, a = w(n, "modelValue"), t = z(), o = L("formElement"), { isValid: l } = S(
+  setup(i) {
+    const e = i, a = w(i, "modelValue"), t = q(), o = L("formElement"), { isValid: l } = A(
       o,
       e.validators,
       e.showValidationError
     );
-    return (i, m) => (s(), d("div", {
-      class: g(["flex items-start gap-3", i.$attrs.class])
+    return (s, f) => (n(), r("div", {
+      class: g(["flex items-start gap-3", s.$attrs.class])
     }, [
-      r("div", Re, [
-        P(r("input", C({
+      d("div", Se, [
+        P(d("input", C({
           type: "radio",
           ref_key: "formElement",
           ref: o,
-          "onUpdate:modelValue": m[0] || (m[0] = (u) => a.value = u)
-        }, { ...i.$attrs, class: "" }, {
-          value: i.value,
+          "onUpdate:modelValue": f[0] || (f[0] = (u) => a.value = u)
+        }, { ...s.$attrs, class: "" }, {
+          value: s.value,
           id: c(t),
           class: ["radio", {
-            [`radio--${i.color}`]: i.color,
+            [`radio--${s.color}`]: s.color,
             "radio--invalid": !c(l)
           }]
-        }), null, 16, Ge), [
-          [fe, a.value]
+        }), null, 16, je), [
+          [pe, a.value]
         ])
       ]),
-      i.label ? (s(), d("div", Ke, [
-        r("label", {
+      s.label ? (n(), r("div", Pe, [
+        d("label", {
           for: c(t),
           class: "font-medium select-none cursor-pointer"
-        }, _(i.label), 9, Qe),
-        i.hint ? (s(), d("p", We, _(i.hint), 1)) : p("", !0)
-      ])) : p("", !0)
+        }, k(s.label), 9, Oe),
+        s.hint ? (n(), r("p", Ne, k(s.hint), 1)) : m("", !0)
+      ])) : m("", !0)
     ], 2));
   }
-}), Je = { class: "flex items-start gap-3" }, xe = ["id", "aria-checked"], eo = {
-  key: 0,
-  class: "mt-0.5 text-sm"
-}, oo = ["for"], to = {
+}), Ue = {
   key: 0,
-  class: "text-secondary-500 dark:text-secondary-400"
-}, Eo = /* @__PURE__ */ f({
+  class: "dai-btn__spinner"
+}, Xe = { class: "dai-btn__caption" }, $o = /* @__PURE__ */ p({
+  __name: "btn",
+  props: {
+    submit: { type: [Boolean, String] },
+    reset: { type: Boolean },
+    href: {},
+    icon: {},
+    iconAfter: {},
+    color: { default: "primary" },
+    variant: {},
+    plain: { type: Boolean },
+    muted: { type: Boolean },
+    outlined: { type: Boolean },
+    size: {},
+    sm: { type: Boolean },
+    lg: { type: Boolean },
+    loading: { type: Boolean },
+    block: { type: Boolean },
+    rounded: { type: Boolean },
+    condensed: { type: Boolean }
+  },
+  setup(i) {
+    const e = i, a = B(() => e.submit ? "submit" : e.reset ? "reset" : "button"), t = B(() => e.variant ? e.variant : e.plain ? "plain" : e.muted ? "muted" : e.outlined ? "outlined" : "flat"), o = B(() => e.size ? e.size : e.sm ? "small" : e.lg ? "large" : "medium");
+    return (l, s) => (n(), h(fe(l.href ? "a" : "button"), {
+      type: l.href ? void 0 : a.value,
+      form: typeof l.submit == "string" ? l.submit : void 0,
+      href: l.href,
+      class: g(["dai-btn", {
+        [`dai-btn--${l.color}`]: l.color,
+        "dai-btn--flat": t.value === "flat",
+        "dai-btn--plain": t.value === "plain",
+        "dai-btn--muted": t.value === "muted",
+        "dai-btn--outlined": t.value === "outlined",
+        "dai-btn--sm": o.value === "small",
+        "dai-btn--lg": o.value === "large",
+        "dai-btn--loading": l.loading,
+        "dai-btn--block": l.block,
+        "dai-btn--rounded": l.rounded,
+        "dai-btn--condensed": l.condensed
+      }])
+    }, {
+      default: v(() => [
+        l.loading ? (n(), r("span", Ue, s[0] || (s[0] = [
+          d("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24"
+          }, [
+            d("circle", {
+              opacity: "0.25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              "stroke-width": "4"
+            }),
+            d("path", {
+              opacity: "0.75",
+              fill: "currentColor",
+              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            })
+          ], -1)
+        ]))) : m("", !0),
+        d("span", Xe, [
+          l.icon ? (n(), r("div", {
+            key: 0,
+            class: g([l.icon, "dai-btn__icon"])
+          }, null, 2)) : m("", !0),
+          b(l.$slots, "default"),
+          l.iconAfter ? (n(), r("div", {
+            key: 1,
+            class: g([l.iconAfter, "dai-btn__icon"])
+          }, null, 2)) : m("", !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["type", "form", "href", "class"]));
+  }
+}), Ze = { class: "dai-switch-control" }, De = ["id", "aria-checked"], He = { key: 0 }, Bo = /* @__PURE__ */ p({
   __name: "switch",
   props: /* @__PURE__ */ I({
     label: {},
@@ -705,53 +638,46 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(n) {
-    const e = w(n, "modelValue"), a = z();
-    return (t, o) => (s(), d("div", Je, [
-      r("button", {
+  setup(i) {
+    const e = w(i, "modelValue"), a = q();
+    return (t, o) => (n(), r("div", Ze, [
+      d("button", {
         onClick: o[0] || (o[0] = (l) => e.value = !e.value),
         id: c(a),
         "aria-checked": e.value,
         role: "switch",
         type: "button",
         tabindex: "0",
-        class: g(["appearance-none flex-shrink-0 inline-block relative rounded-full w-10 h-6 p-0.5 transition-colors cursor-pointer select-none", [e.value ? "bg-primary-500" : "bg-secondary-300 dark:bg-dark-400"]]),
-        "un-focus-visible": "outline outline-primary-500 outline-2 outline-offset-2"
-      }, [
-        o[1] || (o[1] = r("span", { class: "sr-only" }, "Use setting", -1)),
-        r("div", {
+        class: g(["dai-switch", [e.value ? "dai-switch--on" : "dai-switch--off"]])
+      }, o[1] || (o[1] = [
+        d("div", {
           "aria-hidden": "true",
-          class: g(["relative bg-white w-5 h-5 rounded-full shadow transition-all ease-in-out", [e.value ? "left-full -translate-x-full" : "left-0"]]),
-          "un-dark": "bg-dark-800"
-        }, null, 2)
-      ], 10, xe),
-      t.label ? (s(), d("div", eo, [
-        r("label", {
+          class: "dai-switch__thumb"
+        }, null, -1)
+      ]), 10, De),
+      t.label ? (n(), r("div", He, [
+        V(O, {
           for: c(a),
-          class: "font-medium select-none cursor-pointer"
-        }, _(t.label), 9, oo),
-        t.hint ? (s(), d("p", to, _(t.hint), 1)) : p("", !0)
-      ])) : p("", !0)
+          text: t.label
+        }, null, 8, ["for", "text"]),
+        t.hint ? (n(), h(X, {
+          key: 0,
+          text: t.hint
+        }, null, 8, ["text"])) : m("", !0)
+      ])) : m("", !0)
     ]));
   }
-}), Lo = /* @__PURE__ */ f({
+}), Vo = /* @__PURE__ */ p({
   __name: "popoverDialog",
-  setup(n) {
-    return (e, a) => (s(), h(A, {
-      "enter-from-class": "opacity-0 scale-95",
-      "enter-to-class": "opacity-100 scale-100",
-      "enter-active-class": "transform transition ease-out duration-100",
-      "leave-from-class": "opacity-100 scale-100",
-      "leave-to-class": "opacity-0 scale-95",
-      "leave-active-class": "transform transition ease-in duration-75"
+  setup(i) {
+    return (e, a) => (n(), h(T, {
+      "enter-from-class": "dai-popover-dialog--anim",
+      "leave-to-class": "dai-popover-dialog--anim"
     }, {
       default: v(() => [
-        M(c(ee), {
-          class: "z-50 rounded-md overflow-hidden shadow-xl bg-white ring-1 ring-black ring-opacity-10 focus:outline-none",
-          "un-dark": "bg-dark-700 ring-dark-600"
-        }, {
+        V(c(ee), { class: "dai-popover-dialog" }, {
           default: v(() => [
-            y(e.$slots, "default")
+            b(e.$slots, "default")
           ]),
           _: 3
         })
@@ -759,24 +685,99 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
       _: 3
     }));
   }
-}), zo = /* @__PURE__ */ f({
+}), Fe = ["id"], Ye = ["for"], Re = { class: "form-control__container" }, Ge = { class: "form-control__input-group" }, Ke = ["for"], Qe = {
+  key: 0,
+  class: "form-control__hint"
+}, We = {
+  key: 1,
+  class: "form-control__validation-message",
+  role: "alert"
+}, Je = /* @__PURE__ */ p({
+  inheritAttrs: !1,
+  __name: "formControl",
+  props: {
+    id: {},
+    containerId: {},
+    label: {},
+    labelInline: { type: Boolean },
+    labelInside: { type: Boolean },
+    hint: {},
+    validationMessage: {},
+    outlined: { type: Boolean },
+    muted: { type: Boolean },
+    rounded: { type: Boolean },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    lg: { type: Boolean },
+    sm: { type: Boolean },
+    autocomplete: { type: [String, Boolean], default: "off" }
+  },
+  setup(i) {
+    const e = i, a = e.id || q(), t = B(() => typeof e.autocomplete == "string" ? e.autocomplete : e.autocomplete ? "on" : "off");
+    return (o, l) => (n(), r("div", {
+      id: o.containerId,
+      class: g(["form-control", {
+        [o.$attrs.class]: o.$attrs.class,
+        "form-control--label-inline": o.labelInline,
+        "form-control--label-inside": o.labelInside,
+        "form-control--outlined": o.outlined,
+        "form-control--muted": o.muted,
+        "form-control--rounded": o.rounded,
+        "form-control--disabled": o.disabled,
+        "form-control--invalid": o.invalid,
+        "form-control--lg": o.lg,
+        "form-control--sm": o.sm
+      }])
+    }, [
+      o.label && !o.labelInside ? (n(), r("label", {
+        key: 0,
+        for: c(a)
+      }, k(o.label), 9, Ye)) : m("", !0),
+      d("div", Re, [
+        d("div", Ge, [
+          o.label && o.labelInside ? (n(), r("label", {
+            key: 0,
+            for: c(a)
+          }, k(o.label), 9, Ke)) : m("", !0),
+          b(o.$slots, "default", {
+            attrs: { id: c(a), disabled: o.disabled, autocomplete: t.value, ...o.$attrs, class: "" }
+          })
+        ]),
+        o.hint ? (n(), r("div", Qe, k(o.hint), 1)) : m("", !0),
+        o.validationMessage ? (n(), r("div", We, [
+          l[0] || (l[0] = d("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 256 256",
+            class: ""
+          }, [
+            d("path", {
+              fill: "currentColor",
+              d: "M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71Zm-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73ZM116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0Zm28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16Z"
+            })
+          ], -1)),
+          S(" " + k(o.validationMessage), 1)
+        ])) : m("", !0)
+      ])
+    ], 10, Fe));
+  }
+}), Mo = /* @__PURE__ */ p({
   __name: "combobox",
   props: {
     modelValue: {},
     modelModifiers: {}
   },
   emits: ["update:modelValue"],
-  setup(n) {
-    const e = n, a = w(n, "modelValue"), t = z();
-    return (o, l) => (s(), h(G, C(e, { containerId: c(t) }), {
-      default: v(({ attrs: i }) => [
-        M(c(oe), C({ ...i }, {
+  setup(i) {
+    const e = i, a = w(i, "modelValue"), t = q();
+    return (o, l) => (n(), h(Je, C(e, { containerId: c(t) }), {
+      default: v(({ attrs: s }) => [
+        V(c(oe), C({ ...s }, {
           activatorId: c(t),
           modelValue: a.value,
-          "onUpdate:modelValue": l[0] || (l[0] = (m) => a.value = m)
+          "onUpdate:modelValue": l[0] || (l[0] = (f) => a.value = f)
         }), {
           default: v(() => [
-            y(o.$slots, "default")
+            b(o.$slots, "default")
           ]),
           _: 2
         }, 1040, ["activatorId", "modelValue"])
@@ -784,15 +785,15 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
       _: 3
     }, 16, ["containerId"]));
   }
-}), To = /* @__PURE__ */ f({
+}), Co = /* @__PURE__ */ p({
   __name: "comboboxInput",
-  setup(n) {
-    return (e, a) => (s(), h(c(te), { class: "form-control__input" }));
+  setup(i) {
+    return (e, a) => (n(), h(c(te), { class: "form-control__input" }));
   }
-}), Ao = /* @__PURE__ */ f({
+}), Io = /* @__PURE__ */ p({
   __name: "comboboxOptions",
-  setup(n) {
-    return (e, a) => (s(), h(A, {
+  setup(i) {
+    return (e, a) => (n(), h(T, {
       "enter-from-class": "opacity-0 scale-95",
       "enter-to-class": "opacity-100 scale-100",
       "enter-active-class": "transform transition ease-out duration-100",
@@ -801,12 +802,12 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
       "leave-active-class": "transform transition ease-in duration-75"
     }, {
       default: v(() => [
-        M(c(ae), {
+        V(c(ae), {
           class: "z-50 my-2 p-1 space-y-1 rounded-md overflow-hidden shadow-xl bg-white ring-1 ring-black ring-opacity-10 focus:outline-none",
           "un-dark": "bg-dark-700 ring-dark-600"
         }, {
           default: v(() => [
-            y(e.$slots, "default")
+            b(e.$slots, "default")
           ]),
           _: 3
         })
@@ -814,13 +815,13 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
       _: 3
     }));
   }
-}), So = /* @__PURE__ */ f({
+}), Eo = /* @__PURE__ */ p({
   __name: "comboboxOption",
   props: {
     value: {}
   },
-  setup(n) {
-    return (e, a) => (s(), h(c(le), {
+  setup(i) {
+    return (e, a) => (n(), h(c(le), {
       value: e.value,
       class: "flex items-center px-3 py-2 cursor-pointer transition-colors text-sm rounded flex items-center gap-4 select-none outline-none",
       "un-data-active": "[&:not([aria-checked=true])]:bg-secondary-100 [&:not([aria-checked=true])]:dark:bg-dark-600",
@@ -828,7 +829,7 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
       "un-aria-disabled": "pointer-events-none text-secondary-500 dark:text-secondary-400"
     }, {
       default: v(({ isActive: t, isSelected: o }) => [
-        y(e.$slots, "default", {
+        b(e.$slots, "default", {
           isActive: t,
           isSelected: o
         })
@@ -836,17 +837,17 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
       _: 3
     }, 8, ["value"]));
   }
-}), jo = /* @__PURE__ */ f({
+}), Lo = /* @__PURE__ */ p({
   __name: "menuItems",
-  setup(n) {
-    return (e, a) => (s(), h(A, {
+  setup(i) {
+    return (e, a) => (n(), h(T, {
       "enter-from-class": "dai-menu-items--anim",
       "leave-to-class": "dai-menu-items--anim"
     }, {
       default: v(() => [
-        M(c(se), { class: "dai-menu-items" }, {
+        V(c(ne), { class: "dai-menu-items" }, {
           default: v(() => [
-            y(e.$slots, "default")
+            b(e.$slots, "default")
           ]),
           _: 3
         })
@@ -854,23 +855,23 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
       _: 3
     }));
   }
-}), ao = {
+}), xe = {
   key: 0,
   class: "text-secondary-400 flex-shrink-0"
-}, Po = /* @__PURE__ */ f({
+}, qo = /* @__PURE__ */ p({
   __name: "menuItem",
   props: {
     icon: {}
   },
-  setup(n) {
-    return (e, a) => (s(), h(c(ne), { class: "dai-menu-item" }, {
+  setup(i) {
+    return (e, a) => (n(), h(c(ie), { class: "dai-menu-item" }, {
       default: v(({ isActive: t, isSelected: o }) => [
-        e.icon ? (s(), d("div", ao, [
-          r("div", {
+        e.icon ? (n(), r("div", xe, [
+          d("div", {
             class: g(["h-5 w-5", e.icon])
           }, null, 2)
-        ])) : p("", !0),
-        y(e.$slots, "default", {
+        ])) : m("", !0),
+        b(e.$slots, "default", {
           isActive: t,
           isSelected: o
         })
@@ -878,60 +879,60 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
       _: 3
     }));
   }
-}), Oo = /* @__PURE__ */ f({
+}), zo = /* @__PURE__ */ p({
   __name: "tab",
   props: {
     id: {},
     ariaControls: {},
     value: {}
   },
-  setup(n) {
-    return (e, a) => (s(), h(c(ie), {
+  setup(i) {
+    return (e, a) => (n(), h(c(se), {
       id: e.id,
       "aria-controls": e.ariaControls,
       value: e.value,
       class: "dai-tab"
     }, {
       default: v(() => [
-        y(e.$slots, "default")
+        b(e.$slots, "default")
       ]),
       _: 3
     }, 8, ["id", "aria-controls", "value"]));
   }
-}), Uo = /* @__PURE__ */ f({
+}), To = /* @__PURE__ */ p({
   __name: "tabList",
-  setup(n) {
-    const e = L("tablist"), a = L("slider"), t = N({});
+  setup(i) {
+    const e = L("tablist"), a = L("slider"), t = U({});
     function o() {
       if (!a.value) return;
       const l = e.value?.$el;
       if (!l) return;
-      const i = l.querySelector("[aria-selected=true]");
-      i && (t.value = {
-        left: `${i.offsetLeft}px`,
-        right: `${l.offsetWidth - i.offsetLeft - i.offsetWidth}px`,
-        transition: a.value.offsetLeft > i.offsetLeft ? "left .2s, right .5s" : "left .5s, right .2s"
+      const s = l.querySelector("[aria-selected=true]");
+      s && (t.value = {
+        left: `${s.offsetLeft}px`,
+        right: `${l.offsetWidth - s.offsetLeft - s.offsetWidth}px`,
+        transition: a.value.offsetLeft > s.offsetLeft ? "left .2s, right .5s" : "left .5s, right .2s"
       });
     }
-    return j(() => ve(o)), (l, i) => (s(), h(c(re), {
+    return j(() => ve(o)), (l, s) => (n(), h(c(re), {
       ref_key: "tablist",
       ref: e,
       onClickPassive: o,
       class: "dai-tab-list"
     }, {
       default: v(() => [
-        r("div", {
+        d("div", {
           ref_key: "slider",
           ref: a,
           class: "dai-tab-list__slider",
-          style: O(t.value)
+          style: N(t.value)
         }, null, 4),
-        y(l.$slots, "default")
+        b(l.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
-}), lo = ["id"], No = /* @__PURE__ */ f({
+}), eo = ["id"], Ao = /* @__PURE__ */ p({
   inheritAttrs: !1,
   __name: "offcanvas",
   props: /* @__PURE__ */ I({
@@ -946,23 +947,23 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(n) {
-    const e = n, a = w(n, "modelValue"), t = e.id ?? z(), { classList: o } = ye(document.body, "nui-body-push");
-    T(a, () => {
+  setup(i) {
+    const e = i, a = w(i, "modelValue"), t = e.id ?? q(), { classList: o } = _e(document.body, "nui-body-push");
+    z(a, () => {
       if (!e.push || (o.splice(1), !a.value))
         return;
-      let i = "nui-body-push--" + e.position;
-      e.lg && (i += "--lg"), e.xl && (i += "--xl"), o.push(i);
+      let s = "nui-body-push--" + e.position;
+      e.lg && (s += "--lg"), e.xl && (s += "--xl"), o.push(s);
     });
-    function l(i) {
-      i.target.closest(`#${t}`) || e.closeOnOutsideClick && (a.value = !1);
+    function l(s) {
+      s.target.closest(`#${t}`) || e.closeOnOutsideClick && (a.value = !1);
     }
     return j(() => {
       window.addEventListener("click", l, { passive: !0 });
-    }), q(() => {
+    }), F(() => {
       window.removeEventListener("click", l);
-    }), (i, m) => (s(), h(H, { to: "body" }, [
-      M(A, {
+    }), (s, f) => (n(), h(G, { to: "body" }, [
+      V(T, {
         appear: "",
         "enter-from-class": "nui-offcanvas--animate-hidden",
         "enter-to-class": "nui-offcanvas--animate-shown",
@@ -972,61 +973,60 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
         "leave-active-class": "ease-in-out"
       }, {
         default: v(() => [
-          a.value ? (s(), d("div", C({
+          a.value ? (n(), r("div", C({
             key: 0,
             id: c(t)
-          }, i.$attrs, {
+          }, s.$attrs, {
             class: ["nui-offcanvas", {
-              [`nui-offcanvas--${i.position}`]: !0,
-              "nui-offcanvas--shadow": !i.push,
-              "nui-offcanvas--lg": i.lg,
-              "nui-offcanvas--xl": i.xl
+              [`nui-offcanvas--${s.position}`]: !0,
+              "nui-offcanvas--shadow": !s.push,
+              "nui-offcanvas--lg": s.lg,
+              "nui-offcanvas--xl": s.xl
             }]
           }), [
-            y(i.$slots, "default")
-          ], 16, lo)) : p("", !0)
+            b(s.$slots, "default")
+          ], 16, eo)) : m("", !0)
         ]),
         _: 3
       })
     ]));
   }
-}), so = {
+}), oo = {
   key: 0,
   role: "alert"
-}, no = { class: "flex items-start" }, io = {
-  class: "h-6 w-6",
+}, to = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
   viewBox: "0 0 24 24",
   stroke: "currentColor"
-}, ro = {
+}, ao = {
   key: 0,
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   "stroke-width": "2",
   d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-}, uo = {
+}, lo = {
   key: 1,
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   "stroke-width": "2",
   d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-}, co = {
+}, no = {
   key: 2,
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   "stroke-width": "2",
   d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-}, po = {
+}, io = {
   key: 3,
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   "stroke-width": "2",
   d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-}, mo = { class: "flex-grow pt-.5" }, fo = {
+}, so = { class: "dai-notification__content" }, ro = {
   key: 0,
-  class: "mt-1 text-white text-opacity-80"
-}, vo = /* @__PURE__ */ f({
+  class: "dai-notification__content__detail"
+}, uo = /* @__PURE__ */ p({
   __name: "notification",
   props: /* @__PURE__ */ I({
     color: {},
@@ -1040,70 +1040,55 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(n) {
-    const e = n, a = w(n, "modelValue");
+  setup(i) {
+    const e = i, a = w(i, "modelValue");
     let t;
     function o() {
       clearTimeout(t), a.value && e.timeout && (t = setTimeout(() => a.value = !1, e.timeout));
     }
-    return T(a, o, { immediate: !0 }), (l, i) => a.value ? (s(), d("div", so, [
-      r("div", {
-        class: g(["rounded-md ring-1 ring-black ring-opacity-10 px-4 py-3 shadow-2xl text-sm opacity-95 hover:opacity-100 transition-opacity", {
-          "bg-secondary-600": !l.color || l.color == "secondary",
-          "bg-primary-400": l.color == "primary",
-          "bg-success-400": l.color == "success",
-          "bg-info-400": l.color == "info",
-          "bg-warning-400": l.color == "warning",
-          "bg-danger-400": l.color == "danger"
-        }])
+    return z(a, o, { immediate: !0 }), (l, s) => a.value ? (n(), r("div", oo, [
+      d("div", {
+        class: g(["dai-notification", [`dai-notification--${l.color || "secondary"}`]])
       }, [
-        r("div", no, [
-          l.icon ? (s(), d("div", {
-            key: 0,
-            class: g(["mx-auto flex-shrink-0 pr-4", {
-              "text-success-500": l.icon == "success",
-              "text-info-500": l.icon == "info",
-              "text-warning-500": l.icon == "warning",
-              "text-danger-600": l.icon == "error"
+        l.icon ? (n(), r("div", {
+          key: 0,
+          class: g(["dai-notification__icon", [`dai-notification__icon--${l.icon}`]])
+        }, [
+          (n(), r("svg", to, [
+            l.icon == "success" ? (n(), r("path", ao)) : l.icon == "info" ? (n(), r("path", lo)) : l.icon == "warning" ? (n(), r("path", no)) : l.icon == "danger" ? (n(), r("path", io)) : m("", !0)
+          ]))
+        ], 2)) : m("", !0),
+        d("div", so, [
+          d("div", {
+            class: g(["dai-notification__content__message", {
+              "dai-notification__content__message--bold": l.detail
             }])
+          }, k(l.message), 3),
+          l.detail ? (n(), r("div", ro, k(l.detail), 1)) : m("", !0)
+        ]),
+        l.dismissible ? (n(), r("div", {
+          key: 1,
+          onClick: s[0] || (s[0] = (f) => a.value = !1),
+          class: "dai-notification__dismiss"
+        }, s[1] || (s[1] = [
+          d("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor"
           }, [
-            (s(), d("svg", io, [
-              l.icon == "success" ? (s(), d("path", ro)) : l.icon == "info" ? (s(), d("path", uo)) : l.icon == "warning" ? (s(), d("path", co)) : l.icon == "error" ? (s(), d("path", po)) : p("", !0)
-            ]))
-          ], 2)) : p("", !0),
-          r("div", mo, [
-            r("div", {
-              class: g(["text-white text-opacity-90", {
-                "font-medium": l.detail
-              }])
-            }, _(l.message), 3),
-            l.detail ? (s(), d("div", fo, _(l.detail), 1)) : p("", !0)
-          ]),
-          l.dismissible ? (s(), d("div", {
-            key: 1,
-            onClick: i[0] || (i[0] = (m) => a.value = !1),
-            class: "ml-4 flex-shrink-0 text-white text-opacity-80 hover:text-opacity-100 cursor-pointer"
-          }, i[1] || (i[1] = [
-            r("svg", {
-              class: "h-5 w-5",
-              xmlns: "http://www.w3.org/2000/svg",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor"
-            }, [
-              r("path", {
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
-                "stroke-width": "2",
-                d: "M6 18L18 6M6 6l12 12"
-              })
-            ], -1)
-          ]))) : p("", !0)
-        ])
+            d("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M6 18L18 6M6 6l12 12"
+            })
+          ], -1)
+        ]))) : m("", !0)
       ], 2)
-    ])) : p("", !0);
+    ])) : m("", !0);
   }
-}), Xo = /* @__PURE__ */ f({
+}), So = /* @__PURE__ */ p({
   __name: "notificationQueue",
   props: /* @__PURE__ */ I({
     length: { default: 3 },
@@ -1116,62 +1101,60 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
     queueModifiers: {}
   }),
   emits: ["update:queue"],
-  setup(n) {
-    const e = n, a = w(n, "queue"), t = N([]);
+  setup(i) {
+    const e = i, a = w(i, "queue"), t = U([]);
     let o = 0;
     function l() {
       a.value.length === 0 || t.value.length >= e.length || (t.value.push({ ...a.value[0], id: o++, show: !0 }), a.value.shift());
     }
-    function i(u) {
+    function s(u) {
       setTimeout(() => {
         t.value = t.value.filter(
-          (k) => k.id !== u
+          (y) => y.id !== u
         ), l();
       }, 200);
     }
-    T(a, l, { immediate: !0, deep: !0 });
-    const m = B(() => {
-      const u = ["opacity-0"];
-      return e.positionX === "right" ? u.push("translate-x-80") : e.positionX === "left" ? u.push("-translate-x-80") : e.positionX === "center" && e.positionY === "top" ? u.push("-translate-y-20") : e.positionX === "center" && e.positionY === "bottom" && u.push("translate-y-20"), u.join(" ");
+    z(a, l, { immediate: !0, deep: !0 });
+    const f = B(() => {
+      const u = ["dai-notification-queue__item--anim"];
+      return e.positionX === "right" ? u.push("dai-notification-queue__item--anim-x-right") : e.positionX === "left" ? u.push("dai-notification-queue__item--anim-x-left") : e.positionX === "center" && e.positionY === "top" ? u.push("dai-notification-queue__item--anim-y-top") : e.positionX === "center" && e.positionY === "bottom" && u.push("dai-notification-queue__item--anim-y-bottom"), u.join(" ");
     });
-    return (u, k) => (s(), d("div", {
-      class: g(["fixed z-100 w-96 max-w-full flex gap-2", {
-        fixed: u.position == "fixed",
-        absolute: u.position == "absolute",
-        "top-4": u.positionY == "top",
-        "bottom-4": u.positionY == "bottom",
-        "right-4": u.positionX == "right",
-        "left-4": u.positionX == "left",
-        "left-1/2 -translate-x-1/2": u.positionX == "center",
-        "flex-col-reverse": u.positionY === "top",
-        "flex-col": u.positionY === "bottom"
+    return (u, y) => (n(), r("div", {
+      class: g(["dai-notification-queue", {
+        "dai-notification-queue--fixed": u.position == "fixed",
+        "dai-notification-queue--absolute": u.position == "absolute",
+        "dai-notification-queue--y-top": u.positionY == "top",
+        "dai-notification-queue--y-bottom": u.positionY == "bottom",
+        "dai-notification-queue--x-left": u.positionX == "left",
+        "dai-notification-queue--x-center": u.positionX == "center",
+        "dai-notification-queue--x-right": u.positionX == "right"
       }])
     }, [
-      M(he, {
+      V(he, {
         appear: "",
-        "enter-from-class": m.value,
-        "enter-active-class": "ease-out",
-        "leave-to-class": m.value,
-        "leave-active-class": "ease-in"
+        "enter-from-class": f.value,
+        "enter-active-class": "dai-notification-queue__item--anim-in",
+        "leave-to-class": f.value,
+        "leave-active-class": "dai-notification-queue__item--anim-out"
       }, {
         default: v(() => [
-          (s(!0), d(Y, null, D(t.value, (b) => (s(), h(vo, {
-            key: b.id,
-            color: b.color,
-            icon: b.type,
-            message: b.message,
-            detail: b.detail,
-            timeout: b.timeout ?? u.timeout,
-            modelValue: b.show,
-            "onUpdate:modelValue": [(E) => b.show = E, (E) => i(b.id)],
-            class: "transition-all duration-200"
+          (n(!0), r(Y, null, R(t.value, (_) => (n(), h(uo, {
+            key: _.id,
+            color: _.color,
+            icon: _.type,
+            message: _.message,
+            detail: _.detail,
+            timeout: _.timeout ?? u.timeout,
+            modelValue: _.show,
+            "onUpdate:modelValue": [(E) => _.show = E, (E) => s(_.id)],
+            class: "dai-notification-queue__item"
           }, null, 8, ["color", "icon", "message", "detail", "timeout", "modelValue", "onUpdate:modelValue"]))), 128))
         ]),
         _: 1
       }, 8, ["enter-from-class", "leave-to-class"])
     ], 2));
   }
-}), ho = ["aria-valuenow"], Zo = /* @__PURE__ */ f({
+}), co = ["aria-valuenow"], jo = /* @__PURE__ */ p({
   __name: "progressbar",
   props: {
     value: {},
@@ -1179,9 +1162,9 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
     height: { default: 5 },
     rounded: { type: Boolean, default: !0 }
   },
-  setup(n) {
-    const e = n, a = B(() => e.value === void 0);
-    return (t, o) => (s(), d("div", {
+  setup(i) {
+    const e = i, a = B(() => e.value === void 0);
+    return (t, o) => (n(), r("div", {
       class: g(["overflow-hidden text-xs w-full flex-1", {
         rounded: t.rounded,
         "bg-primary-200": t.color == "primary",
@@ -1190,14 +1173,14 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
         "bg-warning-200": t.color == "warning",
         "bg-danger-200": t.color == "danger"
       }]),
-      style: O({ height: t.height + "px" }),
+      style: N({ height: t.height + "px" }),
       role: "progressbar",
       "aria-valuemin": "0",
       "aria-valuemax": "100",
       "aria-valuenow": t.value
     }, [
-      r("div", {
-        style: O(`width:${t.value}%`),
+      d("div", {
+        style: N(`width:${t.value}%`),
         class: g([{
           "bg-primary-500": t.color == "primary",
           "bg-success-500": t.color == "success",
@@ -1207,12 +1190,12 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
           "progress-infinite": a.value
         }, "h-full shadow-none relative text-center whitespace-nowrap text-white justify-center"])
       }, null, 6)
-    ], 14, ho));
+    ], 14, co));
   }
-}), bo = {
+}), mo = {
   key: 0,
   class: "z-50"
-}, yo = { class: "fixed inset-0 overflow-y-auto" }, go = { class: "modal__dialog" }, qo = /* @__PURE__ */ f({
+}, po = { class: "fixed inset-0 overflow-y-auto" }, fo = { class: "modal__dialog" }, Po = /* @__PURE__ */ p({
   inheritAttrs: !1,
   __name: "modal",
   props: {
@@ -1220,36 +1203,36 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
     modelModifiers: {}
   },
   emits: ["update:modelValue"],
-  setup(n) {
-    const e = w(n, "modelValue");
+  setup(i) {
+    const e = w(i, "modelValue");
     function a() {
       e.value = !1;
     }
-    return T(e, (t) => {
+    return z(e, (t) => {
       t ? document.body.classList.add("overflow-hidden") : document.body.classList.remove("overflow-hidden");
-    }), (t, o) => (s(), h(H, { to: "body" }, [
-      M(A, {
+    }), (t, o) => (n(), h(G, { to: "body" }, [
+      V(T, {
         appear: "",
         name: "modal",
         duration: { enter: 300, leave: 200 }
       }, {
         default: v(() => [
-          e.value ? (s(), d("div", bo, [
-            o[0] || (o[0] = r("div", {
+          e.value ? (n(), r("div", mo, [
+            o[0] || (o[0] = d("div", {
               class: "modal__backdrop fixed inset-0 bg-primary-50/60 backdrop-blur-sm",
               "aria-hidden": "true"
             }, null, -1)),
-            r("div", yo, [
-              r("div", {
+            d("div", po, [
+              d("div", {
                 onClick: be(a, ["self"]),
                 class: "min-h-full flex items-center justify-center p-4 sm:p-6"
               }, [
-                r("div", go, [
-                  y(t.$slots, "default", { close: a })
+                d("div", fo, [
+                  b(t.$slots, "default", { close: a })
                 ])
               ])
             ])
-          ])) : p("", !0)
+          ])) : m("", !0)
         ]),
         _: 3
       })
@@ -1258,29 +1241,29 @@ const Z = /* @__PURE__ */ Ce(Ie, [["render", Le]]), ze = ["type", "pattern", "ti
 });
 export {
   $o as Btn,
-  Co as Checkbox,
-  zo as Combobox,
-  To as ComboboxInput,
-  So as ComboboxOption,
-  Ao as ComboboxOptions,
-  Bo as Input,
-  Ho as Menu,
-  Po as MenuItem,
-  jo as MenuItems,
-  qo as Modal,
-  vo as Notification,
-  Xo as NotificationQueue,
-  No as Offcanvas,
-  Fo as Popover,
-  Lo as PopoverDialog,
-  Zo as Progressbar,
-  Io as Radio,
-  Mo as Select,
-  Eo as Switch,
-  Oo as Tab,
-  Ro as TabContainer,
-  Uo as TabList,
-  Go as TabPanel,
-  Vo as Textarea,
-  ye as useClassList
+  ko as Checkbox,
+  Mo as Combobox,
+  Co as ComboboxInput,
+  Eo as ComboboxOption,
+  Io as ComboboxOptions,
+  _o as Input,
+  Uo as Menu,
+  qo as MenuItem,
+  Lo as MenuItems,
+  Po as Modal,
+  uo as Notification,
+  So as NotificationQueue,
+  Ao as Offcanvas,
+  Xo as Popover,
+  Vo as PopoverDialog,
+  jo as Progressbar,
+  wo as Radio,
+  go as Select,
+  Bo as Switch,
+  zo as Tab,
+  Zo as TabContainer,
+  To as TabList,
+  Do as TabPanel,
+  yo as Textarea,
+  _e as useClassList
 };