@wikicasa-dev/components 2.1.4-alpha.23 → 2.1.4-alpha.3

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

@@ -1,25 +1,54 @@
-import { defineComponent as i, createElementBlock as t, openBlock as u, normalizeClass as s, renderSlot as a } from "vue";
-const o = /* @__PURE__ */ i({
+import { defineComponent as a, createElementBlock as t, openBlock as u, normalizeClass as r, renderSlot as d } from "vue";
+const l = /* @__PURE__ */ a({
   __name: "BaseBadge",
   props: {
-    badgeClass: { default: "gold" },
-    type: { default: "default" }
+    badgeClass: { default: "primary-sm" }
   },
-  setup(d) {
-    return (e, l) => (u(), t("span", {
-      class: s(["uikit-badge uikit-inline-flex uikit-items-center uikit-justify-center uikit-text uikit-font-medium uikit-shadow-sm", [
-        `badge-${e.badgeClass}`,
-        { "uikit-rounded-full uikit-size-lg": e.type === "rounded" },
-        { "uikit-rounded-xs uikit-px-sm uikit-py-2xs": e.type === "default" },
-        {
-          "uikit-rounded-2xs uikit-p-2xs uikit-flex uikit-w-fit": e.type === "squared"
-        }
-      ]])
+  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-primary-sm",
+      /**
+       * @deprecated Old style
+       */
+      "dark-primary": "uikit-badge-w-dark-primary",
+      /**
+       * @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: r(["uikit-badge uikit-rounded-2xs uikit-px-xs uikit-py-2xs uikit-text uikit-font-medium uikit-shadow-sm", e[i.badgeClass]])
     }, [
-      a(e.$slots, "default")
+      d(i.$slots, "default")
     ], 2));
   }
 });
 export {
-  o as default
+  l as default
 };

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

@@ -1,4 +1,4 @@
-import { defineComponent as d, createElementBlock as k, openBlock as e, normalizeClass as m, createElementVNode as a, renderSlot as o, createVNode as t, createBlock as s, resolveDynamicComponent as r, withCtx as l, createTextVNode as u, toDisplayString as n } from "vue";
+import { defineComponent as d, createElementBlock as m, openBlock as e, normalizeClass as k, createElementVNode as n, renderSlot as o, createVNode as t, createBlock as s, resolveDynamicComponent as r, withCtx as l, createTextVNode as u, toDisplayString as a } from "vue";
 import c from "./BaseBanner/Background/BaseBannerBgElement1.vue.js";
 import b from "./BaseBanner/Background/BaseBannerBgElement2.vue.js";
 import h from "./BaseBanner/Background/BaseBannerBgElement3.vue.js";
@@ -15,30 +15,30 @@ const f = ["aria-label"], g = { class: "uikit-relative uikit-z-[2]" }, v = { cla
     bannerClass: {}
   },
   setup(C) {
-    return (i, _) => (e(), k("section", {
+    return (i, w) => (e(), m("section", {
       "aria-label": i.ariaLabel,
-      class: m([
+      class: k([
         "uikit-relative uikit-overflow-hidden uikit-rounded-xs uikit-p-md uikit-text-white sm:uikit-p-lg",
-        i.bannerClass === "secondary" ? "uikit-bg-w-blue" : "uikit-bg-w-pink"
+        i.bannerClass === "secondary" ? "uikit-bg-w-blue" : "uikit-bg-w-primary"
       ])
     }, [
-      a("div", g, [
+      n("div", g, [
         o(i.$slots, "title", {}, () => [
           (e(), s(r(i.headerTag || "h2"), { class: "uikit-m-0 uikit-text-20 max-sm:uikit-mb-xs" }, {
             default: l(() => [
-              u(n(i.title), 1)
+              u(a(i.title), 1)
             ]),
             _: 1
           }))
         ]),
         o(i.$slots, "description", {}, () => [
-          a("p", v, n(i.description), 1)
+          n("p", v, a(i.description), 1)
         ])
       ]),
       o(i.$slots, "cta", {}, () => [
-        (e(), s(r(i.ctaComponent || "button"), { class: "uikit-btn uikit-btn-ternary uikit-relative uikit-z-[2]" }, {
+        (e(), s(r(i.ctaComponent || "button"), { class: "uikit-btn uikit-btn-w-ternary uikit-relative uikit-z-[2]" }, {
           default: l(() => [
-            u(n(i.ctaLabel), 1)
+            u(a(i.ctaLabel), 1)
           ]),
           _: 1
         }))

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

@@ -1,6 +1,6 @@
-import { defineComponent as f, ref as v, computed as l, createElementBlock as c, openBlock as g, withModifiers as s, 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"], L = /* @__PURE__ */ f({
+import { defineComponent as f, ref as c, computed as s, createElementBlock as v, openBlock as g, withModifiers as l, normalizeStyle as w, normalizeClass as B, renderSlot as r, createVNode as h } from "vue";
+import C from "../../../../UIKit/StaticSpinner.js";
+const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "title"], S = /* @__PURE__ */ f({
   __name: "BaseButton",
   props: {
     btnClass: { default: "primary" },
@@ -19,56 +19,59 @@ const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
   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",
+      primary: "uikit-btn-w-primary",
+      secondary: "uikit-btn-w-secondary",
+      ternary: "uikit-btn-w-ternary",
+      quaternary: "uikit-btn-w-quaternary",
+      warning: "uikit-btn-w-warning",
+      danger: "uikit-btn-w-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"
-    }, b = {
+    }, k = {
       sm: "uikit-btn-sm",
       lg: "uikit-btn-lg"
-    }, o = v(!1), k = l(() => b[a.size]), p = l(() => a.outlined ? "uikit-btn-outline" : ""), m = () => {
+    }, o = c(!1), b = s(
+      () => k[a.size] || "uikit-btn-md"
+    ), m = s(() => a.outlined ? "uikit-btn-outline" : ""), p = () => {
       o.value = !0;
     }, y = () => {
       o.value = !1;
     };
-    return (t, e) => (g(), c("button", {
+    return (t, e) => (g(), v("button", {
       id: t.$attrs.id,
       "data-cy": t.dataCy,
       type: t.type,
-      class: h([
-        "uikit-btn",
+      class: B([
+        "uikit-shadow-surface uikit-btn",
         {
           "uikit-btn-empty": !t.withMinWidth,
-          "active uikit-font-medium": t.keepActive
+          "active uikit-font-medium": t.keepActive,
+          "uikit-flex uikit-items-center uikit-justify-center": t.isLoading
         },
         d[t.btnClass],
-        k.value,
-        p.value,
+        b.value,
+        m.value,
         { "uikit-btn-rounded": t.rounded }
       ]),
-      style: B(t.$attrs.style),
+      style: w(t.$attrs.style),
       "data-active": t.keepActive,
       disabled: t.isLoading || t.disabled,
       "aria-label": t.ariaLabel,
       title: t.title,
-      onMouseover: e[0] || (e[0] = s((i) => {
-        m(), n("mouseover", i);
+      onMouseover: e[0] || (e[0] = l((i) => {
+        p(), n("mouseover", i);
       }, ["stop"])),
-      onMouseout: e[1] || (e[1] = s((i) => {
+      onMouseout: e[1] || (e[1] = l((i) => {
         y(), n("mouseout", i);
       }, ["stop"])),
       onClick: e[2] || (e[2] = (i) => n("click", i))
     }, [
       t.isLoading ? r(t.$slots, "spinner", { key: 1 }, () => [
-        C(w, {
+        h(C, {
           "stroke-color": t.outlined ? "#ACB4C3" : "#fff"
         }, null, 8, ["stroke-color"])
       ]) : r(t.$slots, "default", {
@@ -79,5 +82,5 @@ const M = ["id", "data-cy", "type", "data-active", "disabled", "aria-label", "ti
   }
 });
 export {
-  L as default
+  S as default
 };

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

@@ -1,7 +1,7 @@
 import { defineComponent as a, useModel as d, createBlock as s, openBlock as i, unref as o, withCtx as k, renderSlot as m, createElementBlock as n, createCommentVNode as f, createVNode as c } from "vue";
 import { Toggle as p } from "reka-ui";
-import { CloseIcon as x } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.15-alpha.1_vue@3.5.16_typescript@5.8.3_/node_modules/@wikicasa-dev/svg-icons/dist/CloseIcon.js";
-import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.15-alpha.1_vue@3.5.16_typescript@5.8.3_/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { CloseIcon as x } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/CloseIcon.js";
+import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
 const b = {
   key: 0,
   class: "uikit-box-border uikit-flex uikit-size-sm uikit-items-center uikit-justify-center uikit-rounded-full uikit-bg-w-blue uikit-text-10 uikit-text-white"

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

@@ -1,6 +1,6 @@
 import { defineComponent as s, mergeModels as p, useModel as d, createBlock as f, openBlock as m, unref as t, withCtx as i, createVNode as n, renderSlot as l, normalizeClass as k } from "vue";
-import { ArrowFilledIcon as c } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.15-alpha.1_vue@3.5.16_typescript@5.8.3_/node_modules/@wikicasa-dev/svg-icons/dist/ArrowFilledIcon.js";
-import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.15-alpha.1_vue@3.5.16_typescript@5.8.3_/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { ArrowFilledIcon as c } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowFilledIcon.js";
+import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
 import { CollapsibleRoot as b, CollapsibleTrigger as g, CollapsibleContent as C } from "reka-ui";
 const M = /* @__PURE__ */ s({
   __name: "BaseCollapse",

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

@@ -1,124 +1,140 @@
-import { defineComponent as O, mergeModels as v, useId as S, useModel as E, ref as w, computed as H, useTemplateRef as L, onBeforeMount as $, onMounted as K, onUnmounted as T, watch as b, createElementBlock as y, openBlock as a, withModifiers as h, renderSlot as C, createBlock as g, createVNode as W, normalizeClass as n, withCtx as I, createCommentVNode as B, unref as r, resolveDynamicComponent as N } from "vue";
-import V from "./BaseButton.vue.js";
-import { ArrowIcon as q } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.15-alpha.1_vue@3.5.16_typescript@5.8.3_/node_modules/@wikicasa-dev/svg-icons/dist/ArrowIcon.js";
-import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.15-alpha.1_vue@3.5.16_typescript@5.8.3_/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
-import { useKeyboardController as z } from "../../../../node_modules/.pnpm/@wikicasa-dev_vue-composables@0.0.24-alpha.5_vue@3.5.16_typescript@5.8.3_/node_modules/@wikicasa-dev/vue-composables/dist/useKeyboardController.js";
-const R = ["innerHTML"], X = /* @__PURE__ */ O({
+import { defineComponent as L, mergeModels as h, useId as M, useModel as E, ref as y, computed as H, useTemplateRef as O, watch as d, onBeforeMount as W, onMounted as $, onUnmounted as K, createElementBlock as N, openBlock as p, withModifiers as C, normalizeClass as l, renderSlot as g, createBlock as D, createVNode as T, unref as i, withCtx as S, createElementVNode as V, createCommentVNode as q, resolveDynamicComponent as z } from "vue";
+import R from "./BaseButton.vue.js";
+import { ArrowIcon as U } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowIcon.js";
+import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { useKeyboardController as j } from "../../../../node_modules/.pnpm/@wikicasa-dev_vue-composables@0.0.23_typescript@5.8.3/node_modules/@wikicasa-dev/vue-composables/dist/useKeyboardController.js";
+const x = ["innerHTML"], Y = /* @__PURE__ */ L({
+  inheritAttrs: !1,
   __name: "BaseDropDown",
-  props: /* @__PURE__ */ v({
+  props: /* @__PURE__ */ h({
+    dropdownClasses: { default: "" },
+    btnClasses: { default: "" },
     withArrowIcon: { type: Boolean, default: !1 },
+    btnLabel: { default: "" },
+    labelClasses: { default: "" },
     direction: { default: "down" },
+    arrowWidth: { default: 12 },
+    arrowStrokeColor: { default: void 0 },
     isAbsolute: { type: Boolean, default: !0 },
+    openDropdown: { type: Boolean, default: !1 },
     closeWhenClickedOutside: { type: Boolean, default: !0 },
     dropdownElement: { default: "div" },
+    keepState: { default: "" },
     activateKeyboardController: { type: Boolean, default: !0 },
     disableSpaceHandler: { type: Boolean, default: !1 },
-    dropdownClasses: {},
-    btnProps: {},
-    arrowProps: {},
-    labelClasses: {},
-    dataCy: {}
+    dataCy: { default: "" }
   }, {
-    open: {},
-    openModifiers: {}
+    toggleDropdown: {
+      default: void 0
+    },
+    toggleDropdownModifiers: {}
   }),
-  emits: /* @__PURE__ */ v(["click", "update:dropdownState", "update:selectedIdx"], ["update:open"]),
-  setup(o, { emit: P }) {
-    const M = S(), c = P, i = E(o, "open"), t = w(!1), s = w([]), A = H(() => s.value.length), p = L("dropdown"), { activeIdx: k, selectedIdx: d } = z({
-      optionsLength: A,
+  emits: /* @__PURE__ */ h(["click", "update:dropdownState", "update:selectedIdx"], ["update:toggleDropdown"]),
+  setup(c, { emit: I }) {
+    const o = c, f = M(), n = I, k = E(c, "toggleDropdown"), t = y(!1), r = y([]), B = H(() => r.value.length), w = O("dropdown"), { activeIdx: m, selectedIdx: s } = j({
+      optionsLength: B,
       isDropdownOpen: t,
       activate: o.activateKeyboardController,
       disableSpaceHandler: o.disableSpaceHandler
-    }), f = () => {
-      t.value = !1, i.value !== void 0 && (i.value = !1);
+    });
+    d(
+      () => o.openDropdown,
+      (e) => {
+        t.value = e;
+      },
+      {
+        immediate: !0
+      }
+    ), d(t, (e) => {
+      n("update:dropdownState", e);
+    }), d(k, (e) => {
+      e && (t.value = !t.value, k.value = !1);
+    }), d(s, (e) => {
+      e !== -1 && (r.value[e].querySelector("a")?.click(), n("update:selectedIdx", e));
+    });
+    const v = () => {
+      t.value = !1;
     }, u = () => {
-      i.value === void 0 && (t.value = !t.value);
-    }, m = (e) => {
-      e != null && (k.value = e);
-    }, D = (e) => {
-      e != null && (d.value = e);
+      o.keepState === "closed" && !t.value || o.keepState === "opened" && t.value || (t.value = !t.value);
+    }, b = (e) => {
+      e != null && (m.value = e);
+    }, A = (e) => {
+      e != null && (s.value = e);
     };
-    return $(() => {
-      o.closeWhenClickedOutside && document.body.addEventListener("click", f);
+    return W(() => {
+      o.closeWhenClickedOutside && document.body.addEventListener("click", v);
+    }), $(() => {
+      w.value && (r.value = w.value.children || []);
     }), K(() => {
-      p.value && (s.value = p.value.children || []);
-    }), T(() => {
-      o.closeWhenClickedOutside && document.body.removeEventListener("click", f);
-    }), b(d, (e) => {
-      e !== -1 && (s.value[e].querySelector("a")?.click(), c("update:selectedIdx", e));
-    }), b(
-      i,
-      (e) => {
-        e !== void 0 && (t.value = e);
-      },
-      { immediate: !0 }
-    ), (e, l) => (a(), y("div", {
-      class: "uikit-relative uikit-block",
-      onClick: l[1] || (l[1] = h((U) => {
-        c("click"), u();
+      o.closeWhenClickedOutside && document.body.removeEventListener("click", v);
+    }), (e, a) => (p(), N("div", {
+      class: l(["uikit-relative uikit-block", e.$attrs.class]),
+      onClick: a[1] || (a[1] = C((F) => {
+        n("click"), u();
       }, ["stop"]))
     }, [
-      C(e.$slots, "button", {
+      g(e.$slots, "btn_slot", {
         toggleDropdown: u,
         isOpen: t.value,
-        setActiveIdx: m
+        setActiveIdx: b
       }, () => [
-        W(V, {
+        T(R, {
+          id: i(f),
           type: "button",
           "data-cy": e.dataCy,
-          class: n([
-            "uikit-w-full uikit-truncate uikit-gap-2xs",
-            e.btnProps?.classes
+          class: l([
+            "!uikit-flex uikit-w-full uikit-items-center uikit-truncate",
+            e.btnClasses
           ]),
           "aria-expanded": t.value,
-          "btn-class": e.btnProps?.type ?? "single-selection"
+          "btn-class": "single-selection"
         }, {
-          default: I(() => [
-            e.btnProps?.label ? (a(), y("span", {
+          default: S(() => [
+            V("span", {
+              class: l(["uikit-mr-5px", e.labelClasses]),
+              innerHTML: e.btnLabel
+            }, null, 10, x),
+            e.withArrowIcon ? (p(), D(i(U), {
               key: 0,
-              class: n(e.labelClasses),
-              innerHTML: e.btnProps.label
-            }, null, 10, R)) : B("", !0),
-            e.withArrowIcon ? (a(), g(r(q), {
-              key: 1,
-              class: n(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", [t.value ? "uikit-rotate-180" : "", e.arrowProps?.classes]]),
-              width: e.arrowProps?.width ?? 12,
-              height: e.arrowProps?.height ?? 12,
-              "stroke-color": e.arrowProps?.strokeColor ?? "#222"
-            }, null, 8, ["class", "width", "height", "stroke-color"])) : B("", !0)
+              class: l(["uikit-shrink-0 uikit-transition-transform motion-reduce:uikit-transition-none", t.value ? "uikit-rotate-180" : ""]),
+              width: e.arrowWidth,
+              height: e.arrowWidth,
+              "stroke-color": e.arrowStrokeColor
+            }, null, 8, ["class", "width", "height", "stroke-color"])) : q("", !0)
           ]),
           _: 1
-        }, 8, ["data-cy", "class", "aria-expanded", "btn-class"])
+        }, 8, ["id", "data-cy", "class", "aria-expanded"])
       ]),
-      (a(), g(N(e.dropdownElement), {
-        id: "dropdown_" + r(M),
+      (p(), D(z(e.dropdownElement), {
+        id: "dropdown_" + i(f),
         ref: "dropdown",
         "data-cy": e.dataCy && `${e.dataCy}_dropdown`,
-        class: n(["uikit-border-w-lightgray uikit-m-0 uikit-mt-xs uikit-rounded-2xs uikit-max-h-[112px] uikit-w-full uikit-flex-col uikit-overflow-y-auto uikit-border uikit-border-solid uikit-bg-white uikit-pl-0 uikit-opacity-100 uikit-no-scrollbar", [
+        class: l(["uikit-border-w-lavender uikit-max-h-[220px] uikit-w-full uikit-min-w-[90px] uikit-flex-col uikit-overflow-y-auto uikit-border uikit-border-solid uikit-bg-white uikit-pl-0 uikit-opacity-100 uikit-shadow uikit-no-scrollbar", [
           e.dropdownClasses,
           t.value ? "uikit-flex" : "uikit-hidden",
-          { "uikit-bottom-[55px]": e.direction === "up" },
+          { "uikit-bottom-[55px] uikit-rounded-xs": e.direction === "up" },
+          { "uikit-rounded-b uikit-border-t-0": e.direction === "down" },
           { "uikit-absolute": e.isAbsolute }
         ]]),
         "aria-hidden": !t.value,
-        onClick: l[0] || (l[0] = h(() => {
+        onClick: a[0] || (a[0] = C(() => {
         }, ["stop"]))
       }, {
-        default: I(() => [
-          C(e.$slots, "default", {
+        default: S(() => [
+          g(e.$slots, "default", {
             isOpen: t.value,
             toggleDropdown: u,
-            activeIdx: r(k),
-            selectedIdx: r(d),
-            setActiveIdx: m,
-            setSelectedIdx: D
+            activeIdx: i(m),
+            selectedIdx: i(s),
+            setActiveIdx: b,
+            setSelectedIdx: A
           })
         ]),
         _: 3
       }, 8, ["id", "data-cy", "class", "aria-hidden"]))
-    ]));
+    ], 2));
   }
 });
 export {
-  X as default
+  Y as default
 };

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

@@ -10,23 +10,23 @@ const k = ["for"], b = ["innerHTML"], C = /* @__PURE__ */ o({
     labelTextClasses: {}
   },
   emits: ["click"],
-  setup(p, { emit: a }) {
+  setup(m, { emit: a }) {
     const n = a;
     return (e, t) => (s(), i("label", {
       for: e.$attrs.for,
       class: l(["uikit-floating-label uikit-h-5 uikit-pointer-events-none uikit-absolute uikit-left-sm uikit-text-16 uikit-text-w-gray", [e.labelState, { "uikit-text-w-secondary": e.disabled }, e.labelClasses]]),
-      onClick: t[0] || (t[0] = r((f) => n("click"), ["stop"]))
+      onClick: t[0] || (t[0] = r((p) => n("click"), ["stop"]))
     }, [
       d("span", {
         class: l([{ "uikit-text-w-secondary": e.disabled }, e.labelTextClasses]),
         innerHTML: e.labelText
       }, null, 10, b),
-      e.$attrs.required ? (s(), i("span", {
+      e.$attrs.required ? (s(), i("sup", {
         key: 0,
         class: l(["uikit-absolute -uikit-top-[0.3rem]", [
           { "uikit-text-w-secondary": e.disabled },
           { "uikit-text-w-red": e.isValid === !1 },
-          { "uikit-text-w-pink": (e.isValid || e.isValid === null) && !e.disabled }
+          { "uikit-text-w-primary": (e.isValid || e.isValid === null) && !e.disabled }
         ]])
       }, " *", 2)) : u("", !0)
     ], 10, k));