@altinn/altinn-components 0.56.6 → 0.56.8

package/dist/SearchField-xsZAikgq.js

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

package/dist/assets/SearchField.css

@@ -1 +1 @@
-._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}._fieldContainer_1ekv9_1,._field_1ekv9_1{position:relative}._inputContainer_1ekv9_9{position:relative;display:inline-flex;width:100%}._icon_1ekv9_15{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_1ekv9_15>*{pointer-events:none}._icon_1ekv9_15>svg{font-size:1.25em;width:1.25em;height:1.25em}._input_1ekv9_9{padding-left:2.25em;padding-right:2.25em}._input_1ekv9_9[type=search]::-webkit-search-decoration,._input_1ekv9_9[type=search]::-webkit-search-cancel-button{appearance:none}@media(max-width:1023px){._field_1ekv9_1[data-size=xs] input[type=search]{font-size:1rem;padding-left:2em;padding-right:2em}}._clear_1ekv9_58{position:absolute;top:0;right:0;bottom:0;width:2.5em;height:100%;display:flex;justify-content:center;align-items:center}._clearButton_1ekv9_70[data-size=xs]{--dsc-button-size: 2.5em;--dsc-button-padding: 0;font-size:.75em;border:none}._clearButton_1ekv9_70:focus-visible{outline-offset:0;outline-width:2px}._input_1ekv9_9[data-collapsible=true]{transition:width .5s ease-in-out}._input_1ekv9_9[data-collapsible=true]:placeholder-shown{background-color:transparent;width:8rem}._input_1ekv9_9[data-collapsible=true]:focus,._input_1ekv9_9[data-collapsible=true]:not(:placeholder-shown){width:auto;background-color:var(--ds-color-background-default)}._autocomplete_1ekv9_99{--var-min-width: 100%;--var-max-width: 20rem;--var-width: 20rem;min-width:var(--var-min-width);max-width:var(--var-max-width);width:var(--var-width);position:absolute;top:100%;left:0;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}@media(max-width:1023px){._autocomplete_1ekv9_99{--var-max-width: 100%;--var-width: 100%}}._autocomplete_1ekv9_99[aria-hidden=true]{display:none}
+._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}._fieldContainer_1rfas_1,._field_1rfas_1{position:relative}._inputContainer_1rfas_9{position:relative;display:inline-flex;width:100%}._icon_1rfas_15{position:absolute;top:1px;bottom:1px;left:.3em;color:var(--ds-color-text-subtle);font-size:1.25em;width:1.25em;height:1.25em;pointer-events:none}._input_1rfas_9{padding-left:2.25em;padding-right:2.25em}._input_1rfas_9[type=search]::-webkit-search-decoration,._input_1rfas_9[type=search]::-webkit-search-cancel-button{appearance:none}@media(max-width:1023px){._field_1rfas_1[data-size=xs] input[type=search]{font-size:1rem;padding-left:2em;padding-right:2em}}._clear_1rfas_48{position:absolute;top:1px;right:1px;bottom:1px;width:2.5em;height:2.5em;display:flex;justify-content:center;align-items:center;margin:0}._clearButton_1rfas_61[data-size=xs]{--dsc-button-size: 2.5em;--dsc-button-padding: 0;font-size:.75em;border:none}._clearButton_1rfas_61:focus-visible{outline-offset:0;outline-width:2px}._input_1rfas_9[data-collapsible=true]{transition:width .5s ease-in-out}._input_1rfas_9[data-collapsible=true]:placeholder-shown{background-color:transparent;width:8rem}._input_1rfas_9[data-collapsible=true]:focus,._input_1rfas_9[data-collapsible=true]:not(:placeholder-shown){width:auto;background-color:var(--ds-color-background-default)}._autocomplete_1rfas_90{--var-min-width: 100%;--var-max-width: 20rem;--var-width: 20rem;min-width:var(--var-min-width);max-width:var(--var-max-width);width:var(--var-width);position:absolute;top:100%;left:0;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}@media(max-width:1023px){._autocomplete_1rfas_90{--var-max-width: 100%;--var-width: 100%}}._autocomplete_1rfas_90[aria-hidden=true]{display:none}

package/dist/components/Account/AccountMenu.js

@@ -4,7 +4,7 @@ import { useState as M, useEffect as w, useMemo as L } from "react";
 import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { M as S } from "../../SearchField-d2UqvD48.js";
+import { M as S } from "../../SearchField-xsZAikgq.js";
 import "../Snackbar/useSnackbar.js";
 const F = (n) => `${n} hits`, E = ({
   items: n = [],