@altinn/altinn-components 0.68.4 → 0.68.5

package/dist/{ToolbarSearch-DdsPkd-G.js → ToolbarSearch-L12-MUZz.js}

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as a, jsxs as w, Fragment as pe } from "react/jsx-runtime";
+import { jsx as a, jsxs as _, Fragment as pe } from "react/jsx-runtime";
 import * as G from "react";
 import C, { forwardRef as Y, useRef as ee, useState as se, useMemo as de, useEffect as W, Fragment as qe, useLayoutEffect as Se, createContext as lt, useContext as ct, isValidElement as Ke, useId as Te, useCallback as Ve, memo as ke, createElement as dt } from "react";
 import "./tooltip-Caqi75cv.js";
@@ -285,12 +285,12 @@ const Be = Y((e, o) => {
   className: u,
   style: f,
   children: c
-}) => /* @__PURE__ */ a("span", { "data-ui": "icon", "data-size": t, "data-color": r, className: U(be.icon, u), style: f, children: /* @__PURE__ */ w(he, { loading: e, variant: "circle", className: be.shape, children: [
+}) => /* @__PURE__ */ a("span", { "data-ui": "icon", "data-size": t, "data-color": r, className: U(be.icon, u), style: f, children: /* @__PURE__ */ _(he, { loading: e, variant: "circle", className: be.shape, children: [
   /* @__PURE__ */ a("span", { className: be.shape }),
   n && /* @__PURE__ */ a(n, { "aria-hidden": "true", "alt-label": o, className: be.svg }),
   i && /* @__PURE__ */ a("img", { src: i, alt: o, className: be.image }),
   c
-] }) }), en = ({ size: e, color: o, label: n, htmlFor: t, helperText: r, children: i, ...u }) => /* @__PURE__ */ w(vt, { size: e, color: o, ...u, children: [
+] }) }), en = ({ size: e, color: o, label: n, htmlFor: t, helperText: r, children: i, ...u }) => /* @__PURE__ */ _(vt, { size: e, color: o, ...u, children: [
   n && /* @__PURE__ */ a(bt, { size: e, htmlFor: t, children: n }),
   i,
   r && /* @__PURE__ */ a(Ue, { size: "xs", children: r })
@@ -315,7 +315,7 @@ const Be = Y((e, o) => {
   onFocus: b,
   ...R
 }) => {
-  const _ = /* @__PURE__ */ a(
+  const w = /* @__PURE__ */ a(
     ot,
     {
       size: "xs",
@@ -346,7 +346,7 @@ const Be = Y((e, o) => {
       ...R
     }
   );
-  return m ? /* @__PURE__ */ a("div", { className: Re.search, style: e, "data-index": o, "data-menu-search": "true", children: _ }) : /* @__PURE__ */ a("li", { className: Re.search, style: e, "data-index": o, "data-menu-search": "true", children: _ });
+  return m ? /* @__PURE__ */ a("div", { className: Re.search, style: e, "data-index": o, "data-menu-search": "true", children: w }) : /* @__PURE__ */ a("li", { className: Re.search, style: e, "data-index": o, "data-menu-search": "true", children: w });
 }, et = ({
   level: e = 0,
   maxLevels: o,
@@ -364,7 +364,7 @@ const Be = Y((e, o) => {
   id: v,
   color: b,
   variant: R,
-  scrollRefStyles: _ = {},
+  scrollRefStyles: w = {},
   keyboardEvents: x = !1,
   onSelect: j = () => {
   },
@@ -372,7 +372,7 @@ const Be = Y((e, o) => {
 }) => {
   if (o && e >= o)
     return null;
-  const k = t === "combobox", l = t === "navigation", $ = k && v ? `${v}-listbox` : v, I = ee(r), D = ee(r), [q, y] = se(!1), A = de(
+  const k = t === "combobox", l = t === "navigation", $ = k && v ? `${v}-listbox` : v, I = ee(r), F = ee(r), [q, y] = se(!1), A = de(
     () => p.map((P, B) => ({
       ...P,
       id: `${v}-item-${B}`
@@ -397,8 +397,8 @@ const Be = Y((e, o) => {
     const P = I.current;
     I.current = r, r && !P && S.current?.scrollTo({ top: 0 });
   }, [r, i]), W(() => {
-    const P = D.current;
-    D.current = r, !(!x || m || !f) && r && !P && requestAnimationFrame(() => S.current?.focus?.({ preventScroll: !0 }));
+    const P = F.current;
+    F.current = r, !(!x || m || !f) && r && !P && requestAnimationFrame(() => S.current?.focus?.({ preventScroll: !0 }));
   }, [r, x, m]), W(() => {
     if (k && c) {
       d(0), y(!0);
@@ -427,13 +427,13 @@ const Be = Y((e, o) => {
         k && !B && T && y(!1), m.onKeyDown?.(P);
       }
     }
-  ) : null, H = /* @__PURE__ */ w(
+  ) : null, D = /* @__PURE__ */ _(
     Ne,
     {
       variant: R,
       expanded: n,
       ref: S,
-      style: _,
+      style: w,
       id: $,
       role: k ? "listbox" : l ? "list" : "menu",
       tabIndex: x ? -1 : void 0,
@@ -441,13 +441,13 @@ const Be = Y((e, o) => {
         !k && M,
         E.map((P, B) => {
           const T = P?.props || {}, { title: K, hidden: ue = !1, divider: X = !0 } = T;
-          return /* @__PURE__ */ w(qe, { children: [
+          return /* @__PURE__ */ _(qe, { children: [
             (e > 0 || B) && X ? /* @__PURE__ */ a(Qe, {}) : "",
-            /* @__PURE__ */ a(Ye, { hidden: ue, children: /* @__PURE__ */ w(Ne, { role: "presentation", children: [
+            /* @__PURE__ */ a(Ye, { hidden: ue, children: /* @__PURE__ */ _(Ne, { role: "presentation", children: [
               K && /* @__PURE__ */ a(Xe, { title: K, level: e }),
               P?.items.filter((J) => !J.props?.hidden).map((J, g) => {
-                const { active: N, onMouseEnter: L } = J, { groupId: te, ...F } = J.props || {}, { expanded: ae } = F, ie = Array.isArray(F?.items) && F.items.length > 0, Ce = F.role === "checkbox" || F.role === "radio", Ee = F.role === "radio" ? "menuitemradio" : "menuitemcheckbox", st = l ? void 0 : k ? "option" : Ce ? Ee : F.role;
-                return /* @__PURE__ */ w(
+                const { active: N, onMouseEnter: L } = J, { groupId: te, ...H } = J.props || {}, { expanded: ae } = H, ie = Array.isArray(H?.items) && H.items.length > 0, Ce = H.role === "checkbox" || H.role === "radio", Ee = H.role === "radio" ? "menuitemradio" : "menuitemcheckbox", st = l ? void 0 : k ? "option" : Ce ? Ee : H.role;
+                return /* @__PURE__ */ _(
                   We,
                   {
                     expanded: ae,
@@ -457,29 +457,29 @@ const Be = Y((e, o) => {
                       /* @__PURE__ */ a(
                         rt,
                         {
-                          ...F,
-                          size: F?.size || T?.size || h,
-                          color: F?.color || T?.color || b,
-                          variant: F?.variant || T?.variant || R,
+                          ...H,
+                          size: H?.size || T?.size || h,
+                          color: H?.color || T?.color || b,
+                          variant: H?.variant || T?.variant || R,
                           active: N,
                           role: st,
                           a11yMode: t,
-                          selected: F.selected,
-                          tabIndex: F?.disabled || x ? -1 : F.tabIndex ?? 0,
+                          selected: H.selected,
+                          tabIndex: H?.disabled || x ? -1 : H.tabIndex ?? 0,
                           onMouseEnter: L,
                           "aria-haspopup": ie && !l ? "menu" : void 0,
                           "aria-expanded": ie ? ae : void 0,
-                          "aria-controls": ie ? F.id + "-menu" : void 0
+                          "aria-controls": ie ? H.id + "-menu" : void 0
                         }
                       ),
-                      ae && F?.items && /* @__PURE__ */ a(
+                      ae && H?.items && /* @__PURE__ */ a(
                         et,
                         {
-                          id: F.id + "-menu",
+                          id: H.id + "-menu",
                           expanded: ae,
                           level: e + 1,
                           maxLevels: o,
-                          items: F?.items,
+                          items: H?.items,
                           groups: s,
                           size: h,
                           color: b,
@@ -498,10 +498,10 @@ const Be = Y((e, o) => {
       ]
     }
   );
-  return k && M ? /* @__PURE__ */ w(pe, { children: [
+  return k && M ? /* @__PURE__ */ _(pe, { children: [
     M,
-    H
-  ] }) : H;
+    D
+  ] }) : D;
 }, rn = (e) => {
   const o = ee(null), n = ee(null), [t, r] = se(0), {
     search: i,
@@ -515,12 +515,12 @@ const Be = Y((e, o) => {
     id: v,
     expanded: b,
     a11yMode: R = "menu",
-    open: _,
+    open: w,
     scrollToTopOnOpen: x = !1,
     autoActivateFirstItem: j = !0,
     announceNoResults: z = !1,
     onActiveItemIdChange: k
-  } = e, l = R === "combobox", $ = R === "navigation", I = l && v ? `${v}-listbox` : v, D = ee(_), [q, y] = se(!1), A = de(
+  } = e, l = R === "combobox", $ = R === "navigation", I = l && v ? `${v}-listbox` : v, F = ee(w), [q, y] = se(!1), A = de(
     () => u.map((g, N) => ({
       ...g,
       id: `${v}-item-${N}`
@@ -533,7 +533,7 @@ const Be = Y((e, o) => {
     keyboardEvents: s,
     autoActivateFirstItem: j,
     ref: o
-  }), { flatMenu: M, virtualizer: H, scrollMaxHeight: P } = _t({
+  }), { flatMenu: M, virtualizer: D, scrollMaxHeight: P } = _t({
     menu: S,
     scrollRef: o
   });
@@ -559,22 +559,22 @@ const Be = Y((e, o) => {
     T.current = B;
     const L = N ? B : B + 2;
     if (!N) {
-      const ie = H.getOffsetForIndex(L, "auto");
+      const ie = D.getOffsetForIndex(L, "auto");
       if (!ie) return;
       const [Ce, Ee] = ie;
       if (Ee === "auto") return;
-      H.scrollToOffset(Ce + t + 10, { align: "start" });
+      D.scrollToOffset(Ce + t + 10, { align: "start" });
       return;
     }
     if (B <= 3) {
-      H.scrollToOffset(0);
+      D.scrollToOffset(0);
       return;
     }
-    const te = H.getOffsetForIndex(B - 1, "auto");
+    const te = D.getOffsetForIndex(B - 1, "auto");
     if (!te) return;
-    const [F, ae] = te;
-    ae !== "auto" && H.scrollToOffset(F + t + 10, { align: "start" });
-  }, [B, t, H, T]);
+    const [H, ae] = te;
+    ae !== "auto" && D.scrollToOffset(H + t + 10, { align: "start" });
+  }, [B, t, D, T]);
   const K = de(() => {
     const g = /* @__PURE__ */ new Map();
     let N = 0;
@@ -590,13 +590,9 @@ const Be = Y((e, o) => {
       return;
     }
   }, [z, l, d]), W(() => {
-    if (!x) {
-      D.current = _;
-      return;
-    }
-    const g = D.current;
-    D.current = _, _ && !g && o.current?.scrollTo({ top: 0 });
-  }, [_, x]);
+    const g = F.current;
+    F.current = w, !(!w || g) && (D.measure(), x && o.current?.scrollTo({ top: 0 }));
+  }, [w, x, D]);
   const ue = {
     position: "relative",
     maxHeight: h?.maxHeight || P,
@@ -627,7 +623,7 @@ const Be = Y((e, o) => {
         l && !N && L && y(!1), i.onKeyDown?.(g);
       }
     }
-  ) : null, J = /* @__PURE__ */ w(
+  ) : null, J = /* @__PURE__ */ _(
     Ne,
     {
       ref: o,
@@ -645,10 +641,10 @@ const Be = Y((e, o) => {
             ref: n,
             style: {
               position: "relative",
-              height: `${H.getTotalSize()}px`,
+              height: `${D.getTotalSize()}px`,
               width: "100%"
             },
-            children: /* @__PURE__ */ a(Ne, { style: { width: "100%", minWidth: "100%" }, children: H.getVirtualItems().map((g) => {
+            children: /* @__PURE__ */ a(Ne, { style: { width: "100%", minWidth: "100%" }, children: D.getVirtualItems().map((g) => {
               const N = M[g.index];
               if (!N) return null;
               const L = {
@@ -661,7 +657,7 @@ const Be = Y((e, o) => {
                 style: L,
                 index: g.index,
                 "data-index": g.index,
-                ref: H.measureElement
+                ref: D.measureElement
               };
               switch (N.type) {
                 case "divider":
@@ -676,7 +672,7 @@ const Be = Y((e, o) => {
                 case "header":
                   return /* @__PURE__ */ a(Xe, { ...te, title: N.title || "", level: 1 }, g.key);
                 default: {
-                  const F = N.itemProps?.role === "checkbox" || N.itemProps?.role === "radio", ae = N.itemProps?.role === "radio" ? "menuitemradio" : "menuitemcheckbox", ie = $ ? void 0 : l ? "option" : F ? ae : N.itemProps?.role;
+                  const H = N.itemProps?.role === "checkbox" || N.itemProps?.role === "radio", ae = N.itemProps?.role === "radio" ? "menuitemradio" : "menuitemcheckbox", ie = $ ? void 0 : l ? "option" : H ? ae : N.itemProps?.role;
                   return /* @__PURE__ */ a(We, { ...te, role: $ ? "listitem" : "presentation", children: /* @__PURE__ */ a(
                     rt,
                     {
@@ -701,7 +697,7 @@ const Be = Y((e, o) => {
       ]
     }
   );
-  return l && X ? /* @__PURE__ */ w(pe, { children: [
+  return l && X ? /* @__PURE__ */ _(pe, { children: [
     X,
     J
   ] }) : J;
@@ -804,7 +800,7 @@ const Be = Y((e, o) => {
     [n]
   ), h = G.useCallback(() => {
     p(""), t?.();
-  }, [t]), v = G.useMemo(() => m.trim().replace(/\s+/g, " "), [m]), b = v.length > 0, R = G.useMemo(() => v.toLowerCase(), [v]), _ = G.useMemo(() => v ? v.split(" ") : [], [v]), x = G.useMemo(
+  }, [t]), v = G.useMemo(() => m.trim().replace(/\s+/g, " "), [m]), b = v.length > 0, R = G.useMemo(() => v.toLowerCase(), [v]), w = G.useMemo(() => v ? v.split(" ") : [], [v]), x = G.useMemo(
     () => ({
       placeholder: e ?? c.placeholder,
       name: o ?? "search",
@@ -846,10 +842,10 @@ const Be = Y((e, o) => {
       M.checked === !0 && d.push({ ...M, groupId: "selected" }), (M.searchWords ?? []).some((B) => String(B).toLowerCase().includes(R)) && O.push({
         ...M,
         groupId: "search",
-        highlightWords: _
+        highlightWords: w
       });
     return { selectedItems: d, results: O };
-  }, [b, j, R, _]), I = $.length, D = l.length, q = G.useMemo(
+  }, [b, j, R, w]), I = $.length, F = l.length, q = G.useMemo(
     () => ({
       search: {
         hidden: !0,
@@ -857,7 +853,7 @@ const Be = Y((e, o) => {
       },
       selected: {
         hidden: !0,
-        title: c.selected(D)
+        title: c.selected(F)
       },
       emptySearch: {
         hidden: !0,
@@ -865,7 +861,7 @@ const Be = Y((e, o) => {
       },
       ...u
     }),
-    [c, I, D, u]
+    [c, I, F, u]
   ), y = G.useMemo(
     () => ({
       ...q,
@@ -874,15 +870,15 @@ const Be = Y((e, o) => {
         title: c.hits(I)
       },
       selected: {
-        hidden: D === 0,
-        title: c.selected(D)
+        hidden: F === 0,
+        title: c.selected(F)
       },
       emptySearch: {
-        hidden: b && (I > 0 || D > 0),
+        hidden: b && (I > 0 || F > 0),
         title: c.noResults
       }
     }),
-    [q, b, c, I, D]
+    [q, b, c, I, F]
   ), A = G.useMemo(() => b ? ln([...$, ...l]) : [], [b, $, l]), S = G.useMemo(() => [...k || [], ...l || []], [k, l]), E = G.useMemo(() => b ? I ? A : S : i, [b, i, I, A, S]);
   return {
     search: x,
@@ -909,13 +905,13 @@ const Be = Y((e, o) => {
   open: v,
   scrollToTopOnOpen: b,
   autoFocusList: R,
-  id: _
+  id: w
 }) => {
   const x = cn({ ...o, items: n, groups: t }), j = e ? { label: o?.label, hideLabel: o?.hideLabel, ...x.search } : o, z = e && x.hasQuery && x.resultCount === 0, k = e ? x.items : n, l = e ? { ...t, ...x.groups } : t, $ = h !== "combobox";
   return c ? /* @__PURE__ */ a(
     rn,
     {
-      id: _,
+      id: w,
       search: j,
       announceNoResults: z,
       items: k,
@@ -936,7 +932,7 @@ const Be = Y((e, o) => {
   ) : /* @__PURE__ */ a(
     et,
     {
-      id: _,
+      id: w,
       search: j,
       announceNoResults: z,
       items: k,
@@ -970,7 +966,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
   if (o)
     return /* @__PURE__ */ a("div", { className: U(le.icon, e), children: /* @__PURE__ */ a(ce, { svgElement: Be, loading: !0 }) });
   const r = Pe(n) ? "avatar" : ze(n) ? "avatarGroup" : (Me(n), "icon");
-  return /* @__PURE__ */ w("div", { className: U(le.media, e), "data-variant": r, children: [
+  return /* @__PURE__ */ _("div", { className: U(le.media, e), "data-variant": r, children: [
     Pe(n) && /* @__PURE__ */ a(De, { ...n, className: le.avatar }) || ze(n) && /* @__PURE__ */ a(we, { ...n, className: le.avatarGroup }) || Me(n) && /* @__PURE__ */ a(ce, { ...n, className: le.icon }) || pn(n) && /* @__PURE__ */ a(ce, { className: le.icon, children: n }) || /* @__PURE__ */ a(ce, { className: le.icon, svgElement: n }),
     t
   ] });
@@ -1018,7 +1014,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
   highlightWords: i,
   loading: u,
   children: f
-}) => /* @__PURE__ */ a("span", { className: U(gn.label, e), children: f || /* @__PURE__ */ w(pe, { children: [
+}) => /* @__PURE__ */ a("span", { className: U(gn.label, e), children: f || /* @__PURE__ */ _(pe, { children: [
   o && /* @__PURE__ */ a(ve, { ...n, as: "span", loading: u, highlightWords: i, maxRows: 2, children: o }),
   t && /* @__PURE__ */ a(
     ve,
@@ -1058,7 +1054,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
   icon: v,
   label: b,
   badge: R,
-  controls: _,
+  controls: w,
   title: x,
   htmlTitle: j,
   description: z,
@@ -1066,7 +1062,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
   count: l,
   linkIcon: $ = !1,
   disabled: I,
-  selected: D,
+  selected: F,
   active: q,
   tabIndex: y = 0,
   className: A,
@@ -1076,7 +1072,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
   const d = typeof b == "function" ? b() : b, O = yt(E), M = n === "option";
   if (n === "radio" || n === "checkbox" || n === "menuitemradio" || n === "menuitemcheckbox" || M && typeof h == "boolean") {
     const T = v || (h ? Je : qt);
-    return /* @__PURE__ */ w(
+    return /* @__PURE__ */ _(
       "div",
       {
         ...O,
@@ -1109,7 +1105,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
             {
               className: V.label,
               highlightWords: k,
-              title: /* @__PURE__ */ w(pe, { children: [
+              title: /* @__PURE__ */ _(pe, { children: [
                 x,
                 " ",
                 l && /* @__PURE__ */ a("i", { className: V.count, children: l })
@@ -1127,16 +1123,16 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
               children: d
             }
           ),
-          /* @__PURE__ */ w($e, { children: [
+          /* @__PURE__ */ _($e, { children: [
             R && /* @__PURE__ */ a(oe, { ...R }),
-            !I && _
+            !I && w
           ] })
         ]
       }
     );
   }
   const P = r || (i ? "a" : "button"), B = $ && jt;
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ _(
     P,
     {
       href: i,
@@ -1150,9 +1146,9 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
       "data-active": q,
       "aria-disabled": I,
       ...I ? { disabled: I } : {},
-      "aria-current": n !== "option" && D ? "page" : void 0,
-      "aria-selected": n === "option" ? D : void 0,
-      "data-selected": D,
+      "aria-current": n !== "option" && F ? "page" : void 0,
+      "aria-selected": n === "option" ? F : void 0,
+      "data-selected": F,
       "aria-label": x,
       title: j,
       "data-testid": S,
@@ -1171,7 +1167,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
           {
             className: V.label,
             highlightWords: k,
-            title: /* @__PURE__ */ w(pe, { children: [
+            title: /* @__PURE__ */ _(pe, { children: [
               x,
               " ",
               l && /* @__PURE__ */ a("i", { className: V.count, children: l })
@@ -1188,9 +1184,9 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
             children: d
           }
         ),
-        /* @__PURE__ */ w($e, { children: [
+        /* @__PURE__ */ _($e, { children: [
           R && /* @__PURE__ */ a(oe, { ...R }),
-          !I && _,
+          !I && w,
           $ && /* @__PURE__ */ a(ce, { svgElement: B, className: V.linkIcon })
         ] })
       ]
@@ -1221,32 +1217,32 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
   minLength: h,
   ...v
 }) => {
-  const b = Te(), [R, _] = se(!1), x = v.id || `search-field-${b}`, j = `${x}-listbox`, [z, k] = se(void 0), l = "searchfield-clear-button-" + Te(), $ = de(() => !s || !c || typeof h == "number" && typeof c == "string" && c.length < h ? !1 : R, [s, R, h, c]), I = de(() => (s?.items ?? []).map((d) => ({
+  const b = Te(), [R, w] = se(!1), x = v.id || `search-field-${b}`, j = `${x}-listbox`, [z, k] = se(void 0), l = "searchfield-clear-button-" + Te(), $ = de(() => !s || !c || typeof h == "number" && typeof c == "string" && c.length < h ? !1 : R, [s, R, h, c]), I = de(() => (s?.items ?? []).map((d) => ({
     ...d,
     onClick: () => {
-      d.onClick?.(), _(!1);
+      d.onClick?.(), w(!1);
     }
-  })), [s]), D = (d) => {
+  })), [s]), F = (d) => {
     if (d.key === "Enter" && $) {
-      s?.items?.[0]?.onClick?.(), _(!1);
+      s?.items?.[0]?.onClick?.(), w(!1);
       return;
     }
     if (d.key === "Escape" && $) {
-      d.preventDefault(), d.stopPropagation(), _(!1), s?.onClose(), document.getElementById(x)?.focus();
+      d.preventDefault(), d.stopPropagation(), w(!1), s?.onClose(), document.getElementById(x)?.focus();
       return;
     }
-    v.onKeyDown?.(d), _(!0);
+    v.onKeyDown?.(d), w(!0);
   }, q = () => {
-    _(!0);
+    w(!0);
   }, y = (d) => {
     if (!R) return;
     const O = d.relatedTarget;
-    O && d.currentTarget.contains(O) || _(!1);
+    O && d.currentTarget.contains(O) || w(!1);
   }, A = (d) => {
     d.preventDefault();
   }, S = (d) => {
     d.relatedTarget?.id === l && k(void 0), v.onBlur?.(d);
-  }, E = /* @__PURE__ */ w(
+  }, E = /* @__PURE__ */ _(
     en,
     {
       size: r,
@@ -1272,7 +1268,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
             autoCapitalize: "off",
             autoComplete: "off",
             minLength: h,
-            onKeyDown: D,
+            onKeyDown: F,
             onBlur: S,
             ...s && {
               role: "combobox",
@@ -1307,7 +1303,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
       ]
     }
   );
-  return s ? /* @__PURE__ */ w("div", { className: ne.fieldContainer, children: [
+  return s ? /* @__PURE__ */ _("div", { className: ne.fieldContainer, children: [
     E,
     $ && /* @__PURE__ */ a("div", { className: ne.autocomplete, "aria-hidden": !$, onMouseDown: A, children: /* @__PURE__ */ a(
       nt,
@@ -1341,7 +1337,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
   ...c
 }) => {
   const m = f || "div", p = i ? "time" : "span";
-  return /* @__PURE__ */ w(m, { ...c, className: ge.byline, "data-color": o, "data-size": n, children: [
+  return /* @__PURE__ */ _(m, { ...c, className: ge.byline, "data-color": o, "data-size": n, children: [
     (r || t) && /* @__PURE__ */ a(he, { variant: "circle", className: ge.avatar, loading: e, children: r ? /* @__PURE__ */ a(we, { ...r, size: n, className: ge.avatarGroup }) : t && /* @__PURE__ */ a(De, { ...t, size: n, className: ge.avatar }) }),
     /* @__PURE__ */ a(p, { "data-size": n, dateTime: i, className: ge.label, children: /* @__PURE__ */ a(he, { loading: e, children: u }) })
   ] });
@@ -1385,7 +1381,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
   color: v,
   onSubmit: b,
   activeDescendantId: R,
-  useFixedPosition: _ = !1,
+  useFixedPosition: w = !1,
   expanded: x = !1
 }) => {
   const j = ee(null), z = ee(null), k = ee(s);
@@ -1398,19 +1394,19 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
     maxHeight: 300
   }), I = Ve(() => {
     if (s && j.current && z.current) {
-      const y = j.current.getBoundingClientRect(), A = z.current.getBoundingClientRect(), S = window.innerHeight, E = window.innerWidth, d = 16, O = S - y.bottom, M = y.top, H = E - y.right - A.width, P = O < 250 && M > O, B = P ? "top" : "bottom", T = (P ? M : O) - d, ue = H < d ? "right" : "left";
+      const y = j.current.getBoundingClientRect(), A = z.current.getBoundingClientRect(), S = window.innerHeight, E = window.innerWidth, d = 16, O = S - y.bottom, M = y.top, D = E - y.right - A.width, P = O < 250 && M > O, B = P ? "top" : "bottom", T = (P ? M : O) - d, ue = D < d ? "right" : "left";
       $((X) => ({
         ...X,
         yDir: B,
         maxHeight: T,
         xDir: ue,
-        triggerRect: _ ? y : void 0
+        triggerRect: w ? y : void 0
       }));
     }
-  }, [s, _]);
-  Se(() => (I(), window.addEventListener("resize", I), _ && window.addEventListener("scroll", I, !0), () => {
-    window.removeEventListener("resize", I), _ && window.removeEventListener("scroll", I, !0);
-  }), [I, _]), W(() => {
+  }, [s, w]);
+  Se(() => (I(), window.addEventListener("resize", I), w && window.addEventListener("scroll", I, !0), () => {
+    window.removeEventListener("resize", I), w && window.removeEventListener("scroll", I, !0);
+  }), [I, w]), W(() => {
     if (!s) return;
     const y = requestAnimationFrame(() => {
       const A = z.current;
@@ -1456,14 +1452,14 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
         E.preventDefault(), y.focus?.({ preventScroll: !0 });
         return;
       }
-      const O = d[0], M = d[d.length - 1], H = document.activeElement;
-      E.shiftKey ? H === O && (E.preventDefault(), M.focus({ preventScroll: !0 })) : H === M && (E.preventDefault(), O.focus({ preventScroll: !0 }));
+      const O = d[0], M = d[d.length - 1], D = document.activeElement;
+      E.shiftKey ? D === O && (E.preventDefault(), M.focus({ preventScroll: !0 })) : D === M && (E.preventDefault(), O.focus({ preventScroll: !0 }));
     };
     return document.addEventListener("focusin", A), document.addEventListener("keydown", S), () => {
       document.removeEventListener("focusin", A), document.removeEventListener("keydown", S);
     };
   }, [s]);
-  const D = _ && l.triggerRect ? {
+  const F = w && l.triggerRect ? {
     position: "fixed",
     zIndex: 1e3,
     width: "max-content",
@@ -1479,12 +1475,12 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
     overflowY: "auto",
     [l.xDir]: 0,
     [l.yDir === "bottom" ? "top" : "bottom"]: "100%"
-  }, q = /* @__PURE__ */ w(
+  }, q = /* @__PURE__ */ _(
     "div",
     {
       ref: z,
       className: U(me.dropdown, n),
-      style: D,
+      style: F,
       "aria-hidden": !s,
       "data-variant": i,
       "data-color": v,
@@ -1495,7 +1491,7 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
       "aria-modal": s && i === "drawer-dropdown" ? !0 : void 0,
       "aria-activedescendant": s ? R : void 0,
       children: [
-        /* @__PURE__ */ w("header", { className: me.header, children: [
+        /* @__PURE__ */ _("header", { className: me.header, children: [
           /* @__PURE__ */ a("h2", { className: me.title, children: u }),
           /* @__PURE__ */ a(_e, { size: "sm", variant: "outline", onClick: h, "aria-label": f, children: /* @__PURE__ */ a(Be, {}) })
         ] }),
@@ -1504,11 +1500,11 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
       ]
     }
   );
-  return /* @__PURE__ */ w(pe, { children: [
+  return /* @__PURE__ */ _(pe, { children: [
     t && /* @__PURE__ */ a("div", { className: me.backdrop, "aria-hidden": !s }),
-    /* @__PURE__ */ w("div", { id: e + "-root", ref: j, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ _("div", { id: e + "-root", ref: j, style: { position: "relative", display: "inline-block" }, children: [
       m,
-      _ ? mt(q, document.body) : q
+      w ? mt(q, document.body) : q
     ] })
   ] });
 }, Wn = "_section_1v20z_1", Yn = "_header_1v20z_7", Qn = "_list_1v20z_13", Ie = {
@@ -1524,14 +1520,14 @@ const Fe = ({ className: e, loading: o, icon: n, children: t }) => {
       keyboardEvents: !1,
       sortGroupBy: r
     });
-    return /* @__PURE__ */ w("section", { className: Ie.section, "aria-busy": u, children: [
-      e || o ? /* @__PURE__ */ w("header", { className: Ie.header, children: [
+    return /* @__PURE__ */ _("section", { className: Ie.section, "aria-busy": u, children: [
+      e || o ? /* @__PURE__ */ _("header", { className: Ie.header, children: [
         e && /* @__PURE__ */ a(ve, { as: "h1", size: "lg", children: e }),
         o && /* @__PURE__ */ a(Ue, { as: "p", size: "sm", variant: "subtle", className: Ie.description, children: o })
       ] }) : null,
       f?.map((c, m) => {
         const p = c.props || {};
-        return /* @__PURE__ */ w(qe, { children: [
+        return /* @__PURE__ */ _(qe, { children: [
           p?.title && /* @__PURE__ */ a(ve, { as: "h2", size: "lg", children: p.title }),
           /* @__PURE__ */ a("ul", { className: Ie.list, children: c?.items.map((s, h) => {
             const v = s.props || {};
@@ -1571,7 +1567,7 @@ const Jn = "_item_1cw3x_3", Zn = "_border_1cw3x_75", er = "_header_1cw3x_86", tr
     grouped: v = !1,
     updatedAt: b,
     updatedAtLabel: R,
-    archived: _,
+    archived: w,
     archivedAt: x,
     archivedAtLabel: j,
     trashed: z,
@@ -1579,7 +1575,7 @@ const Jn = "_item_1cw3x_3", Zn = "_border_1cw3x_75", er = "_header_1cw3x_86", tr
     trashedAtLabel: l,
     badge: $,
     dueAt: I,
-    dueAtExpired: D,
+    dueAtExpired: F,
     dueAtLabel: q,
     unread: y,
     unreadLabel: A = "Ulest",
@@ -1588,7 +1584,7 @@ const Jn = "_item_1cw3x_3", Zn = "_border_1cw3x_75", er = "_header_1cw3x_86", tr
     seenByLog: d,
     draftsLabel: O,
     sentCount: M,
-    receivedCount: H,
+    receivedCount: D,
     attachmentsCount: P,
     attachmentsLabel: B,
     tooltips: T = {},
@@ -1600,7 +1596,7 @@ const Jn = "_item_1cw3x_3", Zn = "_border_1cw3x_75", er = "_header_1cw3x_86", tr
     ...N
   }) => {
     const L = u ? "select" : n;
-    return /* @__PURE__ */ w(
+    return /* @__PURE__ */ _(
       Nt,
       {
         as: "li",
@@ -1612,12 +1608,12 @@ const Jn = "_item_1cw3x_3", Zn = "_border_1cw3x_75", er = "_header_1cw3x_86", tr
         "data-unread": y ? "true" : "false",
         "data-selected": f,
         "data-trashed": z,
-        "data-archived": _,
+        "data-archived": w,
         "data-loading": r,
         children: [
-          /* @__PURE__ */ a(kt, { ...N, className: Z.link, as: e, children: /* @__PURE__ */ w("div", { className: Z.border, children: [
-            /* @__PURE__ */ w("header", { className: Z.header, children: [
-              /* @__PURE__ */ w(
+          /* @__PURE__ */ a(kt, { ...N, className: Z.link, as: e, children: /* @__PURE__ */ _("div", { className: Z.border, children: [
+            /* @__PURE__ */ _("header", { className: Z.header, children: [
+              /* @__PURE__ */ _(
                 ve,
                 {
                   as: "h2",
@@ -1666,7 +1662,7 @@ const Jn = "_item_1cw3x_3", Zn = "_border_1cw3x_75", er = "_header_1cw3x_86", tr
                 extendedStatusLabel: m,
                 draftsLabel: O,
                 sentCount: M,
-                receivedCount: H,
+                receivedCount: D,
                 updatedAt: b,
                 updatedAtLabel: R,
                 archivedAt: x,
@@ -1674,7 +1670,7 @@ const Jn = "_item_1cw3x_3", Zn = "_border_1cw3x_75", er = "_header_1cw3x_86", tr
                 trashedAt: k,
                 trashedAtLabel: l,
                 dueAt: I,
-                dueAtExpired: D,
+                dueAtExpired: F,
                 dueAtLabel: q,
                 attachmentsCount: P,
                 attachmentsLabel: B,
@@ -1707,21 +1703,21 @@ const sr = ({
   draftsLabel: v,
   sentCount: b = 0,
   receivedCount: R = 0,
-  attachmentsCount: _ = 0,
+  attachmentsCount: w = 0,
   attachmentsLabel: x,
   transmissionsLabel: j,
   activityLog: z,
   extendedStatusLabel: k,
   tooltips: l = {}
-}) => /* @__PURE__ */ w(Ct, { className: e, size: "xs", children: [
+}) => /* @__PURE__ */ _(Ct, { className: e, size: "xs", children: [
   n && /* @__PURE__ */ a(vr, { tooltip: l.status, loading: o, ...n }),
   k && /* @__PURE__ */ a(oe, { tooltip: l.extendedStatus, variant: "outline", children: k }),
   v && /* @__PURE__ */ a(oe, { tooltip: l.drafts, variant: "dotted", children: v }),
-  r && /* @__PURE__ */ w(re, { tooltip: l.updatedAt, loading: o, datetime: r, size: "xs", children: [
+  r && /* @__PURE__ */ _(re, { tooltip: l.updatedAt, loading: o, datetime: r, size: "xs", children: [
     /* @__PURE__ */ a("strong", { children: t && t.name + ", " }),
     i
   ] }),
-  _ > 0 && /* @__PURE__ */ a(re, { tooltip: l.attachments, loading: o, size: "xs", icon: xt, children: x || _ }),
+  w > 0 && /* @__PURE__ */ a(re, { tooltip: l.attachments, loading: o, size: "xs", icon: xt, children: x || w }),
   j && /* @__PURE__ */ a(re, { tooltip: l.transmissions, loading: o, size: "xs", icon: Lt, children: j }),
   b > 0 && /* @__PURE__ */ a(re, { tooltip: l.sent, size: "xs", icon: Je, children: b }),
   R > 0 && /* @__PURE__ */ a(re, { tooltip: l.received, size: "xs", icon: zt, children: R }),
@@ -1782,7 +1778,7 @@ const sr = ({
   grouped: t = !1,
   loading: r,
   size: i = "xs"
-}) => !e && !o ? null : /* @__PURE__ */ w(Bn, { loading: r, size: i, avatar: e, avatarGroup: !r && t && e && o ? {
+}) => !e && !o ? null : /* @__PURE__ */ _(Bn, { loading: r, size: i, avatar: e, avatarGroup: !r && t && e && o ? {
   items: [o, e]
 } : void 0, children: [
   /* @__PURE__ */ a("strong", { children: e?.name }),
@@ -1796,7 +1792,7 @@ const sr = ({
 function mr(e) {
   return typeof e == "string" || typeof e == "number" || typeof e == "boolean" || e === null || Ke(e);
 }
-const Ge = ({ size: e = "xs", icon: o, progress: n }) => !o && typeof n != "number" ? !1 : /* @__PURE__ */ w("span", { className: fe.media, "data-size": e, children: [
+const Ge = ({ size: e = "xs", icon: o, progress: n }) => !o && typeof n != "number" ? !1 : /* @__PURE__ */ _("span", { className: fe.media, "data-size": e, children: [
   Pe(o) && /* @__PURE__ */ a(De, { ...o, className: fe.avatar }) || ze(o) && /* @__PURE__ */ a(we, { ...o, className: fe.avatarGroup }) || Me(o) && /* @__PURE__ */ a(ce, { ...o, className: fe.icon }) || mr(o) && o || /* @__PURE__ */ a(ce, { svgElement: o, className: fe.icon }),
   n && /* @__PURE__ */ a(Et, { value: n, className: fe.icon })
 ] }), fr = "_item_cqtms_1", pr = "_label_cqtms_54", Oe = {
@@ -1826,7 +1822,7 @@ const Ge = ({ size: e = "xs", icon: o, progress: n }) => !o && typeof n != "numb
       dateTime: m,
       className: U(Oe.item, n),
       ...s,
-      children: /* @__PURE__ */ w(he, { loading: o, children: [
+      children: /* @__PURE__ */ _(he, { loading: o, children: [
         !o && f && /* @__PURE__ */ a(Ge, { size: r, icon: f }),
         /* @__PURE__ */ a("span", { className: Oe.label, children: c })
       ] })
@@ -1840,7 +1836,7 @@ const Ge = ({ size: e = "xs", icon: o, progress: n }) => !o && typeof n != "numb
       dateTime: m,
       className: U(Oe.item, n),
       ...s,
-      children: /* @__PURE__ */ w(he, { loading: o, children: [
+      children: /* @__PURE__ */ _(he, { loading: o, children: [
         !o && f && /* @__PURE__ */ a(Ge, { size: r, icon: f }),
         /* @__PURE__ */ a("span", { className: Oe.label, children: c })
       ] })
@@ -1890,7 +1886,7 @@ const vr = ({ loading: e, value: o = "not-applicable", label: n, tooltip: t }) =
       })),
       [i, h]
     );
-    return e ? /* @__PURE__ */ w(_e, { className: ye.button, variant: n, title: r, disabled: !0, children: [
+    return e ? /* @__PURE__ */ _(_e, { className: ye.button, variant: n, title: r, disabled: !0, children: [
       /* @__PURE__ */ a("span", { className: ye.label, children: o }),
       /* @__PURE__ */ a(Le, { "aria-hidden": "true", focusable: "false" })
     ] }) : /* @__PURE__ */ a("span", { className: ye.menu, children: /* @__PURE__ */ a(
@@ -1900,7 +1896,7 @@ const vr = ({ loading: e, value: o = "not-applicable", label: n, tooltip: t }) =
         variant: "drawer-dropdown",
         title: t,
         size: u,
-        trigger: /* @__PURE__ */ w(
+        trigger: /* @__PURE__ */ _(
           _e,
           {
             className: ye.button,