sit-onyx 1.0.0-beta.97 → 1.0.0-beta.98

package/dist/index.js

@@ -1,14 +1,14 @@
-import { computed as y, inject as me, unref as s, defineComponent as w, ref as T, watch as Y, openBlock as r, createElementBlock as m, normalizeClass as C, withModifiers as Se, renderSlot as k, createCommentVNode as _, createBlock as x, resolveDynamicComponent as xe, withCtx as $, provide as Ve, toRef as ne, Fragment as H, createTextVNode as G, toDisplayString as E, mergeProps as B, createElementVNode as f, createVNode as V, useSlots as ie, reactive as yt, onBeforeMount as Gt, renderList as te, normalizeStyle as Me, toHandlers as Io, watchEffect as ye, shallowRef as Kt, onBeforeUnmount as Fe, toValue as he, nextTick as ht, useId as ae, onMounted as Ue, Teleport as ft, withDirectives as le, vModelCheckbox as Zt, vShow as vt, h as $e, toRefs as jt, vModelDynamic as Yt, mergeModels as Ne, useModel as _t, normalizeProps as Be, guardReactiveProps as Oe, useAttrs as Lo, vModelText as bt, createSlots as qe, isRef as Wt, withKeys as Tt } from "vue";
-const Ao = {
+import { computed as y, inject as me, readonly as Tt, toRef as X, defineComponent as w, ref as T, watch as Y, openBlock as r, createElementBlock as m, normalizeClass as C, unref as s, withModifiers as Se, renderSlot as k, createCommentVNode as _, createBlock as x, resolveDynamicComponent as xe, withCtx as $, provide as Ve, Fragment as H, createTextVNode as G, toDisplayString as E, mergeProps as B, createElementVNode as f, createVNode as V, useSlots as ie, reactive as yt, onBeforeMount as Kt, renderList as oe, normalizeStyle as Me, toHandlers as Lo, watchEffect as ye, shallowRef as Zt, onBeforeUnmount as Fe, toValue as he, nextTick as ht, useId as ae, onMounted as Ue, Teleport as ft, withDirectives as le, vModelCheckbox as jt, vShow as vt, h as $e, toRefs as Yt, vModelDynamic as Wt, mergeModels as Ne, useModel as _t, normalizeProps as Be, guardReactiveProps as Oe, useAttrs as Ao, vModelText as bt, createSlots as qe, isRef as Jt, withKeys as It } from "vue";
+const Do = {
   "2xs": 320,
   xs: 576,
   sm: 768,
   md: 992,
   lg: 1440,
   xl: 1920
-}, ke = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.03 8.03-1.06-1.06L12 10.94 8.03 6.97 6.97 8.03 10.94 12l-3.97 3.97 1.06 1.06L12 13.06l3.97 3.97 1.06-1.06L13.06 12z"/></svg>', br = ["compact", "default", "cozy"], R = (o) => ({
+}, ke = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.03 8.03-1.06-1.06L12 10.94 8.03 6.97 6.97 8.03 10.94 12l-3.97 3.97 1.06 1.06L12 13.06l3.97 3.97 1.06-1.06L13.06 12z"/></svg>', xr = ["compact", "default", "cozy"], R = (o) => ({
   densityClass: y(() => ({ [`onyx-density-${o.density}`]: !!o.density }))
-}), Do = "(optional)", Ro = "Cancel", No = "Apply", Ho = "Back", zo = "Close", Po = {
+}), Ro = "(optional)", No = "Cancel", Ho = "Apply", zo = "Back", Po = "Close", Fo = {
   head: {
     sortingAction: {
       asc: "Sort the table ascending by the {field} column.",
@@ -16,7 +16,7 @@ const Ao = {
       none: "Reset sorting."
     }
   }
-}, Fo = {
+}, Uo = {
   tooShort: {
     preview: "Too short, minimum {minLength} characters required",
     fullError: "Make the input at least {minLength} characters long. It is currently {n} characters long. Special characters might use more than one character."
@@ -71,24 +71,24 @@ const Ao = {
       fullError: '"{value}" is not a valid URL. A URL usually points to a website and should be similar to "https://www.example.com".'
     }
   }
-}, Uo = {
+}, qo = {
   toggleDropDown: "Toggle selection popover",
   empty: "No data available",
   noMatch: "No item matches your search",
   searchInputLabel: "Filter the list items",
   clearSearch: "Clear search filter",
   searchPlaceholder: "Search"
-}, qo = {
+}, Go = {
   selectAll: "Select all",
   currentSelection: "{n} selected"
-}, Go = {
+}, Ko = {
   decrement: "Decrement by {stepSize}",
   increment: "Increment by {stepSize}"
-}, Ko = {
-  empty: "This table is empty."
 }, Zo = {
+  empty: "This table is empty."
+}, jo = {
   opensExternally: "Opens in a new tab."
-}, jo = "Subpages of {label}", Yo = {
+}, Yo = "Subpages of {label}", Wo = {
   appLogo: "App logo of {appName}",
   goToHome: "Go to home page",
   goBack: "Go back",
@@ -98,11 +98,11 @@ const Ao = {
   navigationHeadline: "Navigation",
   moreActionsFlyout: 'Choose an action for the column "{column}"',
   moreActionsTrigger: "Toggle column actions"
-}, Wo = {
+}, Jo = {
   neutral: "Toggle info tooltip",
   danger: "Toggle error tooltip",
   success: "Toggle success tooltip"
-}, Jo = {
+}, Xo = {
   headline: "Change appearance",
   subtitle: "Select the appearance of the application:",
   appearance: "Appearance",
@@ -118,7 +118,7 @@ const Ao = {
     label: "Dark",
     description: "This color mode is optimized for darker environments."
   }
-}, Xo = {
+}, Qo = {
   label: "Pagination",
   ofPages: "of 1 page | of {n} pages",
   previous: "previous page",
@@ -127,51 +127,51 @@ const Ao = {
     label: "Page selection",
     listLabel: "Available pages"
   }
-}, Qo = {
-  clear: "Clear input"
 }, en = {
+  clear: "Clear input"
+}, tn = {
   close: "Close dialog"
 }, lt = {
-  optional: Do,
-  cancel: Ro,
-  apply: No,
-  back: Ho,
-  close: zo,
-  dataGrid: Po,
-  validations: Fo,
-  select: Uo,
-  selections: qo,
-  stepper: Go,
-  table: Ko,
-  link: Zo,
-  navItemOptionsLabel: jo,
-  navigation: Yo,
-  tooltip: Wo,
-  colorScheme: Jo,
-  pagination: Xo,
-  input: Qo,
-  dialog: en
-}, Jt = Symbol(), Xt = (o = {}) => {
-  const t = y(() => s(o == null ? void 0 : o.locale) ?? "en-US");
-  if (o.t)
-    return { t: o.t, locale: t };
-  const e = y(() => o != null && o.messages && t.value in o.messages ? o.messages[t.value] : lt), n = y(() => (l, a = {}) => {
-    let c = It(l, e.value) ?? It(l, lt) ?? "";
-    return c = on(c, a.n), nn(c, a);
+  optional: Ro,
+  cancel: No,
+  apply: Ho,
+  back: zo,
+  close: Po,
+  dataGrid: Fo,
+  validations: Uo,
+  select: qo,
+  selections: Go,
+  stepper: Ko,
+  table: Zo,
+  link: jo,
+  navItemOptionsLabel: Yo,
+  navigation: Wo,
+  tooltip: Jo,
+  colorScheme: Xo,
+  pagination: Qo,
+  input: en,
+  dialog: tn
+}, Xt = Symbol(), Qt = (o = {}) => {
+  const t = Tt(X((o == null ? void 0 : o.locale) ?? "en-US")), e = o.t ? Tt(X(o.t)) : void 0;
+  if (e)
+    return { t: e, locale: t };
+  const n = y(() => o != null && o.messages && t.value in o.messages ? o.messages[t.value] : lt), l = y(() => (a, c = {}) => {
+    let i = Lt(a, n.value) ?? Lt(a, lt) ?? "";
+    return i = nn(i, c.n), an(i, c);
   });
-  return { locale: t, t: n };
-}, tn = (o, t) => {
-  const e = Xt(t);
-  return o.provide(Jt, e), e;
-}, P = () => me(Jt, () => Xt(), !0), It = (o, t) => {
+  return { locale: t, t: l };
+}, on = (o, t) => {
+  const e = Qt(t);
+  return o.provide(Xt, e), e;
+}, P = () => me(Xt, () => Qt(), !0), Lt = (o, t) => {
   const e = o.split(".").reduce((n, l) => !n || typeof n == "string" ? n : n[l], t);
   return e && typeof e == "string" ? e : void 0;
-}, on = (o, t) => {
+}, nn = (o, t) => {
   const e = o.split(" | ").map((l) => l.trim());
   if (e.length <= 1) return o;
   let n = 1;
   return t === 0 && (n = 0), t && (t <= 0 || t > 1) && (n = 2), e.length === 2 ? n === 1 ? e[0] : e[1] : e[n];
-}, nn = (o, t) => t ? Object.entries(t).reduce((n, [l, a]) => a === void 0 ? n : n.replace(new RegExp(`{${l}}`, "gi"), a.toString()), o).replace(/\s?{.*}\s?/gi, "") : o, an = ["aria-modal", "aria-label", "role"], xt = /* @__PURE__ */ w({
+}, an = (o, t) => t ? Object.entries(t).reduce((n, [l, a]) => a === void 0 ? n : n.replace(new RegExp(`{${l}}`, "gi"), a.toString()), o).replace(/\s?{.*}\s?/gi, "") : o, ln = ["aria-modal", "aria-label", "role"], xt = /* @__PURE__ */ w({
   __name: "OnyxDialog",
   props: {
     density: {},
@@ -206,7 +206,7 @@ const Ao = {
       onCancel: d[0] || (d[0] = Se((u) => n("close"), ["prevent"]))
     }, [
       k(i.$slots, "default")
-    ], 42, an)) : _("", !0);
+    ], 42, ln)) : _("", !0);
   }
 }), _e = /* @__PURE__ */ w({
   __name: "OnyxHeadline",
@@ -224,7 +224,7 @@ const Ao = {
       _: 3
     }, 8, ["class"]));
   }
-}), ln = ["innerHTML"], A = /* @__PURE__ */ w({
+}), sn = ["innerHTML"], A = /* @__PURE__ */ w({
   __name: "OnyxIcon",
   props: {
     size: {},
@@ -242,46 +242,46 @@ const Ao = {
       }),
       "aria-hidden": "true",
       innerHTML: t.icon
-    }, null, 10, ln));
+    }, null, 10, sn));
   }
-}), Qt = Symbol(), X = Symbol("SKELETON_INJECTED_SYMBOL"), eo = (o) => (t) => y(() => typeof t.skeleton != "symbol" ? t.skeleton : t.skeleton === X && (o == null ? void 0 : o.skeleton) === !0 ? 3 : !1), gt = (o) => Ve(Qt, eo(o)), sn = eo(), oe = (o) => me(
-  Qt,
+}), eo = Symbol(), Q = Symbol("SKELETON_INJECTED_SYMBOL"), to = (o) => (t) => y(() => typeof t.skeleton != "symbol" ? t.skeleton : t.skeleton === Q && (o == null ? void 0 : o.skeleton) === !0 ? 3 : !1), gt = (o) => Ve(eo, to(o)), rn = to(), ne = (o) => me(
+  eo,
   /** Default */
-  sn
-)(o), to = Symbol(), W = Symbol("FORM_INJECTED_SYMBOL"), Lt = (o, t, e, n) => y(() => {
+  rn
+)(o), oo = Symbol(), W = Symbol("FORM_INJECTED_SYMBOL"), At = (o, t, e, n) => y(() => {
   const l = t.value[e];
   return l != null && typeof l != "symbol" ? l : l === W ? (o == null ? void 0 : o.value[e]) ?? n : n;
-}), oo = (o) => (t) => ({
-  disabled: Lt(o, t, "disabled", !1),
-  showError: Lt(o, t, "showError", "touched")
-}), rn = (o) => Ve(to, oo(o && ne(o))), cn = oo(), se = (o) => me(
-  to,
+}), no = (o) => (t) => ({
+  disabled: At(o, t, "disabled", !1),
+  showError: At(o, t, "showError", "touched")
+}), cn = (o) => Ve(oo, no(o && X(o))), un = no(), se = (o) => me(
+  oo,
   /** Default */
-  cn
-)(ne(o)), kt = (o, t) => {
+  un
+)(X(o)), kt = (o, t) => {
   const e = o.__vccOpts || o;
   for (const [n, l] of t)
     e[n] = l;
   return e;
-}, un = {}, dn = {
+}, dn = {}, pn = {
   "aria-hidden": "true",
   class: "onyx-component onyx-skeleton"
 };
-function pn(o, t) {
-  return r(), m("figure", dn);
+function mn(o, t) {
+  return r(), m("figure", pn);
 }
-const K = /* @__PURE__ */ kt(un, [["render", pn]]), mn = ["aria-label", "title", "disabled", "autofocus"], Ge = /* @__PURE__ */ w({
+const K = /* @__PURE__ */ kt(dn, [["render", mn]]), yn = ["aria-label", "title", "disabled", "autofocus"], Ge = /* @__PURE__ */ w({
   __name: "OnyxSystemButton",
   props: {
     disabled: { default: W },
     autofocus: { type: Boolean, default: !1 },
-    skeleton: { type: [Symbol, Boolean, Number], default: X },
+    skeleton: { type: [Symbol, Boolean, Number], default: Q },
     label: {},
     icon: {},
     color: { default: "intense" }
   },
   setup(o) {
-    const t = o, { disabled: e } = se(t), n = oe(t);
+    const t = o, { disabled: e } = se(t), n = ne(t);
     return (l, a) => s(n) ? (r(), x(K, {
       key: 0,
       class: C(["onyx-system-button-skeleton", t.icon ? "" : "onyx-system-button-skeleton--text"])
@@ -300,9 +300,9 @@ const K = /* @__PURE__ */ kt(un, [["render", pn]]), mn = ["aria-label", "title",
       }, null, 8, ["icon"])) : (r(), m(H, { key: 1 }, [
         G(E(t.label), 1)
       ], 64))
-    ], 10, mn));
+    ], 10, yn));
   }
-}), yn = { class: "onyx-alert-dialog__content" }, hn = { class: "onyx-alert-dialog__headline" }, fn = { class: "onyx-alert-dialog__body onyx-truncation" }, vn = { class: "onyx-alert-dialog__actions" }, xr = /* @__PURE__ */ w({
+}), hn = { class: "onyx-alert-dialog__content" }, fn = { class: "onyx-alert-dialog__headline" }, vn = { class: "onyx-alert-dialog__body onyx-truncation" }, _n = { class: "onyx-alert-dialog__actions" }, gr = /* @__PURE__ */ w({
   __name: "OnyxAlertDialog",
   props: {
     density: {},
@@ -321,13 +321,13 @@ const K = /* @__PURE__ */ kt(un, [["render", pn]]), mn = ["aria-label", "title",
       onClose: i[1] || (i[1] = (d) => n("close"))
     }), {
       default: $(() => [
-        f("div", yn, [
+        f("div", hn, [
           e.icon ? (r(), x(A, B({
             key: 0,
             class: "onyx-alert-dialog__icon"
           }, e.icon, { size: "64px" }), null, 16)) : _("", !0),
           f("div", null, [
-            f("div", hn, [
+            f("div", fn, [
               k(c.$slots, "headline", {
                 label: e.label
               }, () => [
@@ -345,28 +345,28 @@ const K = /* @__PURE__ */ kt(un, [["render", pn]]), mn = ["aria-label", "title",
                 onClick: i[0] || (i[0] = (d) => n("close"))
               }, null, 8, ["label", "icon"])
             ]),
-            f("div", fn, [
+            f("div", vn, [
               k(c.$slots, "default")
             ])
           ])
         ]),
-        f("div", vn, [
+        f("div", _n, [
           k(c.$slots, "actions")
         ])
       ]),
       _: 3
     }, 16, ["class"]));
   }
-}), _n = {
+}), bn = {
   key: 0,
   class: "onyx-app__nav"
-}, bn = { class: "onyx-app__page" }, xn = {
+}, xn = { class: "onyx-app__page" }, gn = {
   key: 1,
   class: "onyx-app__page-overlay"
-}, gn = {
+}, kn = {
   key: 2,
   class: "onyx-app__app-overlay"
-}, gr = /* @__PURE__ */ w({
+}, kr = /* @__PURE__ */ w({
   __name: "OnyxAppLayout",
   props: {
     navBarAlignment: { default: "top" }
@@ -376,24 +376,24 @@ const K = /* @__PURE__ */ kt(un, [["render", pn]]), mn = ["aria-label", "title",
     return (n, l) => (r(), m("div", {
       class: C(["onyx-component onyx-app", { "onyx-app--horizontal": t.navBarAlignment === "left" }])
     }, [
-      e.navBar ? (r(), m("div", _n, [
+      e.navBar ? (r(), m("div", bn, [
         k(n.$slots, "navBar")
       ])) : _("", !0),
-      f("div", bn, [
+      f("div", xn, [
         k(n.$slots, "default")
       ]),
-      e.pageOverlay ? (r(), m("div", xn, [
+      e.pageOverlay ? (r(), m("div", gn, [
         k(n.$slots, "pageOverlay")
       ])) : _("", !0),
-      e.appOverlay ? (r(), m("div", gn, [
+      e.appOverlay ? (r(), m("div", kn, [
         k(n.$slots, "appOverlay")
       ])) : _("", !0)
     ], 2));
   }
-}), kn = ["title"], wn = ["src", "alt"], Cn = {
+}), wn = ["title"], Cn = ["src", "alt"], $n = {
   key: 1,
   class: "onyx-avatar__initials"
-}, At = /* @__PURE__ */ w({
+}, Dt = /* @__PURE__ */ w({
   __name: "OnyxAvatar",
   props: {
     size: { default: "48px" },
@@ -418,21 +418,21 @@ const K = /* @__PURE__ */ kt(un, [["render", pn]]), mn = ["aria-label", "title",
         src: t.src,
         alt: t.label,
         onError: c[0] || (c[0] = (i) => l.value = !0)
-      }, null, 40, wn)) : (r(), m("div", Cn, [
+      }, null, 40, Cn)) : (r(), m("div", $n, [
         k(a.$slots, "default", {}, () => [
           G(E(n.value), 1)
         ])
       ]))
-    ], 10, kn));
+    ], 10, wn));
   }
-}), $n = { class: "onyx-component onyx-avatar-stack" }, kr = /* @__PURE__ */ w({
+}), Sn = { class: "onyx-component onyx-avatar-stack" }, wr = /* @__PURE__ */ w({
   __name: "OnyxAvatarStack",
   setup(o) {
-    return (t, e) => (r(), m("div", $n, [
+    return (t, e) => (r(), m("div", Sn, [
       k(t.$slots, "default")
     ]));
   }
-}), Sn = /* @__PURE__ */ w({
+}), Mn = /* @__PURE__ */ w({
   __name: "OnyxBadge",
   props: {
     density: {},
@@ -460,12 +460,12 @@ const K = /* @__PURE__ */ kt(un, [["render", pn]]), mn = ["aria-label", "title",
       ], 64))
     ], 2));
   }
-}), Mn = {}, Vn = {
+}), Vn = {}, Bn = {
   class: "onyx-component onyx-circle-spinner",
   viewBox: "0 0 50 50"
 };
-function Bn(o, t) {
-  return r(), m("svg", Vn, t[0] || (t[0] = [
+function On(o, t) {
+  return r(), m("svg", Bn, t[0] || (t[0] = [
     f("circle", {
       class: "onyx-circle-spinner__circle",
       cx: "50%",
@@ -474,22 +474,22 @@ function Bn(o, t) {
     }, null, -1)
   ]));
 }
-const On = /* @__PURE__ */ kt(Mn, [["render", Bn]]), En = {}, Tn = { class: "onyx-component onyx-loading-dots" };
-function In(o, t) {
-  return r(), m("div", Tn, t[0] || (t[0] = [
+const En = /* @__PURE__ */ kt(Vn, [["render", On]]), Tn = {}, In = { class: "onyx-component onyx-loading-dots" };
+function Ln(o, t) {
+  return r(), m("div", In, t[0] || (t[0] = [
     f("span", { class: "onyx-loading-dots__center" }, null, -1)
   ]));
 }
-const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
+const An = /* @__PURE__ */ kt(Tn, [["render", Ln]]), de = /* @__PURE__ */ w({
   __name: "OnyxLoadingIndicator",
   props: {
     type: { default: "dots" }
   },
   setup(o) {
     const t = o;
-    return (e, n) => t.type === "circle" ? (r(), x(On, { key: 0 })) : t.type === "dots" ? (r(), x(Ln, { key: 1 })) : _("", !0);
+    return (e, n) => t.type === "circle" ? (r(), x(En, { key: 0 })) : t.type === "dots" ? (r(), x(An, { key: 1 })) : _("", !0);
   }
-}), An = (o) => {
+}), Dn = (o) => {
   const t = T(!1), e = yt(/* @__PURE__ */ new Map()), n = (i) => {
     var p;
     const d = (p = o.value) == null ? void 0 : p.getBoundingClientRect();
@@ -510,7 +510,7 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
       i.animationEnded && e.delete(d);
     });
   }, c = T({});
-  return Gt(() => {
+  return Kt(() => {
     var i;
     (i = window.matchMedia) != null && i.call(window, "pointer: none").matches ? c.value = {
       touchstart: n,
@@ -522,10 +522,10 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
       mouseup: a
     };
   }), { isPointerDown: t, ripples: e, startRipple: n, hideRipples: a, hideRipple: l, events: c };
-}, Dn = ["data-rippleid"], Rn = /* @__PURE__ */ w({
+}, Rn = ["data-rippleid"], Nn = /* @__PURE__ */ w({
   __name: "OnyxRipple",
   setup(o, { expose: t }) {
-    const e = T(), { ripples: n, hideRipple: l, events: a } = An(e);
+    const e = T(), { ripples: n, hideRipple: l, events: a } = Dn(e);
     return t({
       events: a
     }), (c, i) => (r(), m("span", {
@@ -534,7 +534,7 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
       class: "onyx-component onyx-ripple",
       "aria-hidden": "true"
     }, [
-      (r(!0), m(H, null, te(s(n), ([d, u]) => (r(), m("span", {
+      (r(!0), m(H, null, oe(s(n), ([d, u]) => (r(), m("span", {
         key: d,
         class: "onyx-ripple__element",
         style: Me({
@@ -543,10 +543,10 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
         }),
         "data-rippleid": d,
         onAnimationend: i[0] || (i[0] = (p) => s(l)(p.target))
-      }, null, 44, Dn))), 128))
+      }, null, 44, Rn))), 128))
     ], 512));
   }
-}), Nn = ["disabled", "type", "aria-label", "autofocus"], Hn = { class: "onyx-button__label onyx-truncation-ellipsis" }, st = /* @__PURE__ */ w({
+}), Hn = ["disabled", "type", "aria-label", "autofocus"], zn = { class: "onyx-button__label onyx-truncation-ellipsis" }, st = /* @__PURE__ */ w({
   __name: "OnyxButton",
   props: {
     density: {},
@@ -558,10 +558,10 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
     color: { default: "primary" },
     mode: { default: "default" },
     icon: {},
-    skeleton: { type: [Symbol, Boolean, Number], default: X }
+    skeleton: { type: [Symbol, Boolean, Number], default: Q }
   },
   setup(o) {
-    const t = o, { densityClass: e } = R(t), { disabled: n } = se(t), l = oe(t), a = T(), c = y(() => {
+    const t = o, { densityClass: e } = R(t), { disabled: n } = se(t), l = ne(t), a = T(), c = y(() => {
       var i;
       return ((i = a.value) == null ? void 0 : i.events) ?? {};
     });
@@ -582,8 +582,8 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
       type: t.type,
       "aria-label": t.loading ? t.label : void 0,
       autofocus: t.autofocus
-    }, Io(c.value, !0)), [
-      !s(n) && !t.loading ? (r(), x(Rn, {
+    }, Lo(c.value, !0)), [
+      !s(n) && !t.loading ? (r(), x(Nn, {
         key: 0,
         ref_key: "rippleRef",
         ref: a
@@ -597,10 +597,10 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
         key: 2,
         class: "onyx-button__loading"
       })) : _("", !0),
-      f("span", Hn, E(t.label), 1)
-    ], 16, Nn));
+      f("span", zn, E(t.label), 1)
+    ], 16, Hn));
   }
-}), wr = ["button", "submit", "reset"], Cr = ["primary", "neutral", "danger"], $r = ["default", "outline", "plain"], Ke = (o) => ({
+}), Cr = ["button", "submit", "reset"], $r = ["primary", "neutral", "danger"], Sr = ["default", "outline", "plain"], Ke = (o) => ({
   /**
    * Class that configures which type of required marker is used.
    */
@@ -611,29 +611,29 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
     "onyx-required-marker": o.required,
     "onyx-optional-marker": !o.required
   }))
-}), rt = (o) => o instanceof Date && !isNaN(o), zn = (o, t) => {
+}), rt = (o) => o instanceof Date && !isNaN(o), Pn = (o, t) => {
   const e = Object.entries(o).filter(([l, a]) => a !== void 0), n = Object.entries(t).filter(([l, a]) => a !== void 0);
   return e.length !== n.length ? !1 : e.every(([l, a]) => a === t[l]);
-}, Pn = (o, t) => o.reduce(
+}, Fn = (o, t) => o.reduce(
   (e, n) => {
     const l = n[t] ?? "";
     return e[l] = e[l] || [], e[l].push(n), e;
   },
   {}
-), no = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([o, t]) => t.enumerable).map(([o]) => o), Fn = (o) => no().reduce(
+), ao = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([o, t]) => t.enumerable).map(([o]) => o), Un = (o) => ao().reduce(
   (t, e) => (t[e] = o[e], t),
   {}
-), Un = (o) => {
+), qn = (o) => {
   if (o.valueMissing) return "valueMissing";
-  const t = no().filter((e) => e !== "valid").sort();
+  const t = ao().filter((e) => e !== "valid").sort();
   for (const e of t)
     if (e in o && o[e]) return e;
-}, qn = Object.keys(
+}, Gn = Object.keys(
   lt.validations.typeMismatch
 ), ce = (o) => {
   if (o)
     return typeof o == "string" ? { shortMessage: o, longMessage: o, hidden: !1 } : o;
-}, ao = (o) => {
+}, lo = (o) => {
   if (!o) return;
   if (typeof o == "string")
     return o;
@@ -650,13 +650,13 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
   );
   const a = {
     mounted: (i) => {
-      ye(() => i.setCustomValidity(ao(o.props.customError) ?? "")), Y(
+      ye(() => i.setCustomValidity(lo(o.props.customError) ?? "")), Y(
         // we need to watch all props instead of only modelValue so the validity is re-checked
         // when the validation rules change
         [() => o.props],
         () => {
-          const d = Fn(i.validity);
-          !n.value && d.valid || n.value && zn(d, n.value) || (n.value = d);
+          const d = Un(i.validity);
+          !n.value && d.valid || n.value && Pn(d, n.value) || (n.value = d);
         },
         { immediate: !0, deep: !0 }
       ), Y(
@@ -670,12 +670,12 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
   }, c = y(() => {
     var p, h, v;
     if (!n.value || n.value.valid) return;
-    const i = Un(n.value), d = ce(o.props.customError);
+    const i = qn(n.value), d = ce(o.props.customError);
     if (d || i === "customError")
       return d || void 0;
     if (!i) return;
     if (i === "typeMismatch") {
-      const b = qn.includes(o.props.type) ? o.props.type : "generic";
+      const b = Gn.includes(o.props.type) ? o.props.type : "generic";
       return {
         longMessage: t.value(`validations.typeMismatch.${b}.fullError`, {
           value: (p = o.props.modelValue) == null ? void 0 : p.toString()
@@ -688,8 +688,8 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
       n: ((v = o.props.modelValue) == null ? void 0 : v.toString().length) ?? 0,
       minLength: o.props.minlength,
       maxLength: o.props.maxlength,
-      min: Dt(e.value, o.props.type, o.props.min),
-      max: Dt(e.value, o.props.type, o.props.max),
+      min: Rt(e.value, o.props.type, o.props.min),
+      max: Rt(e.value, o.props.type, o.props.max),
       step: o.props.precision
     };
     return {
@@ -707,7 +707,7 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
      */
     errorMessages: c
   };
-}, Dt = (o, t, e) => {
+}, Rt = (o, t, e) => {
   if (!t || !["date", "datetime-local"].includes(t)) return e == null ? void 0 : e.toString();
   const n = e != null ? new Date(e) : void 0;
   if (!rt(n)) return e == null ? void 0 : e.toString();
@@ -720,7 +720,7 @@ const Ln = /* @__PURE__ */ kt(En, [["render", In]]), de = /* @__PURE__ */ w({
   return n.toLocaleString(o, l);
 }, ve = (o) => o;
 function it() {
-  const o = Kt();
+  const o = Zt();
   return y({
     set: (t) => {
       o.value = t != null && "$el" in t ? t.$el : t;
@@ -728,12 +728,12 @@ function it() {
     get: () => o.value
   });
 }
-const Gn = (o, t) => Object.entries(o).every(
+const Kn = (o, t) => Object.entries(o).every(
   ([e, n]) => t[e] === n
-), Kn = (o, t) => typeof t == "string" ? o.key === t : Gn(
+), Zn = (o, t) => typeof t == "string" ? o.key === t : Kn(
   { altKey: !1, ctrlKey: !1, metaKey: !1, shiftKey: !1, ...t },
   o
-), ct = (o) => !jn.has(o), Zn = [
+), ct = (o) => !Yn.has(o), jn = [
   "Unidentified",
   "Alt",
   "AltGraph",
@@ -1041,19 +1041,19 @@ const Gn = (o, t) => Object.entries(o).every(
   "MediaPreviousTrack",
   "Power",
   "Unidentified"
-], jn = new Set(Zn), ge = yt(/* @__PURE__ */ new Map()), Yn = (o, t) => {
+], Yn = new Set(jn), ge = yt(/* @__PURE__ */ new Map()), Wn = (o, t) => {
   if (t != null && t.size) {
     ge.set(o, t);
     return;
   }
-  ge.delete(o), document.removeEventListener(o, lo);
-}, Rt = (o, t) => {
+  ge.delete(o), document.removeEventListener(o, so);
+}, Nt = (o, t) => {
   const e = ge.get(o);
-  e == null || e.delete(t), Yn(o, e);
-}, Wn = (o, t) => {
+  e == null || e.delete(t), Wn(o, e);
+}, Jn = (o, t) => {
   const e = ge.get(o) ?? /* @__PURE__ */ new Set();
-  e.add(t), ge.set(o, e), document.addEventListener(o, lo);
-}, lo = (o) => {
+  e.add(t), ge.set(o, e), document.addEventListener(o, so);
+}, so = (o) => {
   var e;
   const t = o.type;
   (e = ge.get(t)) == null || e.forEach((n) => n(o));
@@ -1062,31 +1062,31 @@ const Gn = (o, t) => Object.entries(o).every(
   listener: t,
   disabled: e
 }) => {
-  Gt(
+  Kt(
     () => ye(
-      () => e != null && e.value ? Rt(o, t) : Wn(o, t)
+      () => e != null && e.value ? Nt(o, t) : Jn(o, t)
     )
-  ), Fe(() => Rt(o, t));
-}, so = ({ inside: o, onOutsideClick: t, disabled: e }) => {
+  ), Fe(() => Nt(o, t));
+}, ro = ({ inside: o, onOutsideClick: t, disabled: e }) => {
   Ze({ type: "click", listener: (l) => {
     const a = he(o);
     !(Array.isArray(a) ? a : [a]).some(
       (d) => d == null ? void 0 : d.contains(l.target)
     ) && t(l);
   }, disabled: e });
-}, ro = (o, t) => {
+}, io = (o, t) => {
   let e;
   const n = (...l) => {
     clearTimeout(e), e = setTimeout(() => o(...l), he(t));
   };
   return n.abort = () => clearTimeout(e), n;
-}, io = (o, t = 500) => {
+}, co = (o, t = 500) => {
   let e = "";
-  const n = ro(() => e = "", t);
+  const n = io(() => e = "", t);
   return (l) => {
     ct(l.key) && (n(), e = `${e}${l.key}`, o(e));
   };
-}, Jn = ve(
+}, Xn = ve(
   (o) => {
     const t = y(() => s(o.multiple) ?? !1), e = y(() => s(o.isExpanded) ?? !1), n = /* @__PURE__ */ new Map(), l = (u) => (n.has(u) || n.set(u, ae()), n.get(u)), a = T(!1);
     ye(async () => {
@@ -1098,7 +1098,7 @@ const Gn = (o, t) => Object.entries(o).every(
         (p = document.getElementById(u)) == null || p.scrollIntoView({ block: "end", inline: "nearest" });
       });
     });
-    const c = io((u) => {
+    const c = co((u) => {
       var p;
       return (p = o.onTypeAhead) == null ? void 0 : p.call(o, u);
     }), i = (u) => {
@@ -1180,15 +1180,15 @@ const Gn = (o, t) => Object.entries(o).every(
       }
     };
   }
-), co = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"], uo = [
+), uo = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"], po = [
   "Escape",
   { key: "ArrowUp", altKey: !0 },
   "Enter",
   "Tab"
-], Nt = ["Enter"], Xn = (o, t) => {
-  const e = t ? [...Nt, " "] : Nt;
+], Ht = ["Enter"], Qn = (o, t) => {
+  const e = t ? [...Ht, " "] : Ht;
   return ut(o, e);
-}, ut = (o, t) => t.some((e) => Kn(o, e)), Qn = ve(
+}, ut = (o, t) => t.some((e) => Zn(o, e)), ea = ve(
   ({
     autocomplete: o,
     onAutocomplete: t,
@@ -1210,7 +1210,7 @@ const Gn = (o, t) => Object.entries(o).every(
     const M = ae(), I = y(() => s(o)), L = y(() => s(i)), z = y(() => s(n)), U = (D) => {
       const Je = D.target;
       I.value !== "none" && (t == null || t(Je.value));
-    }, Z = io((D) => e == null ? void 0 : e(D)), pe = (D) => {
+    }, Z = co((D) => e == null ? void 0 : e(D)), pe = (D) => {
       p == null || p(D), s(z) || u == null || u();
     }, J = (D) => {
       switch (D.key) {
@@ -1232,11 +1232,11 @@ const Gn = (o, t) => Object.entries(o).every(
           break;
       }
     }, N = (D) => {
-      if (D.key === "Enter" && D.preventDefault(), !L.value && ut(D, co))
+      if (D.key === "Enter" && D.preventDefault(), !L.value && ut(D, uo))
         return u == null || u(), D.key === " " && D.preventDefault(), D.key === "End" ? v == null ? void 0 : v() : h == null ? void 0 : h();
-      if (Xn(D, I.value === "none"))
+      if (Qn(D, I.value === "none"))
         return pe(d.value);
-      if (L.value && ut(D, uo))
+      if (L.value && ut(D, po))
         return u == null ? void 0 : u();
       if (I.value === "none" && ct(D.key))
         return !L.value && (u == null || u()), Z(D);
@@ -1249,9 +1249,9 @@ const Gn = (o, t) => Object.entries(o).every(
       "aria-autocomplete": I.value,
       type: "text"
     }), {
-      elements: { option: Q, group: we, listbox: Ce },
+      elements: { option: ee, group: we, listbox: Ce },
       internals: { getOptionId: We }
-    } = Jn({
+    } = Xn({
       label: a,
       description: c,
       multiple: z,
@@ -1260,14 +1260,14 @@ const Gn = (o, t) => Object.entries(o).every(
       isExpanded: L,
       onSelect: pe
     });
-    return so({
+    return ro({
       inside: S,
       onOutsideClick() {
         L.value && (u == null || u(!0));
       }
     }), {
       elements: {
-        option: Q,
+        option: ee,
         group: we,
         /**
          * The listbox associated with the combobox.
@@ -1302,14 +1302,14 @@ const Gn = (o, t) => Object.entries(o).every(
       }
     };
   }
-), ea = ve((o) => {
+), ta = ve((o) => {
   const t = ae(), e = ae(), n = it(), l = ae();
   Ze({
     type: "keydown",
     listener: (p) => p.key === "Escape" && c(!1),
     disabled: y(() => !o.isExpanded.value)
   });
-  const a = ro(() => o.onToggle(), 200);
+  const a = io(() => o.onToggle(), 200);
   Y(o.isExpanded, () => a.abort());
   const c = (p, h = !1) => {
     if (p === o.isExpanded.value) {
@@ -1401,10 +1401,10 @@ const Gn = (o, t) => Object.entries(o).every(
         "aria-labelledby": l,
         onClick: () => c(!1)
       },
-      ...po().elements
+      ...mo().elements
     }
   };
-}), po = ve(() => ({
+}), mo = ve(() => ({
   elements: {
     listItem: {
       role: "none"
@@ -1415,19 +1415,19 @@ const Gn = (o, t) => Object.entries(o).every(
       role: "menuitem"
     })
   }
-})), ta = {
+})), oa = {
   /**
    * Ensures that a given `number` is or is between a given `min` and `max`.
    */
   clamp: (o, t, e) => Math.max(Math.min(o, e), t)
-}, oa = ve(({ navigationName: o }) => {
+}, na = ve(({ navigationName: o }) => {
   const t = ae(), e = () => {
     const l = t ? document.getElementById(t) : void 0;
     return l ? [...l.querySelectorAll("button[aria-expanded][aria-controls]")] : [];
   }, n = (l, a) => {
     const c = e(), i = c.indexOf(l);
     if (i === -1) return;
-    const d = ta.clamp(
+    const d = oa.clamp(
       i + (a === "next" ? 1 : -1),
       0,
       c.length - 1
@@ -1452,7 +1452,7 @@ const Gn = (o, t) => Object.entries(o).every(
       }
     }
   };
-}), na = ve((o) => {
+}), aa = ve((o) => {
   const t = /* @__PURE__ */ new Map(), e = (l) => (t.has(l) || t.set(l, { tabId: ae(), panelId: ae() }), t.get(l)), n = (l) => {
     var v, b;
     const a = l.target, c = Array.from(
@@ -1518,20 +1518,20 @@ const Gn = (o, t) => Object.entries(o).every(
       })
     }
   };
-}), mo = ({ isExpanded: o }) => Ze({
+}), yo = ({ isExpanded: o }) => Ze({
   type: "keydown",
   listener: (t) => {
     t.key === "Escape" && (o.value = !1);
   },
   disabled: y(() => !o.value)
-}), aa = ve(
+}), la = ve(
   ({ toggleLabel: o, isVisible: t }) => {
-    const e = it(), n = it(), l = ne(t ?? !1);
-    so({
+    const e = it(), n = it(), l = X(t ?? !1);
+    ro({
       inside: y(() => [e.value, n.value]),
       onOutsideClick: () => l.value = !1,
       disabled: y(() => !l.value)
-    }), mo({ isExpanded: l });
+    }), yo({ isExpanded: l });
     const a = () => l.value = !l.value;
     return {
       elements: {
@@ -1559,8 +1559,8 @@ const Gn = (o, t) => Object.entries(o).every(
       }
     };
   }
-), la = ve(({ debounce: o, isVisible: t }) => {
-  const e = ae(), n = ne(t ?? !1);
+), sa = ve(({ debounce: o, isVisible: t }) => {
+  const e = ae(), n = X(t ?? !1);
   let l;
   const a = y({
     get: () => n.value,
@@ -1575,7 +1575,7 @@ const Gn = (o, t) => Object.entries(o).every(
     onFocusin: () => n.value = !0,
     onFocusout: () => n.value = !1
   };
-  return mo({ isExpanded: n }), {
+  return yo({ isExpanded: n }), {
     elements: {
       /**
        * The element which controls the tooltip visibility on hover.
@@ -1599,7 +1599,7 @@ const Gn = (o, t) => Object.entries(o).every(
       isVisible: n
     }
   };
-}), yo = (o, t = "bottom") => {
+}), ho = (o, t = "bottom") => {
   const e = T(t);
   return {
     /**
@@ -1621,7 +1621,7 @@ const Gn = (o, t) => Object.entries(o).every(
       e.value = p > u ? "top" : "bottom";
     }
   };
-}, wt = (o) => o ? getComputedStyle(o).overflow.includes("hidden") ? o : o.parentElement ? wt(o.parentElement) : void 0 : void 0, sa = (o, t) => {
+}, wt = (o) => o ? getComputedStyle(o).overflow.includes("hidden") ? o : o.parentElement ? wt(o.parentElement) : void 0 : void 0, ra = (o, t) => {
   const n = T("center");
   return {
     /**
@@ -1681,7 +1681,7 @@ const Gn = (o, t) => Object.entries(o).every(
       [`onyx-tooltip--${t.position}`]: t.position !== "auto",
       [`onyx-tooltip--${L.value}`]: t.alignment === "auto",
       [`onyx-tooltip--${t.alignment}`]: t.alignment !== "auto"
-    })), p = () => d.value === "hover" ? la(c.value) : aa(i.value), h = Kt(p());
+    })), p = () => d.value === "hover" ? sa(c.value) : la(i.value), h = Zt(p());
     Y(d, () => h.value = p());
     const v = y(() => {
       var Z;
@@ -1689,7 +1689,7 @@ const Gn = (o, t) => Object.entries(o).every(
     }), b = y(() => {
       var Z;
       return he((Z = h.value) == null ? void 0 : Z.elements.trigger);
-    }), g = T(), S = T(), { openDirection: M, updateOpenDirection: I } = yo(g, "top"), { wedgePosition: L, updateWedgePosition: z } = sa(g, S), U = () => {
+    }), g = T(), S = T(), { openDirection: M, updateOpenDirection: I } = ho(g, "top"), { wedgePosition: L, updateWedgePosition: z } = ra(g, S), U = () => {
       I(), z();
     };
     return Ze({
@@ -1720,15 +1720,15 @@ const Gn = (o, t) => Object.entries(o).every(
       k(Z.$slots, "default", { trigger: b.value })
     ], 2));
   }
-}), ra = { class: "onyx-component" }, Ct = /* @__PURE__ */ w({
+}), ia = { class: "onyx-component" }, Ct = /* @__PURE__ */ w({
   __name: "OnyxErrorTooltip",
   props: {
     errorMessages: {},
     disabled: { type: Boolean }
   },
   setup(o) {
-    const t = o, e = y(() => ao(t.errorMessages)), n = T();
-    return (l, a) => (r(), m("div", ra, [
+    const t = o, e = y(() => lo(t.errorMessages)), n = T();
+    return (l, a) => (r(), m("div", ia, [
       !e.value || t.disabled ? (r(), m("div", {
         key: 0,
         ref_key: "targetRef",
@@ -1758,7 +1758,7 @@ const Gn = (o, t) => Object.entries(o).every(
       ], 8, ["to"])) : _("", !0)
     ]));
   }
-}), ia = ["title"], ca = { class: "onyx-checkbox__container" }, ua = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"], tt = /* @__PURE__ */ w({
+}), ca = ["title"], ua = { class: "onyx-checkbox__container" }, da = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"], tt = /* @__PURE__ */ w({
   __name: "OnyxCheckbox",
   props: {
     density: {},
@@ -1767,7 +1767,7 @@ const Gn = (o, t) => Object.entries(o).every(
     hideLabel: { type: Boolean },
     disabled: { default: W },
     loading: { type: Boolean, default: !1 },
-    skeleton: { type: [Symbol, Boolean, Number], default: X },
+    skeleton: { type: [Symbol, Boolean, Number], default: Q },
     truncation: { default: "ellipsis" },
     required: { type: Boolean, default: !1 },
     requiredMarker: {},
@@ -1781,7 +1781,7 @@ const Gn = (o, t) => Object.entries(o).every(
     const e = o, n = t, l = y({
       get: () => e.modelValue,
       set: (b) => n("update:modelValue", b)
-    }), { requiredMarkerClass: a, requiredTypeClass: c } = Ke(e), { densityClass: i } = R(e), { vCustomValidity: d, errorMessages: u } = fe({ props: e, emit: n }), { disabled: p } = se(e), h = oe(e), v = y(() => e.hideLabel ? e.label : void 0);
+    }), { requiredMarkerClass: a, requiredTypeClass: c } = Ke(e), { densityClass: i } = R(e), { vCustomValidity: d, errorMessages: u } = fe({ props: e, emit: n }), { disabled: p } = se(e), h = ne(e), v = y(() => e.hideLabel ? e.label : void 0);
     return (b, g) => s(h) ? (r(), m("div", {
       key: 0,
       class: C(["onyx-component", "onyx-checkbox-skeleton", s(i)])
@@ -1801,7 +1801,7 @@ const Gn = (o, t) => Object.entries(o).every(
           class: C(["onyx-component onyx-checkbox", [s(c), s(i)]]),
           title: v.value
         }, [
-          f("div", ca, [
+          f("div", ua, [
             e.loading ? (r(), x(de, {
               key: 0,
               class: "onyx-checkbox__loading",
@@ -1817,8 +1817,8 @@ const Gn = (o, t) => Object.entries(o).every(
               required: e.required,
               value: e.value,
               autofocus: e.autofocus
-            }, null, 8, ua)), [
-              [Zt, l.value],
+            }, null, 8, da)), [
+              [jt, l.value],
               [s(d)]
             ])
           ]),
@@ -1835,12 +1835,12 @@ const Gn = (o, t) => Object.entries(o).every(
               class: C(["onyx-checkbox__marker", [s(a)]])
             }, null, 2)) : _("", !0)
           ], 64))
-        ], 10, ia)
+        ], 10, ca)
       ]),
       _: 1
     }, 8, ["disabled", "error-messages"]));
   }
-}), da = (o, t) => y(() => {
+}), pa = (o, t) => y(() => {
   const e = t.value.filter(
     (l) => o.value.includes(l)
   ), n = e.length === o.value.length;
@@ -1848,14 +1848,14 @@ const Gn = (o, t) => Object.entries(o).every(
     modelValue: n,
     indeterminate: !n && o.value.length && e.length ? !0 : void 0
   };
-}), ho = (o, t, e) => ({
+}), fo = (o, t, e) => ({
   /**
    * Current "select all" checkbox state.
    * - checked if all options are checked
    * - indeterminate if at least one but not all options are checked
    * - unchecked if no options are checked
    */
-  state: da(o, t),
+  state: pa(o, t),
   /**
    * Provides an update for the checkbox list with
    * - all option values if "select all" was checked
@@ -1882,7 +1882,7 @@ const Gn = (o, t) => Object.entries(o).every(
       _: 3
     }));
   }
-}), pa = { class: "onyx-component onyx-info-tooltip" }, je = /* @__PURE__ */ w({
+}), ma = { class: "onyx-component onyx-info-tooltip" }, je = /* @__PURE__ */ w({
   __name: "OnyxInfoTooltip",
   props: {
     text: {},
@@ -1892,7 +1892,7 @@ const Gn = (o, t) => Object.entries(o).every(
   },
   setup(o) {
     const t = o, e = y(() => typeof t.open == "object" ? t.open.type : typeof t.open == "string" ? t.open : "click");
-    return (n, l) => (r(), m("span", pa, [
+    return (n, l) => (r(), m("span", ma, [
       e.value === "click" ? (r(), x(He, {
         key: 0,
         text: t.text,
@@ -1933,10 +1933,10 @@ const Gn = (o, t) => Object.entries(o).every(
       ], 64))
     ]));
   }
-}), ma = ["disabled", "aria-label"], ya = {
+}), ya = ["disabled", "aria-label"], ha = {
   key: 0,
   class: "onyx-checkbox-group__label"
-}, Sr = /* @__PURE__ */ w({
+}, Mr = /* @__PURE__ */ w({
   __name: "OnyxCheckboxGroup",
   props: {
     density: {},
@@ -1949,7 +1949,7 @@ const Gn = (o, t) => Object.entries(o).every(
     direction: { default: "vertical" },
     withCheckAll: { type: [Boolean, Object], default: !1 },
     disabled: { default: W },
-    skeleton: { type: [Symbol, Boolean, Number], default: X }
+    skeleton: { type: [Symbol, Boolean, Number], default: Q }
   },
   emits: ["update:modelValue"],
   setup(o, { emit: t }) {
@@ -1958,7 +1958,7 @@ const Gn = (o, t) => Object.entries(o).every(
       l("update:modelValue", g);
     }, i = y(
       () => e.options.filter((v) => !v.disabled && !v.skeleton).map(({ value: v }) => v)
-    ), { disabled: d } = se(e), u = oe(e), p = ho(
+    ), { disabled: d } = se(e), u = ne(e), p = fo(
       i,
       y(() => e.modelValue),
       (v) => l("update:modelValue", v)
@@ -1972,7 +1972,7 @@ const Gn = (o, t) => Object.entries(o).every(
       disabled: s(d),
       "aria-label": e.label
     }, [
-      e.hideLabel ? _("", !0) : (r(), m("legend", ya, [
+      e.hideLabel ? _("", !0) : (r(), m("legend", ha, [
         V(_e, { is: "h3" }, {
           default: $(() => [
             G(E(e.label), 1)
@@ -1991,7 +1991,7 @@ const Gn = (o, t) => Object.entries(o).every(
           "onyx-checkbox-group__content--vertical": e.direction === "vertical"
         }])
       }, [
-        s(u) ? typeof s(u) == "number" ? (r(!0), m(H, { key: 1 }, te(s(u), (g) => (r(), x(tt, {
+        s(u) ? typeof s(u) == "number" ? (r(!0), m(H, { key: 1 }, oe(s(u), (g) => (r(), x(tt, {
           key: g,
           label: `Skeleton ${g}`,
           value: `skeleton-${g}`,
@@ -2003,7 +2003,7 @@ const Gn = (o, t) => Object.entries(o).every(
             class: "onyx-checkbox-group__option onyx-checkbox-group__check-all",
             "onUpdate:modelValue": s(p).handleChange
           }), null, 16, ["label", "onUpdate:modelValue"])) : _("", !0),
-          (r(!0), m(H, null, te(e.options, (g) => (r(), x(tt, B({
+          (r(!0), m(H, null, oe(e.options, (g) => (r(), x(tt, B({
             key: g.value.toString(),
             ref_for: !0
           }, g, {
@@ -2014,9 +2014,9 @@ const Gn = (o, t) => Object.entries(o).every(
           }), null, 16, ["truncation", "model-value", "onUpdate:modelValue"]))), 128))
         ], 64))
       ], 2)
-    ], 10, ma));
+    ], 10, ya));
   }
-}), ha = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.25 17.25h-4.5V6.008h4.5zm-3-1.5h1.5V7.508h-1.5zm14.273 1.958c.457-.668.727-1.47.727-2.333 0-.127-.008-.255-.023-.375V4.508h-4.5v6.765a4.3 4.3 0 0 0-1.5.442V8.258h-4.5v8.992h2.716a4.12 4.12 0 0 0 3.667 2.25c.863 0 1.672-.27 2.332-.727l2.76 2.76 1.058-1.058-2.76-2.76zm-.788-11.7v6.18a4.05 4.05 0 0 0-1.492-.773v-5.4h1.492zm-7.492 9.742V9.758h1.5v3.292a4.1 4.1 0 0 0-.735 2.325c0 .127.007.255.022.375zM16.124 18a2.63 2.63 0 0 1-2.625-2.625 2.63 2.63 0 0 1 2.625-2.625 2.63 2.63 0 0 1 2.625 2.625A2.63 2.63 0 0 1 16.125 18"/></svg>', fo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 10.94 3.61-3.612 1.062 1.06L13.06 12l3.612 3.61-1.062 1.062L12 13.06l-3.61 3.612-1.062-1.062L10.94 12 7.328 8.389l1.062-1.06z"/><path fill-rule="evenodd" d="M14.049 1.702a10.5 10.5 0 0 1 5.376 2.873 10.466 10.466 0 0 1 0 14.85 10.5 10.5 0 1 1-5.376-17.723m1.394 18.644a9 9 0 0 0 2.92-1.982A9.002 9.002 0 0 0 15.48 3.626a9 9 0 0 0-9.843 2.01 9 9 0 0 0 9.807 14.71" clip-rule="evenodd"/></svg>', fa = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" }, vo = /* @__PURE__ */ w({
+}), fa = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.25 17.25h-4.5V6.008h4.5zm-3-1.5h1.5V7.508h-1.5zm14.273 1.958c.457-.668.727-1.47.727-2.333 0-.127-.008-.255-.023-.375V4.508h-4.5v6.765a4.3 4.3 0 0 0-1.5.442V8.258h-4.5v8.992h2.716a4.12 4.12 0 0 0 3.667 2.25c.863 0 1.672-.27 2.332-.727l2.76 2.76 1.058-1.058-2.76-2.76zm-.788-11.7v6.18a4.05 4.05 0 0 0-1.492-.773v-5.4h1.492zm-7.492 9.742V9.758h1.5v3.292a4.1 4.1 0 0 0-.735 2.325c0 .127.007.255.022.375zM16.124 18a2.63 2.63 0 0 1-2.625-2.625 2.63 2.63 0 0 1 2.625-2.625 2.63 2.63 0 0 1 2.625 2.625A2.63 2.63 0 0 1 16.125 18"/></svg>', vo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 10.94 3.61-3.612 1.062 1.06L13.06 12l3.612 3.61-1.062 1.062L12 13.06l-3.61 3.612-1.062-1.062L10.94 12 7.328 8.389l1.062-1.06z"/><path fill-rule="evenodd" d="M14.049 1.702a10.5 10.5 0 0 1 5.376 2.873 10.466 10.466 0 0 1 0 14.85 10.5 10.5 0 1 1-5.376-17.723m1.394 18.644a9 9 0 0 0 2.92-1.982A9.002 9.002 0 0 0 15.48 3.626a9 9 0 0 0-9.843 2.01 9 9 0 0 0 9.807 14.71" clip-rule="evenodd"/></svg>', va = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" }, _o = /* @__PURE__ */ w({
   __name: "OnyxEmpty",
   props: {
     density: {}
@@ -2028,19 +2028,19 @@ const Gn = (o, t) => Object.entries(o).every(
     }, [
       k(n.$slots, "icon", {}, () => [
         V(A, {
-          icon: s(fo),
+          icon: s(vo),
           size: "48px"
         }, null, 8, ["icon"])
       ]),
-      f("div", fa, [
+      f("div", va, [
         k(n.$slots, "default")
       ])
     ], 2));
   }
-}), va = { class: "onyx-table-wrapper onyx-component" }, _a = ["tabindex"], ba = ["span"], xa = {
+}), _a = { class: "onyx-table-wrapper onyx-component" }, ba = ["tabindex"], xa = ["span"], ga = {
   key: 0,
   class: "onyx-table__header"
-}, ga = { key: 0 }, ka = ["colspan"], wa = { class: "onyx-table__empty" }, Ca = { colspan: "100%" }, $a = { class: "onyx-table__empty-content" }, Sa = /* @__PURE__ */ w({
+}, ka = { key: 0 }, wa = ["colspan"], Ca = { class: "onyx-table__empty" }, $a = { colspan: "100%" }, Sa = { class: "onyx-table__empty-content" }, Ma = /* @__PURE__ */ w({
   __name: "OnyxTable",
   props: {
     density: {},
@@ -2053,7 +2053,7 @@ const Gn = (o, t) => Object.entries(o).every(
     const t = o, e = ie(), { t: n } = P(), { densityClass: l } = R(t), a = y(() => n.value("table.empty"));
     return (c, i) => {
       var d;
-      return r(), m("div", va, [
+      return r(), m("div", _a, [
         f("div", {
           class: C({ "onyx-table-wrapper__scroll-container": !t.withPageScrolling }),
           tabindex: t.withPageScrolling ? void 0 : 0
@@ -2065,31 +2065,31 @@ const Gn = (o, t) => Object.entries(o).every(
               s(l)
             ]])
           }, [
-            (r(!0), m(H, null, te(t.columnGroups, (u) => (r(), m("colgroup", {
+            (r(!0), m(H, null, oe(t.columnGroups, (u) => (r(), m("colgroup", {
               key: u.key,
               span: u.span
-            }, null, 8, ba))), 128)),
-            e.head ? (r(), m("thead", xa, [
-              (d = t.columnGroups) != null && d.length ? (r(), m("tr", ga, [
-                (r(!0), m(H, null, te(t.columnGroups, (u) => (r(), m("th", {
+            }, null, 8, xa))), 128)),
+            e.head ? (r(), m("thead", ga, [
+              (d = t.columnGroups) != null && d.length ? (r(), m("tr", ka, [
+                (r(!0), m(H, null, oe(t.columnGroups, (u) => (r(), m("th", {
                   key: u.key,
                   colspan: u.span,
                   scope: "colgroup",
                   class: "onyx-table__colgroup"
-                }, E(u.header), 9, ka))), 128))
+                }, E(u.header), 9, wa))), 128))
               ])) : _("", !0),
               k(c.$slots, "head")
             ])) : _("", !0),
             f("tbody", null, [
               k(c.$slots, "default", {}, () => [
-                f("tr", wa, [
-                  f("td", Ca, [
-                    f("div", $a, [
+                f("tr", Ca, [
+                  f("td", $a, [
+                    f("div", Sa, [
                       k(c.$slots, "empty", { defaultMessage: a.value }, () => [
-                        V(vo, null, {
+                        V(_o, null, {
                           icon: $(() => [
                             V(A, {
-                              icon: s(ha),
+                              icon: s(fa),
                               size: "48px"
                             }, null, 8, ["icon"])
                           ]),
@@ -2105,11 +2105,11 @@ const Gn = (o, t) => Object.entries(o).every(
               ])
             ])
           ], 2)
-        ], 10, _a)
+        ], 10, ba)
       ]);
     };
   }
-}), Ma = /* @__PURE__ */ w({
+}), Va = /* @__PURE__ */ w({
   __name: "OnyxDataGridRenderer",
   props: {
     density: {},
@@ -2122,10 +2122,10 @@ const Gn = (o, t) => Object.entries(o).every(
   },
   setup(o) {
     const t = o;
-    return (e, n) => (r(), x(Sa, B({ class: "onyx-data-grid" }, t), {
+    return (e, n) => (r(), x(Ma, B({ class: "onyx-data-grid" }, t), {
       head: $(() => [
         f("tr", null, [
-          (r(!0), m(H, null, te(t.columns, (l) => (r(), m("th", B({
+          (r(!0), m(H, null, oe(t.columns, (l) => (r(), m("th", B({
             key: l.key,
             ref_for: !0
           }, l.thAttributes, { scope: "col" }), [
@@ -2134,11 +2134,11 @@ const Gn = (o, t) => Object.entries(o).every(
         ])
       ]),
       default: $(() => [
-        (r(!0), m(H, null, te(t.rows, (l) => (r(), m("tr", B({
+        (r(!0), m(H, null, oe(t.rows, (l) => (r(), m("tr", B({
           key: l.id,
           ref_for: !0
         }, l.trAttributes), [
-          (r(!0), m(H, null, te(t.columns, (a) => (r(), m(H, {
+          (r(!0), m(H, null, oe(t.columns, (a) => (r(), m(H, {
             key: a.key
           }, [
             l.cells[a.key] ? (r(), m("td", B({
@@ -2153,7 +2153,7 @@ const Gn = (o, t) => Object.entries(o).every(
       _: 1
     }, 16));
   }
-}), Va = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.75 14.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5m8.25 0a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5M22.5 12a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0"/></svg>', $t = /* @__PURE__ */ w({
+}), Ba = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.75 14.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5m8.25 0a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5M22.5 12a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0"/></svg>', $t = /* @__PURE__ */ w({
   __name: "OnyxListItem",
   props: {
     density: {},
@@ -2180,15 +2180,15 @@ const Gn = (o, t) => Object.entries(o).every(
       k(n.$slots, "default")
     ], 2));
   }
-}), Ba = (o) => y(o), be = Symbol("MANAGED_SYMBOL"), ze = (o, t, e) => {
+}), Oa = (o) => y(o), be = Symbol("MANAGED_SYMBOL"), ze = (o, t, e) => {
   const n = y(() => o.value === be), l = T(he(n) ? t : o.value);
-  return { state: Ba({
+  return { state: Oa({
     set: (c) => {
       l.value = c, e(c);
     },
     get: () => n.value ? l.value : o.value
   }), isManaged: n };
-}, Oa = ["aria-label"], St = /* @__PURE__ */ w({
+}, Ea = ["aria-label"], St = /* @__PURE__ */ w({
   __name: "OnyxFlyoutMenu",
   props: {
     open: { default: be },
@@ -2198,12 +2198,12 @@ const Gn = (o, t) => Object.entries(o).every(
   emits: ["update:open"],
   setup(o, { emit: t }) {
     const e = o, n = t, { state: l } = ze(
-      ne(() => e.open),
+      X(() => e.open),
       !1,
       (u) => n("update:open", u)
     ), a = ie(), {
       elements: { root: c, button: i, menu: d }
-    } = ea({
+    } = ta({
       isExpanded: y(() => !!l.value),
       onToggle: () => l.value = !l.value,
       trigger: y(() => e.trigger)
@@ -2224,30 +2224,30 @@ const Gn = (o, t) => Object.entries(o).every(
           k(u.$slots, "options")
         ], 16)) : _("", !0),
         k(u.$slots, "footer")
-      ], 10, Oa)), [
+      ], 10, Ea)), [
         [vt, s(l)]
       ]) : _("", !0)
     ], 16));
   }
-}), Ea = { class: "onyx-component onyx-data-grid-header-cell" }, Ta = { class: "onyx-data-grid-header-cell__label" }, Ia = {
+}), Ta = { class: "onyx-component onyx-data-grid-header-cell" }, Ia = { class: "onyx-data-grid-header-cell__label" }, La = {
   key: 0,
   class: "onyx-data-grid-header-cell__actions"
-}, Ht = /* @__PURE__ */ w({
+}, zt = /* @__PURE__ */ w({
   __name: "HeaderCell",
   props: {
     label: {}
   },
   setup(o) {
     const t = o, e = ie();
-    return (n, l) => (r(), m("div", Ea, [
-      f("span", Ta, E(t.label), 1),
-      e.actions ? (r(), m("div", Ia, [
+    return (n, l) => (r(), m("div", Ta, [
+      f("span", Ia, E(t.label), 1),
+      e.actions ? (r(), m("div", La, [
         k(n.$slots, "actions")
       ])) : _("", !0)
     ]));
   }
 });
-const La = (o) => {
+const Aa = (o) => {
   const t = (l) => {
     const c = o.map((i) => i.header).filter((i) => !!i).map((i) => i.actions).filter((i) => !!i);
     return l.map((i) => {
@@ -2262,7 +2262,7 @@ const La = (o) => {
             button: ({ trigger: b }) => $e(Ge, {
               label: p.value("navigation.moreActionsTrigger"),
               color: "medium",
-              icon: Va,
+              icon: Ba,
               ...b
             }),
             options: () => h
@@ -2270,14 +2270,14 @@ const La = (o) => {
         );
         return {
           key: i,
-          component: () => $e(Ht, { label: String(i) }, { actions: () => v }),
+          component: () => $e(zt, { label: String(i) }, { actions: () => v }),
           props: {}
         };
       }
       const u = c.flatMap((p) => p(i)).map(({ iconComponent: p }) => p);
       return {
         key: i,
-        component: () => $e(Ht, { label: String(i) }, { actions: () => u }),
+        component: () => $e(zt, { label: String(i) }, { actions: () => u }),
         props: {}
       };
     });
@@ -2305,7 +2305,7 @@ const La = (o) => {
     // the combined `watch` for all features
     watchSources: n
   };
-}, Mr = /* @__PURE__ */ w({
+}, Vr = /* @__PURE__ */ w({
   __name: "OnyxDataGrid",
   props: {
     features: { default: () => [] },
@@ -2313,8 +2313,8 @@ const La = (o) => {
     data: {}
   },
   setup(o) {
-    const t = o, e = T([]), n = T([]), { columns: l, data: a, features: c } = jt(t), i = y(
-      () => La(c.value)
+    const t = o, e = T([]), n = T([]), { columns: l, data: a, features: c } = Yt(t), i = y(
+      () => Aa(c.value)
     );
     let d;
     const u = () => {
@@ -2333,12 +2333,12 @@ const La = (o) => {
         d == null || d(), d = u();
       },
       { immediate: !0 }
-    ), (p, h) => (r(), x(Ma, {
+    ), (p, h) => (r(), x(Va, {
       columns: e.value,
       rows: n.value
     }, null, 8, ["columns", "rows"]));
   }
-}), Aa = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.905 12.653 12 17.558l-4.905-4.905 1.058-1.058 3.097 3.098V6h1.5v8.693l3.098-3.098z"/></svg>', Da = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.095 10.905 12 6l4.905 4.905-1.058 1.058-3.097-3.098v8.693h-1.5V8.865l-3.098 3.098z"/></svg>', Ra = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.75 1.94 5.03 5.03-1.06 1.06-3.22-3.22v8.69H15V4.81l-3.22 3.22-1.06-1.06zM9 10.5v8.69l3.22-3.22 1.06 1.06-5.03 5.03-5.03-5.03 1.06-1.06 3.22 3.22V10.5z"/></svg>', Na = /* @__PURE__ */ w({
+}), Da = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.905 12.653 12 17.558l-4.905-4.905 1.058-1.058 3.097 3.098V6h1.5v8.693l3.098-3.098z"/></svg>', Ra = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.095 10.905 12 6l4.905 4.905-1.058 1.058-3.097-3.098v8.693h-1.5V8.865l-3.098 3.098z"/></svg>', Na = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.75 1.94 5.03 5.03-1.06 1.06-3.22-3.22v8.69H15V4.81l-3.22 3.22-1.06-1.06zM9 10.5v8.69l3.22-3.22 1.06 1.06-5.03 5.03-5.03-5.03 1.06-1.06 3.22 3.22V10.5z"/></svg>', Ha = /* @__PURE__ */ w({
   __name: "SortAction",
   props: {
     columnLabel: {},
@@ -2346,7 +2346,7 @@ const La = (o) => {
   },
   setup(o) {
     const t = o, { t: e } = P(), n = y(
-      () => t.sortDirection === "asc" ? Da : t.sortDirection === "desc" ? Aa : Ra
+      () => t.sortDirection === "asc" ? Ra : t.sortDirection === "desc" ? Da : Na
     ), l = y(() => {
       const a = pt(t.sortDirection);
       return e.value(`dataGrid.head.sortingAction.${a}`, {
@@ -2369,8 +2369,8 @@ const La = (o) => {
     default:
       return "asc";
   }
-}, Ha = Symbol("Sorting"), za = (o) => {
-  const t = ne(
+}, za = Symbol("Sorting"), Pa = (o) => {
+  const t = X(
     (o == null ? void 0 : o.sortState) ?? {
       column: void 0,
       direction: "none"
@@ -2393,7 +2393,7 @@ const La = (o) => {
     };
   };
   return {
-    name: Ha,
+    name: za,
     watch: [t, a],
     mutation: {
       func: (d) => {
@@ -2407,7 +2407,7 @@ const La = (o) => {
     header: {
       actions: (d) => n.value(d) === !0 ? [
         {
-          iconComponent: $e(Na, {
+          iconComponent: $e(Ha, {
             columnLabel: String(d),
             sortDirection: t.value.column === d ? t.value.direction : void 0,
             onClick: () => c(d)
@@ -2416,10 +2416,10 @@ const La = (o) => {
       ] : []
     }
   };
-}, Vr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Br = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  useSorting: za
-}, Symbol.toStringTag, { value: "Module" })), Te = (o) => y(() => o.value === !0 ? "onyx-form-element--immediate-invalid" : o.value === !1 ? "onyx-form-element--suppress-invalid" : "onyx-form-element--touched-invalid"), Pa = {
+  useSorting: Pa
+}, Symbol.toStringTag, { value: "Module" })), Te = (o) => y(() => o.value === !0 ? "onyx-form-element--immediate-invalid" : o.value === !1 ? "onyx-form-element--suppress-invalid" : "onyx-form-element--touched-invalid"), Fa = {
   class: /* @__PURE__ */ C(["onyx-truncation-ellipsis"])
 }, ot = /* @__PURE__ */ w({
   __name: "FormMessage",
@@ -2433,7 +2433,7 @@ const La = (o) => {
       class: C(["onyx-component", "onyx-form-message", `onyx-form-message__${t.type}`])
     }, {
       default: $(() => [
-        f("span", Pa, E(t.messages.shortMessage), 1),
+        f("span", Fa, E(t.messages.shortMessage), 1),
         t.messages.longMessage ? (r(), x(je, {
           key: 0,
           class: "onyx-form-message__tooltip",
@@ -2446,10 +2446,10 @@ const La = (o) => {
       _: 1
     }, 8, ["class"]));
   }
-}), Fa = {
+}), Ua = {
   key: 0,
   class: "onyx-form-element__label onyx-text--small"
-}, Ua = ["for"], qa = { class: "onyx-form-element__footer onyx-text--small" }, Ga = { class: "onyx-form-element__footer-messages" }, Ka = {
+}, qa = ["for"], Ga = { class: "onyx-form-element__footer onyx-text--small" }, Ka = { class: "onyx-form-element__footer-messages" }, Za = {
   key: 0,
   class: "onyx-form-element__counter"
 }, Ie = /* @__PURE__ */ w({
@@ -2483,11 +2483,11 @@ const La = (o) => {
         a.successMessages ? "onyx-form-element--success" : void 0
       ])
     }, [
-      t.hideLabel ? _("", !0) : (r(), m("div", Fa, [
+      t.hideLabel ? _("", !0) : (r(), m("div", Ua, [
         f("label", {
           for: t.id,
           class: "onyx-truncation-ellipsis"
-        }, E(t.label), 9, Ua),
+        }, E(t.label), 9, qa),
         t.required ? (r(), m("span", {
           key: 0,
           class: C([t.required ? s(e) : void 0])
@@ -2506,8 +2506,8 @@ const La = (o) => {
       k(a.$slots, "default", {
         id: t.id
       }),
-      f("div", qa, [
-        f("span", Ga, [
+      f("div", Ga, [
+        f("span", Ka, [
           t.errorMessages ? (r(), x(ot, {
             key: 0,
             class: "onyx-form-element__error-message",
@@ -2527,11 +2527,11 @@ const La = (o) => {
             type: "neutral"
           }, null, 8, ["messages"])) : _("", !0)
         ]),
-        l.value ? (r(), m("span", Ka, E(l.value), 1)) : _("", !0)
+        l.value ? (r(), m("span", Za, E(l.value), 1)) : _("", !0)
       ])
     ], 2));
   }
-}), Za = { class: "onyx-datepicker__wrapper" }, ja = ["id", "type", "required", "autofocus", "name", "readonly", "disabled", "aria-label", "title", "min", "max"], Br = /* @__PURE__ */ w({
+}), ja = { class: "onyx-datepicker__wrapper" }, Ya = ["id", "type", "required", "autofocus", "name", "readonly", "disabled", "aria-label", "title", "min", "max"], Or = /* @__PURE__ */ w({
   __name: "OnyxDatePicker",
   props: {
     disabled: { default: W },
@@ -2553,7 +2553,7 @@ const La = (o) => {
     loading: { type: Boolean, default: !1 },
     hideSuccessIcon: { type: Boolean },
     hideClearIcon: { type: Boolean },
-    skeleton: { type: [Symbol, Boolean, Number], default: X },
+    skeleton: { type: [Symbol, Boolean, Number], default: Q },
     modelValue: {},
     type: { default: "date" },
     min: {},
@@ -2561,7 +2561,7 @@ const La = (o) => {
   },
   emits: ["update:modelValue", "validityChange"],
   setup(o, { emit: t }) {
-    const e = o, n = t, { vCustomValidity: l, errorMessages: a } = fe({ props: e, emit: n }), c = y(() => ce(e.success)), i = y(() => ce(e.message)), { densityClass: d } = R(e), { disabled: u, showError: p } = se(e), h = oe(e), v = Te(p), b = y(() => (S) => {
+    const e = o, n = t, { vCustomValidity: l, errorMessages: a } = fe({ props: e, emit: n }), c = y(() => ce(e.success)), i = y(() => ce(e.message)), { densityClass: d } = R(e), { disabled: u, showError: p } = se(e), h = ne(e), v = Te(p), b = y(() => (S) => {
       const M = S != null ? new Date(S) : void 0;
       if (!rt(M)) return;
       const I = M.toISOString().split("T")[0];
@@ -2594,7 +2594,7 @@ const La = (o) => {
         message: i.value
       }), {
         default: $(({ id: I }) => [
-          f("div", Za, [
+          f("div", ja, [
             e.loading ? (r(), x(de, {
               key: 0,
               class: "onyx-datepicker__loading",
@@ -2615,8 +2615,8 @@ const La = (o) => {
               title: e.hideLabel ? e.label : void 0,
               min: b.value(e.min),
               max: b.value(e.max)
-            }, null, 10, ja)), [
-              [Yt, g.value],
+            }, null, 10, Ya)), [
+              [Wt, g.value],
               [s(l)]
             ])
           ])
@@ -2625,7 +2625,7 @@ const La = (o) => {
       }, 16, ["error-messages", "success-messages", "message"])
     ], 2));
   }
-}), Ya = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.15 7.913v1.5h4.377l-6.145 6.144 1.06 1.06 6.146-6.144v4.377h1.5V7.913z"/></svg>', Wa = (o) => /^http(s?):\/\//.test(o), Mt = /* @__PURE__ */ w({
+}), Wa = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.15 7.913v1.5h4.377l-6.145 6.144 1.06 1.06 6.146-6.144v4.377h1.5V7.913z"/></svg>', Ja = (o) => /^http(s?):\/\//.test(o), Mt = /* @__PURE__ */ w({
   __name: "OnyxExternalLinkIcon",
   props: {
     href: {},
@@ -2634,16 +2634,16 @@ const La = (o) => {
   setup(o) {
     const t = o, e = y(() => {
       const n = t.withExternalIcon;
-      return n !== "auto" ? n : Wa(t.href ?? "");
+      return n !== "auto" ? n : Ja(t.href ?? "");
     });
     return (n, l) => e.value ? (r(), x(A, {
       key: 0,
       class: "onyx-component onyx-external-link-icon",
-      icon: s(Ya),
+      icon: s(Wa),
       size: "16px"
     }, null, 8, ["icon"])) : _("", !0);
   }
-}), Or = ["h1", "h2", "h3", "h4", "h5", "h6"], Er = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], Ja = ["aria-label", "title", "type", "disabled", "autofocus"], Xa = /* @__PURE__ */ w({
+}), Er = ["h1", "h2", "h3", "h4", "h5", "h6"], Tr = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], Xa = ["aria-label", "title", "type", "disabled", "autofocus"], Qa = /* @__PURE__ */ w({
   __name: "OnyxIconButton",
   props: {
     density: {},
@@ -2654,10 +2654,10 @@ const La = (o) => {
     color: { default: "primary" },
     loading: { type: Boolean },
     icon: {},
-    skeleton: { type: [Symbol, Boolean, Number], default: X }
+    skeleton: { type: [Symbol, Boolean, Number], default: Q }
   },
   setup(o) {
-    const t = o, { densityClass: e } = R(t), { disabled: n } = se(t), l = oe(t);
+    const t = o, { densityClass: e } = R(t), { disabled: n } = se(t), l = ne(t);
     return (a, c) => s(l) ? (r(), x(K, {
       key: 0,
       class: C(["onyx-icon-button-skeleton", s(e)])
@@ -2681,9 +2681,9 @@ const La = (o) => {
         key: 1,
         icon: t.icon
       }, null, 8, ["icon"])) : k(a.$slots, "default", { key: 2 })
-    ], 10, Ja));
+    ], 10, Xa));
   }
-}), Vt = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.983 8.095-6.22 6.22-2.468-2.47-1.061 1.062 3.53 3.525 7.28-7.28z"/></svg>', Qa = { class: "onyx-input__wrapper" }, el = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], tl = ["aria-label", "title"], Tr = /* @__PURE__ */ w({
+}), Vt = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.983 8.095-6.22 6.22-2.468-2.47-1.061 1.062 3.53 3.525 7.28-7.28z"/></svg>', el = { class: "onyx-input__wrapper" }, tl = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], ol = ["aria-label", "title"], Ir = /* @__PURE__ */ w({
   __name: "OnyxInput",
   props: /* @__PURE__ */ Ne({
     disabled: { default: W },
@@ -2714,14 +2714,14 @@ const La = (o) => {
     hideSuccessIcon: { type: Boolean, default: !1 },
     hideClearIcon: { type: Boolean, default: !1 },
     minlength: {},
-    skeleton: { type: [Symbol, Boolean, Number], default: X }
+    skeleton: { type: [Symbol, Boolean, Number], default: Q }
   }, {
     modelValue: { default: "" },
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ Ne(["update:modelValue", "validityChange"], ["update:modelValue"]),
   setup(o, { emit: t }) {
-    const e = o, n = t, { t: l } = P(), { vCustomValidity: a, errorMessages: c } = fe({ props: e, emit: n }), i = y(() => ce(e.success)), d = y(() => ce(e.message)), { densityClass: u } = R(e), p = _t(o, "modelValue"), h = y(() => e.pattern instanceof RegExp ? e.pattern.source : e.pattern), { disabled: v, showError: b } = se(e), g = oe(e), S = Te(b);
+    const e = o, n = t, { t: l } = P(), { vCustomValidity: a, errorMessages: c } = fe({ props: e, emit: n }), i = y(() => ce(e.success)), d = y(() => ce(e.message)), { densityClass: u } = R(e), p = _t(o, "modelValue"), h = y(() => e.pattern instanceof RegExp ? e.pattern.source : e.pattern), { disabled: v, showError: b } = se(e), g = ne(e), S = Te(b);
     return (M, I) => s(g) ? (r(), m("div", {
       key: 0,
       class: C(["onyx-component", "onyx-input-skeleton", s(u)])
@@ -2741,7 +2741,7 @@ const La = (o) => {
         message: d.value
       }), {
         default: $(({ id: L }) => [
-          f("div", Qa, [
+          f("div", el, [
             e.loading ? (r(), x(de, {
               key: 0,
               class: "onyx-input__loading",
@@ -2765,8 +2765,8 @@ const La = (o) => {
               maxlength: e.maxlength,
               "aria-label": e.hideLabel ? e.label : void 0,
               title: e.hideLabel ? e.label : void 0
-            }, null, 8, el), [
-              [Yt, p.value],
+            }, null, 8, tl), [
+              [Wt, p.value],
               [s(a)]
             ]),
             !e.hideClearIcon && p.value !== "" ? (r(), m("button", {
@@ -2779,7 +2779,7 @@ const La = (o) => {
               onClick: I[1] || (I[1] = () => p.value = "")
             }, [
               V(A, { icon: s(ke) }, null, 8, ["icon"])
-            ], 8, tl)) : _("", !0),
+            ], 8, ol)) : _("", !0),
             !e.hideSuccessIcon && i.value ? (r(), x(A, {
               key: 2,
               class: "onyx-input__check-icon",
@@ -2792,7 +2792,7 @@ const La = (o) => {
       }, 16, ["error-messages", "success-messages", "message"])
     ], 2));
   }
-}), Ir = ["email", "password", "search", "tel", "text", "url"], Lr = ["none", "sentences", "words", "characters"], ol = ["href", "target", "rel"], Ar = /* @__PURE__ */ w({
+}), Lr = ["email", "password", "search", "tel", "text", "url"], Ar = ["none", "sentences", "words", "characters"], nl = ["href", "target", "rel"], Dr = /* @__PURE__ */ w({
   __name: "OnyxLink",
   props: {
     href: {},
@@ -2815,10 +2815,10 @@ const La = (o) => {
         _: 1
       })) : _("", !0),
       V(Mt, Be(Oe(t)), null, 16)
-    ], 8, ol));
+    ], 8, nl));
   }
-}), Dr = ["_self", "_blank", "_parent", "_top"], nl = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m21.53 20.47-5.977-5.977a7.512 7.512 0 1 0-1.06 1.06l5.977 5.977zM3.75 9.75a6 6 0 1 1 6 6 6.007 6.007 0 0 1-6-6"/></svg>', _o = () => {
-  const o = Lo(), t = y(
+}), Rr = ["_self", "_blank", "_parent", "_top"], al = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m21.53 20.47-5.977-5.977a7.512 7.512 0 1 0-1.06 1.06l5.977 5.977zM3.75 9.75a6 6 0 1 1 6 6 6.007 6.007 0 0 1-6-6"/></svg>', bo = () => {
+  const o = Ao(), t = y(
     () => ({ class: o.class, style: o.style })
   ), e = y(() => {
     const n = { ...o };
@@ -2834,7 +2834,7 @@ const La = (o) => {
      */
     restAttrs: e
   };
-}, al = ["placeholder", "aria-label"], ll = ["aria-label"], sl = /* @__PURE__ */ w({
+}, ll = ["placeholder", "aria-label"], sl = ["aria-label"], rl = /* @__PURE__ */ w({
   inheritAttrs: !1,
   __name: "OnyxMiniSearch",
   props: {
@@ -2844,7 +2844,7 @@ const La = (o) => {
   },
   emits: ["update:modelValue", "clear"],
   setup(o, { expose: t, emit: e }) {
-    const n = o, l = e, { rootAttrs: a, restAttrs: c } = _o(), { densityClass: i } = R(n), { t: d } = P(), u = T(), p = y({
+    const n = o, l = e, { rootAttrs: a, restAttrs: c } = bo(), { densityClass: i } = R(n), { t: d } = P(), u = T(), p = y({
       get: () => n.modelValue,
       set: (v) => l("update:modelValue", v ?? "")
     }), h = y(() => d.value("select.searchPlaceholder"));
@@ -2871,7 +2871,7 @@ const La = (o) => {
         size: "1"
       }, s(c), {
         "aria-label": n.label
-      }), null, 16, al), [
+      }), null, 16, ll), [
         [bt, p.value]
       ]),
       f("button", {
@@ -2884,14 +2884,14 @@ const La = (o) => {
         onClick: b[2] || (b[2] = (g) => l("clear"))
       }, [
         V(A, { icon: s(ke) }, null, 8, ["icon"])
-      ], 40, ll),
+      ], 40, sl),
       V(A, {
         class: "onyx-mini-search__icon",
-        icon: s(nl)
+        icon: s(al)
       }, null, 8, ["icon"])
     ], 16));
   }
-}), rl = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20.78 4.28-1.06-1.06L12 10.94 4.28 3.22 3.22 4.28 10.94 12l-7.72 7.72 1.06 1.06L12 13.06l7.72 7.72 1.06-1.06L13.06 12z"/></svg>', il = { class: "onyx-component onyx-mobile-nav-button" }, cl = ["aria-label"], ul = { class: "onyx-mobile-nav-button__flyout" }, dl = { class: "onyx-mobile-nav-button__menu" }, zt = /* @__PURE__ */ w({
+}), il = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20.78 4.28-1.06-1.06L12 10.94 4.28 3.22 3.22 4.28 10.94 12l-7.72 7.72 1.06 1.06L12 13.06l7.72 7.72 1.06-1.06L13.06 12z"/></svg>', cl = { class: "onyx-component onyx-mobile-nav-button" }, ul = ["aria-label"], dl = { class: "onyx-mobile-nav-button__flyout" }, pl = { class: "onyx-mobile-nav-button__menu" }, Pt = /* @__PURE__ */ w({
   __name: "OnyxMobileNavButton",
   props: {
     label: {},
@@ -2902,7 +2902,7 @@ const La = (o) => {
   emits: ["update:open"],
   setup(o, { emit: t }) {
     const e = o, n = t;
-    return (l, a) => (r(), m("div", il, [
+    return (l, a) => (r(), m("div", cl, [
       f("button", {
         type: "button",
         class: C(["onyx-mobile-nav-button__trigger", { "onyx-mobile-nav-button__trigger--active": e.open }]),
@@ -2910,12 +2910,12 @@ const La = (o) => {
         onClick: a[0] || (a[0] = (c) => n("update:open", !e.open))
       }, [
         V(A, {
-          icon: e.open ? s(rl) : e.icon
+          icon: e.open ? s(il) : e.icon
         }, null, 8, ["icon"])
-      ], 10, cl),
+      ], 10, ul),
       e.open ? (r(), m(H, { key: 0 }, [
-        f("div", ul, [
-          f("div", dl, [
+        f("div", dl, [
+          f("div", pl, [
             e.headline ? (r(), x(_e, {
               key: 0,
               is: "h2",
@@ -2937,7 +2937,7 @@ const La = (o) => {
       ], 64)) : _("", !0)
     ]));
   }
-}), pl = { class: "onyx-modal-dialog__header" }, ml = { class: "onyx-modal-dialog__headline" }, yl = { class: "onyx-modal-dialog__subtitle onyx-text--small" }, Rr = /* @__PURE__ */ w({
+}), ml = { class: "onyx-modal-dialog__header" }, yl = { class: "onyx-modal-dialog__headline" }, hl = { class: "onyx-modal-dialog__subtitle onyx-text--small" }, Nr = /* @__PURE__ */ w({
   __name: "OnyxModalDialog",
   props: {
     density: {},
@@ -2954,8 +2954,8 @@ const La = (o) => {
       onClose: i[1] || (i[1] = (d) => n("close"))
     }), {
       default: $(() => [
-        f("div", pl, [
-          f("div", ml, [
+        f("div", ml, [
+          f("div", yl, [
             k(c.$slots, "headline", {
               label: e.label
             }, () => [
@@ -2973,7 +2973,7 @@ const La = (o) => {
               onClick: i[0] || (i[0] = (d) => n("close"))
             }, null, 8, ["label", "icon"])
           ]),
-          f("div", yl, [
+          f("div", hl, [
             k(c.$slots, "subtitle")
           ])
         ]),
@@ -3002,13 +3002,13 @@ const La = (o) => {
       { immediate: !0 }
     ), Fe(() => c.disconnect());
   }), { width: n, height: l };
-}, mt = (o) => o instanceof Element ? o : o == null ? void 0 : o.$el, hl = (o) => {
+}, mt = (o) => o instanceof Element ? o : o == null ? void 0 : o.$el, fl = (o) => {
   const t = T([]), e = T([]), { width: n } = Pe(o.parentRef), { width: l } = Pe(o.moreIndicatorRef), a = yt(/* @__PURE__ */ new Map());
   return Ue(() => {
     ye(() => {
       let c = n.value;
       if (c <= 0) return;
-      const i = Pt(o.parentRef.value), d = Pt(o.listRef.value);
+      const i = Ft(o.parentRef.value), d = Ft(o.listRef.value);
       l.value > 0 && (c -= l.value + i), t.value = [], e.value = [], Array.from(a.entries()).forEach(([u, p], h) => {
         c -= p + (h > 0 ? d : 0), c >= 0 || // check if last element fits if more indicator would be hidden
         h === a.size - 1 && c + l.value >= 0 ? t.value.push(u) : e.value.push(u);
@@ -3031,10 +3031,10 @@ const La = (o) => {
      */
     componentMap: a
   };
-}, Pt = (o) => {
+}, Ft = (o) => {
   const t = mt(o);
   return t && Number.parseFloat(getComputedStyle(t).columnGap) || 0;
-}, fl = (o) => {
+}, vl = (o) => {
   const t = ae(), e = T(), n = me(o, void 0), { width: l } = Pe(e);
   Y(
     l,
@@ -3056,14 +3056,14 @@ const La = (o) => {
      */
     isVisible: a
   };
-}, Nr = /* @__PURE__ */ w({
+}, Hr = /* @__PURE__ */ w({
   __name: "OnyxMoreList",
   props: {
     injectionKey: {}
   },
   emits: ["visibilityChange"],
   setup(o, { emit: t }) {
-    const e = o, n = t, l = T(), a = T(), c = T(), i = hl({ parentRef: l, listRef: a, moreIndicatorRef: c });
+    const e = o, n = t, l = T(), a = T(), c = T(), i = fl({ parentRef: l, listRef: a, moreIndicatorRef: c });
     return Ve(e.injectionKey, i), Y(
       [() => i.visibleElements.value.length, () => i.hiddenElements.value.length],
       ([d, u]) => {
@@ -3091,10 +3091,10 @@ const La = (o) => {
       }) : _("", !0)
     ], 512));
   }
-}), vl = ["aria-label"], _l = ["src", "alt"], bl = {
+}), _l = ["aria-label"], bl = ["src", "alt"], xl = {
   key: 1,
   class: "onyx-text-small onyx-truncation-ellipsis"
-}, xl = /* @__PURE__ */ w({
+}, gl = /* @__PURE__ */ w({
   __name: "OnyxNavAppArea",
   props: {
     logoUrl: {},
@@ -3116,12 +3116,12 @@ const La = (o) => {
           class: "onyx-nav-app-area__logo",
           width: "24",
           height: "24"
-        }, null, 8, _l)) : _("", !0),
-        t.appName ? (r(), m("span", bl, E(t.appName), 1)) : _("", !0)
+        }, null, 8, bl)) : _("", !0),
+        t.appName ? (r(), m("span", xl, E(t.appName), 1)) : _("", !0)
       ])
-    ], 8, vl));
+    ], 8, _l));
   }
-}), gl = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+}), kl = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4499_144781)">
 <mask id="mask0_4499_144781" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="83" height="104">
 <rect width="83" height="104" fill="#D9D9D9"/>
@@ -3209,7 +3209,7 @@ const La = (o) => {
 </clipPath>
 </defs>
 </svg>
-`, kl = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, wl = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4499_144833)">
 <path d="M0 4C0 1.79086 1.79086 0 4 0H162C164.209 0 166 1.79086 166 4V100C166 102.209 164.209 104 162 104H4C1.79086 104 0 102.209 0 100V4Z" fill="var(--onyx-color-steel-1100"/>
 <g filter="url(#filter0_d_4499_144833)">
@@ -3256,7 +3256,7 @@ const La = (o) => {
 </clipPath>
 </defs>
 </svg>
-`, wl = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Cl = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4499_144816)">
 <path d="M0 4C0 1.79086 1.79086 0 4 0H162C164.209 0 166 1.79086 166 4V100C166 102.209 164.209 104 162 104H4C1.79086 104 0 102.209 0 100V4Z" fill="white"/>
 <g filter="url(#filter0_d_4499_144816)">
@@ -3303,7 +3303,7 @@ const La = (o) => {
 </clipPath>
 </defs>
 </svg>
-`, Cl = { class: "onyx-color-scheme-dialog__subtitle onyx-text" }, $l = ["innerHTML"], Sl = ["autofocus", "value", "checked", "aria-label"], Ml = { class: "onyx-text--small" }, Vl = { class: "onyx-color-scheme-dialog__actions" }, Bl = /* @__PURE__ */ w({
+`, $l = { class: "onyx-color-scheme-dialog__subtitle onyx-text" }, Sl = ["innerHTML"], Ml = ["autofocus", "value", "checked", "aria-label"], Vl = { class: "onyx-text--small" }, Bl = { class: "onyx-color-scheme-dialog__actions" }, Ol = /* @__PURE__ */ w({
   __name: "OnyxColorSchemeDialog",
   props: {
     open: { type: Boolean, default: !1 },
@@ -3317,19 +3317,19 @@ const La = (o) => {
     const { t: a } = P(), c = y(() => [
       {
         value: "auto",
-        image: gl,
+        image: kl,
         label: a.value("colorScheme.auto.label"),
         description: a.value("colorScheme.auto.description")
       },
       {
         value: "light",
-        image: wl,
+        image: Cl,
         label: a.value("colorScheme.light.label"),
         description: a.value("colorScheme.light.description")
       },
       {
         value: "dark",
-        image: kl,
+        image: wl,
         label: a.value("colorScheme.dark.label"),
         description: a.value("colorScheme.dark.description")
       }
@@ -3356,20 +3356,20 @@ const La = (o) => {
               ]),
               _: 1
             }),
-            f("span", Cl, E(s(a)("colorScheme.subtitle")), 1)
+            f("span", $l, E(s(a)("colorScheme.subtitle")), 1)
           ]),
           f("fieldset", {
             class: "onyx-color-scheme-dialog__list",
             onChange: i
           }, [
-            (r(!0), m(H, null, te(c.value, (h) => (r(), m("label", {
+            (r(!0), m(H, null, oe(c.value, (h) => (r(), m("label", {
               key: h.value,
               class: "onyx-color-scheme-dialog__option"
             }, [
               f("figure", {
                 class: "onyx-color-scheme-dialog__image",
                 innerHTML: h.image
-              }, null, 8, $l),
+              }, null, 8, Sl),
               f("div", null, [
                 V(Ee, { is: "div" }, {
                   default: $(() => [
@@ -3381,7 +3381,7 @@ const La = (o) => {
                       checked: e.modelValue === h.value,
                       "aria-label": h.label,
                       required: ""
-                    }, null, 8, Sl)
+                    }, null, 8, Ml)
                   ]),
                   _: 2
                 }, 1024),
@@ -3394,11 +3394,11 @@ const La = (o) => {
                   ]),
                   _: 2
                 }, 1024),
-                f("p", Ml, E(h.description), 1)
+                f("p", Vl, E(h.description), 1)
               ])
             ]))), 128))
           ], 32),
-          f("div", Vl, [
+          f("div", Bl, [
             V(st, {
               label: s(a)("cancel"),
               mode: "plain",
@@ -3415,7 +3415,7 @@ const La = (o) => {
       _: 1
     }, 16, ["label"]));
   }
-}), Ol = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.008 1.5c-5.79 0-10.493 4.71-10.493 10.493 0 5.782 4.71 10.492 10.493 10.492 5.782 0 10.492-4.71 10.492-10.492S17.79 1.5 12.008 1.5M13.5 3.135q.753.126 1.463.375v16.973q-.709.249-1.463.375zm2.962 1.058a9.3 9.3 0 0 1 1.59 1.162v13.282a9 9 0 0 1-1.59 1.163zm3.083 2.917a8.93 8.93 0 0 1 1.447 4.882 9 9 0 0 1-1.447 4.883zM3.008 11.992C3.008 7.036 7.043 3 12 3v17.993c-4.957 0-8.992-4.035-8.992-8.993z"/></svg>', El = ["href", "target", "rel"], Tl = ["disabled"], bo = /* @__PURE__ */ w({
+}), El = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.008 1.5c-5.79 0-10.493 4.71-10.493 10.493 0 5.782 4.71 10.492 10.493 10.492 5.782 0 10.492-4.71 10.492-10.492S17.79 1.5 12.008 1.5M13.5 3.135q.753.126 1.463.375v16.973q-.709.249-1.463.375zm2.962 1.058a9.3 9.3 0 0 1 1.59 1.162v13.282a9 9 0 0 1-1.59 1.163zm3.083 2.917a8.93 8.93 0 0 1 1.447 4.882 9 9 0 0 1-1.447 4.883zM3.008 11.992C3.008 7.036 7.043 3 12 3v17.993c-4.957 0-8.992-4.035-8.992-8.993z"/></svg>', Tl = ["href", "target", "rel"], Il = ["disabled"], xo = /* @__PURE__ */ w({
   __name: "OnyxMenuItem",
   props: {
     target: { default: "_self" },
@@ -3427,7 +3427,7 @@ const La = (o) => {
   setup(o) {
     const t = o, { t: e } = P(), {
       elements: { listItem: n, menuItem: l }
-    } = po(), a = y(
+    } = mo(), a = y(
       () => l({
         active: t.active,
         disabled: t.disabled
@@ -3449,7 +3449,7 @@ const La = (o) => {
           rel: t.target === "_blank" ? "noreferrer" : void 0
         }, a.value), [
           k(c.$slots, "default")
-        ], 16, El)) : (r(), m("button", B({
+        ], 16, Tl)) : (r(), m("button", B({
           key: 1,
           class: "onyx-menu-item__trigger",
           type: "button",
@@ -3462,12 +3462,12 @@ const La = (o) => {
             ]),
             _: 1
           })) : _("", !0)
-        ], 16, Tl))
+        ], 16, Il))
       ]),
       _: 3
     }, 16, ["selected", "active", "color", "disabled"]));
   }
-}), Il = { class: "onyx-color-scheme-menu-item__value" }, Hr = /* @__PURE__ */ w({
+}), Ll = { class: "onyx-color-scheme-menu-item__value" }, zr = /* @__PURE__ */ w({
   __name: "OnyxColorSchemeMenuItem",
   props: {
     modelValue: {}
@@ -3475,18 +3475,18 @@ const La = (o) => {
   emits: ["update:modelValue"],
   setup(o, { emit: t }) {
     const e = o, n = t, { t: l } = P(), a = T(!1);
-    return (c, i) => (r(), x(bo, {
+    return (c, i) => (r(), x(xo, {
       class: "onyx-component onyx-color-scheme-menu-item",
       onClick: i[2] || (i[2] = (d) => a.value = !0)
     }, {
       default: $(() => [
-        V(A, { icon: s(Ol) }, null, 8, ["icon"]),
+        V(A, { icon: s(El) }, null, 8, ["icon"]),
         f("div", null, [
           G(E(s(l)("colorScheme.appearance")) + ": ", 1),
-          f("span", Il, E(s(l)(`colorScheme.${e.modelValue}.label`)), 1)
+          f("span", Ll, E(s(l)(`colorScheme.${e.modelValue}.label`)), 1)
         ]),
         (r(), x(ft, { to: "body" }, [
-          V(Bl, {
+          V(Ol, {
             "model-value": e.modelValue,
             open: a.value,
             onClose: i[0] || (i[0] = (d) => a.value = !1),
@@ -3497,7 +3497,7 @@ const La = (o) => {
       _: 1
     }));
   }
-}), xo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9.905 6.22-1.06 1.06 4.72 4.72-4.72 4.72 1.06 1.06 5.78-5.78z"/></svg>', Ye = Symbol(), Ll = Symbol(), Al = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.618 11.626H8.936l3.094-3.094-1.064-1.056-4.899 4.898 4.9 4.9 1.063-1.064-3.094-3.086h8.682z"/></svg>', Dl = ["aria-orientation"], Rl = /* @__PURE__ */ w({
+}), go = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9.905 6.22-1.06 1.06 4.72 4.72-4.72 4.72 1.06 1.06 5.78-5.78z"/></svg>', Ye = Symbol(), Al = Symbol(), Dl = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.618 11.626H8.936l3.094-3.094-1.064-1.056-4.899 4.898 4.9 4.9 1.063-1.064-3.094-3.086h8.682z"/></svg>', Rl = ["aria-orientation"], Nl = /* @__PURE__ */ w({
   __name: "OnyxNavSeparator",
   props: {
     orientation: { default: "vertical" }
@@ -3511,12 +3511,12 @@ const La = (o) => {
       class: C(["onyx-component onyx-nav-separator", { "onyx-nav-separator--horizontal": t.orientation === "horizontal" || s(e) }]),
       role: "separator",
       "aria-orientation": t.orientation
-    }, null, 10, Dl));
+    }, null, 10, Rl));
   }
-}), Nl = {
+}), Hl = {
   class: "onyx-component",
   role: "presentation"
-}, Hl = /* @__PURE__ */ w({
+}, zl = /* @__PURE__ */ w({
   __name: "NavButtonLayout",
   props: {
     href: {},
@@ -3529,21 +3529,21 @@ const La = (o) => {
   emits: ["update:mobileChildrenOpen"],
   setup(o, { emit: t }) {
     const e = o, n = ie(), { t: l } = P(), a = t;
-    return (c, i) => (r(), m("li", Nl, [
+    return (c, i) => (r(), m("li", Hl, [
       e.isMobile ? (r(), m(H, { key: 0 }, [
         e.isMobile && c.mobileChildrenOpen ? (r(), x(st, {
           key: 0,
           label: s(l)("back"),
           mode: "plain",
           color: "neutral",
-          icon: s(Al),
+          icon: s(Dl),
           onClick: i[0] || (i[0] = (d) => a("update:mobileChildrenOpen", !1))
         }, null, 8, ["label", "icon"])) : _("", !0),
         !c.mobileChildrenOpen || e.href ? k(c.$slots, "button", {
           key: 1,
           trigger: { trigger: {} }
         }) : _("", !0),
-        c.mobileChildrenOpen && e.href ? (r(), x(Rl, {
+        c.mobileChildrenOpen && e.href ? (r(), x(Nl, {
           key: 2,
           orientation: "horizontal"
         })) : _("", !0),
@@ -3574,7 +3574,7 @@ const La = (o) => {
       ]), 1032, ["label"]))
     ]));
   }
-}), zl = ["aria-label"], Pl = { class: "onyx-truncation-ellipsis" }, zr = /* @__PURE__ */ w({
+}), Pl = ["aria-label"], Fl = { class: "onyx-truncation-ellipsis" }, Pr = /* @__PURE__ */ w({
   __name: "OnyxNavButton",
   props: {
     href: {},
@@ -3588,19 +3588,19 @@ const La = (o) => {
     const e = o, n = t, l = ie(), a = me(
       Ye,
       y(() => !1)
-    ), c = y(() => !!l.children), { componentRef: i, isVisible: d } = fl(Ll), { state: u } = ze(
-      ne(() => e.mobileChildrenOpen),
+    ), c = y(() => !!l.children), { componentRef: i, isVisible: d } = vl(Al), { state: u } = ze(
+      X(() => e.mobileChildrenOpen),
       !1,
       (h) => n("update:mobileChildrenOpen", h)
     ), p = (h) => {
       a != null && a.value && c.value && !u.value ? u.value = !0 : e.href && n("navigate", e.href, h);
     };
-    return (h, v) => le((r(), x(Hl, B({
+    return (h, v) => le((r(), x(zl, B({
       ref_key: "componentRef",
       ref: i
     }, e, {
       "mobile-children-open": s(u),
-      "onUpdate:mobileChildrenOpen": v[0] || (v[0] = (b) => Wt(u) ? u.value = b : null),
+      "onUpdate:mobileChildrenOpen": v[0] || (v[0] = (b) => Jt(u) ? u.value = b : null),
       class: ["onyx-component onyx-nav-button", {
         "onyx-nav-button--mobile": s(a),
         "onyx-nav-button--active": e.active
@@ -3615,15 +3615,15 @@ const La = (o) => {
           type: "button"
         }, b, { onClick: p }), [
           k(h.$slots, "default", {}, () => [
-            f("span", Pl, E(e.label), 1),
+            f("span", Fl, E(e.label), 1),
             V(Mt, Be(Oe(e)), null, 16)
           ]),
           s(a) && c.value && !s(u) ? (r(), x(A, {
             key: 0,
             class: "onyx-nav-button__mobile-chevron",
-            icon: s(xo)
+            icon: s(go)
           }, null, 8, ["icon"])) : _("", !0)
-        ], 16, zl)
+        ], 16, Pl)
       ]),
       _: 2
     }, [
@@ -3638,7 +3638,7 @@ const La = (o) => {
       [vt, s(a) || s(d)]
     ]);
   }
-}), Pr = /* @__PURE__ */ w({
+}), Fr = /* @__PURE__ */ w({
   __name: "OnyxNavItem",
   props: {
     href: {},
@@ -3650,7 +3650,7 @@ const La = (o) => {
   emits: ["navigate"],
   setup(o, { emit: t }) {
     const e = o, n = t;
-    return (l, a) => (r(), x(bo, {
+    return (l, a) => (r(), x(xo, {
       class: "onyx-component onyx-nav-item",
       active: e.active,
       href: e.href ?? "javascript:void(0)",
@@ -3665,7 +3665,7 @@ const La = (o) => {
       _: 3
     }, 8, ["active", "href"]));
   }
-}), Fl = (o) => {
+}), Ul = (o) => {
   const t = T(), e = T(nt(new Date(o.value).getTime())), n = y(() => e.value === 0);
   return Y(
     o,
@@ -3690,23 +3690,23 @@ const La = (o) => {
 }, nt = (o) => {
   const t = o - Date.now();
   return Math.max(t, 0);
-}, go = (o) => {
+}, ko = (o) => {
   const t = Math.floor(o / 6e4 / 60), e = Math.floor(o / 6e4 % 60), n = Math.floor(o % 6e4 / 1e3);
   return { hours: t, minutes: e, seconds: n };
-}, Ul = (o, t) => {
-  const { hours: e, minutes: n, seconds: l } = go(o), a = (d) => d.toString().padStart(2, "0");
+}, ql = (o, t) => {
+  const { hours: e, minutes: n, seconds: l } = ko(o), a = (d) => d.toString().padStart(2, "0");
   let c = "", i = at(t.formatToParts(o, "seconds"));
   return n > 0 && (i = at(t.formatToParts(o, "minutes"))), e > 0 && (i = at(t.formatToParts(o, "hours")), c = `${a(e)}:`), `${c}${a(n)}:${a(l)} ${i}`;
 }, at = (o) => {
   var t;
   return ((t = o.at(-1)) == null ? void 0 : t.value.replace(".", "").trim()) ?? "";
-}, ql = (o) => {
-  const { hours: t, minutes: e, seconds: n } = go(o);
+}, Gl = (o) => {
+  const { hours: t, minutes: e, seconds: n } = ko(o);
   return `PT${t}H${e}M${n}S`;
-}, Gl = ["aria-label"], Kl = {
+}, Kl = ["aria-label"], Zl = {
   key: 0,
   class: "onyx-timer__label"
-}, Zl = ["datetime"], Fr = /* @__PURE__ */ w({
+}, jl = ["datetime"], Ur = /* @__PURE__ */ w({
   __name: "OnyxTimer",
   props: {
     endTime: {},
@@ -3715,22 +3715,22 @@ const La = (o) => {
   },
   emits: ["timerEnded"],
   setup(o, { emit: t }) {
-    const e = o, n = t, { locale: l } = P(), { timeLeft: a, isEnded: c } = Fl(y(() => e.endTime)), i = y(
+    const e = o, n = t, { locale: l } = P(), { timeLeft: a, isEnded: c } = Ul(y(() => e.endTime)), i = y(
       () => new Intl.RelativeTimeFormat(l.value, { numeric: "always", style: "short" })
-    ), d = y(() => Ul(a.value, i.value));
+    ), d = y(() => ql(a.value, i.value));
     return ye(() => c.value && n("timerEnded")), (u, p) => (r(), m("div", {
       class: "onyx-component onyx-timer onyx-text onyx-truncation-ellipsis",
       role: "timer",
       "aria-label": e.hideLabel ? e.label : void 0
     }, [
-      e.hideLabel ? _("", !0) : (r(), m("span", Kl, E(e.label), 1)),
+      e.hideLabel ? _("", !0) : (r(), m("span", Zl, E(e.label), 1)),
       f("time", {
-        datetime: s(ql)(s(a)),
+        datetime: s(Gl)(s(a)),
         class: "onyx-timer__time"
-      }, E(d.value), 9, Zl)
-    ], 8, Gl));
+      }, E(d.value), 9, jl)
+    ], 8, Kl));
   }
-}), jl = { class: "onyx-component" }, Yl = { class: "onyx-user-menu__footer onyx-text--small" }, Wl = /* @__PURE__ */ w({
+}), Yl = { class: "onyx-component" }, Wl = { class: "onyx-user-menu__footer onyx-text--small" }, Jl = /* @__PURE__ */ w({
   __name: "UserMenuLayout",
   props: {
     isMobile: { type: Boolean },
@@ -3739,7 +3739,7 @@ const La = (o) => {
   emits: ["update:flyoutOpen"],
   setup(o) {
     const t = o, e = _t(t, "flyoutOpen"), n = ie(), { t: l } = P();
-    return (a, c) => (r(), m("div", jl, [
+    return (a, c) => (r(), m("div", Yl, [
       t.isMobile ? (r(), m(H, { key: 0 }, [
         k(a.$slots, "header"),
         k(a.$slots, "options"),
@@ -3756,7 +3756,7 @@ const La = (o) => {
       ], 64)) : (r(), x(St, {
         key: 1,
         open: s(e),
-        "onUpdate:open": c[0] || (c[0] = (i) => Wt(e) ? e.value = i : null),
+        "onUpdate:open": c[0] || (c[0] = (i) => Jt(e) ? e.value = i : null),
         label: s(l)("navigation.userMenuLabel")
       }, qe({
         button: $(({ trigger: i }) => [
@@ -3773,7 +3773,7 @@ const La = (o) => {
         n.footer ? {
           name: "footer",
           fn: $(() => [
-            f("div", Yl, [
+            f("div", Wl, [
               k(a.$slots, "footer")
             ])
           ]),
@@ -3782,10 +3782,10 @@ const La = (o) => {
       ]), 1032, ["open", "label"]))
     ]));
   }
-}), Jl = { class: "onyx-truncation-ellipsis" }, Xl = { class: "onyx-user-menu__header" }, Ql = { class: "onyx-truncation-ellipsis" }, es = { class: "onyx-user-menu__username onyx-text onyx-truncation-ellipsis" }, ts = {
+}), Xl = { class: "onyx-truncation-ellipsis" }, Ql = { class: "onyx-user-menu__header" }, es = { class: "onyx-truncation-ellipsis" }, ts = { class: "onyx-user-menu__username onyx-text onyx-truncation-ellipsis" }, os = {
   key: 0,
   class: "onyx-user-menu__description onyx-text--small onyx-truncation-ellipsis"
-}, os = { class: "onyx-user-menu__options" }, Ur = /* @__PURE__ */ w({
+}, ns = { class: "onyx-user-menu__options" }, qr = /* @__PURE__ */ w({
   __name: "OnyxUserMenu",
   props: {
     username: {},
@@ -3799,7 +3799,7 @@ const La = (o) => {
       Ye,
       y(() => !1)
     );
-    return (i, d) => (r(), x(Wl, {
+    return (i, d) => (r(), x(Jl, {
       class: C(["onyx-component onyx-user-menu", { "onyx-user-menu--mobile": s(c) }]),
       "is-mobile": s(c),
       "flyout-open": i.flyoutOpen,
@@ -3810,21 +3810,21 @@ const La = (o) => {
           class: "onyx-user-menu__trigger onyx-text",
           type: "button"
         }, u), [
-          V(At, B(a.value, { size: "24px" }), null, 16),
-          f("span", Jl, E(e.username), 1)
+          V(Dt, B(a.value, { size: "24px" }), null, 16),
+          f("span", Xl, E(e.username), 1)
         ], 16)
       ]),
       header: $(() => [
-        f("div", Xl, [
-          V(At, Be(Oe(a.value)), null, 16),
-          f("div", Ql, [
-            f("div", es, E(e.username), 1),
-            e.description ? (r(), m("div", ts, E(e.description), 1)) : _("", !0)
+        f("div", Ql, [
+          V(Dt, Be(Oe(a.value)), null, 16),
+          f("div", es, [
+            f("div", ts, E(e.username), 1),
+            e.description ? (r(), m("div", os, E(e.description), 1)) : _("", !0)
           ])
         ])
       ]),
       options: $(() => [
-        f("div", os, [
+        f("div", ns, [
           k(i.$slots, "default")
         ])
       ]),
@@ -3839,19 +3839,19 @@ const La = (o) => {
       } : void 0
     ]), 1032, ["class", "is-mobile", "flyout-open"]));
   }
-}), ko = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.155 7.28-1.06-1.06L8.315 12l5.78 5.78 1.06-1.06-4.72-4.72z"/></svg>', ns = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.5 6h-21v1.5h21zm0 5.25h-21v1.5h21zm-21 5.25h21V18h-21z"/></svg>', as = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.5A2.25 2.25 0 1 1 12 6a2.25 2.25 0 0 1 0-4.5m0 8.25a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5m1.25 8.63a2.25 2.25 0 1 0-2.5 3.741 2.25 2.25 0 0 0 2.5-3.742"/></svg>', ls = { class: "onyx-nav-bar__content" }, ss = {
+}), wo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.155 7.28-1.06-1.06L8.315 12l5.78 5.78 1.06-1.06-4.72-4.72z"/></svg>', as = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.5 6h-21v1.5h21zm0 5.25h-21v1.5h21zm-21 5.25h21V18h-21z"/></svg>', ls = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.5A2.25 2.25 0 1 1 12 6a2.25 2.25 0 0 1 0-4.5m0 8.25a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5m1.25 8.63a2.25 2.25 0 1 0-2.5 3.741 2.25 2.25 0 0 0 2.5-3.742"/></svg>', ss = { class: "onyx-nav-bar__content" }, rs = {
   key: 0,
   class: "onyx-nav-bar__mobile-page onyx-truncation-ellipsis"
-}, rs = { role: "menubar" }, is = { role: "menubar" }, cs = {
+}, is = { role: "menubar" }, cs = { role: "menubar" }, us = {
   key: 0,
   class: "onyx-nav-bar__mobile-context"
-}, us = {
+}, ds = {
   key: 0,
   class: "onyx-nav-bar__mobile-global-context"
-}, ds = { class: "onyx-nav-bar__mobile-context-content" }, ps = {
+}, ps = { class: "onyx-nav-bar__mobile-context-content" }, ms = {
   key: 1,
   class: "onyx-nav-bar__context"
-}, qr = /* @__PURE__ */ w({
+}, Gr = /* @__PURE__ */ w({
   __name: "OnyxNavBar",
   props: {
     logoUrl: {},
@@ -3864,8 +3864,8 @@ const La = (o) => {
   setup(o, { expose: t, emit: e }) {
     const n = o, l = e, a = ie(), c = T(), { width: i } = Pe(c), { t: d } = P(), {
       elements: { nav: u }
-    } = oa({ navigationName: ne(() => n.appName) }), p = T(!1), h = T(!1), v = y(() => {
-      const b = typeof n.mobileBreakpoint == "number" ? n.mobileBreakpoint : Ao[n.mobileBreakpoint];
+    } = na({ navigationName: X(() => n.appName) }), p = T(!1), h = T(!1), v = y(() => {
+      const b = typeof n.mobileBreakpoint == "number" ? n.mobileBreakpoint : Do[n.mobileBreakpoint];
       return i.value !== 0 && i.value < b;
     });
     return Ve(Ye, v), t({
@@ -3890,10 +3890,10 @@ const La = (o) => {
       ref: c,
       class: C(["onyx-component onyx-nav-bar", { "onyx-nav-bar--mobile": v.value }])
     }, [
-      f("div", ls, [
-        v.value && a.mobileActivePage && !p.value && !h.value ? (r(), m("span", ss, [
+      f("div", ss, [
+        v.value && a.mobileActivePage && !p.value && !h.value ? (r(), m("span", rs, [
           k(b.$slots, "mobileActivePage")
-        ])) : n.appName || n.logoUrl || a.appArea ? (r(), x(xl, {
+        ])) : n.appName || n.logoUrl || a.appArea ? (r(), x(gl, {
           key: 1,
           class: "onyx-nav-bar__app",
           "app-name": n.appName,
@@ -3908,16 +3908,16 @@ const La = (o) => {
           ]),
           _: 3
         }, 8, ["app-name", "logo-url", "label"])) : _("", !0),
-        n.withBackButton ? (r(), x(Xa, {
+        n.withBackButton ? (r(), x(Qa, {
           key: 2,
           class: "onyx-nav-bar__back",
           label: s(d)("navigation.goBack"),
-          icon: s(ko),
+          icon: s(wo),
           color: "neutral",
           onClick: g[1] || (g[1] = (S) => l("navigateBack", S))
         }, null, 8, ["label", "icon"])) : _("", !0),
         a.default ? (r(), m(H, { key: 3 }, [
-          v.value ? (r(), x(zt, {
+          v.value ? (r(), x(Pt, {
             key: 0,
             open: p.value,
             "onUpdate:open": [
@@ -3925,13 +3925,13 @@ const La = (o) => {
               g[3] || (g[3] = (S) => h.value = !1)
             ],
             class: "onyx-nav-bar__burger",
-            icon: s(ns),
+            icon: s(as),
             label: s(d)("navigation.toggleBurgerMenu"),
             headline: s(d)("navigation.navigationHeadline")
           }, {
             default: $(() => [
               f("nav", B({ class: "onyx-nav-bar__nav--mobile" }, s(u)), [
-                f("ul", rs, [
+                f("ul", is, [
                   k(b.$slots, "default")
                 ])
               ], 16)
@@ -3941,34 +3941,34 @@ const La = (o) => {
             key: 1,
             class: "onyx-nav-bar__nav"
           }, s(u)), [
-            f("ul", is, [
+            f("ul", cs, [
               k(b.$slots, "default")
             ])
           ], 16))
         ], 64)) : _("", !0),
         a.contextArea || a.globalContextArea ? (r(), m(H, { key: 4 }, [
-          v.value ? (r(), m("div", cs, [
-            a.globalContextArea ? (r(), m("div", us, [
+          v.value ? (r(), m("div", us, [
+            a.globalContextArea ? (r(), m("div", ds, [
               k(b.$slots, "globalContextArea")
             ])) : _("", !0),
-            a.contextArea ? (r(), x(zt, {
+            a.contextArea ? (r(), x(Pt, {
               key: 1,
               open: h.value,
               "onUpdate:open": [
                 g[4] || (g[4] = (S) => h.value = S),
                 g[5] || (g[5] = (S) => p.value = !1)
               ],
-              icon: s(as),
+              icon: s(ls),
               label: s(d)("navigation.toggleContextMenu")
             }, {
               default: $(() => [
-                f("div", ds, [
+                f("div", ps, [
                   k(b.$slots, "contextArea")
                 ])
               ]),
               _: 3
             }, 8, ["open", "icon", "label"])) : _("", !0)
-          ])) : (r(), m("div", ps, [
+          ])) : (r(), m("div", ms, [
             a.globalContextArea ? k(b.$slots, "globalContextArea", { key: 0 }) : _("", !0),
             a.contextArea ? k(b.$slots, "contextArea", { key: 1 }) : _("", !0)
           ]))
@@ -3976,13 +3976,13 @@ const La = (o) => {
       ])
     ], 2));
   }
-}), ms = {
+}), ys = {
   key: 0,
   class: "onyx-page__sidebar"
-}, ys = { class: "onyx-page__main" }, hs = {
+}, hs = { class: "onyx-page__main" }, fs = {
   key: 1,
   class: "onyx-page__footer"
-}, Gr = /* @__PURE__ */ w({
+}, Kr = /* @__PURE__ */ w({
   __name: "OnyxPageLayout",
   props: {
     skeleton: { type: Boolean },
@@ -3996,18 +3996,18 @@ const La = (o) => {
     return (l, a) => (r(), m("div", {
       class: C(["onyx-component onyx-page", n.value])
     }, [
-      e.sidebar && !t.hideSidebar ? (r(), m("aside", ms, [
+      e.sidebar && !t.hideSidebar ? (r(), m("aside", ys, [
         k(l.$slots, "sidebar")
       ])) : _("", !0),
-      f("main", ys, [
+      f("main", hs, [
         k(l.$slots, "default")
       ]),
-      e.footer ? (r(), m("footer", hs, [
+      e.footer ? (r(), m("footer", fs, [
         k(l.$slots, "footer")
       ])) : _("", !0)
     ], 2));
   }
-}), fs = (o) => {
+}), vs = (o) => {
   const e = T(!1), n = (a) => {
     const c = a.target;
     if (!(c instanceof Element)) return;
@@ -4022,10 +4022,10 @@ const La = (o) => {
       });
     }
   }, isScrollEnd: e };
-}, vs = (o, t) => {
-  const e = Ft(o.toLowerCase()), n = Ft(t.toLowerCase());
+}, _s = (o, t) => {
+  const e = Ut(o.toLowerCase()), n = Ut(t.toLowerCase());
   return e.includes(n);
-}, Ft = (o) => o.normalize("NFD").replace(/[\u0300-\u036f]/g, ""), _s = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m16.718 14.123 1.057 1.057-5.782 5.782L6.21 15.18l1.058-1.057 4.717 4.717 4.718-4.717zM12 5.153l4.718 4.717 1.057-1.057-5.782-5.783L6.21 8.813 7.268 9.87l4.717-4.717z"/></svg>', bs = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"], xs = ["aria-label", "title", "disabled"], gs = /* @__PURE__ */ w({
+}, Ut = (o) => o.normalize("NFD").replace(/[\u0300-\u036f]/g, ""), bs = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m16.718 14.123 1.057 1.057-5.782 5.782L6.21 15.18l1.058-1.057 4.717 4.717 4.718-4.717zM12 5.153l4.718 4.717 1.057-1.057-5.782-5.783L6.21 8.813 7.268 9.87l4.717-4.717z"/></svg>', xs = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"], gs = ["aria-label", "title", "disabled"], ks = /* @__PURE__ */ w({
   inheritAttrs: !1,
   __name: "OnyxSelectInput",
   props: {
@@ -4046,7 +4046,7 @@ const La = (o) => {
     success: {},
     modelValue: {},
     textMode: {},
-    skeleton: { type: [Symbol, Boolean, Number], default: X },
+    skeleton: { type: [Symbol, Boolean, Number], default: Q },
     readonly: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 },
     hideSuccessIcon: { type: Boolean, default: !1 },
@@ -4055,7 +4055,7 @@ const La = (o) => {
   },
   emits: ["inputClick", "validityChange"],
   setup(o, { expose: t, emit: e }) {
-    const { rootAttrs: n, restAttrs: l } = _o(), a = o, c = e, { t: i } = P(), { vCustomValidity: d, errorMessages: u } = fe({ props: a, emit: c }), p = y(() => ce(a.success)), h = y(() => ce(a.message)), { disabled: v, showError: b } = se(a), g = oe(a), S = Te(b), M = y(() => a.modelValue ? a.modelValue.length : 0), I = y(() => {
+    const { rootAttrs: n, restAttrs: l } = bo(), a = o, c = e, { t: i } = P(), { vCustomValidity: d, errorMessages: u } = fe({ props: a, emit: c }), p = y(() => ce(a.success)), h = y(() => ce(a.message)), { disabled: v, showError: b } = se(a), g = ne(a), S = Te(b), M = y(() => a.modelValue ? a.modelValue.length : 0), I = y(() => {
       var N;
       const J = (N = a.modelValue) == null ? void 0 : N.length;
       if (!a.modelValue || !J) return "";
@@ -4077,7 +4077,7 @@ const La = (o) => {
         L.value || N && J === !1 && (L.value = !0);
       }
     );
-    const Z = co.concat(uo), pe = (J) => {
+    const Z = uo.concat(po), pe = (J) => {
       Z.includes(J.key) || J.preventDefault();
     };
     return (J, N) => s(g) ? (r(), m("div", B({
@@ -4107,7 +4107,7 @@ const La = (o) => {
         default: $(({ id: q }) => [
           f("div", {
             class: "onyx-select-input__wrapper",
-            onClick: N[0] || (N[0] = (Q) => !s(v) && !a.loading && c("inputClick"))
+            onClick: N[0] || (N[0] = (ee) => !s(v) && !a.loading && c("inputClick"))
           }, [
             a.loading ? (r(), x(de, {
               key: 0,
@@ -4136,7 +4136,7 @@ const La = (o) => {
               autofocus: a.autofocus,
               autocomplete: "off",
               onKeydown: pe
-            }), null, 16, bs), [
+            }), null, 16, xs), [
               [s(d)]
             ]),
             a.textMode === "preview" && M.value > 0 ? (r(), x(He, {
@@ -4144,8 +4144,8 @@ const La = (o) => {
               text: I.value,
               position: "bottom"
             }, {
-              default: $(({ trigger: Q }) => [
-                V(Sn, B({ class: "onyx-select-input__badge" }, Q, { color: "neutral" }), {
+              default: $(({ trigger: ee }) => [
+                V(Mn, B({ class: "onyx-select-input__badge" }, ee, { color: "neutral" }), {
                   default: $(() => [
                     G(E(M.value), 1)
                   ]),
@@ -4162,8 +4162,8 @@ const La = (o) => {
               tabindex: "-1",
               disabled: s(v) || a.readonly || a.loading
             }, [
-              V(A, { icon: s(_s) }, null, 8, ["icon"])
-            ], 8, xs),
+              V(A, { icon: s(bs) }, null, 8, ["icon"])
+            ], 8, gs),
             !a.hideSuccessIcon && p.value ? (r(), x(A, {
               key: 2,
               class: "onyx-select-input__check-icon",
@@ -4176,7 +4176,7 @@ const La = (o) => {
       }, 16, ["message", "success-messages", "error-messages"])
     ], 16));
   }
-}), ks = ["checked", "aria-labelledby", "disabled", "indeterminate"], Ut = /* @__PURE__ */ w({
+}), ws = ["checked", "aria-labelledby", "disabled", "indeterminate"], qt = /* @__PURE__ */ w({
   __name: "OnyxSelectOption",
   props: {
     active: { type: Boolean, default: !1 },
@@ -4204,7 +4204,7 @@ const La = (o) => {
           tabindex: "-1",
           class: "onyx-select-option__checkbox",
           type: "checkbox"
-        }, null, 8, ks)) : _("", !0),
+        }, null, 8, ws)) : _("", !0),
         t.icon ? (r(), x(A, {
           key: 1,
           icon: t.icon
@@ -4218,30 +4218,30 @@ const La = (o) => {
       _: 3
     }, 16, ["checked", "selected", "disabled"]));
   }
-}), ws = ["inert"], Cs = {
+}), Cs = ["inert"], $s = {
   class: "onyx-select__wrapper",
   tabindex: "-1"
-}, $s = {
+}, Ss = {
   key: 0,
   role: "group",
   class: "onyx-select__group"
-}, Ss = {
+}, Ms = {
   role: "option",
   "aria-selected": "false"
-}, Ms = {
+}, Vs = {
   key: 0,
   role: "presentation",
   class: "onyx-select__group-name onyx-text--small"
-}, Vs = {
+}, Bs = {
   key: 1,
   class: "onyx-select__slot"
-}, Bs = {
+}, Os = {
   key: 2,
   class: "onyx-select__slot"
-}, Os = {
+}, Es = {
   key: 0,
   class: "onyx-select__description onyx-text--small"
-}, Es = /* @__PURE__ */ w({
+}, Ts = /* @__PURE__ */ w({
   __name: "OnyxSelect",
   props: {
     density: {},
@@ -4282,18 +4282,18 @@ const La = (o) => {
   emits: ["update:modelValue", "update:searchTerm", "update:open", "lazyLoad", "validityChange"],
   setup(o, { emit: t }) {
     const e = o, n = t, { densityClass: l } = R(e), a = ie(), { t: c } = P(), { state: i, isManaged: d } = ze(
-      ne(() => e.searchTerm),
+      X(() => e.searchTerm),
       "",
       (O) => n("update:searchTerm", O)
     ), { state: u } = ze(
-      ne(() => e.open),
+      X(() => e.open),
       !1,
       (O) => n("update:open", O)
-    ), p = T(), { openDirection: h, updateOpenDirection: v } = yo(p), b = T(), g = y(() => e.modelValue === void 0 ? [] : e.multiple && Array.isArray(e.modelValue) ? e.modelValue : [e.modelValue]), S = y(() => e.valueLabel !== void 0 ? Array.isArray(e.valueLabel) ? e.valueLabel : [e.valueLabel] : g.value.reduce((O, F) => {
-      var ee;
-      const j = (ee = e.options.find(({ value: re }) => re === F)) == null ? void 0 : ee.label;
+    ), p = T(), { openDirection: h, updateOpenDirection: v } = ho(p), b = T(), g = y(() => e.modelValue === void 0 ? [] : e.multiple && Array.isArray(e.modelValue) ? e.modelValue : [e.modelValue]), S = y(() => e.valueLabel !== void 0 ? Array.isArray(e.valueLabel) ? e.valueLabel : [e.valueLabel] : g.value.reduce((O, F) => {
+      var te;
+      const j = (te = e.options.find(({ value: re }) => re === F)) == null ? void 0 : te.label;
       return j && O.push(j), O;
-    }, [])), M = T(), I = T(), L = y(() => d.value && i.value ? e.options.filter(({ label: O }) => vs(O, i.value)) : e.options);
+    }, [])), M = T(), I = T(), L = y(() => d.value && i.value ? e.options.filter(({ label: O }) => _s(O, i.value)) : e.options);
     Y(
       g,
       () => {
@@ -4304,26 +4304,26 @@ const La = (o) => {
     const z = ae(), U = y(() => (e.multiple && e.withCheckAll && !i.value ? [z] : []).concat(
       Et.value
     )), Z = async (O) => {
-      var j, ee;
+      var j, te;
       if (e.readonly) {
         u.value = !1;
         return;
       }
       const F = u.value;
-      u.value = !F, await ht(), u.value && v(), F !== u.value && (F ? (i.value && (i.value = ""), O || (j = I.value) == null || j.focus()) : (ee = M.value) == null || ee.focus());
+      u.value = !F, await ht(), u.value && v(), F !== u.value && (F ? (i.value && (i.value = ""), O || (j = I.value) == null || j.focus()) : (te = M.value) == null || te.focus());
     }, pe = () => b.value = U.value.at(0), J = () => b.value = U.value.at(-1), N = (O) => {
       const F = U.value.findIndex((j) => j === O);
       F < U.value.length - 1 && (b.value = U.value[F + 1]);
     }, q = (O) => {
       const F = U.value.findIndex((j) => j === O);
       F > 0 && (b.value = U.value[F - 1]);
-    }, Q = (O) => {
+    }, ee = (O) => {
       const F = L.value.find((j) => j.label.toLowerCase().trim().startsWith(O.toLowerCase()));
       F && (b.value = F.value);
     }, we = (O) => i.value = O, Ce = (O) => {
-      var ee;
+      var te;
       if (O === z) {
-        (ee = Le.value) == null || ee.handleChange(!Le.value.state.value.modelValue);
+        (te = Le.value) == null || te.handleChange(!Le.value.state.value.modelValue);
         return;
       }
       if (!L.value.find(({ value: re }) => re === O))
@@ -4334,14 +4334,14 @@ const La = (o) => {
         "update:modelValue",
         g.value.filter((re) => re !== O)
       ) : n("update:modelValue", [...g.value, O]);
-    }, We = y(() => e.withSearch ? "list" : "none"), { label: D, listLabel: Je, listDescription: $o, multiple: So } = jt(e), {
-      elements: { input: Xe, option: Bt, group: Ot, listbox: Mo }
-    } = Qn({
+    }, We = y(() => e.withSearch ? "list" : "none"), { label: D, listLabel: Je, listDescription: So, multiple: Mo } = Yt(e), {
+      elements: { input: Xe, option: Bt, group: Ot, listbox: Vo }
+    } = ea({
       autocomplete: We,
       label: D,
       listLabel: Je,
-      listDescription: $o,
-      multiple: So,
+      listDescription: So,
+      multiple: Mo,
       activeOption: y(() => b.value),
       isExpanded: u,
       templateRef: p,
@@ -4350,10 +4350,10 @@ const La = (o) => {
       onActivateLast: J,
       onActivateNext: N,
       onActivatePrevious: q,
-      onTypeAhead: Q,
+      onTypeAhead: ee,
       onAutocomplete: we,
       onSelect: Ce
-    }), Vo = y(() => Pn(L.value, "group")), { vScrollEnd: Bo, isScrollEnd: Oo } = fs({
+    }), Bo = y(() => Fn(L.value, "group")), { vScrollEnd: Oo, isScrollEnd: Eo } = vs({
       enabled: y(() => {
         var O;
         return ((O = e.lazyLoading) == null ? void 0 : O.enabled) ?? !1;
@@ -4370,10 +4370,10 @@ const La = (o) => {
       () => L.value.filter((O) => !O.disabled).map(({ value: O }) => O)
     ), Le = y(() => {
       if (!(!e.multiple || !e.withCheckAll))
-        return ho(Et, g, (O) => {
+        return fo(Et, g, (O) => {
           const F = O.map((j) => {
-            var ee;
-            return (ee = e.options.find(({ value: re }) => re === j)) == null ? void 0 : ee.value;
+            var te;
+            return (te = e.options.find(({ value: re }) => re === j)) == null ? void 0 : te.value;
           }).filter((j) => j != null);
           n("update:modelValue", F);
         });
@@ -4385,9 +4385,9 @@ const La = (o) => {
       return typeof e.withCheckAll == "boolean" ? O : ((F = e.withCheckAll) == null ? void 0 : F.label) ?? O;
     });
     ye(() => {
-      Oo.value && n("lazyLoad");
+      Eo.value && n("lazyLoad");
     });
-    const Eo = y(() => {
+    const To = y(() => {
       const O = {
         ...e,
         open: void 0,
@@ -4397,16 +4397,16 @@ const La = (o) => {
       return e.withSearch ? { ...O, onKeydown: Xe.value.onKeydown } : { ...O, ...Xe.value };
     });
     return (O, F) => {
-      var j, ee, re;
+      var j, te, re;
       return r(), m("div", {
         ref_key: "selectRef",
         ref: p,
         class: "onyx-component onyx-select-wrapper"
       }, [
-        V(gs, B({
+        V(ks, B({
           ref_key: "selectInput",
           ref: I
-        }, Eo.value, {
+        }, To.value, {
           "show-focus": s(u),
           autofocus: e.autofocus,
           onInputClick: Z,
@@ -4422,8 +4422,8 @@ const La = (o) => {
           ]),
           inert: !s(u)
         }, [
-          le((r(), m("div", Cs, [
-            e.withSearch ? (r(), x(sl, B({
+          le((r(), m("div", $s, [
+            e.withSearch ? (r(), x(rl, B({
               key: 0,
               ref_key: "miniSearch",
               ref: M,
@@ -4433,11 +4433,11 @@ const La = (o) => {
               class: "onyx-select__search",
               onClear: F[1] || (F[1] = (Ae) => i.value = "")
             }), null, 16, ["model-value", "label"])) : _("", !0),
-            f("div", Be(Oe(s(Mo))), [
-              Qe.value ? (r(), m("ul", $s, [
-                f("li", Ss, [
+            f("div", Be(Oe(s(Vo))), [
+              Qe.value ? (r(), m("ul", Ss, [
+                f("li", Ms, [
                   k(O.$slots, "empty", { defaultMessage: Qe.value }, () => [
-                    V(vo, null, {
+                    V(_o, null, {
                       default: $(() => [
                         G(E(Qe.value), 1)
                       ]),
@@ -4450,7 +4450,7 @@ const La = (o) => {
                   key: 0,
                   class: "onyx-select__check-all"
                 }, s(Ot)({ label: et.value })), [
-                  V(Ut, B(
+                  V(qt, B(
                     s(Bt)({
                       value: s(z),
                       label: et.value,
@@ -4459,7 +4459,7 @@ const La = (o) => {
                     {
                       multiple: "",
                       active: s(z) === b.value,
-                      indeterminate: (ee = Le.value) == null ? void 0 : ee.state.value.indeterminate,
+                      indeterminate: (te = Le.value) == null ? void 0 : te.state.value.indeterminate,
                       density: e.density
                     }
                   ), {
@@ -4469,13 +4469,13 @@ const La = (o) => {
                     _: 1
                   }, 16, ["active", "indeterminate", "density"])
                 ], 16)) : _("", !0),
-                (r(!0), m(H, null, te(Vo.value, (Ae, De) => (r(), m("ul", B({
+                (r(!0), m(H, null, oe(Bo.value, (Ae, De) => (r(), m("ul", B({
                   key: De,
                   class: "onyx-select__group",
                   ref_for: !0
                 }, s(Ot)({ label: De })), [
-                  De != "" ? (r(), m("li", Ms, E(De), 1)) : _("", !0),
-                  (r(!0), m(H, null, te(Ae, (ue) => (r(), x(Ut, B(
+                  De != "" ? (r(), m("li", Vs, E(De), 1)) : _("", !0),
+                  (r(!0), m(H, null, oe(Ae, (ue) => (r(), x(qt, B(
                     {
                       key: ue.value.toString(),
                       ref_for: !0
@@ -4485,7 +4485,7 @@ const La = (o) => {
                       label: ue.label,
                       disabled: ue.disabled,
                       // TODO: remove type cast once its fixed in Vue / vue-tsc version
-                      selected: g.value.some((To) => To === ue.value)
+                      selected: g.value.some((Io) => Io === ue.value)
                     }),
                     {
                       multiple: e.multiple,
@@ -4505,21 +4505,21 @@ const La = (o) => {
                 ], 16))), 128))
               ], 64))
             ], 16),
-            (re = e.lazyLoading) != null && re.loading ? (r(), m("div", Vs, [
+            (re = e.lazyLoading) != null && re.loading ? (r(), m("div", Bs, [
               V(de, { class: "onyx-select__loading" })
             ])) : _("", !0),
-            a.optionsEnd ? (r(), m("div", Bs, [
+            a.optionsEnd ? (r(), m("div", Os, [
               k(O.$slots, "optionsEnd")
             ])) : _("", !0)
           ])), [
-            [s(Bo)]
+            [s(Oo)]
           ]),
-          e.listDescription ? (r(), m("div", Os, E(e.listDescription), 1)) : _("", !0)
-        ], 10, ws)
+          e.listDescription ? (r(), m("div", Es, E(e.listDescription), 1)) : _("", !0)
+        ], 10, Cs)
       ], 512);
     };
   }
-}), Ts = ["aria-label"], Is = { class: "onyx-pagination__count" }, Ls = ["aria-label", "disabled"], As = ["aria-label", "disabled"], Ds = /* @__PURE__ */ w({
+}), Is = ["aria-label"], Ls = { class: "onyx-pagination__count" }, As = ["aria-label", "disabled"], Ds = ["aria-label", "disabled"], Rs = /* @__PURE__ */ w({
   __name: "OnyxSelectPagination",
   props: {
     density: {},
@@ -4542,7 +4542,7 @@ const La = (o) => {
       "aria-label": s(l)("pagination.label"),
       style: Me({ "--onyx-pagination-character-count": e.modelValue.toString().length })
     }, [
-      V(Es, {
+      V(Ts, {
         class: "onyx-pagination__select",
         label: s(l)("pagination.select.label"),
         "list-label": s(l)("pagination.select.listLabel"),
@@ -4555,7 +4555,7 @@ const La = (o) => {
         "with-search": "",
         "onUpdate:modelValue": p[0] || (p[0] = (h) => n("update:modelValue", h))
       }, null, 8, ["label", "list-label", "options", "model-value", "value-label", "disabled"]),
-      f("div", Is, E(s(l)("pagination.ofPages", { n: e.pages })), 1),
+      f("div", Ls, E(s(l)("pagination.ofPages", { n: e.pages })), 1),
       f("button", {
         class: "onyx-pagination__button",
         "aria-label": s(l)("pagination.previous"),
@@ -4563,8 +4563,8 @@ const La = (o) => {
         disabled: e.disabled || i.value,
         onClick: p[1] || (p[1] = (h) => n("update:modelValue", e.modelValue - 1))
       }, [
-        V(A, { icon: s(ko) }, null, 8, ["icon"])
-      ], 8, Ls),
+        V(A, { icon: s(wo) }, null, 8, ["icon"])
+      ], 8, As),
       f("button", {
         class: "onyx-pagination__button",
         "aria-label": s(l)("pagination.next"),
@@ -4572,11 +4572,11 @@ const La = (o) => {
         disabled: e.disabled || d.value,
         onClick: p[2] || (p[2] = (h) => n("update:modelValue", e.modelValue + 1))
       }, [
-        V(A, { icon: s(xo) }, null, 8, ["icon"])
-      ], 8, As)
-    ], 14, Ts));
+        V(A, { icon: s(go) }, null, 8, ["icon"])
+      ], 8, Ds)
+    ], 14, Is));
   }
-}), Kr = /* @__PURE__ */ w({
+}), Zr = /* @__PURE__ */ w({
   __name: "OnyxPagination",
   props: {
     density: {},
@@ -4587,11 +4587,11 @@ const La = (o) => {
   emits: ["update:modelValue"],
   setup(o, { emit: t }) {
     const e = o, n = t;
-    return (l, a) => (r(), x(Ds, B(e, {
+    return (l, a) => (r(), x(Rs, B(e, {
       "onUpdate:modelValue": a[0] || (a[0] = (c) => n("update:modelValue", c))
     }), null, 16));
   }
-}), Rs = ["required", "name", "value", "checked", "disabled", "autofocus"], qt = /* @__PURE__ */ w({
+}), Ns = ["required", "name", "value", "checked", "disabled", "autofocus"], Gt = /* @__PURE__ */ w({
   __name: "OnyxRadioButton",
   props: {
     density: {},
@@ -4599,7 +4599,7 @@ const La = (o) => {
     label: {},
     disabled: { default: W },
     loading: { type: Boolean, default: !1 },
-    skeleton: { type: [Symbol, Boolean, Number], default: X },
+    skeleton: { type: [Symbol, Boolean, Number], default: Q },
     truncation: { default: "ellipsis" },
     customError: {},
     autofocus: { type: Boolean },
@@ -4609,7 +4609,7 @@ const La = (o) => {
   },
   emits: ["validityChange"],
   setup(o, { emit: t }) {
-    const e = o, n = t, { vCustomValidity: l, errorMessages: a } = fe({ props: e, emit: n }), { densityClass: c } = R(e), { disabled: i } = se(e), d = oe(e);
+    const e = o, n = t, { vCustomValidity: l, errorMessages: a } = fe({ props: e, emit: n }), { densityClass: c } = R(e), { disabled: i } = se(e), d = ne(e);
     return (u, p) => s(d) ? (r(), m("div", {
       key: 0,
       class: C(["onyx-component", "onyx-radio-button-skeleton", s(c)])
@@ -4639,7 +4639,7 @@ const La = (o) => {
             checked: e.checked,
             disabled: s(i),
             autofocus: e.autofocus
-          }, null, 8, Rs)), [
+          }, null, 8, Ns)), [
             [s(l)]
           ]),
           f("span", {
@@ -4650,10 +4650,10 @@ const La = (o) => {
       _: 1
     }, 8, ["disabled", "error-messages"]));
   }
-}), Ns = ["disabled", "aria-label"], Hs = {
+}), Hs = ["disabled", "aria-label"], zs = {
   key: 0,
   class: "onyx-radio-group__label"
-}, Zr = /* @__PURE__ */ w({
+}, jr = /* @__PURE__ */ w({
   __name: "OnyxRadioGroup",
   props: {
     density: {},
@@ -4669,11 +4669,11 @@ const La = (o) => {
     modelValue: {},
     disabled: { default: W },
     direction: { default: "vertical" },
-    skeleton: { type: [Symbol, Boolean, Number], default: X }
+    skeleton: { type: [Symbol, Boolean, Number], default: Q }
   },
   emits: ["update:modelValue", "validityChange"],
   setup(o, { emit: t }) {
-    const e = o, { densityClass: n } = R(e), { requiredMarkerClass: l, requiredTypeClass: a } = Ke(e), { disabled: c } = se(e), i = oe(e), d = t, u = (p, h) => {
+    const e = o, { densityClass: n } = R(e), { requiredMarkerClass: l, requiredTypeClass: a } = Ke(e), { disabled: c } = se(e), i = ne(e), d = t, u = (p, h) => {
       p && d("update:modelValue", h);
     };
     return (p, h) => (r(), m("fieldset", {
@@ -4682,7 +4682,7 @@ const La = (o) => {
       role: "radiogroup",
       "aria-label": e.label
     }, [
-      e.hideLabel ? _("", !0) : (r(), m("legend", Hs, [
+      e.hideLabel ? _("", !0) : (r(), m("legend", zs, [
         V(_e, {
           is: "h3",
           class: C(s(l))
@@ -4701,14 +4701,14 @@ const La = (o) => {
       f("div", {
         class: C(["onyx-radio-group__content", { "onyx-radio-group__content--horizontal": e.direction === "horizontal" }])
       }, [
-        s(i) ? typeof s(i) == "number" ? (r(!0), m(H, { key: 1 }, te(s(i), (v) => (r(), x(qt, {
+        s(i) ? typeof s(i) == "number" ? (r(!0), m(H, { key: 1 }, oe(s(i), (v) => (r(), x(Gt, {
           id: `skeleton-${v}`,
           key: v,
           value: `skeleton-${v}`,
           label: "Skeleton ${i}",
           name: e.name,
           skeleton: ""
-        }, null, 8, ["id", "value", "name"]))), 128)) : _("", !0) : (r(!0), m(H, { key: 0 }, te(e.options, (v, b) => (r(), x(qt, B({
+        }, null, 8, ["id", "value", "name"]))), 128)) : _("", !0) : (r(!0), m(H, { key: 0 }, oe(e.options, (v, b) => (r(), x(Gt, B({
           key: v.value.toString(),
           ref_for: !0
         }, v, {
@@ -4721,9 +4721,9 @@ const La = (o) => {
           onChange: (g) => u(g, v.value)
         }), null, 16, ["name", "custom-error", "checked", "required", "truncation", "onValidityChange", "onChange"]))), 128))
       ], 2)
-    ], 10, Ns));
+    ], 10, Hs));
   }
-}), jr = ["full", "left", "right"], Yr = ["summary", "preview"], zs = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 11.25h18v1.5H3z"/></svg>', Ps = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.75 11.25V3h-1.5v8.25H3v1.5h8.25V21h1.5v-8.25H21v-1.5z"/></svg>', Fs = (o, t) => o / t % 1 === 0, Us = (o, t, e) => {
+}), Yr = ["full", "left", "right"], Wr = ["summary", "preview"], Ps = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 11.25h18v1.5H3z"/></svg>', Fs = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.75 11.25V3h-1.5v8.25H3v1.5h8.25V21h1.5v-8.25H21v-1.5z"/></svg>', Us = (o, t) => o / t % 1 === 0, qs = (o, t, e) => {
   const n = t ?? -1 / 0, l = e ?? 1 / 0;
   return Math.min(Math.max(o, n), l);
 }, Re = (o, t) => {
@@ -4732,7 +4732,7 @@ const La = (o) => {
     return o.toFixed(t);
   const n = Math.pow(10, t);
   return (Math.round(o * n) / n).toString();
-}, qs = { class: "onyx-stepper__wrapper" }, Gs = ["disabled", "aria-label"], Ks = ["aria-label", "autofocus", "disabled", "min", "max", "name", "placeholder", "readonly", "required", "step", "title"], Zs = ["disabled", "aria-label"], Wr = /* @__PURE__ */ w({
+}, Gs = { class: "onyx-stepper__wrapper" }, Ks = ["disabled", "aria-label"], Zs = ["aria-label", "autofocus", "disabled", "min", "max", "name", "placeholder", "readonly", "required", "step", "title"], js = ["disabled", "aria-label"], Jr = /* @__PURE__ */ w({
   __name: "OnyxStepper",
   props: /* @__PURE__ */ Ne({
     disabled: { default: W },
@@ -4760,14 +4760,14 @@ const La = (o) => {
     autocomplete: {},
     readonly: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 },
-    skeleton: { type: [Symbol, Boolean, Number], default: X }
+    skeleton: { type: [Symbol, Boolean, Number], default: Q }
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ Ne(["validityChange"], ["update:modelValue"]),
   setup(o, { emit: t }) {
-    const e = o, { t: n } = P(), l = T(), a = t, { disabled: c, showError: i } = se(e), d = oe(e), u = Te(i), { densityClass: p } = R(e), { vCustomValidity: h, errorMessages: v } = fe({ props: e, emit: a }), b = y(() => ce(e.success)), g = y(() => ce(e.message)), S = T(!1), M = _t(o, "modelValue"), I = T(), L = y(() => {
+    const e = o, { t: n } = P(), l = T(), a = t, { disabled: c, showError: i } = se(e), d = ne(e), u = Te(i), { densityClass: p } = R(e), { vCustomValidity: h, errorMessages: v } = fe({ props: e, emit: a }), b = y(() => ce(e.success)), g = y(() => ce(e.message)), S = T(!1), M = _t(o, "modelValue"), I = T(), L = y(() => {
       const N = e.precision, q = N.toString();
       return q.includes(".") ? q.split(".")[1].length : -Math.floor(Math.log10(N));
     });
@@ -4783,8 +4783,8 @@ const La = (o) => {
     ), U = (N) => {
       if (!l.value) return;
       S.value = !0;
-      const q = M.value || 0, Q = (N === "stepUp" ? 1 : -1) * z.value, we = q + Q, Ce = Math.round(we / e.precision) * e.precision;
-      M.value = Us(Ce, e.min, e.max);
+      const q = M.value || 0, ee = (N === "stepUp" ? 1 : -1) * z.value, we = q + ee, Ce = Math.round(we / e.precision) * e.precision;
+      M.value = qs(Ce, e.min, e.max);
     }, Z = () => {
       if (!l.value) return;
       S.value = !0;
@@ -4793,7 +4793,7 @@ const La = (o) => {
         M.value = void 0;
         return;
       }
-      if (e.stripStep && (!Fs(N, e.precision) || e.min !== void 0 && e.min > N || e.max !== void 0 && e.max < N)) {
+      if (e.stripStep && (!Us(N, e.precision) || e.min !== void 0 && e.min > N || e.max !== void 0 && e.max < N)) {
         I.value = Re(M.value, L.value);
         return;
       }
@@ -4822,17 +4822,17 @@ const La = (o) => {
         "error-messages": s(v)
       }), {
         default: $(() => [
-          f("div", qs, [
+          f("div", Gs, [
             f("button", {
               type: "button",
               class: "onyx-stepper__counter",
               disabled: s(c) || N.readonly || e.loading || e.min !== void 0 && M.value !== void 0 && M.value <= e.min,
               "aria-label": J.value,
               tabindex: "-1",
-              onClick: q[0] || (q[0] = (Q) => U("stepDown"))
+              onClick: q[0] || (q[0] = (ee) => U("stepDown"))
             }, [
-              V(A, { icon: s(zs) }, null, 8, ["icon"])
-            ], 8, Gs),
+              V(A, { icon: s(Ps) }, null, 8, ["icon"])
+            ], 8, Ks),
             e.loading ? (r(), x(de, {
               key: 0,
               class: "onyx-stepper__loading",
@@ -4841,7 +4841,7 @@ const La = (o) => {
               key: 1,
               ref_key: "inputRef",
               ref: l,
-              "onUpdate:modelValue": q[1] || (q[1] = (Q) => I.value = Q),
+              "onUpdate:modelValue": q[1] || (q[1] = (ee) => I.value = ee),
               class: C(["onyx-stepper__native", { "onyx-stepper__native--touched": S.value }]),
               type: "number",
               "aria-label": e.label,
@@ -4857,10 +4857,10 @@ const La = (o) => {
               title: e.hideLabel ? e.label : void 0,
               onChange: Z,
               onKeydown: [
-                q[2] || (q[2] = Tt(Se((Q) => U("stepUp"), ["prevent"]), ["up"])),
-                q[3] || (q[3] = Tt(Se((Q) => U("stepDown"), ["prevent"]), ["down"]))
+                q[2] || (q[2] = It(Se((ee) => U("stepUp"), ["prevent"]), ["up"])),
+                q[3] || (q[3] = It(Se((ee) => U("stepDown"), ["prevent"]), ["down"]))
               ]
-            }, null, 42, Ks)), [
+            }, null, 42, Zs)), [
               [bt, I.value],
               [s(h)]
             ]),
@@ -4870,17 +4870,17 @@ const La = (o) => {
               disabled: s(c) || N.readonly || e.loading || e.max !== void 0 && M.value !== void 0 && M.value >= e.max,
               "aria-label": pe.value,
               tabindex: "-1",
-              onClick: q[4] || (q[4] = (Q) => U("stepUp"))
+              onClick: q[4] || (q[4] = (ee) => U("stepUp"))
             }, [
-              V(A, { icon: s(Ps) }, null, 8, ["icon"])
-            ], 8, Zs)
+              V(A, { icon: s(Fs) }, null, 8, ["icon"])
+            ], 8, js)
           ])
         ]),
         _: 1
       }, 16, ["message", "success-messages", "error-messages"])
     ], 2));
   }
-}), js = { class: "onyx-switch-skeleton__click-area" }, Ys = ["title"], Ws = ["aria-label", "disabled", "required", "autofocus"], Js = { class: "onyx-switch__click-area" }, Xs = { class: "onyx-switch__container" }, Qs = { class: "onyx-switch__icon" }, Jr = /* @__PURE__ */ w({
+}), Ys = { class: "onyx-switch-skeleton__click-area" }, Ws = ["title"], Js = ["aria-label", "disabled", "required", "autofocus"], Xs = { class: "onyx-switch__click-area" }, Qs = { class: "onyx-switch__container" }, er = { class: "onyx-switch__icon" }, Xr = /* @__PURE__ */ w({
   __name: "OnyxSwitch",
   props: {
     disabled: { default: W },
@@ -4895,13 +4895,13 @@ const La = (o) => {
     loading: { type: Boolean, default: !1 },
     hideLabel: { type: Boolean },
     truncation: { default: "ellipsis" },
-    skeleton: { type: [Symbol, Boolean, Number], default: X }
+    skeleton: { type: [Symbol, Boolean, Number], default: Q }
   },
   emits: ["update:modelValue", "validityChange"],
   setup(o, { emit: t }) {
     const e = o, n = t, { requiredMarkerClass: l, requiredTypeClass: a } = Ke(e), { densityClass: c } = R(e), { disabled: i, showError: d } = se(e), { vCustomValidity: u, errorMessages: p } = fe({ props: e, emit: n }), h = y(
       () => d.value !== !1 ? p.value : void 0
-    ), v = y(() => e.hideLabel && e.label || void 0), b = oe(e), g = y({
+    ), v = y(() => e.hideLabel && e.label || void 0), b = ne(e), g = y({
       get: () => e.modelValue,
       set: (S) => {
         n("update:modelValue", S);
@@ -4911,7 +4911,7 @@ const La = (o) => {
       key: 0,
       class: C(["onyx-component", "onyx-switch-skeleton", s(c)])
     }, [
-      f("span", js, [
+      f("span", Ys, [
         V(K, { class: "onyx-switch-skeleton__input" })
       ]),
       e.hideLabel ? _("", !0) : (r(), x(K, {
@@ -4937,13 +4937,13 @@ const La = (o) => {
             disabled: s(i) || e.loading,
             required: e.required,
             autofocus: e.autofocus
-          }, null, 10, Ws), [
-            [Zt, g.value],
+          }, null, 10, Js), [
+            [jt, g.value],
             [s(u)]
           ]),
-          f("span", Js, [
-            f("span", Xs, [
-              f("span", Qs, [
+          f("span", Xs, [
+            f("span", Qs, [
+              f("span", er, [
                 e.loading ? (r(), x(de, {
                   key: 0,
                   class: "onyx-switch__spinner",
@@ -4968,22 +4968,22 @@ const La = (o) => {
             key: 1,
             class: C(["onyx-switch__marker", [s(l)]])
           }, null, 2)) : _("", !0)
-        ], 10, Ys)
+        ], 10, Ws)
       ]),
       _: 1
     }, 8, ["disabled", "error-messages"]));
   }
-}), Xr = ["intense", "soft", "medium"], wo = Symbol(), er = ["disabled"], tr = { class: "onyx-tab__label" }, Qr = /* @__PURE__ */ w({
+}), Qr = ["intense", "soft", "medium"], Co = Symbol(), tr = ["disabled"], or = { class: "onyx-tab__label" }, ei = /* @__PURE__ */ w({
   __name: "OnyxTab",
   props: {
     density: {},
     value: {},
     label: {},
     disabled: { type: Boolean, default: !1 },
-    skeleton: { type: [Symbol, Boolean, Number], default: X }
+    skeleton: { type: [Symbol, Boolean, Number], default: Q }
   },
   setup(o) {
-    const t = o, { densityClass: e } = R(t), n = me(wo), l = oe(t), a = y(() => `onyx-tab--${n == null ? void 0 : n.size.value}`), c = y(
+    const t = o, { densityClass: e } = R(t), n = me(Co), l = ne(t), a = y(() => `onyx-tab--${n == null ? void 0 : n.size.value}`), c = y(
       () => n == null ? void 0 : n.headless.elements.tab.value({
         value: t.value,
         disabled: t.disabled || !!l.value
@@ -5008,12 +5008,12 @@ const La = (o) => {
           type: "button",
           disabled: t.disabled
         }), [
-          f("div", tr, [
+          f("div", or, [
             k(i.$slots, "tab", {}, () => [
               G(E(t.label), 1)
             ])
           ])
-        ], 16, er)),
+        ], 16, tr)),
         (r(), x(ft, {
           to: (p = s(n)) == null ? void 0 : p.panelRef.value,
           disabled: !((h = s(n)) != null && h.panelRef.value),
@@ -5026,7 +5026,7 @@ const La = (o) => {
       ], 64);
     };
   }
-}), ei = /* @__PURE__ */ w({
+}), ti = /* @__PURE__ */ w({
   __name: "OnyxTabs",
   props: {
     density: {},
@@ -5038,15 +5038,15 @@ const La = (o) => {
   },
   emits: ["update:modelValue"],
   setup(o, { emit: t }) {
-    const e = o, n = t, { densityClass: l } = R(e), a = na({
-      label: ne(e, "label"),
-      selectedTab: ne(() => e.modelValue),
+    const e = o, n = t, { densityClass: l } = R(e), a = aa({
+      label: X(e, "label"),
+      selectedTab: X(() => e.modelValue),
       onSelect: (i) => n("update:modelValue", i)
     }), c = T();
-    return gt(e), Ve(wo, {
+    return gt(e), Ve(Co, {
       headless: a,
       panelRef: c,
-      size: ne(e, "size")
+      size: X(e, "size")
     }), (i, d) => (r(), m("div", {
       ref_key: "panelRef",
       ref: c,
@@ -5062,7 +5062,7 @@ const La = (o) => {
       ], 16)
     ], 2));
   }
-}), or = { class: "onyx-text onyx-truncation-ellipsis" }, ti = /* @__PURE__ */ w({
+}), nr = { class: "onyx-text onyx-truncation-ellipsis" }, oi = /* @__PURE__ */ w({
   __name: "OnyxTag",
   props: {
     density: {},
@@ -5080,10 +5080,10 @@ const La = (o) => {
         icon: t.icon,
         size: "16px"
       }, null, 8, ["icon"])) : _("", !0),
-      f("span", or, E(t.label), 1)
+      f("span", nr, E(t.label), 1)
     ], 2));
   }
-}), nr = ["data-autosize-value"], ar = ["id", "placeholder", "required", "autocapitalize", "autofocus", "name", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], oi = /* @__PURE__ */ w({
+}), ar = ["data-autosize-value"], lr = ["id", "placeholder", "required", "autocapitalize", "autofocus", "name", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], ni = /* @__PURE__ */ w({
   __name: "OnyxTextarea",
   props: {
     density: {},
@@ -5105,7 +5105,7 @@ const La = (o) => {
     withCounter: { type: Boolean },
     message: {},
     success: {},
-    skeleton: { type: [Symbol, Boolean, Number], default: X },
+    skeleton: { type: [Symbol, Boolean, Number], default: Q },
     autosize: {},
     disableManualResize: { type: Boolean, default: !1 }
   },
@@ -5122,7 +5122,7 @@ const La = (o) => {
       var L;
       const I = M.target;
       (L = I.parentElement) == null || L.setAttribute("data-autosize-value", I.value);
-    }, { disabled: v, showError: b } = se(e), g = oe(e), S = Te(b);
+    }, { disabled: v, showError: b } = se(e), g = ne(e), S = Te(b);
     return (M, I) => s(g) ? (r(), m("div", {
       key: 0,
       class: C(["onyx-component", "onyx-textarea-skeleton", s(c)]),
@@ -5164,21 +5164,21 @@ const La = (o) => {
               "aria-label": e.hideLabel ? e.label : void 0,
               title: e.hideLabel ? e.label : void 0,
               onInput: h
-            }, null, 42, ar), [
+            }, null, 42, lr), [
               [bt, u.value],
               [s(l)]
             ])
-          ], 8, nr)
+          ], 8, ar)
         ]),
         _: 1
       }, 16, ["message", "success-messages", "error-messages"])
     ], 6));
   }
-}), lr = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.25 16.5h1.5V18h-1.5zM12.75 6h-1.5v8.25h1.5z"/><path fill-rule="evenodd" d="M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21m6.364 16.864A9 9 0 1 1 21 12a8.94 8.94 0 0 1-2.636 6.364" clip-rule="evenodd"/></svg>', sr = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.275 11.828 2.465 2.47 6.22-6.22 1.06 1.06-7.28 7.281-3.528-3.53z"/><path fill-rule="evenodd" d="M6.167 3.27a10.5 10.5 0 1 1 11.666 17.46A10.5 10.5 0 0 1 6.167 3.27M7 19.483A9 9 0 0 0 12 21a9.01 9.01 0 0 0 9-9 9 9 0 1 0-14 7.483" clip-rule="evenodd"/></svg>', rr = { class: "onyx-toast-message__wrapper" }, ir = { class: "onyx-toast-message__content onyx-truncation-ellipsis" }, cr = { class: "onyx-toast-message__headline onyx-text" }, ur = { class: "onyx-truncation-ellipsis" }, dr = ["aria-label"], pr = {
+}), sr = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.25 16.5h1.5V18h-1.5zM12.75 6h-1.5v8.25h1.5z"/><path fill-rule="evenodd" d="M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21m6.364 16.864A9 9 0 1 1 21 12a8.94 8.94 0 0 1-2.636 6.364" clip-rule="evenodd"/></svg>', rr = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.275 11.828 2.465 2.47 6.22-6.22 1.06 1.06-7.28 7.281-3.528-3.53z"/><path fill-rule="evenodd" d="M6.167 3.27a10.5 10.5 0 1 1 11.666 17.46A10.5 10.5 0 0 1 6.167 3.27M7 19.483A9 9 0 0 0 12 21a9.01 9.01 0 0 0 9-9 9 9 0 1 0-14 7.483" clip-rule="evenodd"/></svg>', ir = { class: "onyx-toast-message__wrapper" }, cr = { class: "onyx-toast-message__content onyx-truncation-ellipsis" }, ur = { class: "onyx-toast-message__headline onyx-text" }, dr = { class: "onyx-truncation-ellipsis" }, pr = ["aria-label"], mr = {
   key: 0,
   class: "onyx-toast-message__description onyx-text--small onyx-truncation-multiline",
   tabindex: "0"
-}, mr = /* @__PURE__ */ w({
+}, yr = /* @__PURE__ */ w({
   __name: "OnyxToastMessage",
   props: {
     density: {},
@@ -5193,9 +5193,9 @@ const La = (o) => {
   setup(o, { emit: t }) {
     const e = o, n = t, { t: l } = P(), { densityClass: a } = R(e), c = y(() => e.duration > 0), i = {
       neutral: dt,
-      danger: fo,
-      warning: lr,
-      success: sr
+      danger: vo,
+      warning: sr,
+      success: rr
     }, d = y(() => {
       if (e.icon !== !1)
         return e.icon || i[e.color];
@@ -5206,14 +5206,14 @@ const La = (o) => {
       "aria-label": e.clickable ? e.headline : void 0
     }, {
       default: $(() => [
-        f("div", rr, [
+        f("div", ir, [
           d.value ? (r(), x(A, {
             key: 0,
             icon: d.value
           }, null, 8, ["icon"])) : _("", !0),
-          f("div", ir, [
-            f("div", cr, [
-              f("span", ur, E(e.headline), 1),
+          f("div", cr, [
+            f("div", ur, [
+              f("span", dr, E(e.headline), 1),
               e.clickable ? _("", !0) : (r(), m("button", {
                 key: 0,
                 type: "button",
@@ -5222,9 +5222,9 @@ const La = (o) => {
                 onClick: p[0] || (p[0] = (h) => n("close"))
               }, [
                 V(A, { icon: s(ke) }, null, 8, ["icon"])
-              ], 8, dr))
+              ], 8, pr))
             ]),
-            e.description ? (r(), m("p", pr, E(e.description), 1)) : _("", !0)
+            e.description ? (r(), m("p", mr, E(e.description), 1)) : _("", !0)
           ])
         ]),
         c.value ? (r(), m("time", {
@@ -5238,7 +5238,7 @@ const La = (o) => {
       _: 1
     }, 8, ["class", "role", "aria-label"]));
   }
-}), Co = Symbol(), yr = () => {
+}), $o = Symbol(), hr = () => {
   let o = 1;
   const t = T([]), e = (l) => {
     const a = o++;
@@ -5256,14 +5256,14 @@ const La = (o) => {
     show: e,
     remove: n
   };
-}, hr = () => {
+}, fr = () => {
   const o = () => {
     console.warn(
       'Trying to use "useToast()" before the toast provider has been provided. Make sure to "provide" it first.'
     );
   };
   return me(
-    Co,
+    $o,
     // provide fallback so "useToast()" does not return "undefined"
     () => ({
       toasts: y(() => []),
@@ -5272,24 +5272,24 @@ const La = (o) => {
     }),
     !0
   );
-}, fr = {
+}, vr = {
   key: 0,
   class: "onyx-component onyx-toast",
   role: "presentation",
   "aria-live": "polite",
   open: ""
-}, ni = /* @__PURE__ */ w({
+}, ai = /* @__PURE__ */ w({
   __name: "OnyxToast",
   setup(o) {
-    const t = hr();
-    return (e, n) => s(t).toasts.value.length ? (r(), m("dialog", fr, [
-      (r(!0), m(H, null, te(s(t).toasts.value, ({ id: l, ...a }) => (r(), x(mr, B({
+    const t = fr();
+    return (e, n) => s(t).toasts.value.length ? (r(), m("dialog", vr, [
+      (r(!0), m(H, null, oe(s(t).toasts.value, ({ id: l, ...a }) => (r(), x(yr, B({
         key: l,
         ref_for: !0
       }, a), null, 16))), 128))
     ])) : _("", !0);
   }
-}), ai = ["top", "bottom", "auto"], li = /* @__PURE__ */ w({
+}), li = ["top", "bottom", "auto"], si = /* @__PURE__ */ w({
   __name: "OnyxForm",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -5299,7 +5299,7 @@ const La = (o) => {
   },
   setup(o) {
     const t = o;
-    rn(t), gt(t);
+    cn(t), gt(t);
     const { densityClass: e } = R(t);
     return (n, l) => (r(), m("form", {
       class: C({
@@ -5311,22 +5311,22 @@ const La = (o) => {
       k(n.$slots, "default")
     ], 2));
   }
-}), si = ["primary", "neutral", "danger", "warning", "success", "info"], ri = ["small", "default", "large"], ii = ["ellipsis", "multiline"], ci = ["onyx", "digits", "kaufland", "lidl", "schwarz"], ui = ["horizontal", "vertical"], di = (o = {}) => ({
+}), ri = ["primary", "neutral", "danger", "warning", "success", "info"], ii = ["small", "default", "large"], ci = ["ellipsis", "multiline"], ui = ["onyx", "digits", "kaufland", "lidl", "schwarz"], di = ["horizontal", "vertical"], pi = (o = {}) => ({
   install: (t) => {
-    tn(t, o.i18n);
+    on(t, o.i18n);
     const e = t.runWithContext(() => P());
-    t.provide(Co, yr()), t.mixin({
+    t.provide($o, hr()), t.mixin({
       beforeMount: () => {
         ye(() => {
-          vr(e.t.value("optional"));
+          _r(e.t.value("optional"));
         });
       }
     });
   }
-}), vr = (o) => {
+}), _r = (o) => {
   var t;
   (t = globalThis.document) == null || t.body.style.setProperty("--onyx-global-optional-text", o);
-}, pi = (o) => {
+}, mi = (o) => {
   Ue(() => {
     Y([o], () => {
       const t = document.documentElement, e = "onyx-transition-active", n = () => {
@@ -5337,94 +5337,94 @@ const La = (o) => {
   });
 };
 export {
-  Lr as AUTOCAPITALIZE,
-  Cr as BUTTON_COLORS,
-  $r as BUTTON_MODES,
-  wr as BUTTON_TYPES,
-  br as DENSITIES,
-  ui as DIRECTIONS,
-  Vr as DataGridFeatures,
-  Or as HEADLINE_TYPES,
-  Er as ICON_SIZES,
-  Ir as INPUT_TYPES,
-  Dr as LINK_TARGETS,
+  Ar as AUTOCAPITALIZE,
+  $r as BUTTON_COLORS,
+  Sr as BUTTON_MODES,
+  Cr as BUTTON_TYPES,
+  xr as DENSITIES,
+  di as DIRECTIONS,
+  Br as DataGridFeatures,
+  Er as HEADLINE_TYPES,
+  Tr as ICON_SIZES,
+  Lr as INPUT_TYPES,
+  Rr as LINK_TARGETS,
   Ye as MOBILE_NAV_BAR_INJECTION_KEY,
-  Yr as MULTISELECT_TEXT_MODE,
-  Ll as NAV_BAR_MORE_LIST_INJECTION_KEY,
-  Ao as ONYX_BREAKPOINTS,
-  si as ONYX_COLORS,
-  ci as ONYX_THEMES,
-  xr as OnyxAlertDialog,
-  gr as OnyxAppLayout,
-  At as OnyxAvatar,
-  kr as OnyxAvatarStack,
-  Sn as OnyxBadge,
+  Wr as MULTISELECT_TEXT_MODE,
+  Al as NAV_BAR_MORE_LIST_INJECTION_KEY,
+  Do as ONYX_BREAKPOINTS,
+  ri as ONYX_COLORS,
+  ui as ONYX_THEMES,
+  gr as OnyxAlertDialog,
+  kr as OnyxAppLayout,
+  Dt as OnyxAvatar,
+  wr as OnyxAvatarStack,
+  Mn as OnyxBadge,
   st as OnyxButton,
   tt as OnyxCheckbox,
-  Sr as OnyxCheckboxGroup,
-  Bl as OnyxColorSchemeDialog,
-  Hr as OnyxColorSchemeMenuItem,
-  Mr as OnyxDataGrid,
-  Ma as OnyxDataGridRenderer,
-  Br as OnyxDatePicker,
+  Mr as OnyxCheckboxGroup,
+  Ol as OnyxColorSchemeDialog,
+  zr as OnyxColorSchemeMenuItem,
+  Vr as OnyxDataGrid,
+  Va as OnyxDataGridRenderer,
+  Or as OnyxDatePicker,
   xt as OnyxDialog,
-  vo as OnyxEmpty,
+  _o as OnyxEmpty,
   Mt as OnyxExternalLinkIcon,
   St as OnyxFlyoutMenu,
-  li as OnyxForm,
+  si as OnyxForm,
   _e as OnyxHeadline,
   A as OnyxIcon,
-  Xa as OnyxIconButton,
+  Qa as OnyxIconButton,
   je as OnyxInfoTooltip,
-  Tr as OnyxInput,
-  Ar as OnyxLink,
+  Ir as OnyxInput,
+  Dr as OnyxLink,
   $t as OnyxListItem,
   de as OnyxLoadingIndicator,
-  bo as OnyxMenuItem,
-  sl as OnyxMiniSearch,
-  zt as OnyxMobileNavButton,
-  Rr as OnyxModalDialog,
-  Nr as OnyxMoreList,
-  xl as OnyxNavAppArea,
-  qr as OnyxNavBar,
-  zr as OnyxNavButton,
-  Pr as OnyxNavItem,
-  Rl as OnyxNavSeparator,
-  Gr as OnyxPageLayout,
-  Kr as OnyxPagination,
-  qt as OnyxRadioButton,
-  Zr as OnyxRadioGroup,
-  Es as OnyxSelect,
-  gs as OnyxSelectInput,
-  Ut as OnyxSelectOption,
+  xo as OnyxMenuItem,
+  rl as OnyxMiniSearch,
+  Pt as OnyxMobileNavButton,
+  Nr as OnyxModalDialog,
+  Hr as OnyxMoreList,
+  gl as OnyxNavAppArea,
+  Gr as OnyxNavBar,
+  Pr as OnyxNavButton,
+  Fr as OnyxNavItem,
+  Nl as OnyxNavSeparator,
+  Kr as OnyxPageLayout,
+  Zr as OnyxPagination,
+  Gt as OnyxRadioButton,
+  jr as OnyxRadioGroup,
+  Ts as OnyxSelect,
+  ks as OnyxSelectInput,
+  qt as OnyxSelectOption,
   K as OnyxSkeleton,
-  Wr as OnyxStepper,
-  Jr as OnyxSwitch,
+  Jr as OnyxStepper,
+  Xr as OnyxSwitch,
   Ge as OnyxSystemButton,
-  Qr as OnyxTab,
-  Sa as OnyxTable,
-  ei as OnyxTabs,
-  ti as OnyxTag,
-  oi as OnyxTextarea,
-  Fr as OnyxTimer,
-  ni as OnyxToast,
-  mr as OnyxToastMessage,
+  ei as OnyxTab,
+  Ma as OnyxTable,
+  ti as OnyxTabs,
+  oi as OnyxTag,
+  ni as OnyxTextarea,
+  Ur as OnyxTimer,
+  ai as OnyxToast,
+  yr as OnyxToastMessage,
   He as OnyxTooltip,
-  Ur as OnyxUserMenu,
+  qr as OnyxUserMenu,
   Ee as OnyxVisuallyHidden,
-  jr as SELECT_ALIGNMENTS,
-  Xr as SYSTEM_BUTTON_COLORS,
-  wo as TABS_INJECTION_KEY,
-  ri as TEXT_SIZES,
-  Co as TOAST_PROVIDER_INJECTION_KEY,
-  ai as TOOLTIP_POSITIONS,
-  ii as TRUNCATION_TYPES,
-  di as createOnyx,
-  yr as createToastProvider,
-  vs as normalizedIncludes,
-  tn as provideI18n,
+  Yr as SELECT_ALIGNMENTS,
+  Qr as SYSTEM_BUTTON_COLORS,
+  Co as TABS_INJECTION_KEY,
+  ii as TEXT_SIZES,
+  $o as TOAST_PROVIDER_INJECTION_KEY,
+  li as TOOLTIP_POSITIONS,
+  ci as TRUNCATION_TYPES,
+  pi as createOnyx,
+  hr as createToastProvider,
+  _s as normalizedIncludes,
+  on as provideI18n,
   R as useDensity,
-  fs as useScrollEnd,
-  pi as useThemeTransition,
-  hr as useToast
+  vs as useScrollEnd,
+  mi as useThemeTransition,
+  fr as useToast
 };