@wikicasa-dev/components 2.6.4 → 2.6.5-alpha.0

package/dist/UIKit/AccessibleSelect.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as H, mergeModels as y, useModel as C, useId as F, useTemplateRef as z, computed as p, watch as I, createElementBlock as a, openBlock as l, createVNode as $, createCommentVNode as u, normalizeClass as n, withCtx as x, Fragment as g, renderList as N, withModifiers as f, createElementVNode as d, renderSlot as P, createBlock as A, unref as M } from "vue";
+import { defineComponent as H, useModel as y, useId as F, useTemplateRef as z, computed as C, watch as I, openBlock as l, createElementBlock as a, createVNode as p, normalizeClass as n, withCtx as $, Fragment as x, renderList as N, withModifiers as f, createElementVNode as u, createCommentVNode as d, renderSlot as P, createBlock as A, unref as g, mergeModels as M } from "vue";
 import { WarningIconRounded as E, ArrowIcon as R } from "@wikicasa-dev/svg-icons";
 import S from "./BaseDropDown.vue.js";
 import '../assets/BaseDropDown.css';/* empty css                  */
 const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-items-center" }, K = ["id", "innerHTML"], j = ["onClick"], U = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby", "onClick", "onKeydown"], W = ["innerHTML"], D = ["innerHTML"], G = ["id", "aria-selected", "onClick", "onMouseover"], J = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, O = ["name", "checked", "onInput"], Q = ["innerHTML"], X = ["id", "arial-live", "innerHTML"], Y = ["id", "arial-live", "innerHTML"], te = /* @__PURE__ */ H({
   __name: "AccessibleSelect",
-  props: /* @__PURE__ */ y({
+  props: /* @__PURE__ */ M({
     label: { default: "" },
     dropdownPosition: { default: "bottom" },
     namespace: {},
@@ -32,9 +32,9 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
     open: { type: Boolean, default: !1 },
     openModifiers: {}
   }),
-  emits: /* @__PURE__ */ y(["click", "update:dropdownState"], ["update:modelValue", "update:open"]),
+  emits: /* @__PURE__ */ M(["click", "update:dropdownState"], ["update:modelValue", "update:open"]),
   setup(e, { emit: V }) {
-    const T = V, k = C(e, "modelValue"), m = C(e, "open"), L = F(), B = z("dropdownRef"), t = p(() => e.namespace || L), w = p(() => !!k.value.label), h = (i) => {
+    const T = V, k = y(e, "modelValue"), m = y(e, "open"), L = F(), B = z("dropdownRef"), t = C(() => e.namespace || L), w = C(() => !!k.value.label), h = (i) => {
       m.value = !1, k.value = i;
     };
     return I(
@@ -43,7 +43,7 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
         i === void 0 || i === -1 || (h(e.options[i]), m.value = !1);
       }
     ), (i, v) => (l(), a("div", null, [
-      $(S, {
+      p(S, {
         ref: "dropdownRef",
         open: m.value,
         "onUpdate:open": v[1] || (v[1] = (r) => m.value = r),
@@ -63,8 +63,8 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
           "aria-multiselectable": !1
         }
       }, {
-        btn_slot: x(({ toggleDropdown: r, isOpen: b, activeIdx: o, setSelectedIdx: c }) => [
-          d("div", q, [
+        btn_slot: $(({ toggleDropdown: r, isOpen: b, activeIdx: o, setSelectedIdx: c }) => [
+          u("div", q, [
             e.label ? (l(), a("label", {
               key: 0,
               id: `${t.value}_label`,
@@ -75,15 +75,15 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
                 { "uikit-left-4": !i.$slots.lefticon && !w.value }
               ]]),
               innerHTML: e.label
-            }, null, 10, K)) : u("", !0),
+            }, null, 10, K)) : d("", !0),
             i.$slots.lefticon ? (l(), a("span", {
               key: 1,
               class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
               onClick: f((s) => r(), ["stop"])
             }, [
               P(i.$slots, "lefticon")
-            ], 8, j)) : u("", !0),
-            d("button", {
+            ], 8, j)) : d("", !0),
+            u("button", {
               id: `${t.value}_btn`,
               ref: "btnEl",
               type: "button",
@@ -105,21 +105,21 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
                 ["Enter", "Space"].includes(s.key) && (s.preventDefault(), s.stopPropagation(), c(o), r());
               }
             }, [
-              d("span", {
+              u("span", {
                 class: n(["uikit-pointer-events-none", [e.btnTextClasses, { "uikit-mt-1": e.withFieldset }]]),
                 innerHTML: k.value?.visibleLabel || k.value?.label
               }, null, 10, W),
-              d("span", {
+              u("span", {
                 class: n(["uikit-pointer-events-none uikit-inline-flex", [{ "uikit-mt-1": e.withFieldset }]])
               }, [
-                e.isValid == !1 ? (l(), A(M(E), {
+                e.isValid == !1 ? (l(), A(g(E), {
                   key: 0,
                   class: "uikit-mr-1",
                   width: 20,
                   height: 20,
                   "stroke-color": "#FA4F64"
-                })) : u("", !0),
-                $(M(R), {
+                })) : d("", !0),
+                p(g(R), {
                   class: n(["uikit-transition-transform motion-reduce:uikit-transition-none", [b ? "uikit-rotate-180" : "", e.arrowIcon?.classes]]),
                   width: e.arrowIcon?.width ?? 18,
                   height: e.arrowIcon?.height ?? 18,
@@ -139,7 +139,7 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
                 { "uikit-border-0 peer-focus:uikit-border-0": !e.border }
               ]])
             }, [
-              d("legend", {
+              u("legend", {
                 class: n([[e.legendClasses, { "uikit-m-0 uikit-w-0": !e.label }], "uikit-ml-2 uikit-h-3 uikit-px-0 uikit-text-sm"])
               }, [
                 e.label ? (l(), a("span", {
@@ -148,13 +148,13 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
                     k.value.label ? "uikit-invisible" : "uikit-hidden"
                   ]]),
                   innerHTML: e.label
-                }, null, 10, D)) : u("", !0)
+                }, null, 10, D)) : d("", !0)
               ], 2)
-            ], 2)) : u("", !0)
+            ], 2)) : d("", !0)
           ])
         ]),
-        default: x(({ activeIdx: r, setActiveIdx: b }) => [
-          (l(!0), a(g, null, N(e.options, (o, c) => (l(), a("li", {
+        default: $(({ activeIdx: r, setActiveIdx: b }) => [
+          (l(!0), a(x, null, N(e.options, (o, c) => (l(), a("li", {
             id: `${t.value}_element_${e.options[c].label}`,
             key: `${o.label}_${c}`,
             role: "option",
@@ -165,8 +165,8 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
             onBlur: v[0] || (v[0] = f(() => {
             }, ["stop"]))
           }, [
-            d("label", J, [
-              d("input", {
+            u("label", J, [
+              u("input", {
                 tabindex: "-1",
                 class: "uikit-m-0 uikit-appearance-none",
                 name: `${t.value}_radio`,
@@ -174,7 +174,7 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
                 checked: o.label === k.value.label,
                 onInput: f((s) => h(o), ["stop"])
               }, null, 40, O),
-              d("span", {
+              u("span", {
                 innerHTML: o.label
               }, null, 8, Q)
             ])
@@ -182,22 +182,22 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
         ]),
         _: 3
       }, 8, ["open", "class", "data-cy", "close-when-clicked-outside", "direction", "dropdown-classes"]),
-      e.feedback ? (l(), a(g, { key: 0 }, [
+      e.feedback ? (l(), a(x, { key: 0 }, [
         e.feedback.valid ? (l(), a("span", {
           key: 0,
           id: `${t.value}_valid_msg`,
           "arial-live": i.$attrs["aria-live"],
           class: "uikit-mt-1 uikit-inline-block uikit-text-12",
           innerHTML: e.isValid ? e.feedback.valid : ""
-        }, null, 8, X)) : u("", !0),
+        }, null, 8, X)) : d("", !0),
         e.feedback.invalid ? (l(), a("span", {
           key: 1,
           id: `${t.value}_invalid_msg`,
           "arial-live": i.$attrs["aria-live"],
           class: "uikit-mt-1 uikit-inline-block uikit-text-12 uikit-text-w-danger",
           innerHTML: e.isValid === !1 ? e.feedback.invalid : ""
-        }, null, 8, Y)) : u("", !0)
-      ], 64)) : u("", !0)
+        }, null, 8, Y)) : d("", !0)
+      ], 64)) : d("", !0)
     ]));
   }
 });

package/dist/UIKit/Accordion/AccordionContentPrimitive.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as r, createBlock as n, openBlock as a, unref as c, normalizeProps as p, guardReactiveProps as i, withCtx as s, renderSlot as l } from "vue";
+import { defineComponent as r, openBlock as n, createBlock as a, unref as c, normalizeProps as p, guardReactiveProps as i, withCtx as s, renderSlot as l } from "vue";
 import { AccordionContent as d } from "reka-ui";
 const _ = /* @__PURE__ */ r({
   __name: "AccordionContentPrimitive",
@@ -9,7 +9,7 @@ const _ = /* @__PURE__ */ r({
   },
   setup(o) {
     const e = o;
-    return (t, f) => (a(), n(c(d), p(i(e)), {
+    return (t, f) => (n(), a(c(d), p(i(e)), {
       default: s(() => [
         l(t.$slots, "default")
       ]),

package/dist/UIKit/Accordion/AccordionHeaderPrimitive.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as t, createBlock as a, openBlock as n, unref as c, normalizeProps as i, guardReactiveProps as p, withCtx as s, renderSlot as d } from "vue";
+import { defineComponent as t, openBlock as a, createBlock as n, unref as c, normalizeProps as i, guardReactiveProps as p, withCtx as s, renderSlot as d } from "vue";
 import { AccordionHeader as l } from "reka-ui";
 const _ = /* @__PURE__ */ t({
   __name: "AccordionHeaderPrimitive",
@@ -8,7 +8,7 @@ const _ = /* @__PURE__ */ t({
   },
   setup(e) {
     const o = e;
-    return (r, m) => (n(), a(c(l), i(p(o)), {
+    return (r, m) => (a(), n(c(l), i(p(o)), {
       default: s(() => [
         d(r.$slots, "default")
       ]),

package/dist/UIKit/Accordion/AccordionItemPrimitive.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as i, createBlock as p, openBlock as l, unref as s, normalizeProps as e, guardReactiveProps as o, withCtx as c, renderSlot as d } from "vue";
+import { defineComponent as i, openBlock as p, createBlock as l, unref as s, normalizeProps as e, guardReactiveProps as o, withCtx as c, renderSlot as d } from "vue";
 import { AccordionItem as m } from "reka-ui";
 const B = /* @__PURE__ */ i({
   __name: "AccordionItemPrimitive",
@@ -11,7 +11,7 @@ const B = /* @__PURE__ */ i({
   },
   setup(t) {
     const r = t;
-    return (n, u) => (l(), p(s(m), e(o(r)), {
+    return (n, u) => (p(), l(s(m), e(o(r)), {
       default: c((a) => [
         d(n.$slots, "default", e(o(a)))
       ]),

package/dist/UIKit/Accordion/AccordionTriggerPrimitive.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as o, createPropsRestProxy as a, createBlock as c, openBlock as n, unref as d, mergeProps as i, withCtx as s, renderSlot as p } from "vue";
+import { defineComponent as o, createPropsRestProxy as a, openBlock as c, createBlock as n, unref as d, mergeProps as i, withCtx as s, renderSlot as p } from "vue";
 import { AccordionTrigger as l } from "reka-ui";
 const y = /* @__PURE__ */ o({
   __name: "AccordionTriggerPrimitive",
@@ -9,7 +9,7 @@ const y = /* @__PURE__ */ o({
   },
   setup(e) {
     const r = a(e, ["dataCy"]);
-    return (t, m) => (n(), c(d(l), i(r, { "data-cy": e.dataCy }), {
+    return (t, m) => (c(), n(d(l), i(r, { "data-cy": e.dataCy }), {
       default: s(() => [
         p(t.$slots, "default")
       ]),

package/dist/UIKit/Accordion/BaseAccordion.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as d, mergeModels as n, createPropsRestProxy as s, useModel as p, createBlock as i, openBlock as m, unref as u, mergeProps as c, withCtx as y, renderSlot as f, normalizeProps as B, guardReactiveProps as b } from "vue";
+import { defineComponent as d, createPropsRestProxy as n, useModel as s, openBlock as p, createBlock as i, unref as m, mergeProps as u, withCtx as c, renderSlot as y, normalizeProps as f, guardReactiveProps as B, mergeModels as b } from "vue";
 import { AccordionRoot as V } from "reka-ui";
 const v = /* @__PURE__ */ d({
   __name: "BaseAccordion",
-  props: /* @__PURE__ */ n({
+  props: /* @__PURE__ */ b({
     collapsible: { type: Boolean },
     type: {},
     disabled: { type: Boolean },
@@ -17,16 +17,16 @@ const v = /* @__PURE__ */ d({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const a = s(e, ["collapsible", "type"]), l = p(e, "modelValue");
-    return (r, t) => (m(), i(u(V), c({
+    const a = n(e, ["collapsible", "type"]), l = s(e, "modelValue");
+    return (r, t) => (p(), i(m(V), u({
       collapsible: e.collapsible,
       type: e.type
     }, a, {
       modelValue: l.value,
       "onUpdate:modelValue": t[0] || (t[0] = (o) => l.value = o)
     }), {
-      default: y((o) => [
-        f(r.$slots, "default", B(b(o)))
+      default: c((o) => [
+        y(r.$slots, "default", f(B(o)))
       ]),
       _: 3
     }, 16, ["collapsible", "type", "modelValue"]));

package/dist/UIKit/Accordion/BaseAccordionItem.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as n, shallowRef as u, createBlock as c, openBlock as d, withCtx as i, createVNode as a, normalizeClass as s, renderSlot as o, createTextVNode as f, toDisplayString as m, unref as k } from "vue";
+import { defineComponent as n, shallowRef as u, openBlock as c, createBlock as d, withCtx as i, createVNode as a, normalizeClass as s, renderSlot as o, createTextVNode as f, toDisplayString as m, unref as k } from "vue";
 import h from "./AccordionContentPrimitive.vue.js";
 import w from "./AccordionTriggerPrimitive.vue.js";
 import g from "./AccordionHeaderPrimitive.vue.js";
@@ -20,7 +20,7 @@ const T = /* @__PURE__ */ n({
   },
   setup(t) {
     const r = u();
-    return (e, l) => (d(), c(C, { value: t.value }, {
+    return (e, l) => (c(), d(C, { value: t.value }, {
       default: i(() => [
         a(g, {
           as: t.headerTag,

package/dist/UIKit/Autocomplete/ClearableAutocomplete.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as J, mergeModels as I, useModel as M, useId as Q, useTemplateRef as c, shallowRef as r, onBeforeMount as Y, onMounted as Z, onUnmounted as _, watch as O, nextTick as ee, createBlock as L, openBlock as y, withCtx as W, renderSlot as f, createCommentVNode as x, createElementBlock as D, createElementVNode as u, Fragment as te, renderList as le, normalizeClass as p, withDirectives as N, unref as ne, vModelText as oe, toDisplayString as ae, withModifiers as ie, normalizeStyle as ue, createTextVNode as se, vShow as re } from "vue";
+import { defineComponent as J, useModel as M, useId as Q, useTemplateRef as c, shallowRef as r, onBeforeMount as Y, onMounted as Z, onUnmounted as _, watch as O, nextTick as ee, openBlock as y, createBlock as I, withCtx as W, renderSlot as f, createCommentVNode as x, createElementBlock as L, createElementVNode as u, Fragment as te, renderList as le, normalizeClass as p, withDirectives as D, unref as ne, vModelText as oe, toDisplayString as ae, withModifiers as ie, normalizeStyle as ue, createTextVNode as se, vShow as re, mergeModels as N } from "vue";
 import de from "../BaseDropDown.vue.js";
 import '../../assets/BaseDropDown.css';/* empty css                   */
 import ce from "../BaseSelect/SelectItem.vue.js";
@@ -9,7 +9,7 @@ const pe = ["id", "data-cy", "placeholder"], ve = {
   class: "uikit-progress-bar-track uikit-absolute uikit-left-0 uikit-top-0 uikit-w-full"
 }, ke = ["innerHTML"], ge = /* @__PURE__ */ J({
   __name: "ClearableAutocomplete",
-  props: /* @__PURE__ */ I({
+  props: /* @__PURE__ */ N({
     dataCy: {},
     placeholder: {},
     enableKeyboardController: { type: Boolean, default: !0 },
@@ -33,7 +33,7 @@ const pe = ["id", "data-cy", "placeholder"], ve = {
     },
     inputValueModifiers: {}
   }),
-  emits: /* @__PURE__ */ I(["input", "click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
+  emits: /* @__PURE__ */ N(["input", "click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
   setup(t, { expose: K, emit: A }) {
     const s = M(t, "open"), v = M(t, "modelValue"), a = M(t, "inputValue"), k = A, P = Q(), h = c("inputRef"), m = r(0), w = r(!1), d = r(!1), b = r(!1), R = r(null), o = r([]), $ = c("dropdownRef"), g = c("hiddenSpan"), B = c("inputWrapperRef"), F = c("clearButtonRef"), H = () => {
       a.value = "", v.value = null, d.value = !1;
@@ -86,7 +86,7 @@ const pe = ["id", "data-cy", "placeholder"], ve = {
       getRootElement: () => $.value?.getRootElement(),
       select: X,
       focus: j
-    }), (l, e) => (y(), L(de, {
+    }), (l, e) => (y(), I(de, {
       ref: "dropdownRef",
       class: "uikit-clearable-autocomplete",
       "data-cy": t.dataCy,
@@ -109,7 +109,7 @@ const pe = ["id", "data-cy", "placeholder"], ve = {
             ref: "inputWrapperRef",
             class: p(["uikit-relative", t.inputWrapperClasses])
           }, [
-            N(u("input", {
+            D(u("input", {
               ref: "inputRef",
               "onUpdate:modelValue": [
                 e[0] || (e[0] = (n) => a.value = n),
@@ -144,7 +144,7 @@ const pe = ["id", "data-cy", "placeholder"], ve = {
                 fontSize: "inherit"
               }
             }, ae(a.value), 3),
-            N(u("button", {
+            D(u("button", {
               ref: "clearButtonRef",
               type: "button",
               class: p(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", t.clearButton?.classes]),
@@ -168,10 +168,10 @@ const pe = ["id", "data-cy", "placeholder"], ve = {
       ]),
       default: W(({ activeIdx: n, setActiveIdx: S }) => [
         b.value && !o.value.length ? f(l.$slots, "loading-state", { key: 0 }) : x("", !0),
-        b.value && o.value.length ? (y(), D("div", ve, [...e[8] || (e[8] = [
+        b.value && o.value.length ? (y(), L("div", ve, [...e[8] || (e[8] = [
           u("div", { class: "uikit-progress-bar-fill" }, null, -1)
         ])])) : x("", !0),
-        o.value.length ? (y(!0), D(te, { key: 2 }, le(o.value, (C, i) => (y(), L(ce, {
+        o.value.length ? (y(!0), L(te, { key: 2 }, le(o.value, (C, i) => (y(), I(ce, {
           key: i,
           active: n === i,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",

package/dist/UIKit/BaseAlert.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as a, createElementBlock as l, openBlock as r, normalizeClass as s, renderSlot as o } from "vue";
+import { defineComponent as a, openBlock as l, createElementBlock as r, normalizeClass as s, renderSlot as o } from "vue";
 const n = ["id"], c = /* @__PURE__ */ a({
   __name: "BaseAlert",
   props: {
     alertClass: { default: "" }
   },
   setup(t) {
-    return (e, i) => (r(), l("div", {
+    return (e, i) => (l(), r("div", {
       id: e.$attrs.id,
       class: s(["uikit-alert", t.alertClass]),
       role: "alert"

package/dist/UIKit/BaseAutocomplete.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as x, mergeModels as $, useModel as F, shallowRef as d, computed as k, onBeforeMount as L, watch as f, createBlock as g, openBlock as w, normalizeClass as H, withCtx as c, createElementBlock as K, Fragment as T, renderList as z, unref as N, renderSlot as p, createElementVNode as U, createVNode as A } from "vue";
+import { defineComponent as x, useModel as F, shallowRef as d, computed as k, onBeforeMount as L, watch as f, openBlock as w, createBlock as $, normalizeClass as H, withCtx as c, createElementBlock as K, Fragment as T, renderList as z, unref as N, renderSlot as p, createElementVNode as U, createVNode as A, mergeModels as g } from "vue";
 import R from "./BaseInput.js";
 import W from "./BaseDropDown.vue.js";
 import '../assets/BaseDropDown.css';/* empty css                  */
@@ -7,7 +7,7 @@ import q from "./BaseSelect/SelectItem.vue.js";
 import { useKeyboardController as G } from "@wikicasa-dev/vue-composables";
 const J = ["innerHTML"], ne = /* @__PURE__ */ x({
   __name: "BaseAutocomplete",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ g({
     isValid: { type: [Boolean, null], default: null },
     theme: { default: "" },
     label: { default: "" },
@@ -29,7 +29,7 @@ const J = ["innerHTML"], ne = /* @__PURE__ */ x({
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ $(["update:dropdownState", "changedValue", "click", "keydown", "keydownEnterPressed"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ g(["update:dropdownState", "changedValue", "click", "keydown", "keydownEnterPressed"], ["update:modelValue"]),
   setup(t, { expose: V, emit: B }) {
     const u = F(t, "modelValue"), r = B, i = d(""), o = d([]), v = d(null), b = d(!1), n = d(!1), C = d(null), S = k(() => o.value.length);
     L(() => {
@@ -107,7 +107,7 @@ const J = ["innerHTML"], ne = /* @__PURE__ */ x({
       select: () => {
         C.value?.select();
       }
-    }), (e, l) => (w(), g(W, {
+    }), (e, l) => (w(), $(W, {
       class: H(["uikit-autocomplete", e.$attrs["root-classes"]]),
       "data-cy": t.dataCy ? t.dataCy : `ac_${e.$attrs.id}`,
       "dropdown-element": "ul",
@@ -164,7 +164,7 @@ const J = ["innerHTML"], ne = /* @__PURE__ */ x({
         }, 8, ["id", "data-cy", "label-text", "model-value", "is-valid", "disabled", "placeholder", "with-left-icon", "with-right-icon", "input-class", "fieldset-classes"])
       ]),
       default: c(() => [
-        (w(!0), K(T, null, z(o.value, (a, s) => (w(), g(q, {
+        (w(!0), K(T, null, z(o.value, (a, s) => (w(), $(q, {
           key: s,
           active: N(m) === s,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",

package/dist/UIKit/BaseBadge.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as a, createElementBlock as t, openBlock as o, normalizeClass as r, renderSlot as d } from "vue";
+import { defineComponent as a, openBlock as t, createElementBlock as o, normalizeClass as r, renderSlot as d } from "vue";
 const i = ["id"], m = /* @__PURE__ */ a({
   __name: "BaseBadge",
   props: {
     badgeClass: { default: "uikit-badge-w-primary-sm" }
   },
   setup(s) {
-    return (e, l) => (o(), t("span", {
+    return (e, l) => (t(), o("span", {
       id: e.$attrs.id,
       class: r(["uikit-badge uikit-shadow-sm", s.badgeClass, e.$attrs.class])
     }, [

package/dist/UIKit/BaseBreadcrumb.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as d, computed as k, createElementBlock as l, openBlock as i, createElementVNode as n, normalizeClass as r, Fragment as u, renderList as h, renderSlot as c, toDisplayString as b, createVNode as f, unref as p } from "vue";
+import { defineComponent as d, computed as k, openBlock as l, createElementBlock as i, createElementVNode as n, normalizeClass as r, Fragment as u, renderList as h, renderSlot as c, toDisplayString as b, createVNode as f, unref as p } from "vue";
 import { ArrowIcon as C } from "@wikicasa-dev/svg-icons";
 const g = { "aria-label": "Breadcrumb" }, w = ["data-tooltip"], I = ["href"], y = /* @__PURE__ */ d({
   __name: "BaseBreadcrumb",
@@ -15,12 +15,12 @@ const g = { "aria-label": "Breadcrumb" }, w = ["data-tooltip"], I = ["href"], y
         a.push({ ...t.items[e], idx: e }), e < t.items.length - 1 && a.push({ arrowIcon: !0 }), e++;
       return a;
     });
-    return (e, a) => (i(), l("nav", g, [
+    return (e, a) => (l(), i("nav", g, [
       n("ol", {
         class: r(["uikit-flex uikit-items-center uikit-gap-10px uikit-p-0", t.listClasses])
       }, [
-        (i(!0), l(u, null, h(m.value, (s, o) => (i(), l(u, null, [
-          s?.label ? (i(), l("li", {
+        (l(!0), i(u, null, h(m.value, (s, o) => (l(), i(u, null, [
+          s?.label ? (l(), i("li", {
             key: `breadcrumb-li-${o}`,
             class: r(["uikit-list-none", t.listItemClasses]),
             "data-tooltip": s.dataTooltip
@@ -33,7 +33,7 @@ const g = { "aria-label": "Breadcrumb" }, w = ["data-tooltip"], I = ["href"], y
                 href: s.link
               }, b(s.label), 11, I)
             ])
-          ], 10, w)) : (i(), l("li", {
+          ], 10, w)) : (l(), i("li", {
             key: `breadcrumb-li-no-label-${o}`,
             class: r(["uikit-list-none", t.listItemClasses]),
             "aria-hidden": "true"

package/dist/UIKit/BaseButton.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as w, useTemplateRef as v, shallowRef as g, computed as l, createElementBlock as C, openBlock as B, withModifiers as u, normalizeStyle as M, normalizeClass as h, renderSlot as s, createVNode as A } from "vue";
+import { defineComponent as w, useTemplateRef as v, shallowRef as g, computed as l, openBlock as C, createElementBlock as B, withModifiers as u, normalizeStyle as M, normalizeClass as h, renderSlot as s, createVNode as A } from "vue";
 import L from "./StaticSpinner.js";
 const S = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], d = {
   "uikit-btn-w-primary": "uikit-btn-w-primary",
@@ -41,7 +41,7 @@ const S = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
     };
     return b({
       getRootElement: () => r.value
-    }), (a, e) => (B(), C("button", {
+    }), (a, e) => (C(), B("button", {
       ref: "buttonEl",
       id: a.$attrs.id,
       "data-cy": t.dataCy,

package/dist/UIKit/BaseComplexToggle.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as T, mergeModels as C, useModel as x, computed as d, createElementBlock as g, openBlock as c, normalizeClass as o, createElementVNode as i, withModifiers as f, renderSlot as m, createCommentVNode as k } from "vue";
+import { defineComponent as T, useModel as C, computed as d, openBlock as g, createElementBlock as c, normalizeClass as o, createElementVNode as i, withModifiers as f, renderSlot as m, createCommentVNode as k, mergeModels as x } from "vue";
 const y = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "alt"], M = ["innerHTML"], z = ["data-btn-bg-color", "data-cy"], B = ["src", "alt"], V = ["innerHTML"], j = /* @__PURE__ */ T({
   __name: "BaseComplexToggle",
-  props: /* @__PURE__ */ C({
+  props: /* @__PURE__ */ x({
     labels: {},
     type: { default: "full" },
     mode: { default: "" },
@@ -17,7 +17,7 @@ const y = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, s = x(e, "modelValue"), n = () => {
+    const t = e, s = C(e, "modelValue"), n = () => {
       s.value = t.labels.leftToggle;
     }, u = () => {
       s.value = t.labels.rightToggle;
@@ -34,7 +34,7 @@ const y = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
       n();
     })();
     const r = (l) => s.value?.label === l.label, b = d(() => r(t.labels.leftToggle)), h = d(() => r(t.labels.rightToggle));
-    return (l, a) => (c(), g("div", {
+    return (l, a) => (g(), c("div", {
       id: l.$attrs.id || "",
       "data-cy": l.$attrs["data-cy"] || "",
       class: o(["base-complex-toggle uikit-relative uikit-flex uikit-justify-center uikit-p-0", [e.mode, e.borderContainerColor, e.size]])
@@ -50,7 +50,7 @@ const y = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
         onClick: a[0] || (a[0] = f((v) => n(), ["stop"]))
       }, [
         m(l.$slots, "left_icon", {}, () => [
-          e.labels.leftToggle.icon ? (c(), g("img", {
+          e.labels.leftToggle.icon ? (g(), c("img", {
             key: 0,
             class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
             src: e.labels.leftToggle.icon.src,
@@ -75,7 +75,7 @@ const y = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
         onClick: a[1] || (a[1] = f((v) => u(), ["stop"]))
       }, [
         m(l.$slots, "right_icon", {}, () => [
-          e.labels.rightToggle.icon ? (c(), g("img", {
+          e.labels.rightToggle.icon ? (g(), c("img", {
             key: 0,
             class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
             src: e.labels.rightToggle.icon.src,

package/dist/UIKit/BaseDropDown.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as T, mergeModels as I, useId as N, useModel as A, shallowRef as R, computed as V, useTemplateRef as x, onMounted as z, onUnmounted as P, watch as v, nextTick as q, createElementBlock as F, openBlock as m, normalizeClass as d, renderSlot as B, createBlock as L, unref as l, createVNode as U, withCtx as D, createElementVNode as j, createCommentVNode as G, resolveDynamicComponent as J, mergeProps as Q } from "vue";
+import { defineComponent as T, useId as N, useModel as I, shallowRef as R, computed as V, useTemplateRef as A, onMounted as z, onUnmounted as P, watch as v, nextTick as q, openBlock as m, createElementBlock as F, normalizeClass as d, renderSlot as x, unref as l, createVNode as U, withCtx as B, createElementVNode as j, createBlock as L, createCommentVNode as G, resolveDynamicComponent as J, mergeProps as Q, mergeModels as D } from "vue";
 import X from "./BaseButton.vue.js";
 import { ArrowIcon as Y } from "@wikicasa-dev/svg-icons";
 import { useKeyboardController as Z } from "../composables/mock.js";
 const _ = ["innerHTML"], le = /* @__PURE__ */ T({
   inheritAttrs: !1,
   __name: "BaseDropDown",
-  props: /* @__PURE__ */ I({
+  props: /* @__PURE__ */ D({
     dropdownAttrs: {},
     dropdownClasses: { default: "" },
     btnClasses: { default: "" },
@@ -28,14 +28,14 @@ const _ = ["innerHTML"], le = /* @__PURE__ */ T({
     open: { type: Boolean, default: !1 },
     openModifiers: {}
   }),
-  emits: /* @__PURE__ */ I(["click"], ["update:resetKeyboardController", "update:open"]),
+  emits: /* @__PURE__ */ D(["click"], ["update:resetKeyboardController", "update:open"]),
   setup(t, { expose: S, emit: M }) {
-    const n = t, y = N(), O = M, w = A(
+    const n = t, y = N(), O = M, w = I(
       t,
       "resetKeyboardController"
-    ), o = A(t, "open");
+    ), o = I(t, "open");
     let C = !1;
-    const s = R([]), W = V(() => s.value.length), u = x("container"), c = x("dropdown"), { activeIdx: a, selectedIdx: i, onKeyDownHandler: $ } = Z({
+    const s = R([]), W = V(() => s.value.length), u = A("container"), c = A("dropdown"), { activeIdx: a, selectedIdx: i, onKeyDownHandler: $ } = Z({
       optionsLength: W,
       isDropdownOpen: o,
       global: !1,
@@ -79,7 +79,7 @@ const _ = ["innerHTML"], le = /* @__PURE__ */ T({
       class: d(["uikit-relative uikit-block", e.$attrs.class]),
       onKeydown: H
     }, [
-      B(e.$slots, "btn_slot", {
+      x(e.$slots, "btn_slot", {
         toggleDropdown: f,
         isOpen: o.value,
         activeIdx: l(a),
@@ -103,7 +103,7 @@ const _ = ["innerHTML"], le = /* @__PURE__ */ T({
             Array.isArray(t.closeKeys) && !t.closeKeys.includes(k.key) || k.stopPropagation();
           })
         }, {
-          default: D(() => [
+          default: B(() => [
             j("span", {
               class: d(["uikit-mr-5px", t.labelClasses]),
               innerHTML: t.btnLabel
@@ -132,8 +132,8 @@ const _ = ["innerHTML"], le = /* @__PURE__ */ T({
         "aria-hidden": !o.value,
         "data-side": t.direction
       }, t.dropdownAttrs), {
-        default: D(() => [
-          B(e.$slots, "default", {
+        default: B(() => [
+          x(e.$slots, "default", {
             isOpen: o.value,
             toggleDropdown: f,
             activeIdx: l(a),

package/dist/UIKit/BaseFloatingLabel.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as u, createElementBlock as a, openBlock as n, withModifiers as d, normalizeClass as t, createElementVNode as r, createCommentVNode as k } from "vue";
+import { defineComponent as u, openBlock as a, createElementBlock as n, withModifiers as d, normalizeClass as t, createElementVNode as r, createCommentVNode as k } from "vue";
 const b = ["for"], c = ["innerHTML"], x = /* @__PURE__ */ u({
   __name: "BaseFloatingLabel",
   props: {
@@ -12,7 +12,7 @@ const b = ["for"], c = ["innerHTML"], x = /* @__PURE__ */ u({
   emits: ["click"],
   setup(e, { emit: s }) {
     const o = s;
-    return (i, l) => (n(), a("label", {
+    return (i, l) => (a(), n("label", {
       for: i.$attrs.for,
       class: t(["uikit-pointer-events-none uikit-absolute uikit-left-15px uikit-h-5", [e.labelState, { "uikit-text-w-secondary": e.disabled }, e.labelClasses]]),
       onClick: l[0] || (l[0] = d((m) => o("click"), ["stop"]))
@@ -24,7 +24,7 @@ const b = ["for"], c = ["innerHTML"], x = /* @__PURE__ */ u({
         ]]),
         innerHTML: e.labelText
       }, null, 10, c),
-      i.$attrs.required ? (n(), a("sup", {
+      i.$attrs.required ? (a(), n("sup", {
         key: 0,
         class: t(["uikit-absolute -uikit-top-[0.4em] uikit-pl-[2px] uikit-leading-normal [font-size:inherit]", [
           { "uikit-text-w-secondary": e.disabled },