@hirobius/design-system 0.19.1 → 0.21.0

package/dist/chunks/empty-state-DNoThgfV.js

@@ -0,0 +1,1227 @@
+'use client';
+import h from "../tokens.js";
+import * as g from "react";
+import T, { useState as Q, useEffect as Z, forwardRef as me, useId as H } from "react";
+import { jsx as s, jsxs as k, Fragment as fe } from "react/jsx-runtime";
+import { Slot as pe } from "@radix-ui/react-slot";
+import { cva as E } from "class-variance-authority";
+import { Loader2 as ge, ArrowUp as he, ArrowDown as ye, ArrowUpDown as ve } from "lucide-react";
+import { cn as y } from "../cn.js";
+import * as A from "@radix-ui/react-alert-dialog";
+import { createPortal as be } from "react-dom";
+const ee = "(prefers-reduced-motion: reduce)";
+function xe() {
+  return typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(ee).matches;
+}
+function we() {
+  const [t, e] = Q(xe);
+  return Z(() => {
+    if (typeof window > "u" || !window.matchMedia) return;
+    const r = window.matchMedia(ee), n = () => e(r.matches);
+    return r.addEventListener ? r.addEventListener("change", n) : r.addListener(n), () => {
+      r.removeEventListener ? r.removeEventListener("change", n) : r.removeListener(n);
+    };
+  }, []), t;
+}
+function Yt(t) {
+  const e = we(), r = h.motion[t];
+  return e ? { ...r, duration: 0 } : r;
+}
+const te = Symbol("hds.env.absent");
+function Se() {
+  try {
+    return process.env.NODE_ENV;
+  } catch {
+    return te;
+  }
+}
+function re() {
+  const t = Se();
+  return t === "production" || t === te;
+}
+function L() {
+  return !re();
+}
+const ke = {
+  thin: 1,
+  light: 1.5,
+  regular: 2,
+  bold: 2.5,
+  fill: 2,
+  duotone: 2
+}, Ce = /* @__PURE__ */ T.forwardRef(function({
+  icon: e,
+  size: r = "small",
+  color: n = "currentColor",
+  className: a = "",
+  style: o,
+  weight: c,
+  "aria-hidden": d = !0
+}, l) {
+  if (L() && !e)
+    return console.warn("[Icon] icon prop is missing or undefined. Provide a Lucide icon component."), null;
+  const i = h.iconSize[r] || r, u = c ? ke[c] : void 0, p = {
+    width: i,
+    height: i,
+    minWidth: i,
+    minHeight: i,
+    display: "block",
+    flexShrink: 0,
+    aspectRatio: "1 / 1",
+    ...o && typeof o == "object" ? o : void 0
+  };
+  return /* @__PURE__ */ s(
+    e,
+    {
+      ref: l,
+      size: typeof i == "number" ? i : void 0,
+      color: n,
+      className: a,
+      style: p,
+      strokeWidth: u,
+      "aria-hidden": d,
+      "data-hds-icon": ""
+    }
+  );
+}), K = /* @__PURE__ */ new Set();
+function Ae(t, e) {
+  re() || K.has(t) || (K.add(t), console.warn(`[HDS deprecation] ${e} (${t})`));
+}
+const Ne = {
+  xs: 375,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+}, ne = ["xs", "sm", "md", "lg", "xl"], Ee = /* @__PURE__ */ new Set([
+  "opacity",
+  "zIndex",
+  "fontWeight",
+  "lineHeight",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "zoom",
+  "tabSize",
+  "aspectRatio"
+]), Re = /* @__PURE__ */ new Set([0, 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 16, 20, 24, 32]), R = {
+  xs: "var(--semantic-space-scale-xs)",
+  sm: "var(--semantic-space-scale-sm)",
+  md: "var(--semantic-space-scale-md)",
+  lg: "var(--semantic-space-scale-lg)",
+  xl: "var(--semantic-space-scale-xl)"
+}, M = {
+  tight: R.sm,
+  normal: R.md,
+  inset: R.lg,
+  spacious: R.xl
+}, De = {
+  names: { ...M, medium: "var(--semantic-space-component-medium)" },
+  closed: !0
+}, Te = {
+  names: {
+    ...R,
+    tight: "var(--semantic-space-layout-tight)",
+    normal: "var(--semantic-space-layout-normal)",
+    inset: "var(--semantic-space-layout-inset)",
+    spacious: "var(--semantic-space-layout-spacious)"
+  },
+  numbers: "units"
+}, j = (t, e) => Object.prototype.hasOwnProperty.call(t, e) ? t[e] : void 0, _e = {
+  tight: "sm",
+  normal: "md",
+  inset: "lg",
+  spacious: "xl"
+}, Pe = {
+  m: ["margin"],
+  mt: ["margin-top"],
+  mr: ["margin-right"],
+  mb: ["margin-bottom"],
+  ml: ["margin-left"],
+  mx: ["margin-left", "margin-right"],
+  my: ["margin-top", "margin-bottom"],
+  p: ["padding"],
+  pt: ["padding-top"],
+  pr: ["padding-right"],
+  pb: ["padding-bottom"],
+  pl: ["padding-left"],
+  px: ["padding-left", "padding-right"],
+  py: ["padding-top", "padding-bottom"],
+  gap: ["gap"],
+  rowGap: ["row-gap"],
+  columnGap: ["column-gap"]
+};
+function $(t, e) {
+  return "closed" in e ? typeof t == "string" ? j(e.names, t) : void 0 : typeof t == "number" ? e.numbers === "raw" ? t : Re.has(t) ? `var(--primitive-space-${t})` : `calc(var(--primitive-space-1) * ${t})` : j(e.names, t) ?? t;
+}
+const Oe = {
+  color: "color",
+  bgcolor: "background-color",
+  borderColor: "border-color",
+  fill: "fill",
+  stroke: "stroke"
+}, $e = /* @__PURE__ */ new Set(["primary", "secondary", "disabled", "inverse", "accent"]), Ie = /* @__PURE__ */ new Set(["page", "raised", "overlay", "accent"]), Le = /* @__PURE__ */ new Set(["default", "subtle", "subdued", "strong", "accent"]), je = /* @__PURE__ */ new Set(["success", "warning", "error", "info"]), ze = /* @__PURE__ */ new Set(["hover", "pressed", "subtle", "content"]);
+function Me(t) {
+  if (t === "accent") return "var(--semantic-accent-rest)";
+  const e = t.indexOf(".");
+  if (e === -1) return;
+  const r = t.slice(0, e), n = t.slice(e + 1);
+  if (r === "content" && $e.has(n)) return `var(--semantic-color-content-${n})`;
+  if (r === "surface" && Ie.has(n)) return `var(--semantic-color-surface-${n})`;
+  if (r === "border" && Le.has(n)) return `var(--semantic-color-border-${n})`;
+  if (r === "feedback" && je.has(n)) return `var(--semantic-color-feedback-${n})`;
+  if (r === "accent" && ze.has(n)) return `var(--semantic-accent-${n})`;
+}
+function Be(t) {
+  return t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+}
+function W(t, e) {
+  const r = Pe[t];
+  if (r) {
+    const c = typeof e == "string" ? j(_e, e) : void 0;
+    c && Ae(
+      `box-sx-spacing-${e}`,
+      `Box sx spacing name '${e}' is deprecated (hds#206) and is removed in 1.0.0. Use '${c}': same pixels at the default density, tighter under compact (MIGRATIONS.md).`
+    );
+    const d = $(e, Te);
+    return r.map((l) => `${l}:${d}`);
+  }
+  const n = Oe[t];
+  if (n) {
+    const c = typeof e == "string" ? Me(e) ?? e : String(e);
+    return [`${n}:${c}`];
+  }
+  const a = Be(t), o = typeof e == "number" ? Ee.has(t) ? String(e) : `${e}px` : e;
+  return [`${a}:${o}`];
+}
+function Ve(t) {
+  return typeof t != "object" || t === null || Array.isArray(t) ? !1 : Object.keys(t).every((e) => ne.includes(e));
+}
+function Ge(t, e) {
+  const r = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), a = (i, u) => {
+    const p = r.get(i) ?? [];
+    p.push(...u), r.set(i, p);
+  }, o = (i, u, p) => {
+    let m = n.get(i);
+    m || (m = /* @__PURE__ */ new Map(), n.set(i, m));
+    const b = m.get(u) ?? [];
+    b.push(...p), m.set(u, b);
+  }, c = (i, u) => {
+    for (const [p, m] of Object.entries(i))
+      if (m != null) {
+        if (p.startsWith("&")) {
+          c(m, u + p.slice(1));
+          continue;
+        }
+        if (Ve(m)) {
+          for (const b of ne) {
+            const f = m[b];
+            f !== void 0 && o(Ne[b], u, W(p, f));
+          }
+          continue;
+        }
+        a(u, W(p, m));
+      }
+  };
+  c(t, "");
+  const d = [];
+  for (const [i, u] of r)
+    u.length !== 0 && d.push(`.${e}${i}{${u.join(";")}}`);
+  const l = [...n.entries()].sort((i, u) => i[0] - u[0]);
+  for (const [i, u] of l) {
+    let p = "";
+    for (const [m, b] of u)
+      b.length !== 0 && (p += `.${e}${m}{${b.join(";")}}`);
+    p && d.push(`@media (min-width:${i}px){${p}}`);
+  }
+  return d;
+}
+function z(t) {
+  return t === void 0 ? "undefined" : t === null || typeof t != "object" ? JSON.stringify(t) : Array.isArray(t) ? `[${t.map(z).join(",")}]` : `{${Object.keys(t).sort().map((r) => `${JSON.stringify(r)}:${z(t[r])}`).join(",")}}`;
+}
+function He(t) {
+  let e = 5381;
+  for (let r = 0; r < t.length; r += 1)
+    e = e * 33 ^ t.charCodeAt(r);
+  return (e >>> 0).toString(36);
+}
+function Ke(t) {
+  return `hds-sx-${He(z(t))}`;
+}
+const U = /* @__PURE__ */ new Set();
+let D = null;
+function We() {
+  if (typeof document > "u") return null;
+  if (D && D.isConnected) return D;
+  let t = document.querySelector("style[data-hds-sx]");
+  return t || (t = document.createElement("style"), t.setAttribute("data-hds-sx", ""), document.head.appendChild(t)), D = t, D;
+}
+function Xt(t) {
+  const e = Ke(t);
+  if (U.has(e)) return e;
+  const r = We();
+  if (!r) return e;
+  const n = r.sheet;
+  if (!n) return e;
+  U.add(e);
+  for (const a of Ge(t, e))
+    try {
+      n.insertRule(a, n.cssRules.length);
+    } catch {
+    }
+  return e;
+}
+const Ue = /* @__PURE__ */ E(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md transition-[colors,filter] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:inset-shadow-[0_0_0_9999px] active:inset-shadow-pressed-overlay/5 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "border border-input bg-background text-foreground hover:bg-accent hover:border-ring",
+        tertiary: "text-foreground hover:bg-accent"
+      },
+      // Semantic action color. `neutral` (default) keeps the variant's own
+      // colors; the status tones apply a token-driven tonal fill (tinted
+      // surface + matching feedback text) that clears AA in BOTH light and dark
+      // because the fg/bg feedback token pair flips together per theme. Tone
+      // beats variant by tailwind-merge class-group replacement (ADR-030): cva
+      // emits tone classes after variant classes and the output is only ever
+      // rendered through `cn`, so each tone class replaces the variant class in
+      // its group. That holds only if a tone sets EVERY group a variant sets,
+      // hover fill and hover border included; a group the tone leaves out
+      // leaks the variant's class through (the reason the hover pair is here).
+      // A consumer `className` comes last and overrides tone the same way.
+      // Drives the destructive/status actions consumers previously kept on MUI.
+      tone: {
+        neutral: "",
+        danger: "border-transparent bg-feedback-bg-danger text-feedback-danger hover:bg-feedback-bg-danger hover:border-transparent hover:brightness-95 dark:hover:brightness-110",
+        success: "border-transparent bg-feedback-bg-success text-feedback-success hover:bg-feedback-bg-success hover:border-transparent hover:brightness-95 dark:hover:brightness-110",
+        warning: "border-transparent bg-feedback-bg-warning text-feedback-warning hover:bg-feedback-bg-warning hover:border-transparent hover:brightness-95 dark:hover:brightness-110",
+        info: "border-transparent bg-feedback-bg-info text-feedback-info hover:bg-feedback-bg-info hover:border-transparent hover:brightness-95 dark:hover:brightness-110"
+      },
+      size: {
+        sm: "h-8 px-3 hds-type-caption [&_svg]:size-3.5",
+        md: "h-10 px-4 py-2 hds-type-ui [&_svg]:size-4",
+        lg: "h-12 px-6 hds-type-ui [&_svg]:size-5"
+      },
+      iconOnly: {
+        true: "p-0",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { iconOnly: !0, size: "sm", className: "w-8" },
+      { iconOnly: !0, size: "md", className: "w-10" },
+      { iconOnly: !0, size: "lg", className: "w-12" }
+    ],
+    defaultVariants: {
+      variant: "secondary",
+      tone: "neutral",
+      size: "md",
+      iconOnly: !1
+    }
+  }
+), Ye = "data-[pressed=true]:border-transparent data-[pressed=true]:bg-primary data-[pressed=true]:text-primary-foreground data-[pressed=true]:hover:bg-primary/90";
+let Y = !1, X = !1;
+const Ft = /* @__PURE__ */ g.forwardRef(
+  function({
+    className: e,
+    variant: r,
+    tone: n,
+    size: a,
+    iconOnly: o = !1,
+    asChild: c = !1,
+    label: d,
+    loading: l = !1,
+    iconLeft: i,
+    iconRight: u,
+    disabled: p,
+    children: m,
+    type: b = "button",
+    pressed: f,
+    defaultPressed: x,
+    onPressedChange: v,
+    onClick: w,
+    ...C
+  }, _) {
+    const P = p || l, S = m ?? d, N = f !== void 0 || x !== void 0 || v !== void 0, [de, le] = g.useState(x ?? !1), O = f ?? de, B = N ? {
+      "aria-pressed": O,
+      "data-pressed": O ? "true" : "false",
+      onClick: (G) => {
+        w == null || w(G), !G.defaultPrevented && (f === void 0 && le(!O), v == null || v(!O));
+      }
+    } : { onClick: w }, ue = n != null && n !== "neutral", V = y(
+      Ue({ variant: r, tone: n, size: a, iconOnly: o }),
+      N && !ue && Ye,
+      e
+    );
+    return c ? /* @__PURE__ */ s(
+      pe,
+      {
+        ref: _,
+        className: V,
+        "aria-disabled": P || void 0,
+        "aria-busy": l || void 0,
+        "data-state": l ? "loading" : void 0,
+        "data-variant": r ?? void 0,
+        "data-tone": n ?? void 0,
+        "data-size": a ?? void 0,
+        ...B,
+        ...C,
+        children: m
+      }
+    ) : (o && !i && !l && !Y && L() && (Y = !0, console.warn(
+      "[Button] iconOnly renders only iconLeft; pass iconLeft (iconRight is hidden in iconOnly mode)."
+    )), o && !d && !C["aria-label"] && !C["aria-labelledby"] && !C.title && !X && L() && (X = !0, console.warn(
+      "[Button] iconOnly hides the label text, so the button has no accessible name; pass label (or aria-label / aria-labelledby)."
+    )), /* @__PURE__ */ k(
+      "button",
+      {
+        ref: _,
+        type: b,
+        disabled: P,
+        "aria-busy": l || void 0,
+        ...o && d ? { "aria-label": d } : {},
+        "data-state": l ? "loading" : void 0,
+        "data-variant": r ?? void 0,
+        "data-tone": n ?? void 0,
+        "data-size": a ?? void 0,
+        className: V,
+        ...B,
+        ...C,
+        children: [
+          l ? /* @__PURE__ */ s(ge, { className: "animate-spin", "aria-hidden": "true" }) : i,
+          !o && S,
+          !l && !o && u
+        ]
+      }
+    ));
+  }
+), Xe = /* @__PURE__ */ E("m-0 min-w-0", {
+  variants: {
+    variant: {
+      display: "hds-type-display",
+      title: "hds-type-title",
+      body: "hds-type-body max-w-[var(--semantic-typography-body-max-width)]",
+      ui: "hds-type-ui max-w-[var(--semantic-typography-ui-max-width)]",
+      caption: "hds-type-caption",
+      mono: "hds-type-mono max-w-[var(--semantic-typography-mono-max-width)]",
+      // Deprecated aliases, each the class string of the role it points at.
+      heading1: "hds-type-title",
+      heading2: "hds-type-title",
+      heading3: "hds-type-title",
+      technical: "hds-type-mono max-w-[var(--semantic-typography-mono-max-width)]",
+      eyebrow: "hds-type-caption",
+      badge: "hds-type-caption",
+      docLede: "hds-type-body max-w-[var(--semantic-typography-body-max-width)]",
+      docBody: "hds-type-body max-w-[var(--semantic-typography-body-max-width)]",
+      docSmall: "hds-type-ui max-w-[var(--semantic-typography-ui-max-width)]",
+      docCode: "hds-type-mono max-w-[var(--semantic-typography-mono-max-width)]"
+    }
+  }
+}), Fe = {
+  display: "h1",
+  title: "h2",
+  body: "p",
+  ui: "p",
+  caption: "p",
+  mono: "span",
+  heading1: "h1",
+  heading2: "h2",
+  heading3: "h3",
+  technical: "p",
+  eyebrow: "p",
+  badge: "p",
+  docLede: "p",
+  docBody: "p",
+  docSmall: "p",
+  docCode: "span"
+}, I = /* @__PURE__ */ me(function({ children: e, variant: r, as: n = Fe[r], className: a, style: o, ...c }, d) {
+  return /* @__PURE__ */ s(n, { ref: d, className: y(Xe({ variant: r }), a), style: o, ...c, children: e });
+}), qe = {
+  component: "var(--semantic-space-surface-padding)",
+  item: "16px",
+  px16: "16px",
+  px24: "24px",
+  none: "0"
+};
+function Je(t) {
+  return qe[t] ?? "0";
+}
+const Qe = {
+  names: { ...h.space, ...M },
+  numbers: "raw"
+}, Ze = /* @__PURE__ */ E("flex flex-col rounded-lg bg-card text-card-foreground", {
+  variants: {
+    variant: {
+      default: "border border-transparent",
+      // 1px transparent preserves the layout box
+      accent: "border-2 border-[var(--semantic-color-border-accent)]"
+    },
+    tone: {
+      neutral: "",
+      danger: "border border-[var(--semantic-color-feedback-error)]",
+      success: "border border-[var(--semantic-color-feedback-success)]",
+      warning: "border border-[var(--semantic-color-feedback-warning)]",
+      info: "border border-[var(--semantic-color-feedback-info)]"
+    },
+    bordered: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      tone: "neutral",
+      bordered: !0,
+      className: "border-[var(--semantic-color-border-default)]"
+    }
+  ],
+  defaultVariants: { variant: "default", tone: "neutral", bordered: !1 }
+}), et = "cursor-pointer hds-focus data-[selected=true]:ring-2 data-[selected=true]:ring-inset data-[selected=true]:ring-ring", tt = 'a[href],button,input,select,textarea,label,summary,[contenteditable="true"],[tabindex],[role="button"],[role="link"],[role="checkbox"],[role="switch"],[role="option"],[role="menuitem"],[role="tab"]';
+function rt(t) {
+  var r, n;
+  const e = (n = (r = t.target).closest) == null ? void 0 : n.call(r, tt);
+  return !!e && e !== t.currentTarget && t.currentTarget.contains(e);
+}
+const nt = /* @__PURE__ */ g.forwardRef(function({
+  className: e,
+  padding: r = "component",
+  gap: n = "tight",
+  noPadding: a = !1,
+  as: o,
+  style: c,
+  variant: d = "default",
+  tone: l = "neutral",
+  bordered: i = !1,
+  selectable: u = !1,
+  selected: p = !1,
+  onSelectedChange: m,
+  children: b,
+  ...f
+}, x) {
+  const v = o ?? "div", w = a ? "none" : r, C = Je(w), _ = w === "none" ? "0" : $(n, Qe), P = u ? {
+    role: "checkbox",
+    "aria-checked": p,
+    tabIndex: 0,
+    "data-selected": p ? "true" : "false",
+    onClick: (S) => {
+      var N;
+      (N = f.onClick) == null || N.call(f, S), !S.defaultPrevented && !rt(S) && (m == null || m(!p));
+    },
+    onKeyDown: (S) => {
+      var N;
+      (N = f.onKeyDown) == null || N.call(f, S), !(S.defaultPrevented || S.key !== " " || S.target !== S.currentTarget) && (S.preventDefault(), m == null || m(!p));
+    }
+  } : {};
+  return /* @__PURE__ */ s(
+    v,
+    {
+      ref: x,
+      "data-padding": w,
+      "data-variant": d,
+      "data-tone": l,
+      "data-bordered": i ? "true" : "false",
+      className: y(
+        Ze({ variant: d, tone: l, bordered: i }),
+        u && et,
+        e
+      ),
+      style: {
+        padding: C,
+        gap: _,
+        ...c
+      },
+      ...f,
+      ...P,
+      children: b
+    }
+  );
+}), at = /* @__PURE__ */ g.forwardRef(
+  function({ className: e, metadata: r, children: n, ...a }, o) {
+    return r !== void 0 ? /* @__PURE__ */ k("div", { ref: o, className: y("flex flex-col gap-3 p-6", e), ...a, children: [
+      /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-2", children: r }),
+      /* @__PURE__ */ s("div", { className: "flex flex-col space-y-1.5 min-w-0", children: n })
+    ] }) : /* @__PURE__ */ s("div", { ref: o, className: y("flex flex-col space-y-1.5 p-6", e), ...a, children: n });
+  }
+), ot = /* @__PURE__ */ g.forwardRef(function({ className: e, children: r, ...n }, a) {
+  return /* @__PURE__ */ s(I, { ref: a, as: "h3", variant: "title", className: e, ...n, children: r });
+}), st = /* @__PURE__ */ g.forwardRef(function({ className: e, children: r, ...n }, a) {
+  return /* @__PURE__ */ s(I, { ref: a, variant: "caption", className: y("text-muted-foreground", e), ...n, children: r });
+}), it = /* @__PURE__ */ g.forwardRef(function({ className: e, ...r }, n) {
+  return /* @__PURE__ */ s("div", { ref: n, className: y("p-6 pt-0", e), ...r });
+}), ct = /* @__PURE__ */ g.forwardRef(function({ className: e, ...r }, n) {
+  return /* @__PURE__ */ s("div", { ref: n, className: y("flex items-center p-6 pt-0", e), ...r });
+}), dt = {
+  neutral: "var(--semantic-color-content-accent)",
+  info: "var(--semantic-color-feedback-info)",
+  success: "var(--semantic-color-feedback-success)",
+  warning: "var(--semantic-color-feedback-warning)",
+  danger: "var(--semantic-color-feedback-error)"
+}, lt = /* @__PURE__ */ g.forwardRef(
+  function({ className: e, value: r, max: n = 100, label: a, tone: o = "neutral", style: c, ...d }, l) {
+    const i = Math.max(0, Math.min(r, n)), u = n > 0 ? i / n * 100 : 0;
+    return /* @__PURE__ */ k(
+      "div",
+      {
+        ref: l,
+        className: y("px-6 pb-2", e),
+        style: c,
+        ...d,
+        children: [
+          /* @__PURE__ */ s(
+            "div",
+            {
+              role: "progressbar",
+              "aria-valuemin": 0,
+              "aria-valuemax": n,
+              "aria-valuenow": i,
+              "aria-label": typeof a == "string" ? a : "Progress",
+              style: {
+                height: "4px",
+                background: "var(--semantic-color-border-default)",
+                borderRadius: h.borderRadius[2],
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ s(
+                "div",
+                {
+                  style: {
+                    height: "100%",
+                    width: "100%",
+                    transform: `scaleX(${u / 100})`,
+                    transformOrigin: "left",
+                    background: dt[o],
+                    borderRadius: h.borderRadius[2],
+                    transition: `transform ${h.motion.expressive.duration}s ease-out`
+                  }
+                }
+              )
+            }
+          ),
+          a !== void 0 && /* @__PURE__ */ s(
+            "p",
+            {
+              style: {
+                ...h.typeStyles.caption,
+                margin: "6px 0 0",
+                color: "var(--semantic-color-content-secondary)"
+              },
+              children: a
+            }
+          )
+        ]
+      }
+    );
+  }
+), ut = {
+  neutral: "var(--semantic-color-content-primary)",
+  info: "var(--semantic-color-feedback-info)",
+  success: "var(--semantic-color-feedback-success)",
+  warning: "var(--semantic-color-feedback-warning)",
+  danger: "var(--semantic-color-feedback-error)"
+}, mt = /* @__PURE__ */ g.forwardRef(
+  function({ className: e, label: r, value: n, sub: a, tone: o = "neutral", style: c, ...d }, l) {
+    return /* @__PURE__ */ k("div", { ref: l, className: y("flex flex-col px-6", e), style: c, ...d, children: [
+      /* @__PURE__ */ s(
+        "p",
+        {
+          style: {
+            ...h.typeStyles.caption,
+            margin: "0 0 6px",
+            color: "var(--semantic-color-content-secondary)"
+          },
+          children: r
+        }
+      ),
+      /* @__PURE__ */ s(
+        "p",
+        {
+          style: {
+            ...h.typeStyles.title,
+            margin: 0,
+            color: ut[o]
+          },
+          children: n
+        }
+      ),
+      a !== void 0 && /* @__PURE__ */ s(
+        "p",
+        {
+          style: {
+            ...h.typeStyles.caption,
+            margin: "4px 0 0",
+            color: "var(--semantic-color-content-secondary)"
+          },
+          children: a
+        }
+      )
+    ] });
+  }
+), qt = /* @__PURE__ */ Object.assign(nt, {
+  Header: at,
+  Title: ot,
+  Description: st,
+  Body: it,
+  Footer: ct,
+  Progress: lt,
+  Metric: mt,
+  // Set here, not by a later `Card.displayName = …` write: a top-level
+  // property write is a side effect that keeps the module alive (hds#363).
+  displayName: "Card"
+}), ft = {
+  content: "var(--semantic-layout-width-content)",
+  max: "var(--semantic-layout-width-max)"
+};
+function Jt({
+  children: t,
+  maxWidth: e = "max",
+  padding: r = "var(--semantic-space-surface-padding)",
+  style: n,
+  className: a
+}) {
+  const o = {
+    marginLeft: "auto",
+    marginRight: "auto",
+    maxWidth: ft[e],
+    ...n
+  };
+  return /* @__PURE__ */ s("div", { className: a, style: o, children: t });
+}
+const ae = /* @__PURE__ */ g.createContext({}), oe = /* @__PURE__ */ g.createContext(null);
+function pt() {
+  return g.useContext(oe);
+}
+function Qt() {
+  return g.useContext(ae);
+}
+function Zt({
+  theme: t,
+  density: e,
+  brand: r,
+  fontFamily: n,
+  fontFamilyMono: a,
+  as: o = "div",
+  className: c,
+  style: d,
+  children: l
+}) {
+  const i = g.useMemo(
+    () => ({ theme: t, density: e, brand: r, fontFamily: n, fontFamilyMono: a }),
+    [t, e, r, n, a]
+  ), [u, p] = g.useState(null), m = {};
+  return n && (m["--hds-font-family"] = n), a && (m["--hds-font-family-mono"] = a), /* @__PURE__ */ s(ae.Provider, { value: i, children: /* @__PURE__ */ s(oe.Provider, { value: u, children: /* @__PURE__ */ s(
+    o,
+    {
+      ref: p,
+      "data-hds": "",
+      "data-theme": t === "dark" ? "dark" : void 0,
+      "data-density": e === "compact" ? "compact" : void 0,
+      "data-brand": r,
+      "data-tenant": r,
+      className: c,
+      style: { ...m, ...d },
+      children: l
+    }
+  ) }) });
+}
+const gt = typeof document > "u" ? g.useEffect : g.useLayoutEffect;
+function F(t) {
+  return t === document.documentElement || t === document.body;
+}
+function ht(t) {
+  const e = pt(), r = g.useRef(null), [n, a] = g.useState(void 0), o = t === void 0 && e === null;
+  gt(() => {
+    var l;
+    if (!o) return;
+    const d = ((l = r.current) == null ? void 0 : l.closest("[data-hds]")) ?? null;
+    a(d && !F(d) ? d : null);
+  }, [o]);
+  const c = o ? /* @__PURE__ */ s("span", { ref: r, hidden: !0, "aria-hidden": "true", "data-hds-portal-anchor": "" }) : null;
+  return t !== void 0 ? { ready: !0, container: t ?? void 0, anchor: c } : e ? { ready: !0, container: F(e) ? void 0 : e, anchor: c } : n === void 0 ? { ready: !1, container: void 0, anchor: c } : { ready: !0, container: n ?? void 0, anchor: c };
+}
+function se(t) {
+  function e(r) {
+    const { ready: n, container: a, anchor: o } = ht(
+      r.container
+    );
+    return /* @__PURE__ */ k(fe, { children: [
+      o,
+      n && typeof document < "u" ? /* @__PURE__ */ s(t, { ...r, container: a }) : null
+    ] });
+  }
+  return e.displayName = `HdsPortal(${t.displayName ?? "Portal"})`, e;
+}
+const er = /* @__PURE__ */ se(function({
+  container: e,
+  children: r
+}) {
+  return be(r, e ?? document.body);
+}), yt = /* @__PURE__ */ T.forwardRef(function({ children: e, colSpan: r, colOffset: n, style: a, className: o, as: c = "div" }, d) {
+  const l = {
+    ...r !== void 0 && { gridColumn: `span min(var(--current-cols, 12), ${r})` },
+    ...n !== void 0 && { gridColumnStart: n },
+    minWidth: 0,
+    ...a
+  };
+  return /* @__PURE__ */ s(c, { ref: d, className: o, style: l, "data-hds-grid-item": "true", children: e });
+}), vt = {
+  start: "start",
+  center: "center",
+  end: "end",
+  stretch: "stretch"
+}, q = "280px";
+function bt(t, e) {
+  return t <= h.breakpoints.sm ? Math.min(4, e) : t <= h.breakpoints.lg ? Math.min(8, e) : e;
+}
+const xt = /* @__PURE__ */ T.forwardRef(function({
+  children: e,
+  layout: r = "fixed",
+  minItemWidth: n,
+  columns: a = 12,
+  gap: o = "inset",
+  subgrid: c = !1,
+  style: d,
+  className: l,
+  align: i = "start",
+  as: u = "div",
+  ...p
+}, m) {
+  const b = r === "fixed" && !c, [f, x] = Q(a);
+  Z(() => {
+    if (!b || typeof window > "u") return;
+    const C = () => {
+      x(bt(window.innerWidth, a));
+    };
+    return C(), window.addEventListener("resize", C), () => {
+      window.removeEventListener("resize", C);
+    };
+  }, [a, b]);
+  let v;
+  c ? v = "subgrid" : r === "auto-fit" && n === void 0 ? v = `repeat(auto-fit, minmax(${q}, 1fr))` : r === "auto-fit" || r === "auto-fill" ? v = `repeat(${r}, minmax(min(${n ?? q}, 100%), 1fr))` : v = `repeat(${f}, minmax(0, 1fr))`;
+  const w = {
+    display: "grid",
+    alignItems: vt[i],
+    ...v !== void 0 && { gridTemplateColumns: v },
+    ...b && {
+      "--current-cols": String(f)
+    },
+    gap: $(o, De),
+    ...d
+  };
+  return /* @__PURE__ */ s(
+    u,
+    {
+      ...p,
+      ref: m,
+      className: l,
+      style: w,
+      "data-hds-grid": "true",
+      "data-hds-component": "Grid",
+      "data-hds-metrics": `gap:${o}`,
+      children: e
+    }
+  );
+}), tr = /* @__PURE__ */ Object.assign(xt, { Item: yt }), wt = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+}, St = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  "space-between": "space-between"
+}, kt = {
+  names: {
+    ...h.space,
+    ...M,
+    gap: R.xs,
+    medium: "var(--semantic-space-component-medium)",
+    hairline: "var(--semantic-space-subgrid-hairline)",
+    xs: "var(--semantic-space-subgrid-xs)",
+    stack: "var(--semantic-space-section-stack)"
+  },
+  numbers: "raw"
+}, rr = /* @__PURE__ */ T.forwardRef(function({
+  children: e,
+  direction: r = "column",
+  gap: n = "tight",
+  align: a,
+  justify: o,
+  wrap: c,
+  className: d,
+  style: l,
+  as: i = "div"
+}, u) {
+  return /* @__PURE__ */ s(
+    i,
+    {
+      ref: u,
+      className: d,
+      "data-hds-component": "Stack",
+      "data-hds-metrics": `gap:${n}`,
+      style: {
+        display: "flex",
+        flexDirection: r,
+        gap: $(n, kt),
+        alignItems: a ? wt[a] : r === "row" ? "stretch" : void 0,
+        justifyContent: o ? St[o] : void 0,
+        flexWrap: c,
+        ...l
+      },
+      children: e
+    }
+  );
+}), Ct = /* @__PURE__ */ E(
+  "box-border border-none rounded-lg bg-[color:var(--semantic-color-surface-raised)] text-[color:var(--semantic-color-content-primary)]",
+  {
+    variants: {
+      padding: {
+        component: "p-[var(--semantic-space-surface-padding)]",
+        // spacing-ok: 16px/24px are the surface's fixed inset contract (not layout spacing); kept as the legacy values these named options have always resolved to
+        item: "p-[16px]",
+        px16: "p-[16px]",
+        px24: "p-[24px]",
+        none: "p-0"
+      },
+      shadow: {
+        // ADR-007: bind to the elevation-role token (raised) instead of a magic
+        // RGBA value. Resolves to --semantic-shadow-subtle; theme-aware.
+        true: "shadow-[var(--semantic-elevation-raised-shadow)]",
+        false: ""
+      }
+    },
+    defaultVariants: { padding: "component", shadow: !1 }
+  }
+), At = /* @__PURE__ */ T.forwardRef(
+  function({
+    children: e,
+    padding: r = "component",
+    shadow: n = !1,
+    overflow: a,
+    theme: o,
+    style: c,
+    className: d,
+    as: l = "div",
+    ...i
+  }, u) {
+    const p = a !== void 0 || c ? { ...a !== void 0 && { overflow: a }, ...c } : void 0;
+    return /* @__PURE__ */ s(
+      l,
+      {
+        ref: u,
+        "data-theme": o,
+        className: y(Ct({ padding: r, shadow: n }), d),
+        style: p,
+        "data-hds-surface": "true",
+        "data-hds-component": "Surface",
+        "data-hds-metrics": `padding:${r}`,
+        ...i,
+        children: e
+      }
+    );
+  }
+), J = /* @__PURE__ */ E(
+  "flex items-center bg-[var(--semantic-color-surface-overlay)] px-[var(--semantic-space-surface-padding)]",
+  {
+    variants: {
+      align: {
+        left: "justify-start text-left",
+        center: "justify-center text-center",
+        right: "justify-end text-right"
+      },
+      density: {
+        follow: "min-h-[var(--semantic-size-row-comfortable)] py-[var(--semantic-space-component-medium)] [[data-density=compact]_&]:min-h-[var(--semantic-size-row-compact)] [[data-density=compact]_&]:py-[var(--semantic-space-scale-xs)]",
+        comfortable: "min-h-[var(--semantic-size-row-comfortable)] py-[var(--semantic-space-component-medium)]",
+        compact: "min-h-[var(--semantic-size-row-compact)] py-[var(--semantic-space-scale-xs)]"
+      },
+      sticky: {
+        true: "sticky top-0 z-[var(--semantic-zIndex-sticky)]",
+        false: ""
+      }
+    },
+    defaultVariants: { align: "left", sticky: !1 }
+  }
+), Nt = /* @__PURE__ */ E(
+  "flex w-full cursor-pointer items-center gap-[var(--semantic-space-scale-xs)] border-0 bg-transparent p-0 text-inherit [font:inherit] transition-colors duration-[var(--hds-motion-productive-duration)] ease-[var(--hds-motion-productive-easing)] hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    variants: {
+      align: {
+        left: "justify-start",
+        center: "justify-center",
+        right: "justify-end"
+      }
+    },
+    defaultVariants: { align: "left" }
+  }
+), Et = /* @__PURE__ */ E(
+  "flex items-start px-[var(--semantic-space-surface-padding)]",
+  {
+    variants: {
+      align: {
+        left: "justify-start text-left",
+        center: "justify-center text-center",
+        right: "justify-end text-right"
+      },
+      density: {
+        follow: "min-h-[var(--semantic-size-row-comfortable)] py-[var(--semantic-space-component-medium)] [[data-density=compact]_&]:min-h-[var(--semantic-size-row-compact)] [[data-density=compact]_&]:py-[var(--semantic-space-scale-xs)]",
+        comfortable: "min-h-[var(--semantic-size-row-comfortable)] py-[var(--semantic-space-component-medium)]",
+        compact: "min-h-[var(--semantic-size-row-compact)] py-[var(--semantic-space-scale-xs)]"
+      },
+      divider: {
+        true: "[border-bottom:var(--semantic-borderWidth-default)_solid_var(--semantic-color-border-subdued)]",
+        false: ""
+      }
+    },
+    defaultVariants: { align: "left", divider: !0 }
+  }
+), Rt = {
+  label: h.typeStyles.ui,
+  value: h.typeStyles.ui,
+  description: {
+    ...h.typeStyles.caption,
+    color: "var(--semantic-color-content-secondary)"
+  },
+  token: h.typeStyles.mono,
+  code: h.typeStyles.mono,
+  custom: h.typeStyles.ui,
+  icon: h.typeStyles.caption,
+  badge: h.typeStyles.caption,
+  action: h.typeStyles.ui
+};
+function nr({
+  columns: t,
+  rows: e,
+  caption: r,
+  captionAction: n,
+  description: a,
+  labelledBy: o,
+  minWidth: c,
+  density: d,
+  flush: l = !0,
+  stickyHeader: i = !1
+}) {
+  const u = H(), p = H(), m = !!r, b = m ? u : o;
+  return /* @__PURE__ */ k("div", { className: "min-w-0 max-w-full", children: [
+    r || a ? /* @__PURE__ */ k("div", { children: [
+      r ? /* @__PURE__ */ k("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            id: m ? u : void 0,
+            className: "m-0 text-primary",
+            style: h.typeStyles.ui,
+            children: r
+          }
+        ),
+        n ?? null
+      ] }) : null,
+      a ? /* @__PURE__ */ s("div", { className: "text-secondary", style: h.typeStyles.ui, children: a }) : null
+    ] }) : null,
+    /* @__PURE__ */ s(
+      At,
+      {
+        padding: l ? "none" : "component",
+        id: p,
+        role: "region",
+        tabIndex: 0,
+        "aria-labelledby": m ? u : o ? `${o} ${p}` : void 0,
+        "aria-label": m ? void 0 : "Scrollable table content",
+        style: { overflowX: "auto", overflowY: "visible" },
+        children: /* @__PURE__ */ k(
+          "div",
+          {
+            role: "table",
+            "aria-labelledby": b,
+            className: "grid",
+            style: {
+              minWidth: c,
+              gridTemplateColumns: t.map((f) => f.width ?? "minmax(0, 1fr)").join(" ")
+            },
+            children: [
+              /* @__PURE__ */ s("div", { role: "row", style: { display: "contents" }, children: t.map((f) => {
+                if (!f.sortable)
+                  return /* @__PURE__ */ s(
+                    "div",
+                    {
+                      role: "columnheader",
+                      className: y(
+                        J({
+                          align: f.align ?? "left",
+                          density: d ?? "follow",
+                          sticky: !!i
+                        })
+                      ),
+                      style: h.typeStyles.caption,
+                      children: f.label
+                    },
+                    f.key
+                  );
+                const x = f.sortDirection ?? "none", v = x === "ascending" ? he : x === "descending" ? ye : ve;
+                return /* @__PURE__ */ s(
+                  "div",
+                  {
+                    role: "columnheader",
+                    "aria-sort": x,
+                    className: y(
+                      J({
+                        align: f.align ?? "left",
+                        density: d ?? "follow",
+                        sticky: !!i
+                      })
+                    ),
+                    style: h.typeStyles.caption,
+                    children: /* @__PURE__ */ k(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: f.onSort,
+                        className: y(Nt({ align: f.align ?? "left" })),
+                        children: [
+                          f.label,
+                          /* @__PURE__ */ s(Ce, { icon: v, size: "small", "aria-hidden": !0 })
+                        ]
+                      }
+                    )
+                  },
+                  f.key
+                );
+              }) }),
+              e.map((f, x) => /* @__PURE__ */ s("div", { role: "row", style: { display: "contents" }, children: f.cells.map((v, w) => /* @__PURE__ */ s(
+                "div",
+                {
+                  role: "cell",
+                  className: y(
+                    Et({
+                      align: v.align ?? "left",
+                      density: d ?? "follow",
+                      divider: x < e.length - 1
+                    })
+                  ),
+                  style: Rt[v.slot],
+                  children: v.content
+                },
+                `${f.key ?? x}-${w}`
+              )) }, f.key ?? x))
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function Dt(t) {
+  return /* @__PURE__ */ s(A.Root, { ...t });
+}
+const Tt = A.Trigger, ie = /* @__PURE__ */ se(A.Portal), _t = A.Action, Pt = A.Cancel, ce = /* @__PURE__ */ g.forwardRef(function({ className: e, ...r }, n) {
+  return /* @__PURE__ */ s(
+    A.Overlay,
+    {
+      ref: n,
+      className: y("fixed inset-0 z-50 bg-scrim/60 backdrop-blur-sm", e),
+      ...r
+    }
+  );
+}), Ot = /* @__PURE__ */ g.forwardRef(function({ className: e, container: r, ...n }, a) {
+  return /* @__PURE__ */ k(ie, { container: r, children: [
+    /* @__PURE__ */ s(ce, {}),
+    /* @__PURE__ */ s(
+      A.Content,
+      {
+        ref: a,
+        className: y(
+          // 16px of page margin each side, so the panel never sits flush to a 390px viewport (hds#522)
+          "fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2*var(--semantic-space-scale-sm))] max-h-[calc(100dvh-2*var(--semantic-space-scale-sm))] max-w-lg overflow-y-auto -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-overlay hds-focus",
+          e
+        ),
+        ...n
+      }
+    )
+  ] });
+}), $t = /* @__PURE__ */ g.forwardRef(function({ className: e, ...r }, n) {
+  return /* @__PURE__ */ s("div", { ref: n, className: y("flex flex-col space-y-1.5 text-left", e), ...r });
+}), It = /* @__PURE__ */ g.forwardRef(function({ className: e, ...r }, n) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: n,
+      className: y("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2", e),
+      ...r
+    }
+  );
+}), Lt = /* @__PURE__ */ g.forwardRef(function({ className: e, children: r, ...n }, a) {
+  return /* @__PURE__ */ s(A.Title, { asChild: !0, children: /* @__PURE__ */ s(I, { ref: a, as: "h2", variant: "title", className: e, ...n, children: r }) });
+}), jt = /* @__PURE__ */ g.forwardRef(function({ className: e, children: r, ...n }, a) {
+  return /* @__PURE__ */ s(A.Description, { asChild: !0, children: /* @__PURE__ */ s(
+    I,
+    {
+      ref: a,
+      as: "p",
+      variant: "caption",
+      className: y("text-muted-foreground", e),
+      ...n,
+      children: r
+    }
+  ) });
+}), ar = /* @__PURE__ */ Object.assign(Dt, {
+  Trigger: Tt,
+  Portal: ie,
+  Overlay: ce,
+  Content: Ot,
+  Header: $t,
+  Footer: It,
+  Title: Lt,
+  Description: jt,
+  Action: _t,
+  Cancel: Pt,
+  // Set here, not by a later `AlertDialog.displayName = …` write: a top-level
+  // property write is a side effect that keeps the module alive.
+  displayName: "AlertDialog"
+}), or = /* @__PURE__ */ g.forwardRef(
+  function({ title: e, description: r, className: n }, a) {
+    return /* @__PURE__ */ k(
+      "div",
+      {
+        ref: a,
+        "data-hds-component": "EmptyState",
+        className: y("flex flex-col gap-1 hds-type-ui italic text-muted-foreground", n),
+        children: [
+          /* @__PURE__ */ s("p", { className: "m-0", children: e }),
+          r && /* @__PURE__ */ s("p", { className: "m-0 not-italic hds-type-caption", children: r })
+        ]
+      }
+    );
+  }
+);
+export {
+  ar as A,
+  Ft as B,
+  Jt as C,
+  or as E,
+  tr as G,
+  Zt as H,
+  Ce as I,
+  De as L,
+  rr as S,
+  I as T,
+  At as a,
+  qt as b,
+  nr as c,
+  Xt as d,
+  it as e,
+  st as f,
+  ct as g,
+  er as h,
+  re as i,
+  at as j,
+  mt as k,
+  lt as l,
+  ot as m,
+  Qt as n,
+  $ as r,
+  Yt as u,
+  se as w
+};