@wikicasa-dev/components 2.1.3 → 2.1.4-alpha.10

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

@@ -0,0 +1,152 @@
+import { defineComponent as E, mergeModels as C, useModel as O, ref as k, watch as y, createElementBlock as w, openBlock as r, createElementVNode as M, createVNode as p, withCtx as u, Fragment as h, renderList as D, createBlock as U, createTextVNode as x, toDisplayString as V, renderSlot as P } from "vue";
+import R from "./BaseButton.vue.js";
+import B from "./BaseInput.vue.js";
+import '../../../../assets/packages/components/lib/UIKit/BaseInput.css';/* empty css               */
+import I from "./BaseDropDown.vue.js";
+import L from "./BaseSelect/SelectItem.vue.js";
+const j = { class: "uikit-shadow-surface uikit-flex uikit-h-[360px] uikit-w-[330px] uikit-flex-col uikit-justify-between uikit-rounded-2xs uikit-bg-white uikit-pt-md" }, z = { class: "uikit-relative uikit-flex uikit-gap-x-md uikit-border-b uikit-border-solid uikit-border-w-lightgray uikit-px-md uikit-pb-xs" }, F = { class: "uikit-z-10 uikit-h-[55px] uikit-bg-w-cultured uikit-px-md uikit-py-xs" }, Q = /* @__PURE__ */ E({
+  __name: "InputDropdown",
+  props: /* @__PURE__ */ C({
+    leftSelectOptions: { default: () => [] },
+    rightSelectOptions: { default: () => [] },
+    submitBtnLabel: {}
+  }, {
+    leftValue: { default: () => ({ id: -1, label: "" }) },
+    leftValueModifiers: {},
+    rightValue: { default: () => ({ id: -1, label: "" }) },
+    rightValueModifiers: {}
+  }),
+  emits: /* @__PURE__ */ C(["submit"], ["update:leftValue", "update:rightValue"]),
+  setup(f, { emit: K }) {
+    const a = O(
+      f,
+      "leftValue"
+    ), d = O(
+      f,
+      "rightValue"
+    ), v = k(!1), m = k(!1), g = k(!1), b = k(!1), $ = (i) => ({
+      id: -1,
+      label: i ? `${i}` : ""
+    }), S = (i, e = []) => {
+      if (!i) return null;
+      const t = e.find(
+        (o) => o.id === i.id || o.label === i.label
+      );
+      return t || null;
+    }, N = K;
+    return y(
+      a,
+      (i) => {
+        const e = S(i, f.leftSelectOptions);
+        e && (a.value = e);
+      },
+      { immediate: !0, deep: !0 }
+    ), y(
+      d,
+      (i) => {
+        const e = S(i, f.rightSelectOptions);
+        e && (d.value = e);
+      },
+      { immediate: !0, deep: !0 }
+    ), (i, e) => (r(), w("div", j, [
+      M("div", z, [
+        p(I, {
+          "toggle-dropdown": m.value,
+          "onUpdate:toggleDropdown": e[1] || (e[1] = (t) => m.value = t),
+          class: "!uikit-static",
+          "dropdown-classes": "!uikit-shadow-none uikit-top-[70px] !uikit-border-none !uikit-rounded-none",
+          "disable-space-handler": "",
+          "onUpdate:selectedIdx": e[2] || (e[2] = (t) => a.value = i.leftSelectOptions[t]),
+          "onUpdate:dropdownState": e[3] || (e[3] = (t) => v.value = t)
+        }, {
+          btn_slot: u(({ toggleDropdown: t, setActiveIdx: o }) => [
+            p(B, {
+              "model-value": a.value.label,
+              "label-text": "Min",
+              onClick: (l) => {
+                l.stopPropagation(), v.value || t(), g.value && (b.value = !0);
+              },
+              onKeyup: (l) => o(-1),
+              "onUpdate:modelValue": e[0] || (e[0] = (l) => {
+                a.value = $(l);
+              })
+            }, null, 8, ["model-value", "onClick", "onKeyup"])
+          ]),
+          default: u(({ activeIdx: t, toggleDropdown: o, setActiveIdx: l }) => [
+            (r(!0), w(h, null, D(i.leftSelectOptions, (s, n) => (r(), U(L, {
+              key: `left-option-${n}`,
+              class: "uikit-rounded-3xs uikit-p-xs uikit-text-16",
+              active: t === n,
+              onClick: (c) => {
+                a.value = s, o();
+              },
+              onMouseover: (c) => l(n)
+            }, {
+              default: u(() => [
+                x(V(s.label), 1)
+              ]),
+              _: 2
+            }, 1032, ["active", "onClick", "onMouseover"]))), 128))
+          ]),
+          _: 1
+        }, 8, ["toggle-dropdown"]),
+        p(I, {
+          "toggle-dropdown": b.value,
+          "onUpdate:toggleDropdown": e[5] || (e[5] = (t) => b.value = t),
+          "disable-space-handler": "",
+          class: "!uikit-static",
+          "dropdown-classes": "uikit-left-0 !uikit-shadow-none uikit-top-[70px] !uikit-border-none !uikit-rounded-none",
+          "onUpdate:selectedIdx": e[6] || (e[6] = (t) => d.value = i.rightSelectOptions[t]),
+          "onUpdate:dropdownState": e[7] || (e[7] = (t) => g.value = t)
+        }, {
+          btn_slot: u(({ toggleDropdown: t, setActiveIdx: o }) => [
+            p(B, {
+              "model-value": d.value.label,
+              "label-text": "Max",
+              onClick: (l) => {
+                l.stopPropagation(), g.value || t(), v.value && (m.value = !0);
+              },
+              onKeyup: (l) => o(-1),
+              "onUpdate:modelValue": e[4] || (e[4] = (l) => {
+                d.value = $(l);
+              })
+            }, null, 8, ["model-value", "onClick", "onKeyup"])
+          ]),
+          default: u(({ activeIdx: t, toggleDropdown: o, setActiveIdx: l }) => [
+            (r(!0), w(h, null, D(i.rightSelectOptions, (s, n) => (r(), U(L, {
+              key: `left-option-${n}`,
+              class: "uikit-rounded-3xs uikit-p-xs uikit-text-16",
+              active: t === n,
+              onClick: (c) => {
+                d.value = s, o();
+              },
+              onMouseover: (c) => l(n)
+            }, {
+              default: u(() => [
+                x(V(s.label), 1)
+              ]),
+              _: 2
+            }, 1032, ["active", "onClick", "onMouseover"]))), 128))
+          ]),
+          _: 1
+        }, 8, ["toggle-dropdown"])
+      ]),
+      M("div", F, [
+        P(i.$slots, "submitBtn", {}, () => [
+          p(R, {
+            class: "uikit-w-full",
+            onClick: e[8] || (e[8] = (t) => N("submit", t))
+          }, {
+            default: u(() => [
+              x(V(i.submitBtnLabel), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ])
+    ]));
+  }
+});
+export {
+  Q as default
+};

package/dist/packages/components/lib/UIKit/Navigation/NavigationBar.vue.js

@@ -0,0 +1,21 @@
+import { defineComponent as a, createBlock as o, openBlock as n, unref as t, withCtx as i, createVNode as u, renderSlot as r } from "vue";
+import { NavigationMenuRoot as s, NavigationMenuList as l } from "reka-ui";
+const x = /* @__PURE__ */ a({
+  __name: "NavigationBar",
+  setup(f) {
+    return (e, k) => (n(), o(t(s), null, {
+      default: i(() => [
+        u(t(l), { class: "uikit-navigation-bar-shadow uikit-mx-2xs uikit-flex uikit-w-fit uikit-list-none uikit-gap-x-xs uikit-p-xs uikit-text" }, {
+          default: i(() => [
+            r(e.$slots, "default")
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  x as default
+};

package/dist/packages/components/lib/UIKit/Navigation/NavigationBarItem.vue.js

@@ -0,0 +1,48 @@
+import { defineComponent as l, createBlock as k, openBlock as p, unref as e, withCtx as a, createVNode as c, normalizeClass as o, renderSlot as u, withDirectives as m, createElementVNode as d, vShow as f } from "vue";
+import { NavigationMenuItem as v, NavigationMenuLink as b } from "reka-ui";
+const x = /* @__PURE__ */ l({
+  __name: "NavigationBarItem",
+  props: {
+    as: { type: [Object, Function, String], default: "a" },
+    activeBorderPosition: {},
+    active: { type: Boolean, default: !1 },
+    href: {},
+    value: {}
+  },
+  emits: ["select"],
+  setup(h, { emit: s }) {
+    const r = s;
+    return (t, i) => (p(), k(e(v), null, {
+      default: a(() => [
+        c(e(b), {
+          as: t.as,
+          class: o([
+            "uikit-relative uikit-flex uikit-min-w-[56px] uikit-flex-col uikit-items-center uikit-gap-y-2xs uikit-bg-transparent hover:uikit-cursor-pointer data-[active]:uikit-font-medium data-[active]:uikit-text-w-blue",
+            t.activeBorderPosition === "top" ? "uikit-pb-2xs uikit-pt-sm" : "uikit-pb-sm uikit-pt-2xs"
+          ]),
+          active: t.active,
+          href: t.href,
+          onSelect: i[0] || (i[0] = (n) => r("select", n))
+        }, {
+          default: a(() => [
+            u(t.$slots, "icon"),
+            u(t.$slots, "label"),
+            m(d("div", {
+              class: o([
+                "uikit-absolute uikit-left-1/2 uikit-h-2xs uikit-w-[56px] -uikit-translate-x-1/2 uikit-bg-w-blue",
+                t.activeBorderPosition === "top" ? "uikit-top-0 uikit-rounded-t-3xs" : "uikit-bottom-0 uikit-rounded-b-3xs"
+              ])
+            }, null, 2), [
+              [f, t.active]
+            ])
+          ]),
+          _: 3
+        }, 8, ["as", "class", "active", "href"])
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  x as default
+};

package/dist/packages/components/lib/UIKit/Radio/RadioButton.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as k, useId as m, computed as c, createElementBlock as f, openBlock as p, withModifiers as l, createElementVNode as n, normalizeClass as s, createTextVNode as b, toDisplayString as h } from "vue";
-const C = ["id", "name", "checked"], V = ["for"], y = /* @__PURE__ */ k({
+import { defineComponent as k, useId as m, computed as c, createElementBlock as b, openBlock as f, withModifiers as l, createElementVNode as n, normalizeClass as s, createTextVNode as p, toDisplayString as h } from "vue";
+const C = ["id", "name", "checked"], g = ["for"], v = /* @__PURE__ */ k({
   __name: "RadioButton",
   props: {
     id: {},
@@ -20,7 +20,7 @@ const C = ["id", "name", "checked"], V = ["for"], y = /* @__PURE__ */ k({
       };
       o("change", e), o("update:modelValue", !i.modelValue);
     };
-    return (e, t) => (p(), f("div", {
+    return (e, t) => (f(), b("div", {
       class: "uikit-inline-block",
       onClick: l(r, ["stop"])
     }, [
@@ -37,22 +37,22 @@ const C = ["id", "name", "checked"], V = ["for"], y = /* @__PURE__ */ k({
         }, ["prevent"]))
       }, null, 40, C),
       n("label", {
-        class: s([e.labelClasses, "uikit-flex uikit-cursor-pointer uikit-items-center uikit-text-sm"]),
+        class: s([e.labelClasses, "uikit-inline-flex uikit-cursor-pointer uikit-items-center uikit-gap-x-sm uikit-text-16"]),
         for: u.value
       }, [
         n("span", {
-          class: s(["uikit-flex-no-shrink uikit-mr-2 uikit-inline-block uikit-h-4 uikit-w-4 uikit-transform uikit-rounded-full uikit-border uikit-border-solid uikit-border-w-secondary uikit-transition-colors uikit-duration-200", [
+          class: s(["uikit-flex-no-shrink uikit-inline-block uikit-size-[20px] uikit-transform uikit-rounded-full uikit-border uikit-border-solid uikit-border-w-lightgray uikit-transition-colors uikit-duration-200", [
             {
-              "checked uikit-border-w-primary uikit-bg-w-primary uikit-shadow-[0_0_0_2px_white_inset]": e.modelValue
+              "checked uikit-border-w-blue uikit-bg-w-blue uikit-shadow-[0_0_0_3px_white_inset]": e.modelValue
             },
             e.inputClasses
           ]])
         }, null, 2),
-        b(" " + h(e.label), 1)
-      ], 10, V)
+        p(" " + h(e.label), 1)
+      ], 10, g)
     ]));
   }
 });
 export {
-  y as default
+  v as default
 };

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

@@ -0,0 +1,93 @@
+import { defineComponent as g, mergeModels as c, useModel as k, createBlock as m, openBlock as a, unref as h, normalizeClass as y, withCtx as d, createElementBlock as p, Fragment as v, renderList as I, renderSlot as C, createTextVNode as M, toDisplayString as V } from "vue";
+import { ToggleGroupRoot as b } from "reka-ui";
+import S from "./SegmentedControlItem.vue.js";
+const E = /* @__PURE__ */ g({
+  __name: "SegmentedControl",
+  props: /* @__PURE__ */ c({
+    items: { default: () => [] },
+    type: { default: "single" }
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(i) {
+    const o = k(i, "modelValue");
+    let u = null, r = null;
+    const s = (e = 0, l = 0) => {
+      u = e, r = l;
+      const t = [];
+      for (let n = e; n <= l; n++)
+        t.push(i.items[n]);
+      o.value = t;
+    }, f = (e = 0) => {
+      if (i.type === "single") {
+        o.value = i.items[e];
+        return;
+      }
+      if (i.items[e].single) {
+        u = null, r = null, o.value = [i.items[e]];
+        return;
+      }
+      if (u === null && r === null) {
+        s(e, i.items.length);
+        return;
+      }
+      const l = Math.min(u ?? 1 / 0, r ?? 1 / 0), t = Math.max(
+        u ?? -1 / 0,
+        r ?? -1 / 0
+      );
+      if (e < l) {
+        s(e, t);
+        return;
+      }
+      if (e > t) {
+        s(l, e);
+        return;
+      }
+      if (e === l || e === t) {
+        s(e, e);
+        return;
+      }
+      s(l, e);
+    };
+    return (e, l) => (a(), m(h(b), {
+      type: e.type,
+      class: y([
+        "uikit-rounded-2xs uikit-border uikit-border-solid uikit-border-w-lightgray uikit-text-16",
+        {
+          "uikit-grid uikit-grid-cols-2": e.items.length === 2
+        },
+        {
+          "uikit-grid uikit-grid-cols-3": e.items.length === 3
+        },
+        {
+          "uikit-flex *:uikit-px-md *:uikit-py-sm [&_>_*:first-child]:uikit-px-sm [&_>_*:last-child]:uikit-px-sm": e.items.length === 6
+        }
+      ]),
+      "model-value": o.value
+    }, {
+      default: d(() => [
+        (a(!0), p(v, null, I(e.items, (t, n) => (a(), m(S, {
+          key: `segmented-control-item-${n}`,
+          theme: e.items.length === 6 ? "square" : "rounded",
+          value: t,
+          onClick: ($) => f(n)
+        }, {
+          default: d(() => [
+            C(e.$slots, "item", {}, () => [
+              M(V(t.label), 1)
+            ])
+          ]),
+          _: 2
+        }, 1032, ["theme", "value", "onClick"]))), 128))
+      ]),
+      _: 3
+    }, 8, ["type", "class", "model-value"]));
+  }
+});
+export {
+  E as default
+};

package/dist/packages/components/lib/UIKit/SegmentedControl/SegmentedControlItem.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent as t, createBlock as i, openBlock as a, unref as u, normalizeClass as o, withCtx as r, renderSlot as s } from "vue";
+import { ToggleGroupItem as d } from "reka-ui";
+const m = /* @__PURE__ */ t({
+  __name: "SegmentedControlItem",
+  props: {
+    value: {},
+    as: {},
+    theme: { default: "rounded" }
+  },
+  setup(n) {
+    return (e, l) => (a(), i(u(d), {
+      value: e.value,
+      as: e.as,
+      class: o(["uikit-h-[46px] uikit-w-full uikit-appearance-none uikit-bg-transparent uikit-outline-none [font-size:inherit] focus-visible:uikit-shadow-[0_0_0_2px_#2b5dff] data-[active]:uikit-border data-[active]:uikit-border-solid data-[active]:uikit-border-w-blue data-[active]:uikit-bg-w-ghost data-[active]:uikit-font-medium data-[active]:uikit-text-w-blue", [
+        { "uikit-rounded-2xs": e.theme === "rounded" },
+        {
+          "first:uikit-rounded-l-2xs last:uikit-rounded-r-2xs": e.theme === "square"
+        }
+      ]])
+    }, {
+      default: r(() => [
+        s(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["value", "as", "class"]));
+  }
+});
+export {
+  m as default
+};

package/dist/packages/components/lib/UIKit/ShimmerLoader/BaseShimmerLoader.vue.js

@@ -1,21 +1,22 @@
-import { defineComponent as i, createElementBlock as s, openBlock as l, normalizeClass as t, createElementVNode as r, renderSlot as a } from "vue";
-const m = /* @__PURE__ */ i({
+import { defineComponent as i, createElementBlock as s, openBlock as l, normalizeStyle as r, normalizeClass as t, createElementVNode as a, renderSlot as o } from "vue";
+const d = /* @__PURE__ */ i({
   inheritAttrs: !1,
   __name: "BaseShimmerLoader",
   props: {
     shimmerClasses: { default: "" }
   },
-  setup(o) {
-    return (e, u) => (l(), s("div", {
-      class: t(["uikit-relative uikit-overflow-hidden uikit-bg-w-lavender", e.$attrs.class])
+  setup(u) {
+    return (e, m) => (l(), s("div", {
+      class: t(["uikit-shimmer-loader uikit-relative uikit-overflow-hidden uikit-rounded-3xs uikit-bg-w-cultured", e.$attrs.class]),
+      style: r(e.$attrs.style)
     }, [
-      r("div", {
+      a("div", {
         class: t(["shimmer uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-top-0 uikit-h-full -uikit-translate-x-full", e.shimmerClasses])
       }, null, 2),
-      a(e.$slots, "default", {}, void 0, !0)
-    ], 2));
+      o(e.$slots, "default")
+    ], 6));
   }
 });
 export {
-  m as default
+  d as default
 };

package/dist/packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js

@@ -1,6 +1,7 @@
-import { defineComponent as i, createElementBlock as n, openBlock as r, Fragment as s, renderList as l, createBlock as a, normalizeStyle as m, normalizeClass as o } from "vue";
-import u from "../../../../../UIKit/ShimmerLoader/BaseShimmerLoader.js";
-const c = /* @__PURE__ */ i({
+import { defineComponent as i, createElementBlock as n, openBlock as r, Fragment as s, renderList as l, createBlock as m, normalizeStyle as a, normalizeClass as o } from "vue";
+import u from "./BaseShimmerLoader.vue.js";
+import '../../../../../assets/packages/components/lib/UIKit/ShimmerLoader/BaseShimmerLoader.css';/* empty css                       */
+const k = /* @__PURE__ */ i({
   __name: "ShimmerMultiLine",
   props: {
     lines: { default: 1 },
@@ -9,21 +10,21 @@ const c = /* @__PURE__ */ i({
     inheritHeight: { type: Boolean, default: !1 }
   },
   setup(h) {
-    return (e, d) => (r(!0), n(s, null, l(e.lines, (t) => (r(), a(u, {
+    return (e, f) => (r(!0), n(s, null, l(e.lines, (t) => (r(), m(u, {
+      key: `sml-${t}`,
       ref_for: !0,
       ref: "shimmerLines",
       class: o(["shimmer-line", [
         e.shimmerClasses,
-        e.inheritHeight ? "uikit-h-[1em]" : "uikit-h-8",
-        "uikit-mb-2 uikit-rounded-xs"
+        e.inheritHeight ? "uikit-h-[1em]" : "uikit-h-xl",
+        "uikit-mb-xs uikit-rounded-xs"
       ]]),
-      key: `sml-${t}`,
-      style: m({
+      style: a({
         marginRight: e.randomLength ? `${Math.round(Math.random() * 5) * 10}%` : 0
       })
     }, null, 8, ["class", "style"]))), 128));
   }
 });
 export {
-  c as default
+  k as default
 };

package/dist/packages/components/lib/UIKit/Tab/BaseTabItem.vue.js

@@ -0,0 +1,39 @@
+import { defineComponent as n, createBlock as r, openBlock as l, resolveDynamicComponent as a, normalizeClass as e, withCtx as k, renderSlot as p, withDirectives as c, createElementVNode as m, vShow as d } from "vue";
+const v = /* @__PURE__ */ n({
+  __name: "BaseTabItem",
+  props: {
+    component: { type: [Object, Function, String], default: "button" },
+    activeBorderPosition: { default: "bottom" },
+    isActive: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(b, { emit: o }) {
+    const s = o;
+    return (t, i) => (l(), r(a(t.component), {
+      class: e([
+        "uikit-relative uikit-min-w-[56px] uikit-bg-transparent uikit-text hover:uikit-cursor-pointer",
+        {
+          "uikit-font-semibold uikit-text-w-blue": t.isActive
+        },
+        t.activeBorderPosition === "top" ? "uikit-pb-2xs uikit-pt-sm" : "uikit-pb-sm uikit-pt-2xs"
+      ]),
+      onClick: i[0] || (i[0] = (u) => s("click", u))
+    }, {
+      default: k(() => [
+        p(t.$slots, "default"),
+        c(m("div", {
+          class: e([
+            "uikit-absolute uikit-left-1/2 uikit-h-2xs uikit-w-[56px] -uikit-translate-x-1/2 uikit-bg-w-blue",
+            t.activeBorderPosition === "top" ? "uikit-top-0 uikit-rounded-t-3xs" : "uikit-bottom-0 uikit-rounded-b-3xs"
+          ])
+        }, null, 2), [
+          [d, t.isActive]
+        ])
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  v as default
+};

package/dist/packages/components/lib/UIKit/Tab/BaseTabList.vue.js

@@ -1,43 +1,46 @@
-import { defineComponent as p, inject as l, createElementBlock as r, openBlock as a, normalizeClass as o, Fragment as m, renderList as h, unref as i, createBlock as y, createCommentVNode as C, toDisplayString as _, resolveDynamicComponent as f } from "vue";
-const v = ["aria-labelledby"], B = ["id", "data-cy", "aria-selected", "aria-controls", "tabindex", "onClick"], F = { key: 0 }, $ = /* @__PURE__ */ p({
+import { defineComponent as C, inject as n, createElementBlock as o, openBlock as i, normalizeClass as l, Fragment as u, renderList as h, unref as s, createBlock as c, withCtx as k, createCommentVNode as v, toDisplayString as _, resolveDynamicComponent as f } from "vue";
+import B from "./BaseTabItem.vue.js";
+const F = ["aria-labelledby", "data-cy"], L = { key: 0 }, D = /* @__PURE__ */ C({
   __name: "BaseTabList",
   props: {
+    dataCy: {},
     uid: {},
-    tabListClasses: { default: "" }
+    tabListClasses: {},
+    activeBorderPosition: {}
   },
   emits: ["tabClick"],
-  setup(L, { emit: c }) {
-    const d = l("tabs"), s = l("isTabActive"), b = l("handleClick"), u = c;
-    return (n, g) => (a(), r("div", {
+  setup($, { emit: d }) {
+    const b = n("tabs"), r = n("isTabActive"), m = n("handleClick"), p = d;
+    return (t, T) => (i(), o("div", {
       role: "tablist",
-      "aria-labelledby": `tablist-${n.uid}`,
-      class: o(n.tabListClasses)
+      "aria-labelledby": `tablist-${t.uid}`,
+      class: l(t.tabListClasses),
+      "data-cy": t.dataCy
     }, [
-      (a(!0), r(m, null, h(i(d), (e, t) => (a(), r("button", {
+      (i(!0), o(u, null, h(s(b), (e, a) => (i(), c(B, {
         id: e.tabId,
-        key: t,
+        key: a,
+        "active-border-position": t.activeBorderPosition,
+        "is-active": s(r)(a),
         "data-cy": e["data-cy"],
         type: "button",
         role: "tab",
-        "aria-selected": i(s)(t),
-        "aria-controls": `base-tab-panel-${t}-${n.uid}`,
-        tabindex: i(s)(t) ? void 0 : -1,
-        class: o([
-          "uikit-bg-transparent uikit-p-5px",
-          {
-            "uikit-border-b-2 uikit-border-solid uikit-border-w-primary uikit-font-semibold": i(s)(t)
-          },
-          e.class
-        ]),
-        onClick: (k) => {
-          i(b)(t, e), u("tabClick", k, t, e);
+        "aria-selected": s(r)(a),
+        "aria-controls": `base-tab-panel-${a}-${t.uid}`,
+        tabindex: s(r)(a) ? void 0 : -1,
+        class: l(e.class),
+        onClick: (y) => {
+          s(m)(a, e), p("tabClick", y, a, e);
         }
-      }, [
-        e["header-title"] ? (a(), r("span", F, _(e["header-title"]), 1)) : e.renderFn.children && e.renderFn.children.header ? (a(), y(f(e.renderFn.children.header), { key: 1 })) : C("", !0)
-      ], 10, B))), 128))
-    ], 10, v));
+      }, {
+        default: k(() => [
+          e["header-title"] ? (i(), o("span", L, _(e["header-title"]), 1)) : e.renderFn.children && e.renderFn.children.header ? (i(), c(f(e.renderFn.children.header), { key: 1 })) : v("", !0)
+        ]),
+        _: 2
+      }, 1032, ["id", "active-border-position", "is-active", "data-cy", "aria-selected", "aria-controls", "tabindex", "class", "onClick"]))), 128))
+    ], 10, F));
   }
 });
 export {
-  $ as default
+  D as default
 };