sit-onyx 1.1.0-dev-20250930120837 → 1.2.0-dev-20251008133229

package/dist/index.js

@@ -1,5 +1,5 @@
-import { computed as m, provide as Fe, inject as ge, toRef as ue, ref as N, watch as X, defineComponent as A, watchEffect as De, toRefs as Lt, createElementBlock as v, openBlock as i, normalizeClass as R, unref as l, renderSlot as E, onMounted as $e, createBlock as _, resolveDynamicComponent as Me, withCtx as $, createVNode as O, createElementVNode as y, withModifiers as Re, readonly as Ot, reactive as po, onBeforeMount as Mt, onBeforeUnmount as _t, useId as me, toValue as U, nextTick as Pe, shallowRef as We, useTemplateRef as oe, createCommentVNode as w, createTextVNode as Z, toDisplayString as I, normalizeProps as Ne, mergeProps as B, Fragment as K, isProxy as Sa, toRaw as $a, useAttrs as Ca, customRef as Ea, onUnmounted as Dt, normalizeStyle as Le, useSlots as ye, createSlots as ke, isRef as Ae, renderList as ce, toHandlers as Ba, resolveComponent as Oa, withDirectives as we, guardReactiveProps as Je, vShow as Xt, Teleport as rt, vModelCheckbox as an, vModelText as mo, h as ie, vModelDynamic as ln, withKeys as Io, createStaticVNode as Ma, useModel as Aa } from "vue";
-import { iconChevronDownSmall as Ta, iconCircleAttention as yo, iconXSmall as qe, iconX as fo, iconMoreHorizontalSmall as sn, iconCircleCheck as Ia, iconCircleX as rn, iconCircleInformation as Qt, iconUser as Ra, iconArrowSmallUpRight as La, iconChevronRightSmall as vo, iconArrowSmallLeft as cn, iconHome as Da, iconMoreHorizontal as Ro, iconChevronLeftSmall as ho, iconSearch as Na, iconCheck as Va, iconSearchX as za, iconChevronDownUp as Fa, iconCheckSmall as xt, iconPlusSmall as Pa, iconEyeDisabled as Ua, iconListArrowUp as un, iconListArrowDown as dn, iconArrowsSort as Ha, iconCircleBlock as Ga, iconFileDisabled as qa, iconEyeClosed as Ka, iconEye as ja, iconCircleContrast as Wa, iconTranslate as Ya, iconMenu as Ja, iconMoreVertical as pn, iconNotificationFlag as Za, iconMinus as Xa, iconPlus as Qa, iconFile as el, iconFilePdf as tl, iconFileCsv as ol, iconAudio as nl, iconVideocam as al, iconPicture as ll, iconFileRtf as sl, iconFilePpt as rl, iconFileXls as il, iconFileXlsx as cl, iconFileDoc as ul, iconFileGlobe as dl, iconFileArchive as pl, iconFileText as ml, iconCloudArrowUp as yl, iconTrash as fl, iconShareIos as vl, iconArrowSmallRight as hl, iconSettings as bl, iconLogout as gl } from "@sit-onyx/icons";
+import { computed as m, provide as Fe, inject as ge, toRef as ce, ref as N, watch as X, defineComponent as A, watchEffect as De, toRefs as Lt, createElementBlock as v, openBlock as i, normalizeClass as R, unref as l, renderSlot as E, onMounted as Ce, createBlock as _, resolveDynamicComponent as Me, withCtx as $, createVNode as O, createElementVNode as y, withModifiers as Re, readonly as Ot, reactive as po, onBeforeMount as Mt, onBeforeUnmount as _t, useId as me, toValue as U, nextTick as Pe, shallowRef as Ye, useTemplateRef as oe, createCommentVNode as w, createTextVNode as Z, toDisplayString as I, normalizeProps as Ne, mergeProps as B, Fragment as K, isProxy as Sa, toRaw as $a, useAttrs as Ca, customRef as Ea, onUnmounted as Dt, normalizeStyle as Le, useSlots as ye, createSlots as ke, isRef as Ae, renderList as ue, toHandlers as Ba, resolveComponent as Oa, withDirectives as we, guardReactiveProps as Ze, vShow as Xt, Teleport as rt, vModelCheckbox as ln, vModelText as mo, h as ie, vModelDynamic as sn, withKeys as Ro, createStaticVNode as Ma, useModel as Aa } from "vue";
+import { iconChevronDownSmall as Ta, iconCircleAttention as yo, iconXSmall as qe, iconX as fo, iconMoreHorizontalSmall as rn, iconMoreVertical as vo, iconCircleCheck as Ia, iconCircleX as cn, iconCircleInformation as Qt, iconUser as Ra, iconArrowSmallUpRight as La, iconChevronRightSmall as ho, iconArrowSmallLeft as un, iconHome as Da, iconMoreHorizontal as Lo, iconChevronLeftSmall as bo, iconSearch as Na, iconCheck as Va, iconSearchX as za, iconChevronDownUp as Fa, iconCheckSmall as xt, iconPlusSmall as Pa, iconEyeDisabled as Ua, iconListArrowUp as dn, iconListArrowDown as pn, iconArrowsSort as Ha, iconCircleBlock as Ga, iconFileDisabled as qa, iconEyeClosed as Ka, iconEye as ja, iconCircleContrast as Wa, iconTranslate as Ya, iconMenu as Ja, iconNotificationFlag as Za, iconMinus as Xa, iconPlus as Qa, iconFile as el, iconFilePdf as tl, iconFileCsv as ol, iconAudio as nl, iconVideocam as al, iconPicture as ll, iconFileRtf as sl, iconFilePpt as rl, iconFileXls as il, iconFileXlsx as cl, iconFileDoc as ul, iconFileGlobe as dl, iconFileArchive as pl, iconFileText as ml, iconCloudArrowUp as yl, iconTrash as fl, iconShareIos as vl, iconArrowSmallRight as hl, iconSettings as bl, iconLogout as gl } from "@sit-onyx/icons";
 const Ip = ["compact", "default", "cozy"], q = (o) => ({
   densityClass: m(() => ({ [`onyx-density-${o.density}`]: !!o.density }))
 }), _l = void 0, mn = Symbol(), ne = Symbol("SKELETON_INJECTED_SYMBOL"), yn = (o) => (t) => m(() => typeof t.skeleton != "symbol" ? t.skeleton : t.skeleton === ne && o?.skeleton === !0 ? 3 : !1), Nt = (o) => Fe(mn, yn(o)), xl = yn(), se = (o) => ge(
@@ -7,7 +7,7 @@ const Ip = ["compact", "default", "cozy"], q = (o) => ({
   /** Default */
   xl
 )(o), re = (o) => {
-  const t = ue(o.props, o.key), e = () => typeof o.default == "function" ? o.default() : o.default, n = N(e());
+  const t = ce(o.props, o.key), e = () => typeof o.default == "function" ? o.default() : o.default, n = N(e());
   X(t, (s) => n.value = s);
   const a = m({
     get: () => t.value ?? n.value ?? e(),
@@ -58,8 +58,8 @@ const Ip = ["compact", "default", "cozy"], q = (o) => ({
       },
       { immediate: !0 }
     ), Fe(fn, {
-      openItems: ue(() => s.value),
-      type: ue(() => e.type),
+      openItems: ce(() => s.value),
+      type: ce(() => e.type),
       updateOpen: p,
       disabled: r,
       skeleton: c
@@ -121,7 +121,7 @@ const kl = ["innerHTML"], H = /* @__PURE__ */ A({
 }, te = /* @__PURE__ */ A({
   __name: "OnyxSkeleton",
   setup(o) {
-    return $e(() => Cl("onyx-skeleton")), (t, e) => (i(), v("figure", El));
+    return Ce(() => Cl("onyx-skeleton")), (t, e) => (i(), v("figure", El));
   }
 }), Bl = ["open"], Ol = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"], Ml = { class: "onyx-accordion-item__header-content" }, Al = ["id", "aria-labelledby"], Dp = /* @__PURE__ */ A({
   __name: "OnyxAccordionItem",
@@ -245,8 +245,8 @@ const kl = ["innerHTML"], H = /* @__PURE__ */ A({
 }, ds = {
   decimal: { style: "decimal" }
 }, vn = Symbol(), hn = (o = {}) => {
-  const t = Ot(ue(o?.locale ?? "en-US")), e = m(() => o.messages?.[t.value] ?? to), n = m(() => (r, u = {}) => {
-    let c = Lo(r, e.value) ?? Lo(r, to) ?? "";
+  const t = Ot(ce(o?.locale ?? "en-US")), e = m(() => o.messages?.[t.value] ?? to), n = m(() => (r, u = {}) => {
+    let c = Do(r, e.value) ?? Do(r, to) ?? "";
     return c = ms(c, u.n), ys(c, u);
   }), a = m(() => (r, u) => new Intl.DateTimeFormat(
     t.value,
@@ -257,7 +257,7 @@ const kl = ["innerHTML"], H = /* @__PURE__ */ A({
   ).format(r));
   return {
     // If the user provided a custom `t` function, it is used instead of the default.
-    t: o.t ? Ot(ue(o.t)) : n,
+    t: o.t ? Ot(ce(o.t)) : n,
     locale: t,
     d: a,
     n: s
@@ -265,7 +265,7 @@ const kl = ["innerHTML"], H = /* @__PURE__ */ A({
 }, ps = (o, t) => {
   const e = hn(t);
   return o.provide(vn, e), e;
-}, W = () => ge(vn, () => hn(), !0), Lo = (o, t) => {
+}, W = () => ge(vn, () => hn(), !0), Do = (o, t) => {
   const e = o.split(".").reduce((n, a) => !n || typeof n == "string" ? n : n[a], t);
   return e && typeof e == "string" ? e : void 0;
 }, ms = (o, t) => {
@@ -278,8 +278,8 @@ const kl = ["innerHTML"], H = /* @__PURE__ */ A({
   let e = Object.entries(t).reduce((n, [a, s]) => s === void 0 ? n : n.replace(new RegExp(`{${a}}`, "gi"), s.toString()), o);
   return e = e.replace(/{'(.*?)'}/g, "$1"), e.replace(/{.*}\s?/gi, "");
 }, Ke = (o) => o;
-function Do() {
-  const o = We();
+function No() {
+  const o = Ye();
   return m({
     set: (t) => {
       o.value = t != null && "$el" in t ? t.$el : t;
@@ -287,7 +287,7 @@ function Do() {
     get: () => o.value
   });
 }
-const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"].indexOf(o), No = (o, t) => {
+const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"].indexOf(o), Vo = (o, t) => {
   const e = o.getDay(), n = oo(t);
   return ((e === 0 ? 6 : e - 1) - n + 7) % 7;
 }, ve = (o) => {
@@ -352,14 +352,14 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
         break;
       case "Home":
         if (o.weekStartDay) {
-          const Q = No(L, U(o.weekStartDay));
+          const Q = Vo(L, U(o.weekStartDay));
           L.setDate(L.getDate() - Q);
         }
         z = !0;
         break;
       case "End":
         if (o.weekStartDay) {
-          const Q = No(L, U(o.weekStartDay));
+          const Q = Vo(L, U(o.weekStartDay));
           L.setDate(L.getDate() + (6 - Q));
         }
         z = !0;
@@ -461,7 +461,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
     return;
   }
   lt.delete(o), document.removeEventListener(o, gn);
-}, Vo = (o, t) => {
+}, zo = (o, t) => {
   const e = lt.get(o);
   e?.delete(t), gs(o, e);
 }, _s = (o, t) => {
@@ -477,10 +477,10 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
 }) => {
   Mt(
     () => De(
-      () => e?.value ? Vo(o, t) : _s(o, t)
+      () => e?.value ? zo(o, t) : _s(o, t)
     )
-  ), _t(() => Vo(o, t));
-}, bo = ({
+  ), _t(() => zo(o, t));
+}, go = ({
   inside: o,
   onOutsideClick: t,
   disabled: e,
@@ -597,8 +597,8 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
   { key: "ArrowUp", altKey: !0 },
   "Enter",
   "Tab"
-], zo = ["Enter"], ks = (o, t) => {
-  const e = t ? [...zo, " "] : zo;
+], Fo = ["Enter"], ks = (o, t) => {
+  const e = t ? [...Fo, " "] : Fo;
   return ao(o, e);
 }, ao = (o, t) => t.some((e) => bn(o, e)), ws = Ke(
   ({
@@ -672,7 +672,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
       isExpanded: M,
       onSelect: L
     });
-    return bo({
+    return go({
       inside: C,
       onOutsideClick() {
         M.value && d?.(!0);
@@ -715,7 +715,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
     };
   }
 ), Ss = Ke((o) => {
-  const t = me(), e = me(), n = Do(), a = Do(), s = me(), r = m(() => U(o.position) ?? "bottom");
+  const t = me(), e = me(), n = No(), a = No(), s = me(), r = m(() => U(o.position) ?? "bottom");
   Ue({
     type: "keydown",
     listener: (h) => h.key === "Escape" && c(!1),
@@ -789,7 +789,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
         onMouseleave: () => c(!1, !0)
       };
   });
-  return bo({
+  return go({
     inside: n,
     onOutsideClick: () => c(!1),
     disabled: m(() => !o.isExpanded.value),
@@ -820,10 +820,10 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
         "aria-labelledby": s,
         onClick: () => c(!1)
       },
-      ...go().elements
+      ..._o().elements
     }
   };
-}), go = Ke((o) => {
+}), _o = Ke((o) => {
   const t = (e) => {
     switch (e.key) {
       case "ArrowRight":
@@ -953,7 +953,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
   disabled: m(() => !o.value)
 }), Bs = Ke(
   ({ toggleLabel: o, isVisible: t }) => {
-    const e = me(), n = ue(t ?? !1);
+    const e = me(), n = ce(t ?? !1);
     Sn({ isExpanded: n });
     const a = () => n.value = !n.value;
     return {
@@ -988,7 +988,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
     };
   }
 ), Os = Ke(({ debounce: o, isVisible: t }) => {
-  const e = me(), n = ue(t ?? !1);
+  const e = me(), n = ce(t ?? !1);
   let a;
   const s = m({
     get: () => n.value,
@@ -1056,7 +1056,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
       }
     );
     const c = oe("contentRef");
-    return bo({
+    return go({
       inside: c,
       // modal dialog obscures other content and can be closed by outside click
       // non-modal dialog allows interactions with other elements without closing
@@ -1117,7 +1117,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
     o && En(s) && Ls(a) && (a.preventDefault(), o.push(s));
   }, n = m(() => (a) => {
     if (!t.value || a == null) return !1;
-    const s = Fo(tt(a).href), r = Fo(t.value.path), { hash: u } = t.value;
+    const s = Po(tt(a).href), r = Po(t.value.path), { hash: u } = t.value;
     return s === "/" ? r === s : u && u === s ? !0 : r === s;
   });
   return { navigate: e, currentRoute: t, isActive: n };
@@ -1129,10 +1129,10 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
     }
     return !0;
   }
-}, Fo = (o) => {
+}, Po = (o) => {
   const t = o.trim();
   return t === "" ? "/" : t === "/" ? t : t.replace(/\/+$/, "");
-}, Bn = Symbol(), Ze = /* @__PURE__ */ A({
+}, Bn = Symbol(), Xe = /* @__PURE__ */ A({
   __name: "OnyxVisuallyHidden",
   props: {
     is: { default: "span" }
@@ -1167,7 +1167,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
       onClick: r[0] || (r[0] = (u) => l(n)(u, t.href))
     }, [
       E(s.$slots, "default"),
-      t.target === "_blank" ? (i(), _(Ze, { key: 0 }, {
+      t.target === "_blank" ? (i(), _(Xe, { key: 0 }, {
         default: $(() => [
           Z(
             I(l(e)("link.opensExternally")),
@@ -1211,7 +1211,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
           onClick: c[0] || (c[0] = (d) => r(a.value))
         }, {
           default: $(() => [
-            O(Ze, null, {
+            O(Xe, null, {
               default: $(() => [
                 Z(
                   I(l(e)("headline.copyLinkTo")),
@@ -1233,7 +1233,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
     }, 8, ["id", "class"]));
   }
 }), Ie = (o, t) => {
-  t.autofocus && $e(() => {
+  t.autofocus && Ce(() => {
     if (!t.loading) {
       o.value?.focus();
       return;
@@ -1251,11 +1251,11 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
   disabled: Kt(o, t, "disabled", !1),
   showError: Kt(o, t, "showError", "touched"),
   requiredMarker: Kt(o, t, "requiredMarker", "required")
-}), Ns = (o) => Fe(On, Mn(o && ue(o))), Vs = Mn(), _e = (o) => ge(
+}), Ns = (o) => Fe(On, Mn(o && ce(o))), Vs = Mn(), _e = (o) => ge(
   On,
   /** Default */
   Vs
-)(ue(o)), zs = ["disabled", "type", "autofocus"], ut = /* @__PURE__ */ A({
+)(ce(o)), zs = ["disabled", "type", "autofocus"], ut = /* @__PURE__ */ A({
   __name: "ButtonOrLinkLayout",
   props: {
     disabled: { type: [Boolean, Symbol] },
@@ -1290,7 +1290,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
       E(s.$slots, "default")
     ], 8, zs));
   }
-}), Ce = /* @__PURE__ */ A({
+}), Se = /* @__PURE__ */ A({
   __name: "OnyxSystemButton",
   props: {
     disabled: { type: [Boolean, Symbol], default: le },
@@ -1383,7 +1383,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
                   /* STABLE */
                 })
               ]),
-              O(Ce, {
+              O(Se, {
                 class: "onyx-alert-modal__close",
                 label: l(a)("dialog.close"),
                 icon: l(qe),
@@ -1444,7 +1444,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
     }
   }));
   return e[at] = o ?? [], e;
-}, Po = (o) => !!o && typeof o == "object" && at in o, be = (...o) => o.reduce((t, e) => {
+}, Uo = (o) => !!o && typeof o == "object" && at in o, be = (...o) => o.reduce((t, e) => {
   e?.ref;
   const n = e && Sa(e) && "ref" in e ? $a(e).ref : e?.ref, a = t?.ref, s = B(t ?? {}, e ?? {});
   if (!a && !n)
@@ -1452,7 +1452,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
   if (!a || !n)
     return s.ref = n ?? a, s;
   let r;
-  return Po(a) ? (a[at].push(n), r = a) : Po(n) ? (n[at].push(a), r = n) : r = Gs(a, n), s.ref = r, s;
+  return Uo(a) ? (a[at].push(n), r = a) : Uo(n) ? (n[at].push(a), r = n) : r = Gs(a, n), s.ref = r, s;
 }, {}), qs = {
   key: 1,
   class: "onyx-fab-button__label"
@@ -1502,7 +1502,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
     const c = e === "content-box" ? u.contentBoxSize : e === "border-box" ? u.borderBoxSize : u.devicePixelContentBoxSize;
     n.value = c.reduce((d, { inlineSize: p }) => d + p, 0), a.value = c.reduce((d, { blockSize: p }) => d + p, 0);
   };
-  return $e(() => {
+  return Ce(() => {
     if (!("ResizeObserver" in window)) return;
     const r = new ResizeObserver(s);
     if (!o) {
@@ -1512,19 +1512,19 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
     X(
       o,
       (u, c) => {
-        const d = Ye(u), p = Ye(c);
+        const d = Je(u), p = Je(c);
         p && r?.unobserve(p), d ? r?.observe(d, { box: e }) : (n.value = 0, a.value = 0);
       },
       { immediate: !0 }
     ), _t(() => r.disconnect());
   }), { width: n, height: a };
-}, Ye = (o) => o instanceof Element ? o : o?.$el, Ks = (o, t) => {
+}, Je = (o) => o instanceof Element ? o : o?.$el, Ks = (o, t) => {
   const e = N(!1), n = (a) => {
     a.forEach((s) => {
       e.value = s.isIntersecting;
     });
   };
-  return $e(() => {
+  return Ce(() => {
     if (!("IntersectionObserver" in window)) return;
     const a = new IntersectionObserver(n, {
       root: null,
@@ -1538,7 +1538,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
     X(
       o,
       (s, r) => {
-        const u = Ye(s), c = Ye(r);
+        const u = Je(s), c = Je(r);
         c && a.unobserve(c), u && a.observe(u);
       },
       { immediate: !0 }
@@ -1554,7 +1554,7 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
   offset: r = 0
 }) => {
   const u = N("-1000px"), c = N("-1000px"), { isIntersecting: d } = Ks(t), p = () => {
-    const h = Ye(o.value), b = Ye(t.value);
+    const h = Je(o.value), b = Je(t.value);
     if (!h || !b)
       return;
     const g = b.getBoundingClientRect(), C = h.getBoundingClientRect();
@@ -1604,7 +1604,54 @@ const oo = (o) => ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satu
     updateAnchorPositionPolyfill: p,
     useragentSupportsAnchorApi: f
   };
-};
+}, Tn = (o, t, e = "center") => {
+  const a = N(e);
+  return {
+    /**
+     * Direction in which the popover should open to.
+     */
+    openAlignment: a,
+    /**
+     * Detects in which direction a popover should be opened, depending on the available space in each direction.
+     * Should only be called onBeforeMount or later to support server side rendering.
+     */
+    updateOpenAlignment: () => {
+      const r = l(o), u = l(t);
+      if (!r || !u) {
+        a.value = e;
+        return;
+      }
+      const c = r.getBoundingClientRect(), d = u.getBoundingClientRect();
+      if (d.width < c.width) {
+        a.value = e;
+        return;
+      }
+      const p = (d.width - c.width + 32) / 2, f = d.width - c.width + 16, h = window.innerWidth, b = c.left, g = h - c.right, C = b >= p, k = g >= p;
+      e === "right" && b >= f || e === "left" && g >= f || e === "center" && C && k ? a.value = e : b > g ? a.value = "right" : a.value = "left";
+    }
+  };
+}, xo = (o, t = "bottom") => {
+  const e = N(t);
+  return {
+    /**
+     * Direction in which the popover should open to.
+     */
+    openDirection: e,
+    /**
+     * Detects in which direction a popover should be opened, depending on the available space in each direction.
+     * Should only be called onBeforeMount or later to support server side rendering.
+     */
+    updateOpenDirection: () => {
+      const a = l(o);
+      if (!a) {
+        e.value = t;
+        return;
+      }
+      const s = In(a)?.getBoundingClientRect(), r = a.getBoundingClientRect(), u = s?.top ?? window.visualViewport?.pageTop ?? 0, d = (s?.bottom ?? window.visualViewport?.height ?? 0) - r.bottom, p = r.top - u;
+      e.value = p > d ? "top" : "bottom";
+    }
+  };
+}, In = (o) => o ? getComputedStyle(o).overflow.includes("hidden") ? o : o.parentElement ? In(o.parentElement) : void 0 : void 0;
 function js(o) {
   const t = N(), e = N(), n = N(!1), a = () => {
     if (!(!o.popoverRef.value || !o.popoverWrapperRef.value || !o.isVisible.value))
@@ -1642,7 +1689,7 @@ function js(o) {
         const c = o.popoverRef.value.getBoundingClientRect(), d = c.top < 16, p = c.bottom > window.innerHeight - 16;
         (d || p) && (n.value = !0, d ? (e.value = "top", t.value = { left: c.left + "px", top: "var(--onyx-density-md)" }) : p && (e.value = "bottom", t.value = { left: c.left + "px", bottom: "var(--onyx-density-md)" }));
       }
-  }, s = m(() => !o.clipping.value || !o.isVisible.value);
+  }, s = m(() => !o.sticky.value || !o.isVisible.value);
   return Ue({
     type: "scroll",
     listener: () => a(),
@@ -1651,58 +1698,11 @@ function js(o) {
     type: "resize",
     listener: () => a(),
     disabled: s
-  }), $e(async () => {
+  }), Ce(async () => {
     await Pe(), s.value || a();
-  }), { clippingStyles: t, scrolledOut: e, isClipping: n, checkVisibilityOnScroll: a };
+  }), { stickyStyles: t, scrolledOut: e, isSticky: n, checkVisibilityOnScroll: a };
 }
-const Tn = (o, t, e = "center") => {
-  const a = N(e);
-  return {
-    /**
-     * Direction in which the popover should open to.
-     */
-    openAlignment: a,
-    /**
-     * Detects in which direction a popover should be opened, depending on the available space in each direction.
-     * Should only be called onBeforeMount or later to support server side rendering.
-     */
-    updateOpenAlignment: () => {
-      const r = l(o), u = l(t);
-      if (!r || !u) {
-        a.value = e;
-        return;
-      }
-      const c = r.getBoundingClientRect(), d = u.getBoundingClientRect();
-      if (d.width < c.width) {
-        a.value = e;
-        return;
-      }
-      const p = (d.width - c.width + 32) / 2, f = d.width - c.width + 16, h = window.innerWidth, b = c.left, g = h - c.right, C = b >= p, k = g >= p;
-      e === "right" && b >= f || e === "left" && g >= f || e === "center" && C && k ? a.value = e : b > g ? a.value = "right" : a.value = "left";
-    }
-  };
-}, _o = (o, t = "bottom") => {
-  const e = N(t);
-  return {
-    /**
-     * Direction in which the popover should open to.
-     */
-    openDirection: e,
-    /**
-     * Detects in which direction a popover should be opened, depending on the available space in each direction.
-     * Should only be called onBeforeMount or later to support server side rendering.
-     */
-    updateOpenDirection: () => {
-      const a = l(o);
-      if (!a) {
-        e.value = t;
-        return;
-      }
-      const s = In(a)?.getBoundingClientRect(), r = a.getBoundingClientRect(), u = s?.top ?? window.visualViewport?.pageTop ?? 0, d = (s?.bottom ?? window.visualViewport?.height ?? 0) - r.bottom, p = r.top - u;
-      e.value = p > d ? "top" : "bottom";
-    }
-  };
-}, In = (o) => o ? getComputedStyle(o).overflow.includes("hidden") ? o : o.parentElement ? In(o.parentElement) : void 0 : void 0, Ws = ["role", "aria-label"], xo = /* @__PURE__ */ A({
+const Ws = ["role", "aria-label"], ko = /* @__PURE__ */ A({
   __name: "OnyxBasicPopover",
   props: {
     label: {},
@@ -1712,7 +1712,7 @@ const Tn = (o, t, e = "center") => {
     fitParent: { type: Boolean },
     disabled: { type: Boolean },
     role: { default: "dialog" },
-    clipping: { type: Boolean, default: !1 }
+    sticky: { type: Boolean, default: !1 }
   },
   emits: ["update:open"],
   setup(o, { expose: t, emit: e }) {
@@ -1742,7 +1742,7 @@ const Tn = (o, t, e = "center") => {
           return `${u.value} span-left`;
       }
       return u.value.includes(" ") ? u.value : `${u.value} center`;
-    }), f = oe("popover"), h = oe("popoverWrapper"), { openDirection: b, updateOpenDirection: g } = _o(h, "bottom"), { openAlignment: C, updateOpenAlignment: k } = Tn(
+    }), f = oe("popover"), h = oe("popoverWrapper"), { openDirection: b, updateOpenDirection: g } = xo(h, "bottom"), { openAlignment: C, updateOpenAlignment: k } = Tn(
       h,
       f,
       "left"
@@ -1758,17 +1758,17 @@ const Tn = (o, t, e = "center") => {
       Y ? f.value?.showPopover?.() : f.value?.hidePopover?.();
     }, z = () => {
       g(), k();
-    }, { clippingStyles: j, isClipping: Q } = js({
+    }, { stickyStyles: j, isSticky: Q } = js({
       popoverRef: f,
       popoverWrapperRef: h,
       popoverPosition: u,
       isVisible: r,
-      clipping: m(() => n.clipping)
+      sticky: ce(() => n.sticky)
     });
     Ue({
       type: "resize",
       listener: () => z()
-    }), $e(() => {
+    }), Ce(() => {
       L(r.value), z(), T.value || x();
     }), X(r, async (Y) => {
       await Pe(), L(Y), z(), T.value || x();
@@ -1786,7 +1786,7 @@ const Tn = (o, t, e = "center") => {
       [`onyx-basic-popover__dialog--alignment-${c.value}`]: !0,
       "onyx-basic-popover__dialog--fitparent": n.fitParent,
       "onyx-basic-popover__dialog--disabled": d.value,
-      "onyx-basic-popover__dialog--clipping": Q.value,
+      "onyx-basic-popover__dialog--sticky": Q.value,
       "onyx-basic-popover__dialog--dont-support-anchor": !T.value
     }));
     X(d, () => {
@@ -1830,7 +1830,7 @@ const Tn = (o, t, e = "center") => {
       /* STYLE */
     ));
   }
-}), Ys = { class: "onyx-flyout-menu__list-header" }, Js = { class: "onyx-flyout-menu__list-footer" }, Xe = /* @__PURE__ */ A({
+}), Ys = { class: "onyx-flyout-menu__list-header" }, Js = { class: "onyx-flyout-menu__list-footer" }, je = /* @__PURE__ */ A({
   __name: "OnyxFlyoutMenu",
   props: {
     alignment: { default: "auto" },
@@ -1855,7 +1855,7 @@ const Tn = (o, t, e = "center") => {
       disabled: m(() => e.disabled),
       position: m(() => u.value?.includes("top") ? "top" : "bottom")
     });
-    return (f, h) => (i(), _(xo, B(l(be)(l(c), { ref: r.value }), {
+    return (f, h) => (i(), _(ko, B(l(be)(l(c), { ref: r.value }), {
       class: "onyx-component onyx-flyout-menu",
       open: l(a),
       label: e.label,
@@ -1891,7 +1891,7 @@ const Tn = (o, t, e = "center") => {
       } : void 0
     ]), 1040, ["open", "label", "alignment", "disabled"]));
   }
-}), Uo = /* @__PURE__ */ A({
+}), Ho = /* @__PURE__ */ A({
   __name: "OnyxFAB",
   props: {
     density: {},
@@ -1910,14 +1910,14 @@ const Tn = (o, t, e = "center") => {
       emit: n,
       key: "open",
       default: !1
-    }), c = m(() => !!a.default), d = m(() => c.value ? u.value ? fo : sn : e.icon);
+    }), c = m(() => !!a.default), d = m(() => c.value ? u.value ? fo : rn : e.icon);
     return (p, f) => !c.value || l(r) ? (i(), _(lo, B({
       key: 0,
       class: ["onyx-fab", `onyx-fab--${e.alignment}`]
     }, e, {
       icon: d.value,
       skeleton: l(r)
-    }), null, 16, ["class", "icon", "skeleton"])) : (i(), _(Xe, {
+    }), null, 16, ["class", "icon", "skeleton"])) : (i(), _(je, {
       key: 1,
       open: l(u),
       "onUpdate:open": f[0] || (f[0] = (h) => Ae(u) ? u.value = h : null),
@@ -1952,7 +1952,7 @@ const Tn = (o, t, e = "center") => {
   setup(o) {
     const t = o, { densityClass: e } = q(t), {
       elements: { listItem: n, menuItem: a }
-    } = go();
+    } = _o();
     return (s, r) => (i(), v(
       "li",
       B({
@@ -1968,8 +1968,8 @@ const Tn = (o, t, e = "center") => {
     ));
   }
 }), Rn = Symbol(), Xs = () => {
-  const o = We([]), t = (n) => {
-    o.value = o.value.concat(ue(n));
+  const o = Ye([]), t = (n) => {
+    o.value = o.value.concat(ce(n));
   }, e = (n) => {
     o.value = o.value.filter((a) => a.value.id !== n);
   };
@@ -1999,12 +1999,12 @@ const Tn = (o, t, e = "center") => {
       () => t.items.value.some((a) => a.value.alignment === "left") ? "left" : "right"
     );
     return (a, s) => l(t).items.value.length === 1 ? (i(), _(
-      Uo,
+      Ho,
       Ne(B({ key: 0 }, l(t).items.value[0].value)),
       null,
       16
       /* FULL_PROPS */
-    )) : l(t).items.value.length > 1 ? (i(), _(Uo, {
+    )) : l(t).items.value.length > 1 ? (i(), _(Ho, {
       key: 1,
       label: l(e)("globalFAB.label"),
       alignment: n.value
@@ -2013,7 +2013,7 @@ const Tn = (o, t, e = "center") => {
         (i(!0), v(
           K,
           null,
-          ce(l(t).items.value, (r) => (i(), _(
+          ue(l(t).items.value, (r) => (i(), _(
             Zs,
             B({
               key: r.value.id
@@ -2124,7 +2124,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
         (i(!0), v(
           K,
           null,
-          ce(l(n), ([c, d]) => (i(), v("span", {
+          ue(l(n), ([c, d]) => (i(), v("span", {
             key: c,
             class: "onyx-ripple__element",
             style: Le({
@@ -2212,10 +2212,10 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
     }, 16, ["class", "aria-label"]));
   }
 }), pr = { class: "onyx-info-card__content" }, mr = {
-  key: 2,
+  key: 3,
   class: "onyx-info-card__description onyx-text--small"
 }, yr = {
-  key: 3,
+  key: 4,
   class: "onyx-info-card__buttons onyx-density-compact"
 }, fr = /* @__PURE__ */ A({
   __name: "OnyxInfoCard",
@@ -2228,8 +2228,8 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
   },
   emits: ["close"],
   setup(o, { emit: t }) {
-    const e = o, n = t, a = ye(), { t: s } = W(), { densityClass: r } = q(e);
-    return (u, c) => (i(), v(
+    const e = o, n = t, a = ye(), { t: s } = W(), { densityClass: r } = q(e), u = m(() => e.color === "neutral" ? "soft" : "medium");
+    return (c, d) => (i(), v(
       "div",
       {
         class: R(["onyx-component", "onyx-info-card", `onyx-info-card--${e.color}`, l(r)])
@@ -2256,19 +2256,38 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
             _: 1
             /* STABLE */
           })) : w("v-if", !0),
-          e.closable ? (i(), _(Ce, {
+          a.headerActions ? (i(), _(je, {
             key: 1,
-            class: "onyx-info-card__close",
+            class: "onyx-info-card__action",
+            label: l(s)("notificationCard.moreActions"),
+            trigger: "click",
+            alignment: "right"
+          }, {
+            button: $(({ trigger: p }) => [
+              O(Se, B(p, {
+                label: l(s)("notificationCard.toggleActions"),
+                icon: l(vo),
+                color: u.value
+              }), null, 16, ["label", "icon", "color"])
+            ]),
+            options: $(() => [
+              E(c.$slots, "headerActions")
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["label"])) : e.closable ? (i(), _(Se, {
+            key: 2,
+            class: "onyx-info-card__close onyx-info-card__action",
             icon: l(qe),
             label: l(s)("close"),
-            color: e.color === "neutral" ? "soft" : "medium",
-            onClick: c[0] || (c[0] = (d) => n("close"))
+            color: u.value,
+            onClick: d[0] || (d[0] = (p) => n("close"))
           }, null, 8, ["icon", "label", "color"])) : w("v-if", !0),
           a.default ? (i(), v("p", mr, [
-            E(u.$slots, "default")
+            E(c.$slots, "default")
           ])) : w("v-if", !0),
           a.buttons ? (i(), v("div", yr, [
-            E(u.$slots, "buttons")
+            E(c.$slots, "buttons")
           ])) : w("v-if", !0)
         ])
       ],
@@ -2364,7 +2383,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       (i(!0), v(
         K,
         null,
-        ce(l(t).notifications.value, ({ id: a, ...s }) => (i(), _(
+        ue(l(t).notifications.value, ({ id: a, ...s }) => (i(), _(
           vr,
           B({ key: a }, { ref_for: !0 }, s),
           ke({
@@ -2384,7 +2403,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
                 (i(!0), v(
                   K,
                   null,
-                  ce(s.buttons, (r) => (i(), _(
+                  ue(s.buttons, (r) => (i(), _(
                     st,
                     B({
                       key: r.label
@@ -2427,7 +2446,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
   setup(o, { emit: t }) {
     const e = o, n = t, { t: a } = W(), { densityClass: s } = q(e), r = m(() => e.duration > 0), u = {
       neutral: Qt,
-      danger: rn,
+      danger: cn,
       warning: yo,
       success: Ia
     }, c = m(() => {
@@ -2536,7 +2555,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       (i(!0), v(
         K,
         null,
-        ce(l(t).toasts.value, ({ id: a, ...s }) => (i(), _(
+        ue(l(t).toasts.value, ({ id: a, ...s }) => (i(), _(
           Nn,
           B({ key: a }, { ref_for: !0 }, s),
           null,
@@ -2713,13 +2732,13 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
   }
 }), Ur = (o) => {
   const t = N(), e = N(), { width: n } = He(o.parentRef), { width: a } = He(o.moreIndicatorRef), s = po(/* @__PURE__ */ new Map());
-  return $e(() => {
+  return Ce(() => {
     X(
-      [n, a, s, ue(o.direction)],
+      [n, a, s, ce(o.direction)],
       () => {
         let r = n.value;
         if (r <= 0) return;
-        const u = Ho(o.parentRef.value), c = Ho(o.listRef.value);
+        const u = Go(o.parentRef.value), c = Go(o.listRef.value);
         a.value > 0 && (r -= a.value + u), t.value = [], e.value = [];
         const d = Array.from(s.entries());
         U(o.direction) === "ltr" && d.reverse(), d.forEach(([p, f], h, { length: b }) => {
@@ -2751,8 +2770,8 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
      */
     componentMap: s
   };
-}, Ho = (o) => {
-  const t = Ye(o);
+}, Go = (o) => {
+  const t = Je(o);
   return t && Number.parseFloat(getComputedStyle(t).columnGap) || 0;
 }, zn = (o) => {
   const t = me(), e = N(), n = ge(o, void 0), { width: a } = He(e, { box: "border-box" });
@@ -2794,7 +2813,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       size: "16px"
     }, null, 8, ["icon"])) : w("v-if", !0);
   }
-}), ko = /* @__PURE__ */ A({
+}), wo = /* @__PURE__ */ A({
   __name: "OnyxListItem",
   props: {
     density: {},
@@ -2854,7 +2873,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       default: !1
     }), d = oe("backButtonRef"), p = oe("menuItemRef"), {
       elements: { listItem: f, menuItem: h }
-    } = go({
+    } = _o({
       onOpen: async () => {
         k.value && (c.value = !0, await Pe(), d.value?.$el.querySelector("button").focus());
       }
@@ -2878,7 +2897,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
     };
     return (x, T) => {
       const D = Oa("OnyxMenuItem", !0);
-      return i(), _(ko, B({
+      return i(), _(wo, B({
         selected: g.value,
         active: g.value,
         color: s.color,
@@ -2904,7 +2923,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
                   ),
                   O(
                     Un,
-                    Ne(Je(s.link ? l(tt)(s.link) : void 0)),
+                    Ne(Ze(s.link ? l(tt)(s.link) : void 0)),
                     null,
                     16
                     /* FULL_PROPS */
@@ -2913,7 +2932,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
               ]),
               k.value ? (i(), v("div", Gr, [
                 O(H, {
-                  icon: l(vo),
+                  icon: l(ho),
                   size: "24px"
                 }, null, 8, ["icon"])
               ])) : w("v-if", !0)
@@ -2937,7 +2956,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
                 },
                 {
                   default: $(() => [
-                    O(H, { icon: l(cn) }, null, 8, ["icon"]),
+                    O(H, { icon: l(un) }, null, 8, ["icon"]),
                     Z(
                       " " + I(l(e)("back")),
                       1
@@ -2963,7 +2982,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       }, 16, ["selected", "active", "color", "disabled", "class"]);
     };
   }
-}), Go = /* @__PURE__ */ A({
+}), qo = /* @__PURE__ */ A({
   inheritAttrs: !1,
   __name: "OnyxBreadcrumbItem",
   props: {
@@ -3047,7 +3066,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       parentRef: a,
       listRef: s,
       moreIndicatorRef: r,
-      direction: ue(() => e.direction)
+      direction: ce(() => e.direction)
     });
     return Fe(e.injectionKey, u), X(
       [() => u.visibleElements.value?.length, () => u.hiddenElements.value?.length],
@@ -3117,7 +3136,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       "aria-hidden": t.skeleton
     }, [
       y("ol", jr, [
-        O(Go, {
+        O(qo, {
           class: "onyx-breadcrumb__home",
           href: t.home?.link ?? "/",
           "aria-label": t.home?.label ?? l(e)("breadcrumb.home"),
@@ -3152,7 +3171,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
           default: $(({ attributes: r }) => [
             y(
               "div",
-              Ne(Je(r)),
+              Ne(Ze(r)),
               [
                 E(a.$slots, "default")
               ],
@@ -3161,19 +3180,19 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
             )
           ]),
           more: $(({ attributes: r }) => [
-            O(Xe, B(r, {
+            O(je, B(r, {
               label: l(e)("navigation.moreNavItemsLabel"),
               trigger: "click"
             }), {
               button: $(({ trigger: u }) => [
-                O(Go, B(u, {
+                O(qo, B(u, {
                   "aria-label": l(e)("navigation.showMoreNavItemsLabel"),
                   title: l(e)("navigation.showMoreNavItemsLabel"),
-                  icon: l(Ro)
+                  icon: l(Lo)
                 }), {
                   default: $(() => [
                     O(H, {
-                      icon: l(Ro),
+                      icon: l(Lo),
                       size: "16px"
                     }, null, 8, ["icon"])
                   ]),
@@ -3306,9 +3325,9 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
           return `${p.value} x-end`;
       }
       return p.value.includes(" ") ? p.value : `${p.value} center`;
-    }), b = () => d.value === "hover" ? Os(u.value) : Bs(c.value), g = We(b());
+    }), b = () => d.value === "hover" ? Os(u.value) : Bs(c.value), g = Ye(b());
     X(d, () => g.value = b());
-    const C = m(() => g.value?.elements.tooltip), k = m(() => U(g.value?.elements.trigger)), S = ue(() => e.alignsWithEdge), M = ue(() => e.fitParent), x = oe("tooltipWrapperRefEl"), T = oe("tooltipRefEl"), { openDirection: D, updateOpenDirection: L } = _o(x, "top"), { openAlignment: z, updateOpenAlignment: j } = Tn(x, T), { leftPosition: Q, topPosition: P, updateAnchorPositionPolyfill: F, useragentSupportsAnchorApi: ee } = An({
+    const C = m(() => g.value?.elements.tooltip), k = m(() => U(g.value?.elements.trigger)), S = ce(() => e.alignsWithEdge), M = ce(() => e.fitParent), x = oe("tooltipWrapperRefEl"), T = oe("tooltipRefEl"), { openDirection: D, updateOpenDirection: L } = xo(x, "top"), { openAlignment: z, updateOpenAlignment: j } = Tn(x, T), { leftPosition: Q, topPosition: P, updateAnchorPositionPolyfill: F, useragentSupportsAnchorApi: ee } = An({
       positionedRef: T,
       targetRef: x,
       positionArea: p,
@@ -3337,9 +3356,9 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
     })), { width: Y } = He(x), Be = m(
       () => e.fitParent && x.value ? `${Y.value}px` : "max-content"
     );
-    $e(() => {
+    Ce(() => {
       V(r.value), G();
-    }), $e(() => {
+    }), Ce(() => {
       ee.value || X(
         [Be, p, f, S, r],
         () => F(),
@@ -3352,9 +3371,9 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       },
       { flush: "post" }
     );
-    const Se = `--anchor-${me()}`, fe = m(() => ee.value ? {
+    const $e = `--anchor-${me()}`, fe = m(() => ee.value ? {
       width: Be.value,
-      "position-anchor": Se,
+      "position-anchor": $e,
       "position-area": h.value
     } : {
       width: Be.value,
@@ -3366,7 +3385,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       {
         ref: "tooltipWrapperRefEl",
         class: R(["onyx-component", "onyx-tooltip-wrapper", l(a)]),
-        style: Le(`anchor-name: ${Se}`)
+        style: Le(`anchor-name: ${$e}`)
       },
       [
         y(
@@ -3558,7 +3577,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
             O(vt, {
               label: l(r)("calendar.previousMonthButton"),
               color: "neutral",
-              icon: l(ho),
+              icon: l(bo),
               disabled: l(f),
               onClick: l(j)
             }, null, 8, ["label", "icon", "disabled", "onClick"]),
@@ -3582,7 +3601,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
             O(vt, {
               label: l(r)("calendar.nextMonthButton"),
               color: "neutral",
-              icon: l(vo),
+              icon: l(ho),
               disabled: l(f),
               onClick: l(Q)
             }, null, 8, ["label", "icon", "disabled", "onClick"])
@@ -3594,14 +3613,14 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
         y("div", ti, [
           y(
             "table",
-            Ne(Je(l(D))),
+            Ne(Ze(l(D))),
             [
               y("thead", null, [
                 y("tr", null, [
                   (i(!0), v(
                     K,
                     null,
-                    ce(l(T), (Y, Be) => (i(), v("th", {
+                    ue(l(T), (Y, Be) => (i(), v("th", {
                       key: Be,
                       scope: "col",
                       abbr: Y,
@@ -3616,22 +3635,22 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
                 (i(!0), v(
                   K,
                   null,
-                  ce(l(x), (Y, Be) => (i(), v("tr", { key: Be }, [
+                  ue(l(x), (Y, Be) => (i(), v("tr", { key: Be }, [
                     (i(!0), v(
                       K,
                       null,
-                      ce(Y, (Se, fe) => (i(), v(
+                      ue(Y, ($e, fe) => (i(), v(
                         "td",
-                        B({ key: fe }, { ref_for: !0 }, l(L)(Se)),
+                        B({ key: fe }, { ref_for: !0 }, l(L)($e)),
                         [
-                          Se.date ? (i(), v(
+                          $e.date ? (i(), v(
                             "button",
                             B({
                               key: 0,
                               ref_for: !0
-                            }, l(z)(Se), {
+                            }, l(z)($e), {
                               ref_for: !0,
-                              ref: (Oe) => p(Oe, Se.date?.toISOString().slice(0, 10)),
+                              ref: (Oe) => p(Oe, $e.date?.toISOString().slice(0, 10)),
                               type: "button"
                             }),
                             [
@@ -3639,7 +3658,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
                                 y(
                                   "span",
                                   ai,
-                                  I(Se.date.getDate()),
+                                  I($e.date.getDate()),
                                   1
                                   /* TEXT */
                                 )
@@ -3692,7 +3711,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
 }, ii = (o, t) => {
   const e = Object.entries(o).filter(([a, s]) => s !== void 0), n = Object.entries(t).filter(([a, s]) => s !== void 0);
   return e.length !== n.length ? !1 : e.every(([a, s]) => s === t[a]);
-}, qo = (o, t) => o.reduce(
+}, Ko = (o, t) => o.reduce(
   (e, n) => {
     const a = n[t] ?? "";
     return e[a] = e[a] || [], e[a].push(n), e;
@@ -3744,7 +3763,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
     return o.shortMessage;
   const { shortMessage: t, longMessage: e } = o;
   return `${t}: ${e}`;
-}, je = (o) => {
+}, We = (o) => {
   const { t, locale: e } = W(), n = N(!1), { vCustomValidity: a, validityState: s } = ui({
     error: m(() => Kn(o.props.error || U(o.error))),
     props: o.props
@@ -3771,8 +3790,8 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       n: o.props.modelValue?.toString().length ?? 0,
       minLength: o.props.minlength,
       maxLength: d,
-      min: Ko(e.value, o.props.type, o.props.min),
-      max: Ko(e.value, o.props.type, o.props.max),
+      min: jo(e.value, o.props.type, o.props.min),
+      max: jo(e.value, o.props.type, o.props.max),
       step: o.props.validStepSize
     };
     if (u === "typeMismatch") {
@@ -3797,7 +3816,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
      */
     errorMessages: r
   };
-}, Ko = (o, t, e) => {
+}, jo = (o, t, e) => {
   if (!t || !["date", "datetime-local"].includes(t)) return e?.toString();
   const n = e != null ? new Date(e) : void 0;
   if (!ro(n)) return e?.toString();
@@ -3811,7 +3830,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
 }, pi = { class: "onyx-component" }, mi = {
   key: 0,
   ref: "targetRef"
-}, wo = /* @__PURE__ */ A({
+}, So = /* @__PURE__ */ A({
   __name: "OnyxErrorTooltip",
   props: {
     errorMessages: {},
@@ -3882,7 +3901,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       emit: a,
       key: "modelValue",
       default: !1
-    }), { vCustomValidity: c, errorMessages: d } = je({ props: n, emit: a }), { densityClass: p } = q(n), { disabled: f, requiredMarker: h } = _e(n), b = se(n), { requiredMarkerClass: g, requiredTypeClass: C } = Ft(n, h), k = m(() => n.hideLabel ? n.label : void 0), S = oe("inputRef");
+    }), { vCustomValidity: c, errorMessages: d } = We({ props: n, emit: a }), { densityClass: p } = q(n), { disabled: f, requiredMarker: h } = _e(n), b = se(n), { requiredMarkerClass: g, requiredTypeClass: C } = Ft(n, h), k = m(() => n.hideLabel ? n.label : void 0), S = oe("inputRef");
     return t({ input: S }), Ie(S, n), (M, x) => l(b) ? (i(), v(
       "div",
       B({
@@ -3898,7 +3917,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       ],
       16
       /* FULL_PROPS */
-    )) : (i(), _(wo, B({
+    )) : (i(), _(So, B({
       key: 1,
       disabled: l(f),
       "error-messages": l(d)
@@ -3926,7 +3945,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
               value: n.value,
               autofocus: n.autofocus
             }, l(r)), null, 16, vi)), [
-              [an, l(u)],
+              [ln, l(u)],
               [l(c)]
             ])
           ]),
@@ -4022,7 +4041,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
         "onUpdate:open": u[0] || (u[0] = (c) => Ae(a) ? a.value = c : null)
       }), {
         default: $(({ trigger: c }) => [
-          O(Ce, B({
+          O(Se, B({
             label: (
               // if type is `click` aria-label will always be defined
               c["aria-label"]
@@ -4057,7 +4076,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
             _: 1
             /* STABLE */
           }, 16, ["open"]),
-          O(Ze, null, {
+          O(Xe, null, {
             default: $(() => [
               Z(
                 I(e.text),
@@ -4077,7 +4096,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
 }), gi = ["disabled", "aria-label"], _i = {
   key: 0,
   class: "onyx-checkbox-group__label"
-}, jo = /* @__PURE__ */ A({
+}, Wo = /* @__PURE__ */ A({
   __name: "OnyxCheckboxGroup",
   props: {
     truncation: { default: "ellipsis" },
@@ -4149,7 +4168,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
           l(h) ? typeof l(h) == "number" ? (i(!0), v(
             K,
             { key: 1 },
-            ce(l(h), (M) => (i(), _(yt, {
+            ue(l(h), (M) => (i(), _(yt, {
               key: M,
               label: `Skeleton ${M}`,
               value: `skeleton-${M}`,
@@ -4173,7 +4192,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
               (i(!0), v(
                 K,
                 null,
-                ce(n.options, (M) => (i(), _(yt, B({
+                ue(n.options, (M) => (i(), _(yt, B({
                   key: M.value.toString()
                 }, { ref_for: !0 }, M, {
                   ref_for: !0,
@@ -4197,7 +4216,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       )
     ], 10, gi));
   }
-}), So = (o) => {
+}), $o = (o) => {
   const t = typeof o == "symbol" && o.description ? o.description : String(o);
   return globalThis.window && window.CSS ? CSS.escape(t) : t.replace(/\W/g, "-");
 }, xi = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" }, ki = {
@@ -4218,7 +4237,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       [
         E(a.$slots, "icon", {}, () => [
           O(H, {
-            icon: l(rn),
+            icon: l(cn),
             size: "48px"
           }, null, 8, ["icon"])
         ]),
@@ -4293,7 +4312,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
             (i(!0), v(
               K,
               null,
-              ce(t.columnGroups, (g) => (i(), v("colgroup", {
+              ue(t.columnGroups, (g) => (i(), v("colgroup", {
                 key: g.key,
                 span: g.span
               }, null, 8, Bi))),
@@ -4305,7 +4324,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
                 (i(!0), v(
                   K,
                   null,
-                  ce(t.columnGroups, (g) => (i(), v("th", {
+                  ue(t.columnGroups, (g) => (i(), v("th", {
                     key: g.key,
                     colspan: g.span,
                     scope: "colgroup",
@@ -4371,7 +4390,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
     const t = o, e = ye(), n = m(() => ({
       "--onyx-data-grid-column-count": t.columns.length,
       "--onyx-data-grid-row-count": Math.max(t.rows.length + 2, 3),
-      "--onyx-data-grid-template-columns": t.columns.map(({ key: a, width: s }) => `var(${`--onyx-data-grid-column-${So(a)}`}, ${s ?? "minmax(min-content, 1fr)"})`).join(" ")
+      "--onyx-data-grid-template-columns": t.columns.map(({ key: a, width: s }) => `var(${`--onyx-data-grid-column-${$o(a)}`}, ${s ?? "minmax(min-content, 1fr)"})`).join(" ")
     }));
     return (a, s) => (i(), _(Yn, B({ class: "onyx-data-grid" }, t, {
       "scroll-container-attrs": l(be)(t.scrollContainerAttrs, { style: n.value })
@@ -4381,7 +4400,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
           (i(!0), v(
             K,
             null,
-            ce(t.columns, (r) => (i(), v(
+            ue(t.columns, (r) => (i(), v(
               "th",
               B({
                 key: r.key
@@ -4410,7 +4429,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
         (i(!0), v(
           K,
           null,
-          ce(t.rows, (r) => (i(), v(
+          ue(t.rows, (r) => (i(), v(
             "tr",
             B({
               key: r.id
@@ -4419,7 +4438,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
               (i(!0), v(
                 K,
                 null,
-                ce(r.columns, (u) => (i(), v(
+                ue(r.columns, (u) => (i(), v(
                   K,
                   {
                     key: u.key
@@ -4461,10 +4480,10 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       _: 2
       /* DYNAMIC */
     }, [
-      ce(e, (r, u) => ({
+      ue(e, (r, u) => ({
         name: u,
         fn: $((c) => [
-          E(a.$slots, r?.name, Ne(Je(c)), () => [
+          E(a.$slots, r?.name, Ne(Ze(c)), () => [
             (i(), _(Me(r)))
           ])
         ])
@@ -4557,21 +4576,21 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       ])) : w("v-if", !0)
     ]));
   }
-}), $o = "-", gt = (o) => o?.fallback ?? $o, Ee = (o) => Object.freeze(o), Zn = (o, t) => {
+}), Co = "-", gt = (o) => o?.fallback ?? Co, Ee = (o) => Object.freeze(o), Zn = (o, t) => {
   if (o == null || o instanceof Date || typeof o == "boolean" || typeof o == "symbol")
     return gt(t);
   const { n: e } = W();
-  return e.value(o, t?.format ?? "decimal").replace("NaN", $o);
+  return e.value(o, t?.format ?? "decimal").replace("NaN", Co);
 }, Xn = Ee({
   header: { component: ot },
   cell: {
     component: ({ metadata: o, modelValue: t }) => Zn(t, o?.typeOptions),
     tdAttributes: { class: "onyx-data-grid-number-cell" }
   }
-}), Co = (o, t) => o == null ? gt(t) : Array.isArray(o) ? o.map((e) => Co(e)).filter((e) => e != gt(t)).join(", ") : o instanceof Date ? o.toString() : typeof o == "object" ? JSON.stringify(o) : String(o), Eo = Ee({
+}), Eo = (o, t) => o == null ? gt(t) : Array.isArray(o) ? o.map((e) => Eo(e)).filter((e) => e != gt(t)).join(", ") : o instanceof Date ? o.toString() : typeof o == "object" ? JSON.stringify(o) : String(o), Bo = Ee({
   header: { component: ot },
   cell: {
-    component: (o) => Co(o.modelValue, o.metadata?.typeOptions)
+    component: (o) => Eo(o.modelValue, o.metadata?.typeOptions)
   }
 }), kt = (o, t) => {
   if (o == null || typeof o == "boolean") return gt(t);
@@ -4625,7 +4644,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
       return [
         ie(H, r),
         // since icons are aria hidden (visual only), we include the value with OnyxVisuallyHidden here for screen readers
-        ie(Ze, void 0, () => r.label)
+        ie(Xe, void 0, () => r.label)
       ];
     }
   }
@@ -4638,7 +4657,7 @@ const so = /* @__PURE__ */ Vt(ar, [["render", sr]]), ze = /* @__PURE__ */ A({
      * Returns a renderer for any given component and type.
      * Uses the fallbackRenderer if necessary.
      */
-    getFor: (n, a) => e.get(a)?.[n] ?? Eo[n]
+    getFor: (n, a) => e.get(a)?.[n] ?? Bo[n]
     // Map returns undefined if `type` is undefined, so it's safe to use the Non-Null assertion.
   };
 };
@@ -4687,29 +4706,29 @@ const Gi = (o, t) => {
     const k = r.map((x) => x.header).filter((x) => !!x), S = k.map((x) => x.actions).filter((x) => !!x), M = k.map((x) => x.wrapper).filter((x) => !!x);
     return c.value.map((x, T, D) => {
       const L = S.flatMap((G) => G(x, T, D)), z = d.value.getFor("header", x.type.name), j = L.map(({ menuItems: G }) => G).filter((G) => !!G), Q = L.map(({ iconComponent: G }) => G), P = ie(
-        Xe,
+        je,
         {
           label: t.t.value("navigation.moreActionsFlyout", { column: x.label }),
           trigger: "click"
         },
         {
-          button: ({ trigger: G }) => ie(Ce, {
+          button: ({ trigger: G }) => ie(Se, {
             class: L.length > 1 ? "onyx-system-button--multiple-actions" : "",
             label: t.t.value("navigation.moreActionsTrigger"),
             color: "medium",
-            icon: sn,
+            icon: rn,
             ...G
           }),
           options: () => j
         }
       ), F = {
         actions: () => {
-          const V = bt(Q).map((fe) => typeof fe == "object" && "iconComponent" in fe ? fe : { iconComponent: fe }), ae = V.filter((fe) => fe?.alwaysShowInHeader).map((fe) => fe.iconComponent), Y = V.find((fe) => !fe.alwaysShowInHeader)?.iconComponent ?? null, Se = L.filter(
+          const V = bt(Q).map((fe) => typeof fe == "object" && "iconComponent" in fe ? fe : { iconComponent: fe }), ae = V.filter((fe) => fe?.alwaysShowInHeader).map((fe) => fe.iconComponent), Y = V.find((fe) => !fe.alwaysShowInHeader)?.iconComponent ?? null, $e = L.filter(
             (fe) => !fe.iconComponent?.alwaysShowInHeader
           ).length > 1 || L.some((fe) => fe.showFlyoutMenu);
           return [
-            ...Se ? ae : [],
-            Se ? P : Y
+            ...$e ? ae : [],
+            $e ? P : Y
           ].filter(Boolean);
         }
       }, ee = M.reduce(
@@ -4796,8 +4815,8 @@ const Gi = (o, t) => {
      */
     isAsync: n
   };
-}, Ki = Symbol("Filtering"), Bo = 0, ji = (o) => (t) => {
-  const { i18n: e } = t, n = ue(o?.filterState ?? {}), a = m(() => U(o?.columns)), { isEnabled: s, isAsync: r } = dt(t, o), u = (p) => r.value ? p : p.filter(
+}, Ki = Symbol("Filtering"), Oo = 0, ji = (o) => (t) => {
+  const { i18n: e } = t, n = ce(o?.filterState ?? {}), a = m(() => U(o?.columns)), { isEnabled: s, isAsync: r } = dt(t, o), u = (p) => r.value ? p : p.filter(
     (f) => Object.entries(n.value).every(
       ([h, b]) => {
         const g = a.value?.[h], C = { ...o?.filterConfig, ...g?.config };
@@ -4843,13 +4862,13 @@ const Gi = (o, t) => {
     watch: [n, a],
     mutation: {
       func: u,
-      order: Bo
+      order: Oo
     },
     header: {
       actions: ({ key: p }) => s.value(p) ? [
         {
           iconComponent: n.value[p] ? {
-            iconComponent: ie(Ce, {
+            iconComponent: ie(Se, {
               label: e.t.value("dataGrid.head.filtering.removeLabel", {
                 column: p.toString()
               }),
@@ -4879,10 +4898,10 @@ const Gi = (o, t) => {
       });
     }
   }, isScrollEnd: Ot(e) };
-}, Oo = (o, t, e) => {
+}, Mo = (o, t, e) => {
   const n = t ?? -1 / 0, a = e ?? 1 / 0;
   return Math.min(Math.max(o, n), a);
-}, Wo = (o, t) => {
+}, Yo = (o, t) => {
   if (o == null) return "";
   if (t >= 0) return o.toFixed(t);
   const e = Math.pow(10, t);
@@ -4923,7 +4942,7 @@ const Gi = (o, t) => {
   },
   setup(o) {
     const t = o;
-    return (e, n) => (i(), _(Me(o.messages.hidden ? Ze : "span"), {
+    return (e, n) => (i(), _(Me(o.messages.hidden ? Xe : "span"), {
       class: R(["onyx-component", "onyx-form-message", `onyx-form-message__${t.type}`])
     }, {
       default: $(() => [
@@ -5125,7 +5144,7 @@ const Gi = (o, t) => {
   },
   emits: ["inputClick", "validityChange"],
   setup(o, { expose: t, emit: e }) {
-    const { rootAttrs: n, restAttrs: a } = xe(), s = o, r = e, { t: u } = W(), { vCustomValidity: c, errorMessages: d } = je({ props: s, emit: r }), p = m(() => Te(s.success)), f = m(() => Te(s.message)), { disabled: h, showError: b } = _e(s), g = se(s), C = wt(b), k = m(() => s.modelValue ? s.modelValue.length : 0), S = m(() => {
+    const { rootAttrs: n, restAttrs: a } = xe(), s = o, r = e, { t: u } = W(), { vCustomValidity: c, errorMessages: d } = We({ props: s, emit: r }), p = m(() => Te(s.success)), f = m(() => Te(s.message)), { disabled: h, showError: b } = _e(s), g = se(s), C = wt(b), k = m(() => s.modelValue ? s.modelValue.length : 0), S = m(() => {
       const z = s.modelValue?.length;
       if (!s.modelValue || !z) return "";
       if (z === 1) return s.modelValue[0];
@@ -5266,7 +5285,7 @@ const Gi = (o, t) => {
       /* FULL_PROPS */
     ));
   }
-}), ac = ["checked", "aria-labelledby", "disabled", "indeterminate"], Yo = /* @__PURE__ */ A({
+}), ac = ["checked", "aria-labelledby", "disabled", "indeterminate"], Jo = /* @__PURE__ */ A({
   __name: "OnyxSelectOption",
   props: {
     active: { type: Boolean, default: !1 },
@@ -5278,7 +5297,7 @@ const Gi = (o, t) => {
   },
   setup(o) {
     const t = o;
-    return (e, n) => (i(), _(ko, B({ class: "onyx-component onyx-select-option" }, t, {
+    return (e, n) => (i(), _(wo, B({ class: "onyx-component onyx-select-option" }, t, {
       checked: !!e.$attrs["aria-checked"],
       selected: !!e.$attrs["aria-selected"],
       disabled: !!e.$attrs["aria-disabled"]
@@ -5396,7 +5415,7 @@ const Gi = (o, t) => {
       emit: a,
       key: "open",
       default: !1
-    }), f = oe("selectRef"), { openDirection: h, updateOpenDirection: b } = _o(f), g = N(), C = m(() => bt(c.value)), k = m(() => n.valueLabel !== void 0 ? bt(n.valueLabel) : C.value.reduce((J, pe) => {
+    }), f = oe("selectRef"), { openDirection: h, updateOpenDirection: b } = xo(f), g = N(), C = m(() => bt(c.value)), k = m(() => n.valueLabel !== void 0 ? bt(n.valueLabel) : C.value.reduce((J, pe) => {
       const de = n.options.find(({ value: he }) => he === pe)?.label;
       return de && J.push(de), J;
     }, [])), S = oe("miniSearchRef"), M = oe("selectInputRef"), x = m(() => n.noFilter || !d.value ? n.options : n.options.filter(
@@ -5410,10 +5429,10 @@ const Gi = (o, t) => {
       { immediate: !0 }
     );
     const T = me(), D = m(() => (n.multiple && n.withCheckAll && !d.value ? [T] : []).concat(
-      To.value
+      Io.value
     )), L = async (J) => {
-      const pe = qo(
-        Ao(),
+      const pe = Ko(
+        To(),
         "group"
       );
       if (n.keepSelectionOrder ? pt.value = Et(pe) : pt.value = Et(
@@ -5448,14 +5467,14 @@ const Gi = (o, t) => {
       C.value.some((he) => he === J) ? c.value = C.value.filter(
         (he) => he !== J
       ) : c.value = [...C.value, J];
-    }, V = m(() => n.withSearch ? "list" : "none"), { label: ae, listLabel: Y, listDescription: Be, multiple: Se } = Lt(n), {
+    }, V = m(() => n.withSearch ? "list" : "none"), { label: ae, listLabel: Y, listDescription: Be, multiple: $e } = Lt(n), {
       elements: { input: fe, option: Oe, group: Ht, listbox: ga }
     } = ws({
       autocomplete: V,
       label: ae,
       listLabel: Y,
       listDescription: Be,
-      multiple: Se,
+      multiple: $e,
       activeOption: m(() => g.value),
       isExpanded: p,
       templateRef: f,
@@ -5467,7 +5486,7 @@ const Gi = (o, t) => {
       onTypeAhead: F,
       onAutocomplete: ee,
       onSelect: G
-    }), Ao = () => {
+    }), To = () => {
       if (n.keepSelectionOrder || !c.value || !Array.isArray(c.value) || c.value.length == 0)
         return x.value;
       const J = new Set(c.value);
@@ -5482,11 +5501,11 @@ const Gi = (o, t) => {
     }), Gt = m(() => {
       if (!x.value.length)
         return n.withSearch && d.value ? r.value("select.noMatch") : r.value("select.empty");
-    }), To = m(
+    }), Io = m(
       () => x.value.filter((J) => !J.disabled).map(({ value: J }) => J)
     ), $t = m(() => {
       if (!(!n.multiple || !n.withCheckAll))
-        return jn(To, C, (J) => {
+        return jn(Io, C, (J) => {
           const pe = J.map((de) => n.options.find(({ value: he }) => he === de)?.value).filter((de) => de != null);
           c.value = pe;
         });
@@ -5511,8 +5530,8 @@ const Gi = (o, t) => {
     return t({ input: m(() => M.value?.input) }), X(
       [x],
       () => {
-        const J = qo(
-          Ao(),
+        const J = Ko(
+          To(),
           "group"
         );
         n.keepSelectionOrder ? pt.value = Et(J) : pt.value = Et(
@@ -5525,7 +5544,7 @@ const Gi = (o, t) => {
       "div",
       lc,
       [
-        O(xo, {
+        O(ko, {
           class: R(l(u)),
           label: n.listLabel,
           position: l(h),
@@ -5555,7 +5574,7 @@ const Gi = (o, t) => {
               }), null, 16, ["model-value", "label"])) : w("v-if", !0),
               y(
                 "div",
-                Ne(Je(l(ga))),
+                Ne(Ze(l(ga))),
                 [
                   Gt.value ? (i(), v("ul", rc, [
                     y("li", ic, [
@@ -5586,7 +5605,7 @@ const Gi = (o, t) => {
                           class: "onyx-select__check-all"
                         }, l(Ht)({ label: qt.value })),
                         [
-                          O(Yo, B(
+                          O(Jo, B(
                             l(Oe)({
                               value: l(T),
                               label: qt.value,
@@ -5617,7 +5636,7 @@ const Gi = (o, t) => {
                       (i(!0), v(
                         K,
                         null,
-                        ce(pt.value, (de) => (i(), v(
+                        ue(pt.value, (de) => (i(), v(
                           "ul",
                           B({
                             key: de.name,
@@ -5634,7 +5653,7 @@ const Gi = (o, t) => {
                             (i(!0), v(
                               K,
                               null,
-                              ce(de.items, (he) => (i(), _(Yo, B(
+                              ue(de.items, (he) => (i(), _(Jo, B(
                                 {
                                   key: he.value.toString()
                                 },
@@ -5776,7 +5795,7 @@ const Gi = (o, t) => {
         disabled: e.disabled || b.value,
         onClick: k[2] || (k[2] = (S) => n("update:modelValue", e.modelValue - 1))
       }, [
-        O(H, { icon: l(ho) }, null, 8, ["icon"])
+        O(H, { icon: l(bo) }, null, 8, ["icon"])
       ], 8, fc),
       y("button", {
         class: "onyx-pagination__button",
@@ -5785,7 +5804,7 @@ const Gi = (o, t) => {
         disabled: e.disabled || g.value,
         onClick: k[3] || (k[3] = (S) => n("update:modelValue", e.modelValue + 1))
       }, [
-        O(H, { icon: l(vo) }, null, 8, ["icon"])
+        O(H, { icon: l(ho) }, null, 8, ["icon"])
       ], 8, vc)
     ], 14, mc));
   }
@@ -5812,12 +5831,12 @@ const Gi = (o, t) => {
     ));
   }
 }), bc = Symbol("Selection"), ca = 1e3, gc = (o) => (t) => {
-  const e = `selection-column-${me()}`, n = ue(
+  const e = `selection-column-${me()}`, n = ce(
     o?.selectionState ?? {
       selectMode: "include",
       contingent: /* @__PURE__ */ new Set()
     }
-  ), a = N(0), s = ue(o?.hover ?? !1), { isEnabled: r } = dt(t, o), u = (b) => n.value.selectMode === "include" ? n.value.contingent.has(b) : !n.value.contingent.has(b), c = (b) => {
+  ), a = N(0), s = ce(o?.hover ?? !1), { isEnabled: r } = dt(t, o), u = (b) => n.value.selectMode === "include" ? n.value.contingent.has(b) : !n.value.contingent.has(b), c = (b) => {
     n.value.selectMode = b ? "exclude" : "include", n.value.contingent.clear();
   }, d = (b, g) => {
     n.value.selectMode === "include" && b === !0 || n.value.selectMode === "exclude" && b === !1 ? n.value.contingent.add(g) : n.value.contingent.delete(g);
@@ -5882,8 +5901,8 @@ const Gi = (o, t) => {
       })
     }
   };
-}, _c = Symbol("Pagination"), xc = Symbol("LazyLoadingRow"), Jo = Symbol("LazyLoadingRenderer"), kc = Symbol("ButtonLoadingRow"), Zo = Symbol("ButtonLoadingRenderer"), ua = Math.min(Bo, ca) - 1, wc = (o = {}) => (t) => {
-  const e = ue(
+}, _c = Symbol("Pagination"), xc = Symbol("LazyLoadingRow"), Zo = Symbol("LazyLoadingRenderer"), kc = Symbol("ButtonLoadingRow"), Xo = Symbol("ButtonLoadingRenderer"), ua = Math.min(Oo, ca) - 1, wc = (o = {}) => (t) => {
+  const e = ce(
     o?.paginationState ?? { current: 1, pages: 1, pageSize: o?.pageSize ?? 25 }
   ), { isEnabled: n, isAsync: a } = dt(t, o), s = m(() => o.disabled?.value ?? !1), r = m(
     () => e.value.pages > 1 || e.value.current > e.value.pageSize
@@ -5904,7 +5923,7 @@ const Gi = (o, t) => {
         if (!n.value()) return b;
         let g = b.slice();
         if (!a.value) {
-          e.value.pages = Math.ceil(g.length / e.value.pageSize), e.value.current = Oo(e.value.current, 1, e.value.pages);
+          e.value.pages = Math.ceil(g.length / e.value.pageSize), e.value.current = Mo(e.value.current, 1, e.value.pages);
           let C = (e.value.current - 1) * e.value.pageSize;
           const k = C + e.value.pageSize;
           d !== "select" && (C = 0), g = g.slice(C, k);
@@ -5912,18 +5931,18 @@ const Gi = (o, t) => {
         return d === "lazy" && c.value && g.push({
           id: xc,
           [It]: {
-            columns: [{ key: "id", type: { name: Jo } }]
+            columns: [{ key: "id", type: { name: Zo } }]
           }
         }), d === "button" && (!u.value || c.value) && g.push({
           id: kc,
           [It]: {
-            columns: [{ key: "id", type: { name: Zo } }]
+            columns: [{ key: "id", type: { name: Xo } }]
           }
         }), g;
       }
     },
     typeRenderer: {
-      [Jo]: Ee({
+      [Zo]: Ee({
         cell: {
           tdAttributes: {
             class: "onyx-data-grid__lazy-pagination",
@@ -5932,13 +5951,13 @@ const Gi = (o, t) => {
           component: () => ie(so)
         }
       }),
-      [Zo]: Ee({
+      [Xo]: Ee({
         cell: {
           tdAttributes: {
             class: "onyx-data-grid__button-pagination",
             colspan: 99
           },
-          component: () => c.value ? ie(so) : ie(Ce, {
+          component: () => c.value ? ie(so) : ie(Se, {
             label: t.i18n.t.value("dataGrid.loadMore"),
             color: "medium",
             disabled: U(o.disabled),
@@ -5968,7 +5987,7 @@ const Gi = (o, t) => {
       }
     })
   };
-}, Sc = Symbol("Base"), $c = Math.max(Bo, ua) + 1, Cc = (o) => ({ skeleton: t }) => {
+}, Sc = Symbol("Base"), $c = Math.max(Oo, ua) + 1, Cc = (o) => ({ skeleton: t }) => {
   const e = N(0), n = m(() => {
     const a = U(o?.headline);
     if (a)
@@ -5996,7 +6015,7 @@ const Gi = (o, t) => {
     }),
     typeRenderer: {
       number: Xn,
-      string: Eo,
+      string: Bo,
       date: Qn,
       "datetime-local": ea,
       time: ta,
@@ -6035,7 +6054,7 @@ const Gi = (o, t) => {
     withPageScrolling: { type: Boolean }
   },
   setup(o) {
-    const t = o, e = W(), n = ye(), a = se(t), s = We([]), r = We([]), u = We(), c = We(), d = We(), { columns: p, data: f, features: h, columnGroups: b, async: g } = Lt(t);
+    const t = o, e = W(), n = ye(), a = se(t), s = Ye([]), r = Ye([]), u = Ye(), c = Ye(), d = Ye(), { columns: p, data: f, features: h, columnGroups: b, async: g } = Lt(t);
     let C;
     const k = ({
       createRendererColumns: S,
@@ -6055,7 +6074,7 @@ const Gi = (o, t) => {
       h,
       () => {
         const S = qi(
-          [Cc({ headline: ue(t, "headline") }), ...h.value],
+          [Cc({ headline: ce(t, "headline") }), ...h.value],
           {
             i18n: e,
             columnConfig: p,
@@ -6084,7 +6103,7 @@ const Gi = (o, t) => {
       _: 2
       /* DYNAMIC */
     }, [
-      ce(d.value, (x, T) => ({
+      ue(d.value, (x, T) => ({
         name: T,
         fn: $(() => [
           (i(), _(Me(x)))
@@ -6093,24 +6112,24 @@ const Gi = (o, t) => {
       n.empty ? {
         name: "empty",
         fn: $((x) => [
-          E(S.$slots, "empty", Ne(Je(x)))
+          E(S.$slots, "empty", Ne(Ze(x)))
         ]),
         key: "0"
       } : void 0
     ]), 1040, ["column-groups", "columns", "rows", "scroll-container-attrs"]));
   }
 }), Ec = Symbol("HideColumnsFeature"), Yt = Symbol("HiddenColumn"), Bc = (o) => (t) => {
-  const { i18n: e } = t, { isEnabled: n } = dt(t, o), a = N([]), s = ue(o?.state ?? /* @__PURE__ */ new Set()), r = m(
+  const { i18n: e } = t, { isEnabled: n } = dt(t, o), a = N([]), s = ce(o?.state ?? /* @__PURE__ */ new Set()), r = m(
     () => a.value.filter((d) => s.value.has(d.key))
   ), u = () => ie(
-    Xe,
+    je,
     {
       label: e.t.value("dataGrid.head.hideColumns.revealFlyout"),
       trigger: "click",
       alignment: "right"
     },
     {
-      button: ({ trigger: d }) => ie(Ce, {
+      button: ({ trigger: d }) => ie(Se, {
         class: "",
         label: e.t.value("dataGrid.head.hideColumns.revealTrigger"),
         color: "medium",
@@ -6197,7 +6216,7 @@ const Gi = (o, t) => {
   },
   emits: ["updateWidth", "autoSize", "start", "end"],
   setup(o, { emit: t }) {
-    const e = o, n = t, { t: a } = W(), s = N(), r = m(() => Ye(e.element));
+    const e = o, n = t, { t: a } = W(), s = N(), r = m(() => Je(e.element));
     let u;
     const c = N(!1), d = () => {
       if (!r.value) return;
@@ -6205,7 +6224,7 @@ const Gi = (o, t) => {
       const g = { signal: u.signal, passive: !0 };
       window.addEventListener("mousemove", f, g), window.addEventListener("mouseup", h, g), window.addEventListener("keydown", b, g), n("start");
     };
-    $e(() => {
+    Ce(() => {
       X(
         () => e.active,
         (g) => {
@@ -6243,7 +6262,7 @@ const Gi = (o, t) => {
         onDblclick: p
       },
       [
-        O(Ze, null, {
+        O(Xe, null, {
           default: $(() => [
             Z(
               I(l(a)("resizeHandle.label")),
@@ -6265,7 +6284,7 @@ const Gi = (o, t) => {
     [a, r],
     () => {
       a.value.forEach((p, f) => {
-        const h = `--onyx-data-grid-column-${So(f)}`, b = p.closest(".onyx-table-wrapper__container"), g = r.value.get(f);
+        const h = `--onyx-data-grid-column-${$o(f)}`, b = p.closest(".onyx-table-wrapper__container"), g = r.value.get(f);
         g ? b?.style.setProperty(h, g) : b?.style.removeProperty(h);
       });
     },
@@ -6343,7 +6362,7 @@ const Gi = (o, t) => {
       }
     }
   };
-}, Mo = (o, t, e) => e.compare(String(o), String(t)), nt = (o, t) => Number(o) - Number(t), Ac = (o, t) => nt(o ? 1 : 0, t ? 1 : 0), Xo = (o) => new Date(
+}, Ao = (o, t, e) => e.compare(String(o), String(t)), nt = (o, t) => Number(o) - Number(t), Ac = (o, t) => nt(o ? 1 : 0, t ? 1 : 0), Qo = (o) => new Date(
   Date.UTC(
     0,
     0,
@@ -6355,11 +6374,11 @@ const Gi = (o, t) => {
   )
 ), Tc = (o, t, e) => {
   if (!(o instanceof Date && t instanceof Date))
-    return Mo(o, t, e);
-  const n = Xo(o), a = Xo(t);
+    return Ao(o, t, e);
+  const n = Qo(o), a = Qo(t);
   return nt(n, a);
-}, Qo = Object.freeze({
-  string: Mo,
+}, en = Object.freeze({
+  string: Ao,
   number: nt,
   date: nt,
   "datetime-local": nt,
@@ -6368,7 +6387,7 @@ const Gi = (o, t) => {
   timestamp: nt,
   skeleton: () => 0,
   boolean: Ac
-}), en = /* @__PURE__ */ A({
+}), tn = /* @__PURE__ */ A({
   __name: "SortAction",
   props: {
     columnLabel: {},
@@ -6376,14 +6395,14 @@ const Gi = (o, t) => {
   },
   setup(o) {
     const t = o, { t: e } = W(), n = m(
-      () => t.sortDirection === "asc" ? un : t.sortDirection === "desc" ? dn : Ha
+      () => t.sortDirection === "asc" ? dn : t.sortDirection === "desc" ? pn : Ha
     ), a = m(() => {
       const s = uo(t.sortDirection);
       return e.value(`dataGrid.head.sorting.action.${s}`, {
         field: t.columnLabel
       });
     });
-    return (s, r) => (i(), _(Ce, {
+    return (s, r) => (i(), _(Se, {
       label: a.value,
       icon: n.value,
       color: "medium"
@@ -6400,7 +6419,7 @@ const Gi = (o, t) => {
       return "asc";
   }
 }, Ic = Symbol("Sorting"), Rc = (o) => (t) => {
-  const e = ue(
+  const e = ce(
     o?.sortState ?? {
       column: void 0,
       direction: "none"
@@ -6414,7 +6433,7 @@ const Gi = (o, t) => {
     if (C)
       return C;
     const k = r.find(({ key: S }) => b === S)?.type.name ?? "";
-    return Qo[k] ? Qo[k] : Mo;
+    return en[k] ? en[k] : Ao;
   }, d = (b) => {
     const { column: g, direction: C } = e.value;
     if (s.value || !g || C === "none")
@@ -6430,8 +6449,8 @@ const Gi = (o, t) => {
   }, f = m(() => (b, g) => e.value.column === b && e.value.direction === g), h = (b, g) => {
     const C = {
       none: Ga,
-      asc: un,
-      desc: dn
+      asc: dn,
+      desc: pn
     };
     return ie(
       Ge,
@@ -6461,7 +6480,7 @@ const Gi = (o, t) => {
     header: {
       actions: ({ key: b, label: g }) => a.value(b) ? [
         {
-          iconComponent: ie(en, {
+          iconComponent: ie(tn, {
             columnLabel: g,
             sortDirection: e.value.column === b ? e.value.direction : void 0,
             onClick: () => p(b)
@@ -6474,7 +6493,7 @@ const Gi = (o, t) => {
         },
         e.value.column === b && e.value.direction && e.value.direction !== "none" ? {
           iconComponent: {
-            iconComponent: ie(en, {
+            iconComponent: ie(tn, {
               columnLabel: g,
               sortDirection: e.value.column === b ? e.value.direction : void 0,
               onClick: () => p(b, !0)
@@ -6486,8 +6505,8 @@ const Gi = (o, t) => {
     }
   };
 }, Lc = Symbol("StickyColumns"), Dc = (o) => () => {
-  const t = m(() => U(o?.columns) ?? []), e = m(() => U(o?.position) ?? "left"), n = N({}), a = N({}), s = me(), r = N(!1), u = (p) => `--onyx-data-grid-sticky-column-position-${s}-${So(p)}`;
-  $e(() => {
+  const t = m(() => U(o?.columns) ?? []), e = m(() => U(o?.position) ?? "left"), n = N({}), a = N({}), s = me(), r = N(!1), u = (p) => `--onyx-data-grid-sticky-column-position-${s}-${$o(p)}`;
+  Ce(() => {
     if (!("ResizeObserver" in window)) return;
     const p = new ResizeObserver(() => {
       Object.entries(a.value).forEach(
@@ -6564,17 +6583,17 @@ const Gi = (o, t) => {
   BOOLEAN_RENDERER: aa,
   DATETIME_RENDERER: ea,
   DATE_RENDERER: Qn,
-  FALLBACK_RENDER_VALUE: $o,
+  FALLBACK_RENDER_VALUE: Co,
   NUMBER_RENDERER: Xn,
   SKELETON_RENDERER: na,
-  STRING_RENDERER: Eo,
+  STRING_RENDERER: Bo,
   TIMESTAMP_RENDERER: oa,
   TIME_RENDERER: ta,
   createRenderer: la,
   createTypeRenderer: Ee,
   dateFormatter: kt,
   numberFormatter: Zn,
-  stringFormatter: Co,
+  stringFormatter: Eo,
   useFiltering: ji,
   useHideColumns: Bc,
   usePagination: wc,
@@ -6613,7 +6632,7 @@ const Gi = (o, t) => {
   },
   emits: ["update:modelValue", "validityChange"],
   setup(o, { emit: t }) {
-    const e = o, n = t, { rootAttrs: a, restAttrs: s } = xe(), { vCustomValidity: r, errorMessages: u } = je({ props: e, emit: n }), c = m(() => Te(e.success)), d = m(() => Te(e.message)), { densityClass: p } = q(e), { disabled: f, showError: h } = _e(e), b = se(e), g = wt(h), C = m(() => (x) => {
+    const e = o, n = t, { rootAttrs: a, restAttrs: s } = xe(), { vCustomValidity: r, errorMessages: u } = We({ props: e, emit: n }), c = m(() => Te(e.success)), d = m(() => Te(e.message)), { densityClass: p } = q(e), { disabled: f, showError: h } = _e(e), b = se(e), g = wt(h), C = m(() => (x) => {
       const T = x != null && x != null ? new Date(x) : void 0;
       if (!ro(T)) return;
       const D = T.toISOString().split("T")[0];
@@ -6682,7 +6701,7 @@ const Gi = (o, t) => {
                 min: C.value(e.min),
                 max: C.value(e.max)
               }, l(s)), null, 16, Vc)), [
-                [ln, S.value],
+                [sn, S.value],
                 [l(r)]
               ])
             ])
@@ -6707,7 +6726,7 @@ const Gi = (o, t) => {
     position: {},
     alignment: {},
     disabled: { type: Boolean },
-    clipping: { type: Boolean, default: !0 },
+    sticky: { type: Boolean, default: !0 },
     nonDismissible: { type: Boolean }
   },
   emits: ["update:open"],
@@ -6718,7 +6737,7 @@ const Gi = (o, t) => {
       key: "open",
       default: !1
     });
-    return (c, d) => (i(), _(xo, B(e, {
+    return (c, d) => (i(), _(ko, B(e, {
       open: l(u),
       "onUpdate:open": d[1] || (d[1] = (p) => Ae(u) ? u.value = p : null),
       class: ["onyx-dialog", l(r)]
@@ -6746,7 +6765,7 @@ const Gi = (o, t) => {
                 })
               ])
             ]),
-            e.nonDismissible ? w("v-if", !0) : (i(), _(Ce, {
+            e.nonDismissible ? w("v-if", !0) : (i(), _(Se, {
               key: 0,
               class: "onyx-alert-dialog__close",
               label: l(s)("dialog.close"),
@@ -6913,7 +6932,7 @@ const Gi = (o, t) => {
      */
     maxLength: a
   };
-}, Ut = Symbol(), tn = Symbol(), pa = Symbol(), ma = Symbol(), jc = ["aria-orientation"], Rt = /* @__PURE__ */ A({
+}, Ut = Symbol(), on = Symbol(), pa = Symbol(), ma = Symbol(), jc = ["aria-orientation"], Rt = /* @__PURE__ */ A({
   __name: "OnyxSeparator",
   props: {
     orientation: { default: "horizontal" }
@@ -6967,7 +6986,7 @@ const Gi = (o, t) => {
       props: n,
       emit: a,
       default: ""
-    }), { rootAttrs: u, restAttrs: c } = xe(), { t: d } = W(), { maxLength: p, maxLengthError: f } = da({ modelValue: r, props: n }), h = m(() => n.error ?? f.value), { vCustomValidity: b, errorMessages: g } = je({ props: n, emit: a, error: h }), C = m(() => Te(n.success)), k = m(() => Te(n.message)), { densityClass: S } = q(n), M = m(() => n.pattern instanceof RegExp ? n.pattern.source : n.pattern), x = oe("inputRef");
+    }), { rootAttrs: u, restAttrs: c } = xe(), { t: d } = W(), { maxLength: p, maxLengthError: f } = da({ modelValue: r, props: n }), h = m(() => n.error ?? f.value), { vCustomValidity: b, errorMessages: g } = We({ props: n, emit: a, error: h }), C = m(() => Te(n.success)), k = m(() => Te(n.message)), { densityClass: S } = q(n), M = m(() => n.pattern instanceof RegExp ? n.pattern.source : n.pattern), x = oe("inputRef");
     t({ input: x });
     const { disabled: T, showError: D } = _e(n), L = se(n), z = wt(D);
     Ie(x, n);
@@ -7037,7 +7056,7 @@ const Gi = (o, t) => {
                 "aria-label": n.hideLabel ? n.label : void 0,
                 title: n.hideLabel ? n.label : void 0
               }, l(c)), null, 16, Yc), [
-                [ln, l(r)],
+                [sn, l(r)],
                 [l(b)]
               ]),
               !n.hideClearIcon && l(r) !== "" ? (i(), v("button", {
@@ -7063,7 +7082,7 @@ const Gi = (o, t) => {
                 class: "onyx-input__separator onyx-input__separator--trailing"
               })) : w("v-if", !0),
               E(P.$slots, "trailing", {}, () => [
-                n.type === "password" ? (i(), _(Ce, {
+                n.type === "password" ? (i(), _(Se, {
                   key: 0,
                   icon: l(j) ? l(Ka) : l(ja),
                   label: l(j) ? l(d)("input.hidePassword") : l(d)("input.showPassword"),
@@ -7099,7 +7118,7 @@ const Gi = (o, t) => {
           E(e.$slots, "default"),
           O(
             Un,
-            Ne(Je(t)),
+            Ne(Ze(t)),
             null,
             16
             /* FULL_PROPS */
@@ -7112,7 +7131,7 @@ const Gi = (o, t) => {
       /* FULL_PROPS */
     ));
   }
-}), Qc = { class: "onyx-component onyx-mobile-nav-button" }, eu = ["aria-label", "disabled"], tu = { class: "onyx-mobile-nav-button__flyout" }, ou = { class: "onyx-mobile-nav-button__menu" }, on = /* @__PURE__ */ A({
+}), Qc = { class: "onyx-component onyx-mobile-nav-button" }, eu = ["aria-label", "disabled"], tu = { class: "onyx-mobile-nav-button__flyout" }, ou = { class: "onyx-mobile-nav-button__menu" }, nn = /* @__PURE__ */ A({
   __name: "OnyxMobileNavButton",
   props: {
     label: {},
@@ -7213,7 +7232,7 @@ const Gi = (o, t) => {
                 })
               ])
             ]),
-            e.nonDismissible ? w("v-if", !0) : (i(), _(Ce, {
+            e.nonDismissible ? w("v-if", !0) : (i(), _(Se, {
               key: 0,
               class: "onyx-alert-dialog__close",
               label: l(s)("dialog.close"),
@@ -7343,7 +7362,7 @@ const Gi = (o, t) => {
               (i(!0), v(
                 K,
                 null,
-                ce(e.options, (h) => (i(), v("label", {
+                ue(e.options, (h) => (i(), v("label", {
                   key: h.value
                 }, [
                   O(
@@ -7358,7 +7377,7 @@ const Gi = (o, t) => {
                         }, null, 8, ["icon"])) : w("v-if", !0),
                         y("div", null, [
                           O(
-                            Ze,
+                            Xe,
                             { is: "div" },
                             {
                               default: $(() => [
@@ -7624,9 +7643,9 @@ const Gi = (o, t) => {
     }), { restAttrs: u, rootAttrs: c } = xe(), d = m(() => !!a.children), { isActive: p } = it(), f = m(() => e.active !== "auto" ? e.active : p.value(e.link)), h = ge(
       Ut,
       m(() => !1)
-    ), b = ge(ma, void 0), g = ge(tn, !0);
-    Fe(tn, !1);
-    const { componentRef: C, isVisible: k } = g ? zn(pa) : { isVisible: ue(!0) };
+    ), b = ge(ma, void 0), g = ge(on, !0);
+    Fe(on, !1);
+    const { componentRef: C, isVisible: k } = g ? zn(pa) : { isVisible: ce(!0) };
     return (S, M) => (i(), v(
       K,
       null,
@@ -7647,7 +7666,7 @@ const Gi = (o, t) => {
                 label: l(s)("back"),
                 mode: "plain",
                 color: "neutral",
-                icon: l(cn),
+                icon: l(un),
                 onClick: M[0] || (M[0] = (x) => r.value = !1)
               }, null, 8, ["label", "icon"]),
               e.link ? (i(), v(
@@ -7694,7 +7713,7 @@ const Gi = (o, t) => {
             ]),
             key: "0"
           } : void 0
-        ]), 1040, ["active"])) : l(g) && d.value && l(k) ? (i(), _(Xe, B({ key: 2 }, l(c), {
+        ]), 1040, ["active"])) : l(g) && d.value && l(k) ? (i(), _(je, B({ key: 2 }, l(c), {
           label: l(s)("navItemOptionsLabel", { label: e.label })
         }), {
           button: $(({ trigger: x }) => [
@@ -7876,7 +7895,7 @@ const Gi = (o, t) => {
         [
           E(u.$slots, "header"),
           E(u.$slots, "options"),
-          a.footer ? (i(), _(ko, {
+          a.footer ? (i(), _(wo, {
             key: 0,
             class: "onyx-user-menu__mobile-footer",
             disabled: ""
@@ -7890,7 +7909,7 @@ const Gi = (o, t) => {
         ],
         64
         /* STABLE_FRAGMENT */
-      )) : (i(), _(Xe, {
+      )) : (i(), _(je, {
         key: 1,
         open: l(s),
         "onUpdate:open": c[0] || (c[0] = (d) => Ae(s) ? s.value = d : null),
@@ -8048,7 +8067,7 @@ const Gi = (o, t) => {
   setup(o, { expose: t, emit: e }) {
     const n = o, a = e, s = ye(), r = oe("navBarRef"), { width: u } = He(r), { t: c } = W(), { currentRoute: d } = it(), {
       elements: { nav: p }
-    } = Cs({ navigationName: ue(() => n.appName) }), f = N(!1), h = N(!1), b = (k, S) => S !== 0 && S < k, g = m(() => typeof n.mobile == "number" ? b(n.mobile, u.value) : typeof n.mobile == "string" ? b(ft[n.mobile], u.value) : n.mobile);
+    } = Cs({ navigationName: ce(() => n.appName) }), f = N(!1), h = N(!1), b = (k, S) => S !== 0 && S < k, g = m(() => typeof n.mobile == "number" ? b(n.mobile, u.value) : typeof n.mobile == "string" ? b(ft[n.mobile], u.value) : n.mobile);
     Fe(Ut, g), Fe(ma, oe("moreListRef"));
     const C = () => {
       f.value = !1, h.value = !1;
@@ -8095,7 +8114,7 @@ const Gi = (o, t) => {
             key: 2,
             class: "onyx-nav-bar__back",
             label: l(c)("navigation.goBack"),
-            icon: l(ho),
+            icon: l(bo),
             color: "neutral",
             onClick: S[0] || (S[0] = (M) => a("navigateBack", M))
           }, null, 8, ["label", "icon"])) : w("v-if", !0),
@@ -8103,7 +8122,7 @@ const Gi = (o, t) => {
             K,
             { key: 3 },
             [
-              g.value ? (i(), _(on, {
+              g.value ? (i(), _(nn, {
                 key: 0,
                 open: f.value,
                 "onUpdate:open": [
@@ -8145,7 +8164,7 @@ const Gi = (o, t) => {
                     default: $(({ attributes: M }) => [
                       y(
                         "div",
-                        Ne(Je(M)),
+                        Ne(Ze(M)),
                         [
                           E(k.$slots, "default")
                         ],
@@ -8154,7 +8173,7 @@ const Gi = (o, t) => {
                       )
                     ]),
                     more: $(({ attributes: M, hiddenElements: x }) => [
-                      O(Xe, B({
+                      O(je, B({
                         label: l(c)("navigation.showMoreNavItemsLabel")
                       }, M), {
                         button: $(({ trigger: T }) => [
@@ -8195,14 +8214,14 @@ const Gi = (o, t) => {
                 s.globalContextArea ? (i(), v("div", Ku, [
                   E(k.$slots, "globalContextArea")
                 ])) : w("v-if", !0),
-                s.contextArea ? (i(), _(on, {
+                s.contextArea ? (i(), _(nn, {
                   key: 1,
                   open: h.value,
                   "onUpdate:open": [
                     S[3] || (S[3] = (M) => h.value = M),
                     S[4] || (S[4] = (M) => f.value = !1)
                   ],
-                  icon: l(pn),
+                  icon: l(vo),
                   label: l(c)("navigation.toggleContextMenu")
                 }, {
                   default: $(() => [
@@ -8230,7 +8249,7 @@ const Gi = (o, t) => {
 }), Ju = (o) => {
   const { locale: t, t: e } = W(), n = m(() => new Intl.RelativeTimeFormat(t.value, l(o.options))), a = N(Date.now());
   let s;
-  $e(() => {
+  Ce(() => {
     s = setInterval(
       () => a.value = Date.now(),
       // run interval only every 10 seconds to not run too many intervals
@@ -8284,7 +8303,7 @@ const Gi = (o, t) => {
   },
   setup(o) {
     const t = o, e = ye(), { densityClass: n } = q(t), a = se(t), { d: s, t: r } = W(), { timeAgo: u } = Ju({
-      time: ue(t, "createdAt"),
+      time: ce(t, "createdAt"),
       options: { numeric: "auto" }
     });
     return (c, d) => (i(), v(
@@ -8298,7 +8317,7 @@ const Gi = (o, t) => {
           (i(), v(
             K,
             null,
-            ce(3, (p) => O(te, {
+            ue(3, (p) => O(te, {
               key: p,
               class: "onyx-notification-card-skeleton__content"
             })),
@@ -8331,7 +8350,7 @@ const Gi = (o, t) => {
                   key: 0,
                   dot: ""
                 })) : w("v-if", !0),
-                e.headerActions ? (i(), _(Xe, {
+                e.headerActions ? (i(), _(je, {
                   key: 1,
                   class: "onyx-notification-card__more-actions",
                   label: l(r)("notificationCard.moreActions"),
@@ -8339,9 +8358,9 @@ const Gi = (o, t) => {
                   alignment: "right"
                 }, {
                   button: $(({ trigger: p }) => [
-                    O(Ce, B(p, {
+                    O(Se, B(p, {
                       label: l(r)("notificationCard.toggleActions"),
-                      icon: l(pn)
+                      icon: l(vo)
                     }), null, 16, ["label", "icon"])
                   ]),
                   options: $(() => [
@@ -8573,7 +8592,7 @@ const Gi = (o, t) => {
           (i(!0), v(
             K,
             null,
-            ce(u.value, (p) => (i(), v(
+            ue(u.value, (p) => (i(), v(
               K,
               {
                 key: p.value
@@ -8607,7 +8626,7 @@ const Gi = (o, t) => {
       /* CLASS */
     ));
   }
-}), fd = ["required", "name", "value", "checked", "disabled", "autofocus"], nn = /* @__PURE__ */ A({
+}), fd = ["required", "name", "value", "checked", "disabled", "autofocus"], an = /* @__PURE__ */ A({
   inheritAttrs: !1,
   __name: "OnyxRadioButton",
   props: {
@@ -8627,7 +8646,7 @@ const Gi = (o, t) => {
   },
   emits: ["validityChange"],
   setup(o, { expose: t, emit: e }) {
-    const n = o, a = e, { rootAttrs: s, restAttrs: r } = xe(), { vCustomValidity: u, errorMessages: c } = je({ props: n, emit: a }), { densityClass: d } = q(n), { disabled: p } = _e(n), f = se(n), h = oe("inputRef");
+    const n = o, a = e, { rootAttrs: s, restAttrs: r } = xe(), { vCustomValidity: u, errorMessages: c } = We({ props: n, emit: a }), { densityClass: d } = q(n), { disabled: p } = _e(n), f = se(n), h = oe("inputRef");
     return t({ input: h }), Ie(h, n), (b, g) => l(f) ? (i(), v(
       "div",
       B({
@@ -8640,7 +8659,7 @@ const Gi = (o, t) => {
       ],
       16
       /* FULL_PROPS */
-    )) : (i(), _(wo, B({
+    )) : (i(), _(So, B({
       key: 1,
       disabled: l(p),
       "error-messages": l(c)
@@ -8756,7 +8775,7 @@ const Gi = (o, t) => {
           l(d) ? typeof l(d) == "number" ? (i(!0), v(
             K,
             { key: 1 },
-            ce(l(d), (k) => (i(), _(nn, {
+            ue(l(d), (k) => (i(), _(an, {
               id: `skeleton-${k}`,
               key: k,
               value: `skeleton-${k}`,
@@ -8769,7 +8788,7 @@ const Gi = (o, t) => {
           )) : w("v-if", !0) : (i(!0), v(
             K,
             { key: 0 },
-            ce(n.options, (k, S) => (i(), _(nn, B({
+            ue(n.options, (k, S) => (i(), _(an, B({
               key: k.value.toString()
             }, { ref_for: !0 }, k, {
               ref_for: !0,
@@ -8818,7 +8837,7 @@ const Gi = (o, t) => {
         class: ["onyx-component", "onyx-segmented-control-element", l(e)]
       }),
       [
-        O(Ze, null, {
+        O(Xe, null, {
           default: $(() => [
             y("input", B(l(r), {
               id: t.value.toString(),
@@ -8889,7 +8908,7 @@ const Gi = (o, t) => {
         (i(!0), v(
           K,
           null,
-          ce(o.options, (p) => (i(), _(kd, B({
+          ue(o.options, (p) => (i(), _(kd, B({
             key: p.value.toString()
           }, { ref_for: !0 }, p, {
             name: e.name,
@@ -9120,21 +9139,21 @@ const Gi = (o, t) => {
   },
   emits: ["validityChange", "update:modelValue"],
   setup(o, { expose: t, emit: e }) {
-    const n = o, a = e, { t: s, locale: r } = W(), u = oe("inputRef"), { disabled: c, showError: d } = _e(n), p = se(n), f = wt(d), { densityClass: h } = q(n), { vCustomValidity: b, errorMessages: g } = je({ props: n, emit: a }), C = m(() => Te(n.success)), k = m(() => Te(n.message)), { rootAttrs: S, restAttrs: M } = xe(), x = N(!1), T = re({
+    const n = o, a = e, { t: s, locale: r } = W(), u = oe("inputRef"), { disabled: c, showError: d } = _e(n), p = se(n), f = wt(d), { densityClass: h } = q(n), { vCustomValidity: b, errorMessages: g } = We({ props: n, emit: a }), C = m(() => Te(n.success)), k = m(() => Te(n.message)), { rootAttrs: S, restAttrs: M } = xe(), x = N(!1), T = re({
       props: n,
       emit: a,
       key: "modelValue"
-    }), D = N(), L = m(() => j.value(T.value)), z = m(() => (G) => n.precision !== void 0 && G != null ? Wo(G, n.precision) : G?.toString() ?? ""), j = m(() => (G) => G == null || Number.isNaN(G) ? "" : n.formatNumber ? typeof n.formatNumber == "boolean" ? n.precision ? G.toLocaleString(r.value, {
+    }), D = N(), L = m(() => j.value(T.value)), z = m(() => (G) => n.precision !== void 0 && G != null ? Yo(G, n.precision) : G?.toString() ?? ""), j = m(() => (G) => G == null || Number.isNaN(G) ? "" : n.formatNumber ? typeof n.formatNumber == "boolean" ? n.precision ? G.toLocaleString(r.value, {
       minimumFractionDigits: n.precision,
       maximumFractionDigits: n.precision
-    }) : G.toLocaleString(r.value) : n.formatNumber(G) : n.precision ? Wo(G, n.precision) : String(G));
+    }) : G.toLocaleString(r.value) : n.formatNumber(G) : n.precision ? Yo(G, n.precision) : String(G));
     De(() => {
       D.value = z.value(T.value);
     });
     const Q = (G) => {
       x.value = !0;
       const V = T.value || 0, ae = (G === "stepUp" ? 1 : -1) * n.stepSize, Y = parseFloat(z.value(V + ae));
-      T.value = Oo(Y, n.min, n.max);
+      T.value = Mo(Y, n.min, n.max);
     }, P = () => {
       if (x.value = !0, D.value == null) {
         T.value = void 0;
@@ -9208,8 +9227,8 @@ const Gi = (o, t) => {
                 onChange: P,
                 onFocusin: V[2] || (V[2] = (Y) => Y.target?.select()),
                 onKeydown: [
-                  V[3] || (V[3] = Io(Re((Y) => Q("stepUp"), ["prevent"]), ["up"])),
-                  V[4] || (V[4] = Io(Re((Y) => Q("stepDown"), ["prevent"]), ["down"]))
+                  V[3] || (V[3] = Ro(Re((Y) => Q("stepUp"), ["prevent"]), ["up"])),
+                  V[4] || (V[4] = Ro(Re((Y) => Q("stepDown"), ["prevent"]), ["down"]))
                 ]
               }), null, 16, Rd)), [
                 [mo, D.value],
@@ -9263,7 +9282,7 @@ const Gi = (o, t) => {
   },
   emits: ["update:modelValue", "validityChange"],
   setup(o, { expose: t, emit: e }) {
-    const n = o, a = e, { rootAttrs: s, restAttrs: r } = xe(), { densityClass: u } = q(n), { disabled: c, showError: d, requiredMarker: p } = _e(n), { requiredMarkerClass: f, requiredTypeClass: h } = Ft(n, p), { vCustomValidity: b, errorMessages: g } = je({ props: n, emit: a }), C = m(
+    const n = o, a = e, { rootAttrs: s, restAttrs: r } = xe(), { densityClass: u } = q(n), { disabled: c, showError: d, requiredMarker: p } = _e(n), { requiredMarkerClass: f, requiredTypeClass: h } = Ft(n, p), { vCustomValidity: b, errorMessages: g } = We({ props: n, emit: a }), C = m(
       () => d.value !== !1 ? g.value : void 0
     ), k = m(() => n.hideLabel && n.label || void 0), S = se(n), M = re({
       props: n,
@@ -9288,7 +9307,7 @@ const Gi = (o, t) => {
       ],
       16
       /* FULL_PROPS */
-    )) : (i(), _(wo, B({
+    )) : (i(), _(So, B({
       key: 1,
       disabled: l(c),
       "error-messages": C.value
@@ -9309,7 +9328,7 @@ const Gi = (o, t) => {
             required: n.required,
             autofocus: n.autofocus
           }, l(r)), null, 16, Fd), [
-            [an, l(M)],
+            [ln, l(M)],
             [l(b)]
           ]),
           y("span", Pd, [
@@ -9446,14 +9465,14 @@ const Gi = (o, t) => {
       emit: n,
       key: "modelValue"
     }), r = Es({
-      label: ue(e, "label"),
-      selectedTab: ue(() => s.value),
+      label: ce(e, "label"),
+      selectedTab: ce(() => s.value),
       onSelect: (c) => s.value = c
     }), u = oe("panelRef");
     return Nt(e), Fe(ha, {
       headless: r,
       panel: u,
-      size: ue(e, "size")
+      size: ce(e, "size")
     }), (c, d) => (i(), v(
       "div",
       {
@@ -9539,7 +9558,7 @@ const Gi = (o, t) => {
   },
   emits: ["validityChange"],
   setup(o, { emit: t }) {
-    const e = o, n = t, a = ye(), { densityClass: s } = q(e), { formatFileSize: r } = ba(), u = se(e), c = m(() => e.status?.color === "danger" ? e.status.text : void 0), { vCustomValidity: d } = je({ props: {}, emit: n, error: c }), p = m(() => {
+    const e = o, n = t, a = ye(), { densityClass: s } = q(e), { formatFileSize: r } = ba(), u = se(e), c = m(() => e.status?.color === "danger" ? e.status.text : void 0), { vCustomValidity: d } = We({ props: {}, emit: n, error: c }), p = m(() => {
       if (e.link)
         return tt(e.link);
     });
@@ -9641,7 +9660,7 @@ const Gi = (o, t) => {
                 "onyx-file-card__progress-bar",
                 `onyx-file-card__progress-bar--${e.status.color}`
               ]),
-              style: Le({ width: l(Oo)(e.status.progress, 0, 100) + "%" })
+              style: Le({ width: l(Mo)(e.status.progress, 0, 100) + "%" })
             },
             null,
             6
@@ -9996,7 +10015,7 @@ const _m = /* @__PURE__ */ Vt(rp, [["render", cp]]), up = /* @__PURE__ */ A({
           disabled: l(s),
           name: e.name
         }, l(c), { onChange: x }), null, 16, bp),
-        e.listType === "button" && b.value.length ? (i(), _(Ce, {
+        e.listType === "button" && b.value.length ? (i(), _(Se, {
           key: 0,
           class: "onyx-file-upload__list-button",
           label: g.value ? l(r)("fileUpload.revealFilesButton") : l(r)("fileUpload.hideFilesButton"),
@@ -10015,7 +10034,7 @@ const _m = /* @__PURE__ */ Vt(rp, [["render", cp]]), up = /* @__PURE__ */ A({
             (i(!0), v(
               K,
               null,
-              ce(k.value, (ee) => E(P.$slots, "default", {
+              ue(k.value, (ee) => E(P.$slots, "default", {
                 key: ee.props.filename,
                 file: ee.file,
                 props: ee.props
@@ -10115,7 +10134,7 @@ const _m = /* @__PURE__ */ Vt(rp, [["render", cp]]), up = /* @__PURE__ */ A({
       emit: a,
       key: "modelValue",
       default: ""
-    }), { rootAttrs: r, restAttrs: u } = xe(), { maxLength: c, maxLengthError: d } = da({ props: n, modelValue: s }), p = m(() => n.error ?? d.value), { vCustomValidity: f, errorMessages: h } = je({ props: n, emit: a, error: p }), { densityClass: b } = q(n), g = m(() => Te(n.success)), C = m(() => Te(n.message)), k = m(() => {
+    }), { rootAttrs: r, restAttrs: u } = xe(), { maxLength: c, maxLengthError: d } = da({ props: n, modelValue: s }), p = m(() => n.error ?? d.value), { vCustomValidity: f, errorMessages: h } = We({ props: n, emit: a, error: p }), { densityClass: b } = q(n), g = m(() => Te(n.success)), C = m(() => Te(n.message)), k = m(() => {
       if (!n.autosize) return;
       const z = n.autosize.min ? Math.max(n.autosize.min, 2) : void 0, j = n.autosize.max;
       return [z ? `--min-autosize-rows: ${z}` : "", `--max-autosize-rows: ${j ?? "unset"}`];
@@ -10400,7 +10419,7 @@ const _m = /* @__PURE__ */ Vt(rp, [["render", cp]]), up = /* @__PURE__ */ A({
               color: "success"
             })
           ]),
-          O(jo, {
+          O(Wo, {
             modelValue: s.value.checkboxGroup,
             "onUpdate:modelValue": c[4] || (c[4] = (d) => s.value.checkboxGroup = d),
             class: "grid--checkboxes",
@@ -10415,7 +10434,7 @@ const _m = /* @__PURE__ */ Vt(rp, [["render", cp]]), up = /* @__PURE__ */ A({
                 (i(), v(
                   K,
                   null,
-                  ce(r, (d) => O(Tt, {
+                  ue(r, (d) => O(Tt, {
                     key: d.name,
                     "full-name": d.name,
                     src: d.avatar,
@@ -10477,7 +10496,7 @@ const _m = /* @__PURE__ */ Vt(rp, [["render", cp]]), up = /* @__PURE__ */ A({
               -1
               /* CACHED */
             )),
-            O(jo, {
+            O(Wo, {
               label: "Checkbox group (skeleton)",
               "hide-label": "",
               orientation: "horizontal",
@@ -10571,7 +10590,7 @@ const _m = /* @__PURE__ */ Vt(rp, [["render", cp]]), up = /* @__PURE__ */ A({
     ]));
   }
 }), wm = /* @__PURE__ */ Vt(Op, [["__scopeId", "data-v-c46b11f7"]]), Sm = (o) => {
-  $e(() => {
+  Ce(() => {
     X([o], () => {
       const t = document.documentElement, e = "onyx-transition-active", n = () => {
         t.classList.remove(e);
@@ -10614,7 +10633,7 @@ export {
   cm as LINK_TARGETS,
   Ut as MOBILE_NAV_BAR_INJECTION_KEY,
   pm as MULTISELECT_TEXT_MODE,
-  tn as NAV_BAR_IS_TOP_LEVEL_INJECTION_KEY,
+  on as NAV_BAR_IS_TOP_LEVEL_INJECTION_KEY,
   pa as NAV_BAR_MORE_LIST_INJECTION_KEY,
   ma as NAV_BAR_MORE_LIST_TARGET_INJECTION_KEY,
   Dn as NOTIFICATIONS_PROVIDER_INJECTION_KEY,
@@ -10629,14 +10648,14 @@ export {
   Nr as OnyxAvatarStack,
   zt as OnyxBadge,
   $n as OnyxBasicDialog,
-  xo as OnyxBasicPopover,
+  ko as OnyxBasicPopover,
   Pr as OnyxBottomBar,
   zp as OnyxBreadcrumb,
-  Go as OnyxBreadcrumbItem,
+  qo as OnyxBreadcrumbItem,
   st as OnyxButton,
   Gn as OnyxCard,
   yt as OnyxCheckbox,
-  jo as OnyxCheckboxGroup,
+  Wo as OnyxCheckboxGroup,
   gu as OnyxColorSchemeDialog,
   xu as OnyxColorSchemeMenuItem,
   wm as OnyxComponentShowcase,
@@ -10647,7 +10666,7 @@ export {
   Wn as OnyxEmpty,
   _m as OnyxErrorSVG,
   Un as OnyxExternalLinkIcon,
-  Uo as OnyxFAB,
+  Ho as OnyxFAB,
   lo as OnyxFABButton,
   Zs as OnyxFABItem,
   lp as OnyxFileCard,
@@ -10655,7 +10674,7 @@ export {
   xm as OnyxFileUpload,
   up as OnyxFileUploadSVG,
   km as OnyxFilterTag,
-  Xe as OnyxFlyoutMenu,
+  je as OnyxFlyoutMenu,
   Jp as OnyxForm,
   St as OnyxFormElement,
   Qs as OnyxGlobalFAB,
@@ -10668,11 +10687,11 @@ export {
   Zc as OnyxInput,
   om as OnyxLanguageMenuItem,
   Xc as OnyxLink,
-  ko as OnyxListItem,
+  wo as OnyxListItem,
   ze as OnyxLoadingIndicator,
   Ge as OnyxMenuItem,
   Jn as OnyxMiniSearch,
-  on as OnyxMobileNavButton,
+  nn as OnyxMobileNavButton,
   ya as OnyxModal,
   Hn as OnyxMoreList,
   du as OnyxNavAppArea,
@@ -10687,7 +10706,7 @@ export {
   ia as OnyxPagination,
   md as OnyxProgressItem,
   im as OnyxProgressSteps,
-  nn as OnyxRadioButton,
+  an as OnyxRadioButton,
   bd as OnyxRadioGroup,
   ct as OnyxRouterLink,
   um as OnyxSegmentedControl,
@@ -10695,14 +10714,14 @@ export {
   ra as OnyxSelect,
   fa as OnyxSelectDialog,
   nc as OnyxSelectInput,
-  Yo as OnyxSelectOption,
+  Jo as OnyxSelectOption,
   Rt as OnyxSeparator,
   ym as OnyxSidebar,
   mm as OnyxSidebarItem,
   te as OnyxSkeleton,
   Nd as OnyxStepper,
   Gd as OnyxSwitch,
-  Ce as OnyxSystemButton,
+  Se as OnyxSystemButton,
   hm as OnyxTab,
   Yn as OnyxTable,
   bm as OnyxTabs,
@@ -10714,7 +10733,7 @@ export {
   ht as OnyxTooltip,
   Hp as OnyxUnstableCalendar,
   Fu as OnyxUserMenu,
-  Ze as OnyxVisuallyHidden,
+  Xe as OnyxVisuallyHidden,
   rm as PROGRESS_ITEM_STATUS,
   Bn as ROUTER_INJECTION_KEY,
   dm as SELECT_ALIGNMENTS,