@altinn/altinn-components 0.63.6 → 0.63.8

package/dist/{ToolbarSearch-75dn6Vnh.js → ToolbarSearch-DXJIRXFI.js}

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as a, jsxs as I, Fragment as xe } from "react/jsx-runtime";
 import * as G from "react";
-import C, { forwardRef as Y, useRef as J, useState as oe, useMemo as le, useEffect as W, Fragment as He, useLayoutEffect as Ce, createContext as ot, useContext as at, isValidElement as Ge, useId as De, useCallback as qe, memo as Oe, createElement as st } from "react";
-import "./tooltip-B5zQ3zF0.js";
+import C, { forwardRef as Y, useRef as J, useState as oe, useMemo as ie, useEffect as W, Fragment as He, useLayoutEffect as Ce, createContext as ot, useContext as at, isValidElement as Ge, useId as De, useCallback as qe, memo as Oe, createElement as st } from "react";
+import "./tooltip-Ct39-719.js";
 import { c as V } from "./index-p1eeF8LQ.js";
-import { useEscapeKey as lt } from "./hooks/useEscapeKey.js";
+import { useEscapeKey as it } from "./hooks/useEscapeKey.js";
 import "./components/Typography/Link.js";
 import { Button as ve } from "./components/Button/Button.js";
-import { createPortal as it } from "react-dom";
+import { createPortal as lt } from "react-dom";
 import { useMenu as Me } from "./hooks/useMenu.js";
 import { Typography as Ke } from "./components/Typography/Typography.js";
 import { Skeleton as ue } from "./components/Skeleton/Skeleton.js";
@@ -29,8 +29,8 @@ import { MenuListItem as Ve } from "./components/Menu/MenuListItem.js";
 import { MenuListGroup as Ue } from "./components/Menu/MenuListGroup.js";
 import { MenuListDivider as We } from "./components/Menu/MenuListDivider.js";
 import { MenuListHeading as Ye } from "./components/Menu/MenuListHeading.js";
-import { a as vt } from "./useMenuVirtualization-Cs426RCN.js";
-import { S as bt, a as gt, b as yt } from "./Paperclip-DjN7qVfQ.js";
+import { u as vt } from "./useMenuVirtualization-DpvWCsyD.js";
+import { a as bt, b as gt, S as yt } from "./Paperclip-DhP0Uo69.js";
 import { useDropdownMenuController as _t } from "./components/Menu/useDropdownMenuController.js";
 import { ItemBase as wt } from "./components/Item/ItemBase.js";
 import { ItemLink as xt } from "./components/Item/ItemLink.js";
@@ -245,7 +245,7 @@ const Ae = Y((e, o) => {
   tooltip: s,
   className: u,
   style: f,
-  children: i
+  children: l
 }) => s ? /* @__PURE__ */ a($e, { content: s, children: /* @__PURE__ */ a(
   "span",
   {
@@ -256,7 +256,7 @@ const Ae = Y((e, o) => {
     "data-theme": t,
     "data-size": r,
     ...r === "xs" && { "aria-hidden": !0 },
-    children: /* @__PURE__ */ a("span", { className: ye.label, children: e || i })
+    children: /* @__PURE__ */ a("span", { className: ye.label, children: e || l })
   }
 ) }) : /* @__PURE__ */ a(
   "span",
@@ -268,7 +268,7 @@ const Ae = Y((e, o) => {
     "data-theme": t,
     "data-size": r,
     ...r === "xs" && { "aria-hidden": !0 },
-    children: /* @__PURE__ */ a("span", { className: ye.label, children: e || i })
+    children: /* @__PURE__ */ a("span", { className: ye.label, children: e || l })
   }
 ), Vt = "_icon_1y3dz_1", Ut = "_shape_1y3dz_9", Wt = "_svg_1y3dz_14", Yt = "_image_1y3dz_15", fe = {
   icon: Vt,
@@ -284,12 +284,12 @@ const Ae = Y((e, o) => {
   iconUrl: s,
   className: u,
   style: f,
-  children: i
+  children: l
 }) => /* @__PURE__ */ a("span", { "data-ui": "icon", "data-size": t, "data-color": r, className: V(fe.icon, u), style: f, children: /* @__PURE__ */ I(ue, { loading: e, variant: "circle", className: fe.shape, children: [
   /* @__PURE__ */ a("span", { className: fe.shape }),
   n && /* @__PURE__ */ a(n, { "aria-hidden": "true", "alt-label": o, className: fe.svg }),
   s && /* @__PURE__ */ a("img", { src: s, alt: o, className: fe.image }),
-  i
+  l
 ] }) }), Qt = ({ size: e, color: o, label: n, htmlFor: t, helperText: r, children: s, ...u }) => /* @__PURE__ */ I(mt, { size: e, color: o, ...u, children: [
   n && /* @__PURE__ */ a(ft, { size: e, htmlFor: t, children: n }),
   s,
@@ -306,10 +306,10 @@ const Ae = Y((e, o) => {
   clearButtonAltText: s = "Clear search",
   onChange: u,
   onClear: f,
-  onNavigate: i,
+  onNavigate: l,
   combobox: c = !1,
   listId: _,
-  "aria-activedescendant": l,
+  "aria-activedescendant": i,
   onKeyDown: b,
   onInput: p,
   onFocus: w,
@@ -334,10 +334,10 @@ const Ae = Y((e, o) => {
       autoCapitalize: "off",
       "aria-autocomplete": "list",
       "aria-controls": _,
-      "aria-activedescendant": l,
+      "aria-activedescendant": i,
       autoFocus: !0,
       onKeyDown: (h) => {
-        (h.key === "ArrowUp" || h.key === "ArrowDown") && (h.preventDefault(), i?.()), b?.(h);
+        (h.key === "ArrowUp" || h.key === "ArrowDown") && (h.preventDefault(), l?.()), b?.(h);
       },
       onInput: p,
       onFocus: w,
@@ -360,7 +360,7 @@ const Ae = Y((e, o) => {
     autoCapitalize: "off",
     autoFocus: !0,
     onKeyDown: (h) => {
-      (h.key === "ArrowUp" || h.key === "ArrowDown") && (h.preventDefault(), i?.()), b?.(h);
+      (h.key === "ArrowUp" || h.key === "ArrowDown") && (h.preventDefault(), l?.()), b?.(h);
     },
     onInput: p,
     onFocus: w,
@@ -375,10 +375,10 @@ const Ae = Y((e, o) => {
   scrollToTopOnOpen: s = !1,
   autoActivateFirstItem: u = !0,
   autoFocusList: f = !0,
-  announceNoResults: i = !1,
+  announceNoResults: l = !1,
   search: c,
   items: _,
-  groups: l = {},
+  groups: i = {},
   size: b,
   id: p,
   color: w,
@@ -391,7 +391,7 @@ const Ae = Y((e, o) => {
 }) => {
   if (o && e >= o)
     return null;
-  const y = t === "combobox", v = y && p ? `${p}-listbox` : p, S = J(r), P = J(r), [D, M] = oe(!1), $ = le(
+  const y = t === "combobox", v = y && p ? `${p}-listbox` : p, S = J(r), P = J(r), [D, M] = oe(!1), $ = ie(
     () => _.map((d, k) => ({
       ...d,
       id: d.id || `${p}-item-${k}`
@@ -399,7 +399,7 @@ const Ae = Y((e, o) => {
     [_, p]
   ), j = J(null), { menu: E, setActiveIndex: O, activeItem: m } = Me({
     items: $,
-    groups: l,
+    groups: i,
     groupByKey: "groupId",
     keyboardEvents: N,
     autoActivateFirstItem: u,
@@ -419,11 +419,11 @@ const Ae = Y((e, o) => {
     const d = P.current;
     P.current = r, !(!N || c || !f) && r && !d && requestAnimationFrame(() => j.current?.focus?.({ preventScroll: !0 }));
   }, [r, N, c]), W(() => {
-    if (y && i) {
+    if (y && l) {
       O(0), M(!0);
       return;
     }
-  }, [i, y, O]), /* @__PURE__ */ I(
+  }, [l, y, O]), /* @__PURE__ */ I(
     Ie,
     {
       variant: z,
@@ -464,7 +464,7 @@ const Ae = Y((e, o) => {
             /* @__PURE__ */ a(Ue, { hidden: L, children: /* @__PURE__ */ I(Ie, { role: "presentation", children: [
               H && /* @__PURE__ */ a(Ye, { title: H, level: e }),
               d?.items.filter((ne) => !ne.props?.hidden).map((ne, g) => {
-                const { active: x, onMouseEnter: T } = ne, { groupId: U, ...B } = ne.props || {}, { expanded: re } = B, ie = Array.isArray(B?.items) && B.items.length > 0, ge = B.role === "checkbox" || B.role === "radio", Ne = y && !ge ? "option" : B.role;
+                const { active: x, onMouseEnter: T } = ne, { groupId: U, ...B } = ne.props || {}, { expanded: re } = B, le = Array.isArray(B?.items) && B.items.length > 0, ge = B.role === "checkbox" || B.role === "radio", Ne = y && !ge ? "option" : B.role;
                 return /* @__PURE__ */ I(
                   Ve,
                   {
@@ -484,9 +484,9 @@ const Ae = Y((e, o) => {
                           selected: B.selected,
                           tabIndex: B?.disabled || N ? -1 : B.tabIndex ?? 0,
                           onMouseEnter: T,
-                          "aria-haspopup": ie ? "menu" : void 0,
-                          "aria-expanded": ie ? re : void 0,
-                          "aria-controls": ie ? B.id + "-menu" : void 0
+                          "aria-haspopup": le ? "menu" : void 0,
+                          "aria-expanded": le ? re : void 0,
+                          "aria-controls": le ? B.id + "-menu" : void 0
                         }
                       ),
                       re && B?.items && /* @__PURE__ */ a(
@@ -497,7 +497,7 @@ const Ae = Y((e, o) => {
                           level: e + 1,
                           maxLevels: o,
                           items: B?.items,
-                          groups: l,
+                          groups: i,
                           size: b,
                           color: w,
                           variant: z
@@ -519,10 +519,10 @@ const Ae = Y((e, o) => {
     search: s,
     items: u,
     groups: f = {},
-    size: i,
+    size: l,
     color: c,
     variant: _,
-    keyboardEvents: l,
+    keyboardEvents: i,
     scrollRefStyles: b = {},
     id: p,
     expanded: w,
@@ -532,7 +532,7 @@ const Ae = Y((e, o) => {
     autoActivateFirstItem: A = !0,
     announceNoResults: R = !1,
     onActiveItemIdChange: y
-  } = e, v = z === "combobox", S = v && p ? `${p}-listbox` : p, P = J(h), [D, M] = oe(!1), $ = le(
+  } = e, v = z === "combobox", S = v && p ? `${p}-listbox` : p, P = J(h), [D, M] = oe(!1), $ = ie(
     () => u.map((g, x) => ({
       ...g,
       id: g.id || `${p}-item-${x}`
@@ -542,7 +542,7 @@ const Ae = Y((e, o) => {
     items: $,
     groups: f,
     groupByKey: "groupId",
-    keyboardEvents: l,
+    keyboardEvents: i,
     autoActivateFirstItem: A,
     ref: o
   }), { flatMenu: d, virtualizer: k, scrollMaxHeight: F } = vt({
@@ -555,7 +555,7 @@ const Ae = Y((e, o) => {
     const x = Math.round(g.offsetTop);
     r((T) => T === x ? T : x);
   });
-  const H = le(() => {
+  const H = ie(() => {
     const g = E?.id;
     if (g)
       return d.findIndex((T) => T.type === "item" && T.itemProps?.id === g);
@@ -571,9 +571,9 @@ const Ae = Y((e, o) => {
     L.current = H;
     const T = x ? H : H + 2;
     if (!x) {
-      const ie = k.getOffsetForIndex(T, "auto");
-      if (!ie) return;
-      const [ge, Ne] = ie;
+      const le = k.getOffsetForIndex(T, "auto");
+      if (!le) return;
+      const [ge, Ne] = le;
       if (Ne === "auto") return;
       k.scrollToOffset(ge + t + 10, { align: "start" });
       return;
@@ -587,7 +587,7 @@ const Ae = Y((e, o) => {
     const [B, re] = U;
     re !== "auto" && k.scrollToOffset(B + t + 10, { align: "start" });
   }, [H, t, k, L]);
-  const q = le(() => {
+  const q = ie(() => {
     const g = /* @__PURE__ */ new Map();
     let x = 0;
     return d.forEach((T, U) => {
@@ -699,7 +699,7 @@ const Ae = Y((e, o) => {
                         tt,
                         {
                           ...x.itemProps || {},
-                          size: x.itemProps?.size || i,
+                          size: x.itemProps?.size || l,
                           color: x.itemProps?.color || c,
                           variant: x.itemProps?.variant || _,
                           active: x.active,
@@ -707,7 +707,7 @@ const Ae = Y((e, o) => {
                           selected: x.itemProps?.selected,
                           "aria-posinset": v ? q.positions.get(g.index) : void 0,
                           "aria-setsize": v ? q.total : void 0,
-                          tabIndex: x.itemProps?.disabled || l ? -1 : 0
+                          tabIndex: x.itemProps?.disabled || i ? -1 : 0
                         }
                       )
                     },
@@ -752,20 +752,20 @@ const Ae = Y((e, o) => {
   const e = at(Ze);
   if (!e)
     throw new Error("useRootContext must be used within a RootProvider.");
-  const { currentId: o, setCurrentId: n, debug: t, setPreviousId: r, previousId: s, languageCode: u } = e, f = (l) => {
-    o && r(o), n(l);
-  }, i = (l) => {
-    t && console.debug(`useRootContext: toggleId called with value: ${l}`), f(o === l ? "" : l);
+  const { currentId: o, setCurrentId: n, debug: t, setPreviousId: r, previousId: s, languageCode: u } = e, f = (i) => {
+    o && r(o), n(i);
+  }, l = (i) => {
+    t && console.debug(`useRootContext: toggleId called with value: ${i}`), f(o === i ? "" : i);
   }, c = () => {
     t && console.debug("useRootContext: closeAll called"), f("");
   };
-  return lt(c), {
+  return it(c), {
     currentId: o,
     previousId: s,
-    toggleId: i,
+    toggleId: l,
     closeAll: c,
-    openId: (l) => {
-      t && console.debug(`useRootContext: openId called with value: ${l}`), f(l);
+    openId: (i) => {
+      t && console.debug(`useRootContext: openId called with value: ${i}`), f(i);
     },
     languageCode: u
   };
@@ -813,7 +813,7 @@ const Ae = Y((e, o) => {
   items: s = [],
   groups: u = {}
 }) => {
-  const { languageCode: f } = tn(), i = G.useMemo(() => nn(f), [f]), [c, _] = G.useState(""), l = G.useCallback(
+  const { languageCode: f } = tn(), l = G.useMemo(() => nn(f), [f]), [c, _] = G.useState(""), i = G.useCallback(
     (m) => {
       _(m.target.value), n?.(m);
     },
@@ -822,14 +822,14 @@ const Ae = Y((e, o) => {
     _(""), t?.();
   }, [t]), p = G.useMemo(() => c.trim().replace(/\s+/g, " "), [c]), w = p.length > 0, z = G.useMemo(() => p.toLowerCase(), [p]), h = G.useMemo(() => p ? p.split(" ") : [], [p]), N = G.useMemo(
     () => ({
-      placeholder: e ?? i.placeholder,
+      placeholder: e ?? l.placeholder,
       name: o ?? "search",
       value: c,
-      onChange: l,
+      onChange: i,
       onClear: b,
       clearButtonAltText: r
     }),
-    [e, i.placeholder, o, c, l, b, r]
+    [e, l.placeholder, o, c, i, b, r]
   ), A = G.useMemo(
     () => s.map((m) => {
       const d = m?.searchWords?.length ? m.searchWords : [m?.title, m?.description].filter(Boolean);
@@ -844,14 +844,14 @@ const Ae = Y((e, o) => {
       {
         id: "emptySearch",
         "aria-disabled": !0,
-        title: i.noResults,
+        title: l.noResults,
         groupId: "emptySearch",
         icon: bt,
         size: "sm",
         as: "div"
       }
     ],
-    [i.noResults]
+    [l.noResults]
   ), y = G.useMemo(() => {
     const m = s.filter((d) => d.groupId === "emptySearch").map((d) => ({ ...d, hidden: !1 }));
     return m.length ? m : R;
@@ -869,36 +869,36 @@ const Ae = Y((e, o) => {
     () => ({
       search: {
         hidden: !0,
-        title: i.hits(P)
+        title: l.hits(P)
       },
       selected: {
         hidden: !0,
-        title: i.selected(D)
+        title: l.selected(D)
       },
       emptySearch: {
         hidden: !0,
-        title: i.noResults
+        title: l.noResults
       },
       ...u
     }),
-    [i, P, D, u]
+    [l, P, D, u]
   ), $ = G.useMemo(
     () => ({
       ...M,
       search: {
         hidden: !w,
-        title: i.hits(P)
+        title: l.hits(P)
       },
       selected: {
         hidden: D === 0,
-        title: i.selected(D)
+        title: l.selected(D)
       },
       emptySearch: {
         hidden: w && (P > 0 || D > 0),
-        title: i.noResults
+        title: l.noResults
       }
     }),
-    [M, w, i, P, D]
+    [M, w, l, P, D]
   ), j = G.useMemo(() => w ? rn([...S, ...v]) : [], [w, S, v]), E = G.useMemo(() => [...y || [], ...v || []], [y, v]), O = G.useMemo(() => w ? P ? j : E : s, [w, s, P, j, E]);
   return {
     search: N,
@@ -917,10 +917,10 @@ const Ae = Y((e, o) => {
   size: s,
   level: u = 0,
   maxLevels: f = 3,
-  virtualized: i = !1,
+  virtualized: l = !1,
   keyboardEvents: c = !1,
   scrollRefStyles: _ = {},
-  onActiveItemIdChange: l,
+  onActiveItemIdChange: i,
   a11yMode: b = "menu",
   open: p,
   scrollToTopOnOpen: w,
@@ -928,7 +928,7 @@ const Ae = Y((e, o) => {
   id: h
 }) => {
   const N = on({ ...o, items: n, groups: t }), A = e ? N.search : o, R = e && N.hasQuery && N.resultCount === 0, y = e ? N.items : n, v = e ? { ...t, ...N.groups } : t, S = b !== "combobox";
-  return i ? /* @__PURE__ */ a(
+  return l ? /* @__PURE__ */ a(
     Zt,
     {
       id: h,
@@ -942,7 +942,7 @@ const Ae = Y((e, o) => {
       maxLevels: f,
       keyboardEvents: c,
       scrollRefStyles: _,
-      onActiveItemIdChange: l,
+      onActiveItemIdChange: i,
       a11yMode: b,
       open: p,
       scrollToTopOnOpen: w,
@@ -963,7 +963,7 @@ const Ae = Y((e, o) => {
       maxLevels: f,
       keyboardEvents: c,
       scrollRefStyles: _,
-      onActiveItemIdChange: l,
+      onActiveItemIdChange: i,
       a11yMode: b,
       open: p,
       scrollToTopOnOpen: w,
@@ -1001,10 +1001,10 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
   leading: s = "tight",
   weight: u = "medium",
   color: f,
-  variant: i,
+  variant: l,
   maxRows: c,
   className: _,
-  style: l,
+  style: i,
   children: b
 }) => {
   const p = t, w = ct(b, n || []);
@@ -1013,12 +1013,12 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
     {
       id: e,
       className: V(mn.heading, _),
-      style: l,
+      style: i,
       "data-size": r,
       "data-leading": s,
       "data-weight": u,
       "data-color": f,
-      "data-variant": r === "xxs" && "default" || i,
+      "data-variant": r === "xxs" && "default" || l,
       "data-max-rows": c,
       children: /* @__PURE__ */ a(ue, { loading: o, children: w })
     }
@@ -1066,10 +1066,10 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
   onClick: s,
   onChange: u,
   onKeyPress: f,
-  onMouseEnter: i,
+  onMouseEnter: l,
   size: c = "sm",
   variant: _,
-  color: l,
+  color: i,
   name: b,
   value: p,
   checked: w,
@@ -1103,7 +1103,7 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
         "data-group-id": o,
         "data-size": c,
         "data-variant": _,
-        "data-color": l,
+        "data-color": i,
         "data-active": $,
         role: n,
         "aria-disabled": D,
@@ -1116,7 +1116,7 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
           D || (q.target === q.currentTarget && q.key === "Enter" && s?.(), f?.(q));
         },
         onClick: s,
-        onMouseEnter: i,
+        onMouseEnter: l,
         tabIndex: j,
         children: [
           /* @__PURE__ */ a(
@@ -1175,12 +1175,12 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
       "data-group-id": o,
       "data-size": c,
       "data-variant": _,
-      "data-color": l,
+      "data-color": i,
       "data-active": $,
       "aria-disabled": D,
       ...D ? { disabled: D } : {},
-      "aria-current": r && M ? "page" : void 0,
-      "aria-selected": r ? void 0 : M,
+      "aria-current": n !== "option" && M ? "page" : void 0,
+      "aria-selected": n === "option" ? M : void 0,
       "data-selected": M,
       "aria-label": R,
       "data-testid": O,
@@ -1188,7 +1188,7 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
         D || (L.target === L.currentTarget && L.key === "Enter" && s?.(), f?.(L));
       },
       onClick: s,
-      onMouseEnter: i,
+      onMouseEnter: l,
       tabIndex: D ? -1 : j ?? 0,
       role: n === "menuItem" ? "menuitem" : n,
       ...k,
@@ -1242,25 +1242,25 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
   color: s = "neutral",
   label: u,
   hideLabel: f,
-  value: i,
+  value: l,
   onClear: c,
   clearButtonAltText: _ = "Clear search",
-  menu: l,
+  menu: i,
   minLength: b,
   ...p
 }) => {
-  const w = De(), [z, h] = oe(!1), N = p.id || `search-field-${w}`, A = `${N}-listbox`, [R, y] = oe(void 0), v = "searchfield-clear-button-" + De(), S = le(() => !l || !i || typeof b == "number" && typeof i == "string" && i.length < b ? !1 : z, [l, z, b, i]), P = le(() => (l?.items ?? []).map((m) => ({
+  const w = De(), [z, h] = oe(!1), N = p.id || `search-field-${w}`, A = `${N}-listbox`, [R, y] = oe(void 0), v = "searchfield-clear-button-" + De(), S = ie(() => !i || !l || typeof b == "number" && typeof l == "string" && l.length < b ? !1 : z, [i, z, b, l]), P = ie(() => (i?.items ?? []).map((m) => ({
     ...m,
     onClick: () => {
       m.onClick?.(), h(!1);
     }
-  })), [l]), D = (m) => {
+  })), [i]), D = (m) => {
     if (m.key === "Enter" && S) {
-      l?.items?.[0]?.onClick?.(), h(!1);
+      i?.items?.[0]?.onClick?.(), h(!1);
       return;
     }
     if (m.key === "Escape" && S) {
-      m.preventDefault(), m.stopPropagation(), h(!1), l?.onClose(), document.getElementById(N)?.focus();
+      m.preventDefault(), m.stopPropagation(), h(!1), i?.onClose(), document.getElementById(N)?.focus();
       return;
     }
     p.onKeyDown?.(m), h(!0);
@@ -1285,7 +1285,7 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
       "data-collapsible": o ? !0 : void 0,
       onBlurCapture: $,
       children: [
-        /* @__PURE__ */ a("span", { className: Z.hiddenInput, "aria-hidden": "true", children: i + " " }),
+        /* @__PURE__ */ a("span", { className: Z.hiddenInput, "aria-hidden": "true", children: l + " " }),
         /* @__PURE__ */ a(
           ut,
           {
@@ -1294,7 +1294,7 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
             "aria-label": f && typeof u == "string" ? u : void 0,
             inputSize: 5,
             type: "search",
-            value: i,
+            value: l,
             className: Z.input,
             "data-collapsible": o ? !0 : void 0,
             autoCapitalize: "off",
@@ -1302,7 +1302,7 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
             minLength: b,
             onKeyDown: D,
             onBlur: E,
-            ...l && {
+            ...i && {
               role: "combobox",
               "aria-autocomplete": "list",
               "aria-expanded": !!S,
@@ -1314,7 +1314,7 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
           }
         ),
         n ? /* @__PURE__ */ a(pt, { "aria-hidden": !0, className: Z.icon }) : /* @__PURE__ */ a(Bt, { "aria-hidden": !0, className: Z.icon }),
-        c && !!i && /* @__PURE__ */ a("span", { className: Z.clear, children: /* @__PURE__ */ a(
+        c && !!l && /* @__PURE__ */ a("span", { className: Z.clear, children: /* @__PURE__ */ a(
           ve,
           {
             id: v,
@@ -1335,15 +1335,15 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
       ]
     }
   );
-  return l ? /* @__PURE__ */ I("div", { className: Z.fieldContainer, children: [
+  return i ? /* @__PURE__ */ I("div", { className: Z.fieldContainer, children: [
     O,
     S && /* @__PURE__ */ a("div", { className: Z.autocomplete, "aria-hidden": !S, onMouseDown: j, children: /* @__PURE__ */ a(
       et,
       {
-        ...l,
+        ...i,
         id: A,
         items: P,
-        groups: l?.groups,
+        groups: i?.groups,
         keyboardEvents: !0,
         a11yMode: "combobox",
         open: S,
@@ -1366,10 +1366,10 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
   datetime: s,
   children: u,
   as: f,
-  ...i
+  ...l
 }) => {
   const c = f || "div", _ = s ? "time" : "span";
-  return /* @__PURE__ */ I(c, { ...i, className: pe.byline, "data-color": o, "data-size": n, children: [
+  return /* @__PURE__ */ I(c, { ...l, className: pe.byline, "data-color": o, "data-size": n, children: [
     (r || t) && /* @__PURE__ */ a(ue, { variant: "circle", className: pe.avatar, loading: e, children: r ? /* @__PURE__ */ a(be, { ...r, size: n, className: pe.avatarGroup }) : t && /* @__PURE__ */ a(je, { ...t, size: n, className: pe.avatar }) }),
     /* @__PURE__ */ a(_, { "data-size": n, dateTime: s, className: pe.label, children: /* @__PURE__ */ a(ue, { loading: e, children: u }) })
   ] });
@@ -1405,10 +1405,10 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
   variant: s = "dropdown",
   title: u = "Title",
   closeLabel: f = "Close",
-  submitLabel: i,
+  submitLabel: l,
   trigger: c,
   children: _,
-  open: l,
+  open: i,
   onClose: b,
   color: p,
   onSubmit: w,
@@ -1416,16 +1416,16 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
   useFixedPosition: h = !1,
   expanded: N = !1
 }) => {
-  const A = J(null), R = J(null), y = J(l);
+  const A = J(null), R = J(null), y = J(i);
   W(() => {
-    y.current = l;
-  }, [l]);
+    y.current = i;
+  }, [i]);
   const [v, S] = oe({
     yDir: r.includes("top") ? "top" : "bottom",
     xDir: r.includes("right") ? "right" : "left",
     maxHeight: 300
   }), P = qe(() => {
-    if (l && A.current && R.current) {
+    if (i && A.current && R.current) {
       const $ = A.current.getBoundingClientRect(), j = R.current.getBoundingClientRect(), E = window.innerHeight, O = window.innerWidth, m = 16, d = E - $.bottom, k = $.top, F = O - $.right - j.width, H = d < 250 && k > d, L = H ? "top" : "bottom", q = (H ? k : d) - m, g = F < m ? "right" : "left";
       S((x) => ({
         ...x,
@@ -1435,11 +1435,11 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
         triggerRect: h ? $ : void 0
       }));
     }
-  }, [l, h]);
+  }, [i, h]);
   Ce(() => (P(), window.addEventListener("resize", P), h && window.addEventListener("scroll", P, !0), () => {
     window.removeEventListener("resize", P), h && window.removeEventListener("scroll", P, !0);
   }), [P, h]), W(() => {
-    if (!l) return;
+    if (!i) return;
     const $ = requestAnimationFrame(() => {
       const j = R.current;
       if (!j) return;
@@ -1458,18 +1458,18 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
       j.focus?.({ preventScroll: !0 });
     });
     return () => cancelAnimationFrame($);
-  }, [l]), W(() => {
+  }, [i]), W(() => {
     const $ = (E) => {
       E.key === "Escape" && (E.preventDefault(), b());
     }, j = (E) => {
       const O = E.target, m = A.current?.contains(O), d = R.current?.contains(O);
       !m && !d && b();
     };
-    return l && (document.addEventListener("mousedown", j), document.addEventListener("keydown", $)), () => {
+    return i && (document.addEventListener("mousedown", j), document.addEventListener("keydown", $)), () => {
       document.removeEventListener("mousedown", j), document.removeEventListener("keydown", $);
     };
-  }, [l, b]), W(() => {
-    if (!l) return;
+  }, [i, b]), W(() => {
+    if (!i) return;
     const $ = R.current;
     if (!$) return;
     const j = (O) => {
@@ -1490,7 +1490,7 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
     return document.addEventListener("focusin", j), document.addEventListener("keydown", E), () => {
       document.removeEventListener("focusin", j), document.removeEventListener("keydown", E);
     };
-  }, [l]);
+  }, [i]);
   const D = h && v.triggerRect ? {
     position: "fixed",
     zIndex: 1e3,
@@ -1513,7 +1513,7 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
       ref: R,
       className: V(ce.dropdown, n),
       style: D,
-      "aria-hidden": !l,
+      "aria-hidden": !i,
       "data-variant": s,
       "data-color": p,
       "data-expanded": N,
@@ -1528,15 +1528,15 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
           /* @__PURE__ */ a(ve, { size: "sm", variant: "outline", onClick: b, "aria-label": f, children: /* @__PURE__ */ a(Ae, {}) })
         ] }),
         /* @__PURE__ */ a("div", { className: ce.content, children: _ }),
-        i && /* @__PURE__ */ a("footer", { className: ce.footer, children: /* @__PURE__ */ a(ve, { size: "lg", variant: "solid", onClick: w || b, rounded: !0, children: /* @__PURE__ */ a("span", { "data-size": "md", children: i }) }) })
+        l && /* @__PURE__ */ a("footer", { className: ce.footer, children: /* @__PURE__ */ a(ve, { size: "lg", variant: "solid", onClick: w || b, rounded: !0, children: /* @__PURE__ */ a("span", { "data-size": "md", children: l }) }) })
       ]
     }
   );
   return /* @__PURE__ */ I(xe, { children: [
-    t && /* @__PURE__ */ a("div", { className: ce.backdrop, "aria-hidden": !l }),
+    t && /* @__PURE__ */ a("div", { className: ce.backdrop, "aria-hidden": !i }),
     /* @__PURE__ */ I("div", { id: e + "-root", ref: A, style: { position: "relative", display: "inline-block" }, children: [
       c,
-      h ? it(M, document.body) : M
+      h ? lt(M, document.body) : M
     ] })
   ] });
 }, qn = "_section_1v20z_1", Kn = "_header_1v20z_7", Vn = "_list_1v20z_13", _e = {
@@ -1557,12 +1557,12 @@ const Te = ({ className: e, loading: o, icon: n, children: t }) => {
         e && /* @__PURE__ */ a(me, { as: "h1", size: "lg", children: e }),
         o && /* @__PURE__ */ a(Ke, { as: "p", size: "sm", variant: "subtle", className: _e.description, children: o })
       ] }) : null,
-      f?.map((i, c) => {
-        const _ = i.props || {};
+      f?.map((l, c) => {
+        const _ = l.props || {};
         return /* @__PURE__ */ I(He, { children: [
           _?.title && /* @__PURE__ */ a(me, { as: "h2", size: "lg", children: _.title }),
-          /* @__PURE__ */ a("ul", { className: _e.list, children: i?.items.map((l, b) => {
-            const p = l.props || {};
+          /* @__PURE__ */ a("ul", { className: _e.list, children: l?.items.map((i, b) => {
+            const p = i.props || {};
             return /* @__PURE__ */ st(rt, { ...p, highlightWords: s, key: "dialog-list-item" + b });
           }) })
         ] }, "dialog-list-item" + c);
@@ -1591,10 +1591,10 @@ const Wn = "_item_1cw3x_3", Yn = "_border_1cw3x_75", Qn = "_header_1cw3x_86", Xn
     controls: s,
     selectable: u,
     selected: f,
-    status: i,
+    status: l,
     extendedStatusLabel: c,
     sender: _,
-    recipient: l,
+    recipient: i,
     recipientLabel: b = "to",
     grouped: p = !1,
     updatedAt: w,
@@ -1665,7 +1665,7 @@ const Wn = "_item_1cw3x_3", Yn = "_border_1cw3x_75", Qn = "_header_1cw3x_86", Xn
                   size: "xs",
                   loading: r,
                   sender: _,
-                  recipient: l,
+                  recipient: i,
                   recipientLabel: b,
                   grouped: p
                 }
@@ -1689,7 +1689,7 @@ const Wn = "_item_1cw3x_3", Yn = "_border_1cw3x_75", Qn = "_header_1cw3x_86", Xn
                 className: X.footer,
                 loading: r,
                 badge: S,
-                status: i,
+                status: l,
                 extendedStatusLabel: c,
                 draftsLabel: m,
                 sentCount: d,
@@ -1725,10 +1725,10 @@ const rr = ({
   updatedAtLabel: s,
   dueAt: u,
   dueAtLabel: f,
-  archivedAt: i,
+  archivedAt: l,
   archivedAtLabel: c,
   trashedAt: _,
-  trashedAtLabel: l,
+  trashedAtLabel: i,
   draftsLabel: b,
   sentCount: p = 0,
   receivedCount: w = 0,
@@ -1746,12 +1746,24 @@ const rr = ({
     /* @__PURE__ */ a("strong", { children: t && t.name + ", " }),
     s
   ] }),
-  u && f && /* @__PURE__ */ a(ee, { tooltip: y.dueAt, loading: o, datetime: u, size: "xs", icon: gt, children: f }),
-  z > 0 && /* @__PURE__ */ a(ee, { tooltip: y.attachments, loading: o, size: "xs", icon: yt, children: h || z }),
+  z > 0 && /* @__PURE__ */ a(ee, { tooltip: y.attachments, loading: o, size: "xs", icon: gt, children: h || z }),
   N && /* @__PURE__ */ a(ee, { tooltip: y.transmissions, loading: o, size: "xs", icon: At, children: N }),
   p > 0 && /* @__PURE__ */ a(ee, { tooltip: y.sent, size: "xs", icon: Qe, children: p }),
   w > 0 && /* @__PURE__ */ a(ee, { tooltip: y.received, size: "xs", icon: Et, children: w }),
-  l && /* @__PURE__ */ a(
+  u && f && /* @__PURE__ */ a(
+    ee,
+    {
+      variant: "tinted",
+      color: "warning",
+      tooltip: y.dueAt,
+      loading: o,
+      datetime: u,
+      size: "xs",
+      icon: yt,
+      children: f
+    }
+  ),
+  i && /* @__PURE__ */ a(
     ee,
     {
       variant: "tinted",
@@ -1761,7 +1773,7 @@ const rr = ({
       datetime: _,
       size: "xs",
       icon: Ht,
-      children: l
+      children: i
     }
   ) || c && /* @__PURE__ */ a(
     ee,
@@ -1770,7 +1782,7 @@ const rr = ({
       color: "neutral",
       tooltip: y.archivedAt,
       loading: o,
-      datetime: i,
+      datetime: l,
       size: "xs",
       icon: kt,
       children: c
@@ -1801,18 +1813,18 @@ const rr = ({
   /* @__PURE__ */ a("strong", { children: e?.name }),
   " ",
   o && n + " " + o?.name
-] }), ar = "_media_1x8z9_1", sr = "_icon_1x8z9_10", lr = "_avatarGroup_1x8z9_17", de = {
+] }), ar = "_media_1x8z9_1", sr = "_icon_1x8z9_10", ir = "_avatarGroup_1x8z9_17", de = {
   media: ar,
   icon: sr,
-  avatarGroup: lr
+  avatarGroup: ir
 };
-function ir(e) {
+function lr(e) {
   return typeof e == "string" || typeof e == "number" || typeof e == "boolean" || e === null || Ge(e);
 }
 const Fe = ({ size: e = "xs", icon: o, progress: n }) => !o && typeof n != "number" ? !1 : /* @__PURE__ */ I("span", { className: de.media, "data-size": e, children: [
-  Ee(o) && /* @__PURE__ */ a(je, { ...o, className: de.avatar }) || Se(o) && /* @__PURE__ */ a(be, { ...o, className: de.avatarGroup }) || ze(o) && /* @__PURE__ */ a(se, { ...o, className: de.icon }) || ir(o) && o || /* @__PURE__ */ a(se, { svgElement: o, className: de.icon }),
+  Ee(o) && /* @__PURE__ */ a(je, { ...o, className: de.avatar }) || Se(o) && /* @__PURE__ */ a(be, { ...o, className: de.avatarGroup }) || ze(o) && /* @__PURE__ */ a(se, { ...o, className: de.icon }) || lr(o) && o || /* @__PURE__ */ a(se, { svgElement: o, className: de.icon }),
   n && /* @__PURE__ */ a(Ot, { value: n, className: de.icon })
-] }), cr = "_item_ugak2_1", dr = "_label_ugak2_53", we = {
+] }), cr = "_item_cqtms_1", dr = "_label_cqtms_54", we = {
   item: cr,
   label: dr
 }, ee = ({
@@ -1824,10 +1836,10 @@ const Fe = ({ size: e = "xs", icon: o, progress: n }) => !o && typeof n != "numb
   variant: s,
   color: u,
   icon: f,
-  children: i,
+  children: l,
   datetime: c,
   tooltip: _,
-  ...l
+  ...i
 }) => {
   const b = e || (c ? "time" : "span");
   return _ ? /* @__PURE__ */ a($e, { content: _, placement: "bottom", children: /* @__PURE__ */ a(
@@ -1838,10 +1850,10 @@ const Fe = ({ size: e = "xs", icon: o, progress: n }) => !o && typeof n != "numb
       "data-variant": s,
       dateTime: c,
       className: V(we.item, n),
-      ...l,
+      ...i,
       children: /* @__PURE__ */ I(ue, { loading: o, children: [
         !o && f && /* @__PURE__ */ a(Fe, { size: r, icon: f }),
-        /* @__PURE__ */ a("span", { className: we.label, children: i })
+        /* @__PURE__ */ a("span", { className: we.label, children: l })
       ] })
     }
   ) }) : /* @__PURE__ */ a(
@@ -1852,10 +1864,10 @@ const Fe = ({ size: e = "xs", icon: o, progress: n }) => !o && typeof n != "numb
       "data-variant": s,
       dateTime: c,
       className: V(we.item, n),
-      ...l,
+      ...i,
       children: /* @__PURE__ */ I(ue, { loading: o, children: [
         !o && f && /* @__PURE__ */ a(Fe, { size: r, icon: f }),
-        /* @__PURE__ */ a("span", { className: we.label, children: i })
+        /* @__PURE__ */ a("span", { className: we.label, children: l })
       ] })
     }
   );
@@ -1888,19 +1900,19 @@ const mr = ({ loading: e, value: o = "not-applicable", label: n, tooltip: t }) =
     dropdownSize: s = "sm",
     id: u = "toolbar-menu",
     onSelectId: f,
-    ...i
+    ...l
   }) => {
-    const c = _t({ id: u, returnFocusOnClose: !0 }), _ = i.searchable ? "combobox" : "menu", l = qe(
+    const c = _t({ id: u, returnFocusOnClose: !0 }), _ = l.searchable ? "combobox" : "menu", i = qe(
       (p) => {
         f?.(p?.id ?? ""), p?.role !== "checkbox" && c.setOpen(!1);
       },
       [f, c]
-    ), b = le(
+    ), b = ie(
       () => r.map((p) => ({
         ...p,
-        onClick: () => l(p)
+        onClick: () => i(p)
       })),
-      [r, l]
+      [r, i]
     );
     return e ? /* @__PURE__ */ I(ve, { className: he.button, variant: n, disabled: !0, children: [
       /* @__PURE__ */ a("span", { className: he.label, children: o }),
@@ -1930,16 +1942,16 @@ const mr = ({ loading: e, value: o = "not-applicable", label: n, tooltip: t }) =
         ),
         open: c.open,
         onClose: () => c.setOpen(!1),
-        ...i?.searchable ? {} : c.dropdownA11yProps,
+        ...l?.searchable ? {} : c.dropdownA11yProps,
         children: /* @__PURE__ */ a(
           et,
           {
-            ...i,
+            ...l,
             items: b,
             keyboardEvents: c.open,
             a11yMode: _,
             open: c.open,
-            scrollToTopOnOpen: i.virtualized,
+            scrollToTopOnOpen: l.virtualized,
             ..._ === "combobox" ? { id: c.menuId } : c.menuA11yProps
           }
         )
@@ -1956,10 +1968,10 @@ const mr = ({ loading: e, value: o = "not-applicable", label: n, tooltip: t }) =
     loading: s,
     collapsible: u,
     clearButtonAltText: f = "Clear search",
-    onChange: i,
+    onChange: l,
     onClear: c,
     onKeyDown: _,
-    menu: l,
+    menu: i,
     minLength: b,
     disabled: p
   }) => /* @__PURE__ */ a(
@@ -1972,7 +1984,7 @@ const mr = ({ loading: e, value: o = "not-applicable", label: n, tooltip: t }) =
       name: t,
       placeholder: r,
       clearButtonAltText: f,
-      onChange: i,
+      onChange: l,
       onClear: c,
       onKeyDown: _,
       collapsible: u,
@@ -1981,43 +1993,43 @@ const mr = ({ loading: e, value: o = "not-applicable", label: n, tooltip: t }) =
       type: "search",
       minLength: b,
       loading: s,
-      menu: l,
+      menu: i,
       disabled: p
     }
   )
 );
 export {
   te as B,
-  Un as D,
+  or as D,
   Qt as F,
   me as H,
   se as I,
   et as M,
   Jr as R,
   Pe as S,
-  eo as T,
+  Zr as T,
   Zt as V,
   $n as a,
-  rt as b,
-  rr as c,
-  or as d,
-  ur as e,
-  mr as f,
+  Un as b,
+  rt as c,
+  rr as d,
+  mr as e,
+  ur as f,
   Gn as g,
-  Te as h,
-  ze as i,
-  Le as j,
-  tt as k,
-  Je as l,
-  Xe as m,
+  Le as h,
+  Te as i,
+  tt as j,
+  Je as k,
+  Xe as l,
+  ee as m,
   Fe as n,
-  ee as o,
-  Zr as p,
-  Bt as q,
-  Qe as r,
+  Qe as o,
+  zt as p,
+  Be as q,
+  Bt as r,
   Ae as s,
-  Be as t,
-  tn as u,
-  zt as v,
-  on as w
+  eo as t,
+  ze as u,
+  on as v,
+  tn as w
 };