@hirobius/design-system 0.19.0 → 0.20.0

package/dist/patterns.js

@@ -1,614 +1,873 @@
 'use client';
-import { S as I, C as u, a as _, b as V, G as E, T as S, A as p, B as w, E as P, c as z } from "./chunks/activity-feed-DIMeUJpW.js";
-import { d as he, e as pe, f as ue, g as me, h as ge, i as fe, j as ve, D as ye, k as be, F as we, L as xe, N as ke, O as Se, P as Ce, R as Te, l as Ne, m as Ie, n as Ve, o as Ae, p as Me, q as Re, r as $e, s as Fe, t as je, u as De, v as He, w as Le, x as _e, y as Ee, z as Pe, H as ze, I as Be, J as We, K as Oe, M as Ge, Q as Ue, U as Xe, V as Ye, W as qe, X as Ke, Y as Je, Z as Qe, _ as Ze } from "./chunks/activity-feed-DIMeUJpW.js";
-import { F as aa, b as ta, a as ra, u as ia } from "./chunks/form-BvNNnJ0t.js";
-import { jsxs as o, Fragment as A, jsx as e } from "react/jsx-runtime";
-import * as d from "react";
-import { useRef as x, useEffect as N } from "react";
-import v from "./tokens.js";
-import { cn as M } from "./cn.js";
-const C = 280, B = 380, k = 24, R = 3.5, W = `
-  .hds-scr-outer {
-    position: relative;
-    overflow: hidden;
-    width: 100%; /* audit-ok: percentage fill in CSS template */
-    --card-width: ${C}px;
-    --card-height: ${B}px;
-    --card-gap: ${k}px;
-    --visible-count: ${R};
-  }
-
-  /* Vertical scroll container — maps vertical scrolling to a horizontal strip */
-  .hds-scr-yscroll {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%; /* audit-ok: percentage fill in CSS template */
-    height: 100%; /* audit-ok: percentage fill in CSS template */
-    overflow-y: scroll;
-    overflow-x: hidden;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-  .hds-scr-yscroll::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Tall spacer that gives the vertical scroll room to travel */
-  .hds-scr-spacer {
-    /* Total scroll travel = card-width × card-count so each card gets a full
-       width of scroll travel. The visible window is added back so the last
-       card reaches the entry position. */
-    height: var(--hds-scr-spacer-height, 4000px);
-    width: 100%; /* audit-ok: percentage fill in CSS template */
-  }
-
-  /* Sticky strip — stays pinned in view while the vertical container scrolls */
-  .hds-scr-strip {
-    position: sticky;
-    top: 0;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    height: calc(var(--card-height) + 48px);
-    display: flex;
-    align-items: center;
-  }
-  .hds-scr-strip::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Horizontal track */
-  .hds-scr-track {
-    display: flex;
-    align-items: center;
-    padding: 0 ${k}px;
-    gap: var(--card-gap);
-    /* Wide enough to hold all cards plus padding */
-    min-width: max-content;
-  }
-
-  /* Individual card wrapper — controls position in the flow */
-  .hds-scr-card {
-    flex: 0 0 var(--card-width);
-    height: var(--card-height);
-    position: relative;
-    cursor: pointer;
-    transition:
-      transform 0.25s ease,
-      width 0.25s ease;
-    z-index: 0;
-  }
-
-  /* Card inner surface */
-  .hds-scr-card-inner {
-    width: 100%; /* audit-ok: percentage fill in CSS template */
-    height: 100%; /* audit-ok: percentage fill in CSS template */
-    border-radius: ${v.borderRadius[8]};
-    background: var(--semantic-color-surface-raised);
-    border: 1px solid var(--semantic-color-border-default);
-    box-shadow: var(--semantic-shadow-subtle);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    text-decoration: none;
-    color: inherit;
-    transition:
-      transform 0.25s ease,
-      box-shadow 0.25s ease;
-  }
-
-  /* Hover: widen card 25% and lift it */
-  .hds-scr-card:hover {
-    z-index: 10;
-    transform: translate(-10%, -4.5%);
-    flex-basis: calc(var(--card-width) * 1.25);
-    width: calc(var(--card-width) * 1.25);
-  }
-  .hds-scr-card:hover .hds-scr-card-inner {
-    box-shadow: var(--semantic-shadow-floating);
+import { F as ut, b as mt, a as ht, u as ft } from "./chunks/form-COP3vK9_.js";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import m from "./tokens.js";
+import { C as he, h as fe, S as h, G as ae, u as ne, a as L, I as $, T as P, B as V, b as re, A as S, E as ve, c as ge } from "./chunks/empty-state-BBqhCx0S.js";
+import * as y from "react";
+import ye, { useState as I, useId as be, useRef as W } from "react";
+import { AnimatePresence as Z, motion as ie } from "motion/react";
+import { cva as x } from "class-variance-authority";
+import { Check as O, Copy as X, ChevronDown as xe } from "lucide-react";
+import { cn as b } from "./cn.js";
+const we = {
+  default: { top: m.space.px48, bottom: m.space.px64 },
+  compact: { top: m.space.px24, bottom: m.space.px32 },
+  none: { top: "0", bottom: "0" }
+};
+function qe({
+  children: r,
+  maxWidth: t = "max",
+  paddingY: i = "default",
+  style: n,
+  className: e
+}) {
+  const s = we[i];
+  return /* @__PURE__ */ a(he, { maxWidth: t, className: e, children: /* @__PURE__ */ a(
+    "div",
+    {
+      "data-hds-component": "Page",
+      "data-hds-metrics": `paddingY:${i}`,
+      style: { paddingTop: s.top, paddingBottom: s.bottom, ...n },
+      children: r
+    }
+  ) });
+}
+const ke = {
+  background: "var(--semantic-color-surface-accent)",
+  border: "none",
+  borderRadius: m.borderRadius.full,
+  // content.onAccent flips with the accent fill: white on the dark light-mode
+  // fill, a dark neutral on the light dark-mode fill (fixed white read ~1.1:1).
+  color: m.color.content.onAccent,
+  display: "inline-flex",
+  pointerEvents: "none",
+  paddingBlock: m.space.px6,
+  paddingInline: m.space.px16
+}, Se = {
+  ...m.typeStyles.ui,
+  userSelect: "none",
+  whiteSpace: "nowrap"
+};
+function G({ label: r }) {
+  const t = ne("productive");
+  return /* @__PURE__ */ a(
+    ie.div,
+    {
+      initial: { opacity: 0, scale: 0.82 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.82 },
+      transition: { duration: t.duration, ease: t.easing },
+      children: /* @__PURE__ */ a(L, { as: "span", padding: "none", style: ke, children: /* @__PURE__ */ a(h, { as: "span", direction: "row", gap: "xs", align: "center", style: Se, children: /* @__PURE__ */ a("span", { children: r }) }) })
+    }
+  );
+}
+function K({ visible: r, mode: t, label: i = "Expand", x: n = 0, y: e = 0 }) {
+  return t === "cursor" ? /* @__PURE__ */ a(fe, { children: /* @__PURE__ */ a(Z, { children: r && /* @__PURE__ */ a(
+    h,
+    {
+      gap: "xs",
+      style: {
+        position: "fixed",
+        left: n,
+        top: e,
+        zIndex: m.zIndex.modal,
+        transform: "translate(14px, -50%)",
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ a(G, { label: i })
+    }
+  ) }) }) : /* @__PURE__ */ a(Z, { children: r && /* @__PURE__ */ a(
+    ae,
+    {
+      columns: 1,
+      gap: "tight",
+      style: {
+        position: "absolute",
+        inset: 0,
+        alignItems: "center",
+        justifyItems: "center",
+        pointerEvents: "none",
+        zIndex: m.zIndex.focus
+      },
+      children: /* @__PURE__ */ a(G, { label: i })
+    }
+  ) });
+}
+const R = 280;
+function Qe({
+  src: r,
+  alt: t,
+  title: i,
+  style: n = {},
+  className: e,
+  draggable: s = !1,
+  isDark: u = !1,
+  naturalWidth: d,
+  naturalHeight: p,
+  onClick: o,
+  onMouseDown: g,
+  onMouseMove: f,
+  onMouseUp: w,
+  onMouseLeave: k,
+  expandable: T = !0,
+  expandLabel: E,
+  context: v = "default",
+  loading: A = "lazy"
+}) {
+  const [_, C] = I(!1), j = n && typeof n == "object" ? n : {}, [F, D] = I(!1), [oe, Y] = I(!1), [ce, le] = I(0), [de, pe] = I(0), ue = v === "default" && T && !!o;
+  if (!_)
+    return ue ? /* @__PURE__ */ l(
+      "div",
+      {
+        className: e ? `hds-focus ${e}` : "hds-focus",
+        style: {
+          position: "relative",
+          display: "inline-flex",
+          overflow: "hidden",
+          cursor: "pointer",
+          flexShrink: j.flexShrink
+        },
+        role: "button",
+        tabIndex: 0,
+        "aria-label": t,
+        onClick: o,
+        onKeyDown: (c) => {
+          (c.key === "Enter" || c.key === " ") && o && (c.preventDefault(), o(c));
+        },
+        onMouseEnter: () => D(!0),
+        onMouseMove: (c) => {
+          le(c.clientX), pe(c.clientY), f == null || f(c);
+        },
+        onMouseLeave: (c) => {
+          D(!1), k == null || k(c);
+        },
+        onMouseDown: g,
+        onMouseUp: w,
+        onFocus: () => Y(!0),
+        onBlur: () => Y(!1),
+        children: [
+          /* @__PURE__ */ a(
+            "img",
+            {
+              src: r,
+              alt: t,
+              loading: A,
+              style: j,
+              draggable: s,
+              onError: () => C(!0)
+            }
+          ),
+          /* @__PURE__ */ a(K, { mode: "centered", visible: oe && !F, label: E }),
+          /* @__PURE__ */ a(
+            K,
+            {
+              mode: "cursor",
+              visible: F,
+              x: ce,
+              y: de,
+              label: E
+            }
+          )
+        ]
+      }
+    ) : (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      /* @__PURE__ */ a(
+        "img",
+        {
+          src: r,
+          alt: t,
+          loading: A,
+          style: j,
+          className: e,
+          draggable: s,
+          onClick: o,
+          onKeyDown: o ? (c) => {
+            c.key === "Enter" && o(c);
+          } : void 0,
+          onMouseDown: g,
+          onMouseMove: f,
+          onMouseUp: w,
+          onMouseLeave: k,
+          onError: () => C(!0)
+        }
+      )
+    );
+  if (v === "detail")
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        className: e,
+        style: {
+          backgroundColor: "var(--semantic-color-surface-overlay)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        role: t ? "img" : void 0,
+        "aria-hidden": t ? void 0 : !0,
+        "aria-label": t || void 0
+      }
+    );
+  const N = d && p ? d / p : 4 / 3, me = N < 1;
+  let M = {};
+  if (v === "lightbox")
+    M = n.width === "100%" ? { width: "100%", aspectRatio: `${N}`, display: "block" } : {
+      height: n.maxHeight ?? "70vh",
+      width: "auto",
+      aspectRatio: `${N}`,
+      display: "block",
+      flexShrink: 0
+    };
+  else {
+    let c, z;
+    if (n.maxHeight && !n.width) {
+      const H = parseInt(n.maxHeight) || R;
+      z = H, c = Math.round(H * N);
+    } else if (n.maxWidth && !n.height) {
+      const H = parseInt(n.maxWidth) || R;
+      c = H, z = Math.round(H / N);
+    } else n.width === "100%" ? (c = 0, z = 0) : me ? (c = R, z = Math.round(R / N)) : (z = R, c = Math.round(R * N));
+    M = c === 0 ? { width: "100%", aspectRatio: `${N}`, display: "block" } : { width: c, height: z, display: "block", flexShrink: 0 };
   }
-
-  /* Neighbour shift — requires :has() support */
-  @supports selector(:has(+ *)) {
-    .hds-scr-card:hover + .hds-scr-card {
-      transform: translateX(8%);
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: e,
+      style: {
+        ...M,
+        backgroundColor: "var(--semantic-color-surface-overlay)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "column",
+        gap: m.space.px4,
+        overflow: "hidden",
+        cursor: o ? v === "lightbox" ? "zoom-in" : "pointer" : void 0
+      },
+      role: o ? "button" : t ? "img" : void 0,
+      "aria-hidden": !o && !t ? !0 : void 0,
+      tabIndex: o ? 0 : void 0,
+      onClick: o,
+      onKeyDown: o ? (c) => {
+        (c.key === "Enter" || c.key === " ") && o(c);
+      } : void 0,
+      "aria-label": t || void 0,
+      children: i && /* @__PURE__ */ a(
+        "span",
+        {
+          style: {
+            ...m.typeStyles.caption,
+            color: "var(--semantic-color-content-secondary)",
+            textAlign: "center",
+            maxWidth: "75%",
+            whiteSpace: "normal",
+            userSelect: "none"
+          },
+          children: i
+        }
+      )
     }
+  );
+}
+const B = "[font-family:var(--semantic-typography-mono-font-family)] [font-size:var(--semantic-typography-mono-font-size)] [font-weight:var(--semantic-typography-mono-font-weight)] [letter-spacing:var(--semantic-typography-mono-letter-spacing)] [line-height:var(--semantic-typography-mono-line-height)] max-w-[var(--semantic-typography-mono-max-width)]", U = /* @__PURE__ */ x(
+  "overflow-hidden rounded-[var(--semantic-radius-action)] border border-solid border-[var(--semantic-color-border-default)] bg-[var(--semantic-color-surface-raised)]"
+), Ne = /* @__PURE__ */ x(
+  "flex w-full min-w-0 min-h-[var(--semantic-size-control-lg)] items-center justify-between gap-[var(--semantic-space-subgrid-gap)] overflow-hidden rounded-[var(--semantic-radius-action)] border border-solid border-[var(--semantic-color-border-default)] bg-[var(--semantic-color-surface-raised)] py-[var(--semantic-space-subgrid-gap)] pl-[var(--semantic-space-scale-xs)] pr-[var(--semantic-space-subgrid-gap)]"
+), Ce = /* @__PURE__ */ x(
+  "flex items-center justify-between border-b border-solid border-[var(--semantic-color-border-default)] py-[var(--semantic-space-subgrid-gap)] pl-[var(--semantic-space-surface-padding)] pr-[var(--semantic-space-subgrid-gap)]"
+), J = /* @__PURE__ */ x(
+  "flex items-center gap-[var(--semantic-space-scale-xs)]"
+), Ie = /* @__PURE__ */ x(
+  `flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-[var(--semantic-space-surface-padding)] py-[var(--semantic-space-scale-xs)] text-[var(--semantic-color-content-primary)] ${B}`
+), Te = /* @__PURE__ */ x(
+  "border-t border-solid border-[var(--semantic-color-border-default)]"
+), Ee = /* @__PURE__ */ x(
+  "inline-flex transition-transform duration-[var(--hds-motion-productive-duration)] ease",
+  {
+    variants: {
+      expanded: {
+        true: "rotate-180",
+        false: "rotate-0"
+      }
+    },
+    defaultVariants: { expanded: !1 }
+  }
+), q = /* @__PURE__ */ x(
+  "flex cursor-pointer items-center gap-[var(--semantic-space-subgrid-gap)]",
+  {
+    variants: {
+      variant: {
+        inline: "shrink-0 border-0 bg-transparent py-[var(--semantic-space-subgrid-gap)] pl-[var(--semantic-space-scale-xs)] pr-[var(--semantic-space-subgrid-gap)] transition-[background-color,color,transform] duration-[var(--hds-motion-productive-duration)] ease",
+        block: "absolute right-[var(--semantic-space-subgrid-gap)] top-[var(--semantic-space-subgrid-gap)] rounded-[var(--semantic-radius-action)] border border-solid border-[var(--semantic-color-border-default)] bg-[var(--semantic-color-surface-raised)] px-[var(--semantic-space-scale-xs)] py-[var(--semantic-space-subgrid-gap)] transition-[background-color,color] duration-[var(--hds-motion-productive-duration)] ease"
+      }
+    },
+    defaultVariants: { variant: "block" }
   }
-
-  /* Cover image */
-  .hds-scr-cover {
-    flex: 1 1 auto;
-    min-height: 0;
-    background-color: var(--semantic-color-surface-page);
-    overflow: hidden;
+), Ae = /* @__PURE__ */ x(
+  `block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap not-italic text-[var(--semantic-color-content-primary)] ${B}`,
+  {
+    variants: {
+      truncateFromStart: {
+        true: "[direction:rtl] [text-align:left]",
+        false: "[direction:ltr] [text-align:inherit]"
+      }
+    },
+    defaultVariants: { truncateFromStart: !1 }
   }
-  .hds-scr-cover img {
-    width: 100%; /* audit-ok: percentage fill in CSS template */
-    height: 100%; /* audit-ok: percentage fill in CSS template */
-    object-fit: cover;
-    display: block;
+), Q = /* @__PURE__ */ x(
+  `whitespace-pre text-[var(--semantic-color-content-primary)] ${B}`
+), ee = /* @__PURE__ */ x(
+  "m-0 overflow-x-auto p-[var(--semantic-space-section-stack)] pr-[calc(var(--semantic-space-section-stack)_+_var(--semantic-size-control-lg))]",
+  {
+    variants: {
+      panelBackground: {
+        true: "bg-[var(--role-muted,var(--semantic-color-surface-raised))]",
+        false: ""
+      }
+    },
+    defaultVariants: { panelBackground: !1 }
   }
-  .hds-scr-cover-placeholder {
-    width: 100%; /* audit-ok: percentage fill in CSS template */
-    height: 100%; /* audit-ok: percentage fill in CSS template */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--semantic-color-surface-page);
+);
+function et({
+  code: r,
+  variant: t = "block",
+  truncateFromStart: i = !1,
+  language: n,
+  filename: e,
+  collapsible: s = !1,
+  defaultExpanded: u = !1,
+  className: d
+}) {
+  const [p, o] = I(!1), [g, f] = I(u), w = be(), k = W(null), T = W(null);
+  function E() {
+    var F, D;
+    const j = !g;
+    !j && ((F = T.current) != null && F.contains(document.activeElement)) && ((D = k.current) == null || D.focus()), f(j);
   }
-
-  /* Card metadata footer */
-  .hds-scr-meta {
-    flex: 0 0 auto;
-    padding: 14px 16px 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    border-top: 1px solid var(--semantic-color-border-subdued);
+  function v() {
+    navigator.clipboard.writeText(r).then(() => {
+      o(!0), setTimeout(() => o(!1), 2e3);
+    });
   }
-
-  /* Scroll-driven stacking animation — Chrome 115+ / FF 110+ */
-  @supports (animation-timeline: scroll()) {
-    .hds-scr-card-inner {
-      animation: hds-scr-stack linear;
-      animation-timeline: view(
-        x
-        calc(0px - 2 * var(--card-width))
-        calc(var(--card-width) * (var(--visible-count) - 0.2))
-      );
-      animation-duration: 1ms;
-    }
-
-    @keyframes hds-scr-stack {
-      from {
-        transform: translateX(0%) scale(1);
-        opacity: 1;
+  if (t === "inline")
+    return /* @__PURE__ */ l("div", { className: b(Ne(), d), children: [
+      /* @__PURE__ */ a("code", { className: Ae({ truncateFromStart: i }), children: p ? "Copied" : r }),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          onClick: v,
+          "aria-label": p ? "Copied" : "Copy code",
+          className: b("hds-focus", q({ variant: "inline" })),
+          children: p ? /* @__PURE__ */ a($, { icon: O, size: "small", color: "var(--semantic-color-content-primary)" }) : /* @__PURE__ */ a($, { icon: X, size: "small", color: "var(--semantic-color-content-primary)" })
+        }
+      )
+    ] });
+  const A = e || n ? /* @__PURE__ */ a("div", { className: Ce(), children: /* @__PURE__ */ l("div", { className: J(), children: [
+    e && /* @__PURE__ */ a(
+      "span",
+      {
+        className: b(B, "text-[var(--semantic-color-content-primary)]"),
+        children: e
       }
-      to {
-        transform: translateX(300%) scale(0.5);
-        opacity: 0;
+    ),
+    n && /* @__PURE__ */ a(
+      "span",
+      {
+        className: b(
+          B,
+          "text-[var(--semantic-color-content-secondary)]"
+        ),
+        children: n.toLowerCase()
       }
+    )
+  ] }) }) : null, _ = /* @__PURE__ */ a(
+    "button",
+    {
+      onClick: v,
+      "aria-label": p ? "Copied" : "Copy code",
+      className: b("hds-focus", q({ variant: "block" })),
+      children: p ? /* @__PURE__ */ a($, { icon: O, size: "small", color: "var(--semantic-color-content-primary)" }) : /* @__PURE__ */ a($, { icon: X, size: "small", color: "var(--semantic-color-content-primary)" })
     }
-
-    /* Cancel the animation on a hovered card so it stays visible */
-    .hds-scr-card:hover .hds-scr-card-inner {
-      animation: none;
-    }
-  }
-
-  /* Fallback outer height when scroll-driven animations are not available:
-     a static card-height plus some breathing room */
-  .hds-scr-outer[data-fallback="true"] {
-    /* Outer div becomes a straight horizontal scroll container */
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: thin;
-  }
-  .hds-scr-outer[data-fallback="true"] .hds-scr-yscroll {
-    position: static;
-    overflow: visible;
-    height: auto;
-    width: auto;
-  }
-  .hds-scr-outer[data-fallback="true"] .hds-scr-spacer {
-    height: auto;
-    width: auto;
+  ), C = /* @__PURE__ */ l("div", { className: "relative", children: [
+    /* @__PURE__ */ a(
+      "pre",
+      {
+        tabIndex: 0,
+        role: "region",
+        "aria-label": "Code sample",
+        className: ee({ panelBackground: !0 }),
+        children: /* @__PURE__ */ a("code", { className: Q(), children: te(r, n) })
+      }
+    ),
+    _
+  ] });
+  return s ? /* @__PURE__ */ l("div", { className: b(U(), d), children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        ref: k,
+        type: "button",
+        onClick: E,
+        "aria-expanded": g,
+        "aria-controls": w,
+        className: b("hds-focus", Ie()),
+        children: [
+          /* @__PURE__ */ l("span", { className: J(), children: [
+            /* @__PURE__ */ a("span", { children: g ? "Hide code" : "Show code" }),
+            e && // eslint-disable-next-line tailwindcss/no-arbitrary-value -- content-secondary token has no matching Tailwind-theme utility; var()-based so still token-driven
+            /* @__PURE__ */ a("span", { className: "text-[var(--semantic-color-content-secondary)]", children: e }),
+            n && // eslint-disable-next-line tailwindcss/no-arbitrary-value -- content-secondary token has no matching Tailwind-theme utility; var()-based so still token-driven
+            /* @__PURE__ */ a("span", { className: "text-[var(--semantic-color-content-secondary)]", children: n.toLowerCase() })
+          ] }),
+          /* @__PURE__ */ a("span", { className: Ee({ expanded: g }), children: /* @__PURE__ */ a($, { icon: xe, size: "small", color: "var(--semantic-color-content-secondary)" }) })
+        ]
+      }
+    ),
+    g && /* @__PURE__ */ a("div", { ref: T, id: w, className: Te(), children: C })
+  ] }) : /* @__PURE__ */ l("div", { className: b(U(), d), children: [
+    A,
+    /* @__PURE__ */ l("div", { className: "relative", children: [
+      /* @__PURE__ */ a(
+        "pre",
+        {
+          tabIndex: 0,
+          role: "region",
+          "aria-label": "Code sample",
+          className: ee({ panelBackground: !1 }),
+          children: /* @__PURE__ */ a("code", { className: Q(), children: te(r, n) })
+        }
+      ),
+      _
+    ] })
+  ] });
+}
+const _e = /* @__PURE__ */ new Set([
+  "import",
+  "export",
+  "from",
+  "as",
+  "default",
+  "const",
+  "let",
+  "var",
+  "function",
+  "return",
+  "if",
+  "else",
+  "for",
+  "while",
+  "switch",
+  "case",
+  "break",
+  "continue",
+  "new",
+  "class",
+  "extends",
+  "implements",
+  "interface",
+  "type",
+  "enum",
+  "public",
+  "private",
+  "protected",
+  "readonly",
+  "static",
+  "async",
+  "await",
+  "try",
+  "catch",
+  "finally",
+  "throw",
+  "typeof",
+  "instanceof",
+  "true",
+  "false",
+  "null",
+  "undefined",
+  "void",
+  "this",
+  "super",
+  "in",
+  "of"
+]), je = /* @__PURE__ */ new Set(["important", "inherit", "initial", "unset", "auto", "none"]);
+function ze(r) {
+  switch (r) {
+    case "keyword":
+      return "text-[var(--semantic-color-content-accent,var(--semantic-color-content-primary))]";
+    case "string":
+      return "text-[var(--semantic-color-feedback-success)]";
+    case "comment":
+      return "text-[var(--semantic-color-content-secondary)]";
+    case "number":
+      return "text-[var(--semantic-color-feedback-warning)]";
+    case "type":
+      return "text-[var(--semantic-color-feedback-info)]";
+    default:
+      return "text-[var(--semantic-color-content-primary)]";
   }
-  .hds-scr-outer[data-fallback="true"] .hds-scr-strip {
-    position: static;
-    overflow-x: visible;
-    overflow-y: visible;
+}
+function Re(r) {
+  if (!r) return;
+  const t = r.trim().toLowerCase();
+  if (["ts", "tsx", "typescript", "js", "jsx", "javascript"].includes(t)) return "ts";
+  if (t === "json") return "json";
+  if (t === "css") return "css";
+  if (["html", "xml", "svg"].includes(t)) return "html";
+}
+function Fe(r) {
+  const t = [], i = /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|('(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"|`(?:\\.|[^`\\])*`)|(\b\d[\d_.eE+-]*\b)|([A-Za-z_$][\w$]*)/g;
+  let n = 0, e;
+  for (; (e = i.exec(r)) !== null; ) {
+    if (e.index > n && t.push({ kind: "plain", value: r.slice(n, e.index) }), e[1]) t.push({ kind: "comment", value: e[1] });
+    else if (e[2]) t.push({ kind: "string", value: e[2] });
+    else if (e[3]) t.push({ kind: "number", value: e[3] });
+    else if (e[4]) {
+      const s = e[4];
+      _e.has(s) ? t.push({ kind: "keyword", value: s }) : /^[A-Z]/.test(s) ? t.push({ kind: "type", value: s }) : t.push({ kind: "plain", value: s });
+    }
+    n = i.lastIndex;
   }
-  .hds-scr-outer[data-fallback="true"] .hds-scr-track {
-    padding: 12px ${k}px;
+  return n < r.length && t.push({ kind: "plain", value: r.slice(n) }), t;
+}
+function De(r) {
+  const t = [], i = /("(?:\\.|[^"\\])*")(\s*:)?|(\b-?\d[\d.eE+-]*\b)|\b(true|false|null)\b/g;
+  let n = 0, e;
+  for (; (e = i.exec(r)) !== null; )
+    e.index > n && t.push({ kind: "plain", value: r.slice(n, e.index) }), e[1] ? (t.push({ kind: e[2] ? "type" : "string", value: e[1] }), e[2] && t.push({ kind: "plain", value: e[2] })) : e[3] ? t.push({ kind: "number", value: e[3] }) : e[4] && t.push({ kind: "keyword", value: e[4] }), n = i.lastIndex;
+  return n < r.length && t.push({ kind: "plain", value: r.slice(n) }), t;
+}
+function He(r) {
+  const t = [], i = /(\/\*[\s\S]*?\*\/)|('(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*")|(--[A-Za-z_-][\w-]*)|(#[0-9a-fA-F]{3,8}\b|\b\d[\d.]*(?:px|rem|em|%|vh|vw|s|ms)?\b)|([A-Za-z_-][\w-]*)/g;
+  let n = 0, e;
+  for (; (e = i.exec(r)) !== null; )
+    e.index > n && t.push({ kind: "plain", value: r.slice(n, e.index) }), e[1] ? t.push({ kind: "comment", value: e[1] }) : e[2] ? t.push({ kind: "string", value: e[2] }) : e[3] ? t.push({ kind: "type", value: e[3] }) : e[4] ? t.push({ kind: "number", value: e[4] }) : e[5] && t.push({
+      kind: je.has(e[5].toLowerCase()) ? "keyword" : "plain",
+      value: e[5]
+    }), n = i.lastIndex;
+  return n < r.length && t.push({ kind: "plain", value: r.slice(n) }), t;
+}
+function $e(r) {
+  const t = [], i = /(<!--[\s\S]*?-->)|(<\/?)([A-Za-z][\w-]*)|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|([A-Za-z_-][\w-]*)(=)/g;
+  let n = 0, e;
+  for (; (e = i.exec(r)) !== null; )
+    e.index > n && t.push({ kind: "plain", value: r.slice(n, e.index) }), e[1] ? t.push({ kind: "comment", value: e[1] }) : e[2] && e[3] ? (t.push({ kind: "plain", value: e[2] }), t.push({ kind: "keyword", value: e[3] })) : e[4] ? t.push({ kind: "string", value: e[4] }) : e[5] && (t.push({ kind: "type", value: e[5] }), t.push({ kind: "plain", value: e[6] })), n = i.lastIndex;
+  return n < r.length && t.push({ kind: "plain", value: r.slice(n) }), t;
+}
+function te(r, t) {
+  const i = Re(t);
+  if (!i) return r;
+  let n;
+  try {
+    if (i === "ts") n = Fe(r);
+    else if (i === "json") n = De(r);
+    else if (i === "css") n = He(r);
+    else if (i === "html") n = $e(r);
+    else return r;
+  } catch {
+    return r;
   }
-`;
-function O() {
-  return /* @__PURE__ */ e("div", { className: "hds-scr-cover-placeholder", "aria-hidden": "true", children: /* @__PURE__ */ o(
-    "svg",
+  return n.map(
+    (e, s) => e.kind === "plain" ? /* @__PURE__ */ a("span", { children: e.value }, s) : /* @__PURE__ */ a("span", { className: ze(e.kind), children: e.value }, s)
+  );
+}
+const Pe = {
+  minHeight: "100vh",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontFamily: m.fontFamily
+};
+function tt({
+  displayText: r = "Oops",
+  message: t = "Something went wrong"
+}) {
+  const i = ne("spatial");
+  return /* @__PURE__ */ a("div", { style: Pe, "data-role": "error-recovery", children: /* @__PURE__ */ a(L, { padding: "component", children: /* @__PURE__ */ a(
+    ie.div,
     {
-      width: "48",
-      height: "48",
-      viewBox: "0 0 48 48",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ e(
-          "rect",
+      initial: { opacity: 0, y: 2 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: i.duration, ease: i.easing },
+      children: /* @__PURE__ */ l(h, { gap: "normal", style: { alignItems: "center", textAlign: "center" }, children: [
+        /* @__PURE__ */ a(
+          P,
           {
-            x: "6",
-            y: "10",
-            width: "36",
-            height: "28",
-            rx: "3",
-            stroke: "var(--semantic-color-border-default)",
-            strokeWidth: "1.5"
+            variant: "display",
+            as: "h1",
+            className: "text-primary",
+            style: { whiteSpace: "nowrap" },
+            children: r
           }
         ),
-        /* @__PURE__ */ e(
-          "circle",
+        /* @__PURE__ */ a(
+          P,
           {
-            cx: "16",
-            cy: "20",
-            r: "4",
-            stroke: "var(--semantic-color-border-default)",
-            strokeWidth: "1.5"
+            variant: "heading2",
+            as: "p",
+            className: "text-secondary",
+            style: { whiteSpace: "nowrap" },
+            children: t
           }
         ),
-        /* @__PURE__ */ e(
-          "path",
+        /* @__PURE__ */ a(
+          V,
           {
-            d: "M6 30l10-8 8 6 6-5 12 9",
-            stroke: "var(--semantic-color-border-default)",
-            strokeWidth: "1.5",
-            strokeLinejoin: "round"
+            variant: "primary",
+            onClick: () => {
+              typeof window < "u" && window.history.back();
+            },
+            children: "Back"
           }
         )
-      ]
+      ] })
     }
-  ) });
+  ) }) });
 }
-function G({ card: r, index: a, total: s }) {
-  const t = /* @__PURE__ */ o(A, { children: [
-    /* @__PURE__ */ e("div", { className: "hds-scr-cover", children: r.coverImage ? /* @__PURE__ */ e(
-      "img",
-      {
-        src: r.coverImage,
-        alt: r.title,
-        loading: a < 4 ? "eager" : "lazy",
-        decoding: "async"
-      }
-    ) : /* @__PURE__ */ e(O, {}) }),
-    /* @__PURE__ */ o("div", { className: "hds-scr-meta", children: [
-      r.category && /* @__PURE__ */ e(
-        "span",
-        {
-          style: {
-            ...v.typeStyles.eyebrow,
-            color: "var(--semantic-color-content-secondary)"
-          },
-          children: r.category
-        }
-      ),
-      /* @__PURE__ */ e(
-        "span",
-        {
-          style: {
-            ...v.typeStyles.heading3,
-            color: "var(--semantic-color-content-primary)"
-          },
-          children: r.title
-        }
-      )
-    ] })
-  ] });
-  return /* @__PURE__ */ e(
-    "div",
+const at = /* @__PURE__ */ ye.forwardRef(function({ children: t, animation: i = "fade-up", className: n, style: e, as: s = "div" }, u) {
+  return /* @__PURE__ */ a(
+    s,
     {
-      className: "hds-scr-card",
-      style: { "--card-index": a },
-      "aria-label": `${r.title}${r.category ? `, ${r.category}` : ""}, card ${a + 1} of ${s}`,
-      children: r.href ? /* @__PURE__ */ e(
-        "a",
-        {
-          href: r.href,
-          className: "hds-focus hds-scr-card-inner",
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
-            textDecoration: "none",
-            color: "inherit"
-          },
-          children: t
-        }
-      ) : /* @__PURE__ */ e("div", { className: "hds-scr-card-inner", children: t })
+      ref: u,
+      className: ["hds-reveal", n].filter(Boolean).join(" "),
+      "data-reveal": i,
+      "data-hds-component": "Reveal",
+      "data-hds-metrics": `animation:${i}`,
+      style: e,
+      children: t
     }
   );
-}
-function te({ cards: r }) {
-  const a = x(null), s = x(null), t = x(null), n = r.length, c = C * n + /* trailing breathing room */
-  C * R;
-  return N(() => {
-    const i = s.current, l = t.current;
-    if (!i || !l) return;
-    function h() {
-      !i || !l || (l.scrollLeft = i.scrollTop);
-    }
-    return i.addEventListener("scroll", h, { passive: !0 }), () => {
-      i.removeEventListener("scroll", h);
-    };
-  }, []), N(() => {
-    const i = a.current;
-    if (!i) return;
-    typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("animation-timeline", "scroll()") || i.setAttribute("data-fallback", "true");
-  }, []), /* @__PURE__ */ o(A, { children: [
-    /* @__PURE__ */ e("style", { dangerouslySetInnerHTML: { __html: W } }),
-    /* @__PURE__ */ e(
-      "div",
+}), nt = /* @__PURE__ */ y.forwardRef(
+  function({ breadcrumb: t, title: i, status: n, actions: e, level: s = 1, className: u, ...d }, p) {
+    const o = `h${s}`;
+    return /* @__PURE__ */ a(
+      "header",
       {
-        ref: a,
-        className: "hds-scr-outer",
-        style: {
-          height: "calc(var(--card-height) + 48px)"
-        },
-        role: "region",
-        "aria-label": "Project cards",
-        children: /* @__PURE__ */ o(
-          "div",
-          {
-            ref: s,
-            className: "hds-scr-yscroll",
-            role: "region",
-            "aria-label": "Project cards, vertical scroll",
-            tabIndex: 0,
-            style: { height: "100%" },
-            children: [
-              /* @__PURE__ */ e(
-                "div",
+        ref: p,
+        "data-hds-component": "PageHeader",
+        className: b("w-full", u),
+        ...d,
+        children: /* @__PURE__ */ l(h, { gap: "tight", children: [
+          t ? /* @__PURE__ */ a("div", { "data-slot": "breadcrumb", children: t }) : null,
+          /* @__PURE__ */ l(h, { direction: "row", wrap: "wrap", gap: "normal", align: "start", justify: "space-between", children: [
+            /* @__PURE__ */ l(h, { direction: "row", wrap: "wrap", gap: "tight", align: "center", justify: "start", children: [
+              /* @__PURE__ */ a(
+                o,
                 {
-                  className: "hds-scr-spacer",
                   style: {
-                    "--hds-scr-spacer-height": `${c}px`
-                  }
+                    ...m.typeStyles.heading2,
+                    margin: 0,
+                    color: "var(--semantic-color-content-primary)"
+                  },
+                  children: i
                 }
               ),
-              /* @__PURE__ */ e(
-                "div",
-                {
-                  ref: t,
-                  className: "hds-scr-strip",
-                  role: "region",
-                  "aria-label": "Project cards, horizontal scroll",
-                  tabIndex: 0,
-                  children: /* @__PURE__ */ e("div", { className: "hds-scr-track", role: "list", children: r.map((i, l) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(G, { card: i, index: l, total: n }) }, i.id)) })
-                }
-              )
-            ]
+              n ? /* @__PURE__ */ a("div", { "data-slot": "status", children: n }) : null
+            ] }),
+            e ? /* @__PURE__ */ a("div", { "data-slot": "actions", className: "ml-auto", children: /* @__PURE__ */ a(h, { direction: "row", wrap: "wrap", gap: "tight", align: "center", justify: "end", children: e }) }) : null
+          ] })
+        ] })
+      }
+    );
+  }
+), Be = 4, Ve = "var(--semantic-size-tile)", Me = " ", rt = /* @__PURE__ */ y.forwardRef(
+  function({ label: t, value: i, sub: n, tone: e = "neutral", style: s, ...u }, d) {
+    return /* @__PURE__ */ a(
+      L,
+      {
+        ref: d,
+        padding: "item",
+        "data-hds-component": "MetricTile",
+        "data-tone": e,
+        style: { minHeight: Ve, ...s },
+        ...u,
+        children: /* @__PURE__ */ a(
+          re.Metric,
+          {
+            label: t,
+            value: i,
+            sub: n ?? Me,
+            tone: e,
+            className: "px-0"
           }
         )
       }
-    )
-  ] });
+    );
+  }
+);
+function se(r) {
+  return y.Children.toArray(r).reduce((t, i) => y.isValidElement(i) ? i.type === y.Fragment ? t + se(i.props.children) : t + 1 : t, 0);
 }
-const re = d.forwardRef(function({ breadcrumb: a, title: s, status: t, actions: n, level: c = 1, className: i, ...l }, h) {
-  const g = `h${c}`;
-  return /* @__PURE__ */ e(
-    "header",
+const it = /* @__PURE__ */ y.forwardRef(
+  function({ children: t, ...i }, n) {
+    const e = Math.min(Math.max(se(t), 1), Be);
+    return /* @__PURE__ */ a("div", { ref: n, "data-hds-component": "MetricTiles", ...i, children: /* @__PURE__ */ a(ae, { columns: e, gap: "tight", children: t }) });
+  }
+), st = /* @__PURE__ */ y.forwardRef(
+  function({ primary: t, secondary: i, destructive: n, sticky: e = !1, className: s, style: u, ...d }, p) {
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: p,
+        "data-hds-component": "FormActions",
+        "data-sticky": e ? "true" : void 0,
+        className: b(e && "border-t border-border bg-background py-3", s),
+        style: e ? { position: "sticky", bottom: 0, ...u } : u,
+        ...d,
+        children: /* @__PURE__ */ l(
+          h,
+          {
+            direction: "row",
+            wrap: "wrap",
+            gap: "tight",
+            align: "center",
+            justify: n ? "space-between" : "end",
+            children: [
+              n ? /* @__PURE__ */ a("div", { "data-slot": "destructive", children: n }) : null,
+              /* @__PURE__ */ a("div", { "data-slot": "group", className: "ml-auto", children: /* @__PURE__ */ l(h, { direction: "row", wrap: "wrap", gap: "tight", align: "center", justify: "end", children: [
+                i,
+                t
+              ] }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+), ot = /* @__PURE__ */ y.forwardRef(function({
+  title: t,
+  description: i,
+  actionLabel: n,
+  confirmLabel: e,
+  confirmBody: s,
+  onConfirm: u,
+  cancelLabel: d = "Cancel",
+  level: p = 2,
+  ...o
+}, g) {
+  const f = y.useId();
+  return /* @__PURE__ */ a(
+    "section",
     {
-      ref: h,
-      "data-hds-component": "PageHeader",
-      className: M("w-full", i),
-      ...l,
-      children: /* @__PURE__ */ o(I, { gap: "tight", children: [
-        a ? /* @__PURE__ */ e("div", { "data-slot": "breadcrumb", children: a }) : null,
-        /* @__PURE__ */ o(u, { gap: "normal", align: "start", justify: "space-between", children: [
-          /* @__PURE__ */ o(u, { gap: "tight", align: "center", children: [
-            /* @__PURE__ */ e(
-              g,
-              {
-                style: {
-                  ...v.typeStyles.heading2,
-                  margin: 0,
-                  color: "var(--semantic-color-content-primary)"
-                },
-                children: s
-              }
-            ),
-            t ? /* @__PURE__ */ e("div", { "data-slot": "status", children: t }) : null
-          ] }),
-          n ? /* @__PURE__ */ e("div", { "data-slot": "actions", className: "ml-auto", children: /* @__PURE__ */ e(u, { gap: "tight", align: "center", justify: "end", children: n }) }) : null
-        ] })
-      ] })
+      ref: g,
+      "data-hds-component": "DestructiveSection",
+      "aria-labelledby": f,
+      ...o,
+      children: /* @__PURE__ */ a(re, { tone: "danger", children: /* @__PURE__ */ l(h, { direction: "row", wrap: "wrap", gap: "normal", align: "center", justify: "space-between", children: [
+        /* @__PURE__ */ l("div", { "data-slot": "copy", className: "min-w-0 grow basis-64", children: [
+          /* @__PURE__ */ a(P, { id: f, as: `h${p}`, variant: "heading3", children: t }),
+          /* @__PURE__ */ a(P, { as: "p", variant: "caption", className: "text-muted-foreground", children: i })
+        ] }),
+        /* @__PURE__ */ a("div", { "data-slot": "action", className: "shrink-0", children: /* @__PURE__ */ l(S, { children: [
+          /* @__PURE__ */ a(S.Trigger, { asChild: !0, children: /* @__PURE__ */ a(V, { variant: "secondary", tone: "danger", children: n ?? e }) }),
+          /* @__PURE__ */ l(S.Content, { children: [
+            /* @__PURE__ */ l(S.Header, { children: [
+              /* @__PURE__ */ a(S.Title, { children: t }),
+              /* @__PURE__ */ a(S.Description, { children: s })
+            ] }),
+            /* @__PURE__ */ l(S.Footer, { children: [
+              /* @__PURE__ */ a(S.Cancel, { asChild: !0, children: /* @__PURE__ */ a(V, { variant: "secondary", children: d }) }),
+              /* @__PURE__ */ a(S.Action, { asChild: !0, children: /* @__PURE__ */ a(V, { variant: "primary", tone: "danger", onClick: u, children: e }) })
+            ] })
+          ] })
+        ] }) })
+      ] }) })
     }
   );
-}), U = 4, X = "calc(var(--primitive-size-96) + var(--primitive-size-24))", Y = " ", ie = d.forwardRef(function({ label: a, value: s, sub: t, tone: n = "neutral", style: c, ...i }, l) {
-  return /* @__PURE__ */ e(
-    _,
-    {
-      ref: l,
-      padding: "item",
-      "data-hds-component": "MetricTile",
-      "data-tone": n,
-      style: { minHeight: X, ...c },
-      ...i,
-      children: /* @__PURE__ */ e(
-        V.Metric,
+}), Le = "8rem", Ye = "6rem", ct = /* @__PURE__ */ y.forwardRef(function({
+  title: t,
+  toolbar: i,
+  columns: n,
+  rows: e,
+  actionsLabel: s = "Actions",
+  emptyTitle: u = "Nothing here yet",
+  emptyDescription: d,
+  level: p = 2,
+  ...o
+}, g) {
+  const f = y.useId(), w = e.some((v) => v.actions != null), k = w ? [...n, { key: "__actions", label: s, align: "right", width: "max-content" }] : n, T = e.map((v) => ({
+    key: v.key,
+    cells: [
+      ...v.cells.map((A, _) => {
+        var C;
+        return {
+          slot: "custom",
+          content: A,
+          align: (C = n[_]) == null ? void 0 : C.align
+        };
+      }),
+      ...w ? [
         {
-          label: a,
-          value: s,
-          sub: t ?? Y,
-          tone: n,
-          className: "px-0"
+          slot: "action",
+          align: "right",
+          content: /* @__PURE__ */ a(h, { direction: "row", wrap: "wrap", gap: "tight", align: "center", justify: "end", children: v.actions })
         }
-      )
-    }
-  );
-});
-function $(r) {
-  return d.Children.toArray(r).reduce((a, s) => d.isValidElement(s) ? s.type === d.Fragment ? a + $(s.props.children) : a + 1 : a, 0);
-}
-const se = d.forwardRef(function({ children: a, ...s }, t) {
-  const n = Math.min(Math.max($(a), 1), U);
-  return /* @__PURE__ */ e("div", { ref: t, "data-hds-component": "MetricTiles", ...s, children: /* @__PURE__ */ e(E, { columns: n, gap: "tight", children: a }) });
-}), ne = d.forwardRef(function({ primary: a, secondary: s, destructive: t, sticky: n = !1, className: c, style: i, ...l }, h) {
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      ref: h,
-      "data-hds-component": "FormActions",
-      "data-sticky": n ? "true" : void 0,
-      className: M(n && "border-t border-border bg-background py-3", c),
-      style: n ? { position: "sticky", bottom: 0, ...i } : i,
-      ...l,
-      children: /* @__PURE__ */ o(u, { gap: "tight", align: "center", justify: t ? "space-between" : "end", children: [
-        t ? /* @__PURE__ */ e("div", { "data-slot": "destructive", children: t }) : null,
-        /* @__PURE__ */ e("div", { "data-slot": "group", className: "ml-auto", children: /* @__PURE__ */ o(u, { gap: "tight", align: "center", justify: "end", children: [
-          s,
-          a
-        ] }) })
-      ] })
-    }
-  );
-}), oe = d.forwardRef(
-  function({
-    title: a,
-    description: s,
-    actionLabel: t,
-    confirmLabel: n,
-    confirmBody: c,
-    onConfirm: i,
-    cancelLabel: l = "Cancel",
-    level: h = 2,
-    ...g
-  }, y) {
-    const m = d.useId();
-    return /* @__PURE__ */ e(
-      "section",
+      ] : []
+    ]
+  })), E = `calc(${n.length} * ${Le}${w ? ` + ${Ye}` : ""})`;
+  return /* @__PURE__ */ a("section", { ref: g, "data-hds-component": "DataTableSection", "aria-labelledby": f, ...o, children: /* @__PURE__ */ l(h, { gap: "tight", children: [
+    /* @__PURE__ */ l(h, { direction: "row", wrap: "wrap", gap: "normal", align: "center", justify: "space-between", children: [
+      /* @__PURE__ */ a(P, { id: f, as: `h${p}`, variant: "heading3", children: t }),
+      i ? /* @__PURE__ */ a("div", { "data-slot": "toolbar", className: "ml-auto", children: /* @__PURE__ */ a(h, { direction: "row", wrap: "wrap", gap: "tight", align: "center", justify: "end", children: i }) }) : null
+    ] }),
+    e.length === 0 ? /* @__PURE__ */ a(ve, { title: u, description: d }) : /* @__PURE__ */ a(
+      ge,
       {
-        ref: y,
-        "data-hds-component": "DestructiveSection",
-        "aria-labelledby": m,
-        ...g,
-        children: /* @__PURE__ */ e(V, { tone: "danger", children: /* @__PURE__ */ o(u, { gap: "normal", align: "center", justify: "space-between", children: [
-          /* @__PURE__ */ o("div", { "data-slot": "copy", className: "min-w-0 grow basis-64", children: [
-            /* @__PURE__ */ e(S, { id: m, as: `h${h}`, variant: "heading3", children: a }),
-            /* @__PURE__ */ e(S, { as: "p", variant: "caption", className: "text-muted-foreground", children: s })
-          ] }),
-          /* @__PURE__ */ e("div", { "data-slot": "action", className: "shrink-0", children: /* @__PURE__ */ o(p, { children: [
-            /* @__PURE__ */ e(p.Trigger, { asChild: !0, children: /* @__PURE__ */ e(w, { variant: "secondary", tone: "danger", children: t ?? n }) }),
-            /* @__PURE__ */ o(p.Content, { children: [
-              /* @__PURE__ */ o(p.Header, { children: [
-                /* @__PURE__ */ e(p.Title, { children: a }),
-                /* @__PURE__ */ e(p.Description, { children: c })
-              ] }),
-              /* @__PURE__ */ o(p.Footer, { children: [
-                /* @__PURE__ */ e(p.Cancel, { asChild: !0, children: /* @__PURE__ */ e(w, { variant: "secondary", children: l }) }),
-                /* @__PURE__ */ e(p.Action, { asChild: !0, children: /* @__PURE__ */ e(w, { variant: "primary", tone: "danger", onClick: i, children: n }) })
-              ] })
-            ] })
-          ] }) })
-        ] }) })
+        columns: k,
+        rows: T,
+        minWidth: E,
+        labelledBy: f
       }
-    );
-  }
-), q = "8rem", K = "6rem", le = d.forwardRef(
-  function({
-    title: a,
-    toolbar: s,
-    columns: t,
-    rows: n,
-    actionsLabel: c = "Actions",
-    emptyTitle: i = "Nothing here yet",
-    emptyDescription: l,
-    level: h = 2,
-    ...g
-  }, y) {
-    const m = d.useId(), b = n.some((f) => f.actions != null), F = b ? [
-      ...t,
-      { key: "__actions", label: c, align: "right", width: "max-content" }
-    ] : t, j = n.map((f) => ({
-      key: f.key,
-      cells: [
-        ...f.cells.map((H, L) => {
-          var T;
-          return {
-            slot: "custom",
-            content: H,
-            align: (T = t[L]) == null ? void 0 : T.align
-          };
-        }),
-        ...b ? [
-          {
-            slot: "action",
-            align: "right",
-            content: /* @__PURE__ */ e(u, { gap: "tight", align: "center", justify: "end", children: f.actions })
-          }
-        ] : []
-      ]
-    })), D = `calc(${t.length} * ${q}${b ? ` + ${K}` : ""})`;
-    return /* @__PURE__ */ e(
-      "section",
+    )
+  ] }) });
+}), lt = /* @__PURE__ */ y.forwardRef(
+  function({ tone: t = "neutral", title: i, notes: n, trailing: e, className: s, ...u }, d) {
+    return /* @__PURE__ */ l(
+      "div",
       {
-        ref: y,
-        "data-hds-component": "DataTableSection",
-        "aria-labelledby": m,
-        ...g,
-        children: /* @__PURE__ */ o(I, { gap: "tight", children: [
-          /* @__PURE__ */ o(u, { gap: "normal", align: "center", justify: "space-between", children: [
-            /* @__PURE__ */ e(S, { id: m, as: `h${h}`, variant: "heading3", children: a }),
-            s ? /* @__PURE__ */ e("div", { "data-slot": "toolbar", className: "ml-auto", children: /* @__PURE__ */ e(u, { gap: "tight", align: "center", justify: "end", children: s }) }) : null
+        ref: d,
+        "data-hds-component": "StatusTile",
+        "data-hds-metrics": `tone:${t}`,
+        className: b(
+          "flex h-full items-start gap-3 rounded-lg bg-[var(--semantic-color-surface-raised)] p-4",
+          s
+        ),
+        ...u,
+        children: [
+          /* @__PURE__ */ l("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ a("p", { className: "m-0 text-sm text-foreground", children: i }),
+            n == null ? void 0 : n.map((p, o) => /* @__PURE__ */ a("p", { className: "m-0 mt-1 text-xs text-muted-foreground", children: p }, o))
           ] }),
-          n.length === 0 ? /* @__PURE__ */ e(P, { title: i, description: l }) : /* @__PURE__ */ e(
-            z,
-            {
-              columns: F,
-              rows: j,
-              minWidth: D,
-              labelledBy: m
-            }
-          )
-        ] })
+          e && /* @__PURE__ */ a("div", { className: "shrink-0", children: e })
+        ]
       }
     );
   }
 );
 export {
-  he as ActivityFeed,
-  pe as AppShell,
-  ue as AssetImg,
-  me as Calendar,
-  ge as Carousel,
-  fe as CodeBlock,
-  ve as CommandPalette,
-  le as DataTableSection,
-  oe as DestructiveSection,
-  ye as DocLinkCard,
-  be as ErrorPattern,
-  we as FileInput,
-  aa as Form,
-  ne as FormActions,
-  ta as FormField,
-  ra as FormFieldShell,
-  xe as Lightbox,
-  ie as MetricTile,
-  se as MetricTiles,
-  ke as NavItem,
-  Se as OverflowList,
-  Ce as Page,
-  re as PageHeader,
-  Te as Reveal,
-  Ne as SideNav,
-  te as StackedCardRail,
-  Ie as Stepper,
-  Ve as Toolbar,
-  Ae as TopNav,
-  Me as TreeList,
-  Re as activityAvatarVariants,
-  $e as activityToneVariants,
-  Fe as appShellVariants,
-  je as blockCodeTextVariants,
-  De as blockContainerVariants,
-  He as blockHeaderVariants,
-  Le as carouselControlVariants,
-  _e as chevronVariants,
-  Ee as cmdkDescriptionVariants,
-  Pe as cmdkKindBadgeVariants,
-  ze as cmdkRowVariants,
-  Be as collapsibleToggleVariants,
-  We as copyButtonVariants,
-  Oe as defaultActivityEvents,
-  Ge as docLinkCardVariants,
-  Ue as fileInputVariants,
-  Xe as inlineCodeTextVariants,
-  Ye as inlineWrapperVariants,
-  qe as navIndicatorVariants,
-  Ke as navItemVariants,
-  Je as prePanelVariants,
-  Qe as sideNavVariants,
-  Ze as stepMarkerVariants,
-  ia as useFieldWiring
+  Qe as AssetImg,
+  et as CodeBlock,
+  ct as DataTableSection,
+  ot as DestructiveSection,
+  tt as ErrorPattern,
+  ut as Form,
+  st as FormActions,
+  mt as FormField,
+  ht as FormFieldShell,
+  rt as MetricTile,
+  it as MetricTiles,
+  qe as Page,
+  nt as PageHeader,
+  at as Reveal,
+  lt as StatusTile,
+  Q as blockCodeTextVariants,
+  U as blockContainerVariants,
+  Ce as blockHeaderVariants,
+  Ee as chevronVariants,
+  Ie as collapsibleToggleVariants,
+  q as copyButtonVariants,
+  Ae as inlineCodeTextVariants,
+  Ne as inlineWrapperVariants,
+  ee as prePanelVariants,
+  ft as useFieldWiring
 };