@hashicorp/mds-react 0.9.1 → 0.9.3

package/index-C4GBbW3N.js

@@ -0,0 +1,3567 @@
+import { jsx as o, Fragment as te, jsxs as g } from "react/jsx-runtime";
+import p from "classnames";
+import { createContext as de, useContext as ue, useState as k, useId as v, useEffect as F, useCallback as b, useMemo as V, useRef as A, Children as mn, forwardRef as ht, createElement as hn } from "react";
+import { h as T, T as X, d as gt, S as _t, n as gn, c as $e, I as ft } from "./index-WkGIywHj.js";
+import { u as _n } from "./index-DBjAbGt7.js";
+import { IconMoreHorizontal16 as fn } from "@hashicorp/flight-icons/svg-react/more-horizontal-16";
+import { IconAlertDiamondFill16 as yn } from "@hashicorp/flight-icons/svg-react/alert-diamond-fill-16";
+import bn from "react-focus-lock";
+import vn from "@tippyjs/react";
+import { followCursor as Nn } from "tippy.js";
+import "tippy.js/dist/svg-arrow.css";
+import wn from "react-wrap-balancer";
+import yt from "use-resize-observer";
+import { u as In } from "./index-BHBlMMNF.js";
+import { ResponsivePie as xn } from "@nivo/pie";
+import { animated as be } from "@react-spring/web";
+const Cn = "accordion__tWR7C", kn = "item__MYeus", Ln = "toggle__cD-PM", $n = "button__e63te", Tn = "icon__xZL-n", Sn = "content__RNHA7", R = {
+  accordion: Cn,
+  item: kn,
+  "does-not-contain-interactive": "does-not-contain-interactive__9u5oz",
+  "contains-interactive": "contains-interactive__7-Y60",
+  toggle: Ln,
+  button: $n,
+  icon: Tn,
+  "icon-rotate": "icon-rotate__OTQtF",
+  "parent-does-not-contain-interactive": "parent-does-not-contain-interactive__H4GPb",
+  "parent-contains-interactive": "parent-contains-interactive__FGVlz",
+  "toggle-content": "toggle-content__6cjUu",
+  content: Sn
+}, Ve = de(void 0);
+Ve.displayName = "DisclosurePrimitiveContext";
+function Me() {
+  const e = ue(Ve);
+  if (e === void 0)
+    throw new Error(
+      "useDisclosurePrimitive must be used within a DisclosurePrimitiveContext.Provider"
+    );
+  return e;
+}
+const En = {
+  "disclosure-primitive": "disclosure-primitive__v-DS4"
+}, Bn = ({
+  onClose: e,
+  children: t,
+  className: n,
+  trackedIsOpen: s = !1,
+  containsInteractive: r = !1,
+  ariaLabel: a = "Toggle display",
+  ...i
+}) => {
+  const [d, l] = k(s), c = "content-" + v();
+  F(() => {
+    l(s);
+  }, [s]);
+  const u = b(() => {
+    l(!1), e && e();
+  }, [l, e]), h = b(() => {
+    l((_) => !_);
+  }, [l]), m = V(
+    () => ({
+      isOpen: d,
+      onClickToggle: h,
+      closeDisclosure: u,
+      contentId: c,
+      containsInteractive: r,
+      ariaLabel: a
+    }),
+    [
+      d,
+      h,
+      u,
+      c,
+      r,
+      a
+    ]
+  );
+  return /* @__PURE__ */ o(Ve.Provider, { value: m, children: /* @__PURE__ */ o(
+    "div",
+    {
+      className: p(En["disclosure-primitive"], n),
+      ...i,
+      children: t
+    }
+  ) });
+}, An = ({ children: e }) => {
+  const { isOpen: t } = Me();
+  return t ? /* @__PURE__ */ o(te, { children: e }) : null;
+}, bt = { Provider: Bn, Content: An }, Pn = ({ anchorId: e, updateUrl: t }) => {
+  const {
+    onClickToggle: n,
+    isOpen: s,
+    contentId: r,
+    containsInteractive: a,
+    ariaLabel: i
+  } = Me(), d = (l) => {
+    n(l), !(!t || !e) && (s ? history.replaceState(null, "", window.location.pathname) : history.replaceState(null, "", `#${e}`));
+  };
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      className: p(R.button, {
+        [R["parent-contains-interactive"]]: a,
+        [R["parent-does-not-contain-interactive"]]: !a
+      }),
+      onClick: d,
+      "aria-controls": r,
+      "aria-expanded": s,
+      "aria-label": i,
+      children: /* @__PURE__ */ o(
+        T,
+        {
+          name: "chevron-down",
+          size: 24,
+          isInlineBlock: !1,
+          className: p(R.icon, { [R["icon-rotate"]]: s })
+        }
+      )
+    }
+  );
+}, Fn = ({
+  children: e,
+  containsInteractive: t,
+  isOpen: n,
+  ariaLabel: s = "Toggle display",
+  ...r
+}) => /* @__PURE__ */ o(
+  bt.Provider,
+  {
+    className: p(R.item, {
+      [R["contains-interactive"]]: t,
+      [R["does-not-contain-interactive"]]: !t
+    }),
+    trackedIsOpen: n,
+    containsInteractive: t,
+    ariaLabel: s,
+    ...r,
+    children: e
+  }
+);
+Fn.displayName = "AccordionItem";
+const On = ({
+  children: e,
+  anchorId: t,
+  updateUrl: n
+}) => /* @__PURE__ */ g("div", { className: R.toggle, children: [
+  /* @__PURE__ */ o(Pn, { anchorId: t ?? "", updateUrl: n }),
+  /* @__PURE__ */ o("div", { className: p(R["toggle-content"]), children: /* @__PURE__ */ o(X.Body, { weight: "semibold", children: e }) })
+] });
+On.displayName = "AccordionToggle";
+const Dn = ({ children: e }) => {
+  const { contentId: t } = Me();
+  return /* @__PURE__ */ o(bt.Content, { children: /* @__PURE__ */ o(
+    "div",
+    {
+      className: p(
+        R.content,
+        "mds-typography-legacy-body-200 mds-foreground-primary"
+      ),
+      id: t,
+      children: e
+    }
+  ) });
+};
+Dn.displayName = "AccordionContent";
+const zn = ({ children: e, className: t, ...n }) => /* @__PURE__ */ o("div", { className: p(R.accordion, t), ...n, children: e });
+zn.displayName = "Accordion";
+const Ie = {
+  "badge-count": "badge-count__9xA6z",
+  "size-small": "size-small__LxiPj",
+  "size-medium": "size-medium__emKOI",
+  "size-large": "size-large__M7RFP",
+  "color-neutral": "color-neutral__j2CVd",
+  "type-filled": "type-filled__tb7Yx",
+  "type-inverted": "type-inverted__Oc-mV",
+  "type-outlined": "type-outlined__V714E",
+  "color-neutral-dark-mode": "color-neutral-dark-mode__LLW-g"
+}, He = ({
+  text: e,
+  size: t = "medium",
+  type: n = "filled",
+  color: s = "neutral",
+  className: r,
+  ...a
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: p(
+      Ie["badge-count"],
+      Ie[`size-${t}`],
+      Ie[`type-${n}`],
+      Ie[`color-${s}`],
+      r
+    ),
+    ...a,
+    children: e
+  }
+);
+He.displayName = "BadgeCount";
+const Rn = {
+  "dismiss-button": "dismiss-button__Asa3H"
+}, vt = ({
+  ariaLabel: e = "Dismiss",
+  onClick: t,
+  className: n
+}) => /* @__PURE__ */ o(
+  "button",
+  {
+    className: p(Rn["dismiss-button"], n),
+    type: "button",
+    "aria-label": e,
+    onClick: t,
+    children: /* @__PURE__ */ o(T, { size: 16, name: "x" })
+  }
+), Vn = "alert__j7ZRS", Mn = "icon__vbZHd", Hn = "content__0FEM2", Gn = "text__qorMN", Wn = "description__PMywu", Kn = "actions__vQ07y", Un = "title__MWel2", M = {
+  alert: Vn,
+  icon: Mn,
+  "type-compact": "type-compact__ptTlw",
+  content: Hn,
+  text: Gn,
+  description: Wn,
+  actions: Kn,
+  "dismiss-button-wrapper": "dismiss-button-wrapper__vcfJ-",
+  "type-page": "type-page__tP9-W",
+  "type-inline": "type-inline__7sxYA",
+  title: Un,
+  "color-neutral": "color-neutral__x4pkI",
+  "color-highlight": "color-highlight__64nTZ",
+  "color-success": "color-success__UMfyG",
+  "color-warning": "color-warning__V1hfX",
+  "color-critical": "color-critical__3hs0B"
+}, Qe = {
+  neutral: {
+    compact: "info-fill",
+    default: "info"
+  },
+  highlight: {
+    compact: "info-fill",
+    default: "info"
+  },
+  success: {
+    compact: "check-circle-fill",
+    default: "check-circle"
+  },
+  warning: {
+    compact: "alert-triangle-fill",
+    default: "alert-triangle"
+  },
+  critical: {
+    compact: "alert-diamond-fill",
+    default: "alert-diamond"
+  }
+}, jn = ({ icon: e, type: t, color: n }) => {
+  if (e === !1)
+    return null;
+  const s = t === "compact" ? Qe[n].compact : Qe[n].default, r = e ?? s;
+  return /* @__PURE__ */ o("div", { className: M.icon, children: /* @__PURE__ */ o(T, { name: r, stretched: !0 }) });
+}, qn = ({
+  type: e,
+  color: t = "neutral",
+  icon: n,
+  onDismiss: s,
+  title: r,
+  description: a,
+  children: i,
+  role: d,
+  className: l,
+  ...c
+}) => {
+  if (!r && !a)
+    throw new Error(
+      "Alert must include either a title or a description, or both"
+    );
+  const u = v();
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: p(
+        M.alert,
+        M[`type-${e}`],
+        M[`color-${t}`],
+        l
+      ),
+      role: d,
+      "aria-live": "polite",
+      "aria-labelledby": u,
+      ...c,
+      children: [
+        /* @__PURE__ */ o(jn, { icon: n, type: e, color: t }),
+        /* @__PURE__ */ g("div", { className: M.content, children: [
+          /* @__PURE__ */ g(
+            "div",
+            {
+              className: p(
+                M.text,
+                e === "compact" ? "mds-typography-legacy-body-100" : "mds-typography-legacy-body-200"
+              ),
+              children: [
+                r && /* @__PURE__ */ o(
+                  "div",
+                  {
+                    className: p(
+                      M.title,
+                      "mds-typography-font-weight-semibold"
+                    ),
+                    id: u,
+                    children: r
+                  }
+                ),
+                a && /* @__PURE__ */ o(
+                  "div",
+                  {
+                    className: p(
+                      M.description,
+                      "mds-typography-font-weight-regular mds-foreground-primary"
+                    ),
+                    id: r ? void 0 : u,
+                    children: a
+                  }
+                )
+              ]
+            }
+          ),
+          i
+        ] }),
+        s && /* @__PURE__ */ o("div", { className: M["dismiss-button-wrapper"], children: /* @__PURE__ */ o(vt, { onClick: s }) })
+      ]
+    }
+  );
+};
+qn.displayName = "Alert";
+const Zn = ({ children: e }) => /* @__PURE__ */ o("div", { className: M.actions, children: e });
+Zn.displayName = "AlertActions";
+const Yn = ({ ...e }) => /* @__PURE__ */ o(gt, { size: "small", ...e });
+Yn.displayName = "AlertButton";
+const Jn = ({
+  ...e
+}) => /* @__PURE__ */ o(_t, { size: "small", ...e });
+Jn.displayName = "AlertStandaloneLink";
+const Ge = de(void 0);
+Ge.displayName = "MenuPrimitiveContext";
+function Te() {
+  const e = ue(Ge);
+  if (e === void 0)
+    throw new Error(
+      "useMenuPrimitive must be used within a MenuPrimitiveContext.Provider"
+    );
+  return e;
+}
+const Qn = "isOpen__Dbse-", Xn = "isClosed__HWTqi", Le = {
+  "menu-primitive": "menu-primitive__EJFpE",
+  "width-full": "width-full__35Qjo",
+  isOpen: Qn,
+  isClosed: Xn
+}, Nt = ({
+  onClose: e,
+  isFullWidth: t,
+  children: n,
+  className: s,
+  ...r
+}) => {
+  const [a, i] = k(!1), d = A(null), l = A(null), c = b(() => {
+    i(!1), e && e();
+  }, [i, e]), u = b(() => {
+    i((y) => !y), l?.current?.focus();
+  }, [l, i]), h = b(
+    (y) => {
+      d?.current?.contains(
+        y.relatedTarget || document.activeElement
+      ) || c();
+    },
+    [c]
+  ), m = b(
+    (y) => {
+      y.key === "Escape" && (c(), l?.current?.querySelector("button")?.focus());
+    },
+    [c]
+  ), _ = V(
+    () => ({
+      isOpen: a,
+      onClickToggle: u,
+      toggleRef: l,
+      closeMenu: c
+    }),
+    [a, u, l, c]
+  );
+  return /* @__PURE__ */ o(Ge.Provider, { value: _, children: /* @__PURE__ */ o(
+    "div",
+    {
+      className: p(
+        Le["menu-primitive"],
+        {
+          [Le["width-full"]]: t
+        },
+        s
+      ),
+      onBlur: h,
+      onKeyUp: m,
+      ref: d,
+      ...r,
+      children: n
+    }
+  ) });
+}, wt = ({ children: e }) => {
+  const { toggleRef: t } = Te();
+  return /* @__PURE__ */ o("div", { className: "hds-menu-primitive__toggle", ref: t, children: e });
+}, It = ({ children: e }) => {
+  const { isOpen: t } = Te();
+  return /* @__PURE__ */ o("div", { className: t ? Le.isOpen : Le.isClosed, tabIndex: -1, children: e });
+}, eo = "breadcrumbs__qRWRC", to = "list__ex8fu", no = "sublist__sSjxU", oo = "item__vAjEk", so = "truncation__Kmsae", ro = "link__T7iXX", ao = "text__g0Z5V", io = "current__RtvDC", lo = "icon__QZYpF", O = {
+  breadcrumbs: eo,
+  list: to,
+  "items-can-wrap": "items-can-wrap__vfE8u",
+  sublist: no,
+  item: oo,
+  truncation: so,
+  link: ro,
+  text: ao,
+  current: io,
+  icon: lo,
+  "truncation-button": "truncation-button__3eNF8",
+  "truncation-content": "truncation-content__P-Vh1"
+}, Xe = ({ icon: e, text: t }) => /* @__PURE__ */ g(te, { children: [
+  e && /* @__PURE__ */ o("div", { className: O.icon, children: e }),
+  /* @__PURE__ */ o("span", { className: O.text, children: t })
+] }), co = ({
+  maxWidth: e,
+  current: t,
+  icon: n,
+  text: s,
+  url: r,
+  ...a
+}) => {
+  const i = _n();
+  return /* @__PURE__ */ o(
+    "li",
+    {
+      className: O.item,
+      style: {
+        ...e && { maxWidth: e }
+      },
+      ...a,
+      children: t ? /* @__PURE__ */ o("div", { className: O.current, children: /* @__PURE__ */ o(Xe, { icon: n, text: s }) }) : /* @__PURE__ */ o(i, { className: O.link, href: r, children: /* @__PURE__ */ o(Xe, { icon: n, text: s }) })
+    }
+  );
+}, uo = ({
+  ariaLabel: e = "show more"
+}) => {
+  const { isOpen: t, onClickToggle: n } = Te();
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      className: O["truncation-button"],
+      "aria-label": e,
+      "aria-expanded": t,
+      onClick: n,
+      children: /* @__PURE__ */ o(fn, {})
+    }
+  );
+}, po = ({
+  itemsCanWrap: e = !0,
+  ariaLabel: t = "breadcrumbs",
+  children: n,
+  className: s,
+  ...r
+}) => /* @__PURE__ */ o(
+  "nav",
+  {
+    className: p(
+      O.breadcrumbs,
+      {
+        [O["items-can-wrap"]]: e
+      },
+      s
+    ),
+    "aria-label": t,
+    ...r,
+    children: /* @__PURE__ */ o("ol", { className: O.list, children: n })
+  }
+), mo = ({
+  ariaLabel: e,
+  children: t,
+  ...n
+}) => /* @__PURE__ */ o("li", { className: p(O.item, O.truncation), ...n, children: /* @__PURE__ */ g(Nt, { children: [
+  /* @__PURE__ */ o(wt, { children: /* @__PURE__ */ o(uo, {}) }),
+  /* @__PURE__ */ o(It, { children: /* @__PURE__ */ o("div", { className: O["truncation-content"], children: /* @__PURE__ */ o("ol", { className: O.sublist, children: t }) }) })
+] }) }), Ti = { Root: po, Item: co, Truncation: mo };
+function ho(e) {
+  if (typeof e > "u" || e === !1 || e === "")
+    return [];
+  if (typeof e != "string")
+    throw new Error(
+      `The highlight prop must be a string. Received a value of type "${typeof e}" instead.`
+    );
+  if (!/^[-,0-9\s]+$/.test(e))
+    throw new Error(
+      `The highlight prop must be a comma-separated list of single integers or ranges with a single dash between two integers. Found invalid characters: "${e}".`
+    );
+  return e.split(",").reduce((s, r) => s.concat(go(r)), []);
+}
+function go(e) {
+  const t = e.split("-");
+  if (t.length > 2)
+    throw new Error(
+      `Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a value with multiple dashes: "${e}".`
+    );
+  if (t.length == 1) {
+    const c = parseInt(e);
+    if (c !== c)
+      throw new Error(
+        `Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a value that parsed to NaN: "${e === "" ? "<empty string>" : e}".`
+      );
+    return [c];
+  }
+  const [s, r] = t.map((c) => parseInt(c));
+  if (s !== s || r !== r)
+    throw new Error(
+      `Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a range that produced a NaN: "${e}".`
+    );
+  const d = r - s + 1;
+  return [...Array(d).keys()].map((c) => c + s);
+}
+function _o(e) {
+  const n = mn.toArray(e).map((r) => typeof r == "object" && "props" in r && r.props.className?.includes("empty-line") ? `
+` : r);
+  return n.reduce(
+    (r, a, i) => {
+      const d = i === n.length - 1, l = a === `
+`, c = a !== `
+`;
+      l && r.consecutiveNewlines++;
+      const u = l && d, h = r.consecutiveNewlines > 0;
+      if ((c || u) && h) {
+        r.currentLine.length > 0 && (r.lines.push(r.currentLine), r.currentLine = []);
+        for (let _ = 1; _ < r.consecutiveNewlines; _++)
+          r.lines.push("");
+        r.consecutiveNewlines = 0;
+      }
+      return c && (r.currentLine.push(a), d && r.lines.push(r.currentLine)), r;
+    },
+    {
+      lines: [],
+      currentLine: [],
+      consecutiveNewlines: 1
+      // Start at 1 to handle leading newlines
+    }
+  ).lines;
+}
+const fo = '<span class="line"></span>';
+function yo(e) {
+  const t = e.split(`
+`);
+  return t.map((n, s) => s == t.length - 1 && n == "" ? null : /* @__PURE__ */ o(
+    "span",
+    {
+      dangerouslySetInnerHTML: {
+        __html: n === "" || n === fo ? "&nbsp;" : n
+      }
+    },
+    s
+  ));
+}
+const bo = "dark__aBMo7", vo = "token__aGMSy", No = "title__nX-Ny", wo = "description__-44hG", Io = "header__42Fek", xo = "body__pLFmP", Co = "code__J06se", C = {
+  "code-block": "code-block__dOm6M",
+  "line-highlight": "line-highlight__a84m6",
+  dark: bo,
+  "language-css": "language-css__8iYaN",
+  token: vo,
+  "language-javascript": "language-javascript__EWK5u",
+  "language-markup": "language-markup__E7NSA",
+  "language-html": "language-html__rLwMK",
+  "is-standalone": "is-standalone__WLWxy",
+  title: No,
+  description: wo,
+  header: Io,
+  body: xo,
+  code: Co,
+  "copy-button": "copy-button__nMsTD",
+  "line-highlight-first": "line-highlight-first__OMDUP",
+  "line-highlight-last": "line-highlight-last__qC6nm",
+  "line-numbers": "line-numbers__a9m-I",
+  "line-numbers-rows": "line-numbers-rows__MjGTO",
+  "line-of-code": "line-of-code__mDztA",
+  "line-number": "line-number__-g7V-"
+}, ko = ({
+  value: e,
+  hasLineNumbers: t,
+  highlightLines: n
+}) => {
+  const s = ho(n), r = V(() => (typeof e == "string" ? yo(e) : _o(e)).map((d, l) => {
+    const c = l + 1, u = s.indexOf(c) !== -1;
+    return { children: d, highlight: u };
+  }).map(({ highlight: d, ...l }, c, u) => {
+    const h = c === 0 ? null : u[c - 1], m = c === u.length - 1 ? null : u[c + 1];
+    return {
+      ...l,
+      highlight: d,
+      highlightIsFirstInGroup: !h || !h.highlight,
+      highlightIsLastInGroup: !m || !m.highlight
+    };
+  }), [e, s]);
+  return /* @__PURE__ */ g(te, { children: [
+    t ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: C["line-numbers-rows"], children: r.map((a, i) => /* @__PURE__ */ o(
+      "span",
+      {
+        className: p(C["line-number"], {
+          [C["line-highlight"]]: a.highlight,
+          [C["line-highlight-first"]]: a.highlightIsFirstInGroup,
+          [C["line-highlight-last"]]: a.highlightIsLastInGroup
+        })
+      },
+      i
+    )) }) : null,
+    /* @__PURE__ */ o("span", { children: r.map((a, i) => /* @__PURE__ */ g(
+      "span",
+      {
+        className: p(C["line-of-code"], {
+          [C["line-highlight"]]: a.highlight,
+          [C["line-highlight-first"]]: a.highlightIsFirstInGroup,
+          [C["line-highlight-last"]]: a.highlightIsLastInGroup
+        }),
+        children: [
+          a.children,
+          `
+`
+        ]
+      },
+      i
+    )) })
+  ] });
+}, Lo = ({ code: e }, t) => {
+  const [n, s] = k(!1);
+  return F(() => {
+    s(!0);
+  }, []), n ? /* @__PURE__ */ o("pre", { ref: t, style: { display: "none" }, children: typeof e == "string" ? /* @__PURE__ */ o("span", { dangerouslySetInnerHTML: { __html: e } }) : e }) : null;
+}, $o = ht(Lo), To = (e, t, n) => {
+  let s = "";
+  for (; e.length > 0; ) {
+    const r = e.match(t);
+    r && r.index != null && r[0] != null ? (s += e.slice(0, r.index), s += n(r), e = e.slice(r.index + r[0].length)) : (s += e, e = "");
+  }
+  return s;
+}, So = (e = "") => {
+  const t = [];
+  let n = "";
+  return To(
+    e,
+    /\s*(?:([^\s\\'"]+)|'((?:[^'\\]|\\.)*)'|"((?:[^"\\]|\\.)*)"|(\\.?)|(\S))(\s|$)?/,
+    (s) => {
+      const [r, a, i, d, l, c, u] = s;
+      if (c != null)
+        throw new Error(`Unmatched quote: ${e}`);
+      if (a)
+        n += a;
+      else {
+        let h;
+        i ? h = i : d ? h = d : l && (h = l), h && (n += h.replace(/\\(?=.)/, ""));
+      }
+      u != null && (t.push(n), n = "");
+    }
+  ), n && t.push(n), t;
+}, Eo = (e = "") => e.replace(/([^A-Za-z0-9_\-.,:/@\n])/g, "\\$1").replace(/\n/g, `'
+'`);
+function Bo(e) {
+  return e.split(`
+`)[0].startsWith("$ ") ? Ao(e) : e;
+}
+function Ao(e) {
+  const t = e.split(`
+`), n = t[0];
+  if (n.endsWith("\\") || n.endsWith("EOF")) {
+    const a = Eo(e).replace("\\$\\", "");
+    return So(a).join(" ");
+  }
+  const r = /^\$ /;
+  return t.filter((a) => a.match(r)).map((a) => a.replace(r, "")).join(`
+`);
+}
+const Po = ({
+  title: e,
+  description: t,
+  language: n,
+  value: s,
+  isStandalone: r = !0,
+  hasCopyButton: a,
+  hasLineNumbers: i = !0,
+  highlightLines: d,
+  maxHeight: l = "auto",
+  className: c
+}) => {
+  const u = A(null), h = v();
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: p(
+        C["code-block"],
+        C.dark,
+        {
+          [C[`language-${n}`]]: n,
+          [C["is-standalone"]]: r,
+          [C["line-numbers"]]: i
+        },
+        c
+      ),
+      children: [
+        /* @__PURE__ */ g("div", { className: C.header, children: [
+          e && /* @__PURE__ */ o(
+            X.HDSBody,
+            {
+              size: "200",
+              tag: "p",
+              weight: "semibold",
+              className: C.title,
+              children: e
+            }
+          ),
+          t && /* @__PURE__ */ o(X.HDSBody, { tag: "p", size: "100", className: C.description, children: t })
+        ] }),
+        /* @__PURE__ */ g("div", { className: C.body, children: [
+          /* @__PURE__ */ o($o, { code: s, ref: u }),
+          /* @__PURE__ */ o("pre", { className: C.code, id: h, style: { maxHeight: l }, children: /* @__PURE__ */ o("code", { children: /* @__PURE__ */ o(
+            ko,
+            {
+              value: s,
+              highlightLines: d,
+              hasLineNumbers: i
+            }
+          ) }) }),
+          a && /* @__PURE__ */ o(
+            gn,
+            {
+              className: C["copy-button"],
+              "aria-describedby": h,
+              getTextFn: () => {
+                const m = u.current?.textContent;
+                if (!m)
+                  throw new Error(
+                    "`code-block` - Couldn't find text content to copy."
+                  );
+                return Bo(m);
+              },
+              text: "Copy",
+              isIconOnly: !0,
+              size: "small"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+Po.displayName = "CodeBlock";
+const Fo = "text__t2BuD", ge = {
+  "toggle-button": "toggle-button__0Aljq",
+  "color-primary": "color-primary__gQeWN",
+  "color-secondary": "color-secondary__PGdzj",
+  "width-full": "width-full__K1gGu",
+  text: Fo,
+  "size-small": "size-small__-mqBv",
+  "size-medium": "size-medium__A-yPf"
+}, xt = ({
+  text: e,
+  color: t = "primary",
+  size: n = "medium",
+  icon: s,
+  isFullWidth: r,
+  count: a,
+  badge: i,
+  badgeIcon: d,
+  disabled: l,
+  ...c
+}) => {
+  const { isOpen: u, onClickToggle: h } = Te(), m = t === "primary" || l ? "filled" : "inverted", _ = n === "small" ? 12 : 16;
+  return /* @__PURE__ */ o(wt, { children: /* @__PURE__ */ g(
+    "button",
+    {
+      "aria-expanded": u,
+      type: "button",
+      className: p(
+        ge["toggle-button"],
+        ge[`size-${n}`],
+        ge[`color-${t}`],
+        {
+          [ge["width-full"]]: r
+        }
+      ),
+      onClick: h,
+      disabled: l,
+      ...c,
+      children: [
+        s && /* @__PURE__ */ o(T, { name: s, size: _ }),
+        /* @__PURE__ */ o("div", { className: ge.text, children: e }),
+        a && /* @__PURE__ */ o(He, { text: a, size: "small", type: m }),
+        i && /* @__PURE__ */ o($e, { text: i, icon: d, size: "small", type: m }),
+        /* @__PURE__ */ o(Oo, {})
+      ]
+    }
+  ) });
+};
+xt.displayName = "Dropdown.ToggleButton";
+const Oo = () => /* @__PURE__ */ o(T, { name: "chevron-down", isInlineBlock: !1 }), Do = "interactive__IkSoP", zo = "custom__lrM-c", Ro = "leading__uGWjP", Vo = "trailing__46J03", Mo = "separator__cop56", Ho = "title__XkdBJ mds-typography-legacy-body-100 mds-typography-font-weight-semibold", x = {
+  "list-item": "list-item__p6gnG",
+  interactive: Do,
+  "color-action": "color-action__zG8cO",
+  "color-critical": "color-critical__3USEd",
+  custom: zo,
+  "interactive-icon": "interactive-icon__2sVuv",
+  leading: Ro,
+  trailing: Vo,
+  "interactive-text": "interactive-text__9tKHU",
+  "loading-wrapper": "loading-wrapper__RMG87",
+  "text-regular": "text-regular__nmwqr mds-typography-legacy-body-100 mds-typography-font-weight-regular",
+  "text-large": "text-large__gU2cx mds-typography-legacy-body-200 mds-typography-font-weight-medium",
+  separator: Mo,
+  title: Ho
+}, Ct = ({
+  text: e,
+  color: t = "action",
+  icon: n,
+  isLoading: s,
+  trailingIcon: r,
+  ...a
+}) => /* @__PURE__ */ o(
+  "li",
+  {
+    className: p(x["list-item"], x.interactive, x[`color-${t}`]),
+    children: s ? /* @__PURE__ */ g("div", { className: x["loading-wrapper"], children: [
+      /* @__PURE__ */ o(
+        T,
+        {
+          name: "loading",
+          className: p(x["interactive-icon"], x.leading)
+        }
+      ),
+      /* @__PURE__ */ o("div", { className: p(x["interactive-text"], x["text-regular"]), children: e })
+    ] }) : /* @__PURE__ */ g(ft, { ...a, children: [
+      n && /* @__PURE__ */ o(
+        T,
+        {
+          name: n,
+          className: p(x["interactive-icon"], x.leading)
+        }
+      ),
+      /* @__PURE__ */ o("div", { className: p(x["interactive-text"], x["text-large"]), children: e }),
+      r && /* @__PURE__ */ o(
+        T,
+        {
+          name: r,
+          className: p(x["interactive-icon"], x.trailing)
+        }
+      )
+    ] })
+  }
+);
+Ct.displayName = "Dropdown.ListItem.Interactive";
+const kt = ({ text: e, ...t }) => /* @__PURE__ */ o("li", { className: p(x["list-item"], x.title), ...t, children: e });
+kt.displayName = "Dropdown.ListItem.Title";
+const Lt = (e) => /* @__PURE__ */ o(
+  "li",
+  {
+    className: p(x["list-item"], x.separator),
+    "aria-hidden": "true",
+    role: "separator",
+    ...e
+  }
+);
+Lt.displayName = "Dropdown.ListItem.Separator";
+const $t = ({ children: e }) => /* @__PURE__ */ o("li", { className: p(x["list-item"], x.custom), children: e });
+$t.displayName = "Dropdown.ListItem.Custom";
+const Go = {
+  Interactive: Ct,
+  Title: kt,
+  Separator: Lt,
+  Custom: $t
+}, Wo = "content__L3Jzb", Ko = "list__vHKnu", Uo = "header__FQALL", jo = "footer__X0WK4", U = {
+  "width-full": "width-full__yhNyZ",
+  content: Wo,
+  "content-fixed-width": "content-fixed-width__QTWZ3",
+  "content-position-bottom-right": "content-position-bottom-right__7p2zs",
+  "content-position-right": "content-position-right__LV4dD",
+  "content-position-bottom-left": "content-position-bottom-left__ihVMS",
+  "content-position-left": "content-position-left__ICQX2",
+  "content-position-top-right": "content-position-top-right__xbinW",
+  "content-position-top-left": "content-position-top-left__AR6-v",
+  list: Ko,
+  header: Uo,
+  footer: jo,
+  "header-with-divider": "header-with-divider__hHDYL",
+  "footer-with-divider": "footer-with-divider__TqV8J"
+}, Tt = ({
+  isFullWidth: e,
+  onClose: t,
+  children: n,
+  className: s,
+  ...r
+}) => /* @__PURE__ */ o(
+  Nt,
+  {
+    className: p(
+      {
+        [U["width-full"]]: e
+      },
+      s
+    ),
+    onClose: t,
+    isFullWidth: e,
+    ...r,
+    children: n
+  }
+), St = ({
+  listPosition: e = "bottom-right",
+  width: t,
+  height: n,
+  children: s
+}) => /* @__PURE__ */ o(It, { children: /* @__PURE__ */ o(
+  "div",
+  {
+    className: p(
+      U.content,
+      U[`content-position-${e}`],
+      { [U["content-fixed-width"]]: !!t }
+    ),
+    style: { width: t, height: n },
+    children: s
+  }
+) }), Et = ({ children: e }) => /* @__PURE__ */ o("ul", { className: U.list, children: e }), Bt = ({
+  hasDivider: e,
+  children: t,
+  ...n
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: p(U.header, {
+      [U["header-with-divider"]]: e
+    }),
+    ...n,
+    children: t
+  }
+), At = ({
+  hasDivider: e,
+  children: t,
+  ...n
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: p(U.footer, {
+      [U["footer-with-divider"]]: e
+    }),
+    ...n,
+    children: t
+  }
+);
+Tt.displayName = "Dropdown.Root";
+St.displayName = "Dropdown.Content";
+Et.displayName = "Dropdown.List";
+Bt.displayName = "Dropdown.Header";
+At.displayName = "Dropdown.Footer";
+const Si = { Root: Tt, ToggleButton: xt, Content: St, List: Et, Header: Bt, Footer: At, ListItem: Go }, et = "en", qo = {
+  en: /* @__PURE__ */ new Set([
+    "a",
+    "an",
+    "and",
+    "as",
+    "at",
+    "but",
+    "by",
+    "for",
+    "in",
+    "nor",
+    "of",
+    "on",
+    "or",
+    "so",
+    "the",
+    "to",
+    "up",
+    "yet"
+  ]),
+  de: /* @__PURE__ */ new Set(),
+  // Capitalization rules in German don't suppress small words.
+  es: /* @__PURE__ */ new Set([
+    "el",
+    "la",
+    "los",
+    "las",
+    "un",
+    "una",
+    "unos",
+    "unas",
+    "y",
+    "o",
+    "pero",
+    "de",
+    "del",
+    "al",
+    "en",
+    "por",
+    "para",
+    "con"
+  ]),
+  fr: /* @__PURE__ */ new Set([
+    "le",
+    "la",
+    "les",
+    "un",
+    "une",
+    "et",
+    "de",
+    "du",
+    "des",
+    "en",
+    "à",
+    "au",
+    "aux",
+    "pour",
+    "avec"
+  ]),
+  ja: /* @__PURE__ */ new Set(),
+  // Japanese doesn't use title casing; characters are not case-sensitive
+  ko: /* @__PURE__ */ new Set(),
+  // Korean doesn't use casing
+  pt: /* @__PURE__ */ new Set([
+    "o",
+    "a",
+    "os",
+    "as",
+    "um",
+    "uma",
+    "uns",
+    "umas",
+    "e",
+    "ou",
+    "mas",
+    "de",
+    "do",
+    "da",
+    "dos",
+    "das",
+    "em",
+    "no",
+    "na",
+    "nos",
+    "nas",
+    "por",
+    "para",
+    "com"
+  ]),
+  id: /* @__PURE__ */ new Set()
+  // ! TODO Determine Indonesian's small word rules, and apply them here
+}, Zo = de(
+  void 0
+);
+function Yo(e, t) {
+  if (t === "ja" || t === "ko")
+    return e;
+  const n = e.match(/^(\s*[\p{P}\p{Zs}]*)?(\p{L})(.*)$/u);
+  if (!n) return e;
+  const [, s, r, a] = n;
+  return (s ?? "") + r.toLocaleUpperCase(t) + a.toLocaleLowerCase(t);
+}
+function Jo(e, t) {
+  const n = qo[t], s = e.toLocaleLowerCase(t).split(/([\s\-:,.]+)/);
+  let r = !0;
+  return s.map((a) => /^[\s\-:,.]+$/.test(a) ? (/[:.!?]\s*$/.test(a) && (r = !0), a) : a.charAt(0).toLocaleUpperCase && (r || !n.has(a)) ? (r = !1, a.charAt(0).toLocaleUpperCase(t) + a.slice(1)) : a).join("");
+}
+let tt = !1;
+function Qo() {
+  const e = ue(Zo)?.locale;
+  return !e && typeof window < "u" && !tt && (tt = !0, console.warn(
+    `[@web/utils] No <LocaleProvider> found. Defaulting to "${et}".`
+  )), e || et;
+}
+function nt(e, t) {
+  return t.split(".").reduce((n, s) => {
+    if (typeof n == "object" && n !== null && s in n)
+      return n[s];
+  }, e);
+}
+function Xo(e, t = "en") {
+  return function(s, r, a) {
+    const i = nt(e[r], s) ?? nt(e[t], s);
+    if (typeof i != "string") return "";
+    switch (a) {
+      case "title":
+        return Jo(i, r);
+      case "sentence":
+        return Yo(i, r);
+      case "upper":
+        return i.toLocaleUpperCase(r);
+      case "lower":
+        return i.toLocaleLowerCase(r);
+      case "none":
+      default:
+        return i;
+    }
+  };
+}
+const ot = Xo({
+  de: {
+    optional: "optional",
+    // "optional" is the same in German
+    required: "erforderlich"
+  },
+  en: {
+    optional: "optional",
+    required: "required"
+  },
+  es: {
+    optional: "opcional",
+    required: "obligatorio"
+  },
+  fr: {
+    optional: "facultatif",
+    required: "obligatoire"
+  },
+  id: {
+    // ! TODO Translate text to Indonesian
+    optional: "optional",
+    required: "required"
+  },
+  ja: {
+    optional: "任意",
+    required: "必須"
+  },
+  ko: {
+    optional: "선택 사항",
+    required: "필수"
+  },
+  pt: {
+    optional: "opcional",
+    required: "obrigatório"
+  }
+}), es = "optional__xEN-m mds-typography-legacy-body-100 mds-typography-font-weight-regular", ts = {
+  optional: es
+}, We = ({ isOptional: e, isRequired: t }) => {
+  const n = Qo(), s = e ? ts.optional : null;
+  return e ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: s, children: `(${ot("optional", n, "title")})` }) : t ? /* @__PURE__ */ o(
+    $e,
+    {
+      "aria-hidden": "true",
+      className: s,
+      size: "small",
+      text: ot("required", n, "title")
+    }
+  ) : null;
+};
+We.displayName = "Indicator";
+const ns = "badges__fd5n1", os = "label__p8mfL mds-typography-legacy-body-200 mds-typography-font-weight-semibold", st = {
+  badges: ns,
+  label: os
+}, Pt = ({
+  badgeText: e,
+  className: t,
+  controlId: n,
+  children: s,
+  isRequired: r,
+  isOptional: a,
+  ...i
+}) => /* @__PURE__ */ g(
+  "label",
+  {
+    className: p(st.label, t),
+    htmlFor: n,
+    ...i,
+    children: [
+      /* @__PURE__ */ o("span", { children: s }),
+      a || r || e ? /* @__PURE__ */ g("span", { className: st.badges, children: [
+        e ? /* @__PURE__ */ o($e, { size: "small", text: e }) : null,
+        /* @__PURE__ */ o(We, { isRequired: r, isOptional: a })
+      ] }) : null
+    ]
+  }
+);
+Pt.displayName = "Label";
+const ss = {
+  "helper-text": "helper-text__4mh4z mds-typography-legacy-body-100 mds-typography-font-weight-regular"
+}, Ke = ({
+  children: e,
+  className: t,
+  controlId: n,
+  ...s
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: p(ss["helper-text"], t),
+    id: n ? `helper-text-${n}` : void 0,
+    ...s,
+    children: e
+  }
+);
+Ke.displayName = "HelperText";
+const rs = "error__UVBmH mds-typography-legacy-body-100 mds-typography-font-weight-medium", as = "icon__KOCmk", is = "content__tbSUM", ls = "message__-Ljv-", Ce = {
+  error: rs,
+  icon: as,
+  content: is,
+  message: ls
+}, cs = ({ children: e, ...t }) => /* @__PURE__ */ o("p", { className: Ce.message, ...t, children: e }), Ue = ({ children: e, className: t, controlId: n, ...s }) => /* @__PURE__ */ g(
+  "div",
+  {
+    className: p(Ce.error, t),
+    id: n ? `error-${n}` : void 0,
+    ...s,
+    children: [
+      /* @__PURE__ */ o(yn, { className: Ce.icon }),
+      /* @__PURE__ */ o("div", { className: Ce.content, children: /* @__PURE__ */ o(cs, { children: e }) })
+    ]
+  }
+);
+Ue.displayName = "Error";
+const ds = "vertical__Ond75", us = "label__yNHVo", ps = "control__fiVMP", ms = "flag__9bLjU", hs = "error__xwHck", _e = {
+  vertical: ds,
+  label: us,
+  control: ps,
+  "helper-text": "helper-text__4l6Tt",
+  flag: ms,
+  error: hs
+}, j = ({
+  badgeText: e,
+  id: t,
+  isRequired: n,
+  isOptional: s,
+  label: r,
+  helperText: a,
+  error: i,
+  className: d,
+  layout: l,
+  children: c,
+  ...u
+}) => /* @__PURE__ */ g(
+  "div",
+  {
+    className: p({ [_e[`${l}`]]: l }, d),
+    ...u,
+    children: [
+      r && /* @__PURE__ */ o(
+        Pt,
+        {
+          badgeText: e,
+          controlId: t,
+          isOptional: s,
+          isRequired: n,
+          className: _e.label,
+          children: r
+        }
+      ),
+      a && /* @__PURE__ */ o(Ke, { controlId: t, className: _e["helper-text"], children: a }),
+      /* @__PURE__ */ o("div", { className: _e.control, children: c }),
+      i && /* @__PURE__ */ o(Ue, { controlId: t, className: _e.error, children: i })
+    ]
+  }
+);
+j.displayName = "Field";
+const gs = "legend__O8-rs mds-typography-legacy-body-200 mds-typography-font-weight-semibold", _s = "badge__rqzw5", rt = {
+  legend: gs,
+  badge: _s
+}, Ft = ({
+  className: e,
+  isRequired: t,
+  isOptional: n,
+  children: s,
+  ...r
+}) => /* @__PURE__ */ g("legend", { className: p(rt.legend, e), ...r, children: [
+  /* @__PURE__ */ o("span", { children: s }),
+  n || t ? /* @__PURE__ */ o("span", { className: rt.badge, children: /* @__PURE__ */ o(We, { isRequired: t, isOptional: n }) }) : null
+] });
+Ft.displayName = "Legend";
+const fs = "group__4-G8T", ys = "legend__Psn00", bs = "vertical__nU8G5", vs = "horizontal__nzPrB", Ns = "error__oiFxc", Z = {
+  group: fs,
+  legend: ys,
+  "has-legend": "has-legend__CnvEd",
+  vertical: bs,
+  "control-fields-wrapper": "control-fields-wrapper__ODpmr",
+  horizontal: vs,
+  "helper-text": "helper-text__rPBCK",
+  error: Ns
+}, ve = ({
+  isRequired: e,
+  isOptional: t,
+  legend: n,
+  helperText: s,
+  error: r,
+  className: a,
+  layout: i,
+  children: d,
+  id: l,
+  testingKey: c,
+  ...u
+}) => {
+  const h = v(), m = l ?? h;
+  return /* @__PURE__ */ g(
+    "fieldset",
+    {
+      className: p(Z.group, i ? Z[i] : null, a),
+      id: m,
+      "data-testid": c,
+      ...u,
+      children: [
+        n && /* @__PURE__ */ o(
+          Ft,
+          {
+            isOptional: t,
+            isRequired: e,
+            className: Z.legend,
+            children: n
+          }
+        ),
+        s && /* @__PURE__ */ o(
+          Ke,
+          {
+            controlId: `${m}-help`,
+            className: Z["helper-text"],
+            children: s
+          }
+        ),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: p(Z["control-fields-wrapper"], {
+              [Z["has-legend"]]: n
+            }),
+            children: d
+          }
+        ),
+        r && /* @__PURE__ */ o(Ue, { controlId: `${m}-error`, className: Z.error, children: r })
+      ]
+    }
+  );
+};
+ve.displayName = "Fieldset";
+const ws = "checkbox__7aEmD", Is = {
+  checkbox: ws
+}, Ot = ({
+  id: e,
+  required: t,
+  field: n,
+  testingKey: s,
+  error: r
+}) => {
+  const a = v();
+  return /* @__PURE__ */ o(
+    "input",
+    {
+      id: e ?? a,
+      type: "checkbox",
+      className: Is.checkbox,
+      required: t,
+      "aria-describedby": `${r ? "error" : "helper-text"}-${e}`,
+      "data-testid": s,
+      ...n
+    }
+  );
+};
+Ot.displayName = "CheckboxBase";
+const Dt = ({
+  isInvalid: e,
+  isLoading: t,
+  isRequired: n,
+  isOptional: s,
+  id: r,
+  label: a,
+  helperText: i,
+  error: d,
+  field: l,
+  className: c,
+  testingKey: u,
+  ...h
+}) => {
+  const m = v(), _ = r ?? m;
+  return /* @__PURE__ */ o(
+    j,
+    {
+      label: a,
+      helperText: i,
+      error: d,
+      isRequired: n,
+      isOptional: s,
+      id: _,
+      layout: "flag",
+      className: c,
+      children: /* @__PURE__ */ o(
+        Ot,
+        {
+          id: _,
+          required: n,
+          field: l,
+          testingKey: u,
+          error: d,
+          ...h
+        }
+      )
+    }
+  );
+};
+Dt.displayName = "CheckboxField";
+const zt = ({
+  layout: e = "vertical",
+  legend: t,
+  helperText: n,
+  error: s,
+  isOptional: r,
+  isRequired: a,
+  children: i
+}) => /* @__PURE__ */ o(
+  ve,
+  {
+    layout: e,
+    legend: t,
+    helperText: n,
+    error: s,
+    isOptional: r,
+    isRequired: a,
+    children: i
+  }
+);
+zt.displayName = "CheckboxGroupRoot";
+const Rt = (e) => /* @__PURE__ */ o(
+  Dt,
+  {
+    className: e.className,
+    testingKey: e.testingKey,
+    ...e
+  }
+);
+Rt.displayName = "CheckboxGroupInner";
+const Ei = {
+  Root: zt,
+  Inner: Rt
+}, xs = {
+  "file-input": "file-input__kBoO-"
+}, Vt = ({
+  isRequired: e,
+  className: t,
+  id: n,
+  field: s,
+  error: r,
+  ...a
+}) => {
+  const i = v();
+  return /* @__PURE__ */ o(
+    "input",
+    {
+      type: "file",
+      required: e,
+      id: n ?? i,
+      className: xs["file-input"],
+      "aria-describedby": `${r ? "error" : "helper-text"}-${n}`,
+      ...s,
+      ...a
+    }
+  );
+};
+Vt.displayName = "FileInputBase";
+const Cs = ({
+  id: e,
+  label: t,
+  helperText: n,
+  error: s,
+  field: r,
+  className: a,
+  isRequired: i,
+  isOptional: d,
+  ...l
+}) => {
+  const c = v(), u = e ?? c;
+  return /* @__PURE__ */ o(
+    j,
+    {
+      label: t,
+      helperText: n,
+      error: s,
+      isRequired: i,
+      isOptional: d,
+      id: u,
+      layout: "vertical",
+      className: a,
+      children: /* @__PURE__ */ o(
+        Vt,
+        {
+          id: u,
+          isRequired: i,
+          field: r,
+          ...l
+        }
+      )
+    }
+  );
+};
+Cs.displayName = "FileInputField";
+const ks = "radio__oZ3hf", Ls = {
+  radio: ks
+}, je = ({
+  id: e,
+  required: t,
+  field: n,
+  className: s,
+  testingKey: r
+}) => /* @__PURE__ */ o(
+  "input",
+  {
+    id: e,
+    type: "radio",
+    className: p(Ls.radio, s),
+    required: t,
+    "data-testid": r,
+    ...n
+  }
+);
+je.displayName = "RadioBase";
+const Mt = ({
+  isInvalid: e,
+  isLoading: t,
+  isRequired: n,
+  isOptional: s,
+  id: r,
+  label: a,
+  helperText: i,
+  error: d,
+  field: l,
+  className: c,
+  testingKey: u,
+  ...h
+}) => {
+  const m = v(), _ = r ?? m;
+  return /* @__PURE__ */ o(
+    j,
+    {
+      label: a,
+      helperText: i,
+      error: d,
+      isRequired: n,
+      isOptional: s,
+      id: _,
+      layout: "flag",
+      className: c,
+      children: /* @__PURE__ */ o(
+        je,
+        {
+          id: _,
+          required: n,
+          field: { ...l, "aria-describedby": `error-${r}` },
+          testingKey: u,
+          ...h
+        }
+      )
+    }
+  );
+};
+Mt.displayName = "RadioField";
+const Ht = ({
+  layout: e = "vertical",
+  legend: t,
+  isOptional: n,
+  isRequired: s,
+  children: r
+}) => /* @__PURE__ */ o(
+  ve,
+  {
+    layout: e,
+    legend: t,
+    isOptional: n,
+    isRequired: s,
+    children: r
+  }
+);
+Ht.displayName = "RadioGroupRoot";
+const Gt = (e) => /* @__PURE__ */ o(
+  Mt,
+  {
+    ...e,
+    testingKey: e.testingKey,
+    className: e.className
+  }
+);
+Gt.displayName = "RadioGroupField";
+const Bi = {
+  Root: Ht,
+  Field: Gt
+}, $s = "control__0w6N4", Ts = "checked__v5wfQ", Ss = "disabled__h7JVb", Es = "content__IKiN7", Bs = "label__UR-sm", As = "description__s8FwT", Ps = "badges__klktk", S = {
+  "radio-cards": "radio-cards__C4la-",
+  "has-fluid-width": "has-fluid-width__rKqOq",
+  "has-fixed-width": "has-fixed-width__AAAPW",
+  "radio-card": "radio-card__JyN2Z",
+  control: $s,
+  checked: Ts,
+  "control-wrapper": "control-wrapper__00m5o",
+  disabled: Ss,
+  "align-left": "align-left__lqD3y",
+  "align-center": "align-center__ZMFAS",
+  "control-bottom": "control-bottom__UIViy",
+  "control-left": "control-left__1tHvm",
+  content: Es,
+  label: Bs,
+  description: As,
+  badges: Ps,
+  "icon-center": "icon-center__zJMDY"
+}, Fs = ({
+  layout: e = "horizontal",
+  isRequired: t,
+  isOptional: n,
+  error: s,
+  legend: r,
+  helperText: a,
+  children: i,
+  ...d
+}) => /* @__PURE__ */ o(
+  ve,
+  {
+    className: S["radio-cards"],
+    layout: e,
+    legend: r,
+    isOptional: n,
+    isRequired: t,
+    helperText: a,
+    error: s,
+    ...d,
+    children: i
+  }
+);
+Fs.displayName = "RadioCardGroup";
+function Os({ label: e }) {
+  return /* @__PURE__ */ o(X.DisplayExpressive, { className: S.label, size: "200", weight: "bold", children: e });
+}
+function Ds({ description: e }) {
+  return /* @__PURE__ */ o(X.HDSBody, { className: S.description, size: "100", children: e });
+}
+const zs = "bottom", Rs = "left", Vs = ({
+  controlPosition: e = zs,
+  alignment: t = Rs,
+  maxWidth: n,
+  field: s,
+  icon: r,
+  label: a,
+  description: i,
+  badges: d,
+  children: l
+}) => {
+  const c = v();
+  return /* @__PURE__ */ g(
+    "label",
+    {
+      htmlFor: c,
+      style: { maxWidth: n },
+      className: p(
+        S["radio-card"],
+        S[`control-${e}`],
+        S[`align-${t}`],
+        {
+          [S.checked]: s.checked,
+          [S.disabled]: s.disabled,
+          [S["has-fixed-width"]]: n,
+          [S["has-fluid-width"]]: !n
+        }
+      ),
+      children: [
+        /* @__PURE__ */ g("span", { className: S.content, children: [
+          r && /* @__PURE__ */ o(
+            T,
+            {
+              name: r,
+              size: 24,
+              isInlineBlock: !1,
+              className: p({
+                [S["icon-center"]]: t === "center"
+              })
+            }
+          ),
+          a && /* @__PURE__ */ o(Os, { label: a }),
+          d?.length ? /* @__PURE__ */ o("div", { className: S.badges, children: d.map((u) => /* @__PURE__ */ hn($e, { ...u, key: u.text })) }) : null,
+          i && /* @__PURE__ */ o(Ds, { description: i }),
+          l
+        ] }),
+        /* @__PURE__ */ o("span", { className: S["control-wrapper"], children: /* @__PURE__ */ o(je, { className: S.control, id: c, field: s }) })
+      ]
+    }
+  );
+};
+Vs.displayName = "RadioCard";
+const Ms = "select__hODF3 mds-typography-font-weight-regular", Hs = "invalid__tTJro", Gs = "medium__XQMJY mds-typography-legacy-body-200", Ws = "large__t1lgT mds-typography-legacy-body-300", Ae = {
+  select: Ms,
+  invalid: Hs,
+  medium: Gs,
+  large: Ws
+}, Ks = ({
+  isInvalid: e,
+  isLoading: t,
+  className: n,
+  id: s,
+  field: r,
+  children: a,
+  size: i,
+  error: d,
+  ...l
+}) => /* @__PURE__ */ o(
+  "select",
+  {
+    id: s,
+    className: p(
+      Ae.select,
+      Ae[i],
+      {
+        [Ae.invalid]: e
+      },
+      n
+    ),
+    "aria-describedby": `${d ? "error" : "helper-text"}-${s}`,
+    ...r,
+    ...l,
+    children: a
+  }
+), Us = ({
+  isInvalid: e,
+  isLoading: t,
+  isRequired: n,
+  isOptional: s,
+  id: r,
+  label: a,
+  helperText: i,
+  error: d,
+  field: l,
+  children: c,
+  className: u,
+  size: h = "medium",
+  ...m
+}) => {
+  const _ = v(), y = r ?? _;
+  return /* @__PURE__ */ o(
+    j,
+    {
+      label: a,
+      helperText: i,
+      error: d,
+      isRequired: n,
+      isOptional: s,
+      id: y,
+      layout: "vertical",
+      className: u,
+      children: /* @__PURE__ */ o(
+        Ks,
+        {
+          id: y,
+          isInvalid: e,
+          required: n,
+          field: l,
+          size: h,
+          ...m,
+          children: c
+        }
+      )
+    }
+  );
+};
+Us.displayName = "SelectField";
+const js = "invalid__rrYph", qs = "loading__O7Vv0", xe = {
+  "text-input": "text-input__Xudum mds-typography-font-weight-regular",
+  "mock-hover": "mock-hover__-ItMX",
+  "mock-focus": "mock-focus__S6jof",
+  invalid: js,
+  loading: qs,
+  "size-medium": "size-medium__-UzIQ mds-typography-legacy-body-200",
+  "size-large": "size-large__Hceu2 mds-typography-legacy-body-300"
+}, qe = ({
+  type: e,
+  isInvalid: t,
+  isLoading: n,
+  isRequired: s,
+  className: r,
+  id: a,
+  field: i,
+  size: d = "medium",
+  error: l,
+  ...c
+}) => {
+  const u = v();
+  return /* @__PURE__ */ o(
+    "input",
+    {
+      id: a ?? u,
+      type: e,
+      className: p(
+        xe["text-input"],
+        xe[`size-${d}`],
+        {
+          [xe.invalid]: t,
+          [xe.loading]: n
+        },
+        r
+      ),
+      required: s,
+      "aria-describedby": `${l ? "error" : "helper-text"}-${a}`,
+      ...i,
+      ...c
+    }
+  );
+};
+qe.displayName = "TextInputBase";
+const Zs = ({
+  badgeText: e,
+  type: t = "text",
+  isInvalid: n,
+  isLoading: s,
+  isRequired: r,
+  isOptional: a,
+  id: i,
+  label: d,
+  helperText: l,
+  error: c,
+  field: u,
+  className: h,
+  size: m = "medium",
+  ..._
+}) => {
+  const y = v(), I = i ?? y;
+  return /* @__PURE__ */ o(
+    j,
+    {
+      label: d,
+      badgeText: e,
+      helperText: l,
+      error: c,
+      isRequired: r,
+      isOptional: a,
+      id: I,
+      layout: "vertical",
+      className: h,
+      children: /* @__PURE__ */ o(
+        qe,
+        {
+          id: I,
+          type: t,
+          isInvalid: n,
+          isLoading: s,
+          isRequired: r,
+          field: u,
+          size: m,
+          ..._
+        }
+      )
+    }
+  );
+};
+Zs.displayName = "TextInput";
+const ke = (e, t) => `${e}__${t}`, Y = -1;
+function Ys(e) {
+  const t = /* @__PURE__ */ new Map();
+  for (const [n, s] of Object.entries(e)) {
+    if (!s) continue;
+    const r = t.get(s) || [];
+    t.set(s, [...r, n]);
+  }
+  for (const [n, s] of t)
+    if (s.length > 1)
+      throw new Error(
+        `ComboBox: id '${n}' is duplicated in ${s.join(", ")}`
+      );
+}
+const Wt = de(null), pe = () => {
+  const e = ue(Wt);
+  if (!e)
+    throw new Error("useComboBox must be used within a ComboBoxProvider");
+  return e;
+}, Js = ({
+  children: e,
+  keyboardFocusLoop: t = !0,
+  ids: n = {},
+  onChangeVFocusedOption: s,
+  onChangeSelectedOption: r
+}) => {
+  Ys(n);
+  const a = A([]), i = A(/* @__PURE__ */ new Set()), [d, l] = k(null), [c, u] = k(Y), h = A(null), m = A(null), [_, y] = k(!1), I = A(null), H = ke("hashi-combo-box-toggle", v()), D = ke("hashi-combo-box-popover", v()), q = ke("hashi-combo-box-listbox", v()), ne = b(
+    (f) => {
+      l(f), r?.(f);
+    },
+    [r]
+  ), G = b(
+    (f) => {
+      u(f), s?.(a.current[f]);
+    },
+    [s]
+  ), me = A({
+    toggle: n.toggle ?? H,
+    popover: n.popover ?? D,
+    listbox: n.listbox ?? q
+  }), W = b(
+    (f) => {
+      G(f);
+    },
+    [G]
+  ), we = b(() => {
+    const f = a.current;
+    if (c === Y) return 0;
+    const L = c + 1, B = L >= f.length;
+    let se;
+    B && t ? (se = Y, y(!1)) : se = B ? c : L, W(se);
+  }, [t, c, W]), N = b(() => {
+    if (c === Y) return 0;
+    const f = c - 1, L = f < 0;
+    let B;
+    L && t ? (B = Y, y(!1)) : B = L ? c : f, W(B);
+  }, [t, c, W]), w = b(
+    (f) => {
+      const L = a.current.findIndex((B) => B.id === f.id);
+      if (L === -1) {
+        console.error("ComboBox: Item not found", f);
+        return;
+      }
+      G(L);
+    },
+    [G]
+  ), P = b(() => c === Y ? null : a.current[c] || null, [c]), oe = b(
+    (f) => {
+      if (a.current.findIndex((B) => B.id === f.id) === -1) {
+        console.error(
+          "ComboBox: Item not found, Selected item not updated",
+          f
+        );
+        return;
+      }
+      ne(f), y(!1);
+    },
+    [ne]
+  ), Se = b(() => d, [d]), Ee = b((f) => {
+    if (i.current.has(f.id)) {
+      const L = a.current.find((re) => re.id === f.id), Je = `Each ComboBox.Item must have a unique id.
+ Found items with duplicate ids: ${JSON.stringify({
+        existing: L,
+        attemptedToAdd: f
+      })}`;
+      throw Error(Je);
+    }
+    i.current.add(f.id), a.current.push(f);
+  }, []), he = b(() => a.current, []), dn = b((f) => {
+    i.current.delete(f.id), a.current = a.current.filter((L) => L.id !== f.id);
+  }, []);
+  F(() => {
+    _ && m.current?.focus();
+  }, [_, m, h]), F(() => {
+    const f = P(), L = I.current;
+    f && L && L.querySelector(
+      `[data-combo-box-item-id="${f.id}"]`
+    )?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [P]);
+  const Be = b(() => {
+    y(!1), G(Y);
+  }, [G]), un = b(() => {
+    y(!0);
+  }, []), pn = (f) => {
+    const L = f.key === "ArrowDown" || f.key === "ArrowUp", B = f.key === " ", se = m.current !== null;
+    switch ((L || B && !se) && f.preventDefault(), f.key) {
+      case "Escape": {
+        Be();
+        break;
+      }
+      case "ArrowDown": {
+        const re = P() === null;
+        _ && re ? W(0) : we();
+        break;
+      }
+      case "ArrowUp": {
+        N();
+        break;
+      }
+      case "Enter": {
+        const re = P();
+        re && oe(re), Be();
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ o(
+    Wt.Provider,
+    {
+      value: {
+        addItem: Ee,
+        selectItem: oe,
+        vFocus: w,
+        vFocusByIdx: W,
+        vFocusNext: we,
+        vFocusPrev: N,
+        getSelectedItem: Se,
+        getVFocusedItem: P,
+        getItems: he,
+        removeItem: dn,
+        searchInputRef: m,
+        toggleRef: h,
+        listRef: I,
+        isOpen: _,
+        closePopover: Be,
+        openPopover: un,
+        ids: me,
+        handleVFocusKeyboardControls: pn
+      },
+      children: e
+    }
+  );
+}, Qs = ({
+  id: e,
+  value: t,
+  label: n,
+  children: s,
+  ...r
+}) => {
+  const a = ke("hashi-combo-box-item", v()), i = e ?? a, { addItem: d, removeItem: l, getVFocusedItem: c, vFocus: u, selectItem: h } = pe();
+  F(() => (d({ id: i, value: t, label: n }), () => l({ id: i, value: t, label: n })), [d, i, l, t, n]);
+  const m = c()?.id === i;
+  return /* @__PURE__ */ o(
+    "li",
+    {
+      "data-combo-box-item-id": i,
+      role: "option",
+      "aria-selected": m,
+      "data-vfocused": m,
+      onClick: () => h({ id: i, value: t, label: n }),
+      onMouseEnter: () => u({ id: i, value: t, label: n }),
+      ...r,
+      children: s
+    }
+  );
+}, Xs = ({ children: e, className: t }) => {
+  const {
+    toggleRef: n,
+    openPopover: s,
+    closePopover: r,
+    isOpen: a,
+    ids: i,
+    handleVFocusKeyboardControls: d,
+    searchInputRef: l
+  } = pe(), c = (m) => {
+    m.stopPropagation(), a ? r() : s();
+  }, u = (m) => {
+    if ((m.key === "Enter" || m.key === "ArrowDown" || m.key === " ") && a === !1) {
+      m.preventDefault(), s();
+      return;
+    }
+    !(l.current !== null) && a && d(m);
+  }, h = () => (m) => {
+    if (m.relatedTarget?.closest("[data-combo-box-popover]")) return;
+    l.current !== null || r();
+  };
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      role: "combobox",
+      onClick: c,
+      onKeyDown: u,
+      tabIndex: 0,
+      ref: n,
+      "aria-haspopup": "listbox",
+      "aria-expanded": a,
+      "aria-controls": i.current.popover,
+      className: t,
+      onBlur: h(),
+      children: e
+    }
+  );
+}, er = ({
+  placeholder: e = "Select an option"
+}) => {
+  const { getSelectedItem: t } = pe();
+  return /* @__PURE__ */ o(te, { children: t()?.label ?? e });
+}, tr = ({ children: e, className: t }) => {
+  const { isOpen: n, ids: s, closePopover: r } = pe();
+  return F(() => {
+    const a = (i) => {
+      !n || i.target.closest("[data-combo-box-popover]") || r();
+    };
+    return document.addEventListener("click", a), () => {
+      document.removeEventListener("click", a);
+    };
+  }, [n, r]), n ? /* @__PURE__ */ o("div", { id: s.current.popover, "data-combo-box-popover": !0, className: t, children: e }) : null;
+}, nr = ({
+  label: e,
+  children: t,
+  className: n = "",
+  maxHeight: s,
+  onScroll: r
+}) => {
+  const { ids: a, listRef: i } = pe();
+  return /* @__PURE__ */ o(
+    "ul",
+    {
+      id: a.current.listbox,
+      "aria-label": e,
+      role: "listbox",
+      tabIndex: -1,
+      ref: i,
+      className: n,
+      style: { maxHeight: s },
+      onScroll: r,
+      children: t
+    }
+  );
+}, or = ({
+  placeholder: e = "Search",
+  value: t,
+  onChange: n,
+  onBlur: s
+}) => {
+  const {
+    searchInputRef: r,
+    getVFocusedItem: a,
+    handleVFocusKeyboardControls: i,
+    closePopover: d
+  } = pe();
+  return /* @__PURE__ */ o(
+    qe,
+    {
+      field: {
+        type: "search",
+        ref: r,
+        autoComplete: "off",
+        "aria-haspopup": "listbox",
+        "aria-autocomplete": "list",
+        role: "combobox",
+        "aria-activedescendant": a()?.id ?? "",
+        placeholder: e,
+        value: t,
+        onChange: n,
+        onKeyDown: i,
+        onBlur: (l) => {
+          l.stopPropagation(), !l.relatedTarget?.closest(
+            "[data-combo-box-popover]"
+          ) && (d(), s?.());
+        }
+      }
+    }
+  );
+}, ee = Object.freeze({
+  Root: Js,
+  Trigger: Xs,
+  Popover: tr,
+  SearchInput: or,
+  List: nr,
+  Item: Qs,
+  Value: er
+}), sr = "root__yeZ3n", rr = "trigger__CTK51 mds-typography-font-weight-regular", ar = "popover__68RkH", ir = "list__jTTmL", lr = "option__LWP6l", E = {
+  root: sr,
+  trigger: rr,
+  "search-input-wrapper": "search-input-wrapper__JU5Rc",
+  popover: ar,
+  list: ir,
+  option: lr,
+  "option-text": "option-text__fWrXg mds-typography-font-weight-regular mds-typography-legacy-body-200",
+  "interactive-icon": "interactive-icon__vZiDi",
+  "interactive-icon-leading": "interactive-icon-leading__rsHgU",
+  "interactive-icon-trailing": "interactive-icon-trailing__oEWQo",
+  "interactive-loading-wrapper": "interactive-loading-wrapper__yVz-7"
+}, cr = ({
+  children: e,
+  onChangeSelectedOption: t,
+  onChangeVFocusedOption: n
+}) => /* @__PURE__ */ o(
+  ee.Root,
+  {
+    onChangeSelectedOption: t,
+    onChangeVFocusedOption: n,
+    children: /* @__PURE__ */ o("div", { className: E.root, children: e })
+  }
+), dr = ({ className: e }) => /* @__PURE__ */ o(ee.Trigger, { className: p(E.trigger, e), children: /* @__PURE__ */ o(ee.Value, {}) }), ur = ({ children: e }) => /* @__PURE__ */ o(ee.Popover, { className: E.popover, children: e }), pr = ({
+  placeholder: e = "Search",
+  value: t,
+  onChange: n,
+  onBlur: s
+}) => /* @__PURE__ */ o("div", { className: E["search-input-wrapper"], children: /* @__PURE__ */ o(
+  ee.SearchInput,
+  {
+    placeholder: e,
+    value: t,
+    onChange: n,
+    onBlur: s
+  }
+) }), mr = ({
+  label: e,
+  children: t,
+  className: n,
+  maxHeight: s,
+  onScroll: r
+}) => /* @__PURE__ */ o(
+  ee.List,
+  {
+    label: e,
+    className: p(E.list, n),
+    maxHeight: s,
+    onScroll: r,
+    children: t
+  }
+), hr = ({
+  value: e,
+  label: t,
+  isLoading: n,
+  icon: s,
+  className: r,
+  trailingIcon: a
+}) => /* @__PURE__ */ o(
+  ee.Item,
+  {
+    value: e,
+    label: t,
+    className: p(E.option, r),
+    children: n ? /* @__PURE__ */ g("div", { className: E["interactive-loading-wrapper"], children: [
+      /* @__PURE__ */ o(
+        "div",
+        {
+          className: p(
+            E["interactive-icon"],
+            E["interactive-icon-leading"]
+          ),
+          children: /* @__PURE__ */ o(T, { name: "loading", isInlineBlock: !1 })
+        }
+      ),
+      /* @__PURE__ */ o("span", { className: E["option-text"], children: t })
+    ] }) : /* @__PURE__ */ g(te, { children: [
+      s && /* @__PURE__ */ o(
+        "span",
+        {
+          className: p(
+            E["interactive-icon"],
+            E["interactive-icon-leading"]
+          ),
+          children: /* @__PURE__ */ o(T, { name: s, isInlineBlock: !1 })
+        }
+      ),
+      /* @__PURE__ */ o("span", { className: E["option-text"], children: t }),
+      a && /* @__PURE__ */ o(
+        "span",
+        {
+          className: p(
+            E["interactive-icon"],
+            E["interactive-icon-trailing"]
+          ),
+          children: /* @__PURE__ */ o(T, { name: a, isInlineBlock: !1 })
+        }
+      )
+    ] })
+  }
+), ae = Object.freeze({
+  Root: cr,
+  Trigger: dr,
+  Popover: ur,
+  /**
+   * Note that this only acts as a view layer,
+   * it does not participate in the search logic.
+   * This is left for the consumer to implement.
+   */
+  SearchInput: pr,
+  List: mr,
+  Option: hr
+}), gr = ({
+  label: e,
+  helperText: t,
+  error: n,
+  id: s,
+  searchProps: r,
+  options: a,
+  listLabel: i,
+  listHeight: d = "240px",
+  onScroll: l,
+  onChangeSelectedOption: c,
+  onChangeVFocusedOption: u,
+  onSearchBlur: h,
+  ...m
+}) => {
+  const _ = v();
+  return /* @__PURE__ */ o(
+    j,
+    {
+      label: e,
+      helperText: t,
+      error: n,
+      id: s ?? _,
+      layout: "vertical",
+      ...m,
+      children: /* @__PURE__ */ g(
+        ae.Root,
+        {
+          onChangeSelectedOption: c,
+          onChangeVFocusedOption: u,
+          children: [
+            /* @__PURE__ */ o(ae.Trigger, {}),
+            /* @__PURE__ */ g(ae.Popover, { children: [
+              r && /* @__PURE__ */ o(
+                ae.SearchInput,
+                {
+                  placeholder: r.placeholder,
+                  value: r.value,
+                  onChange: r.onChange,
+                  onBlur: h
+                }
+              ),
+              /* @__PURE__ */ o(
+                ae.List,
+                {
+                  label: i,
+                  maxHeight: d,
+                  onScroll: l,
+                  children: a.map((I) => /* @__PURE__ */ o(ae.Option, { ...I }, I.value))
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+gr.displayName = "SuperSelectField";
+const _r = "textarea__3MZYV mds-typography-font-weight-regular", fr = "invalid__Q80EM", yr = "medium__G2gPs mds-typography-legacy-body-200", br = "large__0Y-7C mds-typography-legacy-body-300", Pe = {
+  textarea: _r,
+  invalid: fr,
+  medium: yr,
+  large: br
+}, vr = ({
+  isInvalid: e,
+  isLoading: t,
+  className: n,
+  id: s,
+  field: r,
+  size: a,
+  error: i,
+  ...d
+}) => /* @__PURE__ */ o(
+  "textarea",
+  {
+    id: s,
+    className: p(
+      Pe.textarea,
+      Pe[a],
+      {
+        [Pe.invalid]: e
+      },
+      n
+    ),
+    "aria-describedby": `${i ? "error" : "helper-text"}-${s}`,
+    ...r,
+    ...d
+  }
+), Nr = ({
+  isInvalid: e,
+  isLoading: t,
+  isRequired: n,
+  isOptional: s,
+  id: r,
+  label: a,
+  helperText: i,
+  error: d,
+  field: l,
+  size: c = "medium",
+  ...u
+}) => {
+  const h = v(), m = r ?? h;
+  return /* @__PURE__ */ o(
+    j,
+    {
+      label: a,
+      helperText: i,
+      error: d,
+      isRequired: n,
+      isOptional: s,
+      id: m,
+      layout: "vertical",
+      children: /* @__PURE__ */ o(
+        vr,
+        {
+          id: m,
+          isInvalid: e,
+          isLoading: t,
+          required: n,
+          field: l,
+          size: c,
+          ...u
+        }
+      )
+    }
+  );
+};
+Nr.displayName = "TextAreaField";
+const wr = "toggle__PmDvt", Ir = "control__GLB77", xr = "facade__-n7d2", Fe = {
+  toggle: wr,
+  control: Ir,
+  facade: xr
+}, Kt = ({
+  id: e,
+  field: t,
+  toggleOnEnter: n,
+  testingKey: s,
+  error: r,
+  ...a
+}) => {
+  const i = v(), d = e ?? i, l = (c) => {
+    c.key === "Enter" && (c.currentTarget.checked = !c.currentTarget.checked);
+  };
+  return /* @__PURE__ */ g("div", { className: Fe.toggle, children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        id: d,
+        className: Fe.control,
+        type: "checkbox",
+        ...t,
+        ...a,
+        role: "switch",
+        "aria-describedby": `${r ? "error" : "helper-text"}-${e}`,
+        onKeyDown: n ? l : void 0,
+        "data-testid": s
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: Fe.facade })
+  ] });
+};
+Kt.displayName = "ToggleBase";
+const Ut = ({
+  isInvalid: e,
+  isRequired: t,
+  isOptional: n,
+  id: s,
+  label: r,
+  helperText: a,
+  error: i,
+  field: d,
+  className: l,
+  testingKey: c,
+  ...u
+}) => {
+  const h = v(), m = s ?? h;
+  return /* @__PURE__ */ o(
+    j,
+    {
+      label: r,
+      helperText: a,
+      error: i,
+      isRequired: t,
+      isOptional: n,
+      id: m,
+      layout: "flag",
+      className: l,
+      children: /* @__PURE__ */ o(
+        Kt,
+        {
+          id: m,
+          field: d,
+          testingKey: c,
+          ...u
+        }
+      )
+    }
+  );
+};
+Ut.displayName = "ToggleField";
+const jt = ({
+  layout: e = "vertical",
+  legend: t,
+  isOptional: n,
+  isRequired: s,
+  children: r
+}) => /* @__PURE__ */ o(
+  ve,
+  {
+    layout: e,
+    legend: t,
+    isOptional: n,
+    isRequired: s,
+    children: r
+  }
+);
+jt.displayName = "ToggleGroupRoot";
+const qt = (e) => /* @__PURE__ */ o(Ut, { ...e, className: e.className });
+qt.displayName = "ToggleGroupField";
+const Ai = {
+  Root: jt,
+  Field: qt
+}, Cr = "icon__aQOfk", kr = "logo__3zBXv", Lr = "extra__5VSha", J = {
+  "icon-tile": "icon-tile__8Lxip",
+  icon: Cr,
+  logo: kr,
+  extra: Lr,
+  "size-small": "size-small__eKjTy",
+  "size-medium": "size-medium__Cpd2c",
+  "size-large": "size-large__0nIKA",
+  "type-logo": "type-logo__bXQnG",
+  "type-icon": "type-icon__DoyiK",
+  "color-neutral": "color-neutral__s-i4y",
+  "color-boundary": "color-boundary__TWXib",
+  "color-consul": "color-consul__qHXGr",
+  "color-hcp": "color-hcp__T1Cpx",
+  "color-nomad": "color-nomad__OPKVc",
+  "color-packer": "color-packer__VbjYn",
+  "color-terraform": "color-terraform__CzLAd",
+  "color-vagrant": "color-vagrant__GMAgE",
+  "color-vault": "color-vault__yHn5Z",
+  "color-vault-secrets": "color-vault-secrets__GiX0y",
+  "color-waypoint": "color-waypoint__YASrb"
+}, $r = {
+  small: 12,
+  medium: 16,
+  large: 16
+}, Tr = ({
+  size: e = "medium",
+  logo: t,
+  icon: n,
+  iconSecondary: s,
+  color: r = "neutral",
+  ...a
+}) => {
+  const i = t ? `${t}-color` : n;
+  if (i) {
+    const d = e === "small" ? 16 : 24, l = t ? "logo" : "icon", c = t || r;
+    return /* @__PURE__ */ g(
+      "div",
+      {
+        className: p(
+          J["icon-tile"],
+          J[`type-${l}`],
+          J[`size-${e}`],
+          J[`color-${c}`]
+        ),
+        "aria-hidden": "true",
+        ...a,
+        children: [
+          /* @__PURE__ */ o("div", { className: t ? J.logo : J.icon, children: /* @__PURE__ */ o(T, { name: i, size: d, stretched: !0 }) }),
+          s && /* @__PURE__ */ o("div", { className: J.extra, children: /* @__PURE__ */ o(
+            T,
+            {
+              name: s,
+              size: $r[e],
+              color: "var(--mds-color-foreground-strong)"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+};
+Tr.displayName = "IconTile";
+const Sr = "icon__CPQmv", Oe = {
+  "link-inline": "link-inline__Wl8cA",
+  "color-primary": "color-primary__XlogH",
+  "color-secondary": "color-secondary__sf-Wg",
+  icon: Sr
+}, Er = ({
+  text: e,
+  color: t = "primary",
+  icon: n,
+  iconPosition: s = "trailing",
+  className: r,
+  isHrefExternal: a,
+  ...i
+}) => {
+  const d = n || !a ? n : "external-link", l = d && /* @__PURE__ */ o(T, { name: d, size: 16, className: Oe.icon });
+  return /* @__PURE__ */ g(
+    ft,
+    {
+      className: p(Oe["link-inline"], Oe[`color-${t}`], r),
+      ...i,
+      children: [
+        l && s === "leading" && l,
+        e,
+        l && s === "trailing" && l
+      ]
+    }
+  );
+};
+Er.displayName = "InlineLink";
+function at(e) {
+  const t = e?.variant ? e.variant : "primary";
+  if (t === "primary")
+    switch (e?.brand) {
+      case "hashicorp":
+        return "primary";
+      case "boundary":
+      case "consul":
+      case "nomad":
+      case "packer":
+      case "terraform":
+      case "vagrant":
+      case "vault":
+      case "waypoint":
+        return e.brand;
+      case "neutral":
+        return "secondary-high-contrast";
+      default:
+        return "primary";
+    }
+  if (t === "secondary")
+    return "secondary";
+  if (t === "tertiary" || t === "tertiary-neutral" || t === "ghost")
+    return "tertiary";
+  throw new Error(
+    `Unable to determine HDS Button color from theme: ${JSON.stringify(e)}`
+  );
+}
+const it = {
+  inbound: "arrow-right",
+  outbound: "external-link",
+  download: "download",
+  anchor: "anchor"
+}, ze = ht(
+  ({
+    locale: e,
+    text: t,
+    title: n,
+    url: s,
+    href: r,
+    linkType: a,
+    onClick: i,
+    external: d,
+    className: l,
+    size: c,
+    icon: u,
+    iconPosition: h = "trailing",
+    label: m,
+    disabled: _,
+    type: y,
+    theme: I,
+    ...H
+  }, D) => at(I) === "tertiary" ? /* @__PURE__ */ o(
+    _t,
+    {
+      text: t || n,
+      color: I?.background === "dark" ? "secondary-inverted" : "secondary",
+      href: s || r,
+      icon: a ? it[a] : u,
+      iconPosition: a ? "trailing" : h,
+      className: l,
+      onClick: i,
+      size: c,
+      isHrefExternal: a === "outbound" || d,
+      ref: D,
+      locale: e
+    }
+  ) : /* @__PURE__ */ o(
+    gt,
+    {
+      text: t || n,
+      href: s || r,
+      isHrefExternal: a === "outbound" || d,
+      color: at(I),
+      type: y,
+      icon: a ? it[a] : u,
+      iconPosition: a ? "trailing" : h,
+      onClick: i,
+      className: l,
+      size: c === "small" ? "medium" : "large",
+      "aria-label": m,
+      disabled: _,
+      ref: D,
+      locale: e,
+      ...H
+    }
+  )
+);
+ze.displayName = "MDSButton";
+const Br = "wrapper__Hnt2o", Ar = "dismiss__hfQfE", Pr = "overlay__cUa2F", Re = {
+  wrapper: Br,
+  dismiss: Ar,
+  overlay: Pr
+}, Fr = ({ className: e }) => /* @__PURE__ */ o("div", { className: p(Re.overlay, e) }), Or = ({ children: e, className: t, onDismiss: n, ...s }) => /* @__PURE__ */ g("dialog", { className: p(Re.wrapper, t), ...s, children: [
+  /* @__PURE__ */ o(vt, { onClick: n, className: Re.dismiss }),
+  e
+] }), lt = {
+  Overlay: Fr,
+  Wrapper: Or
+}, Ze = de(
+  void 0
+);
+Ze.displayName = "ModalContext";
+function Pi() {
+  const e = ue(Ze);
+  if (e === void 0)
+    throw new Error("useModal must be used within a ModalContext.Provider");
+  return e;
+}
+const Dr = "modal__Mao59", zr = {
+  modal: Dr
+}, Rr = ({
+  onClose: e,
+  initialIsOpen: t = !1,
+  initialModalContent: n = null,
+  children: s
+}) => {
+  const [r, a] = k(
+    n
+  ), [i, d] = k(t), l = b(() => {
+    d(!1), a(null), e && e();
+  }, [d, e]), c = b(
+    (h) => {
+      a(h), d(!0);
+    },
+    [d]
+  ), u = V(
+    () => ({
+      isOpen: i,
+      openModal: c,
+      modalContent: r,
+      closeModal: l
+    }),
+    [i, c, l, r]
+  );
+  return F(() => {
+    const h = (m) => {
+      m.key === "Escape" && i && l();
+    };
+    return i && window.addEventListener("keydown", h), () => {
+      i && window.removeEventListener("keydown", h);
+    };
+  }, [i, l]), /* @__PURE__ */ g(Ze.Provider, { value: u, children: [
+    s,
+    i && r && /* @__PURE__ */ g(te, { children: [
+      /* @__PURE__ */ o(bn, { children: /* @__PURE__ */ o(
+        lt.Wrapper,
+        {
+          onDismiss: l,
+          className: zr.modal,
+          open: i,
+          children: r
+        }
+      ) }),
+      /* @__PURE__ */ o(lt.Overlay, {})
+    ] })
+  ] });
+};
+Rr.displayName = "ModalProvider";
+const Vr = "separator__Qz7bd", ct = {
+  separator: Vr,
+  "spacing-24": "spacing-24__5hcla",
+  "spacing-0": "spacing-0__W5NO0"
+}, Mr = ({ spacing: e = "24", className: t, ...n }) => /* @__PURE__ */ o(
+  "hr",
+  {
+    className: p(ct.separator, ct[`spacing-${e}`], t),
+    ...n
+  }
+);
+Mr.displayName = "Separator";
+const Zt = "medium", Hr = ["default", "medium", "short", "tall"], Fi = (e) => {
+  const t = e;
+  return Hr.includes(t) ? t : Zt;
+}, Yt = "top", Gr = ["baseline", "middle", "top"], Oi = (e) => {
+  const t = e;
+  return Gr.includes(t) ? t : Yt;
+}, Ye = "left", Wr = ["left", "center", "right"], Di = (e) => {
+  const t = e;
+  return Wr.includes(t) ? t : Ye;
+}, Jt = "col", Kr = ["col", "row"], zi = (e) => {
+  const t = e;
+  return Kr.includes(t) ? t : Jt;
+}, Ur = "table__tdU5g", jr = "striped__MBMc-", qr = "tbody__W5bOI", Zr = "tr__xeZno", Yr = "th__GQbKk", Jr = "td__WktB5", Qr = "content__Js-E8", Xr = "thead__3-vDU", $ = {
+  table: Ur,
+  "layout-fixed": "layout-fixed__9PpwJ",
+  striped: jr,
+  tbody: qr,
+  tr: Zr,
+  "density-short": "density-short__7tyZx",
+  "density-medium": "density-medium__nmuYV",
+  "density-tall": "density-tall__2N9i0",
+  "valign-top": "valign-top__SRqQY",
+  "valign-middle": "valign-middle__kSfMx",
+  "valign-baseline": "valign-baseline__UFJwd",
+  th: Yr,
+  td: Jr,
+  "align-center": "align-center__vOTTL",
+  content: Qr,
+  "align-right": "align-right__3vUHD",
+  thead: Xr,
+  "th-button": "th-button__drg-o",
+  "aria-label-hidden-segment": "aria-label-hidden-segment__oQhN8"
+}, Qt = ({
+  align: e = Ye,
+  children: t,
+  className: n,
+  ...s
+}) => /* @__PURE__ */ o(
+  "td",
+  {
+    className: p(
+      $.td,
+      $[`align-${e}`],
+      "mds-typography-legacy-body-200",
+      "mds-typography-font-weight-regular",
+      n
+    ),
+    ...s,
+    children: /* @__PURE__ */ o("div", { className: $.content, children: t })
+  }
+);
+Qt.displayName = "B.Td";
+const dt = {
+  name: "hideOnEsc",
+  defaultValue: !0,
+  fn(e) {
+    function t(n) {
+      n.key === "Escape" && e.hide();
+    }
+    return {
+      onShow() {
+        document.addEventListener("keydown", t);
+      },
+      onHide() {
+        document.removeEventListener("keydown", t);
+      }
+    };
+  }
+}, ea = ({ options: e = {}, children: t, text: n }) => {
+  const s = e.followCursor !== void 0 ? [dt, Nn] : [dt];
+  return /* @__PURE__ */ o(
+    vn,
+    {
+      theme: "hds",
+      arrow: `<svg
+					className="hds-tooltip-pointer"
+					width="16"
+					height="7"
+					viewBox="0 0 16 7"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path d="M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z" />
+				</svg>`,
+      interactive: !0,
+      aria: {
+        content: "describedby"
+      },
+      plugins: s,
+      content: n,
+      ...e,
+      children: t
+    }
+  );
+}, ta = ({ tooltip: e, labelId: t }) => {
+  const n = v();
+  return /* @__PURE__ */ o(ea, { text: e, children: /* @__PURE__ */ g(
+    "button",
+    {
+      type: "button",
+      className: $["th-button"],
+      "aria-labelledby": `${n} ${t}`,
+      children: [
+        /* @__PURE__ */ o("span", { id: n, className: $["aria-label-hidden-segment"], children: "More information for" }),
+        /* @__PURE__ */ o(T, { name: "info" })
+      ]
+    }
+  ) });
+}, Xt = ({
+  align: e = Ye,
+  width: t,
+  scope: n = Jt,
+  tooltip: s,
+  isVisuallyHidden: r,
+  children: a,
+  className: i,
+  ...d
+}) => {
+  const l = v();
+  let c;
+  return r ? c = /* @__PURE__ */ o("span", { className: "sr-only", children: a }) : s ? c = /* @__PURE__ */ g("div", { className: $.content, children: [
+    /* @__PURE__ */ o("span", { id: l, children: a }),
+    /* @__PURE__ */ o(ta, { tooltip: s, labelId: l })
+  ] }) : c = /* @__PURE__ */ o("div", { className: $.content, children: a }), /* @__PURE__ */ o(
+    "th",
+    {
+      className: p(
+        $.th,
+        $[`align-${e}`],
+        "mds-typography-legacy-body-200",
+        "mds-typography-font-weight-semibold",
+        i
+      ),
+      style: t ? { width: t, minWidth: t } : {},
+      ...d,
+      scope: n,
+      children: c
+    }
+  );
+};
+Xt.displayName = "H.TH";
+const en = ({ children: e, className: t, ...n }) => /* @__PURE__ */ o("tr", { className: p($.tr, t), ...n, children: e });
+en.displayName = "T.TR";
+function tn({
+  caption: e,
+  density: t = Zt,
+  valign: n = Yt,
+  isStriped: s,
+  isFixedLayout: r,
+  children: a,
+  className: i,
+  ...d
+}) {
+  return /* @__PURE__ */ g(
+    "table",
+    {
+      className: p(
+        $.table,
+        $[`density-${t}`],
+        $[`valign-${n}`],
+        {
+          [$.striped]: s,
+          [$["layout-fixed"]]: r
+        },
+        i
+      ),
+      ...d,
+      children: [
+        e && /* @__PURE__ */ o("caption", { className: "sr-only", children: e }),
+        a
+      ]
+    }
+  );
+}
+tn.displayName = "Table";
+function nn({ children: e }) {
+  return /* @__PURE__ */ o("thead", { className: $.thead, children: e });
+}
+nn.displayName = "T.Head";
+function on({ children: e }) {
+  return /* @__PURE__ */ o("tbody", { className: $.tbody, children: e });
+}
+on.displayName = "T.Body";
+const Ri = { Root: tn, TR: en, THead: nn, TH: Xt, TBody: on, TD: Qt }, sn = de(
+  void 0
+);
+function Ne() {
+  const e = ue(sn);
+  if (e === void 0)
+    throw new Error("useTabsContext must be used within a TabsContext.Provider");
+  return e;
+}
+const na = "tablist__sKiEs", oa = "tab__qi523", sa = "primary__iGc9C", ra = "selected__SVr0E", aa = "indicator__OHxre", ia = "secondary__qlHsL", la = "panel__G8tI0", K = {
+  "tablist-wrapper": "tablist-wrapper__nF28e",
+  tablist: na,
+  tab: oa,
+  primary: sa,
+  selected: ra,
+  indicator: aa,
+  secondary: ia,
+  "tab-button": "tab-button__qI9wt",
+  panel: la
+}, ca = ({ children: e, className: t, ...n }) => {
+  const { panelIds: s, tabIds: r, selectedTabIndex: a, panelNodes: i } = Ne(), d = "panel-" + v(), l = V(
+    () => s.indexOf(d),
+    [s, d]
+  ), c = V(
+    () => l > -1 ? r[l] : void 0,
+    [r, l]
+  ), u = V(
+    () => l === a,
+    [l, a]
+  );
+  return /* @__PURE__ */ o(
+    "section",
+    {
+      className: p(K.panel, t),
+      ...n,
+      role: "tabpanel",
+      "aria-labelledby": c,
+      id: d,
+      hidden: !u,
+      ref: (h) => i.current.push(h),
+      children: e
+    }
+  );
+}, da = ({
+  count: e,
+  icon: t,
+  isSelected: n,
+  children: s,
+  className: r,
+  trackingKey: a,
+  tabIndicatorTheme: i = "primary",
+  ...d
+}) => {
+  const { tabNodes: l, tabIds: c, selectedTabIndex: u, onClick: h, onKeyUp: m, size: _ } = Ne(), y = "tab-" + v(), I = V(() => c.indexOf(y), [c, y]), H = V(
+    () => I === u,
+    [I, u]
+  );
+  return /* @__PURE__ */ o(
+    "li",
+    {
+      className: p(
+        K.tab,
+        K[i],
+        {
+          [K.selected]: H
+        },
+        r
+      ),
+      ...d,
+      role: "presentation",
+      children: /* @__PURE__ */ g(
+        "button",
+        {
+          className: p(
+            K["tab-button"],
+            "mds-typography-font-weight-medium",
+            {
+              "mds-typography-legacy-body-200": _ === "medium",
+              "mds-typography-legacy-body-300": _ === "large"
+            }
+          ),
+          role: "tab",
+          type: "button",
+          id: y,
+          "aria-selected": H,
+          tabIndex: H ? void 0 : -1,
+          onClick: (D) => h(I, D),
+          onKeyUp: (D) => m(I, D),
+          "data-is-selected": n,
+          "data-analytics": a,
+          ref: (D) => l.current.push(D),
+          children: [
+            t && /* @__PURE__ */ o(T, { name: t, size: 16, role: "presentation" }),
+            s,
+            e && /* @__PURE__ */ o(He, { text: e, size: "small", role: "presentation" })
+          ]
+        }
+      )
+    }
+  );
+}, ua = ({
+  children: e,
+  onClickTab: t,
+  initialSelectedTabIndex: n = 0,
+  size: s = "medium",
+  className: r,
+  ...a
+}) => {
+  const [i, d] = k(
+    n
+  ), l = A([]), c = A([]), [u, h] = k([]), [m, _] = k([]), [y, I] = k(0), [H, D] = k(0), q = A(null), ne = b((N) => {
+    const w = l.current[N]?.parentNode;
+    w && w.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, []);
+  F(() => {
+    d(n);
+  }, [n]), F(() => {
+    const N = l.current[i]?.parentElement;
+    if (N && q.current) {
+      const w = N.offsetLeft, P = N.offsetWidth;
+      D(w), I(P), q.current.scrollTo({
+        left: w,
+        behavior: "smooth"
+      });
+    }
+  }, [l, i, ne, q]), F(() => {
+    h(l.current.map((P) => P.id));
+    let N = 0, w = 0;
+    if (l.current.forEach((P, oe) => {
+      P.hasAttribute("data-is-selected") && (N = oe, w++);
+    }), w > 1)
+      throw new Error("Only one tab may use isSelected argument");
+    d(N);
+  }, [l]), F(() => {
+    _(c.current.map((N) => N.id));
+  }, [c]);
+  const G = b(
+    (N, w) => {
+      d(N), ne(N), typeof t == "function" && t(w, N);
+    },
+    [t, ne]
+  ), me = b(
+    (N, w) => {
+      w.preventDefault(), l.current[N].focus();
+    },
+    []
+  ), W = b(
+    (N, w) => {
+      const P = "ArrowLeft", oe = "ArrowRight", Se = "Enter", Ee = " ";
+      if (w.key === oe) {
+        const he = (N + 1) % u.length;
+        me(he, w);
+      } else if (w.key === P) {
+        const he = (N + u.length - 1) % u.length;
+        me(he, w);
+      } else (w.key === Se || w.key === Ee) && d(N);
+    },
+    [me, u.length]
+  ), we = V(
+    () => ({
+      tabNodes: l,
+      tabIds: u,
+      panelNodes: c,
+      panelIds: m,
+      selectedTabIndex: i,
+      onClick: G,
+      onKeyUp: W,
+      size: s,
+      tabsListRef: q
+    }),
+    [
+      l,
+      u,
+      c,
+      m,
+      i,
+      G,
+      W,
+      s,
+      q
+    ]
+  );
+  return /* @__PURE__ */ o(sn.Provider, { value: we, children: /* @__PURE__ */ o(
+    "div",
+    {
+      className: p(K.tabs, r),
+      ...a,
+      style: {
+        "--indicator-left-pos": `${H}px`,
+        "--indicator-width": `${y}px`
+      },
+      children: e
+    }
+  ) });
+}, pa = ({ children: e, className: t }) => {
+  const { tabsListRef: n } = Ne();
+  return /* @__PURE__ */ o("div", { className: p(K["tablist-wrapper"], t), children: /* @__PURE__ */ g("ul", { className: K.tablist, role: "tablist", ref: n, children: [
+    e,
+    /* @__PURE__ */ o("li", { className: K.indicator, role: "presentation" })
+  ] }) });
+}, ce = { Provider: ua, TabList: pa, Panel: ca, Tab: da }, rn = (e) => (e.r * 299 + e.g * 587 + e.b * 114) / 1e3 >= 192 ? "dark" : "light", an = (e) => {
+  const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
+  return t ? {
+    r: parseInt(t[1], 16),
+    g: parseInt(t[2], 16),
+    b: parseInt(t[3], 16)
+  } : { r: 0, g: 0, b: 0 };
+}, ma = "datasetValue__7Cgnp", ha = "datasetValueBar__XH-zW", ga = "datasetValuePercent__5-Ofn", _a = "offset__5sIB1", fa = "stackable__EL-7z", ya = "light__bf-WO", ba = "dark__grmLH", ie = {
+  datasetValue: ma,
+  datasetValueBar: ha,
+  datasetValuePercent: ga,
+  offset: _a,
+  stackable: fa,
+  light: ya,
+  dark: ba
+};
+function va({
+  value: e,
+  highestValue: t,
+  color: n,
+  stackable: s
+}) {
+  const [r, a] = k(!1), { ref: i } = yt({
+    onResize: ({ width: c }) => {
+      e === 0 && (e = 0.5);
+      let u = 32;
+      e >= 10 && e <= 99 ? u = 40 : e >= 100 && (u = 48), c && c < u ? a(!0) : a(!1);
+    }
+  }), d = rn(an(n)), l = e / t * 100;
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ref: i,
+      className: p(ie.datasetValue, ie[d]),
+      style: {
+        "--width": l
+      },
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: ie.datasetValueBar,
+            style: {
+              "--bar-background": n
+            }
+          }
+        ),
+        /* @__PURE__ */ g(
+          X.Body,
+          {
+            tag: "span",
+            size: "200",
+            className: p(ie.datasetValuePercent, {
+              [ie.offset]: r,
+              [ie.stackable]: s
+            }),
+            children: [
+              e,
+              "%"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+const Na = "keyWrapper__g36GJ", wa = "key__EbmRa", Ia = "dot__S1lki", xa = "name__L7cad mds-typography-body-200", fe = {
+  keyWrapper: Na,
+  key: wa,
+  dot: Ia,
+  name: xa
+};
+function Ca({ keys: e, className: t }) {
+  return /* @__PURE__ */ o("div", { className: p(fe.legend, t), children: /* @__PURE__ */ o("div", { className: fe.keyWrapper, children: e.map(({ label: n, color: s }) => /* @__PURE__ */ g("div", { className: fe.key, children: [
+    /* @__PURE__ */ o("div", { className: fe.dot, style: { background: s } }),
+    /* @__PURE__ */ o("span", { className: fe.name, children: n })
+  ] }, n)) }) });
+}
+const ka = "barChart__uC3IV", La = "chart__uI9kg", $a = "dataset__13eXi", Ta = "datasetLabel__HjzY7 mds-typography-body-200", Sa = "datasetValues__HZ-9o", Ea = "datasetValuesStacked__og5RC", Ba = "datasetTotal__0BJyu", Aa = "datasetTotalText__-0bYa", Pa = "datasetTotalPercent__vCmWD", Fa = "showAllButton__bY4-d", Oa = "legend__-b7yq", z = {
+  barChart: ka,
+  chart: La,
+  dataset: $a,
+  datasetLabel: Ta,
+  datasetValues: Sa,
+  datasetValuesStacked: Ea,
+  datasetTotal: Ba,
+  datasetTotalText: Aa,
+  datasetTotalPercent: Pa,
+  showAllButton: Fa,
+  legend: Oa
+};
+function Da({
+  categories: e,
+  datasets: t,
+  // Default this to virtually unlimited
+  maxInitialDatasets: n = 999,
+  stacked: s = !1
+}) {
+  const r = In("(min-width: 560px)"), a = t.length > n, [i, d] = k(a), l = V(() => i ? t.slice(0, n) : t, [i, t, n]), c = V(() => {
+    let u = 0;
+    return t.forEach((h) => {
+      if (s) {
+        const m = ut(h.values);
+        r ? m > u && (u = m) : h.values.forEach(({ value: _ }) => {
+          _ > u && (u = _);
+        });
+      } else
+        h.values.forEach(({ value: m }) => {
+          m > u && (u = m);
+        });
+    }), u;
+  }, [t, r]);
+  return /* @__PURE__ */ g("div", { className: z.barChart, children: [
+    /* @__PURE__ */ o("div", { className: z.chart, children: l.map((u) => /* @__PURE__ */ g("div", { className: z.dataset, children: [
+      /* @__PURE__ */ o("div", { className: z.datasetLabel, children: /* @__PURE__ */ o(wn, { children: u.label }) }),
+      /* @__PURE__ */ g(
+        "div",
+        {
+          className: p(z.datasetValues, {
+            [z.datasetValuesStacked]: s
+          }),
+          children: [
+            u.values.map(({ value: h, color: m }, _) => /* @__PURE__ */ o(
+              va,
+              {
+                value: h,
+                highestValue: c,
+                color: m,
+                stackable: s
+              },
+              `dataset-${u.label}-${h}-${_}`
+            )),
+            s ? /* @__PURE__ */ o("div", { children: /* @__PURE__ */ g(X.Body, { size: "200", tag: "p", className: z.datasetTotal, children: [
+              /* @__PURE__ */ o("span", { className: z.datasetTotalText, children: "Total:" }),
+              /* @__PURE__ */ g("span", { className: z.datasetTotalPercent, children: [
+                u.total || ut(u.values),
+                "%"
+              ] })
+            ] }) }) : null
+          ]
+        }
+      )
+    ] }, u.label)) }),
+    a && (i ? /* @__PURE__ */ o(
+      ze,
+      {
+        className: z.showAllButton,
+        title: "Show all",
+        theme: {
+          brand: "neutral",
+          variant: "secondary",
+          background: "light"
+        },
+        onClick: () => d(!1)
+      }
+    ) : /* @__PURE__ */ o(
+      ze,
+      {
+        className: z.showAllButton,
+        title: "Show less",
+        theme: {
+          brand: "neutral",
+          variant: "secondary",
+          background: "light"
+        },
+        onClick: () => d(!0)
+      }
+    )),
+    e && e.length > 1 && /* @__PURE__ */ o(Ca, { className: z.legend, keys: e })
+  ] });
+}
+function ut(e) {
+  return e.reduce(
+    (n, s) => ({ value: n.value + s.value, color: "" }),
+    {
+      value: 0,
+      color: ""
+    }
+  ).value;
+}
+const za = "chartContainer__6A5KV", Ra = "multiple__rU9qF", Va = "caption__F3uLb", le = {
+  chartContainer: za,
+  multiple: Ra,
+  caption: Va
+}, Ma = ({ data: e }) => /* @__PURE__ */ o("div", { className: le.root, children: e.length > 1 ? /* @__PURE__ */ g(ce.Provider, { size: "large", children: [
+  /* @__PURE__ */ o(ce.TabList, { children: e.map((t, n) => /* @__PURE__ */ o(ce.Tab, { className: le.tab, children: t.name }, n)) }),
+  /* @__PURE__ */ o(Ha, { data: e })
+] }) : /* @__PURE__ */ o(ln, { data: e }) });
+Ma.displayName = "BarChart";
+const Ha = ({ data: e }) => {
+  const { selectedTabIndex: t, tabIds: n } = Ne(), s = n[t];
+  return /* @__PURE__ */ o(ln, { tabId: s, data: e, chartIndex: t });
+}, ln = ({ tabId: e, data: t, chartIndex: n = 0 }) => {
+  const s = t[n].name;
+  return /* @__PURE__ */ g(
+    "figure",
+    {
+      className: p(le.chartContainer, t.length > 1 && le.multiple),
+      id: s.toLowerCase(),
+      role: "tabpanel",
+      tabIndex: 0,
+      "aria-label": e ? void 0 : s,
+      "aria-labelledby": e || void 0,
+      children: [
+        /* @__PURE__ */ o(Da, { ...t[n] }),
+        /* @__PURE__ */ o("div", { className: le.chart, children: t[n].caption && /* @__PURE__ */ o("figcaption", { className: le.caption, children: t[n].caption }) })
+      ]
+    }
+  );
+}, Ga = "container__BPIK5", Wa = "label__oFZK-", pt = {
+  container: Ga,
+  label: Wa
+}, Ka = (e) => /* @__PURE__ */ o("div", { className: pt.container, children: /* @__PURE__ */ g("div", { className: pt.label, children: [
+  e.datum.label,
+  ": ",
+  /* @__PURE__ */ g("strong", { children: [
+    e.datum.value,
+    "%"
+  ] })
+] }) }), Ua = "containerWrapper__L6jJb", ja = "container__0ahUu", qa = "lockup__7l75G", Za = "value__AL9Ol", Ya = "label__oG0LT", ye = {
+  containerWrapper: Ua,
+  container: ja,
+  lockup: qa,
+  value: Za,
+  label: Ya
+}, mt = 180, Ja = (e) => {
+  const t = A(null), [n, s] = k(0);
+  return F(() => {
+    t.current && s(t.current.offsetHeight);
+  }, []), /* @__PURE__ */ g(be.g, { opacity: e.style.opacity, children: [
+    /* @__PURE__ */ o(
+      be.path,
+      {
+        fill: "none",
+        d: e.style.path,
+        stroke: e.style.linkColor,
+        strokeWidth: e.style.thickness
+      }
+    ),
+    /* @__PURE__ */ o(
+      be.g,
+      {
+        transform: e.style.textPosition,
+        textAnchor: e.style.textAnchor,
+        className: ye.containerWrapper,
+        children: /* @__PURE__ */ o(
+          "g",
+          {
+            className: ye.container,
+            style: {
+              "--container-width": `${mt}px`,
+              "--container-height": `${n}px`
+            },
+            children: /* @__PURE__ */ o(
+              "foreignObject",
+              {
+                dominantBaseline: "central",
+                width: mt,
+                height: n,
+                children: /* @__PURE__ */ g("div", { ref: t, className: ye.lockup, children: [
+                  /* @__PURE__ */ g("div", { className: ye.value, children: [
+                    e.datum.value,
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ o("div", { className: ye.label, children: e.datum.label })
+                ] })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}, Qa = "container__zNSm3", Xa = "label__lanZz", ei = "light__cA0lL", ti = "dark__tX3sL", De = {
+  container: Qa,
+  label: Xa,
+  light: ei,
+  dark: ti
+}, ni = (e) => {
+  const t = A(null), [n, s] = k(0), [r, a] = k(0);
+  F(() => {
+    t.current && (s(t.current.offsetWidth), a(t.current.offsetHeight));
+  }, []);
+  const i = rn(an(e.datum.color));
+  return /* @__PURE__ */ g(te, { children: [
+    /* @__PURE__ */ o("path", {}),
+    /* @__PURE__ */ o(be.g, { transform: e.style.transform, opacity: e.style.progress, children: /* @__PURE__ */ o(
+      "g",
+      {
+        className: De.container,
+        style: {
+          "--container-width": `${n}px`,
+          "--container-height": `${r}px`
+        },
+        children: /* @__PURE__ */ o(
+          be.foreignObject,
+          {
+            width: n,
+            height: r,
+            children: /* @__PURE__ */ o("div", { className: p(De.label, De[i]), children: /* @__PURE__ */ g("div", { ref: t, children: [
+              e.datum.value,
+              "%"
+            ] }) })
+          }
+        )
+      }
+    ) })
+  ] });
+}, oi = "multiple__wNVrv", si = "chart__e2uI3", ri = "regular__ZEuW4", ai = "small__mxvr9", ii = "xsmall__XrerL", li = "legend__t7i7f", Q = {
+  "chart-container": "chart-container__uF6xN",
+  multiple: oi,
+  chart: si,
+  regular: ri,
+  small: ai,
+  xsmall: ii,
+  legend: li,
+  "legend-dot": "legend-dot__1ramU"
+}, ci = (e) => e > 4 ? 24 : 16, di = (e) => e === "xsmall" ? { top: 10, right: 0, bottom: 10, left: 0 } : e === "small" ? { top: 10, right: 40, bottom: 20, left: 40 } : { top: 80, right: 210, bottom: 84, left: 210 }, ui = ({ data: e }) => e.length > 1 ? /* @__PURE__ */ g(ce.Provider, { size: "large", children: [
+  /* @__PURE__ */ o(ce.TabList, { children: e.map((t, n) => /* @__PURE__ */ o(ce.Tab, { className: Q.tab, children: t.groupName }, n)) }),
+  /* @__PURE__ */ o(pi, { data: e })
+] }) : /* @__PURE__ */ o(cn, { data: e });
+ui.displayName = "DonutChart";
+const pi = ({ data: e }) => {
+  const { selectedTabIndex: t, tabIds: n } = Ne(), s = n[t];
+  return /* @__PURE__ */ o(cn, { tabId: s, data: e, groupIndex: t });
+}, cn = ({
+  tabId: e,
+  data: t,
+  groupIndex: n = 0
+}) => {
+  const [s, r] = k("regular"), { ref: a } = yt({
+    onResize: ({ width: i }) => {
+      i && i < 360 ? r("xsmall") : i && i < 600 ? r("small") : r("regular");
+    }
+  });
+  return /* @__PURE__ */ g(
+    "figure",
+    {
+      className: p(
+        Q["chart-container"],
+        t.length > 1 && Q.multiple
+      ),
+      id: t[n].groupId,
+      role: "tabpanel",
+      tabIndex: 0,
+      "aria-label": e ? void 0 : t[n].groupName,
+      "aria-labelledby": e || void 0,
+      children: [
+        /* @__PURE__ */ g("div", { className: p(Q.chart, Q[s]), ref: a, children: [
+          /* @__PURE__ */ o(
+            xn,
+            {
+              data: t[n].groupData,
+              margin: di(s),
+              enableArcLabels: s !== "regular",
+              enableArcLinkLabels: s === "regular",
+              arcLabelsComponent: ni,
+              arcLinkLabelComponent: Ja,
+              arcLinkLabelsSkipAngle: ci(
+                t[n].groupData.length
+              ),
+              tooltip: Ka,
+              "aria-hidden": "true",
+              colors: { datum: "data.color" },
+              innerRadius: 0.5,
+              padAngle: 1,
+              cornerRadius: 8,
+              activeOuterRadiusOffset: 4,
+              arcLinkLabelsThickness: 1,
+              arcLinkLabelsOffset: 4,
+              arcLinkLabelsDiagonalLength: 28,
+              arcLinkLabelsStraightLength: 24,
+              arcLabelsSkipAngle: 16
+            }
+          ),
+          t[n].groupCaption && /* @__PURE__ */ o("figcaption", { children: t[n].groupCaption })
+        ] }),
+        s !== "regular" && /* @__PURE__ */ o("ul", { className: Q.legend, "aria-hidden": "true", children: t[n].groupData.map((i) => /* @__PURE__ */ g("li", { children: [
+          /* @__PURE__ */ o(
+            "span",
+            {
+              className: Q["legend-dot"],
+              style: { background: i.color }
+            }
+          ),
+          i.label
+        ] }, i.id)) })
+      ]
+    }
+  );
+};
+export {
+  ui as $,
+  zn as A,
+  He as B,
+  Po as C,
+  bt as D,
+  Ue as E,
+  j as F,
+  Ai as G,
+  Ke as H,
+  We as I,
+  Tr as J,
+  Er as K,
+  Pt as L,
+  ze as M,
+  Rr as N,
+  Pi as O,
+  Mr as P,
+  Ri as Q,
+  Bi as R,
+  Us as S,
+  Zs as T,
+  Fi as U,
+  Di as V,
+  zi as W,
+  Oi as X,
+  ce as Y,
+  Ne as Z,
+  Ma as _,
+  Dn as a,
+  Fn as b,
+  On as c,
+  qn as d,
+  Zn as e,
+  Yn as f,
+  Jn as g,
+  Ti as h,
+  Si as i,
+  Dt as j,
+  Ei as k,
+  Ot as l,
+  ve as m,
+  Cs as n,
+  Vt as o,
+  Ft as p,
+  je as q,
+  Mt as r,
+  Vs as s,
+  Fs as t,
+  Me as u,
+  gr as v,
+  qe as w,
+  Nr as x,
+  Ut as y,
+  Kt as z
+};
+//# sourceMappingURL=index-C4GBbW3N.js.map