@citruslime/ui 2.1.3 → 2.1.4-beta.1

package/dist/citrus-lime-ui.es.js

@@ -1,5 +1,5 @@
 import { Icon as fl } from "@iconify/vue";
-import { defineComponent as D, ref as O, openBlock as i, createElementBlock as v, renderSlot as j, normalizeProps as oe, guardReactiveProps as ie, resolveComponent as K, Fragment as U, createElementVNode as u, normalizeClass as I, createVNode as y, Transition as $e, withCtx as z, withDirectives as q, vShow as R, createBlock as B, Teleport as Fe, renderList as te, unref as a, mergeProps as be, toDisplayString as x, createCommentVNode as M, nextTick as ke, computed as E, watch as J, onMounted as Oe, onUnmounted as Ue, isRef as ye, normalizeStyle as nl, vModelText as ml, withModifiers as Y, vModelDynamic as gl, withKeys as Se, createTextVNode as le, watchEffect as bl, createSlots as Ve } from "vue";
+import { defineComponent as D, ref as S, openBlock as i, createElementBlock as v, renderSlot as j, normalizeProps as oe, guardReactiveProps as ie, resolveComponent as K, Fragment as U, createElementVNode as u, normalizeClass as I, createVNode as y, Transition as $e, withCtx as z, withDirectives as q, vShow as R, createBlock as B, Teleport as Fe, renderList as te, unref as a, mergeProps as be, toDisplayString as x, createCommentVNode as M, nextTick as ke, computed as E, watch as J, onMounted as Se, onUnmounted as Ue, isRef as ye, normalizeStyle as nl, vModelText as ml, withModifiers as Y, vModelDynamic as gl, withKeys as Oe, createTextVNode as le, watchEffect as bl, createSlots as Ve } from "vue";
 import { generateStringId as vl } from "@citruslime/utils";
 import { createI18n as hl, useI18n as ae } from "vue-i18n";
 import Je from "flatpickr";
@@ -11,7 +11,7 @@ const wl = { class: "cl-overflow-hidden" }, xl = /* @__PURE__ */ D({
     exclusive: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const n = e, t = O([]);
+    const n = e, t = S([]);
     function l(r) {
       let s = t.value.find((g) => g.id === r);
       return s || (s = {
@@ -29,7 +29,7 @@ const wl = { class: "cl-overflow-hidden" }, xl = /* @__PURE__ */ D({
       j(r.$slots, "default", oe(ie({ isItemOpen: l, toggleItem: o })))
     ]));
   }
-}), $l = { class: "cl-absolute cl-left-5 cl-top-5" }, kl = { class: "cl-font-semibold cl-ml-10 cl-p-4 cl-select-none cl-text-grey-5" }, Tl = { class: "cl-overflow-hidden" }, Cl = { class: "cl-ml-10 cl-p-4" }, Sl = /* @__PURE__ */ D({
+}), $l = { class: "cl-absolute cl-left-5 cl-top-5" }, kl = { class: "cl-font-semibold cl-ml-10 cl-p-4 cl-select-none cl-text-grey-5" }, Tl = { class: "cl-overflow-hidden" }, Cl = { class: "cl-ml-10 cl-p-4" }, Ol = /* @__PURE__ */ D({
   __name: "cl-ui-accordion-item",
   props: {
     open: { type: Boolean },
@@ -86,13 +86,13 @@ const wl = { class: "cl-overflow-hidden" }, xl = /* @__PURE__ */ D({
   for (const [l, o] of n)
     t[l] = o;
   return t;
-}, Ol = {}, El = { class: "cl-border-b cl-border-grey-1 cl-font-semibold cl-pl-14 cl-pr-4 cl-py-2 cl-text-grey-3 cl-text-sm" };
+}, Sl = {}, El = { class: "cl-border-b cl-border-grey-1 cl-font-semibold cl-pl-14 cl-pr-4 cl-py-2 cl-text-grey-3 cl-text-sm" };
 function jl(e, n) {
   return i(), v("div", El, [
     j(e.$slots, "default")
   ]);
 }
-const Al = /* @__PURE__ */ ve(Ol, [["render", jl]]), Me = O([]);
+const Al = /* @__PURE__ */ ve(Sl, [["render", jl]]), Me = S([]);
 function Ke(e) {
   const n = {
     id: vl(),
@@ -166,7 +166,7 @@ const Ml = ["onClick"], Il = { class: "cl-flex-1 cl-select-none cl-text-ellipsis
         }, [
           j(n.$slots, "navigation"),
           u("div", {
-            class: I(["cl-grow cl-max-h-full cl-overflow-x-hidden cl-overflow-y-auto cl-overscroll-y-none cl-w-auto", {
+            class: I(["cl-grow cl-max-h-full cl-mb-20 cl-overflow-x-hidden cl-overflow-y-auto cl-overscroll-y-none cl-w-auto xl:cl-mb-0", {
               "md:cl-p-8 cl-p-2": !e.removePadding
             }])
           }, [
@@ -193,7 +193,7 @@ const Ge = /* @__PURE__ */ ve(Rl, [["render", Ul], ["__scopeId", "data-v-a21dc5d
     disabled: { type: Boolean, default: !1 }
   },
   setup(e, { expose: n }) {
-    const t = O(null);
+    const t = S(null);
     return n({
       focus() {
         t.value && t.value.focus();
@@ -1053,7 +1053,7 @@ const it = ["placeholder", "disabled"], rt = { class: "cl-absolute cl-bg-white c
     valueOutOfRange: null
   },
   setup(e, { expose: n, emit: t }) {
-    const l = e, { d: o, getDateTimeFormat: r, locale: s, t: g } = ae(), c = O(null), b = O(null), h = E(() => o(at(), l.type)), m = E(() => r(s.value)[l.type]), f = E(() => P()), p = E(() => Q()), d = E(() => ge()), w = E(() => Ze(l.min, s.value)), $ = E(() => Ze(l.max, s.value)), S = O(!1), V = E(() => {
+    const l = e, { d: o, getDateTimeFormat: r, locale: s, t: g } = ae(), c = S(null), b = S(null), h = E(() => o(at(), l.type)), m = E(() => r(s.value)[l.type]), f = E(() => P()), p = E(() => Q()), d = E(() => ge()), w = E(() => Ze(l.min, s.value)), $ = E(() => Ze(l.max, s.value)), O = S(!1), V = E(() => {
       var se, xe;
       let k = "H", L = "Y";
       return ((se = m.value) == null ? void 0 : se.hour12) === !0 && (k = "h"), ((xe = m.value) == null ? void 0 : xe.year) === "2-digit" && (L = "y"), ct(h.value, k, L);
@@ -1080,17 +1080,17 @@ const it = ["placeholder", "disabled"], rt = { class: "cl-absolute cl-bg-white c
     });
     function ce(k, L, se) {
       const xe = k.length > 0 ? k[0] : null;
-      xe !== l.date && !S.value && (t("update:date", xe), xe === null && t("valueOutOfRange")), S.value = !1;
+      xe !== l.date && !O.value && (t("update:date", xe), xe === null && t("valueOutOfRange")), O.value = !1;
     }
     function C() {
-      S.value = !0, t("update:date", null);
+      O.value = !0, t("update:date", null);
     }
     function H() {
       if (c.value !== null) {
         let k = new Date();
         k.setHours(12, 0, 0, 0);
         let L;
-        l.type === "time" ? L = l.min.toDateFromTime() : L = new Date(l.min), L > k && (k = L), S.value = !0, t("update:date", k);
+        l.type === "time" ? L = l.min.toDateFromTime() : L = new Date(l.min), L > k && (k = L), O.value = !0, t("update:date", k);
       }
     }
     function X() {
@@ -1144,7 +1144,7 @@ const it = ["placeholder", "disabled"], rt = { class: "cl-absolute cl-bg-white c
       A(), ke(() => X());
     }, {
       immediate: !1
-    }), Oe(() => X()), Ue(() => A()), n({
+    }), Se(() => X()), Ue(() => A()), n({
       focus() {
         var k;
         (k = b.value) == null || k.focus();
@@ -1226,7 +1226,7 @@ const dt = /* @__PURE__ */ ve(ut, [["__scopeId", "data-v-053c2f6e"]]), ze = [
     "update:value": null
   },
   setup(e, { expose: n, emit: t }) {
-    const l = e, { n: o, t: r } = ae(), { debounce: s } = pl(), g = O(l.value), c = O(), b = E({
+    const l = e, { n: o, t: r } = ae(), { debounce: s } = pl(), g = S(l.value), c = S(), b = E({
       get: () => l.value,
       set: (d) => t("update:value", d)
     }), h = E(() => l.disabled ? "rgba(153, 153, 153, 0.8)" : "#9acd32"), m = E(() => {
@@ -1234,8 +1234,8 @@ const dt = /* @__PURE__ */ ve(ut, [["__scopeId", "data-v-053c2f6e"]]), ze = [
       return d < 35 && d > 0 ? d < 20 ? d += 0.5 : d += 0.25 : d > 65 && d < 100 && (d > 80 ? d -= 0.5 : d -= 0.25), d;
     }), f = E(() => l.min <= l.max && l.step > 0);
     function p(d, w) {
-      const $ = (d == null ? void 0 : d.value) ?? "", S = Math.max(Math.min(parseFloat($) || l.min, l.max), l.min);
-      b.value = l.enforceStep ? Math.ceil(S / l.step) * l.step : S, ke(() => w());
+      const $ = (d == null ? void 0 : d.value) ?? "", O = Math.max(Math.min(parseFloat($) || l.min, l.max), l.min);
+      b.value = l.enforceStep ? Math.ceil(O / l.step) * l.step : O, ke(() => w());
     }
     return J(() => l.value, () => g.value = l.value), n({
       focus() {
@@ -1251,14 +1251,14 @@ const dt = /* @__PURE__ */ ve(ut, [["__scopeId", "data-v-053c2f6e"]]), ze = [
         u("div", ft, [
           q(y($, {
             modelValue: g.value,
-            "onUpdate:modelValue": w[0] || (w[0] = (S) => g.value = S),
+            "onUpdate:modelValue": w[0] || (w[0] = (O) => g.value = O),
             class: "!cl-text-sm md:!cl-w-auto",
             "input-type": "number",
             min: e.min,
             max: e.max,
             step: e.step,
             disabled: e.disabled,
-            onInput: w[1] || (w[1] = (S) => a(s)(p, S.target, d.$forceUpdate))
+            onInput: w[1] || (w[1] = (O) => a(s)(p, O.target, d.$forceUpdate))
           }, null, 8, ["modelValue", "min", "max", "step", "disabled"]), [
             [R, e.showNumericInput]
           ]),
@@ -1268,7 +1268,7 @@ const dt = /* @__PURE__ */ ve(ut, [["__scopeId", "data-v-053c2f6e"]]), ze = [
               q(u("input", {
                 ref_key: "sliderRef",
                 ref: c,
-                "onUpdate:modelValue": w[2] || (w[2] = (S) => ye(b) ? b.value = S : null),
+                "onUpdate:modelValue": w[2] || (w[2] = (O) => ye(b) ? b.value = O : null),
                 class: "cl-align-middle cl-appearance-none cl-bg-gradient-to-r cl-border cl-border-grey-2 cl-delay-500 cl-ease-in cl-flex-1 cl-h-5 cl-mb-2 cl-outline-none cl-rounded-full cl-transition-colors cl-w-full",
                 style: nl({
                   background: `linear-gradient(to right, ${a(h)} 0%, ${a(h)} ${a(m)}%, white ${a(m)}%, white 100%)`
@@ -1366,10 +1366,10 @@ function _e(e, n) {
   const t = e.target;
   return xt(n) ? t.valueAsNumber : $t(n) ? t.valueAsDate : Ce(n) ? t.checked : t.value;
 }
-const Tt = { class: "cl-flex cl-justify-between" }, Ct = { class: "cl-w-full" }, St = {
+const Tt = { class: "cl-flex cl-justify-between" }, Ct = { class: "cl-w-full" }, Ot = {
   key: 0,
   class: "cl-block cl-left-auto cl-relative cl-text-danger-default"
-}, Ot = {
+}, St = {
   key: 1,
   class: "cl-bg-danger-light cl-block cl-max-h-6 cl-mb-1 cl-ml-2 cl-px-2 cl-rounded-md cl-text-center cl-text-danger-default cl-text-xs"
 }, Et = ["type", "disabled", "min", "max", "minlength", "maxlength", "step", "placeholder", "accept", "name", "autocomplete"], jt = {
@@ -1410,13 +1410,13 @@ const Tt = { class: "cl-flex cl-justify-between" }, Ct = { class: "cl-w-full" },
   },
   emits: ["update:model-value", "click", "focus", "input", "change", "validated"],
   setup(e, { expose: n, emit: t }) {
-    const l = e, o = O(null), r = O(!1), s = O(!1), g = E(se), c = E(() => l.placeholderText.trim() !== "" ? l.placeholderText : l.label), b = O(!1), { t: h } = ae(), m = O(0), f = E({
+    const l = e, o = S(null), r = S(!1), s = S(!1), g = E(se), c = E(() => l.placeholderText.trim() !== "" ? l.placeholderText : l.label), b = S(!1), { t: h } = ae(), m = S(0), f = E({
       get: () => l.modelValue,
       set: (T) => X(T, !1)
     }), p = E({
       get: () => l.modelValue,
       set: (T) => H(T)
-    }), d = E(() => typeof l.min == "number" ? l.min.toString() : l.min), w = E(() => typeof l.max == "number" ? l.max.toString() : l.max), $ = E(() => typeof l.min == "number" ? l.min : parseFloat(l.min)), S = E(() => typeof l.max == "number" ? l.max : parseFloat(l.max)), V = E(() => l.messageWhenValid.trim() !== "" ? l.messageWhenValid : ""), G = O(!0), ce = O([]), C = E(() => {
+    }), d = E(() => typeof l.min == "number" ? l.min.toString() : l.min), w = E(() => typeof l.max == "number" ? l.max.toString() : l.max), $ = E(() => typeof l.min == "number" ? l.min : parseFloat(l.min)), O = E(() => typeof l.max == "number" ? l.max : parseFloat(l.max)), V = E(() => l.messageWhenValid.trim() !== "" ? l.messageWhenValid : ""), G = S(!0), ce = S([]), C = E(() => {
       var T, N;
       return [
         ...((T = ce.value) == null ? void 0 : T.filter((Z) => ((Z == null ? void 0 : Z.length) ?? 0) > 0)) ?? [],
@@ -1497,7 +1497,7 @@ const Tt = { class: "cl-flex cl-justify-between" }, Ct = { class: "cl-w-full" },
       const N = _e(T, l.inputType);
       l.validateOn === "change" && await _(N), t("change", T, N);
     }
-    return Oe(() => {
+    return Se(() => {
       l.validateImmediately && X(l.modelValue, !0);
     }), J(() => l.isRequired, () => X(l.modelValue, !0)), J(() => l.externalErrors, async () => {
       await _(f.value), t("update:model-value", f.value);
@@ -1522,8 +1522,8 @@ const Tt = { class: "cl-flex cl-justify-between" }, Ct = { class: "cl-w-full" },
                 [R, e.showLabel && e.label !== ""]
               ])
             ]),
-            e.isRequired && a(g) ? (i(), v("label", St, " * ")) : M("", !0),
-            e.isRequired && !a(g) ? (i(), v("label", Ot, x(e.requiredText), 1)) : M("", !0)
+            e.isRequired && a(g) ? (i(), v("label", Ot, " * ")) : M("", !0),
+            e.isRequired && !a(g) ? (i(), v("label", St, x(e.requiredText), 1)) : M("", !0)
           ]),
           e.inputType !== "range" && !a(Xe)(e.inputType) ? q((i(), v("input", be({
             key: 0,
@@ -1592,7 +1592,7 @@ const Tt = { class: "cl-flex cl-justify-between" }, Ct = { class: "cl-w-full" },
               value: a(f),
               "onUpdate:value": N[7] || (N[7] = (F) => ye(f) ? f.value = F : null),
               min: a($),
-              max: a(S),
+              max: a(O),
               step: e.step,
               disabled: e.disabled,
               "show-numeric-input": !1,
@@ -1649,7 +1649,7 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
     size: { default: "medium" }
   },
   setup(e) {
-    const n = e, t = O(!1);
+    const n = e, t = S(!1);
     function l() {
       t.value = !0, document.addEventListener("keydown", r);
     }
@@ -1668,7 +1668,7 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
             default: z(() => [
               q(u("div", Dt, [
                 u("div", be(s.$attrs, {
-                  class: ["cl-bg-white cl-flex cl-flex-wrap cl-mx-0 cl-my-auto cl-overflow-y-auto cl-overscroll-y-none cl-relative cl-rounded-lg cl-shadow-lg", {
+                  class: ["cl-bg-white cl-flex cl-flex-wrap cl-max-h-[calc(100vh-8rem)] cl-mx-0 cl-my-auto cl-overflow-y-auto cl-overscroll-y-none cl-relative cl-rounded-lg cl-shadow-lg", {
                     "lg:cl-w-2/12 cl-w-10/12": e.size === "x-small",
                     "cl-w-6/12": e.size === "small",
                     "cl-w-8/12": e.size === "medium",
@@ -1681,7 +1681,7 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
                       "cl-text-black hover:cl-text-grey-7": e.headerColour === "white"
                     }]),
                     tabindex: 0,
-                    onKeypress: Se(o, ["enter"]),
+                    onKeypress: Oe(o, ["enter"]),
                     onClick: o
                   }, [
                     y(c, { icon: "ph:x" })
@@ -1774,7 +1774,7 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
     }), o = E(() => {
       var b;
       return ((b = t.option) == null ? void 0 : b.parentName) ?? "";
-    }), r = O(!1);
+    }), r = S(!1);
     function s() {
       var b;
       t.isCreateNewOption === !0 ? n("create-object") : n("select-object", (b = t.option) == null ? void 0 : b.id);
@@ -1840,7 +1840,7 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
     "hide-dropdown": null
   },
   setup(e, { emit: n }) {
-    const t = e, { t: l } = ae(), o = O(""), r = O(!1), s = O(-1), g = E(() => r.value ? -1 : 0), c = O();
+    const t = e, { t: l } = ae(), o = S(""), r = S(!1), s = S(-1), g = E(() => r.value ? -1 : 0), c = S();
     function b(C) {
       (C === void 0 || (C == null ? void 0 : C.code.startsWith("Arrow")) === !1 && (C == null ? void 0 : C.code.startsWith("Control")) === !1 && (C == null ? void 0 : C.code.startsWith("Shift")) === !1 && (C == null ? void 0 : C.code.startsWith("Tab")) === !1 && (C == null ? void 0 : C.code) !== "Enter") && (n("search", o.value), s.value = -2);
     }
@@ -1854,10 +1854,10 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
       n("hide-dropdown");
     }
     function p(C) {
-      s.value < t.results.length - 1 ? (s.value === -2 && o.value === "" && s.value++, s.value++) : s.value = C, S();
+      s.value < t.results.length - 1 ? (s.value === -2 && o.value === "" && s.value++, s.value++) : s.value = C, O();
     }
     function d(C) {
-      s.value > C ? s.value-- : s.value = t.results.length - 1, S();
+      s.value > C ? s.value-- : s.value = t.results.length - 1, O();
     }
     function w() {
       s.value >= 0 && t.results !== void 0 ? h(t.results[s.value].id) : s.value === -1 && m();
@@ -1871,7 +1871,7 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
         X >= 0 && (H[X].focus(), f());
       }
     }
-    function S() {
+    function O() {
       var C;
       t.results && t.results.length > 1 && ((C = c.value) == null || C.scrollTo(0, (s.value + 1) * 34 - 34 * 2));
     }
@@ -1888,7 +1888,7 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
         return (H = (C = c.value) == null ? void 0 : C.querySelector("input")) == null ? void 0 : H.focus();
       }));
     }
-    return J(() => t.results, () => V()), J(() => t.errorMessage, () => V()), J(() => t.isVisible, () => ce()), Oe(() => {
+    return J(() => t.results, () => V()), J(() => t.errorMessage, () => V()), J(() => t.isVisible, () => ce()), Se(() => {
       var C;
       return (C = c.value) == null ? void 0 : C.addEventListener("keydown", $);
     }), Ue(() => {
@@ -1902,10 +1902,10 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
         ref: c,
         class: "cl-bg-white cl-border cl-border-collapse cl-border-grey-0 cl-h-52 cl-overflow-y-auto cl-overscroll-y-none cl-p-2 cl-rounded cl-text-sm",
         onKeydown: [
-          H[2] || (H[2] = Se(Y((re) => d(a(g)), ["prevent", "stop"]), ["up"])),
-          H[3] || (H[3] = Se(Y((re) => p(a(g)), ["prevent", "stop"]), ["down"]))
+          H[2] || (H[2] = Oe(Y((re) => d(a(g)), ["prevent", "stop"]), ["up"])),
+          H[3] || (H[3] = Oe(Y((re) => p(a(g)), ["prevent", "stop"]), ["down"]))
         ],
-        onKeyup: Se(Y(w, ["prevent", "stop"]), ["enter"])
+        onKeyup: Oe(Y(w, ["prevent", "stop"]), ["enter"])
       }, [
         u("div", Vt, [
           y(fe, {
@@ -1990,10 +1990,10 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
     "update:current-object": null
   },
   setup(e, { expose: n, emit: t }) {
-    const l = e, { t: o } = ae(), r = O(!1), s = E({
+    const l = e, { t: o } = ae(), r = S(!1), s = E({
       get: () => l.currentObject,
       set: (A) => t("update:current-object", A)
-    }), g = O(null), c = O(null), b = E(() => re()), h = O(""), m = O(""), f = O(), p = O(!0);
+    }), g = S(null), c = S(null), b = E(() => re()), h = S(""), m = S(""), f = S(), p = S(!0);
     function d(A) {
       l.disabled || (typeof A < "u" ? r.value = A : r.value = !r.value);
     }
@@ -2003,7 +2003,7 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
     function $(A) {
       m.value = A, t("search-parent", A);
     }
-    function S() {
+    function O() {
       s.value = null, d(!1);
     }
     function V(A) {
@@ -2149,7 +2149,7 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
               "is-visible": r.value,
               onCreateObject: k,
               onSelectObject: V,
-              onClearObject: S,
+              onClearObject: O,
               onSearch: w,
               onHideDropdown: P[4] || (P[4] = (L) => d(!1))
             }, null, 8, ["can-create-new-object", "can-clear-selected-object", "loading", "results", "object-type", "object-parent-type", "error-message", "current-object-name", "is-visible", "onCreateObject"]), [
@@ -2189,7 +2189,7 @@ const fe = /* @__PURE__ */ ve(Nt, [["__scopeId", "data-v-a655011e"]]), Dt = { cl
               e.objectParentType ? (i(), B(ge, {
                 key: 0,
                 "current-object": c.value,
-                "onUpdate:current-object": P[5] || (P[5] = (k) => c.value = k),
+                "onUpdate:currentObject": P[5] || (P[5] = (k) => c.value = k),
                 class: "cl-mt-3",
                 results: e.parentResults,
                 loading: e.loading,
@@ -2356,7 +2356,7 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
   },
   emits: ["edit", "focus", "undo"],
   setup(e, { emit: n }) {
-    const t = e, l = O(me(t.data)), o = E(() => t.column.field !== void 0 && l.value[t.column.field] !== t.data[t.column.field]);
+    const t = e, l = S(me(t.data)), o = E(() => t.column.field !== void 0 && l.value[t.column.field] !== t.data[t.column.field]);
     return bl(() => l.value = me(t.data)), J(l, (r) => {
       const s = t.column.field ?? "";
       s !== "" && (r[s] !== t.data[s] ? n("edit", r[s]) : n("undo"));
@@ -2438,7 +2438,7 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
   },
   emits: ["row-select", "row-edit", "clear-filters"],
   setup(e, { emit: n }) {
-    const t = e, { t: l } = ae(), o = O({
+    const t = e, { t: l } = ae(), o = S({
       index: -1,
       record: {}
     });
@@ -2459,7 +2459,7 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
         };
       }
     }
-    const b = O({});
+    const b = S({});
     J(() => t.data, () => {
       var m, f;
       return b.value = Object.fromEntries(((f = (m = t.data) == null ? void 0 : m.results) == null ? void 0 : f.map((p, d) => [
@@ -2504,10 +2504,10 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
           },
           onCellUndo: c
         }, Ve({ _: 2 }, [
-          te(m.$slots, ($, S) => ({
-            name: S,
+          te(m.$slots, ($, O) => ({
+            name: O,
             fn: z((V) => [
-              j(m.$slots, S, oe(ie(V)))
+              j(m.$slots, O, oe(ie(V)))
             ])
           }))
         ]), 1032, ["data", "columns", "edit-mode", "class", "onClick", "onCellFocus", "onCellEdit"]))), 128)) : e.loading ? M("", !0) : (i(), v("tr", yn, [
@@ -2534,10 +2534,10 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
       ]);
     };
   }
-}), Sn = {
+}), On = {
   key: 0,
   class: "cl-flex cl-flex-wrap cl-justify-end cl-mt-2 cl-w-full"
-}, On = { class: "cl-bg-off-white cl-border cl-border-grey-1 cl-flex cl-items-center cl-mb-2 cl-px-3 cl-rounded cl-shadow-md cl-text-sm cl-w-full lg:cl-w-auto" }, En = { class: "cl-text-grey-3 cl-w-max" }, jn = { class: "cl-bg-off-white cl-border cl-border-grey-1 cl-flex cl-flex-wrap cl-items-center cl-mb-2 cl-px-3 cl-py-2 cl-rounded cl-shadow-md cl-text-sm cl-w-full lg:cl-ml-2 lg:cl-w-auto mb:cl-flex-nowrap" }, An = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" }, Mn = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" }, In = { class: "cl-text-grey-3 cl-w-full lg:cl-mr-2 lg:cl-w-auto" }, Nn = { class: "cl-flex cl-flex-wrap cl-text-sm mb:cl-flex-nowrap" }, Dn = { class: "cl-pr-2" }, qn = ["onClick"], Rn = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" }, Pn = { class: "cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" }, Un = ["onClick"], Bn = { class: "cl-mb-2 cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" }, zn = { class: "cl-block cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-inline-block lg:cl-mb-0 lg:cl-mr-1 lg:cl-w-auto" }, Ln = { class: "cl-block lg:cl-inline-block" }, Fn = /* @__PURE__ */ D({
+}, Sn = { class: "cl-bg-off-white cl-border cl-border-grey-1 cl-flex cl-items-center cl-mb-2 cl-px-3 cl-rounded cl-shadow-md cl-text-sm cl-w-full lg:cl-w-auto" }, En = { class: "cl-text-grey-3 cl-w-max" }, jn = { class: "cl-bg-off-white cl-border cl-border-grey-1 cl-flex cl-flex-wrap cl-items-center cl-mb-2 cl-px-3 cl-py-2 cl-rounded cl-shadow-md cl-text-sm cl-w-full lg:cl-ml-2 lg:cl-w-auto mb:cl-flex-nowrap" }, An = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" }, Mn = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" }, In = { class: "cl-text-grey-3 cl-w-full lg:cl-mr-2 lg:cl-w-auto" }, Nn = { class: "cl-flex cl-flex-wrap cl-text-sm mb:cl-flex-nowrap" }, Dn = { class: "cl-pr-2" }, qn = ["onClick"], Rn = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" }, Pn = { class: "cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" }, Un = ["onClick"], Bn = { class: "cl-mb-2 cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" }, zn = { class: "cl-block cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-inline-block lg:cl-mb-0 lg:cl-mr-1 lg:cl-w-auto" }, Ln = { class: "cl-block lg:cl-inline-block" }, Fn = /* @__PURE__ */ D({
   __name: "cl-ui-grid-footer",
   props: {
     request: null,
@@ -2582,8 +2582,8 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
     return (f, p) => {
       var w, $;
       const d = K("icon");
-      return ($ = (w = e.data) == null ? void 0 : w.results) != null && $.length && e.request ? (i(), v("div", Sn, [
-        u("div", On, [
+      return ($ = (w = e.data) == null ? void 0 : w.results) != null && $.length && e.request ? (i(), v("div", On, [
+        u("div", Sn, [
           u("span", En, x(a(o)("grid.jumpToPage")), 1),
           y(fe, {
             "model-value": e.request.pageNumber,
@@ -2593,7 +2593,7 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
             "show-label": !1,
             min: "1",
             max: a(r),
-            onInput: p[0] || (p[0] = (S) => a(m)(S.target))
+            onInput: p[0] || (p[0] = (O) => a(m)(O.target))
           }, null, 8, ["model-value", "max"])
         ]),
         u("div", jn, [
@@ -2605,7 +2605,7 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
               u("li", Dn, x(a(l)(e.request.pageNumber, a(ne).INTEGER)) + " / " + x(a(l)(a(r), a(ne).INTEGER)), 1),
               q(u("li", {
                 class: "cl-cursor-pointer cl-mr-1 cl-mt-1 lg:cl-mr-2",
-                onClick: p[1] || (p[1] = (S) => g(1))
+                onClick: p[1] || (p[1] = (O) => g(1))
               }, [
                 y(d, {
                   icon: "ph:caret-double-left",
@@ -2616,7 +2616,7 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
               ]),
               q(u("li", {
                 class: "cl-cursor-pointer cl-mt-1 lg:cl-mr-2 mr-1",
-                onClick: p[2] || (p[2] = (S) => g(e.request.pageNumber - 1))
+                onClick: p[2] || (p[2] = (O) => g(e.request.pageNumber - 1))
               }, [
                 y(d, {
                   icon: "ph:caret-left",
@@ -2625,17 +2625,17 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
               ], 512), [
                 [R, e.request.pageNumber > 1]
               ]),
-              (i(!0), v(U, null, te(a(s), (S, V) => (i(), v("li", {
+              (i(!0), v(U, null, te(a(s), (O, V) => (i(), v("li", {
                 key: V,
                 class: I(["cl-cursor-pointer cl-mr-1 lg:cl-mr-2", {
-                  "cl-text-black cl-font-bold": e.request.pageNumber === S,
-                  "cl-text-grey-6": e.request.pageNumber !== S
+                  "cl-text-black cl-font-bold": e.request.pageNumber === O,
+                  "cl-text-grey-6": e.request.pageNumber !== O
                 }]),
-                onClick: (G) => g(S)
-              }, x(a(l)(S, a(ne).INTEGER)), 11, qn))), 128)),
+                onClick: (G) => g(O)
+              }, x(a(l)(O, a(ne).INTEGER)), 11, qn))), 128)),
               q(u("li", {
                 class: "cl-cursor-pointer cl-mr-1 cl-mt-1 lg:cl-mr-2",
-                onClick: p[3] || (p[3] = (S) => g(e.request.pageNumber + 1))
+                onClick: p[3] || (p[3] = (O) => g(e.request.pageNumber + 1))
               }, [
                 y(d, {
                   icon: "ph:caret-right",
@@ -2646,7 +2646,7 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
               ]),
               q(u("li", {
                 class: "cl-cursor-pointer cl-mr-1 cl-mt-1 lg:cl-mr-2",
-                onClick: p[4] || (p[4] = (S) => g(a(r)))
+                onClick: p[4] || (p[4] = (O) => g(a(r)))
               }, [
                 y(d, {
                   icon: "ph:caret-double-right",
@@ -2659,14 +2659,14 @@ const rn = { class: "cl-mb-2 cl-text-sm lg:cl-hidden" }, un = { class: "cl-gap-1
           ]),
           u("ul", Rn, [
             u("li", Pn, x(a(o)("grid.pageSize")), 1),
-            (i(), v(U, null, te(b, (S, V) => u("li", {
+            (i(), v(U, null, te(b, (O, V) => u("li", {
               key: V,
               class: I(["cl-cursor-pointer cl-mr-1 lg:cl-mr-2", {
-                "cl-text-black cl-font-bold": e.request.pageSize === S,
-                "cl-text-grey-6": e.request.pageSize !== S
+                "cl-text-black cl-font-bold": e.request.pageSize === O,
+                "cl-text-grey-6": e.request.pageSize !== O
               }]),
-              onClick: (G) => h(S)
-            }, x(a(l)(S, a(ne).INTEGER)), 11, Un)), 64))
+              onClick: (G) => h(O)
+            }, x(a(l)(O, a(ne).INTEGER)), 11, Un)), 64))
           ]),
           u("ul", Bn, [
             u("li", zn, x(a(o)("grid.totalRecords")), 1),
@@ -2927,10 +2927,10 @@ const Yn = {
     }), c = E(() => g.value !== "" ? new Date(g.value) : null), b = E(() => Intl.NumberFormat(l.value).format(1.1).replace(/[0-9]+/g, "")), h = E(() => He(t.column));
     function m(d, w) {
       var G;
-      let $, S = !1;
+      let $, O = !1;
       const V = ((d == null ? void 0 : d.value) ?? w).trim();
       if (s.value)
-        S = ((G = s.value) == null ? void 0 : G.filterValue) === V, $ = me(s.value), $.filterValue = V;
+        O = ((G = s.value) == null ? void 0 : G.filterValue) === V, $ = me(s.value), $.filterValue = V;
       else if (V !== "" && typeof t.column.field < "u") {
         const ce = r();
         $ = {
@@ -2941,7 +2941,7 @@ const Yn = {
         };
       } else
         return;
-      S === !1 && (s.value = $);
+      O === !1 && (s.value = $);
     }
     function f(d) {
       let w = "";
@@ -2980,7 +2980,7 @@ const Yn = {
         max: "2999-12-31T23:59",
         label: e.column.caption,
         "show-label": !1,
-        "input-type": e.column.type,
+        "input-type": e.column.type === "slot" ? e.column.slotType : e.column.type,
         "onUpdate:modelValue": w[2] || (w[2] = ($) => p($))
       }, null, 8, ["model-value", "label", "input-type"])) : e.column.type === "number" || e.column.slotType === "number" ? (i(), B(fe, {
         key: 2,
@@ -2988,13 +2988,13 @@ const Yn = {
         class: "!cl-h-[2rem] !cl-text-xs cl-border-none cl-mb-0 cl-w-full lg:!cl-h-[2.5rem] lg:!cl-text-base",
         "input-type": "number",
         "show-arrows": !1,
-        onInput: w[3] || (w[3] = ($, S) => f(S))
-      }, null, 8, ["model-value"])) : e.column.type !== "slot" || e.column.slotType === "string" ? (i(), B(fe, {
+        onInput: w[3] || (w[3] = ($, O) => f(O))
+      }, null, 8, ["model-value"])) : e.column.type === "string" || e.column.slotType === "string" ? (i(), B(fe, {
         key: 3,
         "model-value": a(g),
         class: "!cl-h-[2rem] !cl-text-xs cl-border-none cl-mb-0 cl-w-full lg:!cl-h-[2.5rem] lg:!cl-text-base",
         "input-type": "text",
-        onInput: w[4] || (w[4] = ($, S) => m(null, S))
+        onInput: w[4] || (w[4] = ($, O) => m(null, O))
       }, null, 8, ["model-value"])) : M("", !0)
     ])) : M("", !0);
   }
@@ -3110,7 +3110,7 @@ const Yn = {
       ]);
     };
   }
-}), yo = { class: "cl-fixed cl-flex cl-h-full cl-justify-end cl-right-0 cl-shadow-lg cl-top-0 cl-z-50" }, wo = { class: "cl-bg-secondary-default cl-h-full cl-overflow-y-auto cl-overscroll-y-none cl-px-10 cl-py-20 cl-relative cl-text-grey-2 cl-w-80" }, xo = { class: "cl-mb-4 cl-text-2xl cl-text-off-white" }, $o = { class: "cl-border-grey-3 cl-border-t cl-flex cl-flex-wrap cl-text-sm cl-w-full" }, ko = { class: "cl-border-b cl-border-grey-2 cl-flex cl-py-2 cl-text-sm cl-w-full" }, To = { class: "cl-flex-1 cl-py-2" }, Co = { class: "cl-py-2 cl-w-1/4" }, So = { class: "cl-py-2 cl-w-1/5" }, Oo = { class: "cl-flex-1 cl-py-2" }, Eo = { class: "cl-py-2 cl-w-1/4" }, jo = { class: "cl-py-2 cl-text-off-white cl-w-1/5" }, Ao = { key: 1 }, Mo = {
+}), yo = { class: "cl-fixed cl-flex cl-h-full cl-justify-end cl-right-0 cl-shadow-lg cl-top-0 cl-z-50" }, wo = { class: "cl-bg-secondary-default cl-h-full cl-overflow-y-auto cl-overscroll-y-none cl-px-10 cl-py-20 cl-relative cl-text-grey-2 cl-w-80" }, xo = { class: "cl-mb-4 cl-text-2xl cl-text-off-white" }, $o = { class: "cl-border-grey-3 cl-border-t cl-flex cl-flex-wrap cl-text-sm cl-w-full" }, ko = { class: "cl-border-b cl-border-grey-2 cl-flex cl-py-2 cl-text-sm cl-w-full" }, To = { class: "cl-flex-1 cl-py-2" }, Co = { class: "cl-py-2 cl-w-1/4" }, Oo = { class: "cl-py-2 cl-w-1/5" }, So = { class: "cl-flex-1 cl-py-2" }, Eo = { class: "cl-py-2 cl-w-1/4" }, jo = { class: "cl-py-2 cl-text-off-white cl-w-1/5" }, Ao = { key: 1 }, Mo = {
   inheritAttrs: !1
 }, Io = /* @__PURE__ */ D({
   ...Mo,
@@ -3120,7 +3120,7 @@ const Yn = {
   },
   emits: ["update:columns"],
   setup(e, { emit: n }) {
-    const t = e, { t: l } = ae(), o = O(!1);
+    const t = e, { t: l } = ae(), o = S(!1);
     function r(c, b, h) {
       h < c.length && h >= 0 && c.splice(h, 0, c.splice(b, 1)[0]);
     }
@@ -3161,13 +3161,13 @@ const Yn = {
                     u("li", ko, [
                       u("strong", To, x(a(l)("grid.column")), 1),
                       u("strong", Co, x(a(l)("grid.visible")), 1),
-                      u("strong", So, x(a(l)("grid.order")), 1)
+                      u("strong", Oo, x(a(l)("grid.order")), 1)
                     ]),
                     (i(!0), v(U, null, te(e.columns, (m, f) => (i(), v("li", {
                       key: f,
                       class: "cl-border-b cl-border-grey-2 cl-flex cl-py-2 cl-text-sm cl-w-full"
                     }, [
-                      u("div", Oo, x(m.caption), 1),
+                      u("div", So, x(m.caption), 1),
                       u("div", Eo, [
                         y(fe, {
                           "model-value": m.visible === void 0 || m.visible === !0,
@@ -3218,7 +3218,7 @@ const Yn = {
     const t = e, l = E({
       get: () => t.columns,
       set: (d) => n("update:columns", d)
-    }), o = E(() => l.value.filter((d) => d.visible ?? !0)), r = O({});
+    }), o = E(() => l.value.filter((d) => d.visible ?? !0)), r = S({});
     function s() {
       const d = {};
       window.innerWidth >= 1024 && l.value.forEach((w) => {
@@ -3229,7 +3229,7 @@ const Yn = {
     function g(d) {
       return r.value[d] ?? "";
     }
-    Oe(() => {
+    Se(() => {
       window.addEventListener("resize", s), s();
     }), Ue(() => window.removeEventListener("resize", s));
     const c = E({
@@ -3245,7 +3245,7 @@ const Yn = {
       deep: !0,
       immediate: !0
     });
-    const m = E(() => t.data), f = O(!1), p = O(!1);
+    const m = E(() => t.data), f = S(!1), p = S(!1);
     return J(f, () => {
       f.value ? n("edit-start") : n("edit-end");
     }), (d, w) => (i(), v("div", No, [
@@ -3261,9 +3261,9 @@ const Yn = {
       }),
       y(mn, {
         "edit-mode": f.value,
-        "onUpdate:edit-mode": w[1] || (w[1] = ($) => f.value = $),
+        "onUpdate:editMode": w[1] || (w[1] = ($) => f.value = $),
         "filter-panel-open": p.value,
-        "onUpdate:filter-panel-open": w[2] || (w[2] = ($) => p.value = $),
+        "onUpdate:filterPanelOpen": w[2] || (w[2] = ($) => p.value = $),
         columns: e.columns,
         options: e.options,
         onClearFilters: b
@@ -3283,8 +3283,8 @@ const Yn = {
           }])
         }, [
           u("colgroup", Ro, [
-            (i(!0), v(U, null, te(a(o), ($, S) => (i(), v("col", {
-              key: S,
+            (i(!0), v(U, null, te(a(o), ($, O) => (i(), v("col", {
+              key: O,
               style: nl(g($.name)),
               span: 1
             }, null, 4))), 128))
@@ -3293,7 +3293,7 @@ const Yn = {
             request: a(c),
             "onUpdate:request": w[3] || (w[3] = ($) => ye(c) ? c.value = $ : null),
             "filter-panel-open": p.value,
-            "onUpdate:filter-panel-open": w[4] || (w[4] = ($) => p.value = $),
+            "onUpdate:filterPanelOpen": w[4] || (w[4] = ($) => p.value = $),
             columns: a(o),
             options: e.options
           }, null, 8, ["request", "filter-panel-open", "columns", "options"]),
@@ -3308,10 +3308,10 @@ const Yn = {
             onRowEdit: w[5] || (w[5] = ($) => d.$emit("row-edit", $)),
             onRowSelect: w[6] || (w[6] = ($) => d.$emit("row-select", $))
           }, Ve({ _: 2 }, [
-            te(d.$slots, ($, S) => ({
-              name: S,
+            te(d.$slots, ($, O) => ({
+              name: O,
               fn: z((V) => [
-                j(d.$slots, S, oe(ie(V)))
+                j(d.$slots, O, oe(ie(V)))
               ])
             }))
           ]), 1032, ["columns", "request", "data", "loading", "edit-mode", "selection-enabled"])
@@ -3355,7 +3355,7 @@ const Yn = {
   },
   emits: ["update:is-open"],
   setup(e, { emit: n }) {
-    const t = e, l = O();
+    const t = e, l = S();
     cl(l, o);
     function o() {
       t.isOpen === !0 && n("update:is-open", !1);
@@ -3454,7 +3454,7 @@ const Yo = {
   },
   emits: ["language-select"],
   setup(e, { emit: n }) {
-    const t = e, { locale: l } = ae(), o = O(!1), r = E(() => t.supportedLanguages.find((c) => c.localeCode === l.value) ?? t.defaultLangauge), s = E(() => t.supportedLanguages.filter((c) => Le(c)).sort((c, b) => c.nativeName > b.nativeName ? 1 : b.nativeName > c.nativeName ? -1 : 0));
+    const t = e, { locale: l } = ae(), o = S(!1), r = E(() => t.supportedLanguages.find((c) => c.localeCode === l.value) ?? t.defaultLangauge), s = E(() => t.supportedLanguages.filter((c) => Le(c)).sort((c, b) => c.nativeName > b.nativeName ? 1 : b.nativeName > c.nativeName ? -1 : 0));
     function g() {
       t.disabled || (o.value = !o.value);
     }
@@ -3509,7 +3509,7 @@ const Yo = {
     "update:errors": null
   },
   setup(e, { emit: n }) {
-    const { t } = ae(), l = O(""), o = O(""), r = O("password"), s = O();
+    const { t } = ae(), l = S(""), o = S(""), r = S("password"), s = S();
     function g() {
       const m = {
         username: l.value,
@@ -3666,14 +3666,14 @@ const Yo = {
   "white"
 ], ba = {
   id: "group-container",
-  class: "cl-bg-blue-default cl-h-full cl-overflow-y-auto cl-overscroll-y-none cl-w-20 cl-z-30"
+  class: "cl-bg-blue-default cl-h-full cl-overflow-y-auto cl-overscroll-y-none cl-pb-20 cl-w-20 cl-z-30 xl:cl-pb-0"
 }, va = {
   key: 0,
   class: "cl-h-0 cl-w-0"
 }, ha = { class: "cl-relative cl-w-full" }, pa = /* @__PURE__ */ D({
   __name: "cl-ui-navigation",
   setup(e) {
-    const n = O([]), t = E(() => n.value.filter((f) => f.open === !0).length > 0);
+    const n = S([]), t = E(() => n.value.filter((f) => f.open === !0).length > 0);
     function l(f) {
       let p = n.value.find((d) => d.id === f);
       return p || (p = {
@@ -3697,11 +3697,11 @@ const Yo = {
         deep: !0
       }
     );
-    const s = O(!1), g = O(!1), { start: c } = ol(() => g.value = !1, 100);
+    const s = S(!1), g = S(!1), { start: c } = ol(() => g.value = !1, 100);
     function b() {
       s.value = !s.value, g.value = !0, c();
     }
-    const h = O();
+    const h = S();
     function m() {
       s.value === !1 && t.value === !0 && n.value.forEach((f) => {
         f.open = !1;
@@ -3721,7 +3721,7 @@ const Yo = {
         y($e, { name: "slide-right" }, {
           default: z(() => [
             q(u("div", {
-              class: I(["cl-bg-grey-0 cl-border-grey-2 cl-border-r cl-duration-75 cl-h-full cl-min-w-[260px] cl-overflow-y-auto cl-overscroll-y-none cl-p-8 cl-top-0 cl-transition-shadow cl-w-[260px] cl-z-20", {
+              class: I(["cl-bg-grey-0 cl-border-grey-2 cl-border-r cl-duration-75 cl-h-full cl-min-w-[260px] cl-overflow-y-auto cl-overscroll-y-none cl-p-8 cl-pb-24 cl-top-0 cl-transition-shadow cl-w-[260px] cl-z-20 xl:cl-pb-0", {
                 "cl-relative": s.value,
                 "cl-absolute cl-left-20 cl-shadow-lg": !s.value
               }])
@@ -3751,7 +3751,7 @@ const Yo = {
     };
   }
 });
-const ya = /* @__PURE__ */ ve(pa, [["__scopeId", "data-v-20b0e94d"]]), wa = /* @__PURE__ */ D({
+const ya = /* @__PURE__ */ ve(pa, [["__scopeId", "data-v-478ca96d"]]), wa = /* @__PURE__ */ D({
   __name: "cl-ui-navigation-icon",
   props: {
     iconValue: null,
@@ -3791,16 +3791,16 @@ const ya = /* @__PURE__ */ ve(pa, [["__scopeId", "data-v-20b0e94d"]]), wa = /* @
       ])
     ], 64)) : M("", !0);
   }
-}), Ta = {}, Ca = { class: "cl-w-full" }, Sa = {
+}), Ta = {}, Ca = { class: "cl-w-full" }, Oa = {
   key: 0,
   class: "cl-font-bold cl-mb-4 cl-select-none"
-}, Oa = { class: "cl-flex cl-flex-wrap cl-space-y-2" };
+}, Sa = { class: "cl-flex cl-flex-wrap cl-space-y-2" };
 function Ea(e, n) {
   return i(), v("div", Ca, [
-    e.$slots.title ? (i(), v("div", Sa, [
+    e.$slots.title ? (i(), v("div", Oa, [
       j(e.$slots, "title")
     ])) : M("", !0),
-    u("span", Oa, [
+    u("span", Sa, [
       j(e.$slots, "default")
     ])
   ]);
@@ -3819,7 +3819,7 @@ const Na = /* @__PURE__ */ ve(Aa, [["render", Ia]]), Da = { class: "cl-w-full" }
     colour: { default: "default" }
   },
   setup(e) {
-    const n = e, t = O(), l = O(!1), o = O(!1);
+    const n = e, t = S(), l = S(!1), o = S(!1);
     function r(b) {
       return b === n.currentTab;
     }
@@ -3840,7 +3840,7 @@ const Na = /* @__PURE__ */ ve(Aa, [["render", Ia]]), Da = { class: "cl-w-full" }
         b === "left" && (m = -h), t.value.scroll(t.value.scrollLeft + m, 0);
       }
     }
-    return Oe(() => g()), Ue(() => window.removeEventListener("resize", s)), (b, h) => {
+    return Se(() => g()), Ue(() => window.removeEventListener("resize", s)), (b, h) => {
       const m = K("icon");
       return i(), v("div", Da, [
         u("div", null, [
@@ -3897,7 +3897,7 @@ const Na = /* @__PURE__ */ ve(Aa, [["render", Ia]]), Da = { class: "cl-w-full" }
     "update:currentTab": null
   },
   setup(e, { emit: n }) {
-    const t = e, l = O(), o = O(), r = E(() => t.id === t.currentTab);
+    const t = e, l = S(), o = S(), r = E(() => t.id === t.currentTab);
     function s() {
       t.disabled || (l.value = !1, o.value = !1, n("update:currentTab", t.id));
     }
@@ -3927,7 +3927,7 @@ const Na = /* @__PURE__ */ ve(Aa, [["render", Ia]]), Da = { class: "cl-w-full" }
       onMouseout: c[1] || (c[1] = (b) => o.value = !1),
       onFocusin: c[2] || (c[2] = (b) => l.value = !0),
       onFocusout: c[3] || (c[3] = (b) => l.value = !1),
-      onKeyup: Se(Y(s, ["self"]), ["enter"])
+      onKeyup: Oe(Y(s, ["self"]), ["enter"])
     }, [
       j(g.$slots, "default")
     ], 42, Ra));
@@ -3953,7 +3953,7 @@ const za = /* @__PURE__ */ ve(Ua, [["render", Ba]]), La = [
   cardSizes: Hl,
   clUiAccordion: xl,
   clUiAccordionHeader: Al,
-  clUiAccordionItem: Sl,
+  clUiAccordionItem: Ol,
   clUiApp: ql,
   clUiButton: we,
   clUiCard: Gl,
@@ -4010,7 +4010,7 @@ export {
   Hl as cardSizes,
   xl as clUiAccordion,
   Al as clUiAccordionHeader,
-  Sl as clUiAccordionItem,
+  Ol as clUiAccordionItem,
   ql as clUiApp,
   we as clUiButton,
   Gl as clUiCard,