@nmorph/nmorph-ui-kit 2.2.38 → 2.2.40

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphDrawer.css';
 import { defineComponent as m, useSlots as c, computed as o } from "vue";
 import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { toCssSize as h } from "../../../utils/common.js";
+import { createCssSizeVariables as h } from "../../../utils/common.js";
 import q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
 import _ from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import v from "../../../assets/icons/cross.svg.js";
@@ -21,26 +21,28 @@ const w = /* @__PURE__ */ m({
     contentClass: { type: String, required: !1, default: "" }
   },
   emits: ["on-close", "update:model-value"],
-  setup(a, { expose: n, emit: u }) {
+  setup(s, { expose: n, emit: u }) {
     n();
-    const e = a, r = u, t = c(), d = o(
+    const e = s, r = u, t = c(), d = o(
       () => y({
         "nmorph-drawer": [e.placement, e.modelValue && "open"]
       })
-    ), p = o(() => ({
-      "--nmorph-drawer-size": h(e.size)
-    })), l = () => {
+    ), p = o(
+      () => h({
+        "--nmorph-drawer-size": e.size
+      })
+    ), l = () => {
       r("on-close"), r("update:model-value", !1);
     }, i = () => {
       e.closeOnOverlay && l();
-    }, f = o(() => !!(t.header || e.title || e.showClose)), s = { props: e, emit: r, slots: t, modifiers: d, drawerStyle: p, closeHandler: l, overlayClickHandler: i, hasHeader: f, get NmorphIcon() {
+    }, f = o(() => !!(t.header || e.title || e.showClose)), a = { props: e, emit: r, slots: t, modifiers: d, drawerStyle: p, closeHandler: l, overlayClickHandler: i, hasHeader: f, get NmorphIcon() {
       return _;
     }, get NmorphIconCross() {
       return v;
     }, get NmorphOverlay() {
       return q;
     } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphTooltip.css';
-import { defineComponent as y, ref as o, computed as r } from "vue";
-import { useModifiers as w } from "../../../utils/create-modifiers.js";
-import { toCssSize as i } from "../../../utils/common.js";
-import { usePlacement as S } from "../../../hooks/use-placement.js";
-import { useZIndex as _ } from "../../../hooks/use-z-index.js";
-const z = /* @__PURE__ */ y({
+import { defineComponent as x, ref as o, computed as r } from "vue";
+import { usePlacement as y } from "../../../hooks/use-placement.js";
+import { useZIndex as S } from "../../../hooks/use-z-index.js";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as w } from "../../../utils/common.js";
+const z = /* @__PURE__ */ x({
   __name: "NmorphTooltip",
   props: {
     text: { type: String, required: !1, default: "" },
@@ -16,35 +16,37 @@ const z = /* @__PURE__ */ y({
     maxWidth: { type: [Number, String], required: !1, default: void 0 },
     height: { type: [Number, String], required: !1, default: void 0 }
   },
-  setup(p, { expose: m }) {
-    const e = p, t = o(e.forceShow), n = o(null), l = o(null), { placement: d } = S({
+  setup(f, { expose: p }) {
+    const e = f, t = o(e.forceShow), i = o(null), l = o(null), { placement: n } = y({
       initialPlacement: e.position,
-      contentDOMElement: n,
+      contentDOMElement: i,
       relativeElement: l
     }), c = r(
-      () => w({
+      () => _({
         "nmorph-tooltip": [
-          d.value,
+          n.value,
           !!e.forceCoordinate?.x && !!e.forceCoordinate?.y && "force-coords"
         ]
       })
-    ), h = () => {
+    ), m = () => {
       t.value = !0;
-    }, v = () => {
+    }, h = () => {
       e.forceShow || (t.value = !1);
-    }, a = r(() => e.forceCoordinate ? "100%" : "auto"), u = _(
+    }, a = r(() => e.forceCoordinate ? "100%" : "auto"), s = S(
       () => t.value,
       () => e.zIndex
-    ), x = r(() => ({
+    ), v = r(() => ({
       "--nmorph-tooltip-width": a.value,
-      "--nmorph-tooltip-z-index": u.value,
-      ...e.width !== void 0 && { "--width": i(e.width) },
-      ...e.maxWidth !== void 0 && { "--max-width": i(e.maxWidth) },
-      ...e.height !== void 0 && { "--height": i(e.height) }
-    })), s = o(null);
-    m({ tooltipBody: s });
-    const f = { props: e, showTooltip: t, tooltipDOMRef: n, slotDOMRef: l, placement: d, modifiers: c, handleMouseEnter: h, handleMouseLeave: v, rootWidth: a, zIndex: u, styles: x, tooltipBody: s };
-    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
+      "--nmorph-tooltip-z-index": s.value,
+      ...w({
+        "--width": e.width,
+        "--max-width": e.maxWidth,
+        "--height": e.height
+      })
+    })), u = o(null);
+    p({ tooltipBody: u });
+    const d = { props: e, showTooltip: t, tooltipDOMRef: i, slotDOMRef: l, placement: n, modifiers: c, handleMouseEnter: m, handleMouseLeave: h, rootWidth: a, zIndex: s, styles: v, tooltipBody: u };
+    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
   }
 });
 export {

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js

@@ -2,10 +2,10 @@ import './NmorphAutocomplete.css';
 import { defineComponent as K, ref as s, computed as l, watch as c, nextTick as Q } from "vue";
 import { useModifiers as M } from "../../../utils/create-modifiers.js";
 import { getNmorphOptionHeight as W, toCssSize as X, resolveDomElement as Y } from "../../../utils/common.js";
-import { NmorphComponentHeight as ee } from "../../../types/index.js";
-import { useFormItemModel as te } from "../nmorph-form/use-form-item-input.js";
-import { useVirtualList as ae } from "../../../hooks/use-virtual-list.js";
-import { useZIndex as le } from "../../../hooks/use-z-index.js";
+import { useZIndex as ee } from "../../../hooks/use-z-index.js";
+import { useVirtualList as te } from "../../../hooks/use-virtual-list.js";
+import { useFormItemModel as ae } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as le } from "../../../types/common.types.js";
 import re from "../nmorph-text-input/NmorphTextInput.vue.js";
 import oe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
 import ue from "../../basic/nmorph-icon/NmorphIcon.vue.js";
@@ -34,7 +34,7 @@ const Ie = /* @__PURE__ */ K({
   emits: ["update:model-value", "select"],
   setup(O, { expose: L, emit: V }) {
     L();
-    const t = O, p = V, { modelValue: m, updateModelValue: v } = te(
+    const t = O, p = V, { modelValue: m, updateModelValue: v } = ae(
       t,
       (e) => p("update:model-value", e),
       ""
@@ -49,7 +49,7 @@ const Ie = /* @__PURE__ */ K({
       set: b
     }), a = s(!1), z = s(null), x = () => {
       i.value = !0, a.value = !1;
-    }, r = l(() => t.list.filter((e) => Object.keys(e).some((I) => String(e[I]).toLowerCase().includes(o.value.toLowerCase())))), f = l(() => t.virtual && r.value.length > 0), H = l(() => t.virtualItemHeight || W(t.height)), q = l(() => t.virtualOverscan), N = l(() => t.virtualDynamicHeight), n = ae(r, {
+    }, r = l(() => t.list.filter((e) => Object.keys(e).some((I) => String(e[I]).toLowerCase().includes(o.value.toLowerCase())))), f = l(() => t.virtual && r.value.length > 0), H = l(() => t.virtualItemHeight || W(t.height)), q = l(() => t.virtualOverscan), N = l(() => t.virtualDynamicHeight), n = te(r, {
       enabled: f,
       itemHeight: H,
       overscan: q,
@@ -92,11 +92,11 @@ const Ie = /* @__PURE__ */ K({
       "aria-activedescendant": a.value ? D(u.value) : void 0
     })), P = (e, I) => {
       n.measureElement(I, Y(e));
-    }, C = le(a, () => t.zIndex), G = l(() => ({
+    }, C = ee(a, () => t.zIndex), G = l(() => ({
       "--nmorph-autocomplete-input-z-index": C.value + 1
     })), J = l(
       () => M({
-        nmorph: [ee[t.height]]
+        nmorph: [le[t.height]]
       })
     ), _ = { props: t, emit: p, modelValue: m, updateModelValue: v, initialValue: o, modifiers: A, userClosed: i, updateValueHandler: b, inputValue: T, open: a, nmorphAutocompleteDOMRef: z, closeHandler: x, filteredList: r, virtualEnabled: f, virtualItemHeight: H, virtualOverscan: q, virtualDynamicHeight: N, virtualList: n, virtualItems: B, virtualSpacerStyle: E, virtualContentStyle: $, virtualMaxHeight: j, currentIndex: u, activeItem: h, listboxId: g, getOptionId: D, selectItem: y, clickHandler: F, focusHandler: R, loader: d, arrowDownHandler: S, arrowUpHandler: w, enterHandler: k, keydownHandler: U, inputAttrs: Z, setVirtualItemRef: P, dropdownZIndex: C, styles: G, optionHeightModifiers: J, get NmorphIcon() {
       return ue;

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue2.js

@@ -1,8 +1,8 @@
 import './NmorphCheckbox.css';
 import { defineComponent as x, inject as i, watch as S, ref as n, computed as d } from "vue";
 import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import { NmorphSelectionControlHeight as V } from "../../../types/index.js";
-import { useFormItemModel as C } from "../nmorph-form/use-form-item-input.js";
+import { useFormItemModel as V } from "../nmorph-form/use-form-item-input.js";
+import { NmorphSelectionControlHeight as C } from "../../../types/common.types.js";
 const H = /* @__PURE__ */ x({
   __name: "NmorphCheckbox",
   props: {
@@ -21,7 +21,7 @@ const H = /* @__PURE__ */ x({
     ), u = i(
       "change-checkbox-value-handler",
       void 0
-    ), s = i("checkbox-group-height", void 0), e = g, c = _, { modelValue: l, updateModelValue: p } = C(
+    ), s = i("checkbox-group-height", void 0), e = g, c = _, { modelValue: l, updateModelValue: p } = V(
       e,
       (r) => c("update:model-value", r),
       !1
@@ -41,7 +41,7 @@ const H = /* @__PURE__ */ x({
       }
     }, k = d(
       () => q({
-        nmorph: [V[m.value]],
+        nmorph: [C[m.value]],
         "nmorph-checkbox": [
           h.value && "checked",
           e.disabled && "disabled",

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.vue.js

@@ -1,21 +1,21 @@
 import './NmorphColorPicker.css';
-import t from "./NmorphColorPicker.vue2.js";
-import { openBlock as n, createElementBlock as i, normalizeClass as a, createElementVNode as e, normalizeStyle as c, toDisplayString as s, createCommentVNode as d } from "vue";
+import a from "./NmorphColorPicker.vue2.js";
+import { openBlock as l, createElementBlock as i, normalizeClass as c, createElementVNode as n, normalizeStyle as t, toDisplayString as d, createCommentVNode as s } from "vue";
 /* empty css                       */
 import m from "../../../_virtual/_plugin-vue_export-helper.js";
-const p = { class: "nmorph-color-picker__content" }, _ = ["id", "name", "tabindex", "value", "disabled"], f = {
+const p = { class: "nmorph-color-picker__content" }, _ = ["id", "name", "tabindex", "value", "disabled"], h = {
   key: 0,
   class: "nmorph-color-picker__value"
 };
-function u(h, r, k, o, v, b) {
-  return n(), i(
+function u(f, r, k, o, v, b) {
+  return l(), i(
     "div",
     {
-      class: a(o.modifiers)
+      class: c(o.modifiers)
     },
     [
-      e("div", p, [
-        e("input", {
+      n("div", p, [
+        n("input", {
           id: o.id,
           ref: "inputDOMRef",
           name: o.name,
@@ -25,37 +25,33 @@ function u(h, r, k, o, v, b) {
           value: o.currentValue,
           disabled: o.props.disabled,
           onInput: o.handleInput,
-          onFocus: r[0] || (r[0] = (l) => {
-            o.focused = !0, o.emit("focus");
-          }),
-          onBlur: r[1] || (r[1] = (l) => {
-            o.focused = !1, o.emit("blur");
-          })
+          onFocus: r[0] || (r[0] = (...e) => o.handleFocus && o.handleFocus(...e)),
+          onBlur: r[1] || (r[1] = (...e) => o.handleBlur && o.handleBlur(...e))
         }, null, 40, _),
-        e(
+        n(
           "div",
           {
             class: "nmorph-color-picker__swatch",
-            style: c({ background: o.currentValue })
+            style: t({ background: o.currentValue })
           },
           null,
           4
           /* STYLE */
         ),
-        o.props.showValue ? (n(), i(
+        o.props.showValue ? (l(), i(
           "span",
-          f,
-          s(o.displayValue),
+          h,
+          d(o.displayValue),
           1
           /* TEXT */
-        )) : d("v-if", !0)
+        )) : s("v-if", !0)
       ])
     ],
     2
     /* CLASS */
   );
 }
-const N = /* @__PURE__ */ m(t, [["render", u], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-color-picker/NmorphColorPicker.vue"]]);
+const C = /* @__PURE__ */ m(a, [["render", u], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-color-picker/NmorphColorPicker.vue"]]);
 export {
-  N as default
+  C as default
 };

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.vue2.js

@@ -1,9 +1,10 @@
 import './NmorphColorPicker.css';
-import { defineComponent as k, ref as g, watch as B, onMounted as H, computed as _ } from "vue";
-import { NmorphComponentHeight as L } from "../../../types/index.js";
-import { useModifiers as O } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as z, useFormItemModel as A } from "../nmorph-form/use-form-item-input.js";
-const G = /* @__PURE__ */ k({
+import { defineComponent as k, ref as H, watch as L, onMounted as O, computed as C } from "vue";
+import { useModifiers as z } from "../../../utils/create-modifiers.js";
+import { useFocusableInput as A } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as D, useFormItemModel as E } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as T } from "../../../types/common.types.js";
+const W = /* @__PURE__ */ k({
   __name: "NmorphColorPicker",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -17,52 +18,60 @@ const G = /* @__PURE__ */ k({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur"],
-  setup(q, { expose: S, emit: V }) {
-    const n = q, b = V, { id: x, name: I, tabindex: F } = z(n), { modelValue: d, updateModelValue: y } = A(
+  setup(_, { expose: q, emit: F }) {
+    const n = _, d = F, { id: I, name: S, tabindex: V } = D(n), { modelValue: c, updateModelValue: g } = E(
       n,
-      (e) => b("update:model-value", e),
+      (e) => d("update:model-value", e),
       ""
     ), l = (e, r = "#000000") => {
       const t = e?.trim() || "";
       return /^#[\da-f]{6}$/i.test(t) ? t.toLowerCase() : /^#[\da-f]{3}$/i.test(t) ? `#${t.slice(1).split("").map((o) => `${o}${o}`).join("").toLowerCase()}` : r;
-    }, p = g(null), m = () => {
+    }, {
+      elementRef: p,
+      focused: y,
+      handleFocus: x,
+      handleBlur: B
+    } = A({
+      onFocus: () => d("focus"),
+      onBlur: () => d("blur")
+    }), f = () => {
       if (typeof document > "u") return "#006cb6";
       const e = p.value || document.documentElement, r = getComputedStyle(e).getPropertyValue("--nmorph-accent-color").trim();
       return l(r, "#006cb6");
-    }, a = g(l(d.value)), v = g(!1);
-    B(d, (e) => {
-      a.value = e ? l(e) : m();
+    }, a = H(l(c.value));
+    L(c, (e) => {
+      a.value = e ? l(e) : f();
     });
-    const w = (e) => {
+    const R = (e) => {
       const r = e.target, t = l(r.value);
-      a.value = t, y(t);
-    }, f = (e) => [
+      a.value = t, g(t);
+    }, h = (e) => [
       parseInt(e.slice(1, 3), 16),
       parseInt(e.slice(3, 5), 16),
       parseInt(e.slice(5, 7), 16)
-    ], $ = (e) => {
-      const [r, t, o] = f(e);
+    ], v = (e) => {
+      const [r, t, o] = h(e);
       return `rgb(${r}, ${t}, ${o})`;
-    }, M = (e) => {
-      const [r, t, o] = f(e).map((j) => j / 255), s = Math.max(r, t, o), u = Math.min(r, t, o), h = (s + u) / 2;
-      if (s === u)
-        return `hsl(0, 0%, ${Math.round(h * 100)}%)`;
-      const i = s - u, R = h > 0.5 ? i / (2 - s - u) : i / (s + u);
-      let c = 0;
-      return s === r ? c = (t - o) / i + (t < o ? 6 : 0) : s === t ? c = (o - r) / i + 2 : c = (r - t) / i + 4, `hsl(${Math.round(c * 60)}, ${Math.round(R * 100)}%, ${Math.round(h * 100)}%)`;
+    }, $ = (e) => {
+      const [r, t, o] = h(e).map((j) => j / 255), u = Math.max(r, t, o), s = Math.min(r, t, o), b = (u + s) / 2;
+      if (u === s)
+        return `hsl(0, 0%, ${Math.round(b * 100)}%)`;
+      const i = u - s, P = b > 0.5 ? i / (2 - u - s) : i / (u + s);
+      let m = 0;
+      return u === r ? m = (t - o) / i + (t < o ? 6 : 0) : u === t ? m = (o - r) / i + 2 : m = (r - t) / i + 4, `hsl(${Math.round(m * 60)}, ${Math.round(P * 100)}%, ${Math.round(b * 100)}%)`;
     };
-    H(() => {
-      d.value || (a.value = m());
-    }), S({ inputDOMRef: p });
-    const N = _(
-      () => O({
-        nmorph: [L[n.height], v.value && "focused"],
+    O(() => {
+      c.value || (a.value = f());
+    }), q({ inputDOMRef: p });
+    const w = C(
+      () => z({
+        nmorph: [T[n.height], y.value && "focused"],
         "nmorph-color-picker": [n.disabled && "disabled", n.displayFormat]
       })
-    ), P = _(() => n.displayFormat === "rgb" ? $(a.value) : n.displayFormat === "hsl" ? M(a.value) : a.value.toUpperCase()), C = { props: n, emit: b, id: x, name: I, tabindex: F, modelValue: d, updateModelValue: y, normalizeColor: l, inputDOMRef: p, resolveAccentColor: m, currentValue: a, focused: v, handleInput: w, hexToRgb: f, formatRgb: $, formatHsl: M, modifiers: N, displayValue: P };
-    return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
+    ), N = C(() => n.displayFormat === "rgb" ? v(a.value) : n.displayFormat === "hsl" ? $(a.value) : a.value.toUpperCase()), M = { props: n, emit: d, id: I, name: S, tabindex: V, modelValue: c, updateModelValue: g, normalizeColor: l, inputDOMRef: p, focused: y, handleFocus: x, handleBlur: B, resolveAccentColor: f, currentValue: a, handleInput: R, hexToRgb: h, formatRgb: v, formatHsl: $, modifiers: w, displayValue: N };
+    return Object.defineProperty(M, "__isScriptSetup", { enumerable: !1, value: !0 }), M;
   }
 });
 export {
-  G as default
+  W as default
 };

package/dist/components/form/nmorph-date-picker/NmorphDatePicker.vue2.js

@@ -1,17 +1,17 @@
 import './NmorphDatePicker.css';
-import { defineComponent as B, computed as a, ref as u, watch as M } from "vue";
-import { useModifiers as V } from "../../../utils/create-modifiers.js";
-import { toCssSize as m } from "../../../utils/common.js";
-import { NmorphComponentHeight as P } from "../../../types/index.js";
-import j from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
-import z from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
-import { useI18n as L } from "vue-i18n";
-import { useFormItemInput as R, useFormItemModel as T } from "../nmorph-form/use-form-item-input.js";
-import { formatDate as c } from "../../data/nmorph-calendar/utils.js";
+import { defineComponent as k, computed as a, ref as u, watch as V } from "vue";
+import { useModifiers as B } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as M } from "../../../utils/common.js";
+import P from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
+import j from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
+import { useI18n as z } from "vue-i18n";
+import { useFormItemInput as L, useFormItemModel as R } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as T } from "../../../types/common.types.js";
+import { formatDate as m } from "../../data/nmorph-calendar/utils.js";
 import E from "../../../assets/icons/calendar.svg.js";
 import G from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import J from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const le = /* @__PURE__ */ B({
+const le = /* @__PURE__ */ k({
   __name: "NmorphDatePicker",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -36,29 +36,29 @@ const le = /* @__PURE__ */ B({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(v, { expose: h, emit: y }) {
-    h();
-    const { t: p } = L(), e = v, { id: g, name: q, autocomplete: S } = R(e), n = a(() => e.placeholder ? e.placeholder : p("pickADate")), s = y, { modelValue: d, updateModelValue: i } = T(
+  setup(c, { expose: y, emit: v }) {
+    y();
+    const { t: s } = z(), e = c, { id: h, name: g, autocomplete: q } = L(e), n = a(() => e.placeholder ? e.placeholder : s("pickADate")), p = v, { modelValue: d, updateModelValue: i } = R(
       e,
-      (r) => s("update:model-value", r),
+      (r) => p("update:model-value", r),
       null
-    ), t = u(d.value), l = u(!1), N = () => {
+    ), t = u(d.value), l = u(!1), S = () => {
       l.value = !0;
-    }, D = () => {
+    }, N = () => {
       l.value = !1;
     }, b = a(
-      () => V({
-        nmorph: [P[e.height]],
+      () => B({
+        nmorph: [T[e.height]],
         "nmorph-date-picker": [e.disabled && "disabled", e.type, l.value && "focus"]
       })
-    ), C = a(() => ({
-      ...e.width !== void 0 && { "--width": m(e.width) },
-      ...e.calendarCellHeight !== void 0 && {
-        "--date-picker-calendar-cell-height": m(e.calendarCellHeight)
-      }
-    })), o = u(!1), I = u(null), _ = () => {
+    ), D = a(
+      () => M({
+        "--width": e.width,
+        "--date-picker-calendar-cell-height": e.calendarCellHeight
+      })
+    ), o = u(!1), C = u(null), I = () => {
       o.value = !1;
-    }, w = () => {
+    }, _ = () => {
       o.value = !o.value;
     }, A = a(() => {
       if (!t.value) return n.value;
@@ -70,30 +70,30 @@ const le = /* @__PURE__ */ B({
       };
       if (Array.isArray(t.value)) {
         if (t.value.length === 0) return n.value;
-        const O = c(t.value, r), k = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
-        return O.join(k);
+        const x = m(t.value, r), O = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
+        return x.join(O);
       } else
-        return c(t.value, r);
+        return m(t.value, r);
     }), F = () => {
       const r = Array.isArray(t.value) ? [] : null;
       t.value = r, i(t.value);
-    }, H = (r) => {
+    }, w = (r) => {
       t.value = r, i(t.value);
     };
-    M(
+    V(
       d,
       (r) => {
         t.value = r;
       },
       { deep: !0 }
     );
-    const x = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), f = { t: p, props: e, id: g, name: q, autocomplete: S, placeholderText: n, emit: s, modelValue: d, updateModelValue: i, selectedDate: t, focus: l, focusHandler: N, blurHandler: D, modifiers: b, styles: C, open: o, nmorphInputDOMRef: I, closeHandler: _, toggleOpen: w, displayValue: A, clearHandler: F, updateSelectedDateHandler: H, showClearButton: x, get NmorphDropdown() {
+    const H = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), f = { t: s, props: e, id: h, name: g, autocomplete: q, placeholderText: n, emit: p, modelValue: d, updateModelValue: i, selectedDate: t, focus: l, focusHandler: S, blurHandler: N, modifiers: b, styles: D, open: o, nmorphInputDOMRef: C, closeHandler: I, toggleOpen: _, displayValue: A, clearHandler: F, updateSelectedDateHandler: w, showClearButton: H, get NmorphDropdown() {
       return J;
     }, get NmorphIcon() {
       return G;
     }, get NmorphIconCalendar() {
       return E;
-    }, NmorphClearButton: j, NmorphDatePickerContent: z };
+    }, NmorphClearButton: P, NmorphDatePickerContent: j };
     return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
   }
 });

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.css

@@ -1 +1 @@
-.nmorph-file-upload{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__trigger{position:relative}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{width:100%;min-width:0;margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__list>div{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__file{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin-bottom:var(--indentation-02);padding:var(--indentation-02) var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-image-preview{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;flex:1 1 auto;gap:var(--indentation-02);align-items:center;min-width:0;overflow:hidden}.nmorph-file-upload .nmorph-file-upload__file-info>.nmorph-icon{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-name{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{flex:0 0 auto}
+.nmorph-file-upload{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__trigger{position:relative;width:100%;min-width:0}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{width:100%;min-width:0;margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__list>div{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__file{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin-bottom:var(--indentation-02);padding:var(--indentation-02) var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-image-preview{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;flex:1 1 0;gap:var(--indentation-02);align-items:center;min-width:0;max-width:100%;overflow:hidden}.nmorph-file-upload .nmorph-file-upload__file-info>.nmorph-icon{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-name{display:block;flex:1 1 0;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{flex:0 0 auto}