@altinn/altinn-components 0.55.6 → 0.56.0

package/dist/SearchField-BUp4_VIq.js

@@ -0,0 +1,636 @@
+"use client";
+import { jsx as r, jsxs as L } from "react/jsx-runtime";
+import { c as pe } from "./index-p1eeF8LQ.js";
+import { useRef as W, useState as X, useMemo as R, useEffect as j, Fragment as me, useLayoutEffect as oe, useId as ne } from "react";
+import { Icon as he } from "./components/Icon/Icon.js";
+import { Button as ye } from "./components/Button/Button.js";
+import "./components/RootProvider/RootProvider.js";
+import { useMenu as se } from "./hooks/useMenu.js";
+import { Input as xe } from "./components/Forms/Input.js";
+import { FieldBase as ge } from "./components/Forms/FieldBase.js";
+import "./components/Snackbar/useSnackbar.js";
+import { S as Ie } from "./MagnifyingGlass-bwVhw07z.js";
+import { S as ve } from "./XMark-tKk6aExO.js";
+import { MenuItem as ie } from "./components/Menu/MenuItem.js";
+import { MenuList as Z } from "./components/Menu/MenuList.js";
+import { MenuListItem as ae } from "./components/Menu/MenuListItem.js";
+import { MenuListGroup as ce } from "./components/Menu/MenuListGroup.js";
+import { MenuListDivider as le } from "./components/Menu/MenuListDivider.js";
+import { MenuListHeading as ue } from "./components/Menu/MenuListHeading.js";
+import { a as be } from "./useMenuVirtualization-Cs426RCN.js";
+import { useMenuSearch as we } from "./components/Menu/useMenuSearch.js";
+import './assets/SearchField.css';const _e = "_search_18jfe_1", ke = "_searchInput_18jfe_8", te = {
+  search: _e,
+  searchInput: ke
+}, de = ({
+  style: v,
+  index: b,
+  name: M,
+  value: _,
+  placeholder: f = "Search",
+  clearButtonAltText: a = "Clear search",
+  onChange: A,
+  onClear: D,
+  onNavigate: m,
+  combobox: l = !1,
+  listId: g,
+  "aria-activedescendant": C,
+  onKeyDown: h,
+  onInput: s,
+  onFocus: w,
+  ...k
+}) => /* @__PURE__ */ r("li", { className: te.search, style: v, "data-index": b, "data-menu-search": "true", children: l ? (
+  // biome-ignore lint/a11y/useFocusableInteractive: <explanation>
+  // biome-ignore lint/a11y/useAriaPropsForRole: <explanation>
+  // biome-ignore lint/a11y/useSemanticElements: <explanation>
+  /* @__PURE__ */ r("div", { role: "combobox", "aria-expanded": !0, "aria-haspopup": "listbox", "aria-owns": g, children: /* @__PURE__ */ r(
+    re,
+    {
+      size: "xs",
+      className: te.searchInput,
+      name: M,
+      value: _,
+      placeholder: f,
+      onChange: A,
+      onClear: D,
+      clearButtonAltText: a,
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      "aria-autocomplete": "list",
+      "aria-controls": g,
+      "aria-activedescendant": C,
+      autoFocus: !0,
+      onKeyDown: (c) => {
+        (c.key === "ArrowUp" || c.key === "ArrowDown") && (c.preventDefault(), m?.()), h?.(c);
+      },
+      onInput: s,
+      onFocus: w,
+      ...k
+    }
+  ) })
+) : /* @__PURE__ */ r(
+  re,
+  {
+    size: "xs",
+    className: te.searchInput,
+    name: M,
+    value: _,
+    placeholder: f,
+    onChange: A,
+    onClear: D,
+    clearButtonAltText: a,
+    autoComplete: "off",
+    autoCorrect: "off",
+    autoCapitalize: "off",
+    autoFocus: !0,
+    onKeyDown: (c) => {
+      (c.key === "ArrowUp" || c.key === "ArrowDown") && (c.preventDefault(), m?.()), h?.(c);
+    },
+    onInput: s,
+    onFocus: w,
+    ...k
+  }
+) }), fe = ({
+  level: v = 0,
+  maxLevels: b,
+  expanded: M,
+  a11yMode: _ = "menu",
+  open: f,
+  scrollToTopOnOpen: a = !1,
+  autoActivateFirstItem: A = !0,
+  autoFocusList: D = !0,
+  announceNoResults: m = !1,
+  search: l,
+  items: g,
+  groups: C = {},
+  size: h,
+  id: s,
+  color: w,
+  variant: k,
+  scrollRefStyles: c = {},
+  keyboardEvents: y = !1,
+  onSelect: S = () => {
+  },
+  onActiveItemIdChange: I
+}) => {
+  if (b && v >= b)
+    return null;
+  const p = _ === "combobox", u = p && s ? `${s}-listbox` : s, B = W(f), z = W(f), [Y, n] = X(!1), P = R(
+    () => g.map((o, x) => ({
+      ...o,
+      id: o.id || `${s}-item-${x}`
+    })),
+    [g, s]
+  ), G = W(null), { menu: T, setActiveIndex: H, activeItem: $ } = se({
+    items: P,
+    groups: C,
+    groupByKey: "groupId",
+    keyboardEvents: y,
+    autoActivateFirstItem: A,
+    onSelect: S,
+    ref: G
+  });
+  return j(() => {
+    I?.($?.id);
+  }, [$?.id, I]), j(() => {
+    if (!a) {
+      B.current = f;
+      return;
+    }
+    const o = B.current;
+    B.current = f, f && !o && G.current?.scrollTo({ top: 0 });
+  }, [f, a]), j(() => {
+    const o = z.current;
+    z.current = f, !(!y || l || !D) && f && !o && requestAnimationFrame(() => G.current?.focus?.({ preventScroll: !0 }));
+  }, [f, y, l]), j(() => {
+    if (p && m) {
+      H(0), n(!0);
+      return;
+    }
+  }, [m, p, H]), /* @__PURE__ */ L(
+    Z,
+    {
+      variant: k,
+      expanded: M,
+      ref: G,
+      style: c,
+      id: u,
+      role: p ? "listbox" : void 0,
+      tabIndex: y ? -1 : void 0,
+      children: [
+        l && /* @__PURE__ */ r(
+          de,
+          {
+            ...l,
+            combobox: p,
+            listId: u,
+            "aria-activedescendant": p && Y ? $?.id : void 0,
+            onNavigate: p ? () => n(!0) : void 0,
+            onChange: (o) => {
+              n(!1), l.onChange?.(o);
+            },
+            onFocus: (o) => {
+              n(!1), l.onFocus?.(o);
+            },
+            onInput: (o) => {
+              n(!1), l.onInput?.(o);
+            },
+            onKeyDown: (o) => {
+              const x = o.key === "ArrowUp" || o.key === "ArrowDown", O = o.key.length === 1 || o.key === "Backspace" || o.key === "Delete";
+              p && !x && O && n(!1), l.onKeyDown?.(o);
+            }
+          }
+        ),
+        T.map((o, x) => {
+          const O = o?.props || {}, { title: F, hidden: q = !1, divider: J = !0 } = O;
+          return /* @__PURE__ */ L(me, { children: [
+            (v > 0 || x) && J ? /* @__PURE__ */ r(le, {}) : "",
+            /* @__PURE__ */ r(ce, { hidden: q, children: /* @__PURE__ */ L(Z, { role: "presentation", children: [
+              F && /* @__PURE__ */ r(ue, { title: F, level: v }),
+              o?.items.filter((U) => !U.props?.hidden).map((U, e) => {
+                const { active: t, onMouseEnter: d } = U, { groupId: N, ...i } = U.props || {}, { expanded: K } = i, V = Array.isArray(i?.items) && i.items.length > 0, Q = i.role === "checkbox" || i.role === "radio", ee = p && !Q ? "option" : i.role;
+                return /* @__PURE__ */ L(
+                  ae,
+                  {
+                    expanded: K,
+                    onMouseLeave: () => H(-1),
+                    role: p || Q ? "presentation" : void 0,
+                    children: [
+                      /* @__PURE__ */ r(
+                        ie,
+                        {
+                          ...i,
+                          size: i?.size || O?.size || h,
+                          color: i?.color || O?.color || w,
+                          variant: i?.variant || O?.variant || k,
+                          active: t,
+                          role: ee,
+                          selected: p && !Q ? t : i.selected,
+                          tabIndex: i?.disabled || y ? -1 : i.tabIndex ?? 0,
+                          onMouseEnter: d,
+                          "aria-haspopup": V ? "menu" : void 0,
+                          "aria-expanded": V ? K : void 0,
+                          "aria-controls": V ? i.id + "-menu" : void 0
+                        }
+                      ),
+                      K && i?.items && /* @__PURE__ */ r(
+                        fe,
+                        {
+                          id: i.id + "-menu",
+                          expanded: K,
+                          level: v + 1,
+                          maxLevels: b,
+                          items: i?.items,
+                          groups: C,
+                          size: h,
+                          color: w,
+                          variant: k
+                        }
+                      )
+                    ]
+                  },
+                  e
+                );
+              })
+            ] }) }, x)
+          ] }, x);
+        })
+      ]
+    }
+  );
+}, Ae = (v) => {
+  const b = W(null), M = W(null), [_, f] = X(0), {
+    search: a,
+    items: A,
+    groups: D = {},
+    size: m,
+    color: l,
+    variant: g,
+    keyboardEvents: C,
+    scrollRefStyles: h = {},
+    id: s,
+    expanded: w,
+    a11yMode: k = "menu",
+    open: c,
+    scrollToTopOnOpen: y = !1,
+    autoActivateFirstItem: S = !0,
+    announceNoResults: I = !1,
+    onActiveItemIdChange: p
+  } = v, u = k === "combobox", B = u && s ? `${s}-listbox` : s, z = W(c), [Y, n] = X(!1), P = R(
+    () => A.map((e, t) => ({
+      ...e,
+      id: e.id || `${s}-item-${t}`
+    })),
+    [A, s]
+  ), { menu: G, activeItem: T, setActiveIndex: H, activeIndex: $ } = se({
+    items: P,
+    groups: D,
+    groupByKey: "groupId",
+    keyboardEvents: C,
+    autoActivateFirstItem: S,
+    ref: b
+  }), { flatMenu: o, virtualizer: x, scrollMaxHeight: O } = be({
+    menu: G,
+    scrollRef: b
+  });
+  oe(() => {
+    const e = M.current;
+    if (!e) return;
+    const t = Math.round(e.offsetTop);
+    f((d) => d === t ? d : t);
+  });
+  const F = R(() => {
+    const e = T?.id;
+    if (e)
+      return o.findIndex((d) => d.type === "item" && d.itemProps?.id === e);
+    if ($ < 0) return -1;
+    let t = -1;
+    for (let d = 0; d < o.length; d++)
+      if (o[d]?.type === "item" && (t += 1, t === $))
+        return d;
+    return -1;
+  }, [T?.id, $, o]), q = W(null);
+  oe(() => {
+    const e = q?.current, t = typeof e == "number" ? F <= e : !1;
+    q.current = F;
+    const d = t ? F : F + 2;
+    if (!t) {
+      const V = x.getOffsetForIndex(d, "auto");
+      if (!V) return;
+      const [Q, ee] = V;
+      if (ee === "auto") return;
+      x.scrollToOffset(Q + _ + 10, { align: "start" });
+      return;
+    }
+    if (F <= 3) {
+      x.scrollToOffset(0);
+      return;
+    }
+    const N = x.getOffsetForIndex(F - 1, "auto");
+    if (!N) return;
+    const [i, K] = N;
+    K !== "auto" && x.scrollToOffset(i + _ + 10, { align: "start" });
+  }, [F, _, x, q]);
+  const J = R(() => {
+    const e = /* @__PURE__ */ new Map();
+    let t = 0;
+    return o.forEach((d, N) => {
+      d.type === "item" && (t += 1, e.set(N, t));
+    }), { positions: e, total: t };
+  }, [o]);
+  j(() => {
+    p?.(T?.id);
+  }, [T?.id, p]), j(() => {
+    if (u && I) {
+      H(0), n(!0);
+      return;
+    }
+  }, [I, u, H]), j(() => {
+    if (!y) {
+      z.current = c;
+      return;
+    }
+    const e = z.current;
+    z.current = c, c && !e && b.current?.scrollTo({ top: 0 });
+  }, [c, y]);
+  const U = {
+    position: "relative",
+    maxHeight: h?.maxHeight || O,
+    margin: "-0.5rem",
+    padding: "0.5rem",
+    minWidth: h?.minWidth ?? "20rem",
+    overflowY: "auto",
+    ...h
+  };
+  return /* @__PURE__ */ L(
+    Z,
+    {
+      ref: b,
+      style: U,
+      variant: g,
+      color: l,
+      expanded: w,
+      id: B,
+      role: u ? "listbox" : void 0,
+      children: [
+        a && /* @__PURE__ */ r(
+          de,
+          {
+            ...a,
+            combobox: u,
+            listId: B,
+            "aria-activedescendant": u && Y ? T?.id : void 0,
+            onNavigate: u ? () => n(!0) : void 0,
+            onChange: (e) => {
+              n(!1), a.onChange?.(e);
+            },
+            onFocus: (e) => {
+              n(!1), a.onFocus?.(e);
+            },
+            onInput: (e) => {
+              n(!1), a.onInput?.(e);
+            },
+            onKeyDown: (e) => {
+              const t = e.key === "ArrowUp" || e.key === "ArrowDown", d = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete";
+              u && !t && d && n(!1), a.onKeyDown?.(e);
+            }
+          }
+        ),
+        /* @__PURE__ */ r(
+          ce,
+          {
+            ref: M,
+            style: {
+              position: "relative",
+              height: `${x.getTotalSize()}px`,
+              width: "100%"
+            },
+            children: /* @__PURE__ */ r(Z, { style: { width: "100%", minWidth: "100%" }, children: x.getVirtualItems().map((e) => {
+              const t = o[e.index];
+              if (!t) return null;
+              const d = {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${e.start}px)`
+              }, N = {
+                style: d,
+                index: e.index,
+                "data-index": e.index,
+                ref: x.measureElement
+              };
+              switch (t.type) {
+                case "divider":
+                  return /* @__PURE__ */ r(
+                    le,
+                    {
+                      ...N,
+                      style: { ...d, padding: "0.25rem 0" }
+                    },
+                    e.key
+                  );
+                case "header":
+                  return /* @__PURE__ */ r(ue, { ...N, title: t.title || "", level: 1 }, e.key);
+                default: {
+                  const i = t.itemProps?.role === "checkbox" || t.itemProps?.role === "radio", K = u && !i ? "option" : t.itemProps?.role;
+                  return /* @__PURE__ */ r(
+                    ae,
+                    {
+                      ...N,
+                      role: u || i ? "presentation" : "menuitem",
+                      children: /* @__PURE__ */ r(
+                        ie,
+                        {
+                          ...t.itemProps || {},
+                          size: t.itemProps?.size || m,
+                          color: t.itemProps?.color || l,
+                          variant: t.itemProps?.variant || g,
+                          active: t.active,
+                          role: K,
+                          selected: u && !i ? t.active : t.itemProps?.selected,
+                          "aria-posinset": u ? J.positions.get(e.index) : void 0,
+                          "aria-setsize": u ? J.total : void 0,
+                          tabIndex: t.itemProps?.disabled || C ? -1 : 0
+                        }
+                      )
+                    },
+                    e.key
+                  );
+                }
+              }
+            }) })
+          }
+        )
+      ]
+    }
+  );
+}, Me = ({
+  searchable: v,
+  search: b,
+  items: M = [],
+  groups: _ = {},
+  variant: f = "default",
+  size: a,
+  level: A = 0,
+  maxLevels: D = 3,
+  virtualized: m = !1,
+  keyboardEvents: l = !1,
+  scrollRefStyles: g = {},
+  onActiveItemIdChange: C,
+  a11yMode: h = "menu",
+  open: s,
+  scrollToTopOnOpen: w,
+  autoFocusList: k,
+  id: c
+}) => {
+  const y = we({ ...b, items: M, groups: _ }), S = v ? y.search : b, I = v && y.hasQuery && y.resultCount === 0, p = v ? y.items : M, u = v ? { ..._, ...y.groups } : _, B = h !== "combobox";
+  return m ? /* @__PURE__ */ r(
+    Ae,
+    {
+      id: c,
+      search: S,
+      announceNoResults: I,
+      items: p,
+      groups: u,
+      variant: f,
+      size: a,
+      level: A,
+      maxLevels: D,
+      keyboardEvents: l,
+      scrollRefStyles: g,
+      onActiveItemIdChange: C,
+      a11yMode: h,
+      open: s,
+      scrollToTopOnOpen: w,
+      autoActivateFirstItem: B,
+      autoFocusList: k
+    }
+  ) : /* @__PURE__ */ r(
+    fe,
+    {
+      id: c,
+      search: S,
+      announceNoResults: I,
+      items: p,
+      groups: u,
+      variant: f,
+      size: a,
+      level: A,
+      maxLevels: D,
+      keyboardEvents: l,
+      scrollRefStyles: g,
+      onActiveItemIdChange: C,
+      a11yMode: h,
+      open: s,
+      scrollToTopOnOpen: w,
+      autoActivateFirstItem: B,
+      autoFocusList: k
+    }
+  );
+}, Ce = "_field_1ssuu_1", De = "_container_1ssuu_5", Be = "_icon_1ssuu_11", Fe = "_input_1ssuu_35", Se = "_clear_1ssuu_54", Ne = "_clearButton_1ssuu_66", ze = "_autocomplete_1ssuu_95", E = {
+  field: Ce,
+  container: De,
+  icon: Be,
+  input: Fe,
+  clear: Se,
+  clearButton: Ne,
+  autocomplete: ze
+}, re = ({
+  className: v,
+  collapsible: b,
+  size: M,
+  color: _ = "neutral",
+  label: f,
+  value: a,
+  onClear: A,
+  clearButtonAltText: D = "Clear search",
+  menu: m,
+  minLength: l,
+  ...g
+}) => {
+  const C = ne(), [h, s] = X(!1), w = g.id || `search-field-${C}`, k = `${w}-listbox`, [c, y] = X(void 0), S = "searchfield-clear-button-" + ne(), I = R(() => !a || typeof l == "number" && typeof a == "string" && a.length < l ? !1 : h, [h, l, a]), p = R(() => (m?.items ?? []).map((n) => ({
+    ...n,
+    onClick: () => {
+      n.onClick?.(), s(!1);
+    }
+  })), [m]), u = (n) => {
+    if (n.key === "Enter" && I) {
+      m?.items?.[0]?.onClick?.(), s(!1);
+      return;
+    }
+    if (n.key === "Escape" && I) {
+      n.preventDefault(), n.stopPropagation(), s(!1), m?.onClose(), document.getElementById(w)?.focus();
+      return;
+    }
+    g.onKeyDown?.(n), s(!0);
+  }, B = () => {
+    s(!0);
+  }, z = (n) => {
+    if (!h) return;
+    const P = n.relatedTarget;
+    P && n.currentTarget.contains(P) || s(!1);
+  }, Y = (n) => {
+    n.relatedTarget?.id === S && y(void 0), g.onBlur?.(n);
+  };
+  return /* @__PURE__ */ L(
+    ge,
+    {
+      size: M,
+      color: _,
+      label: f,
+      className: pe(E.field, v),
+      onBlurCapture: z,
+      children: [
+        /* @__PURE__ */ L("div", { className: E.container, children: [
+          /* @__PURE__ */ r(
+            xe,
+            {
+              ...g,
+              id: w,
+              type: "search",
+              value: a,
+              className: E.input,
+              "data-collapsible": b,
+              autoCapitalize: "off",
+              autoComplete: "off",
+              minLength: l,
+              onKeyDown: u,
+              onBlur: Y,
+              ...m && {
+                role: "combobox",
+                "aria-autocomplete": "list",
+                "aria-expanded": !!I,
+                "aria-haspopup": "listbox",
+                "aria-controls": k,
+                "aria-activedescendant": I ? c : void 0,
+                onFocus: B
+              }
+            }
+          ),
+          /* @__PURE__ */ r(he, { svgElement: Ie, className: E.icon }),
+          A && !!a && /* @__PURE__ */ r("span", { className: E.clear, children: /* @__PURE__ */ r(
+            ye,
+            {
+              id: S,
+              "data-testid": "clear-button",
+              size: "xs",
+              rounded: !0,
+              icon: !0,
+              variant: "tinted",
+              className: E.clearButton,
+              onClick: () => {
+                A?.(), document.getElementById(w)?.focus();
+              },
+              "aria-label": D,
+              "data-action": "clear-input",
+              children: /* @__PURE__ */ r(ve, {})
+            }
+          ) })
+        ] }),
+        m && I && /* @__PURE__ */ r("div", { className: E.autocomplete, "data-color": "company", "aria-hidden": !I, children: /* @__PURE__ */ r(
+          Me,
+          {
+            ...m,
+            id: k,
+            items: p,
+            groups: m?.groups,
+            keyboardEvents: !0,
+            a11yMode: "combobox",
+            open: I,
+            autoFocusList: !1,
+            onActiveItemIdChange: y
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  Me as M,
+  re as S,
+  Ae as V,
+  fe as a,
+  de as b
+};

package/dist/assets/MenuItem.css

@@ -1 +1 @@
-._item_144gk_3{--checkmark-opacity: .5;appearance:none;background-color:transparent;border:none;-webkit-user-select:none;user-select:none;text-decoration:none;color:inherit;width:100%;display:flex;align-items:center;column-gap:.5rem;min-height:var(--dsc-item-height);padding-left:6px;padding-right:6px;overflow:hidden;--dsc-item-focus-outline: 2px solid black;--dsc-item-hover-pointer: pointer}._item_144gk_3[data-variant=default]{--dsc-item-background: var(--ds-color-surface-tinted);--dsc-item-background--hover: var(--ds-color-surface-hover);--dsc-item-background--active: var(--ds-color-surface-active);--dsc-icon-background: var(--ds-color-surface-tinted);--dsc-icon-color: var(--ds-color-text-default)}._item_144gk_3[data-variant=tinted]{--dsc-item-background: var(--ds-color-surface-default);--dsc-item-background--hover: var(--ds-color-surface-hover);--dsc-item-background--active: var(--ds-color-surface-default);--dsc-icon-background: var(--ds-color-surface-default)}._item_144gk_3[data-variant=tinted][data-size=lg]{--dsc-icon-background: var(--ds-color-base-default);--dsc-icon-color: var(--ds-color-base-contrast-default)}div._item_144gk_3[aria-disabled=true]{--dsc-item-focus-outline: none;--dsc-item-hover-pointer: default;--dsc-item-background--hover: var(--ds-color-background-default);--dsc-item-background--active: var(--ds-color-background-default)}._item_144gk_3:hover,._item_144gk_3[data-active=true]{background-color:var(--dsc-item-background--hover);cursor:var(--dsc-item-hover-pointer)}._item_144gk_3[data-active=true]{background-color:var(--dsc-item-background--hover);outline:var(--dsc-item-focus-outline)}._item_144gk_3[data-active=false]:focus-visible{outline:2px solid black}._item_144gk_3[aria-selected=true]{background-color:var(--dsc-item-background--active);--checkmark-opacity: 1}._item_144gk_3[aria-disabled=true]{background-color:transparent}._item_144gk_3{--dsc-description-size: 14px;--dsc-description-leading: 18px;--dsc-description-weight: normal;--dsc-title-weight: normal}._item_144gk_3[data-size=lg]{--dsc-item-height: 56px;--dsc-media-size: 44px;--dsc-icon-size: 28px;--dsc-title-size: 18px;--dsc-title-weight: 500}._item_144gk_3[data-size=md]{--dsc-item-height: 44px;--dsc-media-size: 32px;--dsc-icon-size: 24px;--dsc-title-size: 16px;--dsc-title-weight: normal}._item_144gk_3[data-size=sm]{--dsc-icon-background: transparent;--dsc-item-height: 36px;--dsc-media-size: 24px;--dsc-icon-size: 20px;--dsc-title-size: 16px;--dsc-title-weight: normal}._media_144gk_129{font-size:var(--dsc-media-size);min-width:var(--dsc-media-size);height:var(--dsc-media-size)}._media_144gk_129[data-variant=icon]{background-color:var(--dsc-icon-background);color:var(--dsc-icon-color);font-size:var(--dsc-icon-size);border-radius:5%}._media_144gk_129[data-variant=icon] svg{font-size:var(--dsc-icon-size);width:var(--dsc-icon-size);height:var(--dsc-icon-size)}._label_144gk_150{flex-grow:1;display:flex;flex-direction:column;font-size:var(--dsc-title-size);font-weight:var(--dsc-title-weight);line-height:1.25;margin-right:.75em;margin-top:6px;margin-bottom:6px;min-width:0;overflow-wrap:anywhere;text-wrap:initial}._title_144gk_165{font-size:var(--dsc-title-size)}._description_144gk_169{font-size:var(--dsc-description-size);font-weight:var(--dsc-description-weight);line-height:var(--dsc-description-leading)}._title_144gk_165 mark,._description_144gk_169 mark{background-color:transparent;text-decoration:underline}._count_144gk_181{font-style:normal;font-size:smaller;vertical-align:baseline;margin:0 .25em;color:var(--ds-color-text-subtle)}._linkIcon_144gk_189{font-size:1.5rem}
+._item_hle97_3{--checkmark-opacity: .5;appearance:none;background-color:transparent;border:none;-webkit-user-select:none;user-select:none;text-decoration:none;color:inherit;width:100%;display:flex;align-items:center;column-gap:.5rem;min-height:var(--dsc-item-height);padding-left:6px;padding-right:6px;overflow:hidden;--dsc-item-focus-outline: 2px solid black;--dsc-item-hover-pointer: pointer}._item_hle97_3[data-variant=default]{--dsc-item-background: var(--ds-color-surface-tinted);--dsc-item-background--hover: var(--ds-color-surface-hover);--dsc-item-background--active: var(--ds-color-surface-active);--dsc-icon-background: var(--ds-color-surface-tinted);--dsc-icon-color: var(--ds-color-text-default)}._item_hle97_3[data-variant=tinted]{--dsc-item-background: var(--ds-color-surface-default);--dsc-item-background--hover: var(--ds-color-surface-hover);--dsc-item-background--active: var(--ds-color-surface-default);--dsc-icon-background: var(--ds-color-surface-default)}._item_hle97_3[data-variant=tinted][data-size=lg]{--dsc-icon-background: var(--ds-color-base-default);--dsc-icon-color: var(--ds-color-base-contrast-default)}div._item_hle97_3[aria-disabled=true]{--dsc-item-focus-outline: none;--dsc-item-hover-pointer: default;--dsc-item-background--hover: var(--ds-color-background-default);--dsc-item-background--active: var(--ds-color-background-default)}._item_hle97_3:hover,._item_hle97_3[data-active=true]{background-color:var(--dsc-item-background--hover);cursor:var(--dsc-item-hover-pointer)}._item_hle97_3[data-active=true]{background-color:var(--dsc-item-background--hover);outline:var(--dsc-item-focus-outline)}._item_hle97_3[data-active=false]:focus-visible{outline:2px solid black}._item_hle97_3[aria-selected=true]{background-color:var(--dsc-item-background--active);--checkmark-opacity: 1}._item_hle97_3[aria-disabled=true]{background-color:transparent}._item_hle97_3{--dsc-description-size: 14px;--dsc-description-leading: 18px;--dsc-description-weight: normal;--dsc-title-weight: normal}._item_hle97_3[data-size=lg]{--dsc-item-height: 56px;--dsc-media-size: 44px;--dsc-icon-size: 28px;--dsc-title-size: 18px;--dsc-title-weight: 500}._item_hle97_3[data-size=md]{--dsc-item-height: 44px;--dsc-media-size: 32px;--dsc-icon-size: 24px;--dsc-title-size: 16px;--dsc-title-weight: normal}._item_hle97_3[data-size=sm]{--dsc-icon-background: transparent;--dsc-item-height: 36px;--dsc-media-size: 24px;--dsc-icon-size: 20px;--dsc-title-size: 16px;--dsc-title-weight: normal}._media_hle97_129{font-size:var(--dsc-media-size);min-width:var(--dsc-media-size);height:var(--dsc-media-size)}._media_hle97_129[data-variant=icon]{background-color:var(--dsc-icon-background);color:var(--dsc-icon-color);font-size:var(--dsc-icon-size);border-radius:5%}._media_hle97_129[data-variant=icon] svg{font-size:var(--dsc-icon-size);width:var(--dsc-icon-size);height:var(--dsc-icon-size)}._label_hle97_150{flex-grow:1;display:flex;flex-direction:column;font-size:var(--dsc-title-size);font-weight:var(--dsc-title-weight);line-height:1.25;margin-right:.75em;margin-top:6px;margin-bottom:6px;min-width:0;overflow-wrap:anywhere;text-wrap:initial}._title_hle97_165{font-size:var(--dsc-title-size)}._description_hle97_169{font-size:var(--dsc-description-size);font-weight:var(--dsc-description-weight);line-height:var(--dsc-description-leading)}._title_hle97_165 mark,._description_hle97_169 mark{background-color:transparent;text-decoration:underline}._count_hle97_181{font-style:normal;font-size:smaller;vertical-align:baseline;margin:0 .25em;color:var(--ds-color-text-subtle)}._linkIcon_hle97_189{font-size:1.25rem}

package/dist/assets/QueryLabel.css

@@ -1 +1 @@
-._label_1cmhz_1{--dsc-item-font-size: .875rem;--dsc-item-padding-x: .5em;--dsc-item-padding-y: .25em}._label_1cmhz_1[data-size=xs]{--dsc-item-font-size: .75rem;--dsc-item-padding-x: .25em;--dsc-item-padding-y: 0}._label_1cmhz_1{font-size:var(--dsc-item-font-size);display:flex;flex-wrap:wrap;align-items:center;column-gap:.25rem;row-gap:.25rem}._group_1cmhz_22{display:inline-flex;align-items:center;column-gap:.25rem}._plus_1cmhz_28{color:var(--ds-color-text-subtle)}._item_1cmhz_32{display:block;overflow:hidden}._item_1cmhz_32[data-type=search]{background-color:transparent;font-weight:500;border-bottom:1px solid;padding:var(--dsc-item-padding-y) 0}._item_1cmhz_32[data-type=search]:before{content:"«"}._item_1cmhz_32[data-type=search]:after{content:"»"}._item_1cmhz_32[data-type=filter]{background-color:transparent;border:1px solid;font-weight:500;padding:var(--dsc-item-padding-y) var(--dsc-item-padding-x);border-radius:2px}
+._label_1jqye_1{--dsc-item-font-size: .875rem;--dsc-item-padding-x: .5em;--dsc-item-padding-y: .25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}._label_1jqye_1[data-size=xs]{--dsc-item-font-size: .75rem;--dsc-item-padding-x: .25em;--dsc-item-padding-y: 0}._label_1jqye_1{font-size:var(--dsc-item-font-size);display:flex;align-items:center;column-gap:.25rem;row-gap:.25rem}._group_1jqye_25{display:inline-flex;align-items:center;column-gap:.25rem}._plus_1jqye_31{color:var(--ds-color-text-subtle)}._item_1jqye_35{display:block;overflow:hidden;text-overflow:ellipsis;max-width:100%}._item_1jqye_35[data-type=search]{background-color:transparent;font-weight:500;border-bottom:1px solid;padding:var(--dsc-item-padding-y) 0}._item_1jqye_35[data-type=search]:before{content:"«"}._item_1jqye_35[data-type=search]:after{content:"»"}._item_1jqye_35[data-type=filter]{background-color:transparent;border:1px solid;font-weight:500;padding:var(--dsc-item-padding-y) var(--dsc-item-padding-x);border-radius:2px}

package/dist/assets/SearchField.css

@@ -1 +1 @@
-._container_nkg1g_1{position:relative;display:inline-flex;width:100%}._icon_nkg1g_7{position:absolute;top:0;bottom:0;left:0;width:2.5em;height:100%;color:var(--ds-color-text-subtle);display:flex;justify-content:center;align-items:center;pointer-events:none}._icon_nkg1g_7>*{pointer-events:none}._icon_nkg1g_7>svg{font-size:1.25em;width:1.25em;height:1.25em}._input_nkg1g_31{padding-left:2.25em;padding-right:2.25em}._input_nkg1g_31[type=search]::-webkit-search-decoration,._input_nkg1g_31[type=search]::-webkit-search-cancel-button{appearance:none}@media(max-width:1023px){._field_nkg1g_43[data-size=xs] input[type=search]{font-size:1rem;padding-left:2em;padding-right:2em}}._clear_nkg1g_50{position:absolute;top:0;right:0;bottom:0;width:2.5em;height:100%;display:flex;justify-content:center;align-items:center}._clearButton_nkg1g_62[data-size=xs]{--dsc-button-size: 2.5em;--dsc-button-padding: 0;font-size:.75em;border:none}._clearButton_nkg1g_62:focus-visible{outline-offset:0;outline-width:2px}._input_nkg1g_31[data-collapsible=true]{transition:width .5s ease-in-out}._input_nkg1g_31[data-collapsible=true]:placeholder-shown{background-color:transparent;width:8rem}._input_nkg1g_31[data-collapsible=true]:focus,._input_nkg1g_31[data-collapsible=true]:not(:placeholder-shown){width:auto;background-color:var(--ds-color-background-default)}
+._search_18jfe_1{position:sticky;top:0;z-index:1;background-color:var(--ds-color-surface-default)}._searchInput_18jfe_8{width:100%}._search_18jfe_1 input:focus-visible{outline-offset:0;outline-width:2px}._field_1ssuu_1{position:relative}._container_1ssuu_5{position:relative;display:inline-flex;width:100%}._icon_1ssuu_11{position:absolute;top:0;bottom:0;left:0;width:2.5em;height:100%;color:var(--ds-color-text-subtle);display:flex;justify-content:center;align-items:center;pointer-events:none}._icon_1ssuu_11>*{pointer-events:none}._icon_1ssuu_11>svg{font-size:1.25em;width:1.25em;height:1.25em}._input_1ssuu_35{padding-left:2.25em;padding-right:2.25em}._input_1ssuu_35[type=search]::-webkit-search-decoration,._input_1ssuu_35[type=search]::-webkit-search-cancel-button{appearance:none}@media(max-width:1023px){._field_1ssuu_1[data-size=xs] input[type=search]{font-size:1rem;padding-left:2em;padding-right:2em}}._clear_1ssuu_54{position:absolute;top:0;right:0;bottom:0;width:2.5em;height:100%;display:flex;justify-content:center;align-items:center}._clearButton_1ssuu_66[data-size=xs]{--dsc-button-size: 2.5em;--dsc-button-padding: 0;font-size:.75em;border:none}._clearButton_1ssuu_66:focus-visible{outline-offset:0;outline-width:2px}._input_1ssuu_35[data-collapsible=true]{transition:width .5s ease-in-out}._input_1ssuu_35[data-collapsible=true]:placeholder-shown{background-color:transparent;width:8rem}._input_1ssuu_35[data-collapsible=true]:focus,._input_1ssuu_35[data-collapsible=true]:not(:placeholder-shown){width:auto;background-color:var(--ds-color-background-default)}._autocomplete_1ssuu_95{position:absolute;top:100%;left:0;min-width:100%;z-index:1;border-radius:.375rem;margin-top:.5rem;margin-bottom:.5rem;background-color:var(--ds-color-background-default);color:var(--ds-color-text-default);box-shadow:var(--ds-shadow-sm);display:flex;flex-direction:column;row-gap:.5rem;padding:.5rem;white-space:unset}._autocomplete_1ssuu_95[aria-hidden=true]{display:none}

package/dist/assets/TextFieldDropdown.css

@@ -0,0 +1 @@
+._container_8jcxe_1{position:relative;display:flex;align-items:stretch}._input_8jcxe_7{padding-right:3rem}._input_8jcxe_7[data-has-badge=true]{padding-right:7rem}._badge_8jcxe_15{position:absolute;right:2.75rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;gap:.5rem}._badge_8jcxe_15:before{content:"";position:absolute;left:-.5rem;top:25%;bottom:25%;width:1px;background-color:var(--ds-color-border-subtle)}._dropdownTrigger_8jcxe_36{position:absolute;right:0;top:0;bottom:0;width:2.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:transparent;color:inherit;transition:background-color .15s}._dropdownTrigger_8jcxe_36:hover{background-color:#0000000d}._dropdownTrigger_8jcxe_36:focus-visible{outline:2px solid var(--ds-color-focus-base-default);outline-offset:-2px}._dropdownTrigger_8jcxe_36:disabled{cursor:not-allowed;opacity:.5}._dropdown_8jcxe_36{position:absolute;top:calc(100% + .25rem);left:0;right:0;max-height:300px;overflow-y:auto;z-index:1000}._dropdown_8jcxe_36[data-placement=right]{left:auto;right:0}._menuItem_8jcxe_81{display:flex;justify-content:space-between;align-items:center;width:100%}._optionBadge_8jcxe_88{margin-left:auto;flex-shrink:0}

package/dist/components/Account/AccountListVirtual.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
-import { a as y } from "../../useMenuVirtualization-DpvWCsyD.js";
+import { u as y } from "../../useMenuVirtualization-Cs426RCN.js";
 import { useRef as I, useEffect as h } from "react";
 import "../../index-p1eeF8LQ.js";
 import { AccountListItem as v } from "./AccountListItem.js";
@@ -16,10 +16,10 @@ import '../../assets/AccountListVirtual.css';const g = "_virtualScrollRef_188ep_
   virtualListItem: $,
   lastChild: C,
   virtualTitleItem: P
-}, j = ({ items: p, groups: u = {}, sortGroupBy: d }) => {
+}, j = ({ items: u, groups: p = {}, sortGroupBy: d }) => {
   const s = I(null), { menu: f } = x({
-    items: p,
-    groups: u,
+    items: u,
+    groups: p,
     groupByKey: "groupId",
     keyboardEvents: !1,
     sortGroupBy: d