@altinn/altinn-components 0.56.11 → 0.56.13

package/dist/SearchField-DhPNZyyE.js

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

package/dist/assets/AccountListVirtual.css

@@ -1 +1 @@
-._virtualScrollRef_6cuj6_1{height:100vh;overflow-y:auto;overflow-x:hidden;padding:0 .5rem;margin:0 -.5rem}._virtualList_6cuj6_9{list-style-type:none;padding:0;margin:0}._virtualListItem_6cuj6_15{position:absolute;top:0;left:0;width:100%}._virtualListItem_6cuj6_15:focus-within,._virtualListItem_6cuj6_15:has([aria-expanded=true]){z-index:20}._virtualListItem_6cuj6_15>*{margin:0}._lastChild_6cuj6_31{padding-bottom:1rem}._virtualTitleItem_6cuj6_35{position:absolute;top:0;left:0;width:100%;padding-top:1rem;padding-bottom:1rem}._virtualTitleItem_6cuj6_35:first-child{padding-top:0}
+._virtualScrollRef_1ahkg_1{height:100vh;overflow-y:auto;overflow-x:hidden;padding:0 .5rem;margin:0 -.5rem}._virtualList_1ahkg_9{list-style-type:none;padding:0;margin:0;isolation:isolate}._virtualListItem_1ahkg_16{position:absolute;top:0;left:0;width:100%}._virtualListItem_1ahkg_16:focus-within,._virtualListItem_1ahkg_16:has([aria-expanded=true]){z-index:20}._virtualListItem_1ahkg_16>*{margin:0}._lastChild_1ahkg_32{padding-bottom:1rem}._virtualTitleItem_1ahkg_36{position:absolute;top:0;left:0;width:100%;padding-top:1rem;padding-bottom:1rem}._virtualTitleItem_1ahkg_36:first-child{padding-top:0}

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_w2w2p_1,._field_w2w2p_1{position:relative}._inputContainer_w2w2p_9{position:relative;display:inline-flex;width:100%}._icon_w2w2p_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!important}._input_w2w2p_9{padding-left:2.25em;padding-right:2.25em}._input_w2w2p_9[type=search]::-webkit-search-decoration,._input_w2w2p_9[type=search]::-webkit-search-cancel-button{appearance:none}._clear_w2w2p_39{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_w2w2p_52[data-size=xs]{--dsc-button-size: 2.5em;--dsc-button-padding: 0;font-size:.75em;border:none}._clearButton_w2w2p_52:focus-visible{outline-offset:0;outline-width:2px}._input_w2w2p_9[data-collapsible=true]{transition:width .5s ease-in-out}._input_w2w2p_9[data-collapsible=true]:placeholder-shown{background-color:transparent;width:8rem}._input_w2w2p_9[data-collapsible=true]:focus,._input_w2w2p_9[data-collapsible=true]:not(:placeholder-shown){width:auto;background-color:var(--ds-color-background-default)}._autocomplete_w2w2p_81{--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}._autocomplete_w2w2p_81[aria-hidden=true]{display:none}@media(max-width:479px){._fieldContainer_w2w2p_1,._field_w2w2p_1{width:100%}._autocomplete_w2w2p_81{--var-max-width: 100%;--var-width: 100%}._input_w2w2p_9[data-collapsible=true]:placeholder-shown,._input_w2w2p_9[data-collapsible=true]:focus,._input_w2w2p_9[data-collapsible=true]:not(:placeholder-shown){width:100%!important}._field_w2w2p_1[data-size=xs] input[type=search]{font-size:1rem;padding-left:2em;padding-right:2em}}
+._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_1986v_1,._field_1986v_1{position:relative}._inputContainer_1986v_9{position:relative;display:inline-flex;width:100%}._icon_1986v_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!important}._input_1986v_9{padding-left:2.25em;padding-right:2.25em}._input_1986v_9[type=search]::-webkit-search-decoration,._input_1986v_9[type=search]::-webkit-search-cancel-button{appearance:none}._spinnerContainer_1986v_39{position:absolute;top:1px;right:1px;bottom:1px;font-size:1rem;width:2.5em;display:flex;justify-content:center;align-items:center;margin:0}._spinner_1986v_39{width:2rem;height:2rem}._spinner_1986v_39 *{stroke-width:10!important}._clear_1986v_61{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_1986v_74[data-size=xs]{--dsc-button-size: 2.5em;--dsc-button-padding: 0;font-size:.75em;border:none}._clearButton_1986v_74:focus-visible{outline-offset:0;outline-width:2px}._input_1986v_9[data-collapsible=true]{transition:width .5s ease-in-out}._input_1986v_9[data-collapsible=true]:placeholder-shown{background-color:transparent;width:8rem}._input_1986v_9[data-collapsible=true]:focus,._input_1986v_9[data-collapsible=true]:not(:placeholder-shown){width:auto;background-color:var(--ds-color-background-default)}._autocomplete_1986v_103{--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}._autocomplete_1986v_103[aria-hidden=true]{display:none}@media(max-width:479px){._fieldContainer_1986v_1,._field_1986v_1{width:100%}._autocomplete_1986v_103{--var-max-width: 100%;--var-width: 100%}._input_1986v_9[data-collapsible=true]:placeholder-shown,._input_1986v_9[data-collapsible=true]:focus,._input_1986v_9[data-collapsible=true]:not(:placeholder-shown){width:100%!important}._field_1986v_1[data-size=xs] input[type=search]{font-size:1rem;padding-left:2em;padding-right:2em}}

package/dist/assets/TypingIcon.css

@@ -0,0 +1 @@
+._typingIcon_16t3v_1{fill:var(--ds-color-border-default)}