sit-onyx 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as k, useSlots as F, openBlock as s, createElementBlock as p, normalizeClass as g, renderSlot as b, createCommentVNode as _, createElementVNode as f, computed as v, ref as E, watch as G, createTextVNode as U, toDisplayString as M, unref as r, Fragment as z, createBlock as x, inject as ie, watchEffect as J, createVNode as S, withDirectives as K, vModelCheckbox as tt, withCtx as $, mergeProps as B, renderList as X, withModifiers as De, resolveDynamicComponent as ce, reactive as Bt, onBeforeMount as Pe, onBeforeUnmount as ye, normalizeProps as te, guardReactiveProps as ae, vModelDynamic as Ot, useAttrs as Et, vModelText as at, Teleport as Tt, toRef as me, vShow as ot, mergeModels as It, useModel as Lt, createSlots as he, provide as At, nextTick as Ht, normalizeStyle as Ee } from "vue";
+import { defineComponent as k, useSlots as F, openBlock as s, createElementBlock as d, normalizeClass as g, renderSlot as b, createCommentVNode as _, createElementVNode as v, computed as f, ref as E, watch as G, createTextVNode as U, toDisplayString as S, unref as i, Fragment as z, createBlock as x, inject as ce, watchEffect as J, createVNode as M, withDirectives as j, vModelCheckbox as ot, withCtx as $, mergeProps as B, renderList as X, withModifiers as Pe, resolveDynamicComponent as ue, reactive as Et, onBeforeMount as Ne, onBeforeUnmount as ye, normalizeProps as te, guardReactiveProps as ae, vModelDynamic as Tt, useAttrs as It, vModelText as lt, Teleport as Lt, mergeModels as he, useModel as fe, vShow as nt, createSlots as ve, toRef as Te, provide as At, nextTick as Ht, normalizeStyle as Ie } from "vue";
 const Dt = {
   key: 0,
   class: "onyx-app__nav"
@@ -8,26 +8,26 @@ const Dt = {
 }, zt = {
   key: 2,
   class: "onyx-app__app-overlay"
-}, Sn = /* @__PURE__ */ k({
+}, Mn = /* @__PURE__ */ k({
   __name: "OnyxAppLayout",
   props: {
     navBarAlignment: { default: "top" }
   },
   setup(t) {
     const a = t, e = F();
-    return (o, n) => (s(), p("div", {
+    return (o, n) => (s(), d("div", {
       class: g(["onyx-app", { "onyx-app--horizontal": a.navBarAlignment === "left" }])
     }, [
-      e.navBar ? (s(), p("div", Dt, [
+      e.navBar ? (s(), d("div", Dt, [
         b(o.$slots, "navBar")
       ])) : _("", !0),
-      f("div", Pt, [
+      v("div", Pt, [
         b(o.$slots, "default")
       ]),
-      e.pageOverlay ? (s(), p("div", Nt, [
+      e.pageOverlay ? (s(), d("div", Nt, [
         b(o.$slots, "pageOverlay")
       ])) : _("", !0),
-      e.appOverlay ? (s(), p("div", zt, [
+      e.appOverlay ? (s(), d("div", zt, [
         b(o.$slots, "appOverlay")
       ])) : _("", !0)
     ], 2));
@@ -35,7 +35,7 @@ const Dt = {
 }), Rt = ["title"], Ut = ["src", "alt"], Ft = {
   key: 1,
   class: "onyx-avatar__initials"
-}, je = /* @__PURE__ */ k({
+}, Ye = /* @__PURE__ */ k({
   __name: "OnyxAvatar",
   props: {
     size: { default: "48px" },
@@ -43,39 +43,39 @@ const Dt = {
     src: {}
   },
   setup(t) {
-    const a = t, e = F(), o = v(() => {
+    const a = t, e = F(), o = f(() => {
       const l = a.label.split(" ");
       return (l.length > 1 ? `${l[0].charAt(0)}${l[1].charAt(0)}` : l[0].substring(0, 2)).toUpperCase();
     }), n = E(!1);
     return G(
       () => a.src,
       () => n.value = !1
-    ), (l, i) => (s(), p("figure", {
+    ), (l, r) => (s(), d("figure", {
       class: g(["onyx-avatar", [`onyx-avatar--${a.size}`, e.default ? "onyx-avatar--custom" : ""]]),
       title: a.label
     }, [
-      a.src && !n.value ? (s(), p("img", {
+      a.src && !n.value ? (s(), d("img", {
         key: 0,
         class: "onyx-avatar__svg",
         src: a.src,
         alt: a.label,
-        onError: i[0] || (i[0] = (u) => n.value = !0)
-      }, null, 40, Ut)) : (s(), p("div", Ft, [
+        onError: r[0] || (r[0] = (u) => n.value = !0)
+      }, null, 40, Ut)) : (s(), d("div", Ft, [
         b(l.$slots, "default", {}, () => [
-          U(M(o.value), 1)
+          U(S(o.value), 1)
         ])
       ]))
     ], 10, Rt));
   }
-}), qt = { class: "onyx-avatar-stack" }, Vn = /* @__PURE__ */ k({
+}), qt = { class: "onyx-avatar-stack" }, Sn = /* @__PURE__ */ k({
   __name: "OnyxAvatarStack",
   setup(t) {
-    return (a, e) => (s(), p("div", qt, [
+    return (a, e) => (s(), d("div", qt, [
       b(a.$slots, "default")
     ]));
   }
-}), Bn = ["compact", "default", "cozy"], D = (t) => ({
-  densityClass: v(() => ({ [`onyx-density-${t.density}`]: t.density }))
+}), Vn = ["compact", "default", "cozy"], D = (t) => ({
+  densityClass: f(() => ({ [`onyx-density-${t.density}`]: t.density }))
 }), Zt = ["innerHTML"], A = /* @__PURE__ */ k({
   __name: "OnyxIcon",
   props: {
@@ -85,7 +85,7 @@ const Dt = {
   },
   setup(t) {
     const a = t;
-    return (e, o) => (s(), p("figure", {
+    return (e, o) => (s(), d("figure", {
       class: g({
         "onyx-icon": !0,
         [`onyx-icon--${a.size}`]: a.size,
@@ -105,16 +105,16 @@ const Dt = {
   },
   setup(t) {
     const a = t, { densityClass: e } = D(a);
-    return (o, n) => (s(), p("div", {
+    return (o, n) => (s(), d("div", {
       class: g(["onyx-badge", [
         "onyx-truncation-ellipsis",
         "onyx-text",
         `onyx-badge--${a.color}`,
         a.dot ? "onyx-badge--dot" : "",
-        r(e)
+        i(e)
       ]])
     }, [
-      a.dot ? _("", !0) : (s(), p(z, { key: 0 }, [
+      a.dot ? _("", !0) : (s(), d(z, { key: 0 }, [
         a.icon ? (s(), x(A, {
           key: 0,
           class: "onyx-badge__icon",
@@ -124,7 +124,7 @@ const Dt = {
       ], 64))
     ], 2));
   }
-}), Ne = (t, a) => {
+}), ze = (t, a) => {
   const e = t.__vccOpts || t;
   for (const [o, n] of a)
     e[o] = n;
@@ -132,7 +132,7 @@ const Dt = {
 }, Kt = {}, jt = {
   class: "onyx-circle-spinner",
   viewBox: "0 0 50 50"
-}, Yt = /* @__PURE__ */ f("circle", {
+}, Yt = /* @__PURE__ */ v("circle", {
   class: "onyx-circle-spinner__circle",
   cx: "50%",
   cy: "50%",
@@ -141,15 +141,15 @@ const Dt = {
   Yt
 ];
 function Xt(t, a) {
-  return s(), p("svg", jt, Wt);
+  return s(), d("svg", jt, Wt);
 }
-const Jt = /* @__PURE__ */ Ne(Kt, [["render", Xt]]), Qt = {}, ea = { class: "onyx-loading-dots" }, ta = /* @__PURE__ */ f("span", { class: "onyx-loading-dots__center" }, null, -1), aa = [
+const Jt = /* @__PURE__ */ ze(Kt, [["render", Xt]]), Qt = {}, ea = { class: "onyx-loading-dots" }, ta = /* @__PURE__ */ v("span", { class: "onyx-loading-dots__center" }, null, -1), aa = [
   ta
 ];
 function oa(t, a) {
-  return s(), p("div", ea, aa);
+  return s(), d("div", ea, aa);
 }
-const la = /* @__PURE__ */ Ne(Qt, [["render", oa]]), Q = /* @__PURE__ */ k({
+const la = /* @__PURE__ */ ze(Qt, [["render", oa]]), Q = /* @__PURE__ */ k({
   __name: "OnyxLoadingIndicator",
   props: {
     type: { default: "dots" }
@@ -163,9 +163,9 @@ const la = /* @__PURE__ */ Ne(Qt, [["render", oa]]), Q = /* @__PURE__ */ k({
   class: "onyx-skeleton"
 };
 function ra(t, a) {
-  return s(), p("figure", sa);
+  return s(), d("figure", sa);
 }
-const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "aria-label", "autofocus"], ca = { class: "onyx-button__label onyx-truncation-ellipsis" }, Te = /* @__PURE__ */ k({
+const R = /* @__PURE__ */ ze(na, [["render", ra]]), ia = ["disabled", "type", "aria-label", "autofocus"], ca = { class: "onyx-button__label onyx-truncation-ellipsis" }, Le = /* @__PURE__ */ k({
   __name: "OnyxButton",
   props: {
     density: {},
@@ -182,23 +182,23 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   emits: ["click"],
   setup(t, { emit: a }) {
     const e = t, { densityClass: o } = D(e), n = a;
-    return (l, i) => e.skeleton ? (s(), x(R, {
+    return (l, r) => e.skeleton ? (s(), x(R, {
       key: 0,
-      class: g(["onyx-button-skeleton", r(o)])
-    }, null, 8, ["class"])) : (s(), p("button", {
+      class: g(["onyx-button-skeleton", i(o)])
+    }, null, 8, ["class"])) : (s(), d("button", {
       key: 1,
       class: g([
         "onyx-button",
         `onyx-button--${e.color}`,
         `onyx-button--${e.mode}`,
         { "onyx-button--loading": e.loading },
-        r(o)
+        i(o)
       ]),
       disabled: e.disabled || e.loading,
       type: e.type,
       "aria-label": e.loading ? e.label : void 0,
       autofocus: e.autofocus,
-      onClick: i[0] || (i[0] = (u) => n("click"))
+      onClick: r[0] || (r[0] = (u) => n("click"))
     }, [
       e.icon && !e.loading ? (s(), x(A, {
         key: 0,
@@ -208,17 +208,17 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
         key: 1,
         class: "onyx-button__loading"
       })) : _("", !0),
-      f("span", ca, M(e.label), 1)
+      v("span", ca, S(e.label), 1)
     ], 10, ia));
   }
-}), On = ["button", "submit", "reset"], En = ["primary", "neutral", "danger"], Tn = ["default", "outline", "plain"], ve = (t) => ({
+}), Bn = ["button", "submit", "reset"], On = ["primary", "neutral", "danger"], En = ["default", "outline", "plain"], _e = (t) => ({
   /**
    * Class that configures which type of required marker is used.
    */
-  requiredTypeClass: v(() => ({
+  requiredTypeClass: f(() => ({
     [`onyx-use-${t.requiredMarker}`]: t.requiredMarker
   })),
-  requiredMarkerClass: v(() => ({
+  requiredMarkerClass: f(() => ({
     "onyx-required-marker": t.required,
     "onyx-optional-marker": !t.required
   }))
@@ -277,13 +277,13 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       fullError: '"{value}" must a valid URL.'
     }
   }
-}, va = {
+}, fa = {
   toggleDropDown: "Toggle selection popover",
   empty: "No data available",
   noMatch: "No item matches your search",
   searchInputLabel: "Filter the list items",
   clearSearch: "Clear search filter"
-}, fa = {
+}, va = {
   selectAll: "Select all",
   currentSelection: "{n} selected"
 }, _a = {
@@ -317,34 +317,34 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     label: "Dark",
     description: "This color mode is optimized for darker environments."
   }
-}, Ie = {
+}, Ae = {
   optional: ua,
   cancel: da,
   apply: pa,
   back: ma,
   close: ya,
   validations: ha,
-  select: va,
-  selections: fa,
+  select: fa,
+  selections: va,
   table: _a,
   link: xa,
   navItemOptionsLabel: ba,
   navigation: ga,
   showTooltip: ka,
   colorScheme: wa
-}, lt = Symbol(), nt = (t = {}) => {
-  const a = v(() => r(t == null ? void 0 : t.locale) ?? "en-US");
+}, st = Symbol(), rt = (t = {}) => {
+  const a = f(() => i(t == null ? void 0 : t.locale) ?? "en-US");
   if (t.t)
     return { t: t.t, locale: a };
-  const e = v(() => t != null && t.messages && a.value in t.messages ? t.messages[a.value] : Ie), o = v(() => (n, l = {}) => {
-    let i = Ye(n, e.value) ?? Ye(n, Ie) ?? "";
-    return i = $a(i, l.n), Ma(i, l);
+  const e = f(() => t != null && t.messages && a.value in t.messages ? t.messages[a.value] : Ae), o = f(() => (n, l = {}) => {
+    let r = We(n, e.value) ?? We(n, Ae) ?? "";
+    return r = $a(r, l.n), Ma(r, l);
   });
   return { locale: a, t: o };
 }, Ca = (t, a) => {
-  const e = nt(a);
-  return t.provide(lt, e), e;
-}, P = () => ie(lt, () => nt(), !0), Ye = (t, a) => {
+  const e = rt(a);
+  return t.provide(st, e), e;
+}, P = () => ce(st, () => rt(), !0), We = (t, a) => {
   const e = t.split(".").reduce((o, n) => !o || typeof o == "string" ? o : o[n], a);
   return e && typeof e == "string" ? e : void 0;
 }, $a = (t, a) => {
@@ -361,20 +361,20 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     return e[n] = e[n] || [], e[n].push(o), e;
   },
   {}
-), st = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([t, a]) => a.enumerable).map(([t]) => t), Ba = (t) => st().reduce(
+), it = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([t, a]) => a.enumerable).map(([t]) => t), Ba = (t) => it().reduce(
   (a, e) => (a[e] = t[e], a),
   {}
 ), Oa = (t) => {
   if (t.valueMissing) return "valueMissing";
-  const a = st().filter((e) => e !== "valid").sort();
+  const a = it().filter((e) => e !== "valid").sort();
   for (const e of a)
     if (e in t && t[e]) return e;
 }, Ea = Object.keys(
-  Ie.validations.typeMismatch
+  Ae.validations.typeMismatch
 ), Ta = (t) => {
   if (t)
     return typeof t == "string" ? { shortMessage: t, longMessage: t } : t;
-}, rt = (t) => {
+}, ct = (t) => {
   if (!t) return;
   if (typeof t == "string")
     return t;
@@ -388,11 +388,11 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     { once: !0 }
   );
   const n = {
-    mounted: (i) => {
-      J(() => i.setCustomValidity(rt(t.props.customError) ?? "")), G(
+    mounted: (r) => {
+      J(() => r.setCustomValidity(ct(t.props.customError) ?? "")), G(
         [() => t.props.customError, () => t.props.modelValue],
         () => {
-          const u = Ba(i.validity);
+          const u = Ba(r.validity);
           !e.value && u.valid || e.value && Sa(u, e.value) || (e.value = u);
         },
         { immediate: !0 }
@@ -404,31 +404,31 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
         { immediate: !0 }
       );
     }
-  }, l = v(() => {
-    var m, c, y;
+  }, l = f(() => {
+    var p, m, y;
     if (!e.value || e.value.valid) return;
-    const i = Oa(e.value), u = Ta(t.props.customError);
-    if (u || i === "customError")
+    const r = Oa(e.value), u = Ta(t.props.customError);
+    if (u || r === "customError")
       return u || void 0;
-    if (!i) return;
-    if (i === "typeMismatch") {
+    if (!r) return;
+    if (r === "typeMismatch") {
       const h = Ea.includes(t.props.type) ? t.props.type : "generic";
       return {
         longMessage: a.value(`validations.typeMismatch.${h}.fullError`, {
-          value: (m = t.props.modelValue) == null ? void 0 : m.toString()
+          value: (p = t.props.modelValue) == null ? void 0 : p.toString()
         }),
         shortMessage: a.value(`validations.typeMismatch.${h}.preview`)
       };
     }
-    const d = {
-      value: (c = t.props.modelValue) == null ? void 0 : c.toString(),
+    const c = {
+      value: (m = t.props.modelValue) == null ? void 0 : m.toString(),
       n: ((y = t.props.modelValue) == null ? void 0 : y.toString().length) ?? 0,
       minLength: t.props.minlength,
       maxLength: t.props.maxlength
     };
     return {
-      longMessage: a.value(`validations.${i}.fullError`, d),
-      shortMessage: a.value(`validations.${i}.preview`)
+      longMessage: a.value(`validations.${r}.fullError`, c),
+      shortMessage: a.value(`validations.${r}.preview`)
     };
   });
   return {
@@ -438,7 +438,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     vCustomValidity: n,
     errorMessages: l
   };
-}, Ia = { class: "onyx-checkbox__container" }, La = ["aria-label", "title", "indeterminate", "disabled", "required", "value", "autofocus"], Se = /* @__PURE__ */ k({
+}, Ia = { class: "onyx-checkbox__container" }, La = ["aria-label", "title", "indeterminate", "disabled", "required", "value", "autofocus"], Ve = /* @__PURE__ */ k({
   __name: "OnyxCheckbox",
   props: {
     density: {},
@@ -458,31 +458,31 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, o = a, n = v({
+    const e = t, o = a, n = f({
       get: () => e.modelValue,
-      set: (m) => o("update:modelValue", m)
-    }), { requiredMarkerClass: l, requiredTypeClass: i } = ve(e), { densityClass: u } = D(e), { vCustomValidity: d } = le({ props: e, emit: o });
-    return (m, c) => e.skeleton ? (s(), p("div", {
+      set: (p) => o("update:modelValue", p)
+    }), { requiredMarkerClass: l, requiredTypeClass: r } = _e(e), { densityClass: u } = D(e), { vCustomValidity: c } = le({ props: e, emit: o });
+    return (p, m) => e.skeleton ? (s(), d("div", {
       key: 0,
-      class: g(["onyx-checkbox-skeleton", r(u)])
+      class: g(["onyx-checkbox-skeleton", i(u)])
     }, [
-      S(R, { class: "onyx-checkbox-skeleton__input" }),
+      M(R, { class: "onyx-checkbox-skeleton__input" }),
       e.hideLabel ? _("", !0) : (s(), x(R, {
         key: 0,
         class: "onyx-checkbox-skeleton__label"
       }))
-    ], 2)) : (s(), p("label", {
+    ], 2)) : (s(), d("label", {
       key: 1,
-      class: g(["onyx-checkbox", [r(i), r(u)]])
+      class: g(["onyx-checkbox", [i(r), i(u)]])
     }, [
-      f("div", Ia, [
-        e.loading ? (s(), x(r(Q), {
+      v("div", Ia, [
+        e.loading ? (s(), x(i(Q), {
           key: 0,
           class: "onyx-checkbox__loading",
           type: "circle"
-        })) : K((s(), p("input", {
+        })) : j((s(), d("input", {
           key: 1,
-          "onUpdate:modelValue": c[0] || (c[0] = (y) => n.value = y),
+          "onUpdate:modelValue": m[0] || (m[0] = (y) => n.value = y),
           "aria-label": e.hideLabel ? e.label : void 0,
           title: e.hideLabel ? e.label : void 0,
           class: "onyx-checkbox__input",
@@ -493,26 +493,26 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
           value: e.value,
           autofocus: e.autofocus
         }, null, 8, La)), [
-          [tt, n.value],
-          [r(d)]
+          [ot, n.value],
+          [i(c)]
         ])
       ]),
-      e.hideLabel ? _("", !0) : (s(), p(z, { key: 0 }, [
-        f("p", {
+      e.hideLabel ? _("", !0) : (s(), d(z, { key: 0 }, [
+        v("p", {
           class: g(["onyx-checkbox__label", [
             `onyx-truncation-${e.truncation}`,
             // shows the required marker inline for multiline labels
-            e.truncation === "multiline" ? r(l) : void 0
+            e.truncation === "multiline" ? i(l) : void 0
           ]])
-        }, M(e.label), 3),
-        e.truncation === "ellipsis" ? (s(), p("div", {
+        }, S(e.label), 3),
+        e.truncation === "ellipsis" ? (s(), d("div", {
           key: 0,
-          class: g(["onyx-checkbox__marker", [r(l)]])
+          class: g(["onyx-checkbox__marker", [i(l)]])
         }, null, 2)) : _("", !0)
       ], 64))
     ], 2));
   }
-}), Aa = (t, a) => v(() => {
+}), Aa = (t, a) => f(() => {
   const e = a.value.filter(
     (n) => t.value.includes(n)
   ), o = e.length === t.value.length;
@@ -520,7 +520,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     modelValue: o,
     indeterminate: !o && t.value.length && e.length ? !0 : void 0
   };
-}), it = (t, a, e) => ({
+}), ut = (t, a, e) => ({
   /**
    * Current "select all" checkbox state.
    * - checked if all options are checked
@@ -536,14 +536,14 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
    */
   handleChange: (o) => {
     const n = a.value.filter(
-      (i) => !t.value.includes(i)
+      (r) => !t.value.includes(r)
     ), l = o ? n.concat(t.value) : n;
     e(l);
   }
 }), Ha = ["disabled"], Da = {
   key: 0,
   class: "onyx-checkbox-group__label"
-}, In = /* @__PURE__ */ k({
+}, Tn = /* @__PURE__ */ k({
   __name: "OnyxCheckboxGroup",
   props: {
     density: {},
@@ -558,55 +558,55 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["update:modelValue"],
   setup(t, { emit: a }) {
-    const e = t, { densityClass: o } = D(e), n = a, { t: l } = P(), i = (c, y) => {
-      const h = y ? [...e.modelValue, c] : e.modelValue.filter((C) => C !== c);
+    const e = t, { densityClass: o } = D(e), n = a, { t: l } = P(), r = (m, y) => {
+      const h = y ? [...e.modelValue, m] : e.modelValue.filter((w) => w !== m);
       n("update:modelValue", h);
-    }, u = v(
-      () => e.options.filter((c) => !c.disabled && !c.skeleton).map(({ value: c }) => c)
-    ), d = it(
+    }, u = f(
+      () => e.options.filter((m) => !m.disabled && !m.skeleton).map(({ value: m }) => m)
+    ), c = ut(
       u,
-      v(() => e.modelValue),
-      (c) => n("update:modelValue", c)
-    ), m = v(() => {
+      f(() => e.modelValue),
+      (m) => n("update:modelValue", m)
+    ), p = f(() => {
       var y;
-      const c = l.value("selections.selectAll");
-      return typeof e.withCheckAll == "boolean" ? c : ((y = e.withCheckAll) == null ? void 0 : y.label) ?? c;
+      const m = l.value("selections.selectAll");
+      return typeof e.withCheckAll == "boolean" ? m : ((y = e.withCheckAll) == null ? void 0 : y.label) ?? m;
     });
-    return (c, y) => (s(), p("fieldset", {
-      class: g(["onyx-checkbox-group", r(o)]),
+    return (m, y) => (s(), d("fieldset", {
+      class: g(["onyx-checkbox-group", i(o)]),
       disabled: e.disabled
     }, [
-      e.headline ? (s(), p("legend", Da, [
-        S(r(re), { is: "h3" }, {
+      e.headline ? (s(), d("legend", Da, [
+        M(i(ie), { is: "h3" }, {
           default: $(() => [
-            U(M(e.headline), 1)
+            U(S(e.headline), 1)
           ]),
           _: 1
         })
       ])) : _("", !0),
-      f("div", {
+      v("div", {
         class: g(["onyx-checkbox-group__content", {
           "onyx-checkbox-group__content--horizontal": e.direction === "horizontal",
           "onyx-checkbox-group__content--vertical": e.direction === "vertical"
         }])
       }, [
-        e.skeleton === void 0 ? (s(), p(z, { key: 0 }, [
-          e.withCheckAll ? (s(), x(Se, B({ key: 0 }, r(d).state.value, {
-            label: m.value,
+        e.skeleton === void 0 ? (s(), d(z, { key: 0 }, [
+          e.withCheckAll ? (s(), x(Ve, B({ key: 0 }, i(c).state.value, {
+            label: p.value,
             value: "all",
             class: "onyx-checkbox-group__option onyx-checkbox-group__check-all",
-            "onUpdate:modelValue": r(d).handleChange
+            "onUpdate:modelValue": i(c).handleChange
           }), null, 16, ["label", "onUpdate:modelValue"])) : _("", !0),
-          (s(!0), p(z, null, X(e.options, (h) => (s(), x(Se, B({
+          (s(!0), d(z, null, X(e.options, (h) => (s(), x(Ve, B({
             key: h.value.toString(),
             ref_for: !0
           }, h, {
             truncation: h.truncation ?? e.truncation,
             "model-value": e.modelValue.includes(h.value),
             class: "onyx-checkbox-group__option",
-            "onUpdate:modelValue": (C) => i(h.value, C)
+            "onUpdate:modelValue": (w) => r(h.value, w)
           }), null, 16, ["truncation", "model-value", "onUpdate:modelValue"]))), 128))
-        ], 64)) : (s(!0), p(z, { key: 1 }, X(e.skeleton, (h) => (s(), x(Se, {
+        ], 64)) : (s(!0), d(z, { key: 1 }, X(e.skeleton, (h) => (s(), x(Ve, {
           key: h,
           label: `Skeleton ${h}`,
           value: `skeleton-${h}`,
@@ -626,73 +626,73 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["close"],
   setup(t, { emit: a }) {
-    const e = t, o = a, n = E(), { densityClass: l } = D(e), i = () => {
-      var u, d;
-      e.modal ? (u = n.value) == null || u.showModal() : (d = n.value) == null || d.show();
+    const e = t, o = a, n = E(), { densityClass: l } = D(e), r = () => {
+      var u, c;
+      e.modal ? (u = n.value) == null || u.showModal() : (c = n.value) == null || c.show();
     };
     return G([n, () => e.open], () => {
       var u;
-      e.open ? i() : (u = n.value) == null || u.close();
+      e.open ? r() : (u = n.value) == null || u.close();
     }), G(
       () => e.modal,
       () => {
         var u;
-        (u = n.value) != null && u.open && (n.value.close(), i());
+        (u = n.value) != null && u.open && (n.value.close(), r());
       }
-    ), (u, d) => e.open ? (s(), p("dialog", {
+    ), (u, c) => e.open ? (s(), d("dialog", {
       key: 0,
       ref_key: "dialogRef",
       ref: n,
-      class: g(["onyx-dialog", r(l), "onyx-truncation-multiline"]),
+      class: g(["onyx-dialog", i(l), "onyx-truncation-multiline"]),
       "aria-modal": e.modal,
       "aria-label": e.label,
       role: e.alert ? "alertdialog" : void 0,
-      onCancel: d[0] || (d[0] = De((m) => o("close"), ["prevent"]))
+      onCancel: c[0] || (c[0] = Pe((p) => o("close"), ["prevent"]))
     }, [
       b(u.$slots, "default")
     ], 42, Pa)) : _("", !0);
   }
-}), ct = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M25.899 6.1C23.166 3.367 19.583 2 16 2S8.834 3.367 6.101 6.1c-5.467 5.467-5.467 14.332 0 19.799C8.834 28.633 12.417 30 16 30s7.166-1.367 9.899-4.101c5.468-5.467 5.468-14.331 0-19.799m-1.414 18.385C22.219 26.752 19.205 28 16 28s-6.219-1.248-8.485-3.515C5.248 22.219 4 19.205 4 16s1.248-6.219 3.515-8.485C9.781 5.248 12.795 4 16 4s6.219 1.248 8.485 3.515S28 12.795 28 16s-1.248 6.219-3.515 8.485"/><path d="M20.814 9.771 16 14.586l-4.814-4.815-1.415 1.414L14.586 16l-4.815 4.814 1.415 1.415L16 17.414l4.814 4.815 1.415-1.415L17.414 16l4.815-4.815z"/></svg>', za = { class: "onyx-empty" }, Ra = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" }, ut = /* @__PURE__ */ k({
+}), dt = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M25.899 6.1C23.166 3.367 19.583 2 16 2S8.834 3.367 6.101 6.1c-5.467 5.467-5.467 14.332 0 19.799C8.834 28.633 12.417 30 16 30s7.166-1.367 9.899-4.101c5.468-5.467 5.468-14.331 0-19.799m-1.414 18.385C22.219 26.752 19.205 28 16 28s-6.219-1.248-8.485-3.515C5.248 22.219 4 19.205 4 16s1.248-6.219 3.515-8.485C9.781 5.248 12.795 4 16 4s6.219 1.248 8.485 3.515S28 12.795 28 16s-1.248 6.219-3.515 8.485"/><path d="M20.814 9.771 16 14.586l-4.814-4.815-1.415 1.414L14.586 16l-4.815 4.814 1.415 1.415L16 17.414l4.814 4.815 1.415-1.415L17.414 16l4.815-4.815z"/></svg>', za = { class: "onyx-empty" }, Ra = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" }, pt = /* @__PURE__ */ k({
   __name: "OnyxEmpty",
   setup(t) {
-    return (a, e) => (s(), p("div", za, [
+    return (a, e) => (s(), d("div", za, [
       b(a.$slots, "icon", {}, () => [
-        S(A, {
-          icon: r(ct),
+        M(A, {
+          icon: i(dt),
           size: "48px"
         }, null, 8, ["icon"])
       ]),
-      f("div", Ra, [
+      v("div", Ra, [
         b(a.$slots, "default")
       ])
     ]));
   }
-}), Ua = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>', Fa = (t) => /^http(s?):\/\//.test(t), ze = /* @__PURE__ */ k({
+}), Ua = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>', Fa = (t) => /^http(s?):\/\//.test(t), Re = /* @__PURE__ */ k({
   __name: "OnyxExternalLinkIcon",
   props: {
     href: {},
     withExternalIcon: { type: [Boolean, String], default: "auto" }
   },
   setup(t) {
-    const a = t, e = v(() => {
+    const a = t, e = f(() => {
       const o = a.withExternalIcon;
       return o !== "auto" ? o : Fa(a.href ?? "");
     });
     return (o, n) => e.value ? (s(), x(A, {
       key: 0,
       class: "onyx-external-link-icon",
-      icon: r(Ua),
+      icon: i(Ua),
       size: "16px"
     }, null, 8, ["icon"])) : _("", !0);
   }
-}), re = /* @__PURE__ */ k({
+}), ie = /* @__PURE__ */ k({
   __name: "OnyxHeadline",
   props: {
     is: {}
   },
   setup(t) {
     const a = t;
-    return (e, o) => (s(), x(ce(a.is), {
+    return (e, o) => (s(), x(ue(a.is), {
       class: g(["onyx-headline", `onyx-headline--${a.is}`])
     }, {
       default: $(() => [
@@ -701,7 +701,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       _: 3
     }, 8, ["class"]));
   }
-}), Ln = ["h1", "h2", "h3", "h4", "h5", "h6"], An = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], qa = ["aria-label", "title", "type", "disabled", "autofocus"], Za = /* @__PURE__ */ k({
+}), In = ["h1", "h2", "h3", "h4", "h5", "h6"], Ln = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], qa = ["aria-label", "title", "type", "disabled", "autofocus"], Za = /* @__PURE__ */ k({
   __name: "OnyxIconButton",
   props: {
     density: {},
@@ -717,22 +717,22 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   emits: ["click"],
   setup(t, { emit: a }) {
     const e = t, { densityClass: o } = D(e), n = a;
-    return (l, i) => e.skeleton ? (s(), x(R, {
+    return (l, r) => e.skeleton ? (s(), x(R, {
       key: 0,
-      class: g(["onyx-icon-button-skeleton", r(o)])
-    }, null, 8, ["class"])) : (s(), p("button", {
+      class: g(["onyx-icon-button-skeleton", i(o)])
+    }, null, 8, ["class"])) : (s(), d("button", {
       key: 1,
       class: g(["onyx-icon-button", [
         `onyx-icon-button--${e.color}`,
         { "onyx-icon-button--loading": e.loading },
-        r(o)
+        i(o)
       ]]),
       "aria-label": e.label,
       title: e.label,
       type: e.type,
       disabled: e.disabled || e.loading,
       autofocus: e.autofocus,
-      onClick: i[0] || (i[0] = (u) => n("click"))
+      onClick: r[0] || (r[0] = (u) => n("click"))
     }, [
       e.loading ? (s(), x(Q, {
         key: 0,
@@ -743,15 +743,15 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       }, null, 8, ["icon"])) : b(l.$slots, "default", { key: 2 })
     ], 10, qa));
   }
-}), dt = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12"/><path d="M15 8h2v2h-2zm0 5h2v11h-2z"/></svg>', ne = (t) => t, Ga = /* @__PURE__ */ (() => {
+}), mt = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12"/><path d="M15 8h2v2h-2zm0 5h2v11h-2z"/></svg>', ne = (t) => t, Ga = /* @__PURE__ */ (() => {
   let t = 1;
   return () => t++;
-})(), W = (t) => `${t}-${Ga()}`, Ka = (t, a) => Object.entries(t).every(
+})(), K = (t) => `${t}-${Ga()}`, Ka = (t, a) => Object.entries(t).every(
   ([e, o]) => a[e] === o
 ), ja = (t, a) => typeof a == "string" ? t.key === a : Ka(
   { altKey: !1, ctrlKey: !1, metaKey: !1, shiftKey: !1, ...a },
   t
-), Le = (t) => !Wa.has(t), Ya = [
+), He = (t) => !Wa.has(t), Ya = [
   "Unidentified",
   "Alt",
   "AltGraph",
@@ -1059,126 +1059,126 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   "MediaPreviousTrack",
   "Power",
   "Unidentified"
-], Wa = new Set(Ya), oe = Bt(/* @__PURE__ */ new Map()), Xa = (t, a) => {
+], Wa = new Set(Ya), oe = Et(/* @__PURE__ */ new Map()), Xa = (t, a) => {
   if (a != null && a.size) {
     oe.set(t, a);
     return;
   }
-  oe.delete(t), document.removeEventListener(t, pt);
-}, We = (t, a) => {
+  oe.delete(t), document.removeEventListener(t, yt);
+}, Xe = (t, a) => {
   const e = oe.get(t);
   e == null || e.delete(a), Xa(t, e);
 }, Ja = (t, a) => {
   const e = oe.get(t) ?? /* @__PURE__ */ new Set();
-  e.add(a), oe.set(t, e), document.addEventListener(t, pt);
-}, pt = (t) => {
+  e.add(a), oe.set(t, e), document.addEventListener(t, yt);
+}, yt = (t) => {
   var e;
   const a = t.type;
   (e = oe.get(a)) == null || e.forEach((o) => o(t));
-}, mt = ({
+}, ht = ({
   type: t,
   listener: a,
   disabled: e
 }) => {
-  Pe(
+  Ne(
     () => J(
-      () => e != null && e.value ? We(t, a) : Ja(t, a)
+      () => e != null && e.value ? Xe(t, a) : Ja(t, a)
     )
-  ), ye(() => We(t, a));
-}, yt = ({ element: t, onOutsideClick: a, disabled: e }) => {
-  mt({ type: "click", listener: ({ target: n }) => {
-    var i;
-    !((i = t.value) != null && i.contains(n)) && a();
+  ), ye(() => Xe(t, a));
+}, ft = ({ element: t, onOutsideClick: a, disabled: e }) => {
+  ht({ type: "click", listener: ({ target: n }) => {
+    var r;
+    !((r = t.value) != null && r.contains(n)) && a();
   }, disabled: e });
-}, ht = (t, a) => {
+}, vt = (t, a) => {
   let e;
   return (...o) => {
     clearTimeout(e), e = setTimeout(() => t(...o), a);
   };
-}, vt = (t, a = 500) => {
+}, _t = (t, a = 500) => {
   let e = "";
-  const o = ht(() => e = "", a);
+  const o = vt(() => e = "", a);
   return (n) => {
-    Le(n.key) && (o(), e = `${e}${n.key}`, t(e));
+    He(n.key) && (o(), e = `${e}${n.key}`, t(e));
   };
 }, Qa = ne(
   (t) => {
-    const a = v(() => r(t.multiple) ?? !1), e = /* @__PURE__ */ new Map(), o = (d) => (e.has(d) || e.set(d, W("listbox-option")), e.get(d)), n = E(!1);
+    const a = f(() => i(t.multiple) ?? !1), e = /* @__PURE__ */ new Map(), o = (c) => (e.has(c) || e.set(c, K("listbox-option")), e.get(c)), n = E(!1);
     J(() => {
-      var m;
+      var p;
       if (t.activeOption.value == null || !n.value && !t.controlled)
         return;
-      const d = o(t.activeOption.value);
-      (m = document.getElementById(d)) == null || m.scrollIntoView({ block: "nearest", inline: "nearest" });
+      const c = o(t.activeOption.value);
+      (p = document.getElementById(c)) == null || p.scrollIntoView({ block: "nearest", inline: "nearest" });
     });
-    const l = vt((d) => {
-      var m;
-      return (m = t.onTypeAhead) == null ? void 0 : m.call(t, d);
-    }), i = (d) => {
-      var m, c, y, h, C, V, T;
-      switch (d.key) {
+    const l = _t((c) => {
+      var p;
+      return (p = t.onTypeAhead) == null ? void 0 : p.call(t, c);
+    }), r = (c) => {
+      var p, m, y, h, w, V, T;
+      switch (c.key) {
         case " ":
-          d.preventDefault(), t.activeOption.value != null && ((m = t.onSelect) == null || m.call(t, t.activeOption.value));
+          c.preventDefault(), t.activeOption.value != null && ((p = t.onSelect) == null || p.call(t, t.activeOption.value));
           break;
         case "ArrowUp":
-          if (d.preventDefault(), t.activeOption.value == null) {
-            (c = t.onActivateLast) == null || c.call(t);
+          if (c.preventDefault(), t.activeOption.value == null) {
+            (m = t.onActivateLast) == null || m.call(t);
             return;
           }
           (y = t.onActivatePrevious) == null || y.call(t, t.activeOption.value);
           break;
         case "ArrowDown":
-          if (d.preventDefault(), t.activeOption.value == null) {
+          if (c.preventDefault(), t.activeOption.value == null) {
             (h = t.onActivateFirst) == null || h.call(t);
             return;
           }
-          (C = t.onActivateNext) == null || C.call(t, t.activeOption.value);
+          (w = t.onActivateNext) == null || w.call(t, t.activeOption.value);
           break;
         case "Home":
-          d.preventDefault(), (V = t.onActivateFirst) == null || V.call(t);
+          c.preventDefault(), (V = t.onActivateFirst) == null || V.call(t);
           break;
         case "End":
-          d.preventDefault(), (T = t.onActivateLast) == null || T.call(t);
+          c.preventDefault(), (T = t.onActivateLast) == null || T.call(t);
           break;
         default:
-          l(d);
+          l(c);
       }
     };
     return {
       elements: {
-        listbox: v(
+        listbox: f(
           () => t.controlled ? {
             role: "listbox",
             "aria-multiselectable": a.value,
-            "aria-label": r(t.label),
+            "aria-label": i(t.label),
             tabindex: "-1"
           } : {
             role: "listbox",
             "aria-multiselectable": a.value,
-            "aria-label": r(t.label),
+            "aria-label": i(t.label),
             tabindex: "0",
             "aria-activedescendant": t.activeOption.value != null ? o(t.activeOption.value) : void 0,
             onFocus: () => n.value = !0,
             onBlur: () => n.value = !1,
-            onKeydown: i
+            onKeydown: r
           }
         ),
-        group: v(() => (d) => ({
+        group: f(() => (c) => ({
           role: "group",
-          "aria-label": d.label
+          "aria-label": c.label
         })),
-        option: v(() => (d) => {
-          const m = d.selected ?? !1;
+        option: f(() => (c) => {
+          const p = c.selected ?? !1;
           return {
-            id: o(d.value),
+            id: o(c.value),
             role: "option",
-            "aria-label": d.label,
-            "aria-disabled": d.disabled,
-            "aria-checked": a.value ? m : void 0,
-            "aria-selected": a.value ? void 0 : m,
+            "aria-label": c.label,
+            "aria-disabled": c.disabled,
+            "aria-checked": a.value ? p : void 0,
+            "aria-selected": a.value ? void 0 : p,
             onClick: () => {
-              var c;
-              return !d.disabled && ((c = t.onSelect) == null ? void 0 : c.call(t, d.value));
+              var m;
+              return !c.disabled && ((m = t.onSelect) == null ? void 0 : m.call(t, c.value));
             }
           };
         })
@@ -1191,12 +1191,12 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       }
     };
   }
-), ft = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"], _t = [
+), xt = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"], bt = [
   "Escape",
   { key: "ArrowUp", altKey: !0 },
   "Enter",
   "Tab"
-], eo = ["Enter", " "], to = ["Enter"], ao = (t, a) => Ae(t, a ? to : eo), Ae = (t, a) => a.some((e) => ja(t, e)), oo = ne(
+], eo = ["Enter", " "], to = ["Enter"], ao = (t, a) => De(t, a ? to : eo), De = (t, a) => a.some((e) => ja(t, e)), oo = ne(
   ({
     inputValue: t,
     autocomplete: a,
@@ -1204,33 +1204,33 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     onTypeAhead: o,
     multiple: n,
     label: l,
-    listLabel: i,
+    listLabel: r,
     isExpanded: u,
-    activeOption: d,
-    onToggle: m,
-    onSelect: c,
+    activeOption: c,
+    onToggle: p,
+    onSelect: m,
     onActivateFirst: y,
     onActivateLast: h,
-    onActivateNext: C,
+    onActivateNext: w,
     onActivatePrevious: V,
     templateRef: T
   }) => {
-    const ee = W("comboBox-control"), L = v(() => r(a)), H = v(() => r(u)), j = v(() => r(n)), _e = (O) => {
-      const $e = O.target;
-      L.value !== "none" && (e == null || e($e.value));
-    }, xe = vt((O) => o == null ? void 0 : o(O)), ue = (O) => {
-      c == null || c(O), r(j) || m == null || m();
-    }, be = (O) => {
+    const ee = K("comboBox-control"), L = f(() => i(a)), H = f(() => i(u)), Y = f(() => i(n)), se = (O) => {
+      const Me = O.target;
+      L.value !== "none" && (e == null || e(Me.value));
+    }, be = _t((O) => o == null ? void 0 : o(O)), de = (O) => {
+      m == null || m(O), i(Y) || p == null || p();
+    }, ge = (O) => {
       switch (O.key) {
         case "ArrowUp":
-          if (O.preventDefault(), d.value == null)
+          if (O.preventDefault(), c.value == null)
             return h == null ? void 0 : h();
-          V == null || V(d.value);
+          V == null || V(c.value);
           break;
         case "ArrowDown":
-          if (O.preventDefault(), d.value == null)
+          if (O.preventDefault(), c.value == null)
             return y == null ? void 0 : y();
-          C == null || C(d.value);
+          w == null || w(c.value);
           break;
         case "Home":
           O.preventDefault(), y == null || y();
@@ -1239,47 +1239,47 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
           O.preventDefault(), h == null || h();
           break;
       }
-    }, ge = (O) => {
-      if (O.key === "Enter" && O.preventDefault(), !H.value && Ae(O, ft))
-        return m == null || m(), O.key === " " && O.preventDefault(), O.key === "End" ? h == null ? void 0 : h() : y == null ? void 0 : y();
-      if (ao(O, j.value))
-        return ue(d.value);
-      if (H.value && Ae(O, _t))
-        return m == null ? void 0 : m();
-      if (L.value === "none" && Le(O.key))
-        return !H.value && (m == null || m()), xe(O);
-      if (L.value !== "none" && Le(O.key)) {
-        !H.value && (m == null || m());
+    }, ke = (O) => {
+      if (O.key === "Enter" && O.preventDefault(), !H.value && De(O, xt))
+        return p == null || p(), O.key === " " && O.preventDefault(), O.key === "End" ? h == null ? void 0 : h() : y == null ? void 0 : y();
+      if (ao(O, Y.value))
+        return de(c.value);
+      if (H.value && De(O, bt))
+        return p == null ? void 0 : p();
+      if (L.value === "none" && He(O.key))
+        return !H.value && (p == null || p()), be(O);
+      if (L.value !== "none" && He(O.key)) {
+        !H.value && (p == null || p());
         return;
       }
-      return be(O);
-    }, se = L.value !== "none" ? {
+      return ge(O);
+    }, re = L.value !== "none" ? {
       "aria-autocomplete": L.value,
       type: "text"
     } : null, {
-      elements: { option: de, group: ke, listbox: we },
-      internals: { getOptionId: Ce }
+      elements: { option: pe, group: we, listbox: Ce },
+      internals: { getOptionId: $e }
     } = Qa({
-      label: i,
-      multiple: j,
+      label: r,
+      multiple: Y,
       controlled: !0,
-      activeOption: d,
-      onSelect: ue
+      activeOption: c,
+      onSelect: de
     });
-    return yt({
+    return ft({
       element: T,
       onOutsideClick() {
-        H.value && (m == null || m(!0));
+        H.value && (p == null || p(!0));
       }
     }), {
       elements: {
-        option: de,
-        group: ke,
+        option: pe,
+        group: we,
         /**
          * The listbox associated with the combobox.
          */
-        listbox: v(() => ({
-          ...we.value,
+        listbox: f(() => ({
+          ...Ce.value,
           id: ee,
           // preventDefault to not lose focus of the combobox
           onMousedown: (O) => O.preventDefault()
@@ -1288,99 +1288,99 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
          * An input that controls another element, that can dynamically pop-up to help the user set the value of the input.
          * The input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox.
          */
-        input: v(() => ({
+        input: f(() => ({
           value: t.value,
           role: "combobox",
           "aria-expanded": H.value,
           "aria-controls": ee,
-          "aria-label": r(l),
-          "aria-activedescendant": d.value != null ? Ce(d.value) : void 0,
-          onInput: _e,
-          onKeydown: ge,
-          ...se
+          "aria-label": i(l),
+          "aria-activedescendant": c.value != null ? $e(c.value) : void 0,
+          onInput: se,
+          onKeydown: ke,
+          ...re
         })),
         /**
          * An optional button to control the visibility of the popup.
          */
-        button: v(() => ({
+        button: f(() => ({
           tabindex: "-1",
-          onClick: () => m == null ? void 0 : m()
+          onClick: () => p == null ? void 0 : p()
         }))
       }
     };
   }
 ), lo = ne(
   ({ isExpanded: t, onToggle: a }) => {
-    const e = W("menu-button-root"), o = W("menu-button-list"), n = E(), l = W("menu-button-button");
-    mt({
+    const e = K("menu-button-root"), o = K("menu-button-list"), n = E(), l = K("menu-button-button");
+    ht({
       type: "keydown",
-      listener: (m) => m.key === "Escape" && t.value && a(),
-      disabled: v(() => !t.value)
+      listener: (p) => p.key === "Escape" && t.value && a(),
+      disabled: f(() => !t.value)
     });
-    const i = ht(
-      (m) => t.value !== m && a(),
+    const r = vt(
+      (p) => t.value !== p && a(),
       200
-    ), u = (m) => {
-      const c = document.activeElement, y = (c == null ? void 0 : c.closest('[role="menu"]')) || n.value;
+    ), u = (p) => {
+      const m = document.activeElement, y = (m == null ? void 0 : m.closest('[role="menu"]')) || n.value;
       if (!y) return;
       const h = [...y.querySelectorAll('[role="menuitem"]')];
-      let C = 0;
-      if (c) {
-        const T = h.indexOf(c);
-        switch (m) {
+      let w = 0;
+      if (m) {
+        const T = h.indexOf(m);
+        switch (p) {
           case "next":
-            C = T + 1;
+            w = T + 1;
             break;
           case "prev":
-            C = T - 1;
+            w = T - 1;
             break;
           case "first":
-            C = 0;
+            w = 0;
             break;
           case "last":
-            C = h.length - 1;
+            w = h.length - 1;
             break;
         }
       }
-      const V = h[C];
+      const V = h[w];
       V == null || V.focus();
     };
     return {
       elements: {
         root: {
           id: e,
-          onKeydown: (m) => {
-            switch (m.key) {
+          onKeydown: (p) => {
+            switch (p.key) {
               case "ArrowDown":
               case "ArrowRight":
-                m.preventDefault(), u("next");
+                p.preventDefault(), u("next");
                 break;
               case "ArrowUp":
               case "ArrowLeft":
-                m.preventDefault(), u("prev");
+                p.preventDefault(), u("prev");
                 break;
               case "Home":
-                m.preventDefault(), u("first");
+                p.preventDefault(), u("first");
                 break;
               case "End":
-                m.preventDefault(), u("last");
+                p.preventDefault(), u("last");
                 break;
               case " ":
-                m.preventDefault(), m.target.click();
+                p.preventDefault(), p.target.click();
                 break;
               case "Escape":
-                m.preventDefault(), t.value && a();
+                p.preventDefault(), t.value && a();
                 break;
             }
           },
-          onMouseover: () => i(!0),
-          onMouseout: () => i(!1),
-          onFocusout: (m) => {
-            var c;
-            (c = document.getElementById(e)) != null && c.contains(m.relatedTarget) || t.value && a();
+          onMouseover: () => r(!0),
+          onMouseout: () => r(!1),
+          onFocusout: (p) => {
+            var m;
+            (m = document.getElementById(e)) != null && m.contains(p.relatedTarget) || t.value && a();
           }
         },
-        button: v(
+        button: f(
           () => ({
             "aria-controls": o,
             "aria-expanded": t.value,
@@ -1396,11 +1396,11 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
           "aria-labelledby": l,
           onClick: () => t.value && a()
         },
-        ...xt().elements
+        ...gt().elements
       }
     };
   }
-), xt = ne(() => ({
+), gt = ne(() => ({
   elements: {
     listItem: {
       role: "none"
@@ -1417,23 +1417,23 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
    */
   clamp: (t, a, e) => Math.max(Math.min(t, e), a)
 }, so = ne(({ navigationName: t }) => {
-  const a = W("nav"), e = () => {
+  const a = K("nav"), e = () => {
     const n = document.getElementById(a);
     return n ? [...n.querySelectorAll("button[aria-expanded][aria-controls]")] : [];
   }, o = (n, l) => {
-    const i = e(), u = i.indexOf(n);
+    const r = e(), u = r.indexOf(n);
     if (u === -1) return;
-    const d = no.clamp(
+    const c = no.clamp(
       u + (l === "next" ? 1 : -1),
       0,
-      i.length - 1
+      r.length - 1
     );
-    i[d].focus();
+    r[c].focus();
   };
   return {
     elements: {
       nav: {
-        "aria-label": r(t),
+        "aria-label": i(t),
         id: a,
         onKeydown: (n) => {
           switch (n.key) {
@@ -1449,25 +1449,25 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     }
   };
 }), ro = ne((t) => {
-  const a = E(), e = W("tooltip"), o = E(!1);
+  const a = E(), e = K("tooltip"), o = E(!1);
   let n;
-  const l = v(() => {
-    const h = r(t.open);
+  const l = f(() => {
+    const h = i(t.open);
     return typeof h != "object" ? 200 : h.debounce;
-  }), i = v(() => {
-    const h = r(t.open);
+  }), r = f(() => {
+    const h = i(t.open);
     return typeof h != "object" ? h : h.type;
-  }), u = v({
+  }), u = f({
     get: () => o.value,
     set: (h) => {
       clearTimeout(n), n = setTimeout(() => {
         o.value = h;
       }, l.value);
     }
-  }), d = v(() => typeof i.value == "boolean" ? i.value : u.value), m = () => {
+  }), c = f(() => typeof r.value == "boolean" ? r.value : u.value), p = () => {
     o.value = !o.value;
-  }, c = v(() => {
-    if (i.value === "hover")
+  }, m = f(() => {
+    if (r.value === "hover")
       return {
         onMouseover: () => u.value = !0,
         onMouseout: () => u.value = !1,
@@ -1477,11 +1477,11 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   }), y = (h) => {
     h.key === "Escape" && (o.value = !1);
   };
-  return yt({
+  return ft({
     element: a,
     onOutsideClick: () => o.value = !1,
-    disabled: v(() => i.value !== "click")
-  }), Pe(() => {
+    disabled: f(() => r.value !== "click")
+  }), Ne(() => {
     document.addEventListener("keydown", y);
   }), ye(() => {
     document.removeEventListener("keydown", y);
@@ -1490,23 +1490,23 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       root: {
         ref: a
       },
-      trigger: v(() => ({
+      trigger: f(() => ({
         "aria-describedby": e,
-        onClick: i.value === "click" ? m : void 0,
-        ...c.value
+        onClick: r.value === "click" ? p : void 0,
+        ...m.value
       })),
-      tooltip: v(() => ({
+      tooltip: f(() => ({
         role: "tooltip",
         id: e,
         tabindex: "-1",
-        ...c.value
+        ...m.value
       }))
     },
     state: {
-      isVisible: d
+      isVisible: c
     }
   };
-}), bt = /* @__PURE__ */ k({
+}), kt = /* @__PURE__ */ k({
   __name: "OnyxTooltip",
   props: {
     text: {},
@@ -1521,15 +1521,15 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       elements: { root: e, trigger: o, tooltip: n },
       state: { isVisible: l }
     } = ro({
-      open: v(() => a.open)
+      open: f(() => a.open)
     });
-    return (i, u) => (s(), p("div", B({ class: "onyx-tooltip-wrapper" }, r(e)), [
-      f("div", B(r(n), {
+    return (r, u) => (s(), d("div", B({ class: "onyx-tooltip-wrapper" }, i(e)), [
+      v("div", B(i(n), {
         class: ["onyx-tooltip onyx-text--small onyx-truncation-multiline", {
           "onyx-tooltip--danger": a.color === "danger",
           "onyx-tooltip--bottom": a.position === "bottom",
           "onyx-tooltip--fit-parent": a.fitParent,
-          "onyx-tooltip--hidden": !r(l)
+          "onyx-tooltip--hidden": !i(l)
         }]
       }), [
         a.icon ? (s(), x(A, {
@@ -1537,16 +1537,16 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
           icon: a.icon,
           size: "16px"
         }, null, 8, ["icon"])) : _("", !0),
-        b(i.$slots, "tooltip", {}, () => [
-          f("span", null, M(a.text), 1)
+        b(r.$slots, "tooltip", {}, () => [
+          v("span", null, S(a.text), 1)
         ])
       ], 16),
-      f("div", te(ae(r(o))), [
-        b(i.$slots, "default")
+      v("div", te(ae(i(o))), [
+        b(r.$slots, "default")
       ], 16)
     ], 16));
   }
-}), io = ["aria-label"], Ve = /* @__PURE__ */ k({
+}), io = ["aria-label"], Be = /* @__PURE__ */ k({
   __name: "OnyxInfoTooltip",
   props: {
     text: {},
@@ -1555,43 +1555,44 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   setup(t) {
     const a = t, { t: e } = P();
-    return (o, n) => (s(), x(bt, {
+    return (o, n) => (s(), x(kt, {
       class: "onyx-info-tooltip",
       text: a.text,
       position: a.position
     }, {
       default: $(() => [
-        f("button", {
+        v("button", {
           type: "button",
-          "aria-label": a.label || r(e)("showTooltip.info"),
+          "aria-label": a.label || i(e)("showTooltip.info"),
           class: "onyx-info-tooltip__trigger"
         }, [
-          S(A, { icon: r(dt) }, null, 8, ["icon"])
+          M(A, { icon: i(mt) }, null, 8, ["icon"])
         ], 8, io)
       ]),
       _: 1
     }, 8, ["text", "position"]));
   }
-}), co = { class: "onyx-form-element__header" }, uo = { class: "onyx-truncation-ellipsis" }, po = {
-  key: 2,
-  class: "onyx-form-element__optional"
-}, mo = {
+}), co = {
   key: 0,
+  class: "onyx-form-element__label onyx-text--small"
+}, uo = ["for"], po = {
+  key: 1,
   class: "onyx-form-element__footer onyx-text--small"
-}, yo = {
+}, mo = {
   key: 0,
   class: "onyx-form-element__error-message onyx-truncation-ellipsis"
-}, ho = {
+}, yo = {
   key: 2,
   class: "onyx-form-element__message onyx-truncation-ellipsis"
-}, vo = {
+}, ho = {
   key: 4,
   class: "onyx-form-element__counter"
-}, Re = /* @__PURE__ */ k({
+}, Ue = /* @__PURE__ */ k({
   __name: "OnyxFormElement",
   props: {
     required: { type: Boolean, default: !1 },
     requiredMarker: {},
+    id: { default: K("onyx-form-element") },
     modelValue: {},
     label: {},
     labelTooltip: {},
@@ -1603,66 +1604,68 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     withCounter: { type: Boolean }
   },
   setup(t) {
-    const a = t, { t: e } = P(), { requiredMarkerClass: o, requiredTypeClass: n } = ve(a), l = v(() => {
-      var i;
+    const a = t, { t: e } = P(), { requiredMarkerClass: o, requiredTypeClass: n } = _e(a), l = f(() => {
+      var r;
       if (a.withCounter && a.maxlength)
-        return `${(((i = a.modelValue) == null ? void 0 : i.toString()) || "").length}/${a.maxlength}`;
+        return `${(((r = a.modelValue) == null ? void 0 : r.toString()) || "").length}/${a.maxlength}`;
     });
-    return (i, u) => {
-      var d, m;
-      return s(), p("div", {
-        class: g(["onyx-form-element", r(n)])
+    return (r, u) => {
+      var c, p;
+      return s(), d("div", {
+        class: g(["onyx-form-element", i(n)])
       }, [
-        f("label", null, [
-          a.hideLabel ? _("", !0) : (s(), p("div", {
+        a.hideLabel ? _("", !0) : (s(), d("div", co, [
+          v("label", {
+            for: a.id,
+            class: "onyx-truncation-ellipsis"
+          }, S(a.label), 9, uo),
+          a.required ? (s(), d("span", {
             key: 0,
-            class: g(["onyx-form-element__label onyx-text--small", [a.required ? void 0 : r(o)]])
-          }, [
-            f("div", co, [
-              f("span", uo, M(a.label), 1),
-              a.required ? (s(), p("span", {
-                key: 0,
-                class: g([a.required ? r(o) : void 0])
-              }, null, 2)) : _("", !0),
-              a.labelTooltip ? (s(), x(Ve, {
-                key: 1,
-                class: "onyx-form-element__label-tooltip",
-                text: a.labelTooltip
-              }, null, 8, ["text"])) : _("", !0),
-              a.required ? _("", !0) : (s(), p("span", po, M(r(e)("optional")), 1))
-            ])
-          ], 2)),
-          b(i.$slots, "default")
-        ]),
-        a.message || (d = i.errorMessages) != null && d.shortMessage || l.value ? (s(), p("div", mo, [
-          i.errorMessages ? (s(), p("span", yo, M(i.errorMessages.shortMessage), 1)) : _("", !0),
-          (m = i.errorMessages) != null && m.longMessage ? (s(), x(Ve, {
+            class: g([a.required ? i(o) : void 0])
+          }, null, 2)) : _("", !0),
+          a.labelTooltip ? (s(), x(Be, {
+            key: 1,
+            class: "onyx-form-element__label-tooltip",
+            text: a.labelTooltip
+          }, null, 8, ["text"])) : _("", !0),
+          a.required ? _("", !0) : (s(), d("span", {
+            key: 2,
+            class: g([a.required ? void 0 : i(o)])
+          }, null, 2))
+        ])),
+        b(r.$slots, "default", {
+          id: a.id
+        }),
+        a.message || (c = r.errorMessages) != null && c.shortMessage || l.value ? (s(), d("div", po, [
+          r.errorMessages ? (s(), d("span", mo, S(r.errorMessages.shortMessage), 1)) : _("", !0),
+          (p = r.errorMessages) != null && p.longMessage ? (s(), x(Be, {
             key: 1,
             class: "onyx-form-element__error-tooltip",
             color: "danger",
             position: "bottom",
-            label: r(e)("showTooltip.error"),
-            text: i.errorMessages.longMessage
+            label: i(e)("showTooltip.error"),
+            text: r.errorMessages.longMessage
           }, null, 8, ["label", "text"])) : _("", !0),
-          a.message ? (s(), p("span", ho, M(a.message), 1)) : _("", !0),
-          a.messageTooltip ? (s(), x(Ve, {
+          a.message ? (s(), d("span", yo, S(a.message), 1)) : _("", !0),
+          a.messageTooltip ? (s(), x(Be, {
             key: 3,
             class: "onyx-form-element__message-tooltip",
             position: "bottom",
             text: a.messageTooltip
           }, null, 8, ["text"])) : _("", !0),
-          l.value ? (s(), p("span", vo, M(l.value), 1)) : _("", !0)
+          l.value ? (s(), d("span", ho, S(l.value), 1)) : _("", !0)
         ])) : _("", !0)
       ], 2);
     };
   }
-}), fo = { class: "onyx-input__wrapper" }, _o = ["placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], Hn = /* @__PURE__ */ k({
+}), fo = { class: "onyx-input__wrapper" }, vo = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], An = /* @__PURE__ */ k({
   __name: "OnyxInput",
   props: {
     density: {},
     required: { type: Boolean, default: !1 },
     requiredMarker: {},
     customError: {},
+    id: {},
     label: {},
     labelTooltip: {},
     hideLabel: { type: Boolean },
@@ -1686,57 +1689,58 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "change", "focus", "blur", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, o = a, { vCustomValidity: n, errorMessages: l } = le({ props: e, emit: o }), { densityClass: i } = D(e), u = v({
+    const e = t, o = a, { vCustomValidity: n, errorMessages: l } = le({ props: e, emit: o }), { densityClass: r } = D(e), u = f({
       get: () => e.modelValue,
-      set: (c) => o("update:modelValue", c)
-    }), d = (c) => {
-      const y = c.target.value;
+      set: (m) => o("update:modelValue", m)
+    }), c = (m) => {
+      const y = m.target.value;
       o("change", y);
-    }, m = v(() => e.pattern instanceof RegExp ? e.pattern.source : e.pattern);
-    return (c, y) => e.skeleton ? (s(), p("div", {
+    }, p = f(() => e.pattern instanceof RegExp ? e.pattern.source : e.pattern);
+    return (m, y) => e.skeleton ? (s(), d("div", {
       key: 0,
-      class: g(["onyx-input-skeleton", r(i)])
+      class: g(["onyx-input-skeleton", i(r)])
     }, [
       e.hideLabel ? _("", !0) : (s(), x(R, {
         key: 0,
         class: "onyx-input-skeleton__label"
       })),
-      S(R, { class: "onyx-input-skeleton__input" })
-    ], 2)) : (s(), p("div", {
+      M(R, { class: "onyx-input-skeleton__input" })
+    ], 2)) : (s(), d("div", {
       key: 1,
-      class: g(["onyx-input", r(i)])
+      class: g(["onyx-input", i(r)])
     }, [
-      S(Re, B(e, { "error-messages": r(l) }), {
-        default: $(() => [
-          f("div", fo, [
+      M(Ue, B(e, { "error-messages": i(l) }), {
+        default: $(({ id: h }) => [
+          v("div", fo, [
             e.loading ? (s(), x(Q, {
               key: 0,
               class: "onyx-input__loading",
               type: "circle"
             })) : _("", !0),
-            K(f("input", {
-              "onUpdate:modelValue": y[0] || (y[0] = (h) => u.value = h),
-              class: "onyx-input__native",
+            j(v("input", {
+              id: h,
+              "onUpdate:modelValue": y[0] || (y[0] = (w) => u.value = w),
               placeholder: e.placeholder,
+              class: "onyx-input__native",
               type: e.type,
               required: e.required,
               autocapitalize: e.autocapitalize,
               autocomplete: e.autocomplete,
               autofocus: e.autofocus,
               name: e.name,
-              pattern: m.value,
+              pattern: p.value,
               readonly: e.readonly,
               disabled: e.disabled || e.loading,
               minlength: e.minlength,
               maxlength: e.maxlength,
               "aria-label": e.hideLabel ? e.label : void 0,
               title: e.hideLabel ? e.label : void 0,
-              onChange: d,
-              onFocus: y[1] || (y[1] = (h) => o("focus")),
-              onBlur: y[2] || (y[2] = (h) => o("blur"))
-            }, null, 40, _o), [
-              [Ot, u.value],
-              [r(n)]
+              onChange: c,
+              onFocus: y[1] || (y[1] = (w) => o("focus")),
+              onBlur: y[2] || (y[2] = (w) => o("blur"))
+            }, null, 40, vo), [
+              [Tt, u.value],
+              [i(n)]
             ])
           ])
         ]),
@@ -1744,21 +1748,21 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       }, 16, ["error-messages"])
     ], 2));
   }
-}), Dn = ["email", "password", "search", "tel", "text", "url"], Pn = ["none", "sentences", "words", "characters"], gt = /* @__PURE__ */ k({
+}), Hn = ["email", "password", "search", "tel", "text", "url"], Dn = ["none", "sentences", "words", "characters"], wt = /* @__PURE__ */ k({
   __name: "OnyxVisuallyHidden",
   props: {
     is: { default: "span" }
   },
   setup(t) {
     const a = t;
-    return (e, o) => (s(), x(ce(a.is), { class: "onyx-visually-hidden" }, {
+    return (e, o) => (s(), x(ue(a.is), { class: "onyx-visually-hidden" }, {
       default: $(() => [
         b(e.$slots, "default")
       ]),
       _: 3
     }));
   }
-}), xo = ["href", "target", "rel"], Nn = /* @__PURE__ */ k({
+}), _o = ["href", "target", "rel"], Pn = /* @__PURE__ */ k({
   __name: "OnyxLink",
   props: {
     href: {},
@@ -1768,24 +1772,24 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   emits: ["click"],
   setup(t, { emit: a }) {
     const e = t, o = a, { t: n } = P();
-    return (l, i) => (s(), p("a", {
+    return (l, r) => (s(), d("a", {
       class: "onyx-link",
       href: e.href,
       target: e.target,
       rel: e.target === "_blank" ? "noreferrer" : void 0,
-      onClick: i[0] || (i[0] = (u) => o("click"))
+      onClick: r[0] || (r[0] = (u) => o("click"))
     }, [
       b(l.$slots, "default"),
-      e.target === "_blank" ? (s(), x(gt, { key: 0 }, {
+      e.target === "_blank" ? (s(), x(wt, { key: 0 }, {
         default: $(() => [
-          U(M(r(n)("link.opensExternally")), 1)
+          U(S(i(n)("link.opensExternally")), 1)
         ]),
         _: 1
       })) : _("", !0),
-      S(ze, te(ae(e)), null, 16)
-    ], 8, xo));
+      M(Re, te(ae(e)), null, 16)
+    ], 8, _o));
   }
-}), zn = ["_self", "_blank", "_parent", "_top"], Ue = /* @__PURE__ */ k({
+}), Nn = ["_self", "_blank", "_parent", "_top"], Fe = /* @__PURE__ */ k({
   __name: "OnyxListItem",
   props: {
     density: {},
@@ -1797,10 +1801,10 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   setup(t) {
     const a = t, { densityClass: e } = D(a);
-    return (o, n) => (s(), p("li", {
+    return (o, n) => (s(), d("li", {
       class: g({
         "onyx-list-item": !0,
-        ...r(e),
+        ...i(e),
         "onyx-list-item--active": a.active,
         [`onyx-list-item--${a.color}`]: a.color,
         "onyx-list-item--disabled": a.disabled,
@@ -1811,10 +1815,10 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       b(o.$slots, "default")
     ], 2));
   }
-}), bo = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m28.707 27.293-7.969-7.969A9.95 9.95 0 0 0 23 13c0-5.514-4.486-10-10-10S3 7.486 3 13s4.486 10 10 10c2.397 0 4.599-.85 6.324-2.262l7.969 7.969zM5 13c0-4.411 3.589-8 8-8s8 3.589 8 8-3.589 8-8 8-8-3.589-8-8"/></svg>', Fe = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m22.707 10.707-1.414-1.414L16 14.586l-5.293-5.293-1.414 1.414L14.586 16l-5.293 5.293 1.414 1.414L16 17.414l5.293 5.293 1.414-1.414L17.414 16z"/></svg>', kt = () => {
-  const t = Et(), a = v(
+}), xo = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m28.707 27.293-7.969-7.969A9.95 9.95 0 0 0 23 13c0-5.514-4.486-10-10-10S3 7.486 3 13s4.486 10 10 10c2.397 0 4.599-.85 6.324-2.262l7.969 7.969zM5 13c0-4.411 3.589-8 8-8s8 3.589 8 8-3.589 8-8 8-8-3.589-8-8"/></svg>', qe = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m22.707 10.707-1.414-1.414L16 14.586l-5.293-5.293-1.414 1.414L14.586 16l-5.293 5.293 1.414 1.414L16 17.414l5.293 5.293 1.414-1.414L17.414 16z"/></svg>', Ct = () => {
+  const t = It(), a = f(
     () => ({ class: t.class, style: t.style })
-  ), e = v(() => {
+  ), e = f(() => {
     const o = { ...t };
     return delete o.class, delete o.style, o;
   });
@@ -1828,7 +1832,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
      */
     restAttrs: e
   };
-}, go = ["aria-label"], ko = ["aria-label"], wo = /* @__PURE__ */ k({
+}, bo = ["aria-label"], go = ["aria-label"], ko = /* @__PURE__ */ k({
   inheritAttrs: !1,
   __name: "OnyxMiniSearch",
   props: {
@@ -1838,7 +1842,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "clear"],
   setup(t, { expose: a, emit: e }) {
-    const o = t, n = e, { rootAttrs: l, restAttrs: i } = kt(), { densityClass: u } = D(o), { t: d } = P(), m = E(), c = v({
+    const o = t, n = e, { rootAttrs: l, restAttrs: r } = Ct(), { densityClass: u } = D(o), { t: c } = P(), p = E(), m = f({
       get: () => o.modelValue,
       set: (y) => n("update:modelValue", y ?? "")
     });
@@ -1848,41 +1852,41 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
        */
       focus: () => {
         var y;
-        return (y = m.value) == null ? void 0 : y.focus();
+        return (y = p.value) == null ? void 0 : y.focus();
       }
-    }), (y, h) => (s(), p("div", B({
-      class: ["onyx-mini-search", r(u)]
-    }, r(l)), [
-      K(f("input", B({
+    }), (y, h) => (s(), d("div", B({
+      class: ["onyx-mini-search", i(u)]
+    }, i(l)), [
+      j(v("input", B({
         ref_key: "input",
-        ref: m,
-        "onUpdate:modelValue": h[0] || (h[0] = (C) => c.value = C),
+        ref: p,
+        "onUpdate:modelValue": h[0] || (h[0] = (w) => m.value = w),
         class: "onyx-mini-search__input",
         placeholder: "Search",
         type: "text"
-      }, r(i), {
+      }, i(r), {
         "aria-label": o.label
-      }), null, 16, go), [
-        [at, c.value]
+      }), null, 16, bo), [
+        [lt, m.value]
       ]),
-      f("button", {
+      v("button", {
         type: "button",
         class: "onyx-mini-search__clear",
-        "aria-label": r(d)("select.clearSearch"),
+        "aria-label": i(c)("select.clearSearch"),
         tabindex: "-1",
-        onMousedown: h[1] || (h[1] = De(() => {
+        onMousedown: h[1] || (h[1] = Pe(() => {
         }, ["prevent"])),
-        onClick: h[2] || (h[2] = (C) => n("clear"))
+        onClick: h[2] || (h[2] = (w) => n("clear"))
       }, [
-        S(A, { icon: r(Fe) }, null, 8, ["icon"])
-      ], 40, ko),
-      S(A, {
+        M(A, { icon: i(qe) }, null, 8, ["icon"])
+      ], 40, go),
+      M(A, {
         class: "onyx-mini-search__icon",
-        icon: r(bo)
+        icon: i(xo)
       }, null, 8, ["icon"])
     ], 16));
   }
-}), Co = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m27.707 5.707-1.414-1.414L16 14.586 5.707 4.293 4.293 5.707 14.586 16 4.293 26.293l1.414 1.414L16 17.414l10.293 10.293 1.414-1.414L17.414 16z"/></svg>', $o = { class: "onyx-mobile-nav-button" }, Mo = ["aria-label"], So = { class: "onyx-mobile-nav-button__flyout" }, Vo = { class: "onyx-mobile-nav-button__menu" }, Xe = /* @__PURE__ */ k({
+}), wo = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m27.707 5.707-1.414-1.414L16 14.586 5.707 4.293 4.293 5.707 14.586 16 4.293 26.293l1.414 1.414L16 17.414l10.293 10.293 1.414-1.414L17.414 16z"/></svg>', Co = { class: "onyx-mobile-nav-button" }, $o = ["aria-label"], Mo = { class: "onyx-mobile-nav-button__flyout" }, So = { class: "onyx-mobile-nav-button__menu" }, Je = /* @__PURE__ */ k({
   __name: "OnyxMobileNavButton",
   props: {
     label: {},
@@ -1893,45 +1897,45 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   emits: ["update:open"],
   setup(t, { emit: a }) {
     const e = t, o = a;
-    return (n, l) => (s(), p("div", $o, [
-      f("button", {
+    return (n, l) => (s(), d("div", Co, [
+      v("button", {
         type: "button",
         class: g(["onyx-mobile-nav-button__trigger", { "onyx-mobile-nav-button__trigger--active": e.open }]),
         "aria-label": e.label,
-        onClick: l[0] || (l[0] = (i) => o("update:open", !e.open))
+        onClick: l[0] || (l[0] = (r) => o("update:open", !e.open))
       }, [
-        S(A, {
-          icon: e.open ? r(Co) : e.icon
+        M(A, {
+          icon: e.open ? i(wo) : e.icon
         }, null, 8, ["icon"])
-      ], 10, Mo),
-      e.open ? (s(), p(z, { key: 0 }, [
-        f("div", So, [
-          f("div", Vo, [
-            e.headline ? (s(), x(re, {
+      ], 10, $o),
+      e.open ? (s(), d(z, { key: 0 }, [
+        v("div", Mo, [
+          v("div", So, [
+            e.headline ? (s(), x(ie, {
               key: 0,
               is: "h2",
               class: "onyx-mobile-nav-button__headline"
             }, {
               default: $(() => [
-                U(M(e.headline), 1)
+                U(S(e.headline), 1)
               ]),
               _: 1
             })) : _("", !0),
             b(n.$slots, "default")
           ])
         ]),
-        f("div", {
+        v("div", {
           class: "onyx-mobile-nav-button__backdrop",
           role: "presentation",
-          onClick: l[1] || (l[1] = (i) => o("update:open", !1))
+          onClick: l[1] || (l[1] = (r) => o("update:open", !1))
         })
       ], 64)) : _("", !0)
     ]));
   }
-}), Bo = ["aria-label"], Oo = ["src", "alt"], Eo = {
+}), Vo = ["aria-label"], Bo = ["src", "alt"], Oo = {
   key: 1,
   class: "onyx-text-small onyx-truncation-ellipsis"
-}, To = /* @__PURE__ */ k({
+}, Eo = /* @__PURE__ */ k({
   __name: "OnyxNavAppArea",
   props: {
     logoUrl: {},
@@ -1940,27 +1944,27 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["click"],
   setup(t, { emit: a }) {
-    const e = t, o = a, { t: n } = P(), l = v(() => e.label ?? n.value("navigation.goToHome"));
-    return (i, u) => (s(), p("button", {
+    const e = t, o = a, { t: n } = P(), l = f(() => e.label ?? n.value("navigation.goToHome"));
+    return (r, u) => (s(), d("button", {
       type: "button",
       class: "onyx-nav-app-area",
       "aria-label": l.value,
-      onClick: u[0] || (u[0] = (d) => o("click"))
+      onClick: u[0] || (u[0] = (c) => o("click"))
     }, [
-      b(i.$slots, "default", {}, () => [
-        e.logoUrl ? (s(), p("img", {
+      b(r.$slots, "default", {}, () => [
+        e.logoUrl ? (s(), d("img", {
           key: 0,
           src: e.logoUrl,
-          alt: r(n)("navigation.appLogo", { appName: e.appName }),
+          alt: i(n)("navigation.appLogo", { appName: e.appName }),
           class: "onyx-nav-app-area__logo",
           width: "24",
           height: "24"
-        }, null, 8, Oo)) : _("", !0),
-        e.appName ? (s(), p("span", Eo, M(e.appName), 1)) : _("", !0)
+        }, null, 8, Bo)) : _("", !0),
+        e.appName ? (s(), d("span", Oo, S(e.appName), 1)) : _("", !0)
       ])
-    ], 8, Bo));
+    ], 8, Vo));
   }
-}), Io = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+}), To = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4499_144781)">
 <mask id="mask0_4499_144781" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="83" height="104">
 <rect width="83" height="104" fill="#D9D9D9"/>
@@ -2048,7 +2052,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
 </clipPath>
 </defs>
 </svg>
-`, Lo = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Io = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4499_144833)">
 <path d="M0 4C0 1.79086 1.79086 0 4 0H162C164.209 0 166 1.79086 166 4V100C166 102.209 164.209 104 162 104H4C1.79086 104 0 102.209 0 100V4Z" fill="var(--onyx-color-themed-neutral-1100)"/>
 <g filter="url(#filter0_d_4499_144833)">
@@ -2095,7 +2099,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
 </clipPath>
 </defs>
 </svg>
-`, Ao = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Lo = `<svg width="166" height="104" viewBox="0 0 166 104" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4499_144816)">
 <path d="M0 4C0 1.79086 1.79086 0 4 0H162C164.209 0 166 1.79086 166 4V100C166 102.209 164.209 104 162 104H4C1.79086 104 0 102.209 0 100V4Z" fill="white"/>
 <g filter="url(#filter0_d_4499_144816)">
@@ -2142,7 +2146,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
 </clipPath>
 </defs>
 </svg>
-`, Ho = { class: "onyx-color-scheme-dialog__subtitle onyx-text" }, Do = ["innerHTML"], Po = ["autofocus", "value", "checked", "aria-label"], No = { class: "onyx-text--small" }, zo = { class: "onyx-color-scheme-dialog__actions" }, Ro = /* @__PURE__ */ k({
+`, Ao = { class: "onyx-color-scheme-dialog__subtitle onyx-text" }, Ho = ["innerHTML"], Do = ["autofocus", "value", "checked", "aria-label"], Po = { class: "onyx-text--small" }, No = { class: "onyx-color-scheme-dialog__actions" }, zo = /* @__PURE__ */ k({
   __name: "OnyxColorSchemeDialog",
   props: {
     open: { type: Boolean, default: !1 },
@@ -2153,66 +2157,66 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   setup(t, { emit: a }) {
     const e = t, o = a, n = E(e.modelValue);
     J(() => n.value = e.modelValue);
-    const { t: l } = P(), i = v(() => [
+    const { t: l } = P(), r = f(() => [
       {
         value: "auto",
-        image: Io,
+        image: To,
         label: l.value("colorScheme.auto.label"),
         description: l.value("colorScheme.auto.description")
       },
       {
         value: "light",
-        image: Ao,
+        image: Lo,
         label: l.value("colorScheme.light.label"),
         description: l.value("colorScheme.light.description")
       },
       {
         value: "dark",
-        image: Lo,
+        image: Io,
         label: l.value("colorScheme.dark.label"),
         description: l.value("colorScheme.dark.description")
       }
-    ]), u = (m) => {
-      const c = m.target;
-      n.value = c.value;
-    }, d = () => {
+    ]), u = (p) => {
+      const m = p.target;
+      n.value = m.value;
+    }, c = () => {
       n.value && (o("update:modelValue", n.value), o("close"));
     };
-    return (m, c) => (s(), x(Na, B({ class: "onyx-color-scheme-dialog" }, e, {
-      label: r(l)("colorScheme.headline"),
+    return (p, m) => (s(), x(Na, B({ class: "onyx-color-scheme-dialog" }, e, {
+      label: i(l)("colorScheme.headline"),
       modal: "",
-      onClose: c[1] || (c[1] = (y) => o("close"))
+      onClose: m[1] || (m[1] = (y) => o("close"))
     }), {
       default: $(() => [
-        f("form", {
+        v("form", {
           class: "onyx-color-scheme-dialog__form",
-          onSubmit: De(d, ["prevent"])
+          onSubmit: Pe(c, ["prevent"])
         }, [
-          f("div", null, [
-            S(re, { is: "h2" }, {
+          v("div", null, [
+            M(ie, { is: "h2" }, {
               default: $(() => [
-                U(M(r(l)("colorScheme.headline")), 1)
+                U(S(i(l)("colorScheme.headline")), 1)
               ]),
               _: 1
             }),
-            f("span", Ho, M(r(l)("colorScheme.subtitle")), 1)
+            v("span", Ao, S(i(l)("colorScheme.subtitle")), 1)
           ]),
-          f("fieldset", {
+          v("fieldset", {
             class: "onyx-color-scheme-dialog__list",
             onChange: u
           }, [
-            (s(!0), p(z, null, X(i.value, (y) => (s(), p("label", {
+            (s(!0), d(z, null, X(r.value, (y) => (s(), d("label", {
               key: y.value,
               class: "onyx-color-scheme-dialog__option"
             }, [
-              f("figure", {
+              v("figure", {
                 class: "onyx-color-scheme-dialog__image",
                 innerHTML: y.image
-              }, null, 8, Do),
-              f("div", null, [
-                S(gt, { is: "div" }, {
+              }, null, 8, Ho),
+              v("div", null, [
+                M(wt, { is: "div" }, {
                   default: $(() => [
-                    f("input", {
+                    v("input", {
                       type: "radio",
                       name: "color-scheme",
                       autofocus: e.modelValue === y.value,
@@ -2220,32 +2224,32 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
                       checked: e.modelValue === y.value,
                       "aria-label": y.label,
                       required: ""
-                    }, null, 8, Po)
+                    }, null, 8, Do)
                   ]),
                   _: 2
                 }, 1024),
-                S(re, {
+                M(ie, {
                   is: "h3",
                   class: "onyx-color-scheme-dialog__label"
                 }, {
                   default: $(() => [
-                    U(M(y.label), 1)
+                    U(S(y.label), 1)
                   ]),
                   _: 2
                 }, 1024),
-                f("p", No, M(y.description), 1)
+                v("p", Po, S(y.description), 1)
               ])
             ]))), 128))
           ], 32),
-          f("div", zo, [
-            S(Te, {
-              label: r(l)("cancel"),
+          v("div", No, [
+            M(Le, {
+              label: i(l)("cancel"),
               mode: "plain",
               color: "neutral",
-              onClick: c[0] || (c[0] = (y) => o("close"))
+              onClick: m[0] || (m[0] = (y) => o("close"))
             }, null, 8, ["label"]),
-            S(Te, {
-              label: r(l)("apply"),
+            M(Le, {
+              label: i(l)("apply"),
               type: "submit"
             }, null, 8, ["label"])
           ])
@@ -2254,7 +2258,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       _: 1
     }, 16, ["label"]));
   }
-}), Uo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M15.99 2C8.28 2 2 8.27 2 15.99s6.27 13.99 13.99 13.99 13.99-6.27 13.99-13.99S23.7 2 15.99 2m5.96 3.6c.76.44 1.47.96 2.12 1.55v17.66c-.65.59-1.35 1.11-2.12 1.55zm-2 21.69c-.63.22-1.29.39-1.96.51V4.18c.67.11 1.33.28 1.96.51zm6.11-17.77c1.2 1.87 1.91 4.08 1.91 6.47s-.71 4.6-1.91 6.47V9.53ZM4 15.99C4 9.38 9.38 4 15.99 4v23.97C9.38 27.97 4 22.59 4 15.98Z" style="stroke-width:0"/></svg>', wt = /* @__PURE__ */ k({
+}), Ro = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M15.99 2C8.28 2 2 8.27 2 15.99s6.27 13.99 13.99 13.99 13.99-6.27 13.99-13.99S23.7 2 15.99 2m5.96 3.6c.76.44 1.47.96 2.12 1.55v17.66c-.65.59-1.35 1.11-2.12 1.55zm-2 21.69c-.63.22-1.29.39-1.96.51V4.18c.67.11 1.33.28 1.96.51zm6.11-17.77c1.2 1.87 1.91 4.08 1.91 6.47s-.71 4.6-1.91 6.47V9.53ZM4 15.99C4 9.38 9.38 4 15.99 4v23.97C9.38 27.97 4 22.59 4 15.98Z" style="stroke-width:0"/></svg>', $t = /* @__PURE__ */ k({
   __name: "OnyxMenuItem",
   props: {
     href: {},
@@ -2266,31 +2270,31 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   setup(t, { emit: a }) {
     const e = t, o = a, {
       elements: { listItem: n, menuItem: l }
-    } = xt();
-    return (i, u) => (s(), x(Ue, B({
+    } = gt();
+    return (r, u) => (s(), x(Fe, B({
       selected: e.active,
       active: e.active,
       color: e.color,
       disabled: e.disabled,
       class: "onyx-menu-item"
-    }, r(n)), {
+    }, i(n)), {
       default: $(() => [
-        (s(), x(ce(e.href ? "a" : "button"), B(
+        (s(), x(ue(e.href ? "a" : "button"), B(
           {
             class: "onyx-menu-item__trigger",
             disabled: !e.href && e.disabled,
             href: e.href
           },
-          r(l)({
+          i(l)({
             active: e.active,
             disabled: !e.href && e.disabled
           }),
           {
-            onClick: u[0] || (u[0] = (d) => o("click"))
+            onClick: u[0] || (u[0] = (c) => o("click"))
           }
         ), {
           default: $(() => [
-            b(i.$slots, "default")
+            b(r.$slots, "default")
           ]),
           _: 3
         }, 16, ["disabled", "href"]))
@@ -2298,7 +2302,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       _: 3
     }, 16, ["selected", "active", "color", "disabled"]));
   }
-}), Fo = { class: "onyx-color-scheme-menu-item__value" }, Rn = /* @__PURE__ */ k({
+}), Uo = { class: "onyx-color-scheme-menu-item__value" }, zn = /* @__PURE__ */ k({
   __name: "OnyxColorSchemeMenuItem",
   props: {
     modelValue: {}
@@ -2306,96 +2310,86 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   emits: ["update:modelValue"],
   setup(t, { emit: a }) {
     const e = t, o = a, { t: n } = P(), l = E(!1);
-    return (i, u) => (s(), x(wt, {
+    return (r, u) => (s(), x($t, {
       class: "onyx-color-scheme-menu-item",
-      onClick: u[2] || (u[2] = (d) => l.value = !0)
+      onClick: u[2] || (u[2] = (c) => l.value = !0)
     }, {
       default: $(() => [
-        S(A, { icon: r(Uo) }, null, 8, ["icon"]),
-        f("div", null, [
-          U(M(r(n)("colorScheme.appearance")) + ": ", 1),
-          f("span", Fo, M(r(n)(`colorScheme.${e.modelValue}.label`)), 1)
+        M(A, { icon: i(Ro) }, null, 8, ["icon"]),
+        v("div", null, [
+          U(S(i(n)("colorScheme.appearance")) + ": ", 1),
+          v("span", Uo, S(i(n)(`colorScheme.${e.modelValue}.label`)), 1)
         ]),
-        (s(), x(Tt, { to: "body" }, [
-          S(Ro, {
+        (s(), x(Lt, { to: "body" }, [
+          M(zo, {
             "model-value": e.modelValue,
             open: l.value,
-            onClose: u[0] || (u[0] = (d) => l.value = !1),
-            "onUpdate:modelValue": u[1] || (u[1] = (d) => o("update:modelValue", d))
+            onClose: u[0] || (u[0] = (c) => l.value = !1),
+            "onUpdate:modelValue": u[1] || (u[1] = (c) => o("update:modelValue", c))
           }, null, 8, ["model-value", "open"])
         ]))
       ]),
       _: 1
     }));
   }
-}), He = (t, a, e) => {
-  const o = v(() => t.value === void 0), n = E(o.value ? a : t.value);
-  return v({
-    set: (l) => {
-      n.value = l, e(l);
-    },
-    get: () => o.value ? n.value : t.value
-  });
-}, qo = ["aria-label"], Ct = /* @__PURE__ */ k({
+}), Fo = ["aria-label"], Mt = /* @__PURE__ */ k({
   __name: "OnyxFlyoutMenu",
-  props: {
-    open: { type: Boolean, default: void 0 },
+  props: /* @__PURE__ */ he({
     label: {}
-  },
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
+  }),
   emits: ["update:open"],
-  setup(t, { emit: a }) {
-    const e = t, o = a, n = F(), l = He(
-      me(() => e.open),
-      !1,
-      (c) => o("update:open", c)
-    ), {
-      elements: { root: i, button: u, menu: d }
+  setup(t) {
+    const a = t, e = fe(t, "open"), o = F(), {
+      elements: { root: n, button: l, menu: r }
     } = lo({
-      isExpanded: l,
-      onToggle: () => l.value = !l.value
-    }), m = v(() => {
-      var y;
-      if (!n.default) return;
-      const c = n.default().at(0);
-      return (c == null ? void 0 : c.type.toString()) === "Symbol(v-fgt)" ? Array.isArray(c == null ? void 0 : c.children) ? (y = c == null ? void 0 : c.children) == null ? void 0 : y.at(0) : void 0 : c;
+      isExpanded: e,
+      onToggle: () => e.value = !e.value
+    }), u = f(() => {
+      var p;
+      if (!o.default) return;
+      const c = o.default().at(0);
+      return (c == null ? void 0 : c.type.toString()) === "Symbol(v-fgt)" ? Array.isArray(c == null ? void 0 : c.children) ? (p = c == null ? void 0 : c.children) == null ? void 0 : p.at(0) : void 0 : c;
     });
-    return (c, y) => (s(), p("div", B({ class: "onyx-flyout-menu" }, r(i)), [
-      (s(), x(ce(m.value), te(ae(r(u))), null, 16)),
-      n.options || n.header || n.footer ? K((s(), p("div", {
+    return (c, p) => (s(), d("div", B({ class: "onyx-flyout-menu" }, i(n)), [
+      (s(), x(ue(u.value), te(ae(i(l))), null, 16)),
+      o.options || o.header || o.footer ? j((s(), d("div", {
         key: 0,
-        "aria-label": e.label,
+        "aria-label": a.label,
         class: g({
-          "onyx-flyout-menu__list--with-header": !!n.header,
-          "onyx-flyout-menu__list--with-footer": !!n.footer,
+          "onyx-flyout-menu__list--with-header": !!o.header,
+          "onyx-flyout-menu__list--with-footer": !!o.footer,
           "onyx-flyout-menu__list": !0
         })
       }, [
         b(c.$slots, "header"),
-        n.options ? (s(), p("ul", B({ key: 0 }, r(d), { class: "onyx-flyout-menu__wrapper onyx-flyout-menu__group" }), [
+        o.options ? (s(), d("ul", B({ key: 0 }, i(r), { class: "onyx-flyout-menu__wrapper onyx-flyout-menu__group" }), [
           b(c.$slots, "options")
         ], 16)) : _("", !0),
         b(c.$slots, "footer")
-      ], 10, qo)), [
-        [ot, r(l)]
+      ], 10, Fo)), [
+        [nt, e.value]
       ]) : _("", !0)
     ], 16));
   }
-}), Zo = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m13.207 8.293-1.414 1.414L18.086 16l-6.293 6.293 1.414 1.414L20.914 16z"/></svg>', fe = Symbol(), Go = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.04 32.04"><path d="M23.52 15.52H11.93l4.13-4.13-1.42-1.41-6.54 6.54 6.54 6.54 1.42-1.42-4.13-4.12h11.59z"/></svg>', Ko = ["aria-orientation"], jo = /* @__PURE__ */ k({
+}), qo = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m13.207 8.293-1.414 1.414L18.086 16l-6.293 6.293 1.414 1.414L20.914 16z"/></svg>', xe = Symbol(), Zo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.04 32.04"><path d="M23.52 15.52H11.93l4.13-4.13-1.42-1.41-6.54 6.54 6.54 6.54 1.42-1.42-4.13-4.12h11.59z"/></svg>', Go = ["aria-orientation"], Ko = /* @__PURE__ */ k({
   __name: "OnyxNavSeparator",
   props: {
     orientation: { default: "vertical" }
   },
   setup(t) {
-    const a = t, e = ie(fe);
-    return (o, n) => (s(), p("div", {
-      class: g(["onyx-nav-separator", { "onyx-nav-separator--horizontal": a.orientation === "horizontal" || r(e) }]),
+    const a = t, e = ce(xe);
+    return (o, n) => (s(), d("div", {
+      class: g(["onyx-nav-separator", { "onyx-nav-separator--horizontal": a.orientation === "horizontal" || i(e) }]),
       role: "separator",
       "aria-orientation": a.orientation
-    }, null, 10, Ko));
+    }, null, 10, Go));
   }
-}), Yo = { role: "presentation" }, Wo = /* @__PURE__ */ k({
+}), jo = { role: "presentation" }, Yo = /* @__PURE__ */ k({
   __name: "NavButtonLayout",
-  props: /* @__PURE__ */ It({
+  props: /* @__PURE__ */ he({
     href: {},
     withExternalIcon: { type: [Boolean, String] },
     label: {},
@@ -2407,34 +2401,34 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   }),
   emits: ["update:mobileChildrenOpen"],
   setup(t) {
-    const a = t, e = F(), { t: o } = P(), n = Lt(t, "mobileChildrenOpen");
-    return (l, i) => (s(), p("li", Yo, [
-      a.isMobile ? (s(), p(z, { key: 0 }, [
-        a.isMobile && n.value ? (s(), x(Te, {
+    const a = t, e = F(), { t: o } = P(), n = fe(t, "mobileChildrenOpen");
+    return (l, r) => (s(), d("li", jo, [
+      a.isMobile ? (s(), d(z, { key: 0 }, [
+        a.isMobile && n.value ? (s(), x(Le, {
           key: 0,
-          label: r(o)("back"),
+          label: i(o)("back"),
           mode: "plain",
           color: "neutral",
-          icon: r(Go),
-          onClick: i[0] || (i[0] = (u) => n.value = !1)
+          icon: i(Zo),
+          onClick: r[0] || (r[0] = (u) => n.value = !1)
         }, null, 8, ["label", "icon"])) : _("", !0),
         !n.value || a.href ? b(l.$slots, "button", { key: 1 }) : _("", !0),
-        n.value && a.href ? (s(), x(jo, {
+        n.value && a.href ? (s(), x(Ko, {
           key: 2,
           orientation: "horizontal"
         })) : _("", !0),
-        K(f("ul", {
+        j(v("ul", {
           role: "menu",
           class: g(["onyx-nav-button__mobile-children", { "onyx-nav-button__mobile-children--open": n.value }])
         }, [
           b(l.$slots, "options")
         ], 2), [
-          [ot, n.value]
+          [nt, n.value]
         ])
-      ], 64)) : (s(), x(Ct, {
+      ], 64)) : (s(), x(Mt, {
         key: 1,
-        label: r(o)("navItemOptionsLabel", { label: a.label })
-      }, he({
+        label: i(o)("navItemOptionsLabel", { label: a.label })
+      }, ve({
         default: $(() => [
           b(l.$slots, "button")
         ]),
@@ -2450,7 +2444,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       ]), 1032, ["label"]))
     ]));
   }
-}), Xo = ["aria-label"], Jo = { class: "onyx-truncation-ellipsis" }, Un = /* @__PURE__ */ k({
+}), Wo = ["aria-label"], Xo = { class: "onyx-truncation-ellipsis" }, Rn = /* @__PURE__ */ k({
   __name: "OnyxNavButton",
   props: {
     href: {},
@@ -2460,49 +2454,49 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["click"],
   setup(t, { emit: a }) {
-    const e = t, o = a, n = F(), l = ie(fe), i = E(!1), u = v(() => !!n.children), d = () => {
-      l != null && l.value && u.value && !i.value ? i.value = !0 : e.href && o("click", e.href);
+    const e = t, o = a, n = F(), l = ce(xe), r = E(!1), u = f(() => !!n.children), c = () => {
+      l != null && l.value && u.value && !r.value ? r.value = !0 : e.href && o("click", e.href);
     };
-    return (m, c) => (s(), x(Wo, B({
-      "mobile-children-open": i.value,
-      "onUpdate:mobileChildrenOpen": c[0] || (c[0] = (y) => i.value = y),
+    return (p, m) => (s(), x(Yo, B({
+      "mobile-children-open": r.value,
+      "onUpdate:mobileChildrenOpen": m[0] || (m[0] = (y) => r.value = y),
       class: ["onyx-nav-button", {
-        "onyx-nav-button--mobile": r(l),
-        "onyx-nav-button--active": e.active || i.value
+        "onyx-nav-button--mobile": i(l),
+        "onyx-nav-button--active": e.active || r.value
       }],
-      "is-mobile": r(l) ?? !1
-    }, e), he({
+      "is-mobile": i(l) ?? !1
+    }, e), ve({
       button: $(() => [
-        f("button", {
+        v("button", {
           class: "onyx-nav-button__trigger onyx-text",
           role: "menuitem",
           "aria-label": e.label,
           type: "button",
-          onClick: d
+          onClick: c
         }, [
-          b(m.$slots, "default", {}, () => [
-            f("span", Jo, M(e.label), 1),
-            S(ze, te(ae(e)), null, 16)
+          b(p.$slots, "default", {}, () => [
+            v("span", Xo, S(e.label), 1),
+            M(Re, te(ae(e)), null, 16)
           ]),
-          r(l) && u.value && !i.value ? (s(), x(A, {
+          i(l) && u.value && !r.value ? (s(), x(A, {
             key: 0,
             class: "onyx-nav-button__mobile-chevron",
-            icon: r(Zo)
+            icon: i(qo)
           }, null, 8, ["icon"])) : _("", !0)
-        ], 8, Xo)
+        ], 8, Wo)
       ]),
       _: 2
     }, [
       n.children ? {
         name: "options",
         fn: $(() => [
-          b(m.$slots, "children")
+          b(p.$slots, "children")
         ]),
         key: "0"
       } : void 0
     ]), 1040, ["mobile-children-open", "class", "is-mobile"]));
   }
-}), Fn = /* @__PURE__ */ k({
+}), Un = /* @__PURE__ */ k({
   __name: "OnyxNavItem",
   props: {
     href: {},
@@ -2513,30 +2507,30 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   emits: ["click"],
   setup(t, { emit: a }) {
     const e = t, o = a;
-    return (n, l) => (s(), x(wt, {
+    return (n, l) => (s(), x($t, {
       class: "onyx-nav-item",
       active: e.active,
       href: e.href ?? "javascript:void(0)",
-      onClick: l[0] || (l[0] = (i) => e.href && o("click", e.href))
+      onClick: l[0] || (l[0] = (r) => e.href && o("click", e.href))
     }, {
       default: $(() => [
         b(n.$slots, "default", {}, () => [
-          f("span", null, M(e.label), 1),
-          S(ze, te(ae(e)), null, 16)
+          v("span", null, S(e.label), 1),
+          M(Re, te(ae(e)), null, 16)
         ])
       ]),
       _: 3
     }, 8, ["active", "href"]));
   }
-}), Qo = (t) => {
-  const a = E(), e = E(Be(new Date(t.value).getTime())), o = v(() => e.value === 0);
+}), Jo = (t) => {
+  const a = E(), e = E(Oe(new Date(t.value).getTime())), o = f(() => e.value === 0);
   return G(
     t,
     (n) => {
       clearInterval(a.value);
       const l = new Date(n).getTime();
-      e.value = Be(l), a.value = setInterval(() => {
-        e.value = Be(l), o.value && clearInterval(a.value);
+      e.value = Oe(l), a.value = setInterval(() => {
+        e.value = Oe(l), o.value && clearInterval(a.value);
       }, 1e3);
     },
     { immediate: !0 }
@@ -2550,26 +2544,26 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
      */
     isEnded: o
   };
-}, Be = (t) => {
+}, Oe = (t) => {
   const a = t - Date.now();
   return Math.max(a, 0);
-}, $t = (t) => {
+}, St = (t) => {
   const a = Math.floor(t / 6e4 / 60), e = Math.floor(t / 6e4 % 60), o = Math.floor(t % 6e4 / 1e3);
   return { hours: a, minutes: e, seconds: o };
-}, el = (t, a) => {
-  const { hours: e, minutes: o, seconds: n } = $t(t), l = (d) => d.toString().padStart(2, "0");
-  let i = "", u = Oe(a.formatToParts(t, "seconds"));
-  return o > 0 && (u = Oe(a.formatToParts(t, "minutes"))), e > 0 && (u = Oe(a.formatToParts(t, "hours")), i = `${l(e)}:`), `${i}${l(o)}:${l(n)} ${u}`;
-}, Oe = (t) => {
+}, Qo = (t, a) => {
+  const { hours: e, minutes: o, seconds: n } = St(t), l = (c) => c.toString().padStart(2, "0");
+  let r = "", u = Ee(a.formatToParts(t, "seconds"));
+  return o > 0 && (u = Ee(a.formatToParts(t, "minutes"))), e > 0 && (u = Ee(a.formatToParts(t, "hours")), r = `${l(e)}:`), `${r}${l(o)}:${l(n)} ${u}`;
+}, Ee = (t) => {
   var a;
   return ((a = t.at(-1)) == null ? void 0 : a.value.replace(".", "").trim()) ?? "";
-}, tl = (t) => {
-  const { hours: a, minutes: e, seconds: o } = $t(t);
+}, el = (t) => {
+  const { hours: a, minutes: e, seconds: o } = St(t);
   return `PT${a}H${e}M${o}S`;
-}, al = ["aria-label"], ol = {
+}, tl = ["aria-label"], al = {
   key: 0,
   class: "onyx-timer__label"
-}, ll = ["datetime"], qn = /* @__PURE__ */ k({
+}, ol = ["datetime"], Fn = /* @__PURE__ */ k({
   __name: "OnyxTimer",
   props: {
     endTime: {},
@@ -2578,146 +2572,155 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["timerEnded"],
   setup(t, { emit: a }) {
-    const e = t, o = a, { locale: n } = P(), { timeLeft: l, isEnded: i } = Qo(v(() => e.endTime)), u = v(
+    const e = t, o = a, { locale: n } = P(), { timeLeft: l, isEnded: r } = Jo(f(() => e.endTime)), u = f(
       () => new Intl.RelativeTimeFormat(n.value, { numeric: "always", style: "short" })
-    ), d = v(() => el(l.value, u.value));
-    return J(() => i.value && o("timerEnded")), (m, c) => (s(), p("div", {
+    ), c = f(() => Qo(l.value, u.value));
+    return J(() => r.value && o("timerEnded")), (p, m) => (s(), d("div", {
       class: "onyx-timer onyx-text onyx-truncation-ellipsis",
       role: "timer",
       "aria-label": e.hideLabel ? e.label : void 0
     }, [
-      e.hideLabel ? _("", !0) : (s(), p("span", ol, M(e.label), 1)),
-      f("time", {
-        datetime: r(tl)(r(l)),
+      e.hideLabel ? _("", !0) : (s(), d("span", al, S(e.label), 1)),
+      v("time", {
+        datetime: i(el)(i(l)),
         class: "onyx-timer__time"
-      }, M(d.value), 9, ll)
-    ], 8, al));
+      }, S(c.value), 9, ol)
+    ], 8, tl));
   }
-}), nl = { class: "onyx-user-menu__footer onyx-text--small" }, sl = /* @__PURE__ */ k({
+}), ll = { class: "onyx-user-menu__footer onyx-text--small" }, nl = /* @__PURE__ */ k({
   __name: "UserMenuLayout",
-  props: {
+  props: /* @__PURE__ */ he({
     isMobile: { type: Boolean }
-  },
+  }, {
+    flyoutOpen: { type: Boolean, default: !1 },
+    flyoutOpenModifiers: {}
+  }),
+  emits: ["update:flyoutOpen"],
   setup(t) {
-    const a = t, e = F(), { t: o } = P();
-    return (n, l) => (s(), p("div", null, [
-      a.isMobile ? (s(), p(z, { key: 0 }, [
-        b(n.$slots, "header"),
-        b(n.$slots, "options"),
-        e.footer ? (s(), x(Ue, {
+    const a = t, e = fe(t, "flyoutOpen"), o = F(), { t: n } = P();
+    return (l, r) => (s(), d("div", null, [
+      a.isMobile ? (s(), d(z, { key: 0 }, [
+        b(l.$slots, "header"),
+        b(l.$slots, "options"),
+        o.footer ? (s(), x(Fe, {
           key: 0,
           class: "onyx-user-menu__mobile-footer",
           disabled: ""
         }, {
           default: $(() => [
-            b(n.$slots, "footer")
+            b(l.$slots, "footer")
           ]),
           _: 3
         })) : _("", !0)
-      ], 64)) : (s(), x(Ct, {
+      ], 64)) : (s(), x(Mt, {
         key: 1,
-        label: r(o)("navigation.userMenuLabel")
-      }, he({
+        label: i(n)("navigation.userMenuLabel"),
+        open: e.value
+      }, ve({
         header: $(() => [
-          b(n.$slots, "header")
+          b(l.$slots, "header")
         ]),
         options: $(() => [
-          b(n.$slots, "options")
+          b(l.$slots, "options")
         ]),
         default: $(() => [
-          b(n.$slots, "button")
+          b(l.$slots, "button")
         ]),
         _: 2
       }, [
-        e.footer ? {
+        o.footer ? {
           name: "footer",
           fn: $(() => [
-            f("div", nl, [
-              b(n.$slots, "footer")
+            v("div", ll, [
+              b(l.$slots, "footer")
             ])
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["label"]))
+      ]), 1032, ["label", "open"]))
     ]));
   }
-}), rl = {
+}), sl = {
   class: "onyx-user-menu__trigger onyx-text",
   type: "button"
-}, il = { class: "onyx-truncation-ellipsis" }, cl = { class: "onyx-user-menu__header" }, ul = { class: "onyx-truncation-ellipsis" }, dl = { class: "onyx-user-menu__username onyx-text onyx-truncation-ellipsis" }, pl = {
+}, rl = { class: "onyx-truncation-ellipsis" }, il = { class: "onyx-user-menu__header" }, cl = { class: "onyx-truncation-ellipsis" }, ul = { class: "onyx-user-menu__username onyx-text onyx-truncation-ellipsis" }, dl = {
   key: 0,
   class: "onyx-user-menu__description onyx-text--small onyx-truncation-ellipsis"
-}, ml = { class: "onyx-user-menu__options" }, Zn = /* @__PURE__ */ k({
+}, pl = { class: "onyx-user-menu__options" }, qn = /* @__PURE__ */ k({
   __name: "OnyxUserMenu",
-  props: {
+  props: /* @__PURE__ */ he({
     username: {},
     avatar: {},
-    description: {},
-    open: { type: Boolean }
-  },
+    description: {}
+  }, {
+    flyoutOpen: { type: Boolean, default: !1 },
+    flyoutOpenModifiers: {}
+  }),
+  emits: ["update:flyoutOpen"],
   setup(t) {
-    const a = t, e = F(), o = v(() => ({ src: a.avatar, label: a.username })), n = ie(
-      fe,
-      v(() => !1)
+    const a = t, e = fe(t, "flyoutOpen"), o = F(), n = f(() => ({ src: a.avatar, label: a.username })), l = ce(
+      xe,
+      f(() => !1)
     );
-    return (l, i) => (s(), x(sl, {
-      class: g(["onyx-user-menu", { "onyx-user-menu--mobile": r(n) }]),
-      "is-mobile": r(n)
-    }, he({
+    return (r, u) => (s(), x(nl, {
+      class: g(["onyx-user-menu", { "onyx-user-menu--mobile": i(l) }]),
+      "is-mobile": i(l),
+      "flyout-open": e.value
+    }, ve({
       button: $(() => [
-        f("button", rl, [
-          S(je, B(o.value, { size: "24px" }), null, 16),
-          f("span", il, M(a.username), 1)
+        v("button", sl, [
+          M(Ye, B(n.value, { size: "24px" }), null, 16),
+          v("span", rl, S(a.username), 1)
         ])
       ]),
       header: $(() => [
-        f("div", cl, [
-          S(je, te(ae(o.value)), null, 16),
-          f("div", ul, [
-            f("div", dl, M(a.username), 1),
-            a.description ? (s(), p("div", pl, M(a.description), 1)) : _("", !0)
+        v("div", il, [
+          M(Ye, te(ae(n.value)), null, 16),
+          v("div", cl, [
+            v("div", ul, S(a.username), 1),
+            a.description ? (s(), d("div", dl, S(a.description), 1)) : _("", !0)
           ])
         ])
       ]),
       options: $(() => [
-        f("div", ml, [
-          b(l.$slots, "default")
+        v("div", pl, [
+          b(r.$slots, "default")
         ])
       ]),
       _: 2
     }, [
-      e.footer ? {
+      o.footer ? {
         name: "footer",
         fn: $(() => [
-          b(l.$slots, "footer")
+          b(r.$slots, "footer")
         ]),
         key: "0"
       } : void 0
-    ]), 1032, ["class", "is-mobile"]));
+    ]), 1032, ["class", "is-mobile", "flyout-open"]));
   }
-}), yl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m20.207 9.707-1.414-1.414L11.086 16l7.707 7.707 1.414-1.414L13.914 16z"/></svg>', hl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M2 15h28v2H2zm0-7h28v2H2zm0 14h28v2H2z"/></svg>', vl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><circle cx="16" cy="5" r="3"/><circle cx="16" cy="16" r="3"/><circle cx="16" cy="27" r="3"/></svg>', fl = (t, a) => {
-  const e = "content-box", o = E(0), n = E(0), l = (i) => {
-    const u = i[0].contentBoxSize;
-    o.value = u.reduce((d, { inlineSize: m }) => d + m, 0), n.value = u.reduce((d, { blockSize: m }) => d + m, 0);
+}), ml = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m20.207 9.707-1.414-1.414L11.086 16l7.707 7.707 1.414-1.414L13.914 16z"/></svg>', yl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M2 15h28v2H2zm0-7h28v2H2zm0 14h28v2H2z"/></svg>', hl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><circle cx="16" cy="5" r="3"/><circle cx="16" cy="16" r="3"/><circle cx="16" cy="27" r="3"/></svg>', fl = (t, a) => {
+  const e = "content-box", o = E(0), n = E(0), l = (r) => {
+    const u = r[0].contentBoxSize;
+    o.value = u.reduce((c, { inlineSize: p }) => c + p, 0), n.value = u.reduce((c, { blockSize: p }) => c + p, 0);
   };
-  return Pe(() => {
-    const i = new ResizeObserver(l);
+  return Ne(() => {
+    const r = new ResizeObserver(l);
     G(
       t,
-      (u, d) => {
-        d && (i == null || i.unobserve(d)), u && (i == null || i.observe(u, { box: e }));
+      (u, c) => {
+        c && (r == null || r.unobserve(c)), u && (r == null || r.observe(u, { box: e }));
       },
       { immediate: !0 }
-    ), ye(() => i.disconnect());
+    ), ye(() => r.disconnect());
   }), { width: o, height: n };
-}, _l = {
+}, vl = {
   "2xs": 320,
   xs: 576,
   sm: 768,
   md: 992,
   lg: 1440,
   xl: 1920
-}, Gn = [
+}, Zn = [
   "primary",
   "secondary",
   "neutral",
@@ -2725,19 +2728,19 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   "warning",
   "success",
   "info"
-], Kn = ["small", "default", "large"], jn = ["ellipsis", "multiline"], Yn = ["horizontal", "vertical"], xl = { class: "onyx-nav-bar__content" }, bl = {
+], Gn = ["small", "default", "large"], Kn = ["ellipsis", "multiline"], jn = ["horizontal", "vertical"], _l = { class: "onyx-nav-bar__content" }, xl = {
   key: 0,
   class: "onyx-nav-bar__mobile-page onyx-truncation-ellipsis"
-}, gl = { role: "menubar" }, kl = { role: "menubar" }, wl = {
+}, bl = { role: "menubar" }, gl = { role: "menubar" }, kl = {
   key: 0,
   class: "onyx-nav-bar__mobile-context"
-}, Cl = {
+}, wl = {
   key: 0,
   class: "onyx-nav-bar__mobile-global-context"
-}, $l = { class: "onyx-nav-bar__mobile-context-content" }, Ml = {
+}, Cl = { class: "onyx-nav-bar__mobile-context-content" }, $l = {
   key: 1,
   class: "onyx-nav-bar__context"
-}, Wn = /* @__PURE__ */ k({
+}, Yn = /* @__PURE__ */ k({
   __name: "OnyxNavBar",
   props: {
     logoUrl: {},
@@ -2748,13 +2751,13 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["appAreaClick", "backButtonClick"],
   setup(t, { expose: a, emit: e }) {
-    const o = t, n = e, l = F(), i = E(), { width: u } = fl(i), { t: d } = P(), {
-      elements: { nav: m }
-    } = so({ navigationName: me(() => o.appName) }), c = E(!1), y = E(!1), h = v(() => {
-      const C = typeof o.mobileBreakpoint == "number" ? o.mobileBreakpoint : _l[o.mobileBreakpoint];
-      return u.value !== 0 && u.value < C;
+    const o = t, n = e, l = F(), r = E(), { width: u } = fl(r), { t: c } = P(), {
+      elements: { nav: p }
+    } = so({ navigationName: Te(() => o.appName) }), m = E(!1), y = E(!1), h = f(() => {
+      const w = typeof o.mobileBreakpoint == "number" ? o.mobileBreakpoint : vl[o.mobileBreakpoint];
+      return u.value !== 0 && u.value < w;
     });
-    return At(fe, h), a({
+    return At(xe, h), a({
       /**
        * Closes the mobile burger and context menu.
        * Useful if you want to e.g. close them when a nav item is clicked.
@@ -2769,128 +2772,128 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
        * ```
        */
       closeMobileMenus: () => {
-        c.value = !1, y.value = !1;
+        m.value = !1, y.value = !1;
       }
-    }), (C, V) => (s(), p("header", {
+    }), (w, V) => (s(), d("header", {
       ref_key: "navBarRef",
-      ref: i,
+      ref: r,
       class: g(["onyx-nav-bar", { "onyx-nav-bar--mobile": h.value }])
     }, [
-      f("div", xl, [
-        h.value && l.mobileActivePage && !c.value && !y.value ? (s(), p("span", bl, [
-          b(C.$slots, "mobileActivePage")
-        ])) : o.appName || o.logoUrl || l.appArea ? (s(), x(To, {
+      v("div", _l, [
+        h.value && l.mobileActivePage && !m.value && !y.value ? (s(), d("span", xl, [
+          b(w.$slots, "mobileActivePage")
+        ])) : o.appName || o.logoUrl || l.appArea ? (s(), x(Eo, {
           key: 1,
           class: "onyx-nav-bar__app",
           "app-name": o.appName,
           "logo-url": o.logoUrl,
           label: o.appAreaLabel,
           onClick: V[0] || (V[0] = (T) => {
-            n("appAreaClick"), c.value = !1;
+            n("appAreaClick"), m.value = !1;
           })
         }, {
           default: $(() => [
-            b(C.$slots, "appArea")
+            b(w.$slots, "appArea")
           ]),
           _: 3
         }, 8, ["app-name", "logo-url", "label"])) : _("", !0),
         o.withBackButton ? (s(), x(Za, {
           key: 2,
           class: "onyx-nav-bar__back",
-          label: r(d)("navigation.goBack"),
-          icon: r(yl),
+          label: i(c)("navigation.goBack"),
+          icon: i(ml),
           color: "neutral",
           onClick: V[1] || (V[1] = (T) => n("backButtonClick"))
         }, null, 8, ["label", "icon"])) : _("", !0),
-        l.default ? (s(), p(z, { key: 3 }, [
-          h.value ? (s(), x(Xe, {
+        l.default ? (s(), d(z, { key: 3 }, [
+          h.value ? (s(), x(Je, {
             key: 0,
-            open: c.value,
+            open: m.value,
             "onUpdate:open": [
-              V[2] || (V[2] = (T) => c.value = T),
+              V[2] || (V[2] = (T) => m.value = T),
               V[3] || (V[3] = (T) => y.value = !1)
             ],
             class: "onyx-nav-bar__burger",
-            icon: r(hl),
-            label: r(d)("navigation.toggleBurgerMenu"),
-            headline: r(d)("navigation.navigationHeadline")
+            icon: i(yl),
+            label: i(c)("navigation.toggleBurgerMenu"),
+            headline: i(c)("navigation.navigationHeadline")
           }, {
             default: $(() => [
-              f("nav", B({ class: "onyx-nav-bar__nav--mobile" }, r(m)), [
-                f("ul", gl, [
-                  b(C.$slots, "default")
+              v("nav", B({ class: "onyx-nav-bar__nav--mobile" }, i(p)), [
+                v("ul", bl, [
+                  b(w.$slots, "default")
                 ])
               ], 16)
             ]),
             _: 3
-          }, 8, ["open", "icon", "label", "headline"])) : (s(), p("nav", B({
+          }, 8, ["open", "icon", "label", "headline"])) : (s(), d("nav", B({
             key: 1,
             class: "onyx-nav-bar__nav"
-          }, r(m)), [
-            f("ul", kl, [
-              b(C.$slots, "default")
+          }, i(p)), [
+            v("ul", gl, [
+              b(w.$slots, "default")
             ])
           ], 16))
         ], 64)) : _("", !0),
-        l.contextArea || l.globalContextArea ? (s(), p(z, { key: 4 }, [
-          h.value ? (s(), p("div", wl, [
-            l.globalContextArea ? (s(), p("div", Cl, [
-              b(C.$slots, "globalContextArea")
+        l.contextArea || l.globalContextArea ? (s(), d(z, { key: 4 }, [
+          h.value ? (s(), d("div", kl, [
+            l.globalContextArea ? (s(), d("div", wl, [
+              b(w.$slots, "globalContextArea")
             ])) : _("", !0),
-            l.contextArea ? (s(), x(Xe, {
+            l.contextArea ? (s(), x(Je, {
               key: 1,
               open: y.value,
               "onUpdate:open": [
                 V[4] || (V[4] = (T) => y.value = T),
-                V[5] || (V[5] = (T) => c.value = !1)
+                V[5] || (V[5] = (T) => m.value = !1)
               ],
-              icon: r(vl),
-              label: r(d)("navigation.toggleContextMenu")
+              icon: i(hl),
+              label: i(c)("navigation.toggleContextMenu")
             }, {
               default: $(() => [
-                f("div", $l, [
-                  b(C.$slots, "contextArea")
+                v("div", Cl, [
+                  b(w.$slots, "contextArea")
                 ])
               ]),
               _: 3
             }, 8, ["open", "icon", "label"])) : _("", !0)
-          ])) : (s(), p("div", Ml, [
-            l.globalContextArea ? b(C.$slots, "globalContextArea", { key: 0 }) : _("", !0),
-            l.contextArea ? b(C.$slots, "contextArea", { key: 1 }) : _("", !0)
+          ])) : (s(), d("div", $l, [
+            l.globalContextArea ? b(w.$slots, "globalContextArea", { key: 0 }) : _("", !0),
+            l.contextArea ? b(w.$slots, "contextArea", { key: 1 }) : _("", !0)
           ]))
         ], 64)) : _("", !0)
       ])
     ], 2));
   }
-}), Sl = {
+}), Ml = {
   key: 0,
   class: "onyx-page__sidebar"
-}, Vl = { class: "onyx-page__main" }, Bl = {
+}, Sl = { class: "onyx-page__main" }, Vl = {
   key: 1,
   class: "onyx-page__footer"
-}, Xn = /* @__PURE__ */ k({
+}, Wn = /* @__PURE__ */ k({
   __name: "OnyxPageLayout",
   props: {
     footerAsideSidebar: { type: Boolean },
     hideSidebar: { type: Boolean }
   },
   setup(t) {
-    const a = t, e = F(), o = v(() => a.footerAsideSidebar ? "onyx-page--footer-partial" : "onyx-page--footer-full");
-    return (n, l) => (s(), p("div", {
+    const a = t, e = F(), o = f(() => a.footerAsideSidebar ? "onyx-page--footer-partial" : "onyx-page--footer-full");
+    return (n, l) => (s(), d("div", {
       class: g(["onyx-page", o.value])
     }, [
-      e.sidebar && !a.hideSidebar ? (s(), p("aside", Sl, [
+      e.sidebar && !a.hideSidebar ? (s(), d("aside", Ml, [
         b(n.$slots, "sidebar")
       ])) : _("", !0),
-      f("main", Vl, [
+      v("main", Sl, [
         b(n.$slots, "default")
       ]),
-      e.footer ? (s(), p("footer", Bl, [
+      e.footer ? (s(), d("footer", Vl, [
         b(n.$slots, "footer")
       ])) : _("", !0)
     ], 2));
   }
-}), Ol = ["title"], El = ["required", "name", "value", "checked", "disabled", "autofocus"], Je = /* @__PURE__ */ k({
+}), Bl = ["title"], Ol = ["required", "name", "value", "checked", "disabled", "autofocus"], Qe = /* @__PURE__ */ k({
   __name: "OnyxRadioButton",
   props: {
     density: {},
@@ -2908,26 +2911,26 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["change", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, o = a, { vCustomValidity: n } = le({ props: e, emit: o }), { densityClass: l } = D(e), i = (u) => {
-      const d = u.target.checked;
-      o("change", d);
+    const e = t, o = a, { vCustomValidity: n } = le({ props: e, emit: o }), { densityClass: l } = D(e), r = (u) => {
+      const c = u.target.checked;
+      o("change", c);
     };
-    return (u, d) => e.skeleton ? (s(), p("div", {
+    return (u, c) => e.skeleton ? (s(), d("div", {
       key: 0,
-      class: g(["onyx-radio-button-skeleton", r(l)])
+      class: g(["onyx-radio-button-skeleton", i(l)])
     }, [
-      S(R, { class: "onyx-radio-button-skeleton__input" }),
-      S(R, { class: "onyx-radio-button-skeleton__label" })
-    ], 2)) : (s(), p("label", {
+      M(R, { class: "onyx-radio-button-skeleton__input" }),
+      M(R, { class: "onyx-radio-button-skeleton__label" })
+    ], 2)) : (s(), d("label", {
       key: 1,
-      class: g(["onyx-radio-button", r(l)]),
-      title: r(rt)(e.customError)
+      class: g(["onyx-radio-button", i(l)]),
+      title: i(ct)(e.customError)
     }, [
       e.loading ? (s(), x(Q, {
         key: 0,
         class: "onyx-radio-button__loading",
         type: "circle"
-      })) : K((s(), p("input", {
+      })) : j((s(), d("input", {
         key: 1,
         class: "onyx-radio-button__selector",
         type: "radio",
@@ -2937,19 +2940,19 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
         checked: e.checked,
         disabled: e.disabled,
         autofocus: e.autofocus,
-        onChange: i
-      }, null, 40, El)), [
-        [r(n)]
+        onChange: r
+      }, null, 40, Ol)), [
+        [i(n)]
       ]),
-      f("span", {
+      v("span", {
         class: g(["onyx-radio-button__label", [`onyx-truncation-${e.truncation}`]])
-      }, M(e.label), 3)
-    ], 10, Ol));
+      }, S(e.label), 3)
+    ], 10, Bl));
   }
-}), Tl = ["disabled"], Il = {
+}), El = ["disabled"], Tl = {
   key: 0,
   class: "onyx-radio-button-group__headline"
-}, Jn = /* @__PURE__ */ k({
+}, Xn = /* @__PURE__ */ k({
   __name: "OnyxRadioGroup",
   props: {
     density: {},
@@ -2958,7 +2961,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     customError: {},
     truncation: { default: "ellipsis" },
     options: {},
-    name: { default: () => W("radio-button-group-name") },
+    name: { default: () => K("radio-button-group-name") },
     modelValue: {},
     headline: { default: "" },
     disabled: { type: Boolean, default: !1 },
@@ -2967,56 +2970,56 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, { densityClass: o } = D(e), { requiredMarkerClass: n, requiredTypeClass: l } = ve(e), i = a, u = (d, m) => {
-      d && i("update:modelValue", m);
+    const e = t, { densityClass: o } = D(e), { requiredMarkerClass: n, requiredTypeClass: l } = _e(e), r = a, u = (c, p) => {
+      c && r("update:modelValue", p);
     };
-    return (d, m) => (s(), p("fieldset", {
-      class: g(["onyx-radio-button-group", r(o), r(l)]),
+    return (c, p) => (s(), d("fieldset", {
+      class: g(["onyx-radio-button-group", i(o), i(l)]),
       disabled: e.disabled,
       role: "radiogroup"
     }, [
-      e.headline ? (s(), p("legend", Il, [
-        S(re, {
+      e.headline ? (s(), d("legend", Tl, [
+        M(ie, {
           is: "h3",
-          class: g(r(n))
+          class: g(i(n))
         }, {
           default: $(() => [
-            U(M(e.headline), 1)
+            U(S(e.headline), 1)
           ]),
           _: 1
         }, 8, ["class"])
       ])) : _("", !0),
-      f("div", {
+      v("div", {
         class: g(["onyx-radio-button-group__content", { "onyx-radio-button-group__content--horizontal": e.direction === "horizontal" }])
       }, [
-        e.skeleton === void 0 ? (s(!0), p(z, { key: 0 }, X(e.options, (c, y) => (s(), x(Je, B({
-          key: c.value.toString(),
+        e.skeleton === void 0 ? (s(!0), d(z, { key: 0 }, X(e.options, (m, y) => (s(), x(Qe, B({
+          key: m.value.toString(),
           ref_for: !0
-        }, c, {
+        }, m, {
           name: e.name,
           "custom-error": e.customError,
-          checked: c.value === e.modelValue,
+          checked: m.value === e.modelValue,
           required: e.required,
-          truncation: c.truncation ?? e.truncation,
-          onValidityChange: (h) => y === 0 && i("validityChange", h),
-          onChange: (h) => u(h, c.value)
-        }), null, 16, ["name", "custom-error", "checked", "required", "truncation", "onValidityChange", "onChange"]))), 128)) : (s(!0), p(z, { key: 1 }, X(e.skeleton, (c) => (s(), x(Je, {
-          id: `skeleton-${c}`,
-          key: c,
-          value: `skeleton-${c}`,
+          truncation: m.truncation ?? e.truncation,
+          onValidityChange: (h) => y === 0 && r("validityChange", h),
+          onChange: (h) => u(h, m.value)
+        }), null, 16, ["name", "custom-error", "checked", "required", "truncation", "onValidityChange", "onChange"]))), 128)) : (s(!0), d(z, { key: 1 }, X(e.skeleton, (m) => (s(), x(Qe, {
+          id: `skeleton-${m}`,
+          key: m,
+          value: `skeleton-${m}`,
           label: "Skeleton ${i}",
           name: e.name,
           skeleton: ""
         }, null, 8, ["id", "value", "name"]))), 128))
       ], 2)
-    ], 10, Tl));
+    ], 10, El));
   }
-}), Ll = (t) => {
+}), Il = (t) => {
   const e = E(!1), o = (l) => {
-    const i = l.target;
-    if (!(i instanceof Element)) return;
-    const u = r(t.offset) ?? 0;
-    e.value = Math.abs(i.scrollTop) + i.clientHeight >= i.scrollHeight - u - 1;
+    const r = l.target;
+    if (!(r instanceof Element)) return;
+    const u = i(t.offset) ?? 0;
+    e.value = Math.abs(r.scrollTop) + r.clientHeight >= r.scrollHeight - u - 1;
   };
   return { vScrollEnd: {
     mounted: (l) => {
@@ -3026,7 +3029,15 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       });
     }
   }, isScrollEnd: e };
-}, Al = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m22.29 18.83 1.41 1.41-7.71 7.71-7.71-7.71 1.41-1.41 6.29 6.29 6.29-6.29ZM16 6.87l6.29 6.29 1.41-1.41-7.71-7.71-7.71 7.71 1.41 1.41 6.29-6.29Z"/></svg>', Hl = { class: "onyx-select-input__wrapper" }, Dl = ["readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"], Pl = ["aria-label", "disabled"], Nl = /* @__PURE__ */ k({
+}, et = (t, a, e) => {
+  const o = f(() => t.value === void 0), n = E(o.value ? a : t.value);
+  return f({
+    set: (l) => {
+      n.value = l, e(l);
+    },
+    get: () => o.value ? n.value : t.value
+  });
+}, Ll = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m22.29 18.83 1.41 1.41-7.71 7.71-7.71-7.71 1.41-1.41 6.29 6.29 6.29-6.29ZM16 6.87l6.29 6.29 1.41-1.41-7.71-7.71-7.71 7.71 1.41 1.41 6.29-6.29Z"/></svg>', Al = { class: "onyx-select-input__wrapper" }, Hl = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"], Dl = ["aria-label", "disabled"], Pl = /* @__PURE__ */ k({
   inheritAttrs: !1,
   __name: "OnyxSelectInput",
   props: {
@@ -3037,6 +3048,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     modelValue: {},
     textMode: {},
     autofocus: { type: Boolean },
+    id: {},
     label: {},
     labelTooltip: {},
     hideLabel: { type: Boolean, default: !1 },
@@ -3052,19 +3064,19 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["click", "validityChange"],
   setup(t, { expose: a, emit: e }) {
-    const { rootAttrs: o, restAttrs: n } = kt(), l = t, i = e, { t: u } = P(), { vCustomValidity: d, errorMessages: m } = le({ props: l, emit: i }), c = v(() => l.modelValue ? l.modelValue.length : 0), y = v(() => {
+    const { rootAttrs: o, restAttrs: n } = Ct(), l = t, r = e, { t: u } = P(), { vCustomValidity: c, errorMessages: p } = le({ props: l, emit: r }), m = f(() => l.modelValue ? l.modelValue.length : 0), y = f(() => {
       var H;
       const L = (H = l.modelValue) == null ? void 0 : H.length;
       if (!l.modelValue || !L) return "";
       if (L === 1) return l.modelValue[0].label;
       switch (l.textMode) {
         case "preview":
-          return l.modelValue.map(({ label: j }) => j).join(", ");
+          return l.modelValue.map(({ label: Y }) => Y).join(", ");
         case "summary":
         default:
           return u.value("selections.currentSelection", { n: L });
       }
-    }), h = E(!1), { densityClass: C } = D(l), V = E();
+    }), h = E(!1), { densityClass: w } = D(l), V = E();
     a({ focus: () => {
       var L;
       return (L = V.value) == null ? void 0 : L.focus();
@@ -3074,44 +3086,45 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
         h.value || H && L === !1 && (h.value = !0);
       }
     );
-    const T = ft.concat(_t), ee = (L) => {
+    const T = xt.concat(bt), ee = (L) => {
       T.includes(L.key) || L.preventDefault();
     };
-    return (L, H) => l.skeleton ? (s(), p("div", B({
+    return (L, H) => l.skeleton ? (s(), d("div", B({
       key: 0,
-      class: ["onyx-select-input-skeleton", r(C)]
-    }, r(o)), [
+      class: ["onyx-select-input-skeleton", i(w)]
+    }, i(o)), [
       l.hideLabel ? _("", !0) : (s(), x(R, {
         key: 0,
         class: "onyx-select-input-skeleton__label"
       })),
-      S(R, { class: "onyx-select-input-skeleton__input" })
-    ], 16)) : (s(), p("div", B({
+      M(R, { class: "onyx-select-input-skeleton__input" })
+    ], 16)) : (s(), d("div", B({
       key: 1,
       class: [
         "onyx-select-input",
-        r(C),
+        i(w),
         l.readonly ? "onyx-select-input--readonly" : "onyx-select-input--editable"
       ]
-    }, r(o)), [
-      S(Re, B(l, { "error-messages": r(m) }), {
-        default: $(() => [
-          f("div", Hl, [
+    }, i(o)), [
+      M(Ue, B(l, { "error-messages": i(p) }), {
+        default: $(({ id: Y }) => [
+          v("div", Al, [
             l.loading ? (s(), x(Q, {
               key: 0,
               class: "onyx-select-input__loading",
               type: "circle"
             })) : _("", !0),
-            K(f("input", B({
+            j(v("input", B({
+              id: Y,
               ref_key: "input",
               ref: V,
               class: {
                 "onyx-select-input__native": !0,
                 "onyx-select-input__native--show-focus": l.showFocus,
                 "onyx-truncation-ellipsis": !0,
-                "onyx-select-input__native--force-invalid": r(m) && h.value
+                "onyx-select-input__native--force-invalid": i(p) && h.value
               }
-            }, r(n), {
+            }, i(n), {
               type: "text",
               readonly: l.readonly,
               placeholder: l.placeholder,
@@ -3121,46 +3134,46 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
               title: l.hideLabel ? l.label : void 0,
               value: y.value,
               autofocus: l.autofocus,
-              onClick: H[0] || (H[0] = (j) => i("click")),
+              onClick: H[0] || (H[0] = (se) => r("click")),
               onKeydown: ee
-            }), null, 16, Dl), [
-              [r(d)]
+            }), null, 16, Hl), [
+              [i(c)]
             ]),
-            l.textMode === "preview" && c.value > 0 ? (s(), x(bt, {
+            l.textMode === "preview" && m.value > 0 ? (s(), x(kt, {
               key: 1,
               text: y.value,
               position: "bottom"
             }, {
               default: $(() => [
-                S(Gt, {
+                M(Gt, {
                   class: "onyx-select-input__badge",
                   color: "neutral"
                 }, {
                   default: $(() => [
-                    U(M(c.value), 1)
+                    U(S(m.value), 1)
                   ]),
                   _: 1
                 })
               ]),
               _: 1
             }, 8, ["text"])) : _("", !0),
-            f("button", {
+            v("button", {
               class: "onyx-select-input__button",
               type: "button",
-              "aria-label": r(u)("select.toggleDropDown"),
+              "aria-label": i(u)("select.toggleDropDown"),
               tabindex: "-1",
               disabled: l.readonly || l.disabled || l.loading,
-              onClick: H[1] || (H[1] = (j) => i("click"))
+              onClick: H[1] || (H[1] = (se) => r("click"))
             }, [
-              S(A, { icon: r(Al) }, null, 8, ["icon"])
-            ], 8, Pl)
+              M(A, { icon: i(Ll) }, null, 8, ["icon"])
+            ], 8, Dl)
           ])
         ]),
         _: 1
       }, 16, ["error-messages"])
     ], 16));
   }
-}), zl = ["checked", "aria-labelledby", "disabled", "indeterminate"], Qe = /* @__PURE__ */ k({
+}), Nl = ["checked", "aria-labelledby", "disabled", "indeterminate"], tt = /* @__PURE__ */ k({
   __name: "OnyxSelectOption",
   props: {
     active: { type: Boolean, default: !1 },
@@ -3172,13 +3185,13 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   setup(t) {
     const a = t;
-    return (e, o) => (s(), x(Ue, B({ class: "onyx-select-option" }, a, {
+    return (e, o) => (s(), x(Fe, B({ class: "onyx-select-option" }, a, {
       checked: !!e.$attrs["aria-checked"],
       selected: !!e.$attrs["aria-selected"],
       disabled: !!e.$attrs["aria-disabled"]
     }), {
       default: $(() => [
-        a.multiple ? (s(), p("input", {
+        a.multiple ? (s(), d("input", {
           key: 0,
           checked: !!e.$attrs["aria-checked"],
           "aria-labelledby": e.$attrs.id,
@@ -3188,12 +3201,12 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
           tabindex: "-1",
           class: "onyx-select-option__checkbox",
           type: "checkbox"
-        }, null, 8, zl)) : _("", !0),
+        }, null, 8, Nl)) : _("", !0),
         a.icon ? (s(), x(A, {
           key: 1,
           icon: a.icon
         }, null, 8, ["icon"])) : _("", !0),
-        f("span", {
+        v("span", {
           class: g([`onyx-truncation-${a.truncation}`])
         }, [
           b(e.$slots, "default")
@@ -3202,27 +3215,27 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
       _: 3
     }, 16, ["checked", "selected", "disabled"]));
   }
-}), Rl = ["inert", "aria-busy"], Ul = {
+}), zl = ["inert", "aria-busy"], Rl = {
   class: "onyx-select__wrapper",
   tabindex: "-1"
-}, Fl = {
+}, Ul = {
   key: 0,
   role: "group",
   class: "onyx-select__group"
-}, ql = {
+}, Fl = {
   role: "option",
   "aria-selected": "false"
-}, Zl = {
+}, ql = {
   key: 0,
   role: "presentation",
   class: "onyx-select__group-name onyx-text--small"
-}, Gl = {
+}, Zl = {
   key: 1,
   class: "onyx-select__slot"
-}, Kl = {
+}, Gl = {
   key: 2,
   class: "onyx-select__slot"
-}, Qn = /* @__PURE__ */ k({
+}, Jn = /* @__PURE__ */ k({
   __name: "OnyxSelect",
   props: {
     density: {},
@@ -3236,6 +3249,7 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     customError: {},
     textMode: {},
     autofocus: { type: Boolean },
+    id: {},
     label: {},
     labelTooltip: {},
     hideLabel: { type: Boolean },
@@ -3256,213 +3270,213 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "update:searchTerm", "update:open", "lazyLoad", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, o = a, { densityClass: n } = D(e), l = F(), { t: i } = P(), u = He(
-      me(() => e.searchTerm),
+    const e = t, o = a, { densityClass: n } = D(e), l = F(), { t: r } = P(), u = et(
+      Te(() => e.searchTerm),
       "",
-      (w) => o("update:searchTerm", w)
-    ), d = He(
-      me(() => e.open),
+      (C) => o("update:searchTerm", C)
+    ), c = et(
+      Te(() => e.open),
       !1,
-      (w) => o("update:open", w)
-    ), m = E(), c = E(), y = v(() => e.modelValue ? e.multiple && Array.isArray(e.modelValue) ? e.modelValue : [e.modelValue] : []), h = E(), C = E();
+      (C) => o("update:open", C)
+    ), p = E(), m = E(), y = f(() => e.modelValue ? e.multiple && Array.isArray(e.modelValue) ? e.modelValue : [e.modelValue] : []), h = E(), w = E();
     G(
       y,
       () => {
-        var w;
-        e.multiple || (c.value = (w = y.value.at(0)) == null ? void 0 : w.value);
+        var C;
+        e.multiple || (m.value = (C = y.value.at(0)) == null ? void 0 : C.value);
       },
       { immediate: !0 }
     );
-    const V = W("ONYX_CHECK_ALL"), T = v(() => (e.multiple && e.withCheckAll && !u.value ? [V] : []).concat(
-      qe.value
-    )), ee = async (w) => {
+    const V = K("ONYX_CHECK_ALL"), T = f(() => (e.multiple && e.withCheckAll && !u.value ? [V] : []).concat(
+      Ze.value
+    )), ee = async (C) => {
       var I, N;
       if (e.readonly) {
-        d.value = !1;
+        c.value = !1;
         return;
       }
-      d.value = !d.value, d.value ? (await Ht(), (N = h.value) == null || N.focus()) : (u.value && (u.value = ""), w || (I = C.value) == null || I.focus());
-    }, L = () => c.value = T.value.at(0), H = () => c.value = T.value.at(-1), j = (w) => {
-      const I = T.value.findIndex((N) => N === w);
-      I < T.value.length - 1 && (c.value = T.value[I + 1]);
-    }, _e = (w) => {
-      const I = T.value.findIndex((N) => N === w);
-      I > 0 && (c.value = T.value[I - 1]);
-    }, xe = (w) => {
-      const I = e.options.find((N) => N.label.toLowerCase().trim().startsWith(w.toLowerCase()));
-      I && (c.value = I.value);
-    }, ue = (w) => u.value = w, be = (w) => {
-      var Y;
-      if (w === V) {
-        (Y = pe.value) == null || Y.handleChange(!pe.value.state.value.modelValue);
+      c.value = !c.value, c.value ? (await Ht(), (N = h.value) == null || N.focus()) : (u.value && (u.value = ""), C || (I = w.value) == null || I.focus());
+    }, L = () => m.value = T.value.at(0), H = () => m.value = T.value.at(-1), Y = (C) => {
+      const I = T.value.findIndex((N) => N === C);
+      I < T.value.length - 1 && (m.value = T.value[I + 1]);
+    }, se = (C) => {
+      const I = T.value.findIndex((N) => N === C);
+      I > 0 && (m.value = T.value[I - 1]);
+    }, be = (C) => {
+      const I = e.options.find((N) => N.label.toLowerCase().trim().startsWith(C.toLowerCase()));
+      I && (m.value = I.value);
+    }, de = (C) => u.value = C, ge = (C) => {
+      var W;
+      if (C === V) {
+        (W = me.value) == null || W.handleChange(!me.value.state.value.modelValue);
         return;
       }
-      const I = e.options.find(({ value: q }) => q === w);
+      const I = e.options.find(({ value: q }) => q === C);
       if (!I)
         return;
       if (!e.multiple)
         return o("update:modelValue", I);
-      y.value.some(({ value: q }) => q === w) ? o(
+      y.value.some(({ value: q }) => q === C) ? o(
         "update:modelValue",
-        y.value.filter(({ value: q }) => q !== w)
+        y.value.filter(({ value: q }) => q !== C)
       ) : o("update:modelValue", [...y.value, I]);
-    }, ge = v(() => e.withSearch ? "list" : "none"), {
-      elements: { input: se, option: de, group: ke, listbox: we }
+    }, ke = f(() => e.withSearch ? "list" : "none"), {
+      elements: { input: re, option: pe, group: we, listbox: Ce }
     } = oo({
-      autocomplete: ge,
+      autocomplete: ke,
       label: e.label,
       listLabel: e.listLabel,
-      inputValue: v(() => e.withSearch && u.value || ""),
-      activeOption: v(() => c.value),
-      multiple: v(() => e.multiple),
-      isExpanded: d,
-      templateRef: m,
+      inputValue: f(() => e.withSearch && u.value || ""),
+      activeOption: f(() => m.value),
+      multiple: f(() => e.multiple),
+      isExpanded: c,
+      templateRef: p,
       onToggle: ee,
       onActivateFirst: L,
       onActivateLast: H,
-      onActivateNext: j,
-      onActivatePrevious: _e,
-      onTypeAhead: xe,
-      onAutocomplete: ue,
-      onSelect: be
-    }), Ce = v(() => Va(e.options, "group")), { vScrollEnd: O, isScrollEnd: $e } = Ll({
-      enabled: v(() => {
-        var w;
-        return ((w = e.lazyLoading) == null ? void 0 : w.enabled) ?? !1;
+      onActivateNext: Y,
+      onActivatePrevious: se,
+      onTypeAhead: be,
+      onAutocomplete: de,
+      onSelect: ge
+    }), $e = f(() => Va(e.options, "group")), { vScrollEnd: O, isScrollEnd: Me } = Il({
+      enabled: f(() => {
+        var C;
+        return ((C = e.lazyLoading) == null ? void 0 : C.enabled) ?? !1;
       }),
-      loading: v(() => e.loading),
-      offset: v(() => {
-        var w;
-        return (w = e.lazyLoading) == null ? void 0 : w.scrollOffset;
+      loading: f(() => e.loading),
+      offset: f(() => {
+        var C;
+        return (C = e.lazyLoading) == null ? void 0 : C.scrollOffset;
       })
-    }), Me = v(() => {
+    }), Se = f(() => {
       if (!e.options.length)
-        return e.withSearch && u.value ? i.value("select.noMatch") : i.value("select.empty");
-    }), qe = v(
-      () => e.options.filter((w) => !w.disabled).map(({ value: w }) => w)
-    ), pe = v(() => {
+        return e.withSearch && u.value ? r.value("select.noMatch") : r.value("select.empty");
+    }), Ze = f(
+      () => e.options.filter((C) => !C.disabled).map(({ value: C }) => C)
+    ), me = f(() => {
       if (!(!e.multiple || !e.withCheckAll))
-        return it(
-          qe,
-          v(() => y.value.map(({ value: w }) => w)),
-          (w) => {
-            const I = w.map((N) => e.options.find(({ value: Y }) => Y === N)).filter((N) => N != null);
+        return ut(
+          Ze,
+          f(() => y.value.map(({ value: C }) => C)),
+          (C) => {
+            const I = C.map((N) => e.options.find(({ value: W }) => W === N)).filter((N) => N != null);
             o("update:modelValue", I);
           }
         );
-    }), Ze = v(() => {
+    }), Ge = f(() => {
       var I;
       if (!e.multiple)
         return "";
-      const w = i.value("selections.selectAll");
-      return typeof e.withCheckAll == "boolean" ? w : ((I = e.withCheckAll) == null ? void 0 : I.label) ?? w;
+      const C = r.value("selections.selectAll");
+      return typeof e.withCheckAll == "boolean" ? C : ((I = e.withCheckAll) == null ? void 0 : I.label) ?? C;
     });
     J(() => {
-      $e.value && o("lazyLoad");
+      Me.value && o("lazyLoad");
     });
-    const St = v(() => {
-      const w = {
+    const Bt = f(() => {
+      const C = {
         ...e,
         modelValue: y.value
       };
-      return e.withSearch ? { ...w, onKeydown: se.value.onKeydown } : { ...w, ...se.value };
+      return e.withSearch ? { ...C, onKeydown: re.value.onKeydown } : { ...C, ...re.value };
     });
-    return (w, I) => {
+    return (C, I) => {
       var N;
-      return s(), p("div", {
+      return s(), d("div", {
         ref_key: "selectRef",
-        ref: m,
+        ref: p,
         class: "onyx-select-wrapper"
       }, [
-        S(Nl, B({
+        M(Pl, B({
           ref_key: "selectInput",
-          ref: C
-        }, St.value, {
-          "show-focus": r(d),
+          ref: w
+        }, Bt.value, {
+          "show-focus": i(c),
           autofocus: e.autofocus,
           onClick: ee,
-          onValidityChange: I[0] || (I[0] = (Y) => o("validityChange", Y))
+          onValidityChange: I[0] || (I[0] = (W) => o("validityChange", W))
         }), null, 16, ["show-focus", "autofocus"]),
-        f("div", {
-          class: g(["onyx-select", r(n), r(d) ? "onyx-select--open" : ""]),
-          inert: !r(d),
+        v("div", {
+          class: g(["onyx-select", i(n), i(c) ? "onyx-select--open" : ""]),
+          inert: !i(c),
           "aria-busy": e.loading
         }, [
-          K((s(), p("div", Ul, [
-            e.withSearch ? (s(), x(wo, B({
+          j((s(), d("div", Rl, [
+            e.withSearch ? (s(), x(ko, B({
               key: 0,
               ref_key: "miniSearch",
               ref: h
-            }, r(se), {
-              label: r(i)("select.searchInputLabel"),
+            }, i(re), {
+              label: i(r)("select.searchInputLabel"),
               class: "onyx-select__search",
-              onClear: I[1] || (I[1] = (Y) => u.value = "")
+              onClear: I[1] || (I[1] = (W) => u.value = "")
             }), null, 16, ["label"])) : _("", !0),
-            f("div", te(ae(r(we))), [
-              Me.value ? (s(), p("ul", Fl, [
-                f("li", ql, [
-                  b(w.$slots, "empty", { defaultMessage: Me.value }, () => [
-                    S(ut, null, {
+            v("div", te(ae(i(Ce))), [
+              Se.value ? (s(), d("ul", Ul, [
+                v("li", Fl, [
+                  b(C.$slots, "empty", { defaultMessage: Se.value }, () => [
+                    M(pt, null, {
                       default: $(() => [
-                        U(M(Me.value), 1)
+                        U(S(Se.value), 1)
                       ]),
                       _: 1
                     })
                   ])
                 ])
-              ])) : (s(!0), p(z, { key: 1 }, X(Ce.value, (Y, q) => {
-                var Ge, Ke;
-                return s(), p("ul", B({
+              ])) : (s(!0), d(z, { key: 1 }, X($e.value, (W, q) => {
+                var Ke, je;
+                return s(), d("ul", B({
                   key: q,
                   class: "onyx-select__group",
                   ref_for: !0
-                }, r(ke)({ label: q })), [
-                  q != "" ? (s(), p("li", Zl, M(q), 1)) : _("", !0),
-                  e.multiple && e.withCheckAll && !r(u) ? (s(), x(Qe, B(
+                }, i(we)({ label: q })), [
+                  q != "" ? (s(), d("li", ql, S(q), 1)) : _("", !0),
+                  e.multiple && e.withCheckAll && !i(u) ? (s(), x(tt, B(
                     {
                       key: 1,
                       ref_for: !0
                     },
-                    r(de)({
-                      value: r(V),
-                      label: Ze.value,
-                      selected: (Ge = pe.value) == null ? void 0 : Ge.state.value.modelValue
+                    i(pe)({
+                      value: i(V),
+                      label: Ge.value,
+                      selected: (Ke = me.value) == null ? void 0 : Ke.state.value.modelValue
                     }),
                     {
                       multiple: "",
-                      active: r(V) === c.value,
-                      indeterminate: (Ke = pe.value) == null ? void 0 : Ke.state.value.indeterminate,
+                      active: i(V) === m.value,
+                      indeterminate: (je = me.value) == null ? void 0 : je.state.value.indeterminate,
                       density: e.density,
                       class: "onyx-select__check-all"
                     }
                   ), {
                     default: $(() => [
-                      U(M(Ze.value), 1)
+                      U(S(Ge.value), 1)
                     ]),
                     _: 1
                   }, 16, ["active", "indeterminate", "density"])) : _("", !0),
-                  (s(!0), p(z, null, X(Y, (Z) => (s(), x(Qe, B(
+                  (s(!0), d(z, null, X(W, (Z) => (s(), x(tt, B(
                     {
                       key: Z.value.toString(),
                       ref_for: !0
                     },
-                    r(de)({
+                    i(pe)({
                       value: Z.value,
                       label: Z.label,
                       disabled: Z.disabled,
-                      selected: y.value.some(({ value: Vt }) => Vt === Z.value)
+                      selected: y.value.some(({ value: Ot }) => Ot === Z.value)
                     }),
                     {
                       multiple: e.multiple,
-                      active: Z.value === c.value,
+                      active: Z.value === m.value,
                       icon: Z.icon,
                       density: e.density,
                       truncation: Z.truncation ?? e.truncation
                     }
                   ), {
                     default: $(() => [
-                      b(w.$slots, "option", B({ ref_for: !0 }, Z), () => [
-                        U(M(Z.label), 1)
+                      b(C.$slots, "option", B({ ref_for: !0 }, Z), () => [
+                        U(S(Z.label), 1)
                       ])
                     ]),
                     _: 2
@@ -3470,20 +3484,20 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
                 ], 16);
               }), 128))
             ], 16),
-            (N = e.lazyLoading) != null && N.loading ? (s(), p("div", Gl, [
-              S(Q, { class: "onyx-select__loading" })
+            (N = e.lazyLoading) != null && N.loading ? (s(), d("div", Zl, [
+              M(Q, { class: "onyx-select__loading" })
             ])) : _("", !0),
-            l.optionsEnd ? (s(), p("div", Kl, [
-              b(w.$slots, "optionsEnd")
+            l.optionsEnd ? (s(), d("div", Gl, [
+              b(C.$slots, "optionsEnd")
             ])) : _("", !0)
           ])), [
-            [r(O)]
+            [i(O)]
           ])
-        ], 10, Rl)
+        ], 10, zl)
       ], 512);
     };
   }
-}), es = ["summary", "preview"], jl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m21.311 10.793-8.293 8.293-3.291-3.292-1.415 1.415 4.706 4.705 9.707-9.707z"/></svg>', Yl = { class: "onyx-switch-skeleton__click-area" }, Wl = ["title"], Xl = ["aria-label", "disabled", "required", "autofocus"], Jl = { class: "onyx-switch__click-area" }, Ql = { class: "onyx-switch__container" }, en = { class: "onyx-switch__icon" }, tn = /* @__PURE__ */ f("div", { class: "onyx-switch__frame" }, null, -1), ts = /* @__PURE__ */ k({
+}), Qn = ["summary", "preview"], Kl = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m21.311 10.793-8.293 8.293-3.291-3.292-1.415 1.415 4.706 4.705 9.707-9.707z"/></svg>', jl = { class: "onyx-switch-skeleton__click-area" }, Yl = ["title"], Wl = ["aria-label", "disabled", "required", "autofocus"], Xl = { class: "onyx-switch__click-area" }, Jl = { class: "onyx-switch__container" }, Ql = { class: "onyx-switch__icon" }, en = /* @__PURE__ */ v("div", { class: "onyx-switch__frame" }, null, -1), es = /* @__PURE__ */ k({
   __name: "OnyxSwitch",
   props: {
     density: {},
@@ -3501,30 +3515,30 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, o = a, { requiredMarkerClass: n, requiredTypeClass: l } = ve(e), { densityClass: i } = D(e), { vCustomValidity: u } = le({ props: e, emit: o }), d = v({
+    const e = t, o = a, { requiredMarkerClass: n, requiredTypeClass: l } = _e(e), { densityClass: r } = D(e), { vCustomValidity: u } = le({ props: e, emit: o }), c = f({
       get: () => e.modelValue,
-      set: (m) => {
-        o("update:modelValue", m);
+      set: (p) => {
+        o("update:modelValue", p);
       }
     });
-    return (m, c) => e.skeleton ? (s(), p("div", {
+    return (p, m) => e.skeleton ? (s(), d("div", {
       key: 0,
-      class: g(["onyx-switch-skeleton", r(i)])
+      class: g(["onyx-switch-skeleton", i(r)])
     }, [
-      f("span", Yl, [
-        S(R, { class: "onyx-switch-skeleton__input" })
+      v("span", jl, [
+        M(R, { class: "onyx-switch-skeleton__input" })
       ]),
       e.hideLabel ? _("", !0) : (s(), x(R, {
         key: 0,
         class: "onyx-switch-skeleton__label"
       }))
-    ], 2)) : (s(), p("label", {
+    ], 2)) : (s(), d("label", {
       key: 1,
-      class: g(["onyx-switch", [r(l), r(i)]]),
+      class: g(["onyx-switch", [i(l), i(r)]]),
       title: e.hideLabel ? e.label : void 0
     }, [
-      K(f("input", {
-        "onUpdate:modelValue": c[0] || (c[0] = (y) => d.value = y),
+      j(v("input", {
+        "onUpdate:modelValue": m[0] || (m[0] = (y) => c.value = y),
         type: "checkbox",
         role: "switch",
         class: g({ "onyx-switch__input": !0, "onyx-switch__loading": e.loading }),
@@ -3532,43 +3546,43 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
         disabled: e.disabled || e.loading,
         required: e.required,
         autofocus: e.autofocus
-      }, null, 10, Xl), [
-        [tt, d.value],
-        [r(u)]
+      }, null, 10, Wl), [
+        [ot, c.value],
+        [i(u)]
       ]),
-      f("span", Jl, [
-        f("span", Ql, [
-          f("span", en, [
-            e.loading ? (s(), x(r(Q), {
+      v("span", Xl, [
+        v("span", Jl, [
+          v("span", Ql, [
+            e.loading ? (s(), x(i(Q), {
               key: 0,
               class: "onyx-switch__spinner",
               type: "circle"
-            })) : (s(), x(r(A), {
+            })) : (s(), x(i(A), {
               key: 1,
-              icon: d.value ? r(jl) : r(Fe)
+              icon: c.value ? i(Kl) : i(qe)
             }, null, 8, ["icon"]))
           ]),
-          tn
+          en
         ])
       ]),
-      e.hideLabel ? _("", !0) : (s(), p("span", {
+      e.hideLabel ? _("", !0) : (s(), d("span", {
         key: 0,
         class: g(["onyx-switch__label", [
           `onyx-truncation-${e.truncation}`,
           // shows the required marker inline for multiline labels
-          e.truncation === "multiline" ? r(n) : void 0
+          e.truncation === "multiline" ? i(n) : void 0
         ]])
-      }, M(e.label), 3)),
-      e.truncation === "ellipsis" ? (s(), p("div", {
+      }, S(e.label), 3)),
+      e.truncation === "ellipsis" ? (s(), d("div", {
         key: 1,
-        class: g(["onyx-switch__marker", [r(n)]])
+        class: g(["onyx-switch__marker", [i(n)]])
       }, null, 2)) : _("", !0)
-    ], 10, Wl));
+    ], 10, Yl));
   }
-}), an = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 24 24"><path d="M8.25 17.25h-4.5V6.008h4.5zm-3-1.5h1.5V7.508h-1.5zm14.273 1.958c.457-.668.727-1.47.727-2.333 0-.127-.008-.255-.023-.375V4.508h-4.5v6.765a4.3 4.3 0 0 0-1.5.442V8.258h-4.5v8.992h2.716a4.13 4.13 0 0 0 3.667 2.25c.863 0 1.672-.27 2.332-.727l2.76 2.76 1.058-1.058-2.76-2.76zm-.788-11.7v6.18a4.1 4.1 0 0 0-1.492-.773v-5.4h1.492zm-7.492 9.742V9.758h1.5v3.292a4.1 4.1 0 0 0-.735 2.325c0 .127.007.255.022.375zM16.124 18a2.643 2.643 0 0 1-2.625-2.625 2.643 2.643 0 0 1 2.625-2.625 2.643 2.643 0 0 1 2.625 2.625A2.64 2.64 0 0 1 16.125 18" style="fill-rule:nonzero"/></svg>', on = { class: "onyx-table-wrapper" }, ln = ["tabindex"], nn = {
+}), tn = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 24 24"><path d="M8.25 17.25h-4.5V6.008h4.5zm-3-1.5h1.5V7.508h-1.5zm14.273 1.958c.457-.668.727-1.47.727-2.333 0-.127-.008-.255-.023-.375V4.508h-4.5v6.765a4.3 4.3 0 0 0-1.5.442V8.258h-4.5v8.992h2.716a4.13 4.13 0 0 0 3.667 2.25c.863 0 1.672-.27 2.332-.727l2.76 2.76 1.058-1.058-2.76-2.76zm-.788-11.7v6.18a4.1 4.1 0 0 0-1.492-.773v-5.4h1.492zm-7.492 9.742V9.758h1.5v3.292a4.1 4.1 0 0 0-.735 2.325c0 .127.007.255.022.375zM16.124 18a2.643 2.643 0 0 1-2.625-2.625 2.643 2.643 0 0 1 2.625-2.625 2.643 2.643 0 0 1 2.625 2.625A2.64 2.64 0 0 1 16.125 18" style="fill-rule:nonzero"/></svg>', an = { class: "onyx-table-wrapper" }, on = ["tabindex"], ln = {
   key: 0,
   class: "onyx-table__header"
-}, sn = { class: "onyx-table__empty" }, rn = { colspan: "100%" }, cn = { class: "onyx-table__empty-content" }, as = /* @__PURE__ */ k({
+}, nn = { class: "onyx-table__empty" }, sn = { colspan: "100%" }, rn = { class: "onyx-table__empty-content" }, ts = /* @__PURE__ */ k({
   __name: "OnyxTable",
   props: {
     density: {},
@@ -3577,37 +3591,37 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
     withPageScrolling: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const a = t, e = F(), { t: o } = P(), { densityClass: n } = D(a), l = v(() => o.value("table.empty"));
-    return (i, u) => (s(), p("div", on, [
-      f("div", {
+    const a = t, e = F(), { t: o } = P(), { densityClass: n } = D(a), l = f(() => o.value("table.empty"));
+    return (r, u) => (s(), d("div", an, [
+      v("div", {
         class: g({ "onyx-table-wrapper__scroll-container": !a.withPageScrolling }),
         tabindex: a.withPageScrolling ? void 0 : 0
       }, [
-        f("table", {
+        v("table", {
           class: g(["onyx-table onyx-text", [
             a.striped ? "onyx-table--striped" : "",
             a.withVerticalBorders ? "onyx-table--vertical-borders" : "",
-            r(n)
+            i(n)
           ]])
         }, [
-          e.head ? (s(), p("thead", nn, [
-            b(i.$slots, "head")
+          e.head ? (s(), d("thead", ln, [
+            b(r.$slots, "head")
           ])) : _("", !0),
-          f("tbody", null, [
-            b(i.$slots, "default", {}, () => [
-              f("tr", sn, [
-                f("td", rn, [
-                  f("div", cn, [
-                    b(i.$slots, "empty", { defaultMessage: l.value }, () => [
-                      S(ut, null, {
+          v("tbody", null, [
+            b(r.$slots, "default", {}, () => [
+              v("tr", nn, [
+                v("td", sn, [
+                  v("div", rn, [
+                    b(r.$slots, "empty", { defaultMessage: l.value }, () => [
+                      M(pt, null, {
                         icon: $(() => [
-                          S(A, {
-                            icon: r(an),
+                          M(A, {
+                            icon: i(tn),
                             size: "48px"
                           }, null, 8, ["icon"])
                         ]),
                         default: $(() => [
-                          U(" " + M(l.value), 1)
+                          U(" " + S(l.value), 1)
                         ]),
                         _: 1
                       })
@@ -3618,10 +3632,10 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
             ])
           ])
         ], 2)
-      ], 10, ln)
+      ], 10, on)
     ]));
   }
-}), un = { class: "onyx-text onyx-truncation-ellipsis" }, os = /* @__PURE__ */ k({
+}), cn = { class: "onyx-text onyx-truncation-ellipsis" }, as = /* @__PURE__ */ k({
   __name: "OnyxTag",
   props: {
     density: {},
@@ -3631,18 +3645,18 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   setup(t) {
     const a = t, { densityClass: e } = D(a);
-    return (o, n) => (s(), p("div", {
-      class: g(["onyx-tag", `onyx-tag--${a.color}`, r(e)])
+    return (o, n) => (s(), d("div", {
+      class: g(["onyx-tag", `onyx-tag--${a.color}`, i(e)])
     }, [
       a.icon ? (s(), x(A, {
         key: 0,
         icon: a.icon,
         size: "16px"
       }, null, 8, ["icon"])) : _("", !0),
-      f("span", un, M(a.label), 1)
+      v("span", cn, S(a.label), 1)
     ], 2));
   }
-}), dn = ["data-autosize-value"], pn = ["placeholder", "required", "autocapitalize", "autofocus", "name", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], ls = /* @__PURE__ */ k({
+}), un = ["data-autosize-value"], dn = ["id", "placeholder", "required", "autocapitalize", "autofocus", "name", "readonly", "disabled", "minlength", "maxlength", "aria-label", "title"], os = /* @__PURE__ */ k({
   __name: "OnyxTextarea",
   props: {
     density: {},
@@ -3670,44 +3684,45 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["update:modelValue", "change", "focus", "blur", "validityChange"],
   setup(t, { emit: a }) {
-    const e = t, o = a, { vCustomValidity: n, errorMessages: l } = le({ props: e, emit: o }), { densityClass: i } = D(e), u = v({
+    const e = t, o = a, { vCustomValidity: n, errorMessages: l } = le({ props: e, emit: o }), { densityClass: r } = D(e), u = f({
       get: () => e.modelValue,
       set: (y) => o("update:modelValue", y)
-    }), d = (y) => {
+    }), c = (y) => {
       const h = y.target.value;
       o("change", h);
-    }, m = v(() => {
+    }, p = f(() => {
       if (!e.autosize) return;
       const y = e.autosize.min ? Math.max(e.autosize.min, 2) : void 0, h = e.autosize.max;
       return [y ? `--min-autosize-rows: ${y}` : "", `--max-autosize-rows: ${h ?? "unset"}`];
-    }), c = (y) => {
-      var C;
+    }), m = (y) => {
+      var w;
       const h = y.target;
-      (C = h.parentElement) == null || C.setAttribute("data-autosize-value", h.value);
+      (w = h.parentElement) == null || w.setAttribute("data-autosize-value", h.value);
     };
-    return (y, h) => e.skeleton ? (s(), p("div", {
+    return (y, h) => e.skeleton ? (s(), d("div", {
       key: 0,
-      class: g(["onyx-textarea-skeleton", r(i)]),
-      style: Ee(m.value)
+      class: g(["onyx-textarea-skeleton", i(r)]),
+      style: Ie(p.value)
     }, [
       e.hideLabel ? _("", !0) : (s(), x(R, {
         key: 0,
         class: "onyx-textarea-skeleton__label"
       })),
-      S(R, { class: "onyx-textarea-skeleton__input" })
-    ], 6)) : (s(), p("div", {
+      M(R, { class: "onyx-textarea-skeleton__input" })
+    ], 6)) : (s(), d("div", {
       key: 1,
-      class: g(["onyx-textarea", r(i)]),
-      style: Ee(m.value)
+      class: g(["onyx-textarea", i(r)]),
+      style: Ie(p.value)
     }, [
-      S(Re, B(e, { "error-messages": r(l) }), {
-        default: $(() => [
-          f("div", {
+      M(Ue, B(e, { "error-messages": i(l) }), {
+        default: $(({ id: w }) => [
+          v("div", {
             class: "onyx-textarea__wrapper",
             "data-autosize-value": u.value
           }, [
-            K(f("textarea", {
-              "onUpdate:modelValue": h[0] || (h[0] = (C) => u.value = C),
+            j(v("textarea", {
+              id: w,
+              "onUpdate:modelValue": h[0] || (h[0] = (V) => u.value = V),
               class: g(["onyx-textarea__native", { "onyx-textarea__native--no-resize": e.disableManualResize }]),
               placeholder: e.placeholder,
               required: e.required,
@@ -3720,25 +3735,25 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
               maxlength: e.maxlength,
               "aria-label": e.hideLabel ? e.label : void 0,
               title: e.hideLabel ? e.label : void 0,
-              onInput: c,
-              onChange: d,
-              onFocus: h[1] || (h[1] = (C) => o("focus")),
-              onBlur: h[2] || (h[2] = (C) => o("blur"))
-            }, null, 42, pn), [
-              [at, u.value],
-              [r(n)]
+              onInput: m,
+              onChange: c,
+              onFocus: h[1] || (h[1] = (V) => o("focus")),
+              onBlur: h[2] || (h[2] = (V) => o("blur"))
+            }, null, 42, dn), [
+              [lt, u.value],
+              [i(n)]
             ])
-          ], 8, dn)
+          ], 8, un)
         ]),
         _: 1
       }, 16, ["error-messages"])
     ], 6));
   }
-}), mn = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m8.485 22.485A11.92 11.92 0 0 1 16 28C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12c0 3.205-1.248 6.219-3.515 8.485"/><path d="M15 22h2v2h-2zm0-14h2v11h-2z"/></svg>', yn = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12"/><path d="m12.987 19.063-3.291-3.292-1.414 1.415 4.705 4.706 9.707-9.708-1.414-1.414z"/></svg>', hn = { class: "onyx-toast-message__wrapper" }, vn = { class: "onyx-toast-message__content onyx-truncation-ellipsis" }, fn = { class: "onyx-toast-message__headline onyx-text" }, _n = { class: "onyx-truncation-ellipsis" }, xn = ["aria-label"], bn = {
+}), pn = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m8.485 22.485A11.92 11.92 0 0 1 16 28C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12c0 3.205-1.248 6.219-3.515 8.485"/><path d="M15 22h2v2h-2zm0-14h2v11h-2z"/></svg>', mn = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2m0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12"/><path d="m12.987 19.063-3.291-3.292-1.414 1.415 4.705 4.706 9.707-9.708-1.414-1.414z"/></svg>', yn = { class: "onyx-toast-message__wrapper" }, hn = { class: "onyx-toast-message__content onyx-truncation-ellipsis" }, fn = { class: "onyx-toast-message__headline onyx-text" }, vn = { class: "onyx-truncation-ellipsis" }, _n = ["aria-label"], xn = {
   key: 0,
   class: "onyx-toast-message__description onyx-text--small onyx-truncation-multiline",
   tabindex: "0"
-}, gn = /* @__PURE__ */ k({
+}, bn = /* @__PURE__ */ k({
   __name: "OnyxToastMessage",
   props: {
     density: {},
@@ -3751,55 +3766,55 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   },
   emits: ["click", "close"],
   setup(t, { emit: a }) {
-    const e = t, o = a, { t: n } = P(), { densityClass: l } = D(e), i = v(() => e.duration > 0), u = {
-      neutral: dt,
-      danger: ct,
-      warning: mn,
-      success: yn
-    }, d = v(() => {
+    const e = t, o = a, { t: n } = P(), { densityClass: l } = D(e), r = f(() => e.duration > 0), u = {
+      neutral: mt,
+      danger: dt,
+      warning: pn,
+      success: mn
+    }, c = f(() => {
       if (e.icon !== !1)
         return e.icon || u[e.color];
     });
-    return (m, c) => (s(), x(ce(e.clickable ? "button" : "div"), {
-      class: g(["onyx-toast-message", [`onyx-toast-message--${e.color}`, r(l)]]),
+    return (p, m) => (s(), x(ue(e.clickable ? "button" : "div"), {
+      class: g(["onyx-toast-message", [`onyx-toast-message--${e.color}`, i(l)]]),
       role: e.color === "danger" || e.color === "warning" ? "alert" : "status",
       "aria-label": e.clickable ? e.headline : void 0,
-      onClick: c[2] || (c[2] = (y) => e.clickable && o("click"))
+      onClick: m[2] || (m[2] = (y) => e.clickable && o("click"))
     }, {
       default: $(() => [
-        f("div", hn, [
-          d.value ? (s(), x(A, {
+        v("div", yn, [
+          c.value ? (s(), x(A, {
             key: 0,
-            icon: d.value
+            icon: c.value
           }, null, 8, ["icon"])) : _("", !0),
-          f("div", vn, [
-            f("div", fn, [
-              f("span", _n, M(e.headline), 1),
-              e.clickable ? _("", !0) : (s(), p("button", {
+          v("div", hn, [
+            v("div", fn, [
+              v("span", vn, S(e.headline), 1),
+              e.clickable ? _("", !0) : (s(), d("button", {
                 key: 0,
                 type: "button",
-                "aria-label": r(n)("close"),
+                "aria-label": i(n)("close"),
                 class: "onyx-toast-message__close",
-                onClick: c[0] || (c[0] = (y) => o("close"))
+                onClick: m[0] || (m[0] = (y) => o("close"))
               }, [
-                S(A, { icon: r(Fe) }, null, 8, ["icon"])
-              ], 8, xn))
+                M(A, { icon: i(qe) }, null, 8, ["icon"])
+              ], 8, _n))
             ]),
-            e.description ? (s(), p("p", bn, M(e.description), 1)) : _("", !0)
+            e.description ? (s(), d("p", xn, S(e.description), 1)) : _("", !0)
           ])
         ]),
-        i.value ? (s(), p("time", {
+        r.value ? (s(), d("time", {
           key: e.duration,
           "aria-hidden": "true",
           class: "onyx-toast-message__progress-bar",
-          style: Ee({ animationDuration: `${e.duration}ms` }),
-          onAnimationend: c[1] || (c[1] = (y) => o("close"))
+          style: Ie({ animationDuration: `${e.duration}ms` }),
+          onAnimationend: m[1] || (m[1] = (y) => o("close"))
         }, null, 36)) : _("", !0)
       ]),
       _: 1
     }, 8, ["class", "role", "aria-label"]));
   }
-}), Mt = Symbol(), kn = () => {
+}), Vt = Symbol(), gn = () => {
   let t = 1;
   const a = E([]), e = (n) => {
     const l = t++;
@@ -3813,126 +3828,126 @@ const R = /* @__PURE__ */ Ne(na, [["render", ra]]), ia = ["disabled", "type", "a
   };
   return {
     // make toasts readonly so they can not be modified from the outside
-    toasts: v(() => a.value),
+    toasts: f(() => a.value),
     show: e,
     remove: o
   };
-}, wn = () => {
+}, kn = () => {
   const t = () => {
     console.warn(
       'Trying to use "useToast()" before the toast provider has been provided. Make sure to "provide" it first.'
     );
   };
-  return ie(
-    Mt,
+  return ce(
+    Vt,
     // provide fallback so "useToast()" does not return "undefined"
     () => ({
-      toasts: v(() => []),
+      toasts: f(() => []),
       show: t,
       remove: t
     }),
     !0
   );
-}, Cn = {
+}, wn = {
   key: 0,
   class: "onyx-toast",
   role: "presentation",
   "aria-live": "polite",
   open: ""
-}, ns = /* @__PURE__ */ k({
+}, ls = /* @__PURE__ */ k({
   __name: "OnyxToast",
   setup(t) {
-    const a = wn();
-    return (e, o) => r(a).toasts.value.length ? (s(), p("dialog", Cn, [
-      (s(!0), p(z, null, X(r(a).toasts.value, ({ id: n, ...l }) => (s(), x(gn, B({
+    const a = kn();
+    return (e, o) => i(a).toasts.value.length ? (s(), d("dialog", wn, [
+      (s(!0), d(z, null, X(i(a).toasts.value, ({ id: n, ...l }) => (s(), x(bn, B({
         key: n,
         ref_for: !0
       }, l), null, 16))), 128))
     ])) : _("", !0);
   }
-}), ss = ["top", "bottom"], rs = (t = {}) => ({
+}), ns = ["top", "bottom"], ss = (t = {}) => ({
   install: (a) => {
     Ca(a, t.i18n);
     const e = a.runWithContext(() => P());
-    J(() => $n(e.t.value("optional"))), a.provide(Mt, kn());
+    J(() => Cn(e.t.value("optional"))), a.provide(Vt, gn());
   }
-}), $n = (t) => {
+}), Cn = (t) => {
   globalThis.document.body.style.setProperty("--onyx-global-optional-text", t);
-}, is = (t, a) => {
-  const e = et(t.toLowerCase()), o = et(a.toLowerCase());
+}, rs = (t, a) => {
+  const e = at(t.toLowerCase()), o = at(a.toLowerCase());
   return e.includes(o);
-}, et = (t) => t.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+}, at = (t) => t.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
 export {
-  Pn as AUTOCAPITALIZE,
-  En as BUTTON_COLORS,
-  Tn as BUTTON_MODES,
-  On as BUTTON_TYPES,
-  Bn as DENSITIES,
-  Yn as DIRECTIONS,
-  Ln as HEADLINE_TYPES,
-  An as ICON_SIZES,
-  Dn as INPUT_TYPES,
-  zn as LINK_TARGETS,
-  fe as MOBILE_NAV_BAR_INJECTION_KEY,
-  es as MULTISELECT_TEXT_MODE,
-  _l as ONYX_BREAKPOINTS,
-  Gn as ONYX_COLORS,
-  Sn as OnyxAppLayout,
-  je as OnyxAvatar,
-  Vn as OnyxAvatarStack,
+  Dn as AUTOCAPITALIZE,
+  On as BUTTON_COLORS,
+  En as BUTTON_MODES,
+  Bn as BUTTON_TYPES,
+  Vn as DENSITIES,
+  jn as DIRECTIONS,
+  In as HEADLINE_TYPES,
+  Ln as ICON_SIZES,
+  Hn as INPUT_TYPES,
+  Nn as LINK_TARGETS,
+  xe as MOBILE_NAV_BAR_INJECTION_KEY,
+  Qn as MULTISELECT_TEXT_MODE,
+  vl as ONYX_BREAKPOINTS,
+  Zn as ONYX_COLORS,
+  Mn as OnyxAppLayout,
+  Ye as OnyxAvatar,
+  Sn as OnyxAvatarStack,
   Gt as OnyxBadge,
-  Te as OnyxButton,
-  Se as OnyxCheckbox,
-  In as OnyxCheckboxGroup,
-  Ro as OnyxColorSchemeDialog,
-  Rn as OnyxColorSchemeMenuItem,
+  Le as OnyxButton,
+  Ve as OnyxCheckbox,
+  Tn as OnyxCheckboxGroup,
+  zo as OnyxColorSchemeDialog,
+  zn as OnyxColorSchemeMenuItem,
   Na as OnyxDialog,
-  ut as OnyxEmpty,
-  ze as OnyxExternalLinkIcon,
-  Ct as OnyxFlyoutMenu,
-  re as OnyxHeadline,
+  pt as OnyxEmpty,
+  Re as OnyxExternalLinkIcon,
+  Mt as OnyxFlyoutMenu,
+  ie as OnyxHeadline,
   A as OnyxIcon,
   Za as OnyxIconButton,
-  Ve as OnyxInfoTooltip,
-  Hn as OnyxInput,
-  Nn as OnyxLink,
-  Ue as OnyxListItem,
+  Be as OnyxInfoTooltip,
+  An as OnyxInput,
+  Pn as OnyxLink,
+  Fe as OnyxListItem,
   Q as OnyxLoadingIndicator,
-  wt as OnyxMenuItem,
-  wo as OnyxMiniSearch,
-  Xe as OnyxMobileNavButton,
-  To as OnyxNavAppArea,
-  Wn as OnyxNavBar,
-  Un as OnyxNavButton,
-  Fn as OnyxNavItem,
-  jo as OnyxNavSeparator,
-  Xn as OnyxPageLayout,
-  Je as OnyxRadioButton,
-  Jn as OnyxRadioGroup,
-  Qn as OnyxSelect,
-  Nl as OnyxSelectInput,
-  Qe as OnyxSelectOption,
+  $t as OnyxMenuItem,
+  ko as OnyxMiniSearch,
+  Je as OnyxMobileNavButton,
+  Eo as OnyxNavAppArea,
+  Yn as OnyxNavBar,
+  Rn as OnyxNavButton,
+  Un as OnyxNavItem,
+  Ko as OnyxNavSeparator,
+  Wn as OnyxPageLayout,
+  Qe as OnyxRadioButton,
+  Xn as OnyxRadioGroup,
+  Jn as OnyxSelect,
+  Pl as OnyxSelectInput,
+  tt as OnyxSelectOption,
   R as OnyxSkeleton,
-  ts as OnyxSwitch,
-  as as OnyxTable,
-  os as OnyxTag,
-  ls as OnyxTextarea,
-  qn as OnyxTimer,
-  ns as OnyxToast,
-  gn as OnyxToastMessage,
-  bt as OnyxTooltip,
-  Zn as OnyxUserMenu,
-  gt as OnyxVisuallyHidden,
-  Kn as TEXT_SIZES,
-  Mt as TOAST_PROVIDER_INJECTION_KEY,
-  ss as TOOLTIP_POSITIONS,
-  jn as TRUNCATION_TYPES,
-  rs as createOnyx,
-  kn as createToastProvider,
-  is as normalizedIncludes,
+  es as OnyxSwitch,
+  ts as OnyxTable,
+  as as OnyxTag,
+  os as OnyxTextarea,
+  Fn as OnyxTimer,
+  ls as OnyxToast,
+  bn as OnyxToastMessage,
+  kt as OnyxTooltip,
+  qn as OnyxUserMenu,
+  wt as OnyxVisuallyHidden,
+  Gn as TEXT_SIZES,
+  Vt as TOAST_PROVIDER_INJECTION_KEY,
+  ns as TOOLTIP_POSITIONS,
+  Kn as TRUNCATION_TYPES,
+  ss as createOnyx,
+  gn as createToastProvider,
+  rs as normalizedIncludes,
   Ca as provideI18n,
-  $n as syncGlobalOptionalText,
+  Cn as syncGlobalOptionalText,
   D as useDensity,
-  Ll as useScrollEnd,
-  wn as useToast
+  Il as useScrollEnd,
+  kn as useToast
 };