sit-onyx 1.1.0-dev-20250926121514 → 1.1.0-dev-20250929141520

package/dist/index.js

@@ -1,4 +1,4 @@
-import { computed as m, provide as Re, inject as ve, toRef as ie, ref as V, watch as Y, defineComponent as A, watchEffect as Ie, toRefs as ro, createElementBlock as v, openBlock as i, normalizeClass as I, unref as l, renderSlot as C, onMounted as Oe, createBlock as _, resolveDynamicComponent as Ce, withCtx as S, createVNode as B, createElementVNode as y, withModifiers as Me, readonly as Et, reactive as io, onBeforeMount as Bt, onBeforeUnmount as ht, useId as pe, toValue as Q, shallowRef as Ue, nextTick as Ve, useTemplateRef as J, createCommentVNode as k, createTextVNode as W, toDisplayString as T, normalizeProps as ze, mergeProps as E, Fragment as G, isProxy as xa, toRaw as ka, useAttrs as wa, customRef as Sa, onUnmounted as Lt, normalizeStyle as Te, useSlots as ce, createSlots as _e, isRef as Ee, renderList as de, toHandlers as $a, resolveComponent as Ca, withDirectives as xe, guardReactiveProps as Je, vShow as Yt, Teleport as st, vModelCheckbox as en, vModelText as co, h as le, vModelDynamic as tn, withKeys as Ao, createStaticVNode as Ea, useModel as Ba } from "vue";
+import { computed as m, provide as Re, inject as ve, toRef as ie, ref as V, watch as Y, defineComponent as A, watchEffect as Ie, toRefs as ro, createElementBlock as f, openBlock as i, normalizeClass as I, unref as l, renderSlot as C, onMounted as Oe, createBlock as _, resolveDynamicComponent as Ce, withCtx as S, createVNode as B, createElementVNode as y, withModifiers as Me, readonly as Et, reactive as io, onBeforeMount as Bt, onBeforeUnmount as ht, useId as pe, toValue as Q, shallowRef as Ue, nextTick as Ve, useTemplateRef as J, createCommentVNode as k, createTextVNode as W, toDisplayString as T, normalizeProps as ze, mergeProps as E, Fragment as G, isProxy as xa, toRaw as ka, useAttrs as wa, customRef as Sa, onUnmounted as Lt, normalizeStyle as Te, useSlots as ce, createSlots as _e, isRef as Ee, renderList as de, toHandlers as $a, resolveComponent as Ca, withDirectives as xe, guardReactiveProps as Je, vShow as Yt, Teleport as st, vModelCheckbox as en, vModelText as co, h as le, vModelDynamic as tn, withKeys as Ao, createStaticVNode as Ea, useModel as Ba } from "vue";
 import { iconChevronDownSmall as Oa, iconCircleAttention as uo, iconXSmall as De, iconX as po, iconMoreHorizontalSmall as on, iconCircleCheck as Aa, iconCircleX as nn, iconCircleInformation as Jt, iconUser as Ma, iconArrowSmallUpRight as Ta, iconChevronRightSmall as an, iconArrowSmallLeft as ln, iconHome as Ia, iconMoreHorizontal as Mo, iconSearch as La, iconCheck as Ra, iconSearchX as Va, iconChevronDownUp as Na, iconCheckSmall as bt, iconChevronLeftSmall as sn, iconPlusSmall as za, iconEyeDisabled as Da, iconListArrowUp as rn, iconListArrowDown as cn, iconArrowsSort as Fa, iconCircleBlock as Pa, iconFileDisabled as Ua, iconEyeClosed as Ha, iconEye as Ga, iconCircleContrast as qa, iconTranslate as Ka, iconMenu as ja, iconMoreVertical as un, iconNotificationFlag as Wa, iconMinus as Ya, iconPlus as Ja, iconFile as Za, iconFilePdf as Xa, iconFileCsv as Qa, iconAudio as el, iconVideocam as tl, iconPicture as ol, iconFileRtf as nl, iconFilePpt as al, iconFileXls as ll, iconFileXlsx as sl, iconFileDoc as rl, iconFileGlobe as il, iconFileArchive as cl, iconFileText as ul, iconCloudArrowUp as dl, iconTrash as pl, iconShareIos as ml, iconArrowSmallRight as yl, iconSettings as fl, iconLogout as vl } from "@sit-onyx/icons";
 const bp = ["compact", "default", "cozy"], F = (n) => ({
   densityClass: m(() => ({ [`onyx-density-${n.density}`]: !!n.density }))
@@ -36,22 +36,22 @@ const bp = ["compact", "default", "cozy"], F = (n) => ({
       emit: o,
       key: "modelValue",
       default: () => []
-    }), { disabled: r, exclusive: u } = ro(e), c = ne(e), { densityClass: d } = F(e), p = (f, b) => {
+    }), { disabled: r, exclusive: u } = ro(e), c = ne(e), { densityClass: d } = F(e), p = (v, b) => {
       if (!b) {
-        if (!s.value.includes(f)) return;
-        s.value = s.value.filter((h) => h !== f);
+        if (!s.value.includes(v)) return;
+        s.value = s.value.filter((h) => h !== v);
         return;
       }
       if (u.value) {
-        s.value = [f];
+        s.value = [v];
         return;
       }
-      s.value.includes(f) || (s.value = s.value.concat(f));
+      s.value.includes(v) || (s.value = s.value.concat(v));
     };
     return Y(
       u,
-      (f) => {
-        if (f && s.value.length > 1) {
+      (v) => {
+        if (v && s.value.length > 1) {
           const b = s.value.at(-1);
           s.value = b != null ? [b] : [];
         }
@@ -63,7 +63,7 @@ const bp = ["compact", "default", "cozy"], F = (n) => ({
       updateOpen: p,
       disabled: r,
       skeleton: c
-    }), (f, b) => (i(), v(
+    }), (v, b) => (i(), f(
       "div",
       {
         class: I([
@@ -74,7 +74,7 @@ const bp = ["compact", "default", "cozy"], F = (n) => ({
         ])
       },
       [
-        C(f.$slots, "default")
+        C(v.$slots, "default")
       ],
       2
       /* CLASS */
@@ -99,7 +99,7 @@ const gl = ["innerHTML"], z = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n;
-    return (e, o) => (i(), v("figure", {
+    return (e, o) => (i(), f("figure", {
       class: I({
         "onyx-component": !0,
         "onyx-icon": !0,
@@ -121,7 +121,7 @@ const gl = ["innerHTML"], z = /* @__PURE__ */ A({
 }, Z = /* @__PURE__ */ A({
   __name: "OnyxSkeleton",
   setup(n) {
-    return Oe(() => wl("onyx-skeleton")), (t, e) => (i(), v("figure", Sl));
+    return Oe(() => wl("onyx-skeleton")), (t, e) => (i(), f("figure", Sl));
   }
 }), $l = ["open"], Cl = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"], El = { class: "onyx-accordion-item__header-content" }, Bl = ["id", "aria-labelledby"], xp = /* @__PURE__ */ A({
   __name: "OnyxAccordionItem",
@@ -134,16 +134,16 @@ const gl = ["innerHTML"], z = /* @__PURE__ */ A({
   setup(n) {
     const t = n, e = ve(mn, void 0), o = m({
       get: () => e?.openItems.value.includes(t.value),
-      set: (f) => e?.updateOpen(t.value, f)
+      set: (v) => e?.updateOpen(t.value, v)
     });
     Y(
       () => t.value,
-      (f, b) => {
-        e?.updateOpen(f, e?.openItems.value.includes(f)), e?.updateOpen(b, !1);
+      (v, b) => {
+        e?.updateOpen(v, e?.openItems.value.includes(v)), e?.updateOpen(b, !1);
       }
     );
     const a = ne(t), { densityClass: s } = F(t), r = m(() => e?.disabled.value || t.disabled), u = m(() => e?.type.value ?? "default"), c = m(() => `header-${t.value.toString()}`), d = m(() => `panel-${t.value.toString()}`), p = m(() => a.value || e?.skeleton.value);
-    return (f, b) => p.value ? (i(), _(Ce(u.value === "card" ? Z : "div"), {
+    return (v, b) => p.value ? (i(), _(Ce(u.value === "card" ? Z : "div"), {
       key: 0,
       class: I([
         "onyx-component",
@@ -158,7 +158,7 @@ const gl = ["innerHTML"], z = /* @__PURE__ */ A({
       ]),
       _: 1
       /* STABLE */
-    }, 8, ["class"])) : (i(), v("details", {
+    }, 8, ["class"])) : (i(), f("details", {
       key: 1,
       class: I([
         "onyx-component",
@@ -179,7 +179,7 @@ const gl = ["innerHTML"], z = /* @__PURE__ */ A({
         onClick: b[0] || (b[0] = Me((h) => o.value = !o.value, ["prevent"]))
       }, [
         y("div", El, [
-          C(f.$slots, "header")
+          C(v.$slots, "header")
         ]),
         B(z, {
           icon: l(Oa),
@@ -192,7 +192,7 @@ const gl = ["innerHTML"], z = /* @__PURE__ */ A({
         role: "region",
         "aria-labelledby": c.value
       }, [
-        C(f.$slots, "default")
+        C(v.$slots, "default")
       ], 8, Bl)
     ], 10, $l));
   }
@@ -449,7 +449,7 @@ const ds = (n, t) => Object.entries(n).every(
     activeOption: c,
     onToggle: d,
     onSelect: p,
-    onActivateFirst: f,
+    onActivateFirst: v,
     onActivateLast: b,
     onActivateNext: h,
     onActivatePrevious: g,
@@ -460,7 +460,7 @@ const ds = (n, t) => Object.entries(n).every(
       w.value !== "none" && t?.(Se.value);
     }, N = gn((R) => e?.(R)), K = (R) => {
       p?.(R), l(O) || d?.();
-    }, H = (R) => {
+    }, U = (R) => {
       switch (R.key) {
         case "ArrowUp":
           if (R.preventDefault(), c.value == null)
@@ -469,11 +469,11 @@ const ds = (n, t) => Object.entries(n).every(
           break;
         case "ArrowDown":
           if (R.preventDefault(), c.value == null)
-            return f?.();
+            return v?.();
           h?.(c.value);
           break;
         case "Home":
-          R.preventDefault(), f?.();
+          R.preventDefault(), v?.();
           break;
         case "End":
           R.preventDefault(), b?.();
@@ -481,7 +481,7 @@ const ds = (n, t) => Object.entries(n).every(
       }
     }, X = (R) => {
       if (R.key === "Enter" && R.preventDefault(), !M.value && eo(R, _n))
-        return d?.(), R.key === " " && R.preventDefault(), R.key === "End" ? b?.() : f?.();
+        return d?.(), R.key === " " && R.preventDefault(), R.key === "End" ? b?.() : v?.();
       if (vs(R, w.value === "none"))
         return K(c.value);
       if (M.value && eo(R, xn))
@@ -492,13 +492,13 @@ const ds = (n, t) => Object.entries(n).every(
         !M.value && d?.();
         return;
       }
-      return H(R);
+      return U(R);
     }, ue = m(() => w.value === "none" ? null : {
       "aria-autocomplete": w.value,
       type: "text"
     }), {
       elements: { option: P, group: D, listbox: te },
-      internals: { getOptionId: U }
+      internals: { getOptionId: H }
     } = fs({
       label: s,
       description: r,
@@ -535,7 +535,7 @@ const ds = (n, t) => Object.entries(n).every(
           "aria-expanded": M.value,
           "aria-controls": x,
           "aria-label": l(a),
-          "aria-activedescendant": c.value != null ? U(c.value) : void 0,
+          "aria-activedescendant": c.value != null ? H(c.value) : void 0,
           onInput: L,
           onKeydown: X,
           ...ue.value
@@ -618,7 +618,7 @@ const ds = (n, t) => Object.entries(n).every(
         b.preventDefault(), c(!1);
         break;
     }
-  }, f = m(() => {
+  }, v = m(() => {
     if (Q(n.trigger) === "hover")
       return {
         onMouseenter: () => c(!0),
@@ -636,7 +636,7 @@ const ds = (n, t) => Object.entries(n).every(
         id: t,
         onKeydown: p,
         ref: o,
-        ...f.value
+        ...v.value
       })),
       button: m(
         () => ({
@@ -725,17 +725,17 @@ const ds = (n, t) => Object.entries(n).every(
       s.parentElement?.querySelectorAll('[role="tab"]') ?? []
     ).filter((b) => b.ariaDisabled !== "true"), u = r.indexOf(s), c = (b) => {
       b instanceof HTMLElement && b.focus();
-    }, d = () => c(r.at(0)), p = () => c(r.at(-1)), f = (b) => {
+    }, d = () => c(r.at(0)), p = () => c(r.at(-1)), v = (b) => {
       if (u === -1) return;
       const h = b === "next" ? u + 1 : u - 1;
       return h < 0 ? p() : h >= r.length ? d() : c(r.at(h));
     };
     switch (a.key) {
       case "ArrowRight":
-        f("next");
+        v("next");
         break;
       case "ArrowLeft":
-        f("previous");
+        v("previous");
         break;
       case "Home":
         d();
@@ -904,7 +904,7 @@ const ds = (n, t) => Object.entries(n).every(
       // non-modal dialog needs custom support for this
       disabled: m(() => !r.value || e.nonDismissible),
       listener: (d) => vn(d, { key: "Escape" }) && o("update:open", !1)
-    }), (d, p) => e.open ? (i(), v("dialog", {
+    }), (d, p) => e.open ? (i(), f("dialog", {
       key: 0,
       ref: "dialogRef",
       class: I([
@@ -991,7 +991,7 @@ const ds = (n, t) => Object.entries(n).every(
   },
   setup(n) {
     const t = n, { t: e } = q(), { navigate: o, isActive: a } = rt();
-    return (s, r) => (i(), v("a", {
+    return (s, r) => (i(), f("a", {
       class: I([
         "onyx-component",
         "onyx-router-link",
@@ -1026,8 +1026,8 @@ const ds = (n, t) => Object.entries(n).every(
   },
   setup(n) {
     const t = n, { t: e } = q(), o = ne(t), a = m(() => t.hash ? Cs(t.hash) : void 0), s = m(() => t.showAs ?? t.is), r = async (u) => {
-      const { origin: c, pathname: d, search: p } = window.location, f = `${c}${d}${p}#${u}`;
-      await navigator.clipboard.writeText(f);
+      const { origin: c, pathname: d, search: p } = window.location, v = `${c}${d}${p}#${u}`;
+      await navigator.clipboard.writeText(v);
     };
     return (u, c) => l(o) ? (i(), _(Z, {
       key: 0,
@@ -1116,7 +1116,7 @@ const ds = (n, t) => Object.entries(n).every(
       },
       16
       /* FULL_PROPS */
-    )) : (i(), v("button", {
+    )) : (i(), f("button", {
       key: 1,
       ref: "buttonRef",
       disabled: l(o) || t.loading,
@@ -1152,7 +1152,7 @@ const ds = (n, t) => Object.entries(n).every(
         t.icon ? (i(), _(z, {
           key: 0,
           icon: t.icon
-        }, null, 8, ["icon"])) : (i(), v(
+        }, null, 8, ["icon"])) : (i(), f(
           G,
           { key: 1 },
           [
@@ -1319,7 +1319,7 @@ const ds = (n, t) => Object.entries(n).every(
           key: 0,
           icon: t.icon
         }, null, 8, ["icon"])) : k("v-if", !0),
-        t.hideLabel ? k("v-if", !0) : (i(), v(
+        t.hideLabel ? k("v-if", !0) : (i(), f(
           "span",
           Ds,
           T(t.label),
@@ -1431,14 +1431,14 @@ const ds = (n, t) => Object.entries(n).every(
   }), Lt(() => {
     window.removeEventListener("scroll", p, !0);
   });
-  const f = V(!0);
+  const v = V(!0);
   return Bt(() => {
-    f.value = "CSS" in globalThis && typeof CSS < "u" && CSS.supports("anchor-name: --test") && CSS.supports("position-area: top");
+    v.value = "CSS" in globalThis && typeof CSS < "u" && CSS.supports("anchor-name: --test") && CSS.supports("position-area: top");
   }), {
     leftPosition: u,
     topPosition: c,
     updateAnchorPositionPolyfill: p,
-    useragentSupportsAnchorApi: f
+    useragentSupportsAnchorApi: v
   };
 }, An = (n, t, e = "center") => {
   const a = V(e);
@@ -1462,8 +1462,8 @@ const ds = (n, t) => Object.entries(n).every(
         a.value = e;
         return;
       }
-      const p = (d.width - c.width + 32) / 2, f = d.width - c.width + 16, b = window.innerWidth, h = c.left, g = b - c.right, $ = h >= p, x = g >= p;
-      e === "right" && h >= f || e === "left" && g >= f || e === "center" && $ && x ? a.value = e : h > g ? a.value = "right" : a.value = "left";
+      const p = (d.width - c.width + 32) / 2, v = d.width - c.width + 16, b = window.innerWidth, h = c.left, g = b - c.right, $ = h >= p, x = g >= p;
+      e === "right" && h >= v || e === "left" && g >= v || e === "center" && $ && x ? a.value = e : h > g ? a.value = "right" : a.value = "left";
     }
   };
 }, fo = (n, t = "bottom") => {
@@ -1526,12 +1526,12 @@ const ds = (n, t) => Object.entries(n).every(
           return u.value + " span-left";
       }
       return u.value;
-    }), f = J("popover"), b = J("popoverWrapper"), { openDirection: h, updateOpenDirection: g } = fo(b, "bottom"), { openAlignment: $, updateOpenAlignment: x } = An(
+    }), v = J("popover"), b = J("popoverWrapper"), { openDirection: h, updateOpenDirection: g } = fo(b, "bottom"), { openAlignment: $, updateOpenAlignment: x } = An(
       b,
-      f,
+      v,
       "left"
     ), { leftPosition: w, topPosition: M, updateAnchorPositionPolyfill: O, useragentSupportsAnchorApi: L } = On({
-      positionedRef: f,
+      positionedRef: v,
       targetRef: b,
       positionArea: u,
       alignment: c,
@@ -1539,24 +1539,24 @@ const ds = (n, t) => Object.entries(n).every(
       fitParent: !1,
       offset: 8
     }), { width: N } = He(b), K = (R) => {
-      R ? f.value?.showPopover?.() : f.value?.hidePopover?.();
-    }, H = () => {
+      R ? v.value?.showPopover?.() : v.value?.hidePopover?.();
+    }, U = () => {
       g(), x();
     };
     Ye({
       type: "resize",
-      listener: () => H()
+      listener: () => U()
     }), Oe(() => {
-      K(r.value), H(), L.value || O();
+      K(r.value), U(), L.value || O();
     }), Y(r, async (R) => {
-      await Ve(), K(R), H(), L.value || O();
+      await Ve(), K(R), U(), L.value || O();
     });
     const X = () => {
       s.value = !s.value, a("update:open", !r.value);
     }, ue = m(() => ({
       onClick: X,
       "aria-expanded": r.value,
-      "aria-controls": f.value?.id,
+      "aria-controls": v.value?.id,
       "aria-haspopup": !0,
       disabled: d.value
     })), P = pe(), D = m(() => `--anchor-${P}`), te = m(() => ({
@@ -1569,9 +1569,9 @@ const ds = (n, t) => Object.entries(n).every(
     Y(d, () => {
       d.value && (s.value = !1);
     }), Y([u, c, N], async () => {
-      L.value || (await Ve(), H(), O());
+      L.value || (await Ve(), U(), O());
     });
-    const U = m(() => {
+    const H = m(() => {
       const R = o.fitParent ? `${N.value}px` : void 0;
       return L.value ? {
         width: R,
@@ -1583,7 +1583,7 @@ const ds = (n, t) => Object.entries(n).every(
         top: M.value
       };
     });
-    return (R, Se) => (i(), v(
+    return (R, Se) => (i(), f(
       "div",
       {
         ref: "popoverWrapper",
@@ -1598,7 +1598,7 @@ const ds = (n, t) => Object.entries(n).every(
           "aria-label": o.label,
           popover: "manual",
           class: I(["onyx-basic-popover__dialog", te.value]),
-          style: Te(U.value)
+          style: Te(H.value)
         }, [
           C(R.$slots, "content")
         ], 14, Ps)
@@ -1632,28 +1632,28 @@ const ds = (n, t) => Object.entries(n).every(
       disabled: m(() => e.disabled),
       position: m(() => u.value?.includes("top") ? "top" : "bottom")
     });
-    return (f, b) => (i(), _(vo, E(l(fe)(l(c), { ref: r.value }), {
+    return (v, b) => (i(), _(vo, E(l(fe)(l(c), { ref: r.value }), {
       class: "onyx-component onyx-flyout-menu",
       open: l(a),
       label: e.label,
       alignment: e.alignment,
-      disabled: f.disabled
+      disabled: n.disabled
     }), _e({
       content: S(() => [
         y("div", Us, [
-          C(f.$slots, "header")
+          C(v.$slots, "header")
         ]),
-        s.options ? (i(), v(
+        s.options ? (i(), f(
           "ul",
           E({ key: 0 }, l(p), { class: "onyx-flyout-menu__wrapper onyx-flyout-menu__group" }),
           [
-            C(f.$slots, "options")
+            C(v.$slots, "options")
           ],
           16
           /* FULL_PROPS */
         )) : k("v-if", !0),
         y("div", Hs, [
-          C(f.$slots, "footer")
+          C(v.$slots, "footer")
         ])
       ]),
       _: 2
@@ -1662,7 +1662,7 @@ const ds = (n, t) => Object.entries(n).every(
       s.options || s.header || s.footer ? {
         name: "default",
         fn: S(() => [
-          C(f.$slots, "button", { trigger: l(d) })
+          C(v.$slots, "button", { trigger: l(d) })
         ]),
         key: "0"
       } : void 0
@@ -1688,7 +1688,7 @@ const ds = (n, t) => Object.entries(n).every(
       key: "open",
       default: !1
     }), c = m(() => !!a.default), d = m(() => c.value ? u.value ? po : on : e.icon);
-    return (p, f) => !c.value || l(r) ? (i(), _(to, E({
+    return (p, v) => !c.value || l(r) ? (i(), _(to, E({
       key: 0,
       class: ["onyx-fab", `onyx-fab--${e.alignment}`]
     }, e, {
@@ -1697,7 +1697,7 @@ const ds = (n, t) => Object.entries(n).every(
     }), null, 16, ["class", "icon", "skeleton"])) : (i(), _(je, {
       key: 1,
       open: l(u),
-      "onUpdate:open": f[0] || (f[0] = (b) => Ee(u) ? u.value = b : null),
+      "onUpdate:open": v[0] || (v[0] = (b) => Ee(u) ? u.value = b : null),
       label: e.label,
       trigger: "click",
       class: I(["onyx-fab", `onyx-fab--${e.alignment}`, l(s)]),
@@ -1730,7 +1730,7 @@ const ds = (n, t) => Object.entries(n).every(
     const t = n, { densityClass: e } = F(t), {
       elements: { listItem: o, menuItem: a }
     } = yo();
-    return (s, r) => (i(), v(
+    return (s, r) => (i(), f(
       "li",
       E({
         class: ["onyx-component", "onyx-fab-item", l(e)]
@@ -1787,7 +1787,7 @@ const ds = (n, t) => Object.entries(n).every(
       alignment: o.value
     }, {
       default: S(() => [
-        (i(!0), v(
+        (i(!0), f(
           G,
           null,
           de(l(t).items.value, (r) => (i(), _(
@@ -1817,7 +1817,7 @@ const ds = (n, t) => Object.entries(n).every(
   viewBox: "0 0 50 50"
 };
 function Ys(n, t) {
-  return i(), v("svg", Ws, [...t[0] || (t[0] = [
+  return i(), f("svg", Ws, [...t[0] || (t[0] = [
     y(
       "circle",
       {
@@ -1834,7 +1834,7 @@ function Ys(n, t) {
 }
 const Js = /* @__PURE__ */ Vt(js, [["render", Ys]]), Zs = {}, Xs = { class: "onyx-component onyx-loading-dots" };
 function Qs(n, t) {
-  return i(), v("div", Xs, [...t[0] || (t[0] = [
+  return i(), f("div", Xs, [...t[0] || (t[0] = [
     y(
       "span",
       { class: "onyx-loading-dots__center" },
@@ -1894,14 +1894,14 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
     const e = J("rippleTriggerRef"), { ripples: o, hideRipple: a, events: s } = er(e);
     return t({
       events: s
-    }), (r, u) => (i(), v(
+    }), (r, u) => (i(), f(
       "span",
       tr,
       [
-        (i(!0), v(
+        (i(!0), f(
           G,
           null,
-          de(l(o), ([c, d]) => (i(), v("span", {
+          de(l(o), ([c, d]) => (i(), f("span", {
             key: c,
             class: "onyx-ripple__element",
             style: Te({
@@ -2006,7 +2006,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   emits: ["close"],
   setup(n, { emit: t }) {
     const e = n, o = t, a = ce(), { t: s } = q(), { densityClass: r } = F(e);
-    return (u, c) => (i(), v(
+    return (u, c) => (i(), f(
       "div",
       {
         class: I(["onyx-component", "onyx-info-card", `onyx-info-card--${e.color}`, l(r)])
@@ -2041,10 +2041,10 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
             color: e.color === "neutral" ? "soft" : "medium",
             onClick: c[0] || (c[0] = (d) => o("close"))
           }, null, 8, ["icon", "label", "color"])) : k("v-if", !0),
-          a.default ? (i(), v("p", sr, [
+          a.default ? (i(), f("p", sr, [
             C(u.$slots, "default")
           ])) : k("v-if", !0),
-          a.buttons ? (i(), v("div", rr, [
+          a.buttons ? (i(), f("div", rr, [
             C(u.$slots, "buttons")
           ])) : k("v-if", !0)
         ])
@@ -2137,8 +2137,8 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   __name: "OnyxNotifications",
   setup(n) {
     const t = dr();
-    return (e, o) => l(t).notifications.value.length ? (i(), v("dialog", pr, [
-      (i(!0), v(
+    return (e, o) => l(t).notifications.value.length ? (i(), f("dialog", pr, [
+      (i(!0), f(
         G,
         null,
         de(l(t).notifications.value, ({ id: a, ...s }) => (i(), _(
@@ -2158,7 +2158,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
             s.buttons?.length ? {
               name: "buttons",
               fn: S(() => [
-                (i(!0), v(
+                (i(!0), f(
                   G,
                   null,
                   de(s.buttons, (r) => (i(), _(
@@ -2231,17 +2231,17 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
                 1
                 /* TEXT */
               ),
-              e.clickable ? k("v-if", !0) : (i(), v("button", {
+              e.clickable ? k("v-if", !0) : (i(), f("button", {
                 key: 0,
                 type: "button",
                 "aria-label": l(a)("close"),
                 class: "onyx-toast-message__close",
-                onClick: p[0] || (p[0] = (f) => o("close"))
+                onClick: p[0] || (p[0] = (v) => o("close"))
               }, [
                 B(z, { icon: l(De) }, null, 8, ["icon"])
               ], 8, br))
             ]),
-            e.description ? (i(), v(
+            e.description ? (i(), f(
               "p",
               gr,
               T(e.description),
@@ -2250,14 +2250,14 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
             )) : k("v-if", !0)
           ])
         ]),
-        r.value ? (i(), v(
+        r.value ? (i(), f(
           "time",
           {
             key: e.duration,
             "aria-hidden": "true",
             class: "onyx-toast-message__progress-bar",
             style: Te({ animationDuration: `${e.duration}ms` }),
-            onAnimationend: p[1] || (p[1] = (f) => o("close"))
+            onAnimationend: p[1] || (p[1] = (v) => o("close"))
           },
           null,
           36
@@ -2309,8 +2309,8 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   __name: "OnyxToast",
   setup(n) {
     const t = xr();
-    return (e, o) => l(t).toasts.value.length ? (i(), v("dialog", kr, [
-      (i(!0), v(
+    return (e, o) => l(t).toasts.value.length ? (i(), f("dialog", kr, [
+      (i(!0), f(
         G,
         null,
         de(l(t).toasts.value, ({ id: a, ...s }) => (i(), _(
@@ -2335,13 +2335,13 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n, e = ce();
-    return (o, a) => (i(), v(
+    return (o, a) => (i(), f(
       "div",
       {
         class: I(["onyx-component onyx-app", { "onyx-app--horizontal": t.navBarAlignment === "left" }])
       },
       [
-        e.navBar ? (i(), v("div", Sr, [
+        e.navBar ? (i(), f("div", Sr, [
           C(o.$slots, "navBar")
         ])) : k("v-if", !0),
         y("div", $r, [
@@ -2372,7 +2372,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       // reset image error if image changes
       () => t.src,
       () => u.value = !1
-    ), (c, d) => (i(), v("figure", {
+    ), (c, d) => (i(), f("figure", {
       class: I([
         "onyx-component",
         "onyx-avatar",
@@ -2382,17 +2382,17 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       title: r.value,
       "aria-label": r.value
     }, [
-      t.src && !u.value ? (i(), v("img", {
+      t.src && !u.value ? (i(), f("img", {
         key: 0,
         class: "onyx-avatar__image",
         src: t.src,
         alt: r.value,
         onError: d[0] || (d[0] = (p) => u.value = !0)
-      }, null, 40, Er)) : (i(), v(
+      }, null, 40, Er)) : (i(), f(
         G,
         { key: 1 },
         [
-          s.value ? (i(), v(
+          s.value ? (i(), f(
             "div",
             Br,
             T(s.value),
@@ -2412,7 +2412,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
 }), Or = { class: "onyx-component onyx-avatar-stack" }, Ar = /* @__PURE__ */ A({
   __name: "OnyxAvatarStack",
   setup(n) {
-    return (t, e) => (i(), v("div", Or, [
+    return (t, e) => (i(), f("div", Or, [
       C(t.$slots, "default")
     ]));
   }
@@ -2426,7 +2426,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n, { densityClass: e } = F(t);
-    return (o, a) => (i(), v(
+    return (o, a) => (i(), f(
       "div",
       {
         class: I(["onyx-component onyx-badge", [
@@ -2438,7 +2438,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
         ]])
       },
       [
-        t.dot ? k("v-if", !0) : (i(), v(
+        t.dot ? k("v-if", !0) : (i(), f(
           G,
           { key: 0 },
           [
@@ -2464,7 +2464,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n, { densityClass: e } = F(t);
-    return (o, a) => (i(), v(
+    return (o, a) => (i(), f(
       "div",
       {
         class: I([
@@ -2499,8 +2499,8 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
         const u = Do(n.parentRef.value), c = Do(n.listRef.value);
         a.value > 0 && (r -= a.value + u), t.value = [], e.value = [];
         const d = Array.from(s.entries());
-        Q(n.direction) === "ltr" && d.reverse(), d.forEach(([p, f], b, { length: h }) => {
-          r -= f + (b > 0 ? c : 0), r >= 0 || // check if last element fits if more indicator would be hidden
+        Q(n.direction) === "ltr" && d.reverse(), d.forEach(([p, v], b, { length: h }) => {
+          r -= v + (b > 0 ? c : 0), r >= 0 || // check if last element fits if more indicator would be hidden
           b === h - 1 && r + a.value >= 0 ? t.value.push(p) : e.value.push(p);
         });
       },
@@ -2583,7 +2583,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n, { densityClass: e } = F(t);
-    return (o, a) => (i(), v(
+    return (o, a) => (i(), f(
       "li",
       {
         class: I({
@@ -2630,7 +2630,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       key: "open",
       default: !1
     }), d = J("backButtonRef"), p = J("menuItemRef"), {
-      elements: { listItem: f, menuItem: b }
+      elements: { listItem: v, menuItem: b }
     } = yo({
       onOpen: async () => {
         x.value && (c.value = !0, await Ve(), d.value?.$el.querySelector("button").focus());
@@ -2661,7 +2661,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
         color: s.color,
         disabled: s.disabled,
         class: ["onyx-menu-item", { "onyx-menu-item--open": l(c) }]
-      }, l(fe)(l(f), l(o))), {
+      }, l(fe)(l(v), l(o))), {
         default: S(() => [
           xe(B(ct, E({
             ref: "menuItemRef",
@@ -2688,7 +2688,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
                   )
                 ])
               ]),
-              x.value ? (i(), v("div", Nr, [
+              x.value ? (i(), f("div", Nr, [
                 B(z, {
                   icon: l(an),
                   size: "24px"
@@ -2700,7 +2700,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
           }, 16, ["disabled", "link"]), [
             [Yt, !l(c)]
           ]),
-          x.value ? xe((i(), v(
+          x.value ? xe((i(), f(
             "ul",
             zr,
             [
@@ -2751,11 +2751,11 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n, { restAttrs: e, rootAttrs: o } = ge(), { densityClass: a } = F(t), { currentRoute: s } = rt(), r = ne(t), { componentRef: u, isVisible: c } = Nn(zn), d = ve(Dn, void 0), p = m(() => t.href && t.active === "auto" ? t.href === s.value?.path : t.active);
-    return (f, b) => (i(), v(
+    return (v, b) => (i(), f(
       G,
       null,
       [
-        l(c) || p.value ? (i(), v(
+        l(c) || p.value ? (i(), f(
           "li",
           E({
             key: 0,
@@ -2781,7 +2781,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
               "aria-current": p.value ? "page" : void 0
             }, l(e)), {
               default: S(() => [
-                C(f.$slots, "default")
+                C(v.$slots, "default")
               ]),
               _: 3
               /* FORWARDED */
@@ -2800,7 +2800,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
             active: p.value
           }, l(e)), {
             default: S(() => [
-              C(f.$slots, "default")
+              C(v.$slots, "default")
             ]),
             _: 3
             /* FORWARDED */
@@ -2883,7 +2883,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n, { t: e } = q(), { densityClass: o } = F(t);
-    return Rt(t), Re(Dn, J("moreListRef")), (a, s) => (i(), v("nav", {
+    return Rt(t), Re(Dn, J("moreListRef")), (a, s) => (i(), f("nav", {
       class: I([
         "onyx-component",
         "onyx-breadcrumb",
@@ -2898,10 +2898,10 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
           class: "onyx-breadcrumb__home",
           href: t.home?.link ?? "/",
           "aria-label": t.home?.label ?? l(e)("breadcrumb.home"),
-          skeleton: a.skeleton
+          skeleton: n.skeleton
         }, {
           default: S(() => [
-            t.home?.label ? (i(), v(
+            t.home?.label ? (i(), f(
               G,
               { key: 1 },
               [
@@ -3104,10 +3104,10 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       step: n.props.validStepSize
     };
     if (u === "typeMismatch") {
-      const f = jr.includes(n.props.type) ? n.props.type : "generic";
+      const v = jr.includes(n.props.type) ? n.props.type : "generic";
       return {
-        longMessage: t.value(`validations.typeMismatch.${f}.fullError`, p),
-        shortMessage: t.value(`validations.typeMismatch.${f}.preview`, p)
+        longMessage: t.value(`validations.typeMismatch.${v}.fullError`, p),
+        shortMessage: t.value(`validations.typeMismatch.${v}.preview`, p)
       };
     }
     return {
@@ -3168,26 +3168,26 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       isVisible: r
     })), d = m(() => typeof e.trigger == "object" ? e.trigger.type : e.trigger), p = m(
       () => e.position === "auto" ? N.value : e.position
-    ), f = m(
-      () => e.alignment === "auto" ? H.value : e.alignment
+    ), v = m(
+      () => e.alignment === "auto" ? U.value : e.alignment
     ), b = m(() => {
       let ke = p.value;
-      return (p.value === "top" || p.value === "bottom") && w.value && (f.value === "left" && (ke = p.value + " x-start"), f.value === "right" && (ke = p.value + " x-end")), ke;
+      return (p.value === "top" || p.value === "bottom") && w.value && (v.value === "left" && (ke = p.value + " x-start"), v.value === "right" && (ke = p.value + " x-end")), ke;
     }), h = () => d.value === "hover" ? ws(u.value) : ks(c.value), g = Ue(h());
     Y(d, () => g.value = h());
-    const $ = m(() => g.value?.elements.tooltip), x = m(() => Q(g.value?.elements.trigger)), w = m(() => e.alignsWithEdge), M = m(() => e.fitParent), O = J("tooltipWrapperRefEl"), L = J("tooltipRefEl"), { openDirection: N, updateOpenDirection: K } = fo(O, "top"), { openAlignment: H, updateOpenAlignment: X } = An(O, L), { leftPosition: ue, topPosition: P, updateAnchorPositionPolyfill: D, useragentSupportsAnchorApi: te } = On({
+    const $ = m(() => g.value?.elements.tooltip), x = m(() => Q(g.value?.elements.trigger)), w = m(() => e.alignsWithEdge), M = m(() => e.fitParent), O = J("tooltipWrapperRefEl"), L = J("tooltipRefEl"), { openDirection: N, updateOpenDirection: K } = fo(O, "top"), { openAlignment: U, updateOpenAlignment: X } = An(O, L), { leftPosition: ue, topPosition: P, updateAnchorPositionPolyfill: D, useragentSupportsAnchorApi: te } = On({
       positionedRef: L,
       targetRef: O,
       positionArea: p,
-      alignment: f,
+      alignment: v,
       alignsWithEdge: w,
       fitParent: M
-    }), U = () => {
+    }), H = () => {
       K(), X();
     };
     Ye({
       type: "resize",
-      listener: () => U()
+      listener: () => H()
     });
     const R = (ke) => {
       ke ? L.value?.showPopover?.() : L.value?.hidePopover?.();
@@ -3198,17 +3198,17 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       "onyx-tooltip--aligns-with-edge": w.value,
       "onyx-tooltip--hidden": !r.value,
       [`onyx-tooltip--position-${p.value.replace(" ", "-")}`]: !0,
-      [`onyx-tooltip--alignment-${f.value}`]: !0,
+      [`onyx-tooltip--alignment-${v.value}`]: !0,
       "onyx-tooltip--dont-support-anchor": !te.value,
       "onyx-tooltip--without-wedge": e.withoutWedge
     })), { width: he } = He(O), Qe = m(
       () => e.fitParent && O.value ? `${he.value}px` : "max-content"
     );
     Oe(() => {
-      R(r.value), U(), te.value || D();
+      R(r.value), H(), te.value || D();
     }), Y(r, async (ke) => {
-      await Ve(), R(ke), U(), te.value || D();
-    }), Y([Qe, p, f, w], async () => {
+      await Ve(), R(ke), H(), te.value || D();
+    }), Y([Qe, p, v, w], async () => {
       te.value || (await Ve(), D());
     });
     const et = pe(), me = m(() => `--anchor-${et}`), kt = m(() => te.value ? {
@@ -3220,7 +3220,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       left: ue.value,
       top: P.value
     });
-    return (ke, Eo) => (i(), v(
+    return (ke, Eo) => (i(), f(
       "div",
       {
         ref: "tooltipWrapperRefEl",
@@ -3270,8 +3270,8 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n, e = m(() => Gn(t.errorMessages)), o = J("targetRef");
-    return (a, s) => (i(), v("div", Yr, [
-      !e.value || t.disabled ? (i(), v(
+    return (a, s) => (i(), f("div", Yr, [
+      !e.value || t.disabled ? (i(), f(
         "div",
         Jr,
         null,
@@ -3333,8 +3333,8 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       emit: a,
       key: "modelValue",
       default: !1
-    }), { vCustomValidity: c, errorMessages: d } = Pe({ props: o, emit: a }), { densityClass: p } = F(o), { disabled: f, requiredMarker: b } = be(o), h = ne(o), { requiredMarkerClass: g, requiredTypeClass: $ } = zt(o, b), x = m(() => o.hideLabel ? o.label : void 0), w = J("inputRef");
-    return t({ input: w }), Ae(w, o), (M, O) => l(h) ? (i(), v(
+    }), { vCustomValidity: c, errorMessages: d } = Pe({ props: o, emit: a }), { densityClass: p } = F(o), { disabled: v, requiredMarker: b } = be(o), h = ne(o), { requiredMarkerClass: g, requiredTypeClass: $ } = zt(o, b), x = m(() => o.hideLabel ? o.label : void 0), w = J("inputRef");
+    return t({ input: w }), Ae(w, o), (M, O) => l(h) ? (i(), f(
       "div",
       E({
         key: 0,
@@ -3351,7 +3351,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       /* FULL_PROPS */
     )) : (i(), _(bo, E({
       key: 1,
-      disabled: l(f),
+      disabled: l(v),
       "error-messages": l(d)
     }, l(s)), {
       default: S(() => [
@@ -3364,7 +3364,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
               key: 0,
               class: "onyx-checkbox__loading",
               type: "circle"
-            })) : xe((i(), v("input", E({
+            })) : xe((i(), f("input", E({
               key: 1,
               ref: "inputRef",
               "onUpdate:modelValue": O[0] || (O[0] = (L) => Ee(u) ? u.value = L : null),
@@ -3372,7 +3372,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
               class: "onyx-checkbox__input",
               type: "checkbox",
               indeterminate: o.indeterminate,
-              disabled: l(f),
+              disabled: l(v),
               required: o.required,
               value: o.value,
               autofocus: o.autofocus
@@ -3381,7 +3381,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
               [l(c)]
             ])
           ]),
-          o.hideLabel ? k("v-if", !0) : (i(), v(
+          o.hideLabel ? k("v-if", !0) : (i(), f(
             G,
             { key: 0 },
             [
@@ -3398,7 +3398,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
                 3
                 /* TEXT, CLASS */
               ),
-              o.truncation === "ellipsis" ? (i(), v(
+              o.truncation === "ellipsis" ? (i(), f(
                 "div",
                 {
                   key: 0,
@@ -3467,7 +3467,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       emit: t,
       key: "open"
     }), s = m(() => typeof e.trigger == "object" ? e.trigger.type : e.trigger);
-    return (r, u) => (i(), v("span", ti, [
+    return (r, u) => (i(), f("span", ti, [
       s.value === "click" ? (i(), _(ft, E({ key: 0 }, e, {
         open: l(a),
         "onUpdate:open": u[0] || (u[0] = (c) => Ee(a) ? a.value = c : null)
@@ -3485,7 +3485,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
         ]),
         _: 1
         /* STABLE */
-      }, 16, ["open"])) : (i(), v(
+      }, 16, ["open"])) : (i(), f(
         G,
         { key: 1 },
         [
@@ -3555,7 +3555,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       u.value = w ? [...u.value, x] : u.value.filter((M) => M !== x);
     }, d = m(
       () => o.options.filter((x) => !x.disabled && !x.skeleton).map(({ value: x }) => x)
-    ), { disabled: p, requiredMarker: f } = be(o), b = ne(o), h = qn(
+    ), { disabled: p, requiredMarker: v } = be(o), b = ne(o), h = qn(
       d,
       m(() => u.value),
       (x) => u.value = x
@@ -3565,12 +3565,12 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
     }), $ = J("checkboxesRef");
     return t({
       inputs: m(() => (Array.isArray($.value) ? $.value : [$.value]).flatMap((w) => w?.input).filter((w) => !!w))
-    }), (x, w) => (i(), v("fieldset", {
+    }), (x, w) => (i(), f("fieldset", {
       class: I(["onyx-component", "onyx-checkbox-group", l(a)]),
       disabled: l(p),
       "aria-label": o.label
     }, [
-      o.hideLabel ? k("v-if", !0) : (i(), v("legend", ni, [
+      o.hideLabel ? k("v-if", !0) : (i(), f("legend", ni, [
         B(Fe, { is: "h3" }, {
           default: S(() => [
             W(
@@ -3597,7 +3597,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
           }])
         },
         [
-          l(b) ? typeof l(b) == "number" ? (i(!0), v(
+          l(b) ? typeof l(b) == "number" ? (i(!0), f(
             G,
             { key: 1 },
             de(l(b), (M) => (i(), _(mt, {
@@ -3608,20 +3608,20 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
             }, null, 8, ["label", "value"]))),
             128
             /* KEYED_FRAGMENT */
-          )) : k("v-if", !0) : (i(), v(
+          )) : k("v-if", !0) : (i(), f(
             G,
             { key: 0 },
             [
               o.withCheckAll ? (i(), _(mt, E({
                 key: 0,
-                "required-marker": l(f)
+                "required-marker": l(v)
               }, l(h).state.value, {
                 label: g.value,
                 value: "all",
                 class: "onyx-checkbox-group__option onyx-checkbox-group__check-all",
                 "onUpdate:modelValue": l(h).handleChange
               }), null, 16, ["required-marker", "label", "onUpdate:modelValue"])) : k("v-if", !0),
-              (i(!0), v(
+              (i(!0), f(
                 G,
                 null,
                 de(o.options, (M) => (i(), _(mt, E({
@@ -3629,7 +3629,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
                 }, { ref_for: !0 }, M, {
                   ref_for: !0,
                   ref: "checkboxesRef",
-                  "required-marker": l(f),
+                  "required-marker": l(v),
                   truncation: M.truncation ?? o.truncation,
                   "model-value": l(u).includes(M.value),
                   class: "onyx-checkbox-group__option",
@@ -3661,7 +3661,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n, e = ce(), { densityClass: o } = F(t);
-    return (a, s) => (i(), v(
+    return (a, s) => (i(), f(
       "div",
       {
         class: I(["onyx-component", "onyx-empty", l(o)])
@@ -3676,7 +3676,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
         y("div", ai, [
           C(a.$slots, "default")
         ]),
-        e.buttons ? (i(), v("div", li, [
+        e.buttons ? (i(), f("div", li, [
           C(a.$slots, "buttons")
         ])) : k("v-if", !0)
       ],
@@ -3707,16 +3707,16 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
     const t = n, e = ce(), { t: o } = q(), { densityClass: a } = F(t), s = m(() => o.value("table.empty")), r = J("tableRef"), { height: u, width: c } = He(r), d = m(() => ({
       "--onyx-table-observed-height": `${u.value}px`,
       "--onyx-table-observed-width": `${c.value}px`
-    })), p = pe(), f = m(() => e.headline ? p : void 0);
-    return (b, h) => (i(), v(
+    })), p = pe(), v = m(() => e.headline ? p : void 0);
+    return (b, h) => (i(), f(
       "div",
       {
         class: "onyx-table-wrapper onyx-component",
         style: Te(d.value)
       },
       [
-        e.headline || e.actions ? (i(), v("div", si, [
-          y("div", { id: f.value }, [
+        e.headline || e.actions ? (i(), f("div", si, [
+          y("div", { id: v.value }, [
             C(b.$slots, "headline")
           ], 8, ri),
           y("div", ii, [
@@ -3729,7 +3729,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
             { "onyx-table-wrapper__container--no-scroll": t.withPageScrolling }
           ],
           tabindex: t.withPageScrolling ? void 0 : 0
-        }, b.scrollContainerAttrs), [
+        }, n.scrollContainerAttrs), [
           y("table", {
             ref: "tableRef",
             class: I(["onyx-table onyx-text", [
@@ -3739,24 +3739,24 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
               },
               l(a)
             ]]),
-            "aria-labelledby": f.value
+            "aria-labelledby": v.value
           }, [
-            (i(!0), v(
+            (i(!0), f(
               G,
               null,
-              de(t.columnGroups, (g) => (i(), v("colgroup", {
+              de(t.columnGroups, (g) => (i(), f("colgroup", {
                 key: g.key,
                 span: g.span
               }, null, 8, di))),
               128
               /* KEYED_FRAGMENT */
             )),
-            e.head ? (i(), v("thead", pi, [
-              t.columnGroups?.length ? (i(), v("tr", mi, [
-                (i(!0), v(
+            e.head ? (i(), f("thead", pi, [
+              t.columnGroups?.length ? (i(), f("tr", mi, [
+                (i(!0), f(
                   G,
                   null,
-                  de(t.columnGroups, (g) => (i(), v("th", {
+                  de(t.columnGroups, (g) => (i(), f("th", {
                     key: g.key,
                     colspan: g.span,
                     scope: "colgroup",
@@ -3793,7 +3793,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
             ])
           ], 10, ui)
         ], 16, ci),
-        e.bottomLeft || e.pagination ? (i(), v("div", bi, [
+        e.bottomLeft || e.pagination ? (i(), f("div", bi, [
           y("div", null, [
             C(b.$slots, "bottomLeft")
           ]),
@@ -3829,10 +3829,10 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
     }), _e({
       head: S(() => [
         y("tr", null, [
-          (i(!0), v(
+          (i(!0), f(
             G,
             null,
-            de(t.columns, (r) => (i(), v(
+            de(t.columns, (r) => (i(), f(
               "th",
               E({
                 key: r.key
@@ -3858,25 +3858,25 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
         ])
       ]),
       default: S(() => [
-        (i(!0), v(
+        (i(!0), f(
           G,
           null,
-          de(t.rows, (r) => (i(), v(
+          de(t.rows, (r) => (i(), f(
             "tr",
             E({
               key: r.id
             }, { ref_for: !0 }, r.trAttributes),
             [
-              (i(!0), v(
+              (i(!0), f(
                 G,
                 null,
-                de(r.columns, (u) => (i(), v(
+                de(r.columns, (u) => (i(), f(
                   G,
                   {
                     key: u.key
                   },
                   [
-                    r.cells[u.key] ? (i(), v(
+                    r.cells[u.key] ? (i(), f(
                       "td",
                       E({
                         key: 0,
@@ -3938,18 +3938,18 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
       emit: a,
       key: "modelValue",
       default: ""
-    }), { rootAttrs: r, restAttrs: u } = ge(), { densityClass: c } = F(o), { t: d } = q(), p = J("inputRef"), f = m(() => d.value("select.searchPlaceholder"));
+    }), { rootAttrs: r, restAttrs: u } = ge(), { densityClass: c } = F(o), { t: d } = q(), p = J("inputRef"), v = m(() => d.value("select.searchPlaceholder"));
     return Ae(p, o), t({
       /**
        * Focuses the input.
        */
       focus: () => p.value?.focus()
-    }), (b, h) => (i(), v(
+    }), (b, h) => (i(), f(
       "div",
       E({
         class: ["onyx-component", "onyx-mini-search", l(c)]
       }, l(r), {
-        style: { "--onyx-placeholder-character-count": f.value.length }
+        style: { "--onyx-placeholder-character-count": v.value.length }
       }),
       [
         xe(y("input", E({
@@ -3957,7 +3957,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
           "onUpdate:modelValue": h[0] || (h[0] = (g) => Ee(s) ? s.value = g : null),
           autofocus: o.autofocus,
           class: "onyx-mini-search__input onyx-text",
-          placeholder: f.value,
+          placeholder: v.value,
           type: "text",
           size: "1"
         }, l(u), {
@@ -3995,7 +3995,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n, e = ce();
-    return (o, a) => (i(), v("div", Si, [
+    return (o, a) => (i(), f("div", Si, [
       y(
         "span",
         $i,
@@ -4003,7 +4003,7 @@ const oo = /* @__PURE__ */ Vt(Zs, [["render", Qs]]), Le = /* @__PURE__ */ A({
         1
         /* TEXT */
       ),
-      e.actions ? (i(), v("div", Ci, [
+      e.actions ? (i(), f("div", Ci, [
         C(o.$slots, "actions")
       ])) : k("v-if", !0)
     ]));
@@ -4132,24 +4132,24 @@ const Ei = (n, t) => {
       };
     });
     return wi(u.value, x);
-  }), d = m(() => na(r)), p = () => Ei(c.value, Q(o)), f = () => fe(
+  }), d = m(() => na(r)), p = () => Ei(c.value, Q(o)), v = () => fe(
     ...r.map(({ scrollContainerAttributes: x }) => x?.())
   ), b = () => {
     const x = r.map((O) => O.header).filter((O) => !!O), w = x.map((O) => O.actions).filter((O) => !!O), M = x.map((O) => O.wrapper).filter((O) => !!O);
     return c.value.map((O, L, N) => {
-      const K = w.flatMap((U) => U(O, L, N)), H = d.value.getFor("header", O.type.name), X = K.map(({ menuItems: U }) => U).filter((U) => !!U), ue = K.map(({ iconComponent: U }) => U), P = le(
+      const K = w.flatMap((H) => H(O, L, N)), U = d.value.getFor("header", O.type.name), X = K.map(({ menuItems: H }) => H).filter((H) => !!H), ue = K.map(({ iconComponent: H }) => H), P = le(
         je,
         {
           label: t.t.value("navigation.moreActionsFlyout", { column: O.label }),
           trigger: "click"
         },
         {
-          button: ({ trigger: U }) => le(we, {
+          button: ({ trigger: H }) => le(we, {
             class: K.length > 1 ? "onyx-system-button--multiple-actions" : "",
             label: t.t.value("navigation.moreActionsTrigger"),
             color: "medium",
             icon: on,
-            ...U
+            ...H
           }),
           options: () => X
         }
@@ -4164,11 +4164,11 @@ const Ei = (n, t) => {
           ].filter(Boolean);
         }
       }, te = M.reduce(
-        (U, R) => le(R(O, L, N), U),
-        (U) => le(H.component, { label: O.label, ...U }, D)
+        (H, R) => le(R(O, L, N), H),
+        (H) => le(U.component, { label: O.label, ...H }, D)
       );
       return {
-        thAttributes: fe(H.thAttributes, O.thAttributes),
+        thAttributes: fe(U.thAttributes, O.thAttributes),
         key: O.key,
         width: O.width,
         component: () => le(te)
@@ -4182,14 +4182,14 @@ const Ei = (n, t) => {
       L && (M = L);
     }), M.map((O) => {
       const L = O[Tt]?.columns ?? c.value, N = L.reduce(
-        (K, { key: H, type: X, tdAttributes: ue }) => {
+        (K, { key: U, type: X, tdAttributes: ue }) => {
           const P = d.value.getFor("cell", X.name);
-          return K[H] = {
+          return K[U] = {
             component: P.component,
             props: {
-              key: H,
+              key: U,
               row: O,
-              modelValue: O[H],
+              modelValue: O[U],
               metadata: { typeOptions: X.options }
             },
             tdAttributes: fe(ue, P.tdAttributes)
@@ -4208,7 +4208,7 @@ const Ei = (n, t) => {
     const x = {};
     return r.forEach((w) => {
       w.slots && Object.entries(w.slots).forEach(([M, O]) => {
-        const L = M, N = x[L] ?? (() => []), K = O(N).filter((H) => H != null);
+        const L = M, N = x[L] ?? (() => []), K = O(N).filter((U) => U != null);
         K.length && (x[L] = () => K);
       });
     }), x;
@@ -4217,7 +4217,7 @@ const Ei = (n, t) => {
     /**
      * Takes the table attributes and maps all
      */
-    createScrollContainerAttributes: f,
+    createScrollContainerAttributes: v,
     /** Uses the column definition and available column group config to generate the column groups for the underlying OnyxTable */
     createRendererColumnGroups: p,
     /** Takes the column definition and maps all, calls mutation func and maps at the end to RendererCell */
@@ -4249,40 +4249,40 @@ const Ei = (n, t) => {
   };
 }, Oi = Symbol("Filtering"), wo = 0, Ai = (n) => (t) => {
   const { i18n: e } = t, o = ie(n?.filterState ?? {}), a = m(() => Q(n?.columns)), { isEnabled: s, isAsync: r } = ut(t, n), u = (p) => r.value ? p : p.filter(
-    (f) => Object.entries(o.value).every(
+    (v) => Object.entries(o.value).every(
       ([b, h]) => {
         const g = a.value?.[b], $ = { ...n?.filterConfig, ...g?.config };
         if (h == null || h === "") return !0;
-        let x = h.toString(), w = f[b]?.toString() ?? "";
+        let x = h.toString(), w = v[b]?.toString() ?? "";
         return $?.filterFunc ? $.filterFunc(
           x,
           w,
           b,
-          f
+          v
         ) : (w = At(w), x = At(x), $.caseSensitive || (w = w.toLowerCase(), x = x.toLowerCase()), $.searchFromStart ? w.startsWith(x) : $.exactMatch ? w === x : w.includes(x));
       }
     )
   ), c = (p) => {
     o.value[p] = "";
   }, d = (p) => {
-    let f = o.value[p] || "";
+    let v = o.value[p] || "";
     const b = (h) => {
-      h.key === "Enter" && (o.value[p] = f);
+      h.key === "Enter" && (o.value[p] = v);
     };
     return le(Wn, {
       label: e.t.value("dataGrid.head.filtering.menu.label", { column: p.toString() }),
       class: "onyx-filter-search",
       placeholder: e.t.value("dataGrid.head.filtering.menu.placeholder"),
-      modelValue: f,
+      modelValue: v,
       // TODO: check after https://github.com/SchwarzIT/onyx/issues/2982 is closed -- `autofocus` doesn't have an effect currently
       autofocus: !0,
       "onUpdate:modelValue": (h) => {
-        f = h || "";
+        v = h || "";
       },
       onClear: () => {
-        o.value[p] = "", f = "";
+        o.value[p] = "", v = "";
       },
-      onChange: () => o.value[p] = f,
+      onChange: () => o.value[p] = v,
       onKeydown: b,
       onClick: (h) => {
         h.preventDefault(), h.stopPropagation();
@@ -4374,7 +4374,7 @@ const Ei = (n, t) => {
   },
   setup(n) {
     const t = n;
-    return (e, o) => (i(), _(Ce(e.messages.hidden ? Ke : "span"), {
+    return (e, o) => (i(), _(Ce(n.messages.hidden ? Ke : "span"), {
       class: I(["onyx-component", "onyx-form-message", `onyx-form-message__${t.type}`])
     }, {
       default: S(() => [
@@ -4440,18 +4440,18 @@ const Ei = (n, t) => {
       key: "modelValue"
     }), c = m(() => {
       if (e.withCounter && e.maxlength) {
-        const p = (u.value?.toString() ?? "").length, f = typeof e.maxlength == "object" ? e.maxlength.max : e.maxlength, b = p > f;
+        const p = (u.value?.toString() ?? "").length, v = typeof e.maxlength == "object" ? e.maxlength.max : e.maxlength, b = p > v;
         return {
           length: p,
-          maxLength: f,
+          maxLength: v,
           violated: b
         };
       }
     }), d = m(() => {
-      const { errorMessages: p, successMessages: f, message: b } = e, h = {
+      const { errorMessages: p, successMessages: v, message: b } = e, h = {
         counter: c.value,
         errorMessages: p,
-        successMessages: f,
+        successMessages: v,
         message: b
       };
       for (const g in h) {
@@ -4461,23 +4461,23 @@ const Ei = (n, t) => {
       if (Object.keys(h).length !== 0)
         return h;
     });
-    return (p, f) => (i(), v(
+    return (p, v) => (i(), f(
       "div",
       {
         class: I([
           "onyx-component",
           "onyx-form-element",
           l(r),
-          p.successMessages ? "onyx-form-element--success" : void 0
+          n.successMessages ? "onyx-form-element--success" : void 0
         ])
       },
       [
-        e.hideLabel ? k("v-if", !0) : (i(), v("div", Li, [
+        e.hideLabel ? k("v-if", !0) : (i(), f("div", Li, [
           y("label", {
             for: e.id,
             class: "onyx-truncation-ellipsis"
           }, T(e.label), 9, Ri),
-          e.required ? (i(), v(
+          e.required ? (i(), f(
             "span",
             {
               key: 0,
@@ -4493,7 +4493,7 @@ const Ei = (n, t) => {
             trigger: "hover",
             text: e.labelTooltip
           }, null, 8, ["text"])) : k("v-if", !0),
-          e.required ? k("v-if", !0) : (i(), v(
+          e.required ? k("v-if", !0) : (i(), f(
             "span",
             {
               key: 2,
@@ -4507,7 +4507,7 @@ const Ei = (n, t) => {
         C(p.$slots, "default", {
           id: e.id
         }),
-        d.value ? (i(), v("div", Vi, [
+        d.value ? (i(), f("div", Vi, [
           y("span", Ni, [
             d.value.errorMessages ? (i(), _(Gt, {
               key: 0,
@@ -4528,7 +4528,7 @@ const Ei = (n, t) => {
               type: "neutral"
             }, null, 8, ["messages"])) : k("v-if", !0)
           ]),
-          d.value.counter ? (i(), v(
+          d.value.counter ? (i(), f(
             "span",
             {
               key: 0,
@@ -4576,28 +4576,28 @@ const Ei = (n, t) => {
   },
   emits: ["inputClick", "validityChange"],
   setup(n, { expose: t, emit: e }) {
-    const { rootAttrs: o, restAttrs: a } = ge(), s = n, r = e, { t: u } = q(), { vCustomValidity: c, errorMessages: d } = Pe({ props: s, emit: r }), p = m(() => Be(s.success)), f = m(() => Be(s.message)), { disabled: b, showError: h } = be(s), g = ne(s), $ = _t(h), x = m(() => s.modelValue ? s.modelValue.length : 0), w = m(() => {
-      const H = s.modelValue?.length;
-      if (!s.modelValue || !H) return "";
-      if (H === 1) return s.modelValue[0];
+    const { rootAttrs: o, restAttrs: a } = ge(), s = n, r = e, { t: u } = q(), { vCustomValidity: c, errorMessages: d } = Pe({ props: s, emit: r }), p = m(() => Be(s.success)), v = m(() => Be(s.message)), { disabled: b, showError: h } = be(s), g = ne(s), $ = _t(h), x = m(() => s.modelValue ? s.modelValue.length : 0), w = m(() => {
+      const U = s.modelValue?.length;
+      if (!s.modelValue || !U) return "";
+      if (U === 1) return s.modelValue[0];
       switch (s.textMode) {
         case "preview":
           return s.modelValue.join(", ");
         case "summary":
         default:
-          return u.value("selections.currentSelection", { n: H });
+          return u.value("selections.currentSelection", { n: U });
       }
     }), M = V(!1), { densityClass: O } = F(s), L = J("inputRef");
     t({ input: L }), Y(
       () => s.showFocus,
-      (H, X) => {
-        M.value || X && H === !1 && (M.value = !0);
+      (U, X) => {
+        M.value || X && U === !1 && (M.value = !0);
       }
     );
-    const N = _n.concat(xn), K = (H) => {
-      N.includes(H.key) || H.preventDefault();
+    const N = _n.concat(xn), K = (U) => {
+      N.includes(U.key) || U.preventDefault();
     };
-    return Ae(L, s), (H, X) => l(g) ? (i(), v(
+    return Ae(L, s), (U, X) => l(g) ? (i(), f(
       "div",
       E({
         key: 0,
@@ -4612,7 +4612,7 @@ const Ei = (n, t) => {
       ],
       16
       /* FULL_PROPS */
-    )) : (i(), v(
+    )) : (i(), f(
       "div",
       E({
         key: 1,
@@ -4626,7 +4626,7 @@ const Ei = (n, t) => {
       }, l(o)),
       [
         B(xt, E(s, {
-          message: f.value,
+          message: v.value,
           "success-messages": p.value,
           "error-messages": l(d)
         }), {
@@ -4735,7 +4735,7 @@ const Ei = (n, t) => {
       disabled: !!e.$attrs["aria-disabled"]
     }), {
       default: S(() => [
-        t.multiple ? (i(), v("input", {
+        t.multiple ? (i(), f("input", {
           key: 0,
           checked: !!e.$attrs["aria-checked"],
           "aria-labelledby": e.$attrs.id,
@@ -4847,7 +4847,7 @@ const Ei = (n, t) => {
       emit: a,
       key: "open",
       default: !1
-    }), f = J("selectRef"), { openDirection: b, updateOpenDirection: h } = fo(f), g = V(), $ = m(() => yt(c.value)), x = m(() => o.valueLabel !== void 0 ? yt(o.valueLabel) : $.value.reduce((j, re) => {
+    }), v = J("selectRef"), { openDirection: b, updateOpenDirection: h } = fo(v), g = V(), $ = m(() => yt(c.value)), x = m(() => o.valueLabel !== void 0 ? yt(o.valueLabel) : $.value.reduce((j, re) => {
       const se = o.options.find(({ value: ye }) => ye === re)?.label;
       return se && j.push(se), j;
     }, [])), w = J("miniSearchRef"), M = J("selectInputRef"), O = m(() => o.noFilter || !d.value ? o.options : o.options.filter(
@@ -4876,7 +4876,7 @@ const Ei = (n, t) => {
       }
       const se = p.value;
       p.value = !se, await Ve(), p.value && h(), se !== p.value && (se ? (d.value && (d.value = ""), j || M.value?.input?.focus()) : w.value?.focus());
-    }, H = () => g.value = N.value.at(0), X = () => g.value = N.value.at(-1), ue = (j) => {
+    }, U = () => g.value = N.value.at(0), X = () => g.value = N.value.at(-1), ue = (j) => {
       const re = N.value.findIndex((se) => se === j);
       re < N.value.length - 1 && (g.value = N.value[re + 1]);
     }, P = (j) => {
@@ -4885,7 +4885,7 @@ const Ei = (n, t) => {
     }, D = (j) => {
       const re = O.value.find((se) => se.label.toLowerCase().trim().startsWith(j.toLowerCase()));
       re && (g.value = re.value);
-    }, te = (j) => d.value = j, U = (j) => {
+    }, te = (j) => d.value = j, H = (j) => {
       if (j === L) {
         wt.value?.handleChange(!wt.value.state.value.modelValue);
         return;
@@ -4909,15 +4909,15 @@ const Ei = (n, t) => {
       multiple: et,
       activeOption: m(() => g.value),
       isExpanded: p,
-      templateRef: f,
+      templateRef: v,
       onToggle: K,
-      onActivateFirst: H,
+      onActivateFirst: U,
       onActivateLast: X,
       onActivateNext: ue,
       onActivatePrevious: P,
       onTypeAhead: D,
       onAutocomplete: te,
-      onSelect: U
+      onSelect: H
     }), Bo = () => {
       if (o.keepSelectionOrder || !c.value || !Array.isArray(c.value) || c.value.length == 0)
         return O.value;
@@ -4972,7 +4972,7 @@ const Ei = (n, t) => {
         );
       },
       { deep: !0, immediate: !0 }
-    ), (j, re) => (i(), v(
+    ), (j, re) => (i(), f(
       "div",
       Ui,
       [
@@ -4993,7 +4993,7 @@ const Ei = (n, t) => {
             }), null, 16, ["show-focus", "autofocus"])
           ]),
           content: S(() => [
-            xe((i(), v("div", Hi, [
+            xe((i(), f("div", Hi, [
               o.withSearch ? (i(), _(Wn, E({
                 key: 0,
                 ref: "miniSearchRef",
@@ -5008,7 +5008,7 @@ const Ei = (n, t) => {
                 "div",
                 ze(Je(l(Eo))),
                 [
-                  Pt.value ? (i(), v("ul", Gi, [
+                  Pt.value ? (i(), f("ul", Gi, [
                     y("li", qi, [
                       C(j.$slots, "empty", { defaultMessage: Pt.value }, () => [
                         B(Kn, {
@@ -5026,11 +5026,11 @@ const Ei = (n, t) => {
                         }, 8, ["density"])
                       ])
                     ])
-                  ])) : (i(), v(
+                  ])) : (i(), f(
                     G,
                     { key: 1 },
                     [
-                      o.multiple && o.withCheckAll && !l(d) ? (i(), v(
+                      o.multiple && o.withCheckAll && !l(d) ? (i(), f(
                         "ul",
                         E({
                           key: 0,
@@ -5065,24 +5065,24 @@ const Ei = (n, t) => {
                         16
                         /* FULL_PROPS */
                       )) : k("v-if", !0),
-                      (i(!0), v(
+                      (i(!0), f(
                         G,
                         null,
-                        de(dt.value, (se) => (i(), v(
+                        de(dt.value, (se) => (i(), f(
                           "ul",
                           E({
                             key: se.name,
                             class: "onyx-select__group"
                           }, { ref_for: !0 }, l(ke)({ label: se.name })),
                           [
-                            se.name !== "" ? (i(), v(
+                            se.name !== "" ? (i(), f(
                               "li",
                               Ki,
                               T(se.name),
                               1
                               /* TEXT */
                             )) : k("v-if", !0),
-                            (i(!0), v(
+                            (i(!0), f(
                               G,
                               null,
                               de(se.items, (ye) => (i(), _(qo, E(
@@ -5134,16 +5134,16 @@ const Ei = (n, t) => {
                 16
                 /* FULL_PROPS */
               ),
-              o.lazyLoading?.loading ? (i(), v("div", ji, [
+              o.lazyLoading?.loading ? (i(), f("div", ji, [
                 B(Le, { class: "onyx-select__loading" })
               ])) : k("v-if", !0),
-              s.optionsEnd ? (i(), v("div", Wi, [
+              s.optionsEnd ? (i(), f("div", Wi, [
                 C(j.$slots, "optionsEnd")
               ])) : k("v-if", !0)
             ])), [
               [l(ha)]
             ]),
-            o.listDescription ? (i(), v(
+            o.listDescription ? (i(), f(
               "div",
               Yi,
               T(o.listDescription),
@@ -5174,21 +5174,21 @@ const Ei = (n, t) => {
     Y(c, () => d.value = qt);
     const p = () => {
       d.value = Math.min(e.pages, d.value + qt);
-    }, f = m(() => Array.from({ length: e.pages }, ($, x) => {
+    }, v = m(() => Array.from({ length: e.pages }, ($, x) => {
       const w = x + 1;
       return {
         label: w.toString(),
         value: w
       };
     })), b = m(() => {
-      let $ = f.value;
+      let $ = v.value;
       const x = c.value.trim().toLowerCase();
       return x && ($ = $.filter((w) => Sn(w.label, x))), $.slice(0, d.value);
     }), h = m(() => e.modelValue <= 1), g = m(() => e.modelValue >= e.pages);
     return ($, x) => l(u) ? (i(), _(Z, {
       key: 0,
       class: I(["onyx-pagination-skeleton", "onyx-text", l(r)])
-    }, null, 8, ["class"])) : (i(), v("div", {
+    }, null, 8, ["class"])) : (i(), f("div", {
       key: 1,
       class: I(["onyx-component", "onyx-pagination", "onyx-text", l(r)]),
       role: "group",
@@ -5272,7 +5272,7 @@ const Ei = (n, t) => {
     o.value.selectMode = h ? "exclude" : "include", o.value.contingent.clear();
   }, d = (h, g) => {
     o.value.selectMode === "include" && h === !0 || o.value.selectMode === "exclude" && h === !1 ? o.value.contingent.add(g) : o.value.contingent.delete(g);
-  }, p = () => o.value.contingent.size !== 0 && o.value.contingent.size !== a.value, f = () => {
+  }, p = () => o.value.contingent.size !== 0 && o.value.contingent.size !== a.value, v = () => {
     const { contingent: h, selectMode: g } = o.value;
     return g === "exclude" ? h.size === 0 : h.size > 0 && h.size === a.value;
   };
@@ -5305,7 +5305,7 @@ const Ei = (n, t) => {
             indeterminate: p(),
             disabled: a.value === 0,
             "onUpdate:modelValue": (h) => c(h),
-            modelValue: f()
+            modelValue: v()
           })
         },
         cell: {
@@ -5338,14 +5338,14 @@ const Ei = (n, t) => {
     n?.paginationState ?? { current: 1, pages: 1, pageSize: n?.pageSize ?? 25 }
   ), { isEnabled: o, isAsync: a } = ut(t, n), s = m(() => n.disabled?.value ?? !1), r = m(
     () => e.value.pages > 1 || e.value.current > e.value.pageSize
-  ), u = m(() => e.value.current >= e.value.pages), c = m(() => n.loading?.value ?? !1), d = n.type ?? "select", p = V(), { vScrollEnd: f, isScrollEnd: b } = aa({
+  ), u = m(() => e.value.current >= e.value.pages), c = m(() => n.loading?.value ?? !1), d = n.type ?? "select", p = V(), { vScrollEnd: v, isScrollEnd: b } = aa({
     enabled: m(() => d === "lazy" && !u.value && !Q(n.disabled)),
     loading: c
   });
   return Y(b, (h) => {
     h && e.value.current++;
   }), Y(p, () => {
-    p.value && f.mounted(p.value);
+    p.value && v.mounted(p.value);
   }), {
     name: nc,
     watch: [e, o, a, s, t.skeleton, b, c],
@@ -5486,7 +5486,7 @@ const Ei = (n, t) => {
     withPageScrolling: { type: Boolean }
   },
   setup(n) {
-    const t = n, e = q(), o = ce(), a = ne(t), s = Ue([]), r = Ue([]), u = Ue(), c = Ue(), d = Ue(), { columns: p, data: f, features: b, columnGroups: h, async: g } = ro(t);
+    const t = n, e = q(), o = ce(), a = ne(t), s = Ue([]), r = Ue([]), u = Ue(), c = Ue(), d = Ue(), { columns: p, data: v, features: b, columnGroups: h, async: g } = ro(t);
     let $;
     const x = ({
       createRendererColumns: w,
@@ -5496,9 +5496,9 @@ const Ei = (n, t) => {
       createScrollContainerAttributes: N,
       createSlots: K
     }) => Y(
-      [f, a, p, h, e.locale, e.t, ...O],
+      [v, a, p, h, e.locale, e.t, ...O],
       () => {
-        s.value = w(), r.value = M(f.value), u.value = L(), c.value = N(), d.value = K();
+        s.value = w(), r.value = M(v.value), u.value = L(), c.value = N(), d.value = K();
       },
       { immediate: !0, deep: !0 }
     );
@@ -5603,7 +5603,7 @@ const Ei = (n, t) => {
         order: 9001,
         func: (d) => {
           const p = d.filter(
-            (f) => !s.value.has(f.key)
+            (v) => !s.value.has(v.key)
           );
           return s.value.size > 0 ? [
             ...p,
@@ -5654,7 +5654,7 @@ const Ei = (n, t) => {
       if (!r.value) return;
       s.value = r.value.getBoundingClientRect().width, c.value = !0, u = new AbortController();
       const g = { signal: u.signal, passive: !0 };
-      window.addEventListener("mousemove", f, g), window.addEventListener("mouseup", b, g), window.addEventListener("keydown", h, g), o("start");
+      window.addEventListener("mousemove", v, g), window.addEventListener("mouseup", b, g), window.addEventListener("keydown", h, g), o("start");
     };
     Oe(() => {
       Y(
@@ -5667,7 +5667,7 @@ const Ei = (n, t) => {
     });
     const p = () => {
       o("autoSize");
-    }, f = (g) => {
+    }, v = (g) => {
       if (!r.value || !c.value) return;
       const $ = r.value.getBoundingClientRect();
       let x;
@@ -5677,7 +5677,7 @@ const Ei = (n, t) => {
     }, h = (g) => {
       g.key === "Escape" && (s.value && o("updateWidth", s.value), b());
     };
-    return (g, $) => (i(), v(
+    return (g, $) => (i(), f(
       "button",
       {
         tabindex: "-1",
@@ -5715,15 +5715,15 @@ const Ei = (n, t) => {
   Y(
     [a, r],
     () => {
-      a.value.forEach((p, f) => {
-        const b = `--onyx-data-grid-column-${go(f)}`, h = p.closest(".onyx-table-wrapper__container"), g = r.value.get(f);
+      a.value.forEach((p, v) => {
+        const b = `--onyx-data-grid-column-${go(v)}`, h = p.closest(".onyx-table-wrapper__container"), g = r.value.get(v);
         g ? h?.style.setProperty(b, g) : h?.style.removeProperty(b);
       });
     },
     { flush: "post", deep: !0 }
   );
   const c = (p) => {
-    const f = p.map((b) => {
+    const v = p.map((b) => {
       if (!s.value(b.key)) return b;
       const h = {
         class: "onyx-data-grid-resize-cell",
@@ -5737,16 +5737,16 @@ const Ei = (n, t) => {
         thAttributes: fe(h, b.thAttributes)
       };
     });
-    return f.push({ key: Ct, type: { name: Ct }, label: "" }), f;
-  }, d = (p, f, b) => {
+    return v.push({ key: Ct, type: { name: Ct }, label: "" }), v;
+  }, d = (p, v, b) => {
     const h = p.default?.();
-    return !s.value(f.key) || b ? h : [
+    return !s.value(v.key) || b ? h : [
       le(lo, {
         min: o,
-        element: a.value.get(f.key),
-        active: e.value?.key === f.key,
+        element: a.value.get(v.key),
+        active: e.value?.key === v.key,
         onStart: () => {
-          e.value = f, Array.from(a.value.entries()).forEach(([g, $]) => {
+          e.value = v, Array.from(a.value.entries()).forEach(([g, $]) => {
             const { width: x } = $.getBoundingClientRect();
             r.value.set(g, `${Math.max(o, x)}px`);
           });
@@ -5755,9 +5755,9 @@ const Ei = (n, t) => {
           e.value = void 0;
         },
         onUpdateWidth: (g) => {
-          r.value.set(f.key, `${g}px`);
+          r.value.set(v.key, `${g}px`);
         },
-        onAutoSize: () => r.value.set(f.key, "max-content")
+        onAutoSize: () => r.value.set(v.key, "max-content")
       }),
       h
     ];
@@ -5788,8 +5788,8 @@ const Ei = (n, t) => {
       }
     },
     header: {
-      wrapper: (p, f, { length: b }) => (h, { slots: g }) => {
-        const $ = f === b - 1, x = p.type.name === Ct;
+      wrapper: (p, v, { length: b }) => (h, { slots: g }) => {
+        const $ = v === b - 1, x = p.type.name === Ct;
         return d(g, p, $ || x);
       }
     }
@@ -5878,7 +5878,7 @@ const Ei = (n, t) => {
       direction: $,
       column: x
     };
-  }, f = m(() => (h, g) => e.value.column === h && e.value.direction === g), b = (h, g) => {
+  }, v = m(() => (h, g) => e.value.column === h && e.value.direction === g), b = (h, g) => {
     const $ = {
       none: Pa,
       asc: rn,
@@ -5887,7 +5887,7 @@ const Ei = (n, t) => {
     return le(
       Ne,
       {
-        active: f.value(h, g),
+        active: v.value(h, g),
         onClick: () => e.value = { column: h, direction: g }
       },
       () => [
@@ -5942,31 +5942,31 @@ const Ei = (n, t) => {
     if (!("ResizeObserver" in window)) return;
     const p = new ResizeObserver(() => {
       Object.entries(a.value).forEach(
-        ([f, b]) => o.value[f] = b.getBoundingClientRect().width
-      ), t.value.forEach((f, b) => c(f, b));
+        ([v, b]) => o.value[v] = b.getBoundingClientRect().width
+      ), t.value.forEach((v, b) => c(v, b));
     });
     Y(
       a,
       () => {
-        p.disconnect(), Object.values(a.value).forEach((f) => p.observe(f));
+        p.disconnect(), Object.values(a.value).forEach((v) => p.observe(v));
       },
       { deep: !0, immediate: !0 }
     ), Lt(() => p.disconnect());
   });
-  const c = (p, f) => {
+  const c = (p, v) => {
     if (!n) return;
-    const b = t.value.map((h) => o.value[h]).reduce((h, g, $) => $ < f ? h + g : h, 0);
+    const b = t.value.map((h) => o.value[h]).reduce((h, g, $) => $ < v ? h + g : h, 0);
     document.body.style.setProperty(u(p), `${b}px`);
   }, d = (p) => {
-    const f = p.scrollWidth - p.clientWidth, b = Math.round(p.scrollLeft);
-    r.value = e.value === "left" && b > 0 || e.value === "right" && b < f;
+    const v = p.scrollWidth - p.clientWidth, b = Math.round(p.scrollLeft);
+    r.value = e.value === "left" && b > 0 || e.value === "right" && b < v;
   };
   return {
     name: bc,
     watch: [e, t, r],
     modifyColumns: {
       func: (p) => {
-        const f = p.filter((h) => t.value.includes(h.key)).map((h) => {
+        const v = p.filter((h) => t.value.includes(h.key)).map((h) => {
           const g = e.value === "left" ? {
             right: "auto",
             left: `var(${u(h.key)})`
@@ -6000,7 +6000,7 @@ const Ei = (n, t) => {
             }
           };
         }), b = p.filter((h) => !t.value.includes(h.key));
-        return e.value === "left" ? [...f, ...b] : [...b, ...f.slice().reverse()];
+        return e.value === "left" ? [...v, ...b] : [...b, ...v.slice().reverse()];
       }
     },
     scrollContainerAttributes: () => ({
@@ -6056,6 +6056,7 @@ const Ei = (n, t) => {
     success: {},
     hideSuccessIcon: { type: Boolean },
     hideClearIcon: { type: Boolean },
+    showPassword: { type: Boolean },
     modelValue: {},
     type: { default: "date" },
     min: {},
@@ -6063,13 +6064,13 @@ const Ei = (n, t) => {
   },
   emits: ["update:modelValue", "validityChange"],
   setup(n, { emit: t }) {
-    const e = n, o = t, { rootAttrs: a, restAttrs: s } = ge(), { vCustomValidity: r, errorMessages: u } = Pe({ props: e, emit: o }), c = m(() => Be(e.success)), d = m(() => Be(e.message)), { densityClass: p } = F(e), { disabled: f, showError: b } = be(e), h = ne(e), g = _t(b), $ = m(() => (O) => {
+    const e = n, o = t, { rootAttrs: a, restAttrs: s } = ge(), { vCustomValidity: r, errorMessages: u } = Pe({ props: e, emit: o }), c = m(() => Be(e.success)), d = m(() => Be(e.message)), { densityClass: p } = F(e), { disabled: v, showError: b } = be(e), h = ne(e), g = _t(b), $ = m(() => (O) => {
       const L = O != null && O != null ? new Date(O) : void 0;
       if (!no(L)) return;
       const N = L.toISOString().split("T")[0];
       if (e.type === "date") return N;
-      const K = L.getHours().toString().padStart(2, "0"), H = L.getMinutes().toString().padStart(2, "0");
-      return `${N}T${K}:${H}`;
+      const K = L.getHours().toString().padStart(2, "0"), U = L.getMinutes().toString().padStart(2, "0");
+      return `${N}T${K}:${U}`;
     }), x = ae({
       props: e,
       emit: o,
@@ -6081,7 +6082,7 @@ const Ei = (n, t) => {
         x.value = no(L) ? L.toISOString() : "";
       }
     }), M = J("inputRef");
-    return Ae(M, e), (O, L) => l(h) ? (i(), v(
+    return Ae(M, e), (O, L) => l(h) ? (i(), f(
       "div",
       E({
         key: 0,
@@ -6096,7 +6097,7 @@ const Ei = (n, t) => {
       ],
       16
       /* FULL_PROPS */
-    )) : (i(), v(
+    )) : (i(), f(
       "div",
       E({
         key: 1,
@@ -6115,7 +6116,7 @@ const Ei = (n, t) => {
                 class: "onyx-datepicker__loading",
                 type: "circle"
               })) : k("v-if", !0),
-              xe((i(), v("input", E({
+              xe((i(), f("input", E({
                 id: N,
                 key: e.type,
                 ref: "inputRef",
@@ -6126,7 +6127,7 @@ const Ei = (n, t) => {
                 autofocus: e.autofocus,
                 name: e.name,
                 readonly: e.readonly,
-                disabled: l(f) || e.loading,
+                disabled: l(v) || e.loading,
                 "aria-label": e.hideLabel ? e.label : void 0,
                 title: e.hideLabel ? e.label : void 0,
                 min: $.value(e.min),
@@ -6207,7 +6208,7 @@ const Ei = (n, t) => {
         y("div", $c, [
           C(c.$slots, "default")
         ]),
-        a.footer ? (i(), v("div", Cc, [
+        a.footer ? (i(), f("div", Cc, [
           C(c.$slots, "footer")
         ])) : k("v-if", !0)
       ]),
@@ -6228,7 +6229,7 @@ const Ei = (n, t) => {
     const t = n;
     Ms(t), Rt(t);
     const { densityClass: e } = F(t);
-    return (o, a) => (i(), v(
+    return (o, a) => (i(), f(
       "form",
       {
         class: I({
@@ -6310,7 +6311,7 @@ const Ei = (n, t) => {
       const c = t.shape === "circle" ? Math.min(t.width, t.height) : t.width, d = t.shape === "circle" ? Math.min(t.width, t.height) : t.height;
       return { width: `${c}px`, height: `${d}px` };
     }), { restAttrs: r, rootAttrs: u } = ge();
-    return (c, d) => (i(), v(
+    return (c, d) => (i(), f(
       "figure",
       E(l(u), {
         class: [
@@ -6324,7 +6325,7 @@ const Ei = (n, t) => {
           key: 0,
           class: "onyx-image__source",
           style: s.value
-        }, l(r)), null, 16, ["style"])) : (i(), v(
+        }, l(r)), null, 16, ["style"])) : (i(), f(
           G,
           { key: 1 },
           [
@@ -6335,7 +6336,7 @@ const Ei = (n, t) => {
               alt: t.alt,
               onError: d[0] || (d[0] = (p) => o.value = !0)
             }), null, 16, Ec),
-            a.value.dark ? (i(), v("img", E({
+            a.value.dark ? (i(), f("img", E({
               key: 0,
               class: "onyx-image__source onyx-image__source--dark"
             }, { ...l(r), ...t }, {
@@ -6343,7 +6344,7 @@ const Ei = (n, t) => {
               alt: t.alt,
               onError: d[1] || (d[1] = (p) => o.value = !0)
             }), null, 16, Bc)) : k("v-if", !0),
-            o.value ? (i(), v(
+            o.value ? (i(), f(
               "div",
               E({
                 key: 1,
@@ -6412,7 +6413,7 @@ const Ei = (n, t) => {
   },
   setup(n) {
     const t = n, e = ve(Ft, void 0), o = m(() => t.orientation === "vertical" && !e?.value);
-    return (a, s) => (i(), v("div", {
+    return (a, s) => (i(), f("div", {
       class: I(["onyx-component onyx-separator", { "onyx-separator--vertical": o.value }]),
       role: "separator",
       "aria-orientation": t.orientation
@@ -6449,21 +6450,27 @@ const Ei = (n, t) => {
     type: { default: "text" },
     pattern: {},
     hideSuccessIcon: { type: Boolean, default: !1 },
-    hideClearIcon: { type: Boolean, default: !1 }
+    hideClearIcon: { type: Boolean, default: !1 },
+    showPassword: { type: Boolean, default: void 0 }
   },
-  emits: ["validityChange", "update:modelValue"],
+  emits: ["validityChange", "update:modelValue", "update:showPassword"],
   setup(n, { expose: t, emit: e }) {
     const o = n, a = e, s = ce(), r = ae({
       key: "modelValue",
       props: o,
       emit: a,
       default: ""
-    }), { rootAttrs: u, restAttrs: c } = ge(), { t: d } = q(), { maxLength: p, maxLengthError: f } = ca({ modelValue: r, props: o }), b = m(() => o.error ?? f.value), { vCustomValidity: h, errorMessages: g } = Pe({ props: o, emit: a, error: b }), $ = m(() => Be(o.success)), x = m(() => Be(o.message)), { densityClass: w } = F(o), M = m(() => o.pattern instanceof RegExp ? o.pattern.source : o.pattern), O = J("inputRef");
+    }), { rootAttrs: u, restAttrs: c } = ge(), { t: d } = q(), { maxLength: p, maxLengthError: v } = ca({ modelValue: r, props: o }), b = m(() => o.error ?? v.value), { vCustomValidity: h, errorMessages: g } = Pe({ props: o, emit: a, error: b }), $ = m(() => Be(o.success)), x = m(() => Be(o.message)), { densityClass: w } = F(o), M = m(() => o.pattern instanceof RegExp ? o.pattern.source : o.pattern), O = J("inputRef");
     t({ input: O });
-    const { disabled: L, showError: N } = be(o), K = ne(o), H = _t(N);
+    const { disabled: L, showError: N } = be(o), K = ne(o), U = _t(N);
     Ae(O, o);
-    const X = V(!1), ue = m(() => o.type === "password" && X.value ? "text" : o.type);
-    return (P, D) => l(K) ? (i(), v(
+    const X = ae({
+      props: o,
+      emit: a,
+      key: "showPassword",
+      default: !1
+    }), ue = m(() => o.type === "password" && X.value ? "text" : o.type);
+    return (P, D) => l(K) ? (i(), f(
       "div",
       E({
         key: 0,
@@ -6478,11 +6485,11 @@ const Ei = (n, t) => {
       ],
       16
       /* FULL_PROPS */
-    )) : (i(), v(
+    )) : (i(), f(
       "div",
       E({
         key: 1,
-        class: ["onyx-component", "onyx-input", l(w), l(H)]
+        class: ["onyx-component", "onyx-input", l(w), l(U)]
       }, l(u)),
       [
         B(xt, E(o, {
@@ -6506,7 +6513,7 @@ const Ei = (n, t) => {
               xe(y("input", E({
                 id: te,
                 ref: "inputRef",
-                "onUpdate:modelValue": D[0] || (D[0] = (U) => Ee(r) ? r.value = U : null),
+                "onUpdate:modelValue": D[0] || (D[0] = (H) => Ee(r) ? r.value = H : null),
                 placeholder: o.placeholder,
                 class: "onyx-input__native",
                 type: ue.value,
@@ -6526,7 +6533,7 @@ const Ei = (n, t) => {
                 [tn, l(r)],
                 [l(h)]
               ]),
-              !o.hideClearIcon && l(r) !== "" ? (i(), v("button", {
+              !o.hideClearIcon && l(r) !== "" ? (i(), f("button", {
                 key: 2,
                 type: "button",
                 class: "onyx-input__clear",
@@ -6551,11 +6558,11 @@ const Ei = (n, t) => {
               C(P.$slots, "trailing", {}, () => [
                 o.type === "password" ? (i(), _(we, {
                   key: 0,
-                  icon: X.value ? l(Ha) : l(Ga),
-                  label: X.value ? l(d)("input.hidePassword") : l(d)("input.showPassword"),
+                  icon: l(X) ? l(Ha) : l(Ga),
+                  label: l(X) ? l(d)("input.hidePassword") : l(d)("input.showPassword"),
                   tabindex: "-1",
                   color: "soft",
-                  onClick: D[2] || (D[2] = (U) => X.value = !X.value)
+                  onClick: D[2] || (D[2] = (H) => X.value = !l(X))
                 }, null, 8, ["icon", "label"])) : k("v-if", !0)
               ])
             ])
@@ -6610,7 +6617,7 @@ const Ei = (n, t) => {
   emits: ["update:open"],
   setup(n, { emit: t }) {
     const e = n, o = t, a = m(() => !e.disabled && e.open);
-    return (s, r) => (i(), v("div", Vc, [
+    return (s, r) => (i(), f("div", Vc, [
       y("button", {
         type: "button",
         class: I(["onyx-mobile-nav-button__trigger", { "onyx-mobile-nav-button__trigger--active": e.open }]),
@@ -6650,7 +6657,7 @@ const Ei = (n, t) => {
       ), [
         [Yt, a.value]
       ]),
-      a.value ? (i(), v("div", {
+      a.value ? (i(), f("div", {
         key: 0,
         class: "onyx-mobile-nav-button__backdrop",
         role: "presentation",
@@ -6677,7 +6684,7 @@ const Ei = (n, t) => {
       modal: "",
       class: ["onyx-modal", l(r)],
       "aria-describedby": c.value ? l(u) : void 0,
-      "onUpdate:open": p[1] || (p[1] = (f) => o("update:open", f))
+      "onUpdate:open": p[1] || (p[1] = (v) => o("update:open", v))
     }), {
       default: S(() => [
         y("div", Fc, [
@@ -6704,10 +6711,10 @@ const Ei = (n, t) => {
               class: "onyx-alert-dialog__close",
               label: l(s)("dialog.close"),
               icon: l(De),
-              onClick: p[0] || (p[0] = (f) => o("update:open", !1))
+              onClick: p[0] || (p[0] = (v) => o("update:open", !1))
             }, null, 8, ["label", "icon"]))
           ]),
-          c.value ? (i(), v("div", {
+          c.value ? (i(), f("div", {
             key: 0,
             id: l(u),
             class: "onyx-modal__description onyx-text--small"
@@ -6718,7 +6725,7 @@ const Ei = (n, t) => {
         y("div", Gc, [
           C(d.$slots, "default")
         ]),
-        a.footer ? (i(), v("div", qc, [
+        a.footer ? (i(), f("div", qc, [
           C(d.$slots, "footer")
         ])) : k("v-if", !0)
       ]),
@@ -6745,7 +6752,7 @@ const Ei = (n, t) => {
     }), {
       default: S(() => [
         C(s.$slots, "default", {}, () => [
-          t.logoUrl ? (i(), v("img", {
+          t.logoUrl ? (i(), f("img", {
             key: 0,
             src: t.logoUrl,
             alt: l(e)("navigation.appLogo", { appName: t.appName }),
@@ -6753,7 +6760,7 @@ const Ei = (n, t) => {
             width: "24",
             height: "24"
           }, null, 8, Kc)) : k("v-if", !0),
-          t.appName ? (i(), v(
+          t.appName ? (i(), f(
             "span",
             jc,
             T(t.appName),
@@ -6783,16 +6790,16 @@ const Ei = (n, t) => {
     const e = n, o = t, a = ce(), s = V();
     Ie(() => s.value = e.modelValue);
     const { t: r } = q(), u = pe(), c = (p) => {
-      const f = p.target;
-      s.value = f.value;
+      const v = p.target;
+      s.value = v.value;
     }, d = () => {
       s.value && (o("update:modelValue", s.value), o("update:open", !1));
     };
-    return (p, f) => (i(), _(pa, E(e, {
+    return (p, v) => (i(), _(pa, E(e, {
       open: e.open,
       class: "onyx-select-dialog",
       label: e.label,
-      "onUpdate:open": f[1] || (f[1] = (b) => o("update:open", b))
+      "onUpdate:open": v[1] || (v[1] = (b) => o("update:open", b))
     }), _e({
       footer: S(() => [
         B(Lr, null, {
@@ -6801,7 +6808,7 @@ const Ei = (n, t) => {
               label: l(r)("cancel"),
               mode: "plain",
               color: "neutral",
-              onClick: f[0] || (f[0] = (b) => o("update:open", !1))
+              onClick: v[0] || (v[0] = (b) => o("update:open", !1))
             }, null, 8, ["label"]),
             B(lt, {
               label: l(r)("apply"),
@@ -6826,10 +6833,10 @@ const Ei = (n, t) => {
               onChange: c
             },
             [
-              (i(!0), v(
+              (i(!0), f(
                 G,
                 null,
-                de(e.options, (b) => (i(), v("label", {
+                de(e.options, (b) => (i(), f("label", {
                   key: b.value
                 }, [
                   B(
@@ -6871,7 +6878,7 @@ const Ei = (n, t) => {
                             1
                             /* TEXT */
                           ),
-                          b.description ? (i(), v(
+                          b.description ? (i(), f(
                             "p",
                             Xc,
                             T(b.description),
@@ -7107,17 +7114,17 @@ const Ei = (n, t) => {
       emit: o,
       key: "open",
       default: !1
-    }), { restAttrs: u, rootAttrs: c } = ge(), d = m(() => !!a.children), { isActive: p } = rt(), f = m(() => e.active !== "auto" ? e.active : p.value(e.link)), b = ve(
+    }), { restAttrs: u, rootAttrs: c } = ge(), d = m(() => !!a.children), { isActive: p } = rt(), v = m(() => e.active !== "auto" ? e.active : p.value(e.link)), b = ve(
       Ft,
       m(() => !1)
     ), h = ve(da, void 0), g = ve(Zo, !0);
     Re(Zo, !1);
     const { componentRef: $, isVisible: x } = g ? Nn(ua) : { isVisible: ie(!0) };
-    return (w, M) => (i(), v(
+    return (w, M) => (i(), f(
       G,
       null,
       [
-        l(b) && l(r) ? (i(), v(
+        l(b) && l(r) ? (i(), f(
           "div",
           E({
             key: 0,
@@ -7136,12 +7143,12 @@ const Ei = (n, t) => {
                 icon: l(ln),
                 onClick: M[0] || (M[0] = (O) => r.value = !1)
               }, null, 8, ["label", "icon"]),
-              e.link ? (i(), v(
+              e.link ? (i(), f(
                 G,
                 { key: 0 },
                 [
                   B(We, E(l(fe)(e, l(u)), {
-                    active: f.value,
+                    active: v.value,
                     context: "mobile"
                   }), {
                     default: S(() => [
@@ -7163,7 +7170,7 @@ const Ei = (n, t) => {
           16
           /* FULL_PROPS */
         )) : l(b) ? (i(), _(We, E({ key: 1 }, l(fe)(e, w.$attrs), {
-          active: f.value,
+          active: v.value,
           context: "mobile",
           onClick: M[1] || (M[1] = (O) => d.value && (r.value = !0))
         }), _e({
@@ -7187,7 +7194,7 @@ const Ei = (n, t) => {
             B(We, E(l(fe)(l(u), e, O), {
               ref_key: "componentRef",
               ref: $,
-              active: f.value,
+              active: v.value,
               context: "navbar"
             }), _e({
               default: S(() => [
@@ -7213,7 +7220,7 @@ const Ei = (n, t) => {
         }, 16, ["label"])) : l(g) && l(x) ? (i(), _(We, E({ key: 3 }, l(fe)(e, w.$attrs), {
           ref_key: "componentRef",
           ref: $,
-          active: f.value,
+          active: v.value,
           context: "navbar"
         }), {
           default: S(() => [
@@ -7222,7 +7229,7 @@ const Ei = (n, t) => {
           _: 3
           /* FORWARDED */
         }, 16, ["active"])) : l(x) ? (i(), _(We, E({ key: 4 }, l(fe)(e, w.$attrs), {
-          active: f.value,
+          active: v.value,
           context: "list"
         }), _e({
           default: S(() => [
@@ -7244,7 +7251,7 @@ const Ei = (n, t) => {
           to: l(h)
         }, [
           l(x) ? k("v-if", !0) : (i(), _(We, E({ key: 0 }, l(fe)(e, w.$attrs), {
-            active: f.value,
+            active: v.value,
             context: "list"
           }), _e({
             default: S(() => [
@@ -7322,12 +7329,12 @@ const Ei = (n, t) => {
        * Time (in milliseconds) that the timer has left.
        */
       timeLeft: r
-    }), (p, f) => (i(), v("div", {
+    }), (p, v) => (i(), f("div", {
       class: "onyx-component onyx-timer onyx-text onyx-truncation-ellipsis",
       role: "timer",
       "aria-label": o.hideLabel ? o.label : void 0
     }, [
-      o.hideLabel ? k("v-if", !0) : (i(), v(
+      o.hideLabel ? k("v-if", !0) : (i(), f(
         "span",
         pu,
         T(o.label),
@@ -7355,8 +7362,8 @@ const Ei = (n, t) => {
       key: "flyoutOpen",
       default: !1
     }), { t: r } = q();
-    return (u, c) => (i(), v("div", yu, [
-      e.isMobile ? (i(), v(
+    return (u, c) => (i(), f("div", yu, [
+      e.isMobile ? (i(), f(
         G,
         { key: 0 },
         [
@@ -7382,7 +7389,7 @@ const Ei = (n, t) => {
         "onUpdate:open": c[0] || (c[0] = (d) => Ee(s) ? s.value = d : null),
         label: l(r)("navigation.userMenuLabel"),
         alignment: "right",
-        disabled: u.disabled
+        disabled: n.disabled
       }, _e({
         button: S(({ trigger: d }) => [
           C(u.$slots, "button", { trigger: d })
@@ -7436,7 +7443,7 @@ const Ei = (n, t) => {
       "onUpdate:flyoutOpen": d[0] || (d[0] = (p) => Ee(s) ? s.value = p : null),
       class: I(["onyx-component onyx-user-menu", { "onyx-user-menu--mobile": l(u) }]),
       "is-mobile": l(u),
-      disabled: c.disabled
+      disabled: n.disabled
     }, _e({
       button: S(({ trigger: p }) => [
         y(
@@ -7482,7 +7489,7 @@ const Ei = (n, t) => {
               1
               /* TEXT */
             ),
-            e.description ? (i(), v(
+            e.description ? (i(), f(
               "div",
               xu,
               T(e.description),
@@ -7534,10 +7541,10 @@ const Ei = (n, t) => {
   setup(n, { expose: t, emit: e }) {
     const o = n, a = e, s = ce(), r = J("navBarRef"), { width: u } = He(r), { t: c } = q(), { currentRoute: d } = rt(), {
       elements: { nav: p }
-    } = _s({ navigationName: ie(() => o.appName) }), f = V(!1), b = V(!1), h = (x, w) => w !== 0 && w < x, g = m(() => typeof o.mobile == "number" ? h(o.mobile, u.value) : typeof o.mobile == "string" ? h(Ot[o.mobile], u.value) : o.mobile);
+    } = _s({ navigationName: ie(() => o.appName) }), v = V(!1), b = V(!1), h = (x, w) => w !== 0 && w < x, g = m(() => typeof o.mobile == "number" ? h(o.mobile, u.value) : typeof o.mobile == "string" ? h(Ot[o.mobile], u.value) : o.mobile);
     Re(Ft, g), Re(da, J("moreListRef"));
     const $ = () => {
-      f.value = !1, b.value = !1;
+      v.value = !1, b.value = !1;
     };
     return Y(d, () => $(), { deep: !0 }), t({
       /**
@@ -7555,7 +7562,7 @@ const Ei = (n, t) => {
        * ```
        */
       closeMobileMenus: $
-    }), (x, w) => (i(), v(
+    }), (x, w) => (i(), f(
       "header",
       {
         ref: "navBarRef",
@@ -7563,7 +7570,7 @@ const Ei = (n, t) => {
       },
       [
         y("div", Su, [
-          g.value && s.mobileActivePage && !f.value && !b.value ? (i(), v("span", $u, [
+          g.value && s.mobileActivePage && !v.value && !b.value ? (i(), f("span", $u, [
             C(x.$slots, "mobileActivePage")
           ])) : o.appName || o.logoUrl || s.appArea ? (i(), _(Wc, E({
             key: 1,
@@ -7585,15 +7592,15 @@ const Ei = (n, t) => {
             color: "neutral",
             onClick: w[0] || (w[0] = (M) => a("navigateBack", M))
           }, null, 8, ["label", "icon"])) : k("v-if", !0),
-          s.default ? (i(), v(
+          s.default ? (i(), f(
             G,
             { key: 3 },
             [
               g.value ? (i(), _(Xo, {
                 key: 0,
-                open: f.value,
+                open: v.value,
                 "onUpdate:open": [
-                  w[1] || (w[1] = (M) => f.value = M),
+                  w[1] || (w[1] = (M) => v.value = M),
                   w[2] || (w[2] = (M) => b.value = !1)
                 ],
                 class: "onyx-nav-bar__burger",
@@ -7616,7 +7623,7 @@ const Ei = (n, t) => {
                 ]),
                 _: 3
                 /* FORWARDED */
-              }, 8, ["open", "icon", "label", "headline"])) : (i(), v(
+              }, 8, ["open", "icon", "label", "headline"])) : (i(), f(
                 "nav",
                 E({
                   key: 1,
@@ -7673,12 +7680,12 @@ const Ei = (n, t) => {
             64
             /* STABLE_FRAGMENT */
           )) : k("v-if", !0),
-          s.contextArea || s.globalContextArea ? (i(), v(
+          s.contextArea || s.globalContextArea ? (i(), f(
             G,
             { key: 4 },
             [
-              g.value ? (i(), v("div", Bu, [
-                s.globalContextArea ? (i(), v("div", Ou, [
+              g.value ? (i(), f("div", Bu, [
+                s.globalContextArea ? (i(), f("div", Ou, [
                   C(x.$slots, "globalContextArea")
                 ])) : k("v-if", !0),
                 s.contextArea ? (i(), _(Xo, {
@@ -7686,7 +7693,7 @@ const Ei = (n, t) => {
                   open: b.value,
                   "onUpdate:open": [
                     w[3] || (w[3] = (M) => b.value = M),
-                    w[4] || (w[4] = (M) => f.value = !1)
+                    w[4] || (w[4] = (M) => v.value = !1)
                   ],
                   icon: l(un),
                   label: l(c)("navigation.toggleContextMenu")
@@ -7699,7 +7706,7 @@ const Ei = (n, t) => {
                   _: 3
                   /* FORWARDED */
                 }, 8, ["open", "icon", "label"])) : k("v-if", !0)
-              ])) : (i(), v("div", Mu, [
+              ])) : (i(), f("div", Mu, [
                 s.globalContextArea ? C(x.$slots, "globalContextArea", { key: 0 }) : k("v-if", !0),
                 s.contextArea ? C(x.$slots, "contextArea", { key: 1 }) : k("v-if", !0)
               ]))
@@ -7724,8 +7731,8 @@ const Ei = (n, t) => {
     );
   }), Lt(() => clearInterval(s));
   const r = m(() => {
-    const f = new Date(l(n.time)).getTime() - a.value;
-    return Math.floor(f / 1e3);
+    const v = new Date(l(n.time)).getTime() - a.value;
+    return Math.floor(v / 1e3);
   }), u = {
     // important: the values here must be sorted from highest to lowest so the highest possible value is used for the "timeAgo"
     year: 3600 * 24 * 365,
@@ -7745,8 +7752,8 @@ const Ei = (n, t) => {
      */
     timeAgo: m(() => {
       if (!c.value) return e.value("now");
-      const p = r.value / u[c.value], f = p < 0 ? Math.ceil(p) : Math.floor(p);
-      return o.value.format(f, c.value);
+      const p = r.value / u[c.value], v = p < 0 ? Math.ceil(p) : Math.floor(p);
+      return o.value.format(v, c.value);
     })
   };
 }, Lu = {
@@ -7773,15 +7780,15 @@ const Ei = (n, t) => {
       time: ie(t, "createdAt"),
       options: { numeric: "auto" }
     });
-    return (c, d) => (i(), v(
+    return (c, d) => (i(), f(
       "div",
       {
         class: I(["onyx-component", "onyx-notification-card", l(o)])
       },
       [
-        l(a) ? (i(), v("div", Lu, [
+        l(a) ? (i(), f("div", Lu, [
           B(Z, { class: "onyx-notification-card-skeleton__header" }),
-          (i(), v(
+          (i(), f(
             G,
             null,
             de(3, (p) => B(Z, {
@@ -7791,7 +7798,7 @@ const Ei = (n, t) => {
             64
             /* STABLE_FRAGMENT */
           ))
-        ])) : (i(), v("div", Ru, [
+        ])) : (i(), f("div", Ru, [
           y("div", null, [
             y("div", Vu, [
               y("div", Nu, [
@@ -7858,7 +7865,7 @@ const Ei = (n, t) => {
           y("p", Fu, [
             C(c.$slots, "default")
           ]),
-          e.actions ? (i(), v("div", Pu, [
+          e.actions ? (i(), f("div", Pu, [
             C(c.$slots, "actions")
           ])) : k("v-if", !0)
         ]))
@@ -7875,7 +7882,7 @@ const Ei = (n, t) => {
   },
   setup(n) {
     const t = n;
-    return (e, o) => (i(), v("div", Uu, [
+    return (e, o) => (i(), f("div", Uu, [
       C(e.$slots, "default"),
       t.hidden ? k("v-if", !0) : (i(), _(Nt, {
         key: 0,
@@ -7903,7 +7910,7 @@ const Ei = (n, t) => {
   },
   setup(n) {
     const t = n, e = ce();
-    return Rt(t), (o, a) => (i(), v(
+    return Rt(t), (o, a) => (i(), f(
       "div",
       {
         class: I(["onyx-component onyx-page", [
@@ -7913,7 +7920,7 @@ const Ei = (n, t) => {
         ]])
       },
       [
-        e.sidebar ? (i(), v("div", Hu, [
+        e.sidebar ? (i(), f("div", Hu, [
           C(o.$slots, "sidebar")
         ])) : k("v-if", !0),
         y("main", Gu, [
@@ -7929,10 +7936,10 @@ const Ei = (n, t) => {
             /* CLASS */
           )
         ]),
-        e.sidebarRight ? (i(), v("div", qu, [
+        e.sidebarRight ? (i(), f("div", qu, [
           C(o.$slots, "sidebarRight")
         ])) : k("v-if", !0),
-        e.footer ? (i(), v("div", Ku, [
+        e.footer ? (i(), f("div", Ku, [
           C(o.$slots, "footer")
         ])) : k("v-if", !0)
       ],
@@ -7956,7 +7963,7 @@ const Ei = (n, t) => {
     return (s, r) => l(o) ? (i(), _(Z, {
       key: 0,
       class: I(["onyx-progress-item-skeleton", "onyx-text", l(e)])
-    }, null, 8, ["class"])) : (i(), v("button", {
+    }, null, 8, ["class"])) : (i(), f("button", {
       key: 1,
       class: I([
         "onyx-component",
@@ -7972,7 +7979,7 @@ const Ei = (n, t) => {
         a.value ? (i(), _(z, {
           key: 0,
           icon: a.value
-        }, null, 8, ["icon"])) : (i(), v(
+        }, null, 8, ["icon"])) : (i(), f(
           G,
           { key: 1 },
           [
@@ -8032,19 +8039,19 @@ const Ei = (n, t) => {
     );
     const u = m(() => e.steps.map((c, d) => {
       const p = d + 1;
-      let f = "default";
-      p === e.modelValue ? f = "active" : p < e.modelValue ? f = "completed" : p <= r.value - 1 && (f = "visited");
-      const b = f === "default" && p !== r.value;
+      let v = "default";
+      p === e.modelValue ? v = "active" : p < e.modelValue ? v = "completed" : p <= r.value - 1 && (v = "visited");
+      const b = v === "default" && p !== r.value;
       return {
         value: p,
         disabled: b,
-        status: f,
+        status: v,
         skeleton: s.value,
         // allow user to override step properties so he has full control, therefore we add "...step" at the very end
         ...c
       };
     }));
-    return (c, d) => (i(), v(
+    return (c, d) => (i(), f(
       "div",
       {
         class: I([
@@ -8056,17 +8063,17 @@ const Ei = (n, t) => {
       },
       [
         y("div", Zu, [
-          (i(!0), v(
+          (i(!0), f(
             G,
             null,
-            de(u.value, (p) => (i(), v(
+            de(u.value, (p) => (i(), f(
               G,
               {
                 key: p.value
               },
               [
                 B(Ju, E({ ref_for: !0 }, p, {
-                  onClick: (f) => o("update:modelValue", p.value)
+                  onClick: (v) => o("update:modelValue", p.value)
                 }), {
                   default: S(() => [
                     C(c.$slots, "step", { step: p })
@@ -8113,8 +8120,8 @@ const Ei = (n, t) => {
   },
   emits: ["validityChange"],
   setup(n, { expose: t, emit: e }) {
-    const o = n, a = e, { rootAttrs: s, restAttrs: r } = ge(), { vCustomValidity: u, errorMessages: c } = Pe({ props: o, emit: a }), { densityClass: d } = F(o), { disabled: p } = be(o), f = ne(o), b = J("inputRef");
-    return t({ input: b }), Ae(b, o), (h, g) => l(f) ? (i(), v(
+    const o = n, a = e, { rootAttrs: s, restAttrs: r } = ge(), { vCustomValidity: u, errorMessages: c } = Pe({ props: o, emit: a }), { densityClass: d } = F(o), { disabled: p } = be(o), v = ne(o), b = J("inputRef");
+    return t({ input: b }), Ae(b, o), (h, g) => l(v) ? (i(), f(
       "div",
       E({
         key: 0,
@@ -8142,7 +8149,7 @@ const Ei = (n, t) => {
               key: 0,
               class: "onyx-radio-button__loading",
               type: "circle"
-            })) : xe((i(), v("input", E({
+            })) : xe((i(), f("input", E({
               key: 1,
               ref: "inputRef",
               class: "onyx-radio-button__selector",
@@ -8197,22 +8204,22 @@ const Ei = (n, t) => {
   },
   emits: ["validityChange", "update:modelValue"],
   setup(n, { expose: t, emit: e }) {
-    const o = n, { densityClass: a } = F(o), { disabled: s, requiredMarker: r } = be(o), { requiredMarkerClass: u, requiredTypeClass: c } = zt(o, r), d = ne(o), p = e, f = ae({
+    const o = n, { densityClass: a } = F(o), { disabled: s, requiredMarker: r } = be(o), { requiredMarkerClass: u, requiredTypeClass: c } = zt(o, r), d = ne(o), p = e, v = ae({
       props: o,
       emit: p,
       key: "modelValue"
     }), b = (g, $) => {
-      g && (f.value = $);
+      g && (v.value = $);
     }, h = J("radiobuttonsRef");
     return t({
       inputs: m(() => yt(h.value).flatMap(($) => $?.input).filter(($) => !!$))
-    }), (g, $) => (i(), v("fieldset", {
+    }), (g, $) => (i(), f("fieldset", {
       class: I(["onyx-component", "onyx-radio-group", l(a), l(c)]),
       disabled: l(s),
       role: "radiogroup",
       "aria-label": o.label
     }, [
-      o.hideLabel ? k("v-if", !0) : (i(), v("legend", ed, [
+      o.hideLabel ? k("v-if", !0) : (i(), f("legend", ed, [
         B(Fe, {
           is: "h3",
           class: I(l(u))
@@ -8239,7 +8246,7 @@ const Ei = (n, t) => {
           class: I(["onyx-radio-group__content", { "onyx-radio-group__content--horizontal": o.orientation === "horizontal" }])
         },
         [
-          l(d) ? typeof l(d) == "number" ? (i(!0), v(
+          l(d) ? typeof l(d) == "number" ? (i(!0), f(
             G,
             { key: 1 },
             de(l(d), (x) => (i(), _(Qo, {
@@ -8252,7 +8259,7 @@ const Ei = (n, t) => {
             }, null, 8, ["id", "value", "name"]))),
             128
             /* KEYED_FRAGMENT */
-          )) : k("v-if", !0) : (i(!0), v(
+          )) : k("v-if", !0) : (i(!0), f(
             G,
             { key: 0 },
             de(o.options, (x, w) => (i(), _(Qo, E({
@@ -8262,7 +8269,7 @@ const Ei = (n, t) => {
               ref: "radiobuttonsRef",
               name: o.name,
               error: o.error,
-              checked: x.value === l(f),
+              checked: x.value === l(v),
               required: o.required,
               truncation: x.truncation ?? o.truncation,
               onValidityChange: (M) => w === 0 && p("validityChange", M),
@@ -8298,7 +8305,7 @@ const Ei = (n, t) => {
     const t = n, { densityClass: e } = F(t), { disabled: o } = be(t), a = J("inputRef");
     Ae(a, t);
     const { rootAttrs: s, restAttrs: r } = ge();
-    return (u, c) => (i(), v(
+    return (u, c) => (i(), f(
       "div",
       E(l(s), {
         class: ["onyx-component", "onyx-segmented-control-element", l(e)]
@@ -8331,7 +8338,7 @@ const Ei = (n, t) => {
             icon: t.icon,
             class: "onyx-segmented-control-element__icon"
           }, null, 8, ["icon"])) : k("v-if", !0),
-          t.hideLabel ? k("v-if", !0) : (i(), v(
+          t.hideLabel ? k("v-if", !0) : (i(), f(
             "p",
             ad,
             T(t.label),
@@ -8365,22 +8372,22 @@ const Ei = (n, t) => {
     return (c, d) => l(a) ? (i(), _(Z, {
       key: 0,
       class: I(["onyx-segmented-control-skeleton", l(s)])
-    }, null, 8, ["class"])) : (i(), v(
+    }, null, 8, ["class"])) : (i(), f(
       "div",
       {
         key: 1,
         class: I(["onyx-component", "onyx-segmented-control", l(s)])
       },
       [
-        (i(!0), v(
+        (i(!0), f(
           G,
           null,
-          de(c.options, (p) => (i(), _(ld, E({
+          de(n.options, (p) => (i(), _(ld, E({
             key: p.value.toString()
           }, { ref_for: !0 }, p, {
             name: e.name,
             checked: p.value === l(r),
-            onChange: (f) => u(p.value)
+            onChange: (v) => u(p.value)
           }), null, 16, ["name", "checked", "onChange"]))),
           128
           /* KEYED_FRAGMENT */
@@ -8413,7 +8420,7 @@ const Ei = (n, t) => {
       ]),
       _: 3
       /* FORWARDED */
-    }, 16, ["class"])) : (i(), v(
+    }, 16, ["class"])) : (i(), f(
       "button",
       {
         key: 1,
@@ -8448,7 +8455,7 @@ const Ei = (n, t) => {
     const e = n, o = t, a = ce(), { densityClass: s } = F(e), r = In(), u = J("sidebarRef"), c = J("modalRef"), d = V(), p = m(() => {
       if (d.value)
         return { "--onyx-sidebar-width": `${d.value}px` };
-    }), f = m(
+    }), v = m(
       () => ({
         onUpdateWidth: (w) => d.value = w,
         onAutoSize: () => d.value = void 0,
@@ -8491,7 +8498,7 @@ const Ei = (n, t) => {
       { immediate: !0 }
     ), Lt(() => {
       r.remove(x);
-    }), (w, M) => !e.temporary && !h.value ? (i(), v("aside", {
+    }), (w, M) => !e.temporary && !h.value ? (i(), f("aside", {
       key: 0,
       ref: "sidebarRef",
       class: I([
@@ -8504,19 +8511,19 @@ const Ei = (n, t) => {
       "aria-label": e.label,
       style: Te(p.value)
     }, [
-      a.header ? (i(), v("header", dd, [
+      a.header ? (i(), f("header", dd, [
         C(w.$slots, "header")
       ])) : k("v-if", !0),
       y("div", pd, [
         C(w.$slots, "default")
       ]),
-      a.footer ? (i(), v("footer", md, [
+      a.footer ? (i(), f("footer", md, [
         C(w.$slots, "footer")
       ])) : k("v-if", !0),
       e.resizable ? (i(), _(lo, E({
         key: 2,
         element: u.value
-      }, f.value), null, 16, ["element"])) : k("v-if", !0)
+      }, v.value), null, 16, ["element"])) : k("v-if", !0)
     ], 14, ud)) : (i(), _(pa, E({ key: 1 }, e.temporary, {
       ref: "modalRef",
       open: $.value,
@@ -8539,7 +8546,7 @@ const Ei = (n, t) => {
         e.resizable ? (i(), _(lo, E({
           key: 0,
           element: c.value
-        }, f.value), null, 16, ["element"])) : k("v-if", !0)
+        }, v.value), null, 16, ["element"])) : k("v-if", !0)
       ]),
       _: 2
       /* DYNAMIC */
@@ -8606,29 +8613,29 @@ const Ei = (n, t) => {
   },
   emits: ["validityChange", "update:modelValue"],
   setup(n, { expose: t, emit: e }) {
-    const o = n, a = e, { t: s, locale: r } = q(), u = J("inputRef"), { disabled: c, showError: d } = be(o), p = ne(o), f = _t(d), { densityClass: b } = F(o), { vCustomValidity: h, errorMessages: g } = Pe({ props: o, emit: a }), $ = m(() => Be(o.success)), x = m(() => Be(o.message)), { rootAttrs: w, restAttrs: M } = ge(), O = V(!1), L = ae({
+    const o = n, a = e, { t: s, locale: r } = q(), u = J("inputRef"), { disabled: c, showError: d } = be(o), p = ne(o), v = _t(d), { densityClass: b } = F(o), { vCustomValidity: h, errorMessages: g } = Pe({ props: o, emit: a }), $ = m(() => Be(o.success)), x = m(() => Be(o.message)), { rootAttrs: w, restAttrs: M } = ge(), O = V(!1), L = ae({
       props: o,
       emit: a,
       key: "modelValue"
-    }), N = V(), K = m(() => X.value(L.value)), H = m(() => (U) => o.precision !== void 0 && U != null ? Go(U, o.precision) : U?.toString() ?? ""), X = m(() => (U) => U == null || Number.isNaN(U) ? "" : o.formatNumber ? typeof o.formatNumber == "boolean" ? o.precision ? U.toLocaleString(r.value, {
+    }), N = V(), K = m(() => X.value(L.value)), U = m(() => (H) => o.precision !== void 0 && H != null ? Go(H, o.precision) : H?.toString() ?? ""), X = m(() => (H) => H == null || Number.isNaN(H) ? "" : o.formatNumber ? typeof o.formatNumber == "boolean" ? o.precision ? H.toLocaleString(r.value, {
       minimumFractionDigits: o.precision,
       maximumFractionDigits: o.precision
-    }) : U.toLocaleString(r.value) : o.formatNumber(U) : o.precision ? Go(U, o.precision) : String(U));
+    }) : H.toLocaleString(r.value) : o.formatNumber(H) : o.precision ? Go(H, o.precision) : String(H));
     Ie(() => {
-      N.value = H.value(L.value);
+      N.value = U.value(L.value);
     });
-    const ue = (U) => {
+    const ue = (H) => {
       O.value = !0;
-      const R = L.value || 0, Se = (U === "stepUp" ? 1 : -1) * o.stepSize, he = parseFloat(H.value(R + Se));
+      const R = L.value || 0, Se = (H === "stepUp" ? 1 : -1) * o.stepSize, he = parseFloat(U.value(R + Se));
       L.value = So(he, o.min, o.max);
     }, P = () => {
       if (O.value = !0, N.value == null) {
         L.value = void 0;
         return;
       }
-      N.value = H.value(parseFloat(N.value)), L.value = parseFloat(N.value);
+      N.value = U.value(parseFloat(N.value)), L.value = parseFloat(N.value);
     }, D = m(() => s.value("stepper.increment", { stepSize: o.stepSize })), te = m(() => s.value("stepper.decrement", { stepSize: o.stepSize }));
-    return t({ input: u }), Ae(u, o), (U, R) => l(p) ? (i(), v(
+    return t({ input: u }), Ae(u, o), (H, R) => l(p) ? (i(), f(
       "div",
       E({
         key: 0,
@@ -8643,11 +8650,11 @@ const Ei = (n, t) => {
       ],
       16
       /* FULL_PROPS */
-    )) : (i(), v(
+    )) : (i(), f(
       "div",
       E({
         key: 1,
-        class: ["onyx-component", "onyx-stepper", l(b), l(f)]
+        class: ["onyx-component", "onyx-stepper", l(b), l(v)]
       }, l(w)),
       [
         B(xt, E(o, {
@@ -8657,11 +8664,11 @@ const Ei = (n, t) => {
         }), {
           default: S(({ id: Se }) => [
             y("div", fd, [
-              o.hideButtons ? k("v-if", !0) : (i(), v("button", {
+              o.hideButtons ? k("v-if", !0) : (i(), f("button", {
                 key: 0,
                 type: "button",
                 class: "onyx-stepper__counter",
-                disabled: l(c) || U.readonly || o.loading || o.min !== void 0 && l(L) !== void 0 && l(L) !== null && l(L) <= o.min,
+                disabled: l(c) || n.readonly || o.loading || o.min !== void 0 && l(L) !== void 0 && l(L) !== null && l(L) <= o.min,
                 "aria-label": te.value,
                 tabindex: "-1",
                 onClick: R[0] || (R[0] = (he) => ue("stepDown"))
@@ -8672,7 +8679,7 @@ const Ei = (n, t) => {
                 key: 1,
                 class: "onyx-stepper__loading",
                 type: "circle"
-              })) : xe((i(), v("input", E({
+              })) : xe((i(), f("input", E({
                 key: 2,
                 id: Se,
                 ref: "inputRef",
@@ -8708,11 +8715,11 @@ const Ei = (n, t) => {
                 1
                 /* TEXT */
               ),
-              o.hideButtons ? k("v-if", !0) : (i(), v("button", {
+              o.hideButtons ? k("v-if", !0) : (i(), f("button", {
                 key: 3,
                 type: "button",
                 class: "onyx-stepper__counter",
-                disabled: l(c) || U.readonly || o.loading || o.max !== void 0 && l(L) !== void 0 && l(L) !== null && l(L) >= o.max,
+                disabled: l(c) || n.readonly || o.loading || o.max !== void 0 && l(L) !== void 0 && l(L) !== null && l(L) >= o.max,
                 "aria-label": D.value,
                 tabindex: "-1",
                 onClick: R[5] || (R[5] = (he) => ue("stepUp"))
@@ -8749,7 +8756,7 @@ const Ei = (n, t) => {
   },
   emits: ["update:modelValue", "validityChange"],
   setup(n, { expose: t, emit: e }) {
-    const o = n, a = e, { rootAttrs: s, restAttrs: r } = ge(), { densityClass: u } = F(o), { disabled: c, showError: d, requiredMarker: p } = be(o), { requiredMarkerClass: f, requiredTypeClass: b } = zt(o, p), { vCustomValidity: h, errorMessages: g } = Pe({ props: o, emit: a }), $ = m(
+    const o = n, a = e, { rootAttrs: s, restAttrs: r } = ge(), { densityClass: u } = F(o), { disabled: c, showError: d, requiredMarker: p } = be(o), { requiredMarkerClass: v, requiredTypeClass: b } = zt(o, p), { vCustomValidity: h, errorMessages: g } = Pe({ props: o, emit: a }), $ = m(
       () => d.value !== !1 ? g.value : void 0
     ), x = m(() => o.hideLabel && o.label || void 0), w = ne(o), M = ae({
       props: o,
@@ -8757,7 +8764,7 @@ const Ei = (n, t) => {
       key: "modelValue",
       default: !1
     }), O = J("inputRef");
-    return t({ input: O }), Ae(O, o), (L, N) => l(w) ? (i(), v(
+    return t({ input: O }), Ae(O, o), (L, N) => l(w) ? (i(), f(
       "div",
       E({
         key: 0,
@@ -8819,25 +8826,25 @@ const Ei = (n, t) => {
               ))
             ])
           ]),
-          o.hideLabel ? k("v-if", !0) : (i(), v(
+          o.hideLabel ? k("v-if", !0) : (i(), f(
             "span",
             {
               key: 0,
               class: I(["onyx-switch__label", [
                 `onyx-truncation-${o.truncation}`,
                 // shows the required marker inline for multiline labels
-                o.truncation === "multiline" ? l(f) : void 0
+                o.truncation === "multiline" ? l(v) : void 0
               ]])
             },
             T(o.label),
             3
             /* TEXT, CLASS */
           )),
-          !o.hideLabel && o.truncation === "ellipsis" ? (i(), v(
+          !o.hideLabel && o.truncation === "ellipsis" ? (i(), f(
             "div",
             {
               key: 1,
-              class: I(["onyx-switch__marker", [l(f)]])
+              class: I(["onyx-switch__marker", [l(v)]])
             },
             null,
             2
@@ -8865,14 +8872,14 @@ const Ei = (n, t) => {
         disabled: t.disabled || !!a.value
       })
     );
-    return (u, c) => (i(), v(
+    return (u, c) => (i(), f(
       G,
       null,
       [
         l(a) ? (i(), _(Z, E({
           key: 0,
           class: ["onyx-tab-skeleton", l(e), s.value]
-        }, r.value), null, 16, ["class"])) : (i(), v("button", E({
+        }, r.value), null, 16, ["class"])) : (i(), f("button", E({
           key: 1,
           class: [
             "onyx-component",
@@ -8900,7 +8907,7 @@ const Ei = (n, t) => {
           to: l(o)?.panel.value,
           defer: ""
         }, [
-          r.value?.["aria-selected"] ? (i(), v(
+          r.value?.["aria-selected"] ? (i(), f(
             "div",
             E({ key: 0 }, l(o)?.headless.elements.tabpanel.value({ value: t.value }), { class: "onyx-tab__panel" }),
             [
@@ -8940,7 +8947,7 @@ const Ei = (n, t) => {
       headless: r,
       panel: u,
       size: ie(e, "size")
-    }), (c, d) => (i(), v(
+    }), (c, d) => (i(), f(
       "div",
       {
         ref: "panelRef",
@@ -9023,7 +9030,7 @@ const Ei = (n, t) => {
       ]),
       _: 1
       /* STABLE */
-    }, 8, ["text"])) : (i(), v(
+    }, 8, ["text"])) : (i(), f(
       "div",
       {
         key: 2,
@@ -9110,7 +9117,7 @@ const Ei = (n, t) => {
       if (e.link)
         return Ze(e.link);
     });
-    return (f, b) => l(u) ? (i(), _(Z, {
+    return (v, b) => l(u) ? (i(), _(Z, {
       key: 0,
       class: I(["onyx-file-card-skeleton", l(s)])
     }, null, 8, ["class"])) : (i(), _(Un, {
@@ -9157,7 +9164,7 @@ const Ei = (n, t) => {
                   ]),
                   _: 1
                   /* STABLE */
-                }, 8, ["href", "target"])) : (i(), v(
+                }, 8, ["href", "target"])) : (i(), f(
                   G,
                   { key: 1 },
                   [
@@ -9179,7 +9186,7 @@ const Ei = (n, t) => {
                   1
                   /* TEXT */
                 ),
-                e.status ? (i(), v(
+                e.status ? (i(), f(
                   "span",
                   {
                     key: 0,
@@ -9196,11 +9203,11 @@ const Ei = (n, t) => {
               ])
             ])
           ]),
-          a.actions ? (i(), v("div", Ud, [
-            C(f.$slots, "actions")
+          a.actions ? (i(), f("div", Ud, [
+            C(v.$slots, "actions")
           ])) : k("v-if", !0)
         ]),
-        e.status?.progress ? (i(), v("div", Hd, [
+        e.status?.progress ? (i(), f("div", Hd, [
           y(
             "div",
             {
@@ -9260,7 +9267,7 @@ const Ei = (n, t) => {
   "aria-hidden": "true"
 };
 function Wd(n, t) {
-  return i(), v("svg", jd, [...t[0] || (t[0] = [
+  return i(), f("svg", jd, [...t[0] || (t[0] = [
     Ea('<circle cx="292.60911" cy="213" r="213" fill="var(--onyx-error-svg-background-color-circle)"></circle><path d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color)"></path><path d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color-primary)"></path><path d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color-primary)"></path><path d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color)"></path><ellipse cx="198.60911" cy="424.5" rx="187" ry="25.43993" fill="var(--onyx-error-svg-background-color-accent)"></ellipse><ellipse cx="198.60911" cy="424.5" rx="157" ry="21.35866" opacity="0.1"></ellipse><ellipse cx="836.60911" cy="660.5" rx="283" ry="38.5" fill="var(--onyx-error-svg-background-color-accent)"></ellipse><ellipse cx="310.60911" cy="645.5" rx="170" ry="23.12721" fill="var(--onyx-error-svg-background-color-accent)"></ellipse><path d="M494,726.5c90,23,263-30,282-90" transform="translate(-31.39089 -100.5)" fill="none" stroke="var(--onyx-error-svg-background-color-cable)" stroke-miterlimit="10" stroke-width="2"></path><path d="M341,359.5s130-36,138,80-107,149-17,172" transform="translate(-31.39089 -100.5)" fill="none" stroke="var(--onyx-error-svg-background-color-cable)" stroke-miterlimit="10" stroke-width="2"></path><path d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566" transform="translate(-31.39089 -100.5)" fill="none" stroke="var(--onyx-error-svg-background-color-cable)" stroke-miterlimit="10" stroke-width="2"></path><path d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color)"></path><path d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z" transform="translate(-31.39089 -100.5)" opacity="0.1"></path><rect x="578.43291" y="212.68859" width="513.25314" height="357.51989" rx="18.04568" fill="var(--onyx-error-svg-background-color)"></rect><rect x="595.70294" y="231.77652" width="478.71308" height="267.83694" fill="var(--onyx-error-svg-background-color-accent)"></rect><circle cx="835.05948" cy="223.29299" r="3.02983" fill="var(--onyx-error-svg-background-color-device-controls)"></circle><path d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color)"></path><polygon points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466" fill="var(--onyx-error-svg-background-color)"></polygon><path d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color)"></path><path d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z" transform="translate(-31.39089 -100.5)" opacity="0.1"></path><ellipse cx="1066.53846" cy="654.13477" rx="7.87756" ry="2.42386" fill="var(--onyx-error-svg-background-color-device-controls)"></ellipse><circle cx="835.05948" cy="545.66686" r="11.51335" fill="var(--onyx-error-svg-background-color-device-controls)"></circle><polygon points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466" opacity="0.1"></polygon><rect x="108.60911" y="159" width="208" height="242" fill="var(--onyx-error-svg-background-color)"></rect><rect x="87.60911" y="135" width="250" height="86" fill="var(--onyx-error-svg-background-color-accent)"></rect><rect x="87.60911" y="237" width="250" height="86" fill="var(--onyx-error-svg-background-color-accent)"></rect><rect x="87.60911" y="339" width="250" height="86" fill="var(--onyx-error-svg-background-color-accent)"></rect><rect x="271.60911" y="150" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.4"></rect><rect x="294.60911" y="150" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.8"></rect><rect x="317.60911" y="150" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)"></rect><rect x="271.60911" y="251" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.4"></rect><rect x="294.60911" y="251" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.8"></rect><rect x="317.60911" y="251" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)"></rect><rect x="271.60911" y="352" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.4"></rect><rect x="294.60911" y="352" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.8"></rect><rect x="317.60911" y="352" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)"></rect><circle cx="316.60911" cy="538" r="79" fill="var(--onyx-error-svg-background-color)"></circle><rect x="280.60911" y="600" width="24" height="43" fill="var(--onyx-error-svg-background-color)"></rect><rect x="328.60911" y="600" width="24" height="43" fill="var(--onyx-error-svg-background-color)"></rect><ellipse cx="300.60911" cy="643.5" rx="20" ry="7.5" fill="var(--onyx-error-svg-background-color)"></ellipse><ellipse cx="348.60911" cy="642.5" rx="20" ry="7.5" fill="var(--onyx-error-svg-background-color)"></ellipse><circle cx="318.60911" cy="518" r="27" fill="var(--onyx-error-svg-background-color-face)"></circle><circle cx="318.60911" cy="518" r="9" fill="var(--onyx-error-svg-background-color-accent)"></circle><path d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color-primary)"></path><ellipse cx="417.21511" cy="611.34365" rx="39.5" ry="12.40027" transform="translate(-238.28665 112.98044) rotate(-23.17116)" fill="var(--onyx-error-svg-background-color)"></ellipse><ellipse cx="269.21511" cy="664.34365" rx="39.5" ry="12.40027" transform="translate(-271.07969 59.02084) rotate(-23.17116)" fill="var(--onyx-error-svg-background-color)"></ellipse><path d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color-face)"></path>', 48)
   ])]);
 }
@@ -9272,7 +9279,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
   },
   setup(n) {
     const t = n;
-    return (e, o) => (i(), v(
+    return (e, o) => (i(), f(
       "svg",
       {
         class: I(["onyx-component onyx-file-upload-svg", {
@@ -9371,11 +9378,11 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
   },
   emits: ["update:modelValue"],
   setup(n, { emit: t }) {
-    const e = n, o = t, a = ne(e), { disabled: s } = be(e), { t: r } = q(), { densityClass: u } = F(e), { restAttrs: c, rootAttrs: d } = ge(), { formatFileSize: p } = va(), f = ae({
+    const e = n, o = t, a = ne(e), { disabled: s } = be(e), { t: r } = q(), { densityClass: u } = F(e), { restAttrs: c, rootAttrs: d } = ge(), { formatFileSize: p } = va(), v = ae({
       props: e,
       emit: o,
       key: "modelValue"
-    }), b = J("inputRef"), h = m(() => yt(f.value ?? []).filter((D) => D != null)), g = V(!1), $ = m(() => h.value.map((P, D) => {
+    }), b = J("inputRef"), h = m(() => yt(v.value ?? []).filter((D) => D != null)), g = V(!1), $ = m(() => h.value.map((P, D) => {
       if (e.accept && !qd(P, e.accept))
         return {
           text: r.value("fileUpload.status.fileTypeError", {
@@ -9390,7 +9397,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
           }),
           color: "danger"
         };
-      const te = h.value.slice(0, D + 1).reduce((U, R) => U + R.size, 0);
+      const te = h.value.slice(0, D + 1).reduce((H, R) => H + R.size, 0);
       if (e.maxTotalSize && te > ao(e.maxTotalSize))
         return {
           text: r.value("fileUpload.status.maxFileSizeError", {
@@ -9414,13 +9421,13 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
       }
     }))), w = (P) => {
       let D;
-      e.multiple ? e.replace ? D = P.slice() : D = h.value.concat(P) : D = P[0], f.value = D;
+      e.multiple ? e.replace ? D = P.slice() : D = h.value.concat(P) : D = P[0], v.value = D;
     }, M = (P) => {
       if (e.multiple) {
         const D = h.value.filter((te) => te !== P);
-        f.value = D;
+        v.value = D;
       } else
-        f.value = void 0;
+        v.value = void 0;
     }, O = (P) => {
       const D = P.target, te = Array.from(D.files ?? []);
       w(te), D.value = "";
@@ -9429,7 +9436,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
       N.value = !1;
       const D = Array.from(P.dataTransfer?.files ?? []);
       w(D);
-    }, H = () => {
+    }, U = () => {
       s.value || (N.value = !0);
     }, X = (P) => {
       try {
@@ -9441,7 +9448,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
     return (P, D) => l(a) ? (i(), _(Z, {
       key: 0,
       class: I(["onyx-file-upload-skeleton", `onyx-file-upload-skeleton--${e.size}`, l(u)])
-    }, null, 8, ["class"])) : (i(), v(
+    }, null, 8, ["class"])) : (i(), f(
       "div",
       E({
         key: 1,
@@ -9456,7 +9463,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
             { "onyx-file-upload--dragging": N.value }
           ]),
           disabled: l(s),
-          onDragenter: H,
+          onDragenter: U,
           onDragleave: D[0] || (D[0] = (te) => N.value = !1),
           onDragover: D[1] || (D[1] = Me(() => {
           }, ["prevent"])),
@@ -9467,7 +9474,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
             key: 0,
             disabled: l(s),
             active: N.value
-          }, null, 8, ["disabled", "active"])) : (i(), v("div", Zd, [
+          }, null, 8, ["disabled", "active"])) : (i(), f("div", Zd, [
             B(z, { icon: l(dl) }, null, 8, ["icon"]),
             y(
               "span",
@@ -9477,8 +9484,8 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
               /* TEXT */
             )
           ])),
-          L.value ? (i(), v("div", Xd, [
-            e.size === "large" ? (i(), v("p", Qd, [
+          L.value ? (i(), f("div", Xd, [
+            e.size === "large" ? (i(), f("p", Qd, [
               y(
                 "u",
                 null,
@@ -9492,13 +9499,13 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
                 /* TEXT */
               )
             ])) : k("v-if", !0),
-            e.maxSize || e.maxTotalSize ? (i(), v("p", ep, [
+            e.maxSize || e.maxTotalSize ? (i(), f("p", ep, [
               W(
                 T(l(r)("fileUpload.maxFileSize")) + ": ",
                 1
                 /* TEXT */
               ),
-              e.maxSize && e.maxTotalSize ? (i(), v(
+              e.maxSize && e.maxTotalSize ? (i(), f(
                 G,
                 { key: 0 },
                 [
@@ -9510,7 +9517,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
                 ],
                 64
                 /* STABLE_FRAGMENT */
-              )) : e.maxSize ? (i(), v(
+              )) : e.maxSize ? (i(), f(
                 G,
                 { key: 1 },
                 [
@@ -9522,7 +9529,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
                 ],
                 64
                 /* STABLE_FRAGMENT */
-              )) : e.maxTotalSize ? (i(), v(
+              )) : e.maxTotalSize ? (i(), f(
                 G,
                 { key: 2 },
                 [
@@ -9536,14 +9543,14 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
                 /* STABLE_FRAGMENT */
               )) : k("v-if", !0)
             ])) : k("v-if", !0),
-            e.multiple && e.maxCount ? (i(), v(
+            e.multiple && e.maxCount ? (i(), f(
               "p",
               tp,
               T(l(r)("fileUpload.maxFileCount", { n: e.maxCount })),
               1
               /* TEXT */
             )) : k("v-if", !0),
-            e.accept?.length ? (i(), v(
+            e.accept?.length ? (i(), f(
               "p",
               op,
               T(l(r)("fileUpload.allowedFileTypes", { types: e.accept.join(", ") })),
@@ -9569,7 +9576,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
           label: g.value ? l(r)("fileUpload.revealFilesButton") : l(r)("fileUpload.hideFilesButton"),
           onClick: D[3] || (D[3] = (te) => g.value = !g.value)
         }, null, 8, ["label"])) : k("v-if", !0),
-        ue.value ? (i(), v(
+        ue.value ? (i(), f(
           "div",
           {
             key: 1,
@@ -9579,7 +9586,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
             ])
           },
           [
-            (i(!0), v(
+            (i(!0), f(
               G,
               null,
               de(x.value, (te) => C(P.$slots, "default", {
@@ -9597,7 +9604,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
                         icon: l(pl),
                         label: l(r)("fileUpload.removeFile"),
                         disabled: l(s),
-                        onClick: (U) => M(te.file)
+                        onClick: (H) => M(te.file)
                       }, null, 8, ["icon", "label", "disabled", "onClick"])
                     ]),
                     _: 2
@@ -9671,6 +9678,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
     minlength: {},
     autocapitalize: { default: "sentences" },
     modelValue: {},
+    showPassword: { type: Boolean },
     autosize: {},
     disableManualResize: { type: Boolean, default: !1 }
   },
@@ -9681,15 +9689,15 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
       emit: a,
       key: "modelValue",
       default: ""
-    }), { rootAttrs: r, restAttrs: u } = ge(), { maxLength: c, maxLengthError: d } = ca({ props: o, modelValue: s }), p = m(() => o.error ?? d.value), { vCustomValidity: f, errorMessages: b } = Pe({ props: o, emit: a, error: p }), { densityClass: h } = F(o), g = m(() => Be(o.success)), $ = m(() => Be(o.message)), x = m(() => {
+    }), { rootAttrs: r, restAttrs: u } = ge(), { maxLength: c, maxLengthError: d } = ca({ props: o, modelValue: s }), p = m(() => o.error ?? d.value), { vCustomValidity: v, errorMessages: b } = Pe({ props: o, emit: a, error: p }), { densityClass: h } = F(o), g = m(() => Be(o.success)), $ = m(() => Be(o.message)), x = m(() => {
       if (!o.autosize) return;
-      const H = o.autosize.min ? Math.max(o.autosize.min, 2) : void 0, X = o.autosize.max;
-      return [H ? `--min-autosize-rows: ${H}` : "", `--max-autosize-rows: ${X ?? "unset"}`];
-    }), w = (H) => {
-      const X = H.target;
+      const U = o.autosize.min ? Math.max(o.autosize.min, 2) : void 0, X = o.autosize.max;
+      return [U ? `--min-autosize-rows: ${U}` : "", `--max-autosize-rows: ${X ?? "unset"}`];
+    }), w = (U) => {
+      const X = U.target;
       X.parentElement?.setAttribute("data-autosize-value", X.value);
     }, { disabled: M, showError: O } = be(o), L = ne(o), N = _t(O), K = J("inputRef");
-    return t({ input: K }), Ae(K, o), (H, X) => l(L) ? (i(), v(
+    return t({ input: K }), Ae(K, o), (U, X) => l(L) ? (i(), f(
       "div",
       E({
         key: 0,
@@ -9705,7 +9713,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
       ],
       16
       /* FULL_PROPS */
-    )) : (i(), v(
+    )) : (i(), f(
       "div",
       E({
         key: 1,
@@ -9741,7 +9749,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
                 title: o.hideLabel ? o.label : void 0
               }, l(u), { onInput: w }), null, 16, lp), [
                 [co, l(s)],
-                [l(f)]
+                [l(v)]
               ])
             ], 8, ap)
           ]),
@@ -9783,7 +9791,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
       { avatar: "https://www.github.com/MajaZarkova.png", name: "Maja Zarkova" },
       { avatar: "https://www.github.com/ChristianBusshoff.png", name: "Christian Bußhoff" }
     ];
-    return (u, c) => (i(), v("div", ip, [
+    return (u, c) => (i(), f("div", ip, [
       y(
         "div",
         {
@@ -9978,7 +9986,7 @@ const am = /* @__PURE__ */ Vt(Kd, [["render", Wd]]), Yd = /* @__PURE__ */ A({
           y("div", dp, [
             B(Ar, null, {
               default: S(() => [
-                (i(), v(
+                (i(), f(
                   G,
                   null,
                   de(r, (d) => B(Mt, {