@nmorph/nmorph-ui-kit 0.2.12 → 0.2.14

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as T, computed as p, ref as x, openBlock as o, createElementBlock as a, normalizeClass as H, createElementVNode as n, createBlock as P, unref as _, renderSlot as A, toDisplayString as R, createCommentVNode as O, useCssVars as I, normalizeStyle as N, resolveDynamicComponent as O2, createStaticVNode as Ye, createTextVNode as ee, onUnmounted as pe, onMounted as Y, watch as K, withDirectives as Ge, vShow as Ke, reactive as le, createVNode as M, withCtx as E, Fragment as L, renderList as U, provide as J, nextTick as Ve, inject as Q, Teleport as ie, withModifiers as ne, useSlots as Xe, readonly as q2, TransitionGroup as de, mergeProps as ye, withKeys as P2, resolveComponent as Je, pushScopeId as R2, popScopeId as E2 } from "vue";
+import { defineComponent as T, computed as v, ref as x, openBlock as o, createElementBlock as a, normalizeClass as H, createElementVNode as n, createBlock as P, unref as _, renderSlot as A, toDisplayString as R, createCommentVNode as O, useCssVars as I, normalizeStyle as N, resolveDynamicComponent as O2, createStaticVNode as Ye, createTextVNode as ee, onUnmounted as pe, onMounted as Y, watch as K, withDirectives as Ge, vShow as Ke, reactive as le, createVNode as M, withCtx as E, Fragment as L, renderList as U, provide as J, nextTick as Ve, inject as Q, Teleport as ie, withModifiers as ne, useSlots as Xe, readonly as q2, TransitionGroup as de, mergeProps as ye, withKeys as P2, resolveComponent as Je, pushScopeId as R2, popScopeId as E2 } from "vue";
 import { createI18n as F2 } from "vue-i18n";
 var te = /* @__PURE__ */ ((e) => (e.thick = "thick-component", e.default = "default-height-component", e.thin = "thin-component", e))(te || {}), j2 = /* @__PURE__ */ ((e) => (e.ascending = "ascending", e.descending = "descending", e))(j2 || {}), W2 = /* @__PURE__ */ ((e) => (e.row = "row", e.column = "column", e))(W2 || {}), Qe = /* @__PURE__ */ ((e) => (e.inset = "inset", e.outset = "outset", e.combined = "combined", e))(Qe || {}), Ze = /* @__PURE__ */ ((e) => (e.accent = "accent", e.success = "success", e.error = "error", e.warning = "warning", e))(Ze || {}), c = /* @__PURE__ */ ((e) => (e["add-location"] = "add-location", e.aim = "aim", e["alarm-clock"] = "alarm-clock", e.apple = "apple", e.archive = "archive", e["arrow-down"] = "arrow-down", e["arrow-left"] = "arrow-left", e["arrow-right"] = "arrow-right", e["arrow-up"] = "arrow-up", e.audio = "audio", e.avatar = "avatar", e.back = "back", e["bell-filled"] = "bell-filled", e.bell = "bell", e.bicycle = "bicycle", e["bottom-left"] = "bottom-left", e["bottom-right"] = "bottom-right", e.bottom = "bottom", e.burger = "burger", e.calendar = "calendar", e.camera = "camera", e["caret-bottom"] = "caret-bottom", e["caret-left"] = "caret-left", e["caret-right"] = "caret-right", e["caret-top"] = "caret-top", e.cellphone = "cellphone", e["chat-dot-round"] = "chat-dot-round", e["chat-dot-square"] = "chat-dot-square", e["chat-line-round"] = "chat-line-round", e["chat-line-square"] = "chat-line-square", e["chat-round"] = "chat-round", e["chat-square"] = "chat-square", e.check = "check", e.checked = "checked", e.cherry = "cherry", e["chevron-double-down"] = "chevron-double-down", e["chevron-down"] = "chevron-down", e["chrome-filled"] = "chrome-filled", e["circle-check-filled"] = "circle-check-filled", e["circle-check"] = "circle-check", e["circle-close-filled"] = "circle-close-filled", e["circle-close"] = "circle-close", e["circle-plus-filled"] = "circle-plus-filled", e["circle-plus"] = "circle-plus", e.clock = "clock", e.close = "close", e.cloudy = "cloudy", e.code = "code", e["coffee-cup"] = "coffee-cup", e.coffee = "coffee", e.coin = "coin", e["collection-tag"] = "collection-tag", e.collection = "collection", e.compass = "compass", e.connection = "connection", e.coordinate = "coordinate", e["copy-document"] = "copy-document", e.copy = "copy", e.cpu = "cpu", e["credit-card"] = "credit-card", e.crop = "crop", e.cross = "cross", e["delete-filled"] = "delete-filled", e.delete = "delete", e.dessert = "dessert", e.discount = "discount", e.doc = "doc", e["document-add"] = "document-add", e["document-checked"] = "document-checked", e["document-copy"] = "document-copy", e["document-delete"] = "document-delete", e["document-remove"] = "document-remove", e.document = "document", e.download = "download", e["edit-pen"] = "edit-pen", e.edit = "edit", e.enlarge = "enlarge", e.error = "error", e.expand = "expand", e["eye-blocked"] = "eye-blocked", e.eye = "eye", e.failed = "failed", e.files = "files", e.film = "film", e.filter = "filter", e.finished = "finished", e.flag = "flag", e.fold = "fold", e["folder-add"] = "folder-add", e["folder-checked"] = "folder-checked", e["folder-delete"] = "folder-delete", e["folder-opened"] = "folder-opened", e.folder = "folder", e.food = "food", e["fork-spoon"] = "fork-spoon", e["full-screen"] = "full-screen", e.goblet = "goblet", e["gold-medal"] = "gold-medal", e["goods-filled"] = "goods-filled", e.goods = "goods", e.grape = "grape", e.grid = "grid", e.guide = "guide", e.handbag = "handbag", e.headset = "headset", e.histogram = "histogram", e["hot-water"] = "hot-water", e.house = "house", e["ice-cream-round"] = "ice-cream-round", e["ice-drink"] = "ice-drink", e["info-filled"] = "info-filled", e.info = "info", e.image = "image", e.key = "key", e["knife-fork"] = "knife-fork", e.lightning = "lightning", e.link = "link", e.list = "list", e.loader = "loader", e.loading = "loading", e["location-filled"] = "location-filled", e["location-information"] = "location-information", e.location = "location", e.lock = "lock", e.logo = "logo", e.lollipop = "lollipop", e["magic-stick"] = "magic-stick", e.magnet = "magnet", e.male = "male", e.management = "management", e["map-location"] = "map-location", e.medal = "medal", e.memo = "memo", e.menu = "menu", e["message-box"] = "message-box", e.message = "message", e.mic = "mic", e.microphone = "microphone", e.minus = "minus", e.money = "money", e.monitor = "monitor", e.moon = "moon", e["more-filled"] = "more-filled", e.more = "more", e["mostly-cloudy"] = "mostly-cloudy", e.mouse = "mouse", e.mug = "mug", e["mute-notification"] = "mute-notification", e.mute = "mute", e["no-smoking"] = "no-smoking", e.notebook = "notebook", e.notification = "notification", e["office-building"] = "office-building", e.operation = "operation", e.opportunity = "opportunity", e.orange = "orange", e.paperclip = "paperclip", e["partly-cloudy"] = "partly-cloudy", e.pear = "pear", e["phone-filled"] = "phone-filled", e.phone = "phone", e.picture = "picture", e["pie-chart"] = "pie-chart", e.place = "place", e.platform = "platform", e.plus = "plus", e.pointer = "pointer", e.position = "position", e["post-card"] = "post-card", e.pouring = "pouring", e.present = "present", e["price-tag"] = "price-tag", e.printer = "printer", e.promotion = "promotion", e["quartz-watch"] = "quartz-watch", e["question-filled"] = "question-filled", e.rank = "rank", e["reading-lamp"] = "reading-lamp", e.reading = "reading", e["refresh-left"] = "refresh-left", e["refresh-right"] = "refresh-right", e.refresh = "refresh", e.refrigerator = "refrigerator", e["remove-filled"] = "remove-filled", e.remove = "remove", e["rotate-left"] = "rotate-left", e["rotate-right"] = "rotate-right", e["scale-to-original"] = "scale-to-original", e.school = "school", e.scissor = "scissor", e.search = "search", e.select = "select", e.sell = "sell", e["semi-select"] = "semi-select", e.service = "service", e.setting = "setting", e.share = "share", e.ship = "ship", e.shop = "shop", e["shopping-bag"] = "shopping-bag", e["shopping-cart-full"] = "shopping-cart-full", e["shopping-cart"] = "shopping-cart", e.shrink = "shrink", e.smoking = "smoking", e.soccer = "soccer", e["sold-out"] = "sold-out", e["sort-down"] = "sort-down", e["sort-up"] = "sort-up", e.sort = "sort", e.stamp = "stamp", e["star-filled"] = "star-filled", e.star = "star", e["success-filled"] = "success-filled", e.success = "success", e.sugar = "sugar", e.sunny = "sunny", e.sunrise = "sunrise", e.sunset = "sunset", e["switch-button"] = "switch-button", e["switch-filled"] = "switch-filled", e.switch = "switch", e["takeaway-box"] = "takeaway-box", e.ticket = "ticket", e.tickets = "tickets", e.time = "time", e.timer = "timer", e["toilet-paper"] = "toilet-paper", e.tools = "tools", e["top-left"] = "top-left", e["top-right"] = "top-right", e.top = "top", e["trend-charts"] = "trend-charts", e["triangle-down"] = "triangle-down", e["trophy-base"] = "trophy-base", e.trophy = "trophy", e["turn-off"] = "turn-off", e.umbrella = "umbrella", e.unlock = "unlock", e["upload-filled"] = "upload-filled", e.upload = "upload", e["user-filled"] = "user-filled", e.user = "user", e.van = "van", e["video-camera"] = "video-camera", e["video-pause"] = "video-pause", e["video-play"] = "video-play", e.video = "video", e.view = "view", e["wallet-filled"] = "wallet-filled", e.wallet = "wallet", e["warn-triangle-filled"] = "warn-triangle-filled", e.warning = "warning", e.watch = "watch", e["wind-power"] = "wind-power", e["zoom-in"] = "zoom-in", e["zoom-out"] = "zoom-out", e))(c || {}), L2 = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(L2 || {}), U2 = /* @__PURE__ */ ((e) => (e.fill = "fill", e.contain = "contain", e.cover = "cover", e.none = "none", e["scale-down"] = "scale-down", e))(U2 || {}), oe = /* @__PURE__ */ ((e) => (e.en = "en", e.ru = "ru", e))(oe || {});
 const Y2 = (e, t) => {
@@ -44,7 +44,7 @@ const Y2 = (e, t) => {
   },
   emits: ["click"],
   setup(e, { expose: t, emit: s }) {
-    const l = e, r = p(
+    const l = e, r = v(
       () => D({
         nmorph: [te[l.height], `${l.fill && "fill"}`],
         "nmorph-button": [
@@ -60,7 +60,7 @@ const Y2 = (e, t) => {
       thin: "small",
       default: "medium",
       thick: "large"
-    }, u = p(() => d[l.height]);
+    }, u = v(() => d[l.height]);
     return t({ buttonRef: i }), (m, g) => (o(), a("div", {
       class: H(r.value)
     }, [
@@ -107,7 +107,7 @@ const Q2 = {
     I((i) => ({
       "2f7363e1": r.value
     }));
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-icon": [
           `${!t.width && !t.height && t.size}`,
@@ -115,10 +115,10 @@ const Q2 = {
           `${t.height ? "custom-height" : ""}`
         ]
       })
-    ), l = p(() => {
+    ), l = v(() => {
       const i = {};
       return t.width && (i["--width"] = t.width), t.height && (i["--height"] = t.height), i;
-    }), r = p(() => `var(${t.color})`);
+    }), r = v(() => `var(${t.color})`);
     return (i, h) => (o(), a("div", {
       class: H(s.value),
       style: N(l.value)
@@ -2811,7 +2811,7 @@ const Vf = { render: kf }, n2 = {
     disabled: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-link": [t.color, `${t.underline && "underline"}`, `${t.disabled && "disabled"}`]
       })
@@ -2852,19 +2852,19 @@ const Bf = /* @__PURE__ */ T({
   },
   emits: ["on-scroll", "update:modelValue", "on-scroll-end"],
   setup(e, { emit: t }) {
-    I((v) => ({
+    I((p) => ({
       bd47d458: i.value,
       "6f33bd73": h.value,
       53434826: r.value,
       53434824: l.value,
       aa996170: w.value
     }));
-    const s = e, l = p(() => s.scrollYProp), r = p(() => s.scrollXProp), i = p(() => s.scrollYProp !== "hidden" ? "--scrollbar-width" : "0"), h = p(() => s.scrollXProp !== "hidden" ? "--scrollbar-height" : "0");
+    const s = e, l = v(() => s.scrollYProp), r = v(() => s.scrollXProp), i = v(() => s.scrollYProp !== "hidden" ? "--scrollbar-width" : "0"), h = v(() => s.scrollXProp !== "hidden" ? "--scrollbar-height" : "0");
     let d;
     const u = t, m = () => {
       u("on-scroll-end");
-    }, g = (v) => {
-      if (u("on-scroll", v), !y.value)
+    }, g = (p) => {
+      if (u("on-scroll", p), !y.value)
         return;
       const $ = y.value.scrollLeft, f = y.value.scrollTop;
       u("update:modelValue", { x: $, y: f }), d !== void 0 && clearTimeout(d), d = setTimeout(() => {
@@ -2874,12 +2874,12 @@ const Bf = /* @__PURE__ */ T({
     pe(() => {
       d !== void 0 && clearTimeout(d);
     });
-    const k = p(
+    const k = v(
       () => D({
         "nmorph-scroll": []
       })
-    ), y = x(null), b = (v) => {
-      const { x: $, y: f } = v;
+    ), y = x(null), b = (p) => {
+      const { x: $, y: f } = p;
       y.value?.scrollTo({
         left: $,
         top: f,
@@ -2890,19 +2890,19 @@ const Bf = /* @__PURE__ */ T({
       b(s.modelValue);
     }), K(
       () => s.modelValue,
-      (v) => {
-        b(v);
+      (p) => {
+        b(p);
       },
       { deep: !0, immediate: !0 }
     );
-    const w = p(() => s.cssScrollBehavior);
-    return (v, $) => (o(), a("div", {
+    const w = v(() => s.cssScrollBehavior);
+    return (p, $) => (o(), a("div", {
       ref_key: "scrollDOMContainer",
       ref: y,
       class: H(k.value),
       onWheelPassive: g
     }, [
-      A(v.$slots, "default")
+      A(p.$slots, "default")
     ], 34));
   }
 });
@@ -2923,11 +2923,11 @@ const Cf = ["src", "srcset", "alt"], Sf = { class: "nmorph-avatar__fallback" },
       75318566: m.value,
       "6c0db3e8": g.fit
     }));
-    const s = e, l = t, r = x(!1), i = p(
+    const s = e, l = t, r = x(!1), i = v(
       () => D({
         "nmorph-avatar": [s.shape]
       })
-    ), h = p(
+    ), h = v(
       () => D({
         "nmorph-avatar__image": [`${r.value && "hide"}`]
       })
@@ -2935,7 +2935,7 @@ const Cf = ["src", "srcset", "alt"], Sf = { class: "nmorph-avatar__fallback" },
       l("error"), r.value = !0;
     }, u = () => {
       r.value = !1;
-    }, m = p(() => ` ${s.size}px`);
+    }, m = v(() => ` ${s.size}px`);
     return (g, k) => (o(), a("div", {
       class: H(i.value)
     }, [
@@ -2976,15 +2976,15 @@ const Df = {
     I((m) => ({
       "22efcb97": m.color
     }));
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-badge": [`${t.hidden && "hidden"}`]
       })
-    ), l = p(
+    ), l = v(
       () => D({
         "nmorph-badge__container": [`${t.hidden && "hidden"}`]
       })
-    ), r = p(() => typeof Number(t.value) == "number" && Number(t.value) > t.max ? `${t.max}+` : t.value), i = p(() => {
+    ), r = v(() => typeof Number(t.value) == "number" && Number(t.value) > t.max ? `${t.max}+` : t.value), i = v(() => {
       const m = `-${d?.value / 2 + t.offsetX}px`, g = `-${u?.value / 2 + t.offsetY}px`;
       return {
         x: m,
@@ -3020,7 +3020,7 @@ const qf = ["data-date", "onClick"], l2 = /* @__PURE__ */ T({
   },
   emits: ["update:modelValue", "update-initial-date"],
   setup(e, { emit: t }) {
-    const s = e, l = t, r = p(
+    const s = e, l = t, r = v(
       () => D({
         "nmorph-calendar": []
       })
@@ -3047,7 +3047,7 @@ const qf = ["data-date", "onClick"], l2 = /* @__PURE__ */ T({
       }
     );
     const g = (C) => C, k = () => {
-      i.value = v.value;
+      i.value = p.value;
     }, y = () => {
       i.value = /* @__PURE__ */ new Date();
     }, b = () => {
@@ -3059,7 +3059,7 @@ const qf = ["data-date", "onClick"], l2 = /* @__PURE__ */ T({
       S === "next" && b(), S === "previous" && k();
       const { date: F } = C;
       d.value = F, l("update:modelValue", d.value);
-    }, v = p(() => new Date(i.value.setMonth(i.value.getMonth() - 1))), $ = p(() => new Date(i.value.setMonth(i.value.getMonth() + 1))), f = p(() => {
+    }, p = v(() => new Date(i.value.setMonth(i.value.getMonth() - 1))), $ = v(() => new Date(i.value.setMonth(i.value.getMonth() + 1))), f = v(() => {
       const { range: C } = s, S = C ? c2(i.value, C[0]) : !0, B = C ? i2(i.value, C[1]) : !0, F = d2(s.range);
       return {
         showPreviousMonthButton: S,
@@ -3174,12 +3174,12 @@ const He = [
 }, ze = (e) => He[e], Pf = (e) => e % 4 === 0 && e % 100 !== 0 || e % 400 === 0, Ee = (e, t) => [0, 2, 4, 6, 7, 9, 11].includes(t) ? 31 : [3, 5, 8, 10].includes(t) ? 30 : Pf(e) ? 29 : 28, h2 = (e, t) => {
   const s = (G) => t ? G < t[0] || G > t[1] : !1, l = e.value.getFullYear(), r = e.value.getMonth(), h = new Date(l, r, 1).getDay() + 1, d = Ee(l, r), u = 7 + h - 8;
   let k = 7 - (new Date(l, r, d).getDay() + 1);
-  const y = /* @__PURE__ */ new Date(), b = y.getDate(), w = y.getMonth(), v = r - 1, $ = Ee(l, v);
+  const y = /* @__PURE__ */ new Date(), b = y.getDate(), w = y.getMonth(), p = r - 1, $ = Ee(l, p);
   let f = $ - u;
   const z = [];
   for (; f < $; ) {
     f++;
-    const G = w === v && b === f, Z = new Date(l, v, f);
+    const G = w === p && b === f, Z = new Date(l, p, f);
     z.push({
       value: f,
       monthType: "previous",
@@ -3232,7 +3232,7 @@ const He = [
   },
   emits: ["click-previous-month", "click-today", "click-next-month"],
   setup(e, { emit: t }) {
-    const s = e, l = t, r = p(
+    const s = e, l = t, r = v(
       () => D({
         "nmorph-calendar-header": []
       })
@@ -3272,7 +3272,7 @@ const Ff = { class: "nmorph-card__header" }, jf = { class: "nmorph-card__content
     shadowType: { default: Qe.outset }
   },
   setup(e) {
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-card": [t.shadowType]
       })
@@ -3303,7 +3303,7 @@ const Uf = ["id"], Yf = { class: "nmorph-carousel__elements-indicator" }, Gf = [
       s.value = s.value + 1;
     }, r = () => {
       s.value = s.value - 1;
-    }, i = e, h = t, d = p(
+    }, i = e, h = t, d = v(
       () => D({
         "nmorph-carousel": []
       })
@@ -3325,7 +3325,7 @@ const Uf = ["id"], Yf = { class: "nmorph-carousel__elements-indicator" }, Gf = [
     const w = (V, C) => {
       const S = V;
       k[C] = S;
-    }, v = p(() => `translateX(-${s.value * 100}%)`), $ = x(!0), f = (V) => V === s.value - 1, z = (V) => {
+    }, p = v(() => `translateX(-${s.value * 100}%)`), $ = x(!0), f = (V) => V === s.value - 1, z = (V) => {
       s.value = V + 1;
     };
     return (V, C) => (o(), a("div", {
@@ -3335,7 +3335,7 @@ const Uf = ["id"], Yf = { class: "nmorph-carousel__elements-indicator" }, Gf = [
         ref_key: "carouselWrapper",
         ref: g,
         class: H(["nmorph-carousel__wrapper", { "transition-enabled": $.value }]),
-        style: N({ transform: v.value })
+        style: N({ transform: p.value })
       }, [
         (o(!0), a(L, null, U(u.value, (S, B) => (o(), a("div", {
           id: `nmorph-carousel-item-${_(m)}-${S}`,
@@ -3378,7 +3378,7 @@ const Xf = /* @__PURE__ */ T({
     name: {}
   },
   setup(e) {
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-carousel-item": []
       })
@@ -3423,7 +3423,7 @@ const Xf = /* @__PURE__ */ T({
       i("update:modelValue", l.value);
     };
     J("collapse-data", l), J("update-model", r);
-    const i = t, h = p(
+    const i = t, h = v(
       () => D({
         "nmorph-collapse": []
       })
@@ -3445,11 +3445,11 @@ const Xf = /* @__PURE__ */ T({
   },
   emits: ["click-item"],
   setup(e, { emit: t }) {
-    const s = e, l = t, r = x(!1), i = p(
+    const s = e, l = t, r = x(!1), i = v(
       () => D({
         "nmorph-collapse-item": [`${s.disabled && "disabled"}`, `${r.value && "is-open"}`]
       })
-    ), h = p(
+    ), h = v(
       () => D({
         nmorph: [te[s.height]]
       })
@@ -3516,11 +3516,11 @@ const Zf = ["src", "alt", "srcset"], Nf = {
       s.value = !0;
     }, i = () => {
       s.value = !0, l.value = !0;
-    }, h = p(
+    }, h = v(
       () => D({
         "nmorph-image": []
       })
-    ), d = p(() => t.fit);
+    ), d = v(() => t.fit);
     return (u, m) => (o(), a("div", {
       class: H(h.value)
     }, [
@@ -3563,11 +3563,11 @@ const eg = { class: "nmorph-image-preview__content" }, tg = {
   },
   emits: ["on-close", "on-open"],
   setup(e, { emit: t }) {
-    const s = e, l = x(s.show), r = p(
+    const s = e, l = x(s.show), r = v(
       () => D({
         "nmorph-image-preview": [`${l.value && "opened"}`]
       })
-    ), i = x(s.initialIndex), h = p(() => typeof s.src == "string" ? s.src : s.src[i.value]), d = x(1), u = () => {
+    ), i = x(s.initialIndex), h = v(() => typeof s.src == "string" ? s.src : s.src[i.value]), d = x(1), u = () => {
       l.value = !0, B("on-open");
     }, m = () => {
       l.value = !1, B("on-close");
@@ -3579,7 +3579,7 @@ const eg = { class: "nmorph-image-preview__content" }, tg = {
       d.value < s.maxScaleLevel && (d.value += s.scaleStep), d.value = parseFloat(d.value.toFixed(3));
     }, b = () => {
       d.value > s.minScaleLevel && (d.value -= s.scaleStep), d.value = parseFloat(d.value.toFixed(3));
-    }, w = p(() => d.value < 1), v = () => {
+    }, w = v(() => d.value < 1), p = () => {
       d.value = 1;
     }, $ = () => {
       d.value = 1;
@@ -3589,14 +3589,14 @@ const eg = { class: "nmorph-image-preview__content" }, tg = {
     }, V = () => {
       const j = s.src.length - 1, X = i.value + 1;
       X > j ? i.value = 0 : i.value = X;
-    }, C = p(() => {
+    }, C = v(() => {
       let j = {
         icon: "shrink",
         handler: $
       };
       return w.value && (j = {
         icon: "enlarge",
-        handler: v
+        handler: p
       }), j;
     }), S = [
       {
@@ -3615,7 +3615,7 @@ const eg = { class: "nmorph-image-preview__content" }, tg = {
         icon: "zoom-out",
         handler: b
       }
-    ], B = t, F = p(() => Array.isArray(s.src) && s.src.length > 0);
+    ], B = t, F = v(() => Array.isArray(s.src) && s.src.length > 0);
     return (j, X) => (o(), a("div", {
       class: H(r.value)
     }, [
@@ -3706,7 +3706,7 @@ const ag = /* @__PURE__ */ T({
   },
   emits: ["prev-click", "next-click", "update:modelValue", "update:range"],
   setup(e, { emit: t }) {
-    const s = e, l = t, r = x(s.range), i = p(
+    const s = e, l = t, r = x(s.range), i = v(
       () => D({
         "nmorph-pagination": [`${s.disabled && "disabled"}`]
       })
@@ -3714,27 +3714,27 @@ const ag = /* @__PURE__ */ T({
       u.value = String(Number(u.value) - 1);
     }, d = () => {
       u.value = String(Number(u.value) + 1);
-    }, u = x(String(s.modelValue)), m = p(() => {
-      const v = s.total / s.pagerCount + 1, $ = v % 1 === 0 ? -1 : 0;
-      return Array.from({ length: v + $ }, (f, z) => ({ value: String(z + 1), label: String(z + 1) }));
-    }), g = p(() => s.hideOnSinglePage || s.total / s.pagerCount > 1);
-    K(u, (v) => {
-      l("update:modelValue", Number(v)), w();
+    }, u = x(String(s.modelValue)), m = v(() => {
+      const p = s.total / s.pagerCount + 1, $ = p % 1 === 0 ? -1 : 0;
+      return Array.from({ length: p + $ }, (f, z) => ({ value: String(z + 1), label: String(z + 1) }));
+    }), g = v(() => s.hideOnSinglePage || s.total / s.pagerCount > 1);
+    K(u, (p) => {
+      l("update:modelValue", Number(p)), w();
     }), K(
       () => s.pagerCount,
       () => {
         w();
       }
     );
-    const k = (v) => {
-      u.value = v;
-    }, y = p(() => Number(u.value) === 1), b = p(() => m.value.length === Number(u.value)), w = () => {
-      const v = Number(u.value) * s.pagerCount, $ = v - s.pagerCount;
-      r.value = [$, v], l("update:range", r.value);
+    const k = (p) => {
+      u.value = p;
+    }, y = v(() => Number(u.value) === 1), b = v(() => m.value.length === Number(u.value)), w = () => {
+      const p = Number(u.value) * s.pagerCount, $ = p - s.pagerCount;
+      r.value = [$, p], l("update:range", r.value);
     };
     return Y(() => {
       w();
-    }), (v, $) => g.value ? (o(), a("div", {
+    }), (p, $) => g.value ? (o(), a("div", {
       key: 0,
       class: H(i.value)
     }, [
@@ -3806,15 +3806,15 @@ const lg = {
       "3b0b01ec": g.value,
       "514b0928": y.strokeWidth
     }));
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-progress": []
       })
-    ), l = p(() => `${t.percentage}%`), r = p(() => Array.isArray(t.color) ? t.color.find((y) => y.percentage <= t.percentage)?.color : typeof t.color == "function" ? t.color(t.percentage) : t.color), i = p(() => t.indeterminate ? "var(--animation)" : "none"), h = x(null), d = x(1), u = p(() => `${d.value} ${d.value}`), m = p(() => d.value - t.percentage / 100 * d.value);
+    ), l = v(() => `${t.percentage}%`), r = v(() => Array.isArray(t.color) ? t.color.find((y) => y.percentage <= t.percentage)?.color : typeof t.color == "function" ? t.color(t.percentage) : t.color), i = v(() => t.indeterminate ? "var(--animation)" : "none"), h = x(null), d = x(1), u = v(() => `${d.value} ${d.value}`), m = v(() => d.value - t.percentage / 100 * d.value);
     Y(() => {
       h.value && (d.value = 2 * Math.PI * h.value.r.baseVal.value);
     });
-    const g = p(() => `${t.circleSize}px`), k = p(() => `${t.percentage}%`);
+    const g = v(() => `${t.circleSize}px`), k = v(() => `${t.percentage}%`);
     return (y, b) => (o(), a("div", {
       class: H(s.value)
     }, [
@@ -3876,7 +3876,7 @@ const mg = {
     rows: { default: 0 }
   },
   setup(e) {
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-skeleton": [`${t.animated && t.loading && "loading"}`]
       })
@@ -3900,7 +3900,7 @@ const $g = { class: "nmorph-skeleton-item__element" }, v2 = /* @__PURE__ */ T({
     variant: { default: "text" }
   },
   setup(e) {
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-skeleton-item": [t.variant]
       })
@@ -3925,7 +3925,7 @@ const ue = "10px", xg = /* @__PURE__ */ T({
   },
   emits: ["sort"],
   setup(e, { emit: t }) {
-    const s = e, l = t, r = p(
+    const s = e, l = t, r = v(
       () => D({
         "nmorph-sort-button": [`${s.value}`]
       })
@@ -3970,13 +3970,13 @@ const yg = { class: "nmorph-table__wrapper" }, Mg = { class: "nmorph-table__head
     style: { default: "nmorph" }
   },
   setup(e) {
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-table": [`${t.style}`]
       })
     ), l = x(t.data), r = x(t.sort), i = (b, w) => {
-      r.value && (r.value[w] = b, l.value.sort((v, $) => {
-        const f = String(v[w]).toLowerCase(), z = String($[w]).toLowerCase();
+      r.value && (r.value[w] = b, l.value.sort((p, $) => {
+        const f = String(p[w]).toLowerCase(), z = String($[w]).toLowerCase();
         if (!r.value)
           return 0;
         const V = r.value[w];
@@ -3984,9 +3984,9 @@ const yg = { class: "nmorph-table__wrapper" }, Mg = { class: "nmorph-table__head
       }));
     }, h = x(null), d = x([]);
     J("table-data", { rows: l, columns: d });
-    const u = p(() => {
-      const b = d.value.map((z) => z.width).filter((z) => !!z), w = b.length, v = b.reduce((z, V) => (z += Number(V), z), 0), $ = d.value.length - w;
-      return h.value?.clientWidth ? (h.value?.clientWidth - v) / $ : 0;
+    const u = v(() => {
+      const b = d.value.map((z) => z.width).filter((z) => !!z), w = b.length, p = b.reduce((z, V) => (z += Number(V), z), 0), $ = d.value.length - w;
+      return h.value?.clientWidth ? (h.value?.clientWidth - p) / $ : 0;
     }), m = (b) => b !== "" ? b : u.value, g = x(0);
     K(
       () => t.data,
@@ -4007,29 +4007,29 @@ const yg = { class: "nmorph-table__wrapper" }, Mg = { class: "nmorph-table__head
       n("div", yg, [
         n("table", Mg, [
           n("colgroup", null, [
-            (o(!0), a(L, null, U(d.value, (v) => (o(), a("col", {
-              key: v.prop,
-              style: N({ width: `${m(v.width)}px` }),
-              "data-src": `${m(v.width)}px`
+            (o(!0), a(L, null, U(d.value, (p) => (o(), a("col", {
+              key: p.prop,
+              style: N({ width: `${m(p.width)}px` }),
+              "data-src": `${m(p.width)}px`
             }, null, 12, bg))), 128))
           ]),
           n("thead", null, [
             n("tr", kg, [
-              (o(!0), a(L, null, U(d.value, (v, $) => (o(), a("th", {
+              (o(!0), a(L, null, U(d.value, (p, $) => (o(), a("th", {
                 key: $,
                 class: H(["nmorph-table__table-data", { "nmorph-table__table-data--bordered": t.bordered }])
               }, [
                 n("div", Vg, [
                   n("div", {
-                    style: N({ "justify-content": v.alignment }),
+                    style: N({ "justify-content": p.alignment }),
                     class: "nmorph-table__cell-content"
                   }, [
-                    n("span", null, R(v.label), 1),
-                    r.value && r.value[v.prop] ? (o(), P(xg, {
+                    n("span", null, R(p.label), 1),
+                    r.value && r.value[p.prop] ? (o(), P(xg, {
                       key: 0,
                       class: "nmorph-table__button-wrapper",
-                      value: r.value[v.prop],
-                      onSort: (f) => i(f, v.prop)
+                      value: r.value[p.prop],
+                      onSort: (f) => i(f, p.prop)
                     }, null, 8, ["value", "onSort"])) : O("", !0)
                   ], 4)
                 ])
@@ -4040,13 +4040,13 @@ const yg = { class: "nmorph-table__wrapper" }, Mg = { class: "nmorph-table__head
         n("div", Hg, [
           n("table", null, [
             n("colgroup", null, [
-              (o(!0), a(L, null, U(d.value, (v) => (o(), a("col", {
-                key: v.prop,
-                style: N({ width: `${m(v.width)}px` })
+              (o(!0), a(L, null, U(d.value, (p) => (o(), a("col", {
+                key: p.prop,
+                style: N({ width: `${m(p.width)}px` })
               }, null, 4))), 128))
             ]),
             n("tbody", null, [
-              (o(!0), a(L, null, U(l.value, (v, $) => (o(), a("tr", {
+              (o(!0), a(L, null, U(l.value, (p, $) => (o(), a("tr", {
                 key: $,
                 class: H(["nmorph-table__table-data-row", { "nmorph-table__table-data-row--row-hover": t.rowHover }])
               }, [
@@ -4058,16 +4058,16 @@ const yg = { class: "nmorph-table__wrapper" }, Mg = { class: "nmorph-table__head
                     id: `table-cell-${_(y)}-${$}-${f.prop}`,
                     style: N({ "text-align": f.alignment }),
                     class: "nmorph-table__cell nmorph-table__cell--data"
-                  }, R(k(v[f.prop])), 13, zg)
+                  }, R(k(p[f.prop])), 13, zg)
                 ], 2))), 128))
               ], 2))), 128))
             ])
           ]),
           n("table", null, [
             n("colgroup", null, [
-              (o(!0), a(L, null, U(d.value, (v) => (o(), a("col", {
-                key: v.prop,
-                style: N({ width: `${m(v.width)}px` })
+              (o(!0), a(L, null, U(d.value, (p) => (o(), a("col", {
+                key: p.prop,
+                style: N({ width: `${m(p.width)}px` })
               }, null, 4))), 128))
             ]),
             n("tbody", Bg, [
@@ -4085,11 +4085,11 @@ const m2 = /* @__PURE__ */ T({
     row: {}
   },
   setup(e) {
-    const t = Q("column-property", void 0), s = Q("table-identifier", void 0), l = e, r = p(
+    const t = Q("column-property", void 0), s = Q("table-identifier", void 0), l = e, r = v(
       () => D({
         "nmorph-table-cell": []
       })
-    ), i = p(() => `#table-cell-${s}-${l.row}-${t}`), h = x(!1);
+    ), i = v(() => `#table-cell-${s}-${l.row}-${t}`), h = x(!1);
     return Y(async () => {
       await Ve();
       const d = document.querySelector(i.value);
@@ -4112,7 +4112,7 @@ const m2 = /* @__PURE__ */ T({
     prop: {}
   },
   setup(e) {
-    const t = Q("table-data", void 0), s = Q("table-identifier", void 0), l = e, r = p(
+    const t = Q("table-data", void 0), s = Q("table-identifier", void 0), l = e, r = v(
       () => D({
         "nmorph-table-column": []
       })
@@ -4148,7 +4148,7 @@ const m2 = /* @__PURE__ */ T({
   },
   emits: ["close"],
   setup(e, { emit: t }) {
-    const s = e, l = p(
+    const s = e, l = v(
       () => D({
         nmorph: [te[s.height]],
         "nmorph-tag": [`${s.transparent && "transparent"}`]
@@ -4193,7 +4193,7 @@ const Ag = ["innerHTML"], Dg = {
   },
   emits: ["close"],
   setup(e, { emit: t }) {
-    const s = e, l = t, r = p(
+    const s = e, l = t, r = v(
       () => D({
         "nmorph-alert": [s.type, `${s.bordered && "bordered"}`, `${s.fill && "fill"}`]
       })
@@ -4256,7 +4256,7 @@ const Be = (e, t) => {
   for (const [l, r] of t)
     s[l] = r;
   return s;
-}, w2 = /* @__PURE__ */ Be(Eg, [["__scopeId", "data-v-ee0dea0a"]]);
+}, w2 = /* @__PURE__ */ Be(Eg, [["__scopeId", "data-v-96bed951"]]);
 var ae = /* @__PURE__ */ ((e) => (e.success = "success", e.error = "error", e.warning = "warning", e.info = "info", e))(ae || {});
 const Fg = { class: "nmorph-dialog__header" }, jg = { class: "nmorph-dialog__title" }, Wg = { class: "nmorph-dialog__content" }, Lg = /* @__PURE__ */ T({
   __name: "NmorphDialog",
@@ -4266,7 +4266,7 @@ const Fg = { class: "nmorph-dialog__header" }, jg = { class: "nmorph-dialog__tit
   },
   emits: ["on-close", "update:modelValue"],
   setup(e, { emit: t }) {
-    const s = e, l = t, r = p(
+    const s = e, l = t, r = v(
       () => D({
         "nmorph-dialog": []
       })
@@ -4308,7 +4308,7 @@ const Fg = { class: "nmorph-dialog__header" }, jg = { class: "nmorph-dialog__tit
 });
 var Ug = /* @__PURE__ */ ((e) => (e["contains-one"] = "contains-one", e["not-contains"] = "not-contains", e["full-eq"] = "full-eq", e))(Ug || {}), Yg = /* @__PURE__ */ ((e) => (e.eq = "eq", e.gte = "gte", e.lte = "lte", e.gt = "gt", e.lt = "lt", e))(Yg || {}), Gg = /* @__PURE__ */ ((e) => (e.eq = "eq", e["not-eq"] = "not-eq", e))(Gg || {});
 const Fe = (e) => {
-  const { inputValue: t, rules: s } = e, l = x([]), r = p(() => l.value.length === 0), i = x(!1);
+  const { inputValue: t, rules: s } = e, l = x([]), r = v(() => l.value.length === 0), i = x(!1);
   return {
     touched: i,
     valid: r,
@@ -4321,7 +4321,7 @@ const Fe = (e) => {
         return console.warn("The input value and the provided rules do not match"), null;
       if (i.value || (i.value = !0), m) {
         const w = s;
-        l.value = w.reduce((v, $) => (d.match($.pattern) || v.push($.error), v), []);
+        l.value = w.reduce((p, $) => (d.match($.pattern) || p.push($.error), p), []);
       }
       if (g) {
         const w = ($, f, z) => {
@@ -4337,19 +4337,19 @@ const Fe = (e) => {
             case "gte":
               return $ >= f;
           }
-        }, v = s;
-        l.value = v.reduce(($, f) => (w(d, f.compareValue, f.numberCompareType) && $.push(f.error), $), []);
+        }, p = s;
+        l.value = p.reduce(($, f) => (w(d, f.compareValue, f.numberCompareType) && $.push(f.error), $), []);
       }
       if (k) {
         const w = s;
-        l.value = w.reduce((v, $) => {
+        l.value = w.reduce((p, $) => {
           let f = !1;
           const { compareValue: z, booleanCompareType: V } = $;
-          return V === "not-eq" && (f = d === z), V === "eq" && (f = d !== z), f || v.push($.error), v;
+          return V === "not-eq" && (f = d === z), V === "eq" && (f = d !== z), f || p.push($.error), p;
         }, []);
       }
       if (y) {
-        const w = s, v = ($, f, z) => {
+        const w = s, p = ($, f, z) => {
           switch (z) {
             case "contains-one":
               return $.some((S) => f.includes(S));
@@ -4362,7 +4362,7 @@ const Fe = (e) => {
               return !$.some((S) => f.includes(S));
           }
         };
-        l.value = w.reduce(($, f) => (v(d, f.compareValue, f.arrayCompareType) || $.push(f.error), $), []);
+        l.value = w.reduce(($, f) => (p(d, f.compareValue, f.arrayCompareType) || $.push(f.error), $), []);
       }
     }
   };
@@ -4399,13 +4399,13 @@ const Fe = (e) => {
         console.warn("Relative element is not an HTMLElement");
         return;
       }
-      const b = y.getBoundingClientRect(), { x: w, y: v } = b, $ = b.width, f = b.height, z = window.innerWidth, V = window.innerHeight;
-      h.value === "top" && v - k < 0 && (h.value = "bottom"), h.value === "bottom" && v + f + k > V && (h.value = "top"), h.value === "left" && w - g < 0 && (h.value = "right"), h.value === "right" && w + $ + g > z && (h.value = "left"), h.value === "top" && (d.value = { x: `${w + i}px`, y: `${v + r}px` }), h.value === "bottom" && (d.value = { x: `${w + i}px`, y: `${v + f + r}px` }), h.value === "right" && (d.value = { x: `${w + i}px`, y: `${v + r}px` }), h.value === "left" && (d.value = { x: `${w + $ + i}px`, y: `${v + r}px` });
+      const b = y.getBoundingClientRect(), { x: w, y: p } = b, $ = b.width, f = b.height, z = window.innerWidth, V = window.innerHeight;
+      h.value === "top" && p - k < 0 && (h.value = "bottom"), h.value === "bottom" && p + f + k > V && (h.value = "top"), h.value === "left" && w - g < 0 && (h.value = "right"), h.value === "right" && w + $ + g > z && (h.value = "left"), h.value === "top" && (d.value = { x: `${w + i}px`, y: `${p + r}px` }), h.value === "bottom" && (d.value = { x: `${w + i}px`, y: `${p + f + r}px` }), h.value === "right" && (d.value = { x: `${w + i}px`, y: `${p + r}px` }), h.value === "left" && (d.value = { x: `${w + $ + i}px`, y: `${p + r}px` });
     });
   };
   return { placement: h, placementCoords: d };
 }, Tx = () => {
-}, Xg = "@nmorph/nmorph-ui-kit", Jg = "module", Qg = "0.2.12", Zg = "MIT", Ng = {
+}, Xg = "@nmorph/nmorph-ui-kit", Jg = "module", Qg = "0.2.14", Zg = "MIT", Ng = {
   node: "18.13.0",
   npm: "8.19.3"
 }, Ig = "./dist/index.d.ts", ew = "./dist/index.umd.js", tw = "./dist/index.es.js", nw = "./dist/style.css", ow = [
@@ -4517,10 +4517,10 @@ const Fe = (e) => {
   { name: "--nmorph-error-text-color", color: "#8d3333" },
   { name: "--nmorph-warn-color", color: "#E6A21C" },
   { name: "--nmorph-warn-text-color", color: "#7a6712" },
-  { name: "--nmorph-gray-color", color: "#c9d2de" },
+  { name: "--nmorph-gray-color", color: "#c9d2dee6" },
   { name: "--nmorph-white-color", color: "#ffffff" },
   { name: "--nmorph-black-color", color: "#000000" },
-  { name: "--nmorph-overlay-color", color: "#00000080" }
+  { name: "--nmorph-overlay-color", color: "#00000095" }
 ], dw = {
   darkShade: "#c8c9ca",
   main: "#eaf2f9",
@@ -4569,19 +4569,19 @@ const Fe = (e) => {
   G2("warn", `NMORPH(v${iw.version})`);
   const s = { ..._w, ...e }, l = (w) => {
     try {
-      const v = pw(w), $ = je(v, s.darkShadeGeneratorCoefficient), f = je(v, s.lightShadeGeneratorCoefficient);
+      const p = pw(w), $ = je(p, s.darkShadeGeneratorCoefficient), f = je(p, s.lightShadeGeneratorCoefficient);
       return [
         { name: "--nmorph-dark-shade-color", color: $ },
         { name: "--nmorph-light-shade-color", color: f }
       ];
-    } catch (v) {
-      console.error(v.message);
+    } catch (p) {
+      console.error(p.message);
     }
-  }, r = (w) => Object.entries(w).map(([v, $]) => ({
-    name: `--nmorph-${qe(v)}-color`,
+  }, r = (w) => Object.entries(w).map(([p, $]) => ({
+    name: `--nmorph-${qe(p)}-color`,
     color: $
-  })), i = (w, v) => {
-    const $ = (V) => V.map((C) => `${C.name}: ${C.color};`).join(" "), f = Object.entries(v).map(([V, C]) => `--${qe(V)}: ${C};`).join(" "), z = [];
+  })), i = (w, p) => {
+    const $ = (V) => V.map((C) => `${C.name}: ${C.color};`).join(" "), f = Object.entries(p).map(([V, C]) => `--${qe(V)}: ${C};`).join(" "), z = [];
     return Object.entries(w).forEach(([V, C]) => {
       if (V === "common")
         z.push($(mw(x2, C)));
@@ -4600,10 +4600,10 @@ const Fe = (e) => {
       }
     `;
   }, h = {};
-  Object.entries(s.themes).forEach(([w, v]) => {
+  Object.entries(s.themes).forEach(([w, p]) => {
     h[w] = [];
-    const $ = !!v.darkShade, f = !!v.lightShade;
-    !!v.main && !$ && !f && (h[w] = l(v.main)), h[w] = [...h[w], ...r(v)];
+    const $ = !!p.darkShade, f = !!p.lightShade;
+    !!p.main && !$ && !f && (h[w] = l(p.main)), h[w] = [...h[w], ...r(p)];
   });
   const d = document.createElement("style");
   d.type = "text/css", d.innerHTML = i(h, s.other), document.head.appendChild(d);
@@ -4679,7 +4679,7 @@ const Fe = (e) => {
       initialPlacement: "top",
       contentDOMElement: l,
       relativeElement: r
-    }), h = p(
+    }), h = v(
       () => D({
         "nmorph-tooltip": [i.value]
       })
@@ -4687,7 +4687,7 @@ const Fe = (e) => {
       s.value = !0;
     }, u = () => {
       t.forceShow || (s.value = !1);
-    }, m = p(() => t.forceCoordinate ? "100%" : "auto");
+    }, m = v(() => t.forceCoordinate ? "100%" : "auto");
     return (g, k) => (o(), a("div", {
       class: H(h.value)
     }, [
@@ -4783,7 +4783,7 @@ const kw = {
     Y(() => {
       m("inputDOMRef", i);
     });
-    const i = x(null), h = s !== void 0, d = h ? x(s.value) : x(r.modelValue), u = p(() => h ? s.value.includes(r.id) : r.modelValue), m = t, g = () => {
+    const i = x(null), h = s !== void 0, d = h ? x(s.value) : x(r.modelValue), u = v(() => h ? s.value.includes(r.id) : r.modelValue), m = t, g = () => {
       if (!r.disabled) {
         if (!h) {
           d.value = !d.value, m("update:modelValue", d.value);
@@ -4791,7 +4791,7 @@ const kw = {
         }
         l && Array.isArray(d.value) && l(r.id, d.value);
       }
-    }, k = p(
+    }, k = v(
       () => D({
         "nmorph-checkbox": [`${u.value && "checked"}`, `${r.disabled && "disabled"}`, r.styleType]
       })
@@ -4853,7 +4853,7 @@ const qw = { class: "nmorph-checkbox-group__wrapper" }, Pw = { class: "nmorph-ch
   setup(e, { emit: t }) {
     const s = e, l = x(s.modelValue), r = t, i = (d) => {
       l.value.includes(d) ? l.value = l.value.filter((u) => u !== d) : l.value.push(d), r("update:modelValue", l.value);
-    }, h = p(
+    }, h = v(
       () => D({
         "nmorph-checkbox-group": [s.styleType, s.direction]
       })
@@ -4897,7 +4897,7 @@ const Ew = { class: "nmorph-autocomplete__input-content" }, Fw = {
   },
   emits: ["update:modelValue", "select"],
   setup(e, { emit: t }) {
-    const s = e, l = x(s.modelValue), r = t, i = p(
+    const s = e, l = x(s.modelValue), r = t, i = v(
       () => D({
         "nmorph-autocomplete": []
       })
@@ -4905,7 +4905,7 @@ const Ew = { class: "nmorph-autocomplete__input-content" }, Fw = {
       l.value = w, r("update:modelValue", l.value);
     }, d = x(!1), u = x(null), m = () => {
       d.value = !1;
-    }, g = p(() => s.list.filter((w) => Object.keys(w).some((v) => String(w[v]).toLowerCase().includes(l.value.toLowerCase()))));
+    }, g = v(() => s.list.filter((w) => Object.keys(w).some((p) => String(w[p]).toLowerCase().includes(l.value.toLowerCase()))));
     K(g, (w) => {
       d.value = w.length > 0;
     });
@@ -4920,7 +4920,7 @@ const Ew = { class: "nmorph-autocomplete__input-content" }, Fw = {
       w !== "" && s.actionCallback && (b.value = !0, await s.actionCallback(), b.value = !1);
     }), K(b, (w) => {
       w && (d.value = !0);
-    }), (w, v) => (o(), a("div", {
+    }), (w, p) => (o(), a("div", {
       class: H(i.value)
     }, [
       n("div", Ew, [
@@ -4976,7 +4976,7 @@ const Le = /* @__PURE__ */ T({
   __name: "NmorphClearButton",
   emits: ["clear"],
   setup(e, { emit: t }) {
-    const s = t, l = p(
+    const s = t, l = v(
       () => D({
         "nmorph-input-clear-button": []
       })
@@ -5014,7 +5014,7 @@ const Le = /* @__PURE__ */ T({
   setup(e, { emit: t }) {
     const s = e, l = x(s.initialStartDate), r = x(
       s.initialEndDate ?? new Date(new Date(s.initialStartDate).setMonth(s.initialStartDate.getMonth() + 1))
-    ), i = x(s.modelValue), h = t, d = p(
+    ), i = x(s.modelValue), h = t, d = v(
       () => D({
         nmorph: [te[s.height]],
         "nmorph-date-picker": [`${s.disabled && "disabled"}`, s.type]
@@ -5023,7 +5023,7 @@ const Le = /* @__PURE__ */ T({
       u.value = !1;
     }, k = () => {
       u.value = !u.value;
-    }, y = p(() => i.value ? Array.isArray(i.value) ? i.value.length === 0 ? s.placeholder : ce(i.value).join(", ") : ce(i.value) : s.placeholder), b = p(() => {
+    }, y = v(() => i.value ? Array.isArray(i.value) ? i.value.length === 0 ? s.placeholder : ce(i.value).join(", ") : ce(i.value) : s.placeholder), b = v(() => {
       if (Array.isArray(i.value)) {
         const V = ce(i.value[0]) ?? s.startDatePlaceholder, C = ce(i.value[1]) ?? s.endDatePlaceholder;
         return {
@@ -5037,7 +5037,7 @@ const Le = /* @__PURE__ */ T({
       i.value = V, h("update:modelValue", i.value);
     };
     s.type === "date" && Array.isArray(i.value) && console.warn('If you decide to use type "date" the passed property must be an Date object'), (s.type === "dates" || s.type === "daterange") && !Array.isArray(i.value) && console.warn('If you decide to use type "dates" or "daterange" the passed property must be an array');
-    const v = (V) => {
+    const p = (V) => {
       const C = V;
       if (Array.isArray(i.value)) {
         if (s.type === "dates") {
@@ -5047,7 +5047,7 @@ const Le = /* @__PURE__ */ T({
       } else
         i.value = C;
       h("update:modelValue", i.value);
-    }, $ = p(() => Array.isArray(i.value) ? i.value.length > 0 : !!i.value), f = (V) => {
+    }, $ = v(() => Array.isArray(i.value) ? i.value.length > 0 : !!i.value), f = (V) => {
       Array.isArray(i.value) && (i.value[0] = V, h("update:modelValue", i.value));
     }, z = (V) => {
       Array.isArray(i.value) && (i.value[1] = V, h("update:modelValue", i.value));
@@ -5089,7 +5089,7 @@ const Le = /* @__PURE__ */ T({
                 "selected-values": i.value,
                 "initial-date": l.value,
                 type: V.type,
-                onUpdateSelectedValue: v
+                onUpdateSelectedValue: p
               }, null, 8, ["selected-values", "initial-date", "type"])
             ]),
             _: 1
@@ -5177,7 +5177,7 @@ const s$ = { class: "nmorph-year-month-picker__header" }, a$ = { class: "nmorph-
         deep: !0
       }
     );
-    const u = t, m = p(
+    const u = t, m = v(
       () => D({
         "nmorph-year-month-picker": []
       })
@@ -5195,7 +5195,7 @@ const s$ = { class: "nmorph-year-month-picker__header" }, a$ = { class: "nmorph-
       $ === "decrease" ? h.value = h.value - 1 : h.value = h.value + 1, u("update-year", String(h.value));
     }, b = ($) => {
       $ === "decrease" ? l.type === "year" ? k("decrease") : y("decrease") : l.type === "year" ? k("increase") : y("increase");
-    }, w = p(() => l.type === "year" ? `${r.value[0].label} - ${r.value[r.value.length - 1].label}` : String(h.value)), v = () => {
+    }, w = v(() => l.type === "year" ? `${r.value[0].label} - ${r.value[r.value.length - 1].label}` : String(h.value)), p = () => {
       l.type === "month" && u("back-to-years");
     };
     return ($, f) => (o(), a("div", {
@@ -5219,7 +5219,7 @@ const s$ = { class: "nmorph-year-month-picker__header" }, a$ = { class: "nmorph-
           M(_(W), {
             text: w.value,
             "style-type": "transparent",
-            onClick: v
+            onClick: p
           }, null, 8, ["text"])
         ]),
         M(_(W), {
@@ -5256,11 +5256,11 @@ const ve = /* @__PURE__ */ T({
   },
   emits: ["update-selected-value"],
   setup(e, { emit: t }) {
-    const s = e, l = t, r = p(
+    const s = e, l = t, r = v(
       () => D({
         "nmorph-date-picker-content": []
       })
-    ), i = x(s.initialDate), h = x("calendar"), d = p(() => new Date(i.value.setMonth(i.value.getMonth() - 1))), u = p(() => new Date(i.value.setMonth(i.value.getMonth() + 1))), m = p(() => new Date(i.value.setFullYear(i.value.getFullYear() - 1))), g = p(() => new Date(i.value.setFullYear(i.value.getFullYear() + 1))), k = () => {
+    ), i = x(s.initialDate), h = x("calendar"), d = v(() => new Date(i.value.setMonth(i.value.getMonth() - 1))), u = v(() => new Date(i.value.setMonth(i.value.getMonth() + 1))), m = v(() => new Date(i.value.setFullYear(i.value.getFullYear() - 1))), g = v(() => new Date(i.value.setFullYear(i.value.getFullYear() + 1))), k = () => {
       i.value = d.value;
     }, y = () => {
       i.value = u.value;
@@ -5268,7 +5268,7 @@ const ve = /* @__PURE__ */ T({
       i.value = m.value;
     }, w = () => {
       i.value = g.value;
-    }, v = () => {
+    }, p = () => {
       h.value = "year";
     }, $ = () => {
       h.value = "month";
@@ -5300,7 +5300,7 @@ const ve = /* @__PURE__ */ T({
             onNextMonth: y,
             onPrevYear: b,
             onNextYear: w,
-            onChangeYear: v,
+            onChangeYear: p,
             onChangeMonth: $
           }, null, 8, ["date"])
         ]),
@@ -5329,7 +5329,7 @@ const ve = /* @__PURE__ */ T({
   },
   emits: ["prev-month", "next-month", "prev-year", "next-year", "change-year", "change-month"],
   setup(e, { emit: t }) {
-    const s = e, l = t, r = p(
+    const s = e, l = t, r = v(
       () => D({
         "nmorph-date-picker-header": []
       })
@@ -5424,8 +5424,8 @@ const d$ = { class: "nmorph-file-upload__trigger" }, h$ = ["multiple"], u$ = { c
   setup(e, { emit: t }) {
     const s = e, l = (b) => b.split("/")[1], r = (b) => {
       const w = l(b);
-      let v = "doc";
-      return w in me && (v = "image"), w in ge && (v = "audio"), w in fe && (v = "video"), w in we && (v = "archive"), v;
+      let p = "doc";
+      return w in me && (p = "image"), w in ge && (p = "audio"), w in fe && (p = "video"), w in we && (p = "archive"), p;
     };
     let i = le(s.modelValue);
     const h = x(null), d = () => {
@@ -5433,11 +5433,11 @@ const d$ = { class: "nmorph-file-upload__trigger" }, h$ = ["multiple"], u$ = { c
     }, u = (b) => {
       const w = b.target;
       if (w.files) {
-        if (Array.from(w.files).forEach((v) => {
-          const $ = l(v.type);
+        if (Array.from(w.files).forEach((p) => {
+          const $ = l(p.type);
           if (!s.allowedTypes.includes($))
-            return k("on-unsupported-file-type-error", v.type);
-          const f = URL.createObjectURL(v), z = { data: v, previewUrl: f };
+            return k("on-unsupported-file-type-error", p.type);
+          const f = URL.createObjectURL(p), z = { data: p, previewUrl: f };
           i.push(z);
         }), i.length === 0)
           return;
@@ -5449,13 +5449,13 @@ const d$ = { class: "nmorph-file-upload__trigger" }, h$ = ["multiple"], u$ = { c
         i.map((b) => b.data)
       );
     }, g = (b) => {
-      const w = i.findIndex((v) => v.data.name === b);
+      const w = i.findIndex((p) => p.data.name === b);
       w !== -1 && (URL.revokeObjectURL(i[w].previewUrl), i.splice(w, 1), m());
     };
     Y(() => {
       k("inputDOMRef", h);
     });
-    const k = t, y = p(
+    const k = t, y = v(
       () => D({
         nmorph: [`${s.fill && "fill"}`],
         "nmorph-file-upload": [`${s.disabled && "disabled"}`]
@@ -5487,24 +5487,24 @@ const d$ = { class: "nmorph-file-upload__trigger" }, h$ = ["multiple"], u$ = { c
           tag: "div"
         }, {
           default: E(() => [
-            (o(!0), a(L, null, U(_(i), ({ data: v, previewUrl: $ }) => (o(), a("div", {
-              key: v.name,
+            (o(!0), a(L, null, U(_(i), ({ data: p, previewUrl: $ }) => (o(), a("div", {
+              key: p.name,
               class: "nmorph-file-upload__file"
             }, [
               M(_(_2), { src: $ }, null, 8, ["src"]),
               n("div", _$, [
                 M(_(q), {
-                  name: r(v.type),
+                  name: r(p.type),
                   width: "14px",
                   height: "17px"
                 }, null, 8, ["name"]),
-                n("span", v$, R(v.name), 1)
+                n("span", v$, R(p.name), 1)
               ]),
               n("div", p$, [
                 M(_(W), {
                   height: "thin",
                   "style-type": "transparent",
-                  onClick: (f) => g(v.name)
+                  onClick: (f) => g(p.name)
                 }, {
                   default: E(() => [
                     M(_(q), { name: "error" })
@@ -5535,7 +5535,7 @@ const f$ = {
   },
   emits: ["formValidator"],
   setup(e, { emit: t }) {
-    const s = e, l = p(
+    const s = e, l = v(
       () => D({
         "nmorph-form": []
       })
@@ -5558,7 +5558,7 @@ const f$ = {
     staticHeight: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, s = p(() => (Array.isArray(t.errors) ? t.errors : t.errors.value).reverse()), l = p(
+    const t = e, s = v(() => (Array.isArray(t.errors) ? t.errors : t.errors.value).reverse()), l = v(
       () => D({
         nmorph: [te[t.height]],
         "nmorph-error-box": [`${t.staticHeight && "static-height"}`, `${s.value.length === 0 && "empty"}`]
@@ -5592,11 +5592,11 @@ const xe = "18px", x$ = /* @__PURE__ */ T({
     I((r) => ({
       bd9433c4: xe
     }));
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-validation-icon": [t.valid ? "valid" : "invalid"]
       })
-    ), l = p(() => t.valid ? "success" : "error");
+    ), l = v(() => t.valid ? "success" : "error");
     return (r, i) => (o(), a("div", {
       class: H(s.value)
     }, [
@@ -5621,9 +5621,9 @@ const y$ = { key: 0 }, M$ = { class: "nmorph-form-item__content" }, b$ = /* @__P
     validate: { type: Boolean, default: !0 }
   },
   setup(e) {
-    const t = e, s = Q("form-data", void 0), l = p(() => s?.fields[t.id]), r = p(() => t.validate && l.value), i = p(
+    const t = e, s = Q("form-data", void 0), l = v(() => s?.fields[t.id]), r = v(() => t.validate && l.value), i = v(
       () => !!r.value && !!l?.value?.touched && t.showValidationIcon
-    ), h = p(() => r.value && l.value?.touched), d = p(
+    ), h = v(() => r.value && l.value?.touched), d = v(
       () => D({
         "nmorph-form-item": [
           `${t.label && "labeled"}`,
@@ -5673,10 +5673,10 @@ const k$ = { class: "nmorph-number-input__content" }, V$ = { class: "nmorph-numb
   },
   emits: ["inputDOMRef", "update:modelValue"],
   setup(e, { emit: t }) {
-    I((v) => ({
+    I((p) => ({
       f154b2b0: m.value
     }));
-    const s = e, l = p(
+    const s = e, l = v(
       () => D({
         nmorph: [te[s.height], `${s.fill && "fill"}`],
         "nmorph-number-input": [
@@ -5688,7 +5688,7 @@ const k$ = { class: "nmorph-number-input__content" }, V$ = { class: "nmorph-numb
       r.value += s.step;
     }, h = () => {
       r.value -= s.step;
-    }, d = p(() => r.value <= s.min), u = p(() => r.value >= s.max), m = p(() => s.height === "thick" ? "16px" : "12px"), g = {
+    }, d = v(() => r.value <= s.min), u = v(() => r.value >= s.max), m = v(() => s.height === "thick" ? "16px" : "12px"), g = {
       thick: {
         default: "12px",
         right: "8px"
@@ -5701,26 +5701,26 @@ const k$ = { class: "nmorph-number-input__content" }, V$ = { class: "nmorph-numb
         default: "8px",
         right: "5px"
       }
-    }, k = p(() => {
-      const v = s.actionBtnPositionRight ? "right" : "default";
-      return g[s.height][v];
-    }), y = t, b = (v) => {
-      const $ = v.target;
+    }, k = v(() => {
+      const p = s.actionBtnPositionRight ? "right" : "default";
+      return g[s.height][p];
+    }), y = t, b = (p) => {
+      const $ = p.target;
       let f = Number($.value);
       r.value = f;
     };
-    K(r, (v) => {
-      v > s.max && (r.value = s.max, w.value?.blur()), r.value < s.min && (r.value = s.min, w.value?.blur()), y("update:modelValue", v);
+    K(r, (p) => {
+      p > s.max && (r.value = s.max, w.value?.blur()), r.value < s.min && (r.value = s.min, w.value?.blur()), y("update:modelValue", p);
     }), Y(() => {
       y("inputDOMRef", w);
     });
     const w = x(null);
-    return (v, $) => (o(), a("div", {
+    return (p, $) => (o(), a("div", {
       class: H(l.value)
     }, [
       n("div", k$, [
         n("div", V$, [
-          v.actionBtnPositionRight ? O("", !0) : (o(), a("div", H$, [
+          p.actionBtnPositionRight ? O("", !0) : (o(), a("div", H$, [
             M(_(W), {
               "style-type": "transparent",
               disabled: d.value,
@@ -5747,7 +5747,7 @@ const k$ = { class: "nmorph-number-input__content" }, V$ = { class: "nmorph-numb
             max: s.max,
             onInput: b
           }, null, 40, z$),
-          v.actionBtnPositionRight ? (o(), a("div", C$, [
+          p.actionBtnPositionRight ? (o(), a("div", C$, [
             n("div", S$, [
               M(_(W), {
                 "style-type": "transparent",
@@ -5837,7 +5837,7 @@ const T$ = { class: "nmorph-select__content" }, O$ = {
         }
         l("update:modelValue", r.value);
       }
-    }, g = p(
+    }, g = v(
       () => D({
         nmorph: [te[s.height], `${s.fill && "fill"}`],
         "nmorph-select": [
@@ -5862,7 +5862,7 @@ const T$ = { class: "nmorph-select__content" }, O$ = {
     }), pe(() => {
       document.removeEventListener("click", y);
     });
-    const b = p(() => typeof r.value == "string" ? r.value === "" ? s.noElementPlaceholder : s.options.find((f) => f.value === r.value)?.label : r.value), w = p(() => s.options.length > 0 ? s.options : s.optionsMap), v = p(() => w.value.length > 0 ? w.value.filter((z) => r.value.includes(z.value)).map((z) => ({ text: z.label, value: z.value })) : Array.isArray(r.value) ? r.value.map((z) => ({ text: z, value: z })) : [{ text: r.value, value: r.value }]);
+    const b = v(() => typeof r.value == "string" ? r.value === "" ? s.noElementPlaceholder : s.options.find((f) => f.value === r.value)?.label : r.value), w = v(() => s.options.length > 0 ? s.options : s.optionsMap), p = v(() => w.value.length > 0 ? w.value.filter((z) => r.value.includes(z.value)).map((z) => ({ text: z.label, value: z.value })) : Array.isArray(r.value) ? r.value.map((z) => ({ text: z, value: z })) : [{ text: r.value, value: r.value }]);
     J("select-selected-value", r), J("select-change-selected-value", m);
     const $ = x(null);
     return (f, z) => (o(), a("div", {
@@ -5877,12 +5877,12 @@ const T$ = { class: "nmorph-select__content" }, O$ = {
         }, [
           typeof r.value == "string" ? (o(), a("div", O$, R(b.value), 1)) : O("", !0),
           r.value.length <= 0 ? (o(), a("div", q$, R(s.noElementPlaceholder), 1)) : (o(), a("div", P$, [
-            (o(!0), a(L, null, U(v.value, (V) => (o(), P(_(g2), ye({
+            (o(!0), a(L, null, U(p.value, (V) => (o(), P(_(g2), ye({
               key: V.value,
               ref_for: !0
             }, V, {
               transparent: "",
-              removable: v.value.length > 1 || !s.valueRequired,
+              removable: p.value.length > 1 || !s.valueRequired,
               height: "thin",
               onClose: m
             }), null, 16, ["removable"]))), 128))
@@ -5931,7 +5931,7 @@ const E$ = { class: "nmorph-select-option__content" }, z2 = /* @__PURE__ */ T({
   setup(e, { emit: t }) {
     const s = Q("select-selected-value", void 0), l = Q("select-change-selected-value", void 0), r = e, i = t, h = () => {
       r.disabled || (i("change-value", r.value), l && l(r.value));
-    }, d = p(() => typeof s?.value == "string" ? s.value === r.value : Array.isArray(s?.value) ? s.value.some((m) => m === r.value) : !1), u = p(
+    }, d = v(() => typeof s?.value == "string" ? s.value === r.value : Array.isArray(s?.value) ? s.value.some((m) => m === r.value) : !1), u = v(
       () => D({
         nmorph: [te[r.height]],
         "nmorph-select-option": [
@@ -5973,7 +5973,7 @@ const F$ = { class: "nmorph-slider__content" }, j$ = { class: "nmorph-slider__in
     I((V) => ({
       a08b3702: r
     }));
-    const s = e, l = p(
+    const s = e, l = v(
       () => D({
         nmorph: [`${s.fill && "fill"}`],
         "nmorph-slider": [`${s.disabled && "disabled"}`]
@@ -5982,7 +5982,7 @@ const F$ = { class: "nmorph-slider__content" }, j$ = { class: "nmorph-slider__in
     K(d, () => {
       h("update:modelValue", d.value);
     });
-    const m = p(() => {
+    const m = v(() => {
       const V = g.value - g.value, C = s.max - s.min + V, S = (d.value - s.min) / C * 100, B = u.value?.clientWidth || 0, F = Ue / B * 100, j = F / 2;
       let X = S - j;
       const G = `${Math.max(0, Math.min(100 - F, X))}%`, Z = `${X + j}%`;
@@ -6008,7 +6008,7 @@ const F$ = { class: "nmorph-slider__content" }, j$ = { class: "nmorph-slider__in
       d.value = Math.round(d.value / s.step) * s.step, d.value = Math.max(s.min, Math.min(s.max, d.value));
     }, w = () => {
       document.removeEventListener("mousemove", b), document.removeEventListener("mouseup", w);
-    }, v = () => {
+    }, p = () => {
       s.disabled || (document.addEventListener("mousemove", b), document.addEventListener("mouseup", w));
     }, $ = x(null), f = () => {
       s.showTooltip && (i.value = !0);
@@ -6039,7 +6039,7 @@ const F$ = { class: "nmorph-slider__content" }, j$ = { class: "nmorph-slider__in
               style: N({ left: m.value.thumb }),
               onMouseenter: f,
               onMouseleave: z,
-              onMousedown: v
+              onMousedown: p
             }, null, 36)
           ], 512)
         ])
@@ -6059,7 +6059,7 @@ const L$ = ["value", "disabled"], U$ = { class: "nmorph-switch-thumb" }, Y$ = /*
   },
   emits: ["inputDOMRef", "update:modelValue"],
   setup(e, { emit: t }) {
-    const s = e, l = p(
+    const s = e, l = v(
       () => D({
         "nmorph-switch": [
           `${s.disabled && "disabled"}`,
@@ -6096,17 +6096,22 @@ const L$ = ["value", "disabled"], U$ = { class: "nmorph-switch-thumb" }, Y$ = /*
           disabled: s.disabled,
           class: "nmorph-native-input"
         }, null, 8, L$),
+        n("div", {
+          class: H(["nmorph-switch__bg-content", { "nmorph-switch__bg-content--enable": i.value }])
+        }, [
+          i.value ? A(u.$slots, "bg-on", { key: 0 }, () => [
+            ee(R(u.$t("NmorphSwitch.on")), 1)
+          ]) : A(u.$slots, "bg-off", { key: 1 }, () => [
+            ee(R(u.$t("NmorphSwitch.off")), 1)
+          ])
+        ], 2),
         n("div", U$, [
           s.loading ? (o(), P(_(q), {
             key: 0,
             name: "loader",
-            width: "16px",
-            height: "16px"
-          })) : i.value ? A(u.$slots, "thumb-on", { key: 1 }, () => [
-            ee(R(u.$t("NmorphSwitch.on")), 1)
-          ]) : A(u.$slots, "thumb-off", { key: 2 }, () => [
-            ee(R(u.$t("NmorphSwitch.off")), 1)
-          ])
+            width: "14px",
+            height: "14px"
+          })) : i.value ? A(u.$slots, "thumb-on", { key: 1 }) : A(u.$slots, "thumb-off", { key: 2 })
         ])
       ])
     ], 2));
@@ -6129,9 +6134,9 @@ const G$ = { class: "nmorph-text-input__input-side" }, K$ = {
   emits: ["inputDOMRef", "update:modelValue", "focus", "blur", "on-enter"],
   setup(e, { emit: t }) {
     I(($) => ({
-      "1b4d3fbc": w.value
+      "7ee4ab03": w.value
     }));
-    const s = e, l = p(
+    const s = e, l = v(
       () => D({
         nmorph: [te[s.height], `${u.value && "focused"}`, `${s.fill && "fill"}`],
         "nmorph-text-input": [`${s.typePassword && "password"}`]
@@ -6141,7 +6146,7 @@ const G$ = { class: "nmorph-text-input__input-side" }, K$ = {
       y("update:modelValue", f.value);
     }, i = x(!1), h = () => {
       s.clearable ? y("update:modelValue", "") : i.value = !i.value;
-    }, d = p(() => s.typePassword && !i.value && !s.clearable ? "password" : "text"), u = x(!1), m = () => {
+    }, d = v(() => s.typePassword && !i.value && !s.clearable ? "password" : "text"), u = x(!1), m = () => {
       y("focus"), u.value = !0;
     }, g = () => {
       y("blur"), u.value = !1;
@@ -6149,12 +6154,12 @@ const G$ = { class: "nmorph-text-input__input-side" }, K$ = {
     Y(() => {
       y("inputDOMRef", k);
     });
-    const b = p(() => s.clearable ? "error" : i.value ? "eye-blocked" : "eye"), w = p(() => v["prepend-icon"] ? "28px" : "8px"), v = Xe();
+    const b = v(() => s.clearable ? "error" : i.value ? "eye-blocked" : "eye"), w = v(() => p["prepend-icon"] ? "28px" : "8px"), p = Xe();
     return ($, f) => (o(), a("div", {
       class: H(l.value)
     }, [
       n("div", G$, [
-        _(v)["prepend-icon"] ? (o(), a("div", K$, [
+        _(p)["prepend-icon"] ? (o(), a("div", K$, [
           A($.$slots, "prepend-icon")
         ])) : O("", !0),
         n("input", {
@@ -6211,7 +6216,7 @@ const J$ = { class: "nmorph-time-picker__content" }, Q$ = { class: "nmorph-time-
     });
     const m = () => {
       h.value = !h.value;
-    }, g = p(
+    }, g = v(
       () => D({
         nmorph: [te[s.height]],
         "nmorph-time-picker": [`${s.disabled && "disabled"}`, `${h.value && "open"}`]
@@ -6221,7 +6226,7 @@ const J$ = { class: "nmorph-time-picker__content" }, Q$ = { class: "nmorph-time-
     }, w = (S) => {
       const B = S;
       d.value = [B, d.value[1], d.value[2]], b();
-    }, v = (S) => {
+    }, p = (S) => {
       const B = S;
       d.value = [d.value[0], B, d.value[2]], b();
     }, $ = (S) => {
@@ -6238,7 +6243,7 @@ const J$ = { class: "nmorph-time-picker__content" }, Q$ = { class: "nmorph-time-
       const S = ke(s.modelValue).split(":").map((B) => Number(B));
       d.value = S;
     })();
-    const V = p(() => `${_e}px`), C = p(() => u.value ? "——:——:——" : ke(s.modelValue));
+    const V = v(() => `${_e}px`), C = v(() => u.value ? "——:——:——" : ke(s.modelValue));
     return (S, B) => {
       const F = Je("NmorphTimeRoller");
       return o(), a("div", {
@@ -6285,7 +6290,7 @@ const J$ = { class: "nmorph-time-picker__content" }, Q$ = { class: "nmorph-time-
                   "selected-value": d.value[1],
                   "disabled-range": S.disabledMinutes,
                   "step-height": _e,
-                  onValueChanged: v
+                  onValueChanged: p
                 }, null, 8, ["set-value-on-mount", "values", "selected-value", "disabled-range"]),
                 M(F, {
                   "set-value-on-mount": !u.value,
@@ -6343,7 +6348,7 @@ const ke = (e) => {
       void 0
     ), r = e, i = () => {
       l && !r.disabled && l(r.value);
-    }, h = p(() => s?.value === r.value), d = p(
+    }, h = v(() => s?.value === r.value), d = v(
       () => D({
         "nmorph-radio": [`${r.disabled && "disabled"}`, `${h.value && "checked"}`, r.styleType]
       })
@@ -6414,7 +6419,7 @@ const ux = { class: "nmorph-radio-group__wrapper" }, _x = { class: "nmorph-radio
     );
     const r = t, i = (d) => {
       l.value = d, r("update:modelValue", l.value);
-    }, h = p(
+    }, h = v(
       () => D({ "nmorph-radio-group": [s.styleType, s.direction, `${s.fill && "fill"}`] })
     );
     return J("radio-group-selected-value", l), J("change-radio-button-value-handler", i), (d, u) => (o(), a("div", {
@@ -6448,7 +6453,7 @@ const vx = /* @__PURE__ */ T({
       "28ac814d": r.value,
       "5c1e7dcc": i.value
     }));
-    const s = e, l = t, r = p(() => `${s.right}px`), i = p(() => `${s.bottom}px`), h = p(
+    const s = e, l = t, r = v(() => `${s.right}px`), i = v(() => `${s.bottom}px`), h = v(
       () => D({
         "nmorph-backtop": [`${m.value && "show"}`]
       })
@@ -6502,7 +6507,7 @@ const px = ["id"], mx = {
   setup(e) {
     const t = e, s = x([]), l = he();
     J("breadcrumb-data", { breadcrumbs: s, breadcrumbId: l });
-    const r = p(
+    const r = v(
       () => D({
         "nmorph-breadcrumb": []
       })
@@ -6531,7 +6536,7 @@ const gx = /* @__PURE__ */ T({
     replace: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-breadcrumb-item": []
       })
@@ -6583,11 +6588,11 @@ const re = /* @__PURE__ */ T({
       relativeElement: s.relativeElement,
       yOffset: s.yOffset,
       xOffset: s.xOffset
-    }), h = p(
+    }), h = v(
       () => D({
         "nmorph-dropdown": [`${!s.open && "closed"}`]
       })
-    ), d = p(() => s.fillWidth ? `${s.relativeElement?.clientWidth}px` : `${s.width}px`), u = () => {
+    ), d = v(() => s.fillWidth ? `${s.relativeElement?.clientWidth}px` : `${s.width}px`), u = () => {
       l("on-outside-click");
     };
     return (m, g) => (o(), P(_($e), {
@@ -6617,7 +6622,7 @@ const wx = { class: "nmorph-tabs__label-list" }, $x = ["id", "onClick"], xx = {
   },
   emits: ["update:model-value", "tab-change"],
   setup(e, { emit: t }) {
-    const s = e, l = t, r = p(
+    const s = e, l = t, r = v(
       () => D({
         "nmorph-tabs": [`${s.stretch && "stretch"}`]
       })
@@ -6672,7 +6677,7 @@ const Ae = (e, t) => {
     disabled: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-tab-pane": []
       })
@@ -6701,7 +6706,7 @@ const Ae = (e, t) => {
     direction: { default: "horizontal" }
   },
   setup(e) {
-    const t = e, s = p(
+    const t = e, s = v(
       () => D({
         "nmorph-divider": [t.direction]
       })
@@ -6720,7 +6725,7 @@ const $e = /* @__PURE__ */ T({
   },
   emits: ["on-outside-click"],
   setup(e, { emit: t }) {
-    const s = e, l = p(
+    const s = e, l = v(
       () => D({
         "nmorph-overlay": [
           `${s.outsideClickEmitEvent && "outside-click"}`,
@@ -6750,28 +6755,32 @@ const Vx = /* @__PURE__ */ T({
   props: {
     notifications: {},
     placement: { default: "top-right" },
-    zIndex: { default: 1e3 }
+    zIndex: { default: 1e3 },
+    quantity: { default: 100 }
   },
   setup(e) {
-    const t = x([]), s = p(() => r.notifications.filter((h) => !t.value.includes(h.id))), l = (h) => {
-      t.value = [...t.value, h];
-    }, r = e, i = p(() => r.zIndex);
-    return (h, d) => (o(), a("div", {
-      class: H(`nmorph-notification-provider nmorph-notification-provider--${r.placement}`),
-      style: N({ zIndex: i.value })
+    const t = x([]), s = v(() => i.notifications.filter((d) => !t.value.includes(d.id))), l = v(() => {
+      const d = Math.max(s.value.length - i.quantity, 0);
+      return s.value.slice(d);
+    }), r = (d) => {
+      t.value = [...t.value, d];
+    }, i = e, h = v(() => i.zIndex);
+    return (d, u) => (o(), a("div", {
+      class: H(`nmorph-notification-provider nmorph-notification-provider--${i.placement}`),
+      style: N({ zIndex: h.value })
     }, [
       M(de, {
         name: "nmorph-notification",
         tag: "div"
       }, {
         default: E(() => [
-          (o(!0), a(L, null, U(s.value, (u) => (o(), a("div", {
-            key: u.id,
-            style: N({ width: u.width }),
+          (o(!0), a(L, null, U(l.value, (m) => (o(), a("div", {
+            key: m.id,
+            style: N({ width: m.width }),
             class: "nmorph-notification-provider__notification"
           }, [
-            M(_(w2), ye({ ref_for: !0 }, u, {
-              onClose: () => l(u.id)
+            M(_(w2), ye({ ref_for: !0 }, m, {
+              onClose: () => r(m.id)
             }), null, 16, ["onClose"])
           ], 4))), 128))
         ]),
@@ -6780,7 +6789,7 @@ const Vx = /* @__PURE__ */ T({
     ], 6));
   }
 });
-const Hx = /* @__PURE__ */ Be(Vx, [["__scopeId", "data-v-e6db4928"]]);
+const Hx = /* @__PURE__ */ Be(Vx, [["__scopeId", "data-v-3af1e6fe"]]);
 var T2 = /* @__PURE__ */ ((e) => (e["top-left"] = "top-left", e["top-center"] = "top-center", e["top-right"] = "top-right", e["bottom-left"] = "bottom-left", e["bottom-center"] = "bottom-center", e["bottom-right"] = "bottom-right", e))(T2 || {});
 const zx = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,