@wikicasa-dev/components 2.1.4-alpha.8 → 2.1.4

package/dist/packages/components/lib/UIKit/BaseAutocomplete.vue.js

@@ -1,6 +1,5 @@
 import { defineComponent as L, mergeModels as y, useModel as F, ref as d, computed as k, onBeforeMount as H, watch as f, createBlock as g, openBlock as h, normalizeClass as K, withCtx as s, createElementBlock as T, Fragment as z, renderList as A, unref as N, createElementVNode as U, createVNode as W, renderSlot as $ } from "vue";
-import j from "./BaseInput.vue.js";
-import '../../../../assets/packages/components/lib/UIKit/BaseInput.css';/* empty css               */
+import j from "../../../../UIKit/BaseInput.js";
 import q from "./BaseDropDown.vue.js";
 import "../../../../node_modules/.pnpm/js-cookie@3.0.5/node_modules/js-cookie/dist/js.cookie.js";
 import { debounce as G } from "../../../../node_modules/.pnpm/@wikicasa-dev_utilities@1.1.21/node_modules/@wikicasa-dev/utilities/dist/utils/FunctionUtils.js";
@@ -36,7 +35,7 @@ const R = ["innerHTML"], ne = /* @__PURE__ */ L({
     const r = F(
       o,
       "modelValue"
-    ), u = V, i = d(""), a = d([]), p = d(null), b = d(!1), l = d(!1), w = d(null), B = k(() => a.value.length);
+    ), u = V, i = d(""), n = d([]), p = d(null), b = d(!1), l = d(!1), w = d(null), B = k(() => n.value.length);
     H(() => {
       p.value = G({ delay: 300 }, o.onInputChangeCb);
     });
@@ -51,22 +50,22 @@ const R = ["innerHTML"], ne = /* @__PURE__ */ L({
         case "all-bordered":
           return "!uikit-rounded " + (l.value && "!uikit-rounded-b-none");
         case "all-bordered-thick":
-          return "!uikit-rounded-[30px] !uikit-h-[52px] " + (l.value && "!uikit-rounded-b-none");
+          return "!uikit-rounded-xl !uikit-h-[52px] " + (l.value && "!uikit-rounded-b-none");
         default:
           return "";
       }
-    }), M = k(() => {
+    }), I = k(() => {
       switch (o.theme) {
         case "bordered":
           return "";
         case "all-bordered":
           return "uikit-border uikit-border-w-lavender uikit-border-solid !uikit-rounded !uikit-border-w-lavender !uikit-border " + (l.value ? "!uikit-border-b-0 !uikit-rounded-b-none" : "");
         case "all-bordered-thick":
-          return "!uikit-rounded-[30px] !uikit-h-[60px] !uikit-border-w-lavender !uikit-border-none " + (l.value ? "!uikit-rounded-b-none" : "");
+          return "!uikit-rounded-xl !uikit-h-[60px] !uikit-border-w-lavender !uikit-border-none " + (l.value ? "!uikit-rounded-b-none" : "");
         default:
           return "";
       }
-    }), I = k(() => {
+    }), M = k(() => {
       const e = "uikit-rounded-b-xl uikit-shadow uikit-rounded-t-none uikit-mb-0 !uikit-mt-0 uikit-text-w-black !uikit-rounded-b-xl !uikit-rounded-t-none";
       switch (o.theme) {
         case "bordered":
@@ -81,15 +80,15 @@ const R = ["innerHTML"], ne = /* @__PURE__ */ L({
     }), D = async (e) => {
       if (i.value !== e && (u("changedValue", e), i.value = e, !!o.onInputChangeCb)) {
         if (!e || b.value) {
-          a.value = [], b.value = !1, m.value = -1, v.value = -1, r.value && (r.value.label = ""), l.value = !1, await p.value(null);
+          n.value = [], b.value = !1, m.value = -1, v.value = -1, r.value && (r.value.label = ""), l.value = !1, await p.value(null);
           return;
         }
-        o.disableCb || (a.value = await p.value(e), l.value = !!a.value.length);
+        o.disableCb || (n.value = await p.value(e), l.value = !!n.value.length);
       }
     }, C = (e, t) => {
-      o.onOptionSelectedCb && o.onOptionSelectedCb(e), o.cleanupOnClose && (a.value = []), b.value = !0, i.value = e.label, r.value = e, l.value = !1, m.value = t;
+      o.onOptionSelectedCb && o.onOptionSelectedCb(e), o.cleanupOnClose && (n.value = []), b.value = !0, i.value = e.label, r.value = e, l.value = !1, m.value = t;
     }, E = () => {
-      a.value.length && o.keepState !== "closed" && (l.value = !0);
+      n.value.length && o.keepState !== "closed" && (l.value = !0);
     };
     return f(
       r,
@@ -98,13 +97,13 @@ const R = ["innerHTML"], ne = /* @__PURE__ */ L({
       },
       { immediate: !0 }
     ), f(m, (e) => {
-      if (e === -1 || !a.value.length) return;
-      const t = a.value[e];
+      if (e === -1 || !n.value.length) return;
+      const t = n.value[e];
       b.value && t.label === r.value?.label || C(t, e);
     }), f(
       () => o.keepState,
       (e) => {
-        e === "closed" ? (l.value = !1, o.cleanupOnClose && (a.value = [])) : e === "open" && a.value.length && (l.value = !0);
+        e === "closed" ? (l.value = !1, o.cleanupOnClose && (n.value = [])) : e === "open" && n.value.length && (l.value = !0);
       }
     ), f(l, (e) => {
       u("update:dropdownState", e);
@@ -121,18 +120,18 @@ const R = ["innerHTML"], ne = /* @__PURE__ */ L({
         { "all-bordered-dropdown": e.theme === "all-bordered" },
         { "all-bordered-dropdown thick": e.theme === "all-bordered-thick" },
         {
-          "uikit-mt-10px !uikit-border !uikit-border-w-lightgray !uikit-rounded-xs": !e.theme
+          "uikit-mt-10px !uikit-border !uikit-border-w-secondary !uikit-rounded-xs": !e.theme
         },
-        I.value,
+        M.value,
         "!uikit-max-h-[210px] uikit-z-30",
         e.dropdownClasses
       ],
       "open-dropdown": l.value,
-      "keep-state": !a.value.length || e.keepState === "closed" ? "closed" : "opened",
+      "keep-state": !n.value.length || e.keepState === "closed" ? "closed" : "opened",
       "close-when-clicked-outside": e.closeDropdownOnBodyPressed,
       "activate-keyboard-controller": !1,
-      "onUpdate:dropdownState": t[3] || (t[3] = (n) => l.value = n),
-      onClick: t[4] || (t[4] = (n) => {
+      "onUpdate:dropdownState": t[3] || (t[3] = (a) => l.value = a),
+      onClick: t[4] || (t[4] = (a) => {
         u("click"), E();
       })
     }, {
@@ -154,31 +153,31 @@ const R = ["innerHTML"], ne = /* @__PURE__ */ L({
             e.inputClasses,
             "!uikit-ml-0 !uikit-w-full"
           ],
-          "fieldset-classes": [M.value, e.fieldsetClasses],
-          "onUpdate:modelValue": t[0] || (t[0] = (n) => D(n === void 0 ? "" : `${n}`)),
-          onKeydown: t[1] || (t[1] = (n) => u("keydown", n)),
+          "fieldset-classes": [I.value, e.fieldsetClasses],
+          "onUpdate:modelValue": t[0] || (t[0] = (a) => D(a === void 0 ? "" : `${a}`)),
+          onKeydown: t[1] || (t[1] = (a) => u("keydown", a)),
           onKeydownEnterPressed: t[2] || (t[2] = () => u("keydownEnterPressed"))
         }, {
           leftIcon: s(() => [
             $(e.$slots, "lefticon")
           ]),
-          righticon: s(({ handleClean: n }) => [
-            $(e.$slots, "righticon", { handleClean: n })
+          righticon: s(({ handleClean: a }) => [
+            $(e.$slots, "righticon", { handleClean: a })
           ]),
           _: 3
         }, 8, ["id", "data-cy", "label-text", "model-value", "is-valid", "disabled", "placeholder", "with-left-icon", "with-right-icon", "input-class", "fieldset-classes"])
       ]),
       default: s(() => [
-        (h(!0), T(z, null, A(a.value, (n, c) => (h(), g(J, {
+        (h(!0), T(z, null, A(n.value, (a, c) => (h(), g(J, {
           key: c,
           active: N(v) === c,
-          class: "uikit-py-xs uikit-m-1 uikit-rounded-[5px] uikit-px-5 hover:uikit-cursor-pointer",
-          onClick: (P) => C(n, c),
+          class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
+          onClick: (P) => C(a, c),
           onMouseover: (P) => v.value = c
         }, {
           default: s(() => [
             U("span", {
-              innerHTML: n.label
+              innerHTML: a.label
             }, null, 8, R)
           ]),
           _: 2

package/dist/packages/components/lib/UIKit/BaseBadge.vue.js

@@ -1,54 +1,19 @@
-import { defineComponent as a, createElementBlock as t, openBlock as u, normalizeClass as d, renderSlot as r } from "vue";
-const l = /* @__PURE__ */ a({
+import { defineComponent as s, createElementBlock as a, openBlock as t, normalizeClass as r, renderSlot as i } from "vue";
+const o = ["id"], p = /* @__PURE__ */ s({
+  inheritAttrs: !1,
   __name: "BaseBadge",
   props: {
-    badgeClass: { default: "primary-sm" }
+    badgeClass: { default: "uikit-badge-w-primary-sm" }
   },
-  setup(n) {
-    const e = {
-      /**
-       * @deprecated Old style
-       */
-      warning: "uikit-badge-w-warning",
-      /**
-       * @deprecated Old style
-       */
-      lavender: "uikit-badge-w-lavender",
-      /**
-       * @deprecated Old style
-       */
-      danger: "uikit-badge-w-danger",
-      /**
-       * @deprecated Old style
-       */
-      "outline-tag": "uikit-badge-outline-tag",
-      /**
-       * @deprecated Old style
-       */
-      "primary-sm": "uikit-badge-w-pink-sm",
-      /**
-       * @deprecated Old style
-       */
-      "dark-primary": "uikit-badge-w-darkblue",
-      /**
-       * @deprecated Old style
-       */
-      "outline-tag-listing": "uikit-badge-outline-tag-listing",
-      gold: "uikit-badge-gold",
-      silver: "uikit-badge-silver",
-      premium: "uikit-badge-premium",
-      luxury: "uikit-badge-luxury",
-      alert: "uikit-badge-alert",
-      new: "uikit-badge-new",
-      discount: "uikit-badge-discount"
-    };
-    return (i, s) => (u(), t("span", {
-      class: d(["uikit-badge uikit-rounded-2xs uikit-px-xs uikit-py-2xs uikit-text uikit-font-medium uikit-shadow-sm", e[i.badgeClass]])
+  setup(d) {
+    return (e, l) => (t(), a("span", {
+      id: e.$attrs.id,
+      class: r(["uikit-badge uikit-shadow-sm", e.badgeClass, e.$attrs.class])
     }, [
-      r(i.$slots, "default")
-    ], 2));
+      i(e.$slots, "default")
+    ], 10, o));
   }
 });
 export {
-  l as default
+  p as default
 };

package/dist/packages/components/lib/UIKit/BaseBreadcrumb.vue.js

@@ -1,48 +1,51 @@
-import { defineComponent as m, computed as k, createElementBlock as i, openBlock as l, createElementVNode as o, normalizeClass as r, Fragment as u, renderList as p, renderSlot as d, toDisplayString as b, createTextVNode as h } from "vue";
-const f = {
-  "aria-label": "Breadcrumb",
-  class: "uikit-text"
-}, C = ["data-tooltip", "data-active"], g = ["href"], B = /* @__PURE__ */ m({
+import { defineComponent as d, computed as k, createElementBlock as s, openBlock as i, createElementVNode as n, normalizeClass as a, Fragment as u, renderList as p, renderSlot as c, toDisplayString as h, createVNode as b, unref as f } from "vue";
+import { ArrowIcon as C } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowIcon.js";
+import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+const g = { "aria-label": "Breadcrumb" }, w = ["data-tooltip"], I = ["href"], v = /* @__PURE__ */ d({
   __name: "BaseBreadcrumb",
   props: {
     items: {},
     listClasses: {},
     listItemClasses: {}
   },
-  setup(a) {
-    const c = k(() => {
+  setup(r) {
+    const m = k(() => {
       let e = 0;
-      const t = [];
-      for (; e < a.items.length; )
-        t.push({ ...a.items[e], idx: e }), e < a.items.length - 1 && t.push({ arrowIcon: !0 }), e++;
-      return t;
+      const l = [];
+      for (; e < r.items.length; )
+        l.push({ ...r.items[e], idx: e }), e < r.items.length - 1 && l.push({ arrowIcon: !0 }), e++;
+      return l;
     });
-    return (e, t) => (l(), i("nav", f, [
-      o("ol", {
-        class: r(["uikit-gap-10px uikit-flex uikit-items-center uikit-p-0", e.listClasses])
+    return (e, l) => (i(), s("nav", g, [
+      n("ol", {
+        class: a(["uikit-flex uikit-items-center uikit-gap-10px uikit-p-0", e.listClasses])
       }, [
-        (l(!0), i(u, null, p(c.value, (s, n) => (l(), i(u, null, [
-          s?.label ? (l(), i("li", {
-            key: `breadcrumb-li-${n}`,
-            class: r(["uikit-breadcrumb-item uikit-list-none", e.listItemClasses]),
-            "data-tooltip": s.dataTooltip,
-            "data-active": s.active
+        (i(!0), s(u, null, p(m.value, (t, o) => (i(), s(u, null, [
+          t?.label ? (i(), s("li", {
+            key: `breadcrumb-li-${o}`,
+            class: a(["uikit-list-none", e.listItemClasses]),
+            "data-tooltip": t.dataTooltip
           }, [
-            d(e.$slots, "item", {
-              item: s
+            c(e.$slots, "item", {
+              item: t
             }, () => [
-              o("a", {
-                class: "uikit-no-underline [font-size:inherit]",
-                href: s.link
-              }, b(s.label), 9, g)
+              n("a", {
+                class: a(["uikit-text-w-black uikit-no-underline", { "uikit-text-w-primary": t.active }]),
+                href: t.link
+              }, h(t.label), 11, I)
             ])
-          ], 10, C)) : (l(), i("li", {
-            key: `breadcrumb-li-no-label-${n}`,
-            class: r(["uikit-list-none uikit-px-sm", e.listItemClasses]),
+          ], 10, w)) : (i(), s("li", {
+            key: `breadcrumb-li-no-label-${o}`,
+            class: a(["uikit-list-none", e.listItemClasses]),
             "aria-hidden": "true"
           }, [
-            d(e.$slots, "separator", {}, () => [
-              t[0] || (t[0] = h(" / "))
+            c(e.$slots, "separator", {}, () => [
+              b(f(C), {
+                class: "-uikit-rotate-90",
+                "stroke-color": "#222",
+                width: 10,
+                height: 10
+              })
             ])
           ], 2))
         ], 64))), 256))
@@ -51,5 +54,5 @@ const f = {
   }
 });
 export {
-  B as default
+  v as default
 };

package/dist/packages/components/lib/UIKit/BaseButton.vue.js

@@ -1,11 +1,10 @@
-import { defineComponent as f, ref as v, computed as s, createElementBlock as c, openBlock as g, withModifiers as l, normalizeStyle as B, normalizeClass as h, renderSlot as r, createVNode as C } from "vue";
-import w from "../../../../UIKit/StaticSpinner.js";
-const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], S = /* @__PURE__ */ f({
+import { defineComponent as y, ref as b, computed as l, createElementBlock as f, openBlock as v, withModifiers as s, normalizeStyle as B, normalizeClass as C, renderSlot as u, createVNode as c } from "vue";
+import M from "../../../../UIKit/StaticSpinner.js";
+const z = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], S = /* @__PURE__ */ y({
   __name: "BaseButton",
   props: {
-    btnClass: { default: "primary" },
+    btnClass: { default: "uikit-btn-w-primary" },
     outlined: { type: Boolean },
-    rounded: { type: Boolean },
     size: {},
     withMinWidth: { type: Boolean, default: !0 },
     keepActive: { type: Boolean },
@@ -17,68 +16,49 @@ const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
     type: {}
   },
   emits: ["mouseover", "mouseout", "click"],
-  setup(a, { emit: u }) {
-    const n = u, d = {
-      primary: "uikit-btn-primary",
-      secondary: "uikit-btn-secondary",
-      ternary: "uikit-btn-ternary",
-      quaternary: "uikit-btn-quaternary",
-      warning: "uikit-btn-warning",
-      danger: "uikit-btn-danger",
-      transparent: "uikit-btn-transparent",
-      light: "uikit-btn-light",
-      "show-more": "uikit-btn-show-more",
-      "multi-selection": "uikit-btn-multi-selection",
-      "single-selection": "uikit-btn-single-selection",
-      facile: "uikit-btn-facile"
-    }, k = {
-      sm: "uikit-btn-sm",
-      lg: "uikit-btn-lg"
-    }, o = v(!1), b = s(
-      () => k[a.size]
-    ), m = s(() => a.outlined ? "uikit-btn-outline" : ""), p = () => {
-      o.value = !0;
-    }, y = () => {
-      o.value = !1;
+  setup(o, { emit: r }) {
+    const a = r, n = b(!1), d = l(() => o.size ? `uikit-btn-${o.size}` : ""), m = l(() => o.outlined ? "uikit-btn-outline" : ""), p = () => {
+      n.value = !0;
+    }, k = () => {
+      n.value = !1;
     };
-    return (t, e) => (g(), c("button", {
-      id: t.$attrs.id,
-      "data-cy": t.dataCy,
-      type: t.type,
-      class: h([
+    return (e, t) => (v(), f("button", {
+      id: e.$attrs.id,
+      "data-cy": e.dataCy,
+      type: e.type,
+      class: C([
         "uikit-btn",
         {
-          "uikit-btn-empty": !t.withMinWidth,
-          "active uikit-font-medium": t.keepActive,
-          "uikit-flex uikit-items-center uikit-justify-center": t.isLoading
+          "uikit-btn-empty": !e.withMinWidth,
+          "active uikit-font-medium": e.keepActive,
+          "uikit-flex uikit-items-center uikit-justify-center": e.isLoading
         },
-        d[t.btnClass],
-        b.value,
-        m.value,
-        { "uikit-btn-rounded": t.rounded }
+        e.btnClass,
+        d.value,
+        m.value
       ]),
-      style: B(t.$attrs.style),
-      "data-active": t.keepActive,
-      disabled: t.isLoading || t.disabled,
-      "aria-label": t.ariaLabel,
-      title: t.title,
-      onMouseover: e[0] || (e[0] = l((i) => {
-        p(), n("mouseover", i);
+      style: B(e.$attrs.style),
+      "data-active": e.keepActive,
+      disabled: e.isLoading || e.disabled,
+      "aria-label": e.ariaLabel,
+      title: e.title,
+      onMouseover: t[0] || (t[0] = s((i) => {
+        p(), a("mouseover", i);
       }, ["stop"])),
-      onMouseout: e[1] || (e[1] = l((i) => {
-        y(), n("mouseout", i);
+      onMouseout: t[1] || (t[1] = s((i) => {
+        k(), a("mouseout", i);
       }, ["stop"])),
-      onClick: e[2] || (e[2] = (i) => n("click", i))
+      onClick: t[2] || (t[2] = (i) => a("click", i))
     }, [
-      t.isLoading ? r(t.$slots, "spinner", { key: 1 }, () => [
-        C(w, {
-          "stroke-color": t.outlined ? "#ACB4C3" : "#fff"
+      e.isLoading ? u(e.$slots, "spinner", { key: 1 }, () => [
+        c(M, {
+          "stroke-color": e.outlined ? "#ACB4C3" : "#fff"
         }, null, 8, ["stroke-color"])
-      ]) : r(t.$slots, "default", {
+      ]) : u(e.$slots, "default", {
         key: 0,
-        hover: o.value
+        hover: n.value
       })
-    ], 46, M));
+    ], 46, z));
   }
 });
 export {

package/dist/packages/components/lib/UIKit/BaseComplexToggle.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as v, mergeModels as T, useModel as y, computed as c, createElementBlock as r, openBlock as g, normalizeClass as o, createElementVNode as t, withModifiers as f, renderSlot as m, createCommentVNode as k } from "vue";
-const C = ["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__ */ v({
+import { defineComponent as v, mergeModels as T, useModel as C, computed as c, createElementBlock as n, openBlock as r, normalizeClass as o, createElementVNode as t, withModifiers as f, renderSlot as m, createCommentVNode as k } 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__ */ v({
   __name: "BaseComplexToggle",
   props: /* @__PURE__ */ T({
     labels: {},
     type: { default: "full" },
     mode: { default: "" },
-    btnBgColor: { default: "uikit-bg-w-gray" },
+    btnBgColor: { default: "uikit-bg-w-lavender" },
     btnClasses: {},
-    borderContainerColor: { default: "uikit-border-w-gray" },
+    borderContainerColor: { default: "uikit-border-w-secondary" },
     size: { default: "" }
   }, {
     modelValue: {
@@ -16,8 +16,8 @@ const C = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(n) {
-    const l = n, a = y(n, "modelValue"), s = () => {
+  setup(g) {
+    const l = g, a = C(g, "modelValue"), s = () => {
       a.value = l.labels.leftToggle;
     }, u = () => {
       a.value = l.labels.rightToggle;
@@ -34,7 +34,7 @@ const C = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
       s();
     })();
     const b = (e) => a.value?.label === e.label, d = c(() => b(l.labels.leftToggle)), p = c(() => b(l.labels.rightToggle));
-    return (e, i) => (g(), r("div", {
+    return (e, i) => (r(), n("div", {
       id: e.$attrs.id || "",
       "data-cy": e.$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,9 +50,9 @@ const C = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
         onClick: i[0] || (i[0] = f((h) => s(), ["stop"]))
       }, [
         m(e.$slots, "left_icon", {}, () => [
-          e.labels.leftToggle.icon ? (g(), r("img", {
+          e.labels.leftToggle.icon ? (r(), n("img", {
             key: 0,
-            class: "base-complex-toggle-icon uikit-mr-10px uikit-relative uikit-z-10",
+            class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
             src: e.labels.leftToggle.icon.src,
             alt: e.labels.leftToggle.icon.alt,
             width: "15",
@@ -75,9 +75,9 @@ const C = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
         onClick: i[1] || (i[1] = f((h) => u(), ["stop"]))
       }, [
         m(e.$slots, "right_icon", {}, () => [
-          e.labels.rightToggle.icon ? (g(), r("img", {
+          e.labels.rightToggle.icon ? (r(), n("img", {
             key: 0,
-            class: "base-complex-toggle-icon uikit-mr-10px uikit-relative uikit-z-10",
+            class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
             src: e.labels.rightToggle.icon.src,
             alt: e.labels.rightToggle.icon.alt,
             width: "15",
@@ -98,7 +98,7 @@ const C = ["id", "data-cy"], $ = ["data-btn-bg-color", "data-cy"], L = ["src", "
           e.btnClasses
         ]])
       }, null, 2)
-    ], 10, C));
+    ], 10, y));
   }
 });
 export {