@altinn/altinn-components 0.56.34 → 0.57.3

package/dist/SearchField-BU7Imhpe.js

@@ -1,687 +0,0 @@
-"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 { Input as ie } from "./components/Forms/Input.js";
-import { FieldBase as se } from "./components/Forms/FieldBase.js";
-import { useMenu as de } from "./hooks/useMenu.js";
-import "./components/RootProvider/RootProvider.js";
-import { Button as ae } from "./components/Button/Button.js";
-import "react-dom";
-import "./components/Snackbar/useSnackbar.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 ve } from "./useMenuVirtualization-Cs426RCN.js";
-import { useMenuSearch as be } from "./components/Menu/useMenuSearch.js";
-import { TypingIcon as we } from "./components/Icon/TypingIcon.js";
-import { S as ce } from "./MagnifyingGlass-bwVhw07z.js";
-import { S as le } from "./XMark-tKk6aExO.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: a,
-  "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": a, 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": a,
-      "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: a,
-  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(
-    () => a.map((n, I) => ({
-      ...n,
-      id: n.id || `${m}-item-${I}`
-    })),
-    [a, 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, ...c } = H.props || {}, { expanded: L } = c, U = Array.isArray(c?.items) && c.items.length > 0, J = c.role === "checkbox" || c.role === "radio", ee = d && !J ? "option" : c.role;
-                return /* @__PURE__ */ E(
-                  pe,
-                  {
-                    expanded: L,
-                    onMouseLeave: () => S(-1),
-                    role: d || J ? "presentation" : void 0,
-                    children: [
-                      /* @__PURE__ */ o(
-                        fe,
-                        {
-                          ...c,
-                          size: c?.size || $?.size || p,
-                          color: c?.color || $?.color || _,
-                          variant: c?.variant || $?.variant || x,
-                          active: t,
-                          role: ee,
-                          selected: c.selected,
-                          tabIndex: c?.disabled || g ? -1 : c.tabIndex ?? 0,
-                          onMouseEnter: l,
-                          "aria-haspopup": U ? "menu" : void 0,
-                          "aria-expanded": U ? L : void 0,
-                          "aria-controls": U ? c.id + "-menu" : void 0
-                        }
-                      ),
-                      L && c?.items && /* @__PURE__ */ o(
-                        ge,
-                        {
-                          id: c.id + "-menu",
-                          expanded: L,
-                          level: v + 1,
-                          maxLevels: b,
-                          items: c?.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: a,
-    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: $ } = ve({
-    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 [c, L] = K;
-    L !== "auto" && I.scrollToOffset(c + 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: a,
-      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 c = t.itemProps?.role === "checkbox" || t.itemProps?.role === "radio", L = i && !c ? "option" : t.itemProps?.role;
-                  return /* @__PURE__ */ o(
-                    pe,
-                    {
-                      ...K,
-                      role: i || c ? "presentation" : "menuitem",
-                      children: /* @__PURE__ */ o(
-                        fe,
-                        {
-                          ...t.itemProps || {},
-                          size: t.itemProps?.size || k,
-                          color: t.itemProps?.color || f,
-                          variant: t.itemProps?.variant || a,
-                          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: a = {},
-  onActiveItemIdChange: w,
-  a11yMode: p = "menu",
-  open: m,
-  scrollToTopOnOpen: _,
-  autoFocusList: x,
-  id: r
-}) => {
-  const g = be({ ...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: a,
-      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: a,
-      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: a,
-  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(() => !a || !y || typeof w == "number" && typeof y == "string" && y.length < w ? !1 : _, [a, _, w, y]), F = V(() => (a?.items ?? []).map((s) => ({
-    ...s,
-    onClick: () => {
-      s.onClick?.(), x(!1);
-    }
-  })), [a]), P = (s) => {
-    if (s.key === "Enter" && i) {
-      a?.items?.[0]?.onClick?.(), x(!1);
-      return;
-    }
-    if (s.key === "Escape" && i) {
-      s.preventDefault(), s.stopPropagation(), x(!1), a?.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 a ? /* @__PURE__ */ E("div", { className: D.fieldContainer, children: [
-    /* @__PURE__ */ E(
-      se,
-      {
-        size: u,
-        color: h,
-        label: A,
-        className: oe(D.field, v),
-        onBlurCapture: C,
-        children: [
-          /* @__PURE__ */ o(
-            ie,
-            {
-              ...p,
-              id: r,
-              type: "search",
-              value: y,
-              className: D.input,
-              "data-collapsible": b,
-              autoCapitalize: "off",
-              autoComplete: "off",
-              minLength: w,
-              onKeyDown: P,
-              onBlur: O,
-              ...a && {
-                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(
-            ae,
-            {
-              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, {})
-            }
-          ) })
-        ]
-      }
-    ),
-    a && i && /* @__PURE__ */ o("div", { className: D.autocomplete, "aria-hidden": !i, onMouseDown: Y, children: /* @__PURE__ */ o(
-      Me,
-      {
-        ...a,
-        id: g,
-        items: F,
-        groups: a?.groups,
-        keyboardEvents: !0,
-        a11yMode: "combobox",
-        open: i,
-        autoFocusList: !1,
-        onActiveItemIdChange: N
-      }
-    ) })
-  ] }) : /* @__PURE__ */ E(
-    se,
-    {
-      size: u,
-      color: h,
-      label: A,
-      className: oe(D.field, v),
-      onBlurCapture: C,
-      children: [
-        /* @__PURE__ */ o(
-          ie,
-          {
-            ...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(we, { "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(
-          ae,
-          {
-            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/XMark-tKk6aExO.js

@@ -1,24 +0,0 @@
-"use client";
-import a, { forwardRef as i } from "react";
-import { u as f } from "./useId-BVFxCjkq.js";
-var d = function(t, n) {
-  var l = {};
-  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (l[e] = t[e]);
-  if (t != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var r = 0, e = Object.getOwnPropertySymbols(t); r < e.length; r++)
-      n.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
-  return l;
-};
-const p = i((t, n) => {
-  var { title: l, titleId: e } = t, r = d(t, ["title", "titleId"]);
-  let o = f();
-  return o = l ? e || "title-" + o : void 0, a.createElement(
-    "svg",
-    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: n, "aria-labelledby": o }, r),
-    l ? a.createElement("title", { id: o }, l) : null,
-    a.createElement("path", { fill: "currentColor", d: "M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z" })
-  );
-});
-export {
-  p as S
-};

package/dist/assets/Byline.css

@@ -1 +0,0 @@
-._byline_fzp7k_1{display:inline-flex;align-items:center;column-gap:.5em}._avatar_fzp7k_7,._avatarGroup_fzp7k_12{font-size:1.25rem;flex-shrink:0}._avatar_fzp7k_7[data-size=md]{font-size:1.5rem;flex-shrink:0}._avatar_fzp7k_7[data-size=lg]{font-size:2.25rem}._label_fzp7k_26{display:inline-flex;flex-wrap:wrap;column-gap:.25em;color:var(--ds-color-text-subtle)}._label_fzp7k_26[data-size=xs],._label_fzp7k_26[data-size=sm]{font-size:14px;line-height:1.125rem;padding:.1875rem 0}._label_fzp7k_26[data-size=md],._label_fzp7k_26[data-size=lg]{font-size:16px;line-height:1.25rem}._label_fzp7k_26>strong{font-weight:500;color:var(--ds-color-text-default)}