@hirobius/design-system 0.20.0 → 0.22.0

package/dist/patterns.js

@@ -1,15 +1,15 @@
 'use client';
-import { F as ut, b as mt, a as ht, u as ft } from "./chunks/form-COP3vK9_.js";
+import { F as ut, b as mt, a as ht, u as ft } from "./chunks/form-By82qZcC.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 { C as fe, h as ve, S as h, G as ne, u as re, a as M, I as H, T as V, B as P, b as ie, A as S, E as ge, c as ye } from "./chunks/empty-state-DNoThgfV.js";
+import * as f from "react";
+import be, { useState as I, useId as xe, useRef as Y } from "react";
+import { AnimatePresence as Z, motion as se } 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 { Check as O, Copy as X, ChevronDown as we } from "lucide-react";
 import { cn as b } from "./cn.js";
-const we = {
+const ke = {
   default: { top: m.space.px48, bottom: m.space.px64 },
   compact: { top: m.space.px24, bottom: m.space.px32 },
   none: { top: "0", bottom: "0" }
@@ -21,8 +21,8 @@ function qe({
   style: n,
   className: e
 }) {
-  const s = we[i];
-  return /* @__PURE__ */ a(he, { maxWidth: t, className: e, children: /* @__PURE__ */ a(
+  const s = ke[i];
+  return /* @__PURE__ */ a(fe, { maxWidth: t, className: e, children: /* @__PURE__ */ a(
     "div",
     {
       "data-hds-component": "Page",
@@ -32,7 +32,7 @@ function qe({
     }
   ) });
 }
-const ke = {
+const Se = {
   background: "var(--semantic-color-surface-accent)",
   border: "none",
   borderRadius: m.borderRadius.full,
@@ -43,26 +43,26 @@ const ke = {
   pointerEvents: "none",
   paddingBlock: m.space.px6,
   paddingInline: m.space.px16
-}, Se = {
+}, Ne = {
   ...m.typeStyles.ui,
   userSelect: "none",
   whiteSpace: "nowrap"
 };
 function G({ label: r }) {
-  const t = ne("productive");
+  const t = re("productive");
   return /* @__PURE__ */ a(
-    ie.div,
+    se.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 }) }) })
+      children: /* @__PURE__ */ a(M, { as: "span", padding: "none", style: Se, children: /* @__PURE__ */ a(h, { as: "span", direction: "row", gap: "xs", align: "center", style: Ne, 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(
+  return t === "cursor" ? /* @__PURE__ */ a(ve, { children: /* @__PURE__ */ a(Z, { children: r && /* @__PURE__ */ a(
     h,
     {
       gap: "xs",
@@ -77,7 +77,7 @@ function K({ visible: r, mode: t, label: i = "Expand", x: n = 0, y: e = 0 }) {
       children: /* @__PURE__ */ a(G, { label: i })
     }
   ) }) }) : /* @__PURE__ */ a(Z, { children: r && /* @__PURE__ */ a(
-    ae,
+    ne,
     {
       columns: 1,
       gap: "tight",
@@ -93,7 +93,7 @@ function K({ visible: r, mode: t, label: i = "Expand", x: n = 0, y: e = 0 }) {
     }
   ) });
 }
-const R = 280;
+const z = 280;
 function Qe({
   src: r,
   alt: t,
@@ -105,18 +105,18 @@ function Qe({
   naturalWidth: d,
   naturalHeight: p,
   onClick: o,
-  onMouseDown: g,
-  onMouseMove: f,
+  onMouseDown: y,
+  onMouseMove: v,
   onMouseUp: w,
   onMouseLeave: k,
   expandable: T = !0,
   expandLabel: E,
-  context: v = "default",
+  context: g = "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;
+  const [_, C] = I(!1), j = n && typeof n == "object" ? n : {}, [F, D] = I(!1), [ce, L] = I(!1), [le, de] = I(0), [pe, ue] = I(0), me = g === "default" && T && !!o;
   if (!_)
-    return ue ? /* @__PURE__ */ l(
+    return me ? /* @__PURE__ */ l(
       "div",
       {
         className: e ? `hds-focus ${e}` : "hds-focus",
@@ -136,15 +136,15 @@ function Qe({
         },
         onMouseEnter: () => D(!0),
         onMouseMove: (c) => {
-          le(c.clientX), pe(c.clientY), f == null || f(c);
+          de(c.clientX), ue(c.clientY), v == null || v(c);
         },
         onMouseLeave: (c) => {
           D(!1), k == null || k(c);
         },
-        onMouseDown: g,
+        onMouseDown: y,
         onMouseUp: w,
-        onFocus: () => Y(!0),
-        onBlur: () => Y(!1),
+        onFocus: () => L(!0),
+        onBlur: () => L(!1),
         children: [
           /* @__PURE__ */ a(
             "img",
@@ -157,14 +157,14 @@ function Qe({
               onError: () => C(!0)
             }
           ),
-          /* @__PURE__ */ a(K, { mode: "centered", visible: oe && !F, label: E }),
+          /* @__PURE__ */ a(K, { mode: "centered", visible: ce && !F, label: E }),
           /* @__PURE__ */ a(
             K,
             {
               mode: "cursor",
               visible: F,
-              x: ce,
-              y: de,
+              x: le,
+              y: pe,
               label: E
             }
           )
@@ -185,15 +185,15 @@ function Qe({
           onKeyDown: o ? (c) => {
             c.key === "Enter" && o(c);
           } : void 0,
-          onMouseDown: g,
-          onMouseMove: f,
+          onMouseDown: y,
+          onMouseMove: v,
           onMouseUp: w,
           onMouseLeave: k,
           onError: () => C(!0)
         }
       )
     );
-  if (v === "detail")
+  if (g === "detail")
     return /* @__PURE__ */ a(
       "div",
       {
@@ -209,33 +209,42 @@ function Qe({
         "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" } : {
+  const N = d && p ? d / p : 4 / 3, he = N < 1;
+  let W = {};
+  if (g === "lightbox")
+    W = n.width === "100%" ? { width: "100%", aspectRatio: `${N}`, display: "block" } : {
       height: n.maxHeight ?? "70vh",
       width: "auto",
+      maxWidth: "100%",
       aspectRatio: `${N}`,
       display: "block",
       flexShrink: 0
     };
   else {
-    let c, z;
+    let c, R;
     if (n.maxHeight && !n.width) {
-      const H = parseInt(n.maxHeight) || R;
-      z = H, c = Math.round(H * N);
+      const $ = parseInt(n.maxHeight) || z;
+      R = $, c = Math.round($ * 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 };
+      const $ = parseInt(n.maxWidth) || z;
+      c = $, R = Math.round($ / N);
+    } else n.width === "100%" ? (c = 0, R = 0) : he ? (c = z, R = Math.round(z / N)) : (R = z, c = Math.round(z * N));
+    W = c === 0 ? { width: "100%", aspectRatio: `${N}`, display: "block" } : {
+      // Fit the container: the frame keeps its aspect ratio but never exceeds the
+      // parent (a fixed 373x280 block overflowed a 276px column, hds#522).
+      width: c,
+      maxWidth: "100%",
+      aspectRatio: `${c / R}`,
+      display: "block",
+      flexShrink: 0
+    };
   }
   return /* @__PURE__ */ a(
     "div",
     {
       className: e,
       style: {
-        ...M,
+        ...W,
         backgroundColor: "var(--semantic-color-surface-overlay)",
         display: "flex",
         alignItems: "center",
@@ -243,7 +252,7 @@ function Qe({
         flexDirection: "column",
         gap: m.space.px4,
         overflow: "hidden",
-        cursor: o ? v === "lightbox" ? "zoom-in" : "pointer" : void 0
+        cursor: o ? g === "lightbox" ? "zoom-in" : "pointer" : void 0
       },
       role: o ? "button" : t ? "img" : void 0,
       "aria-hidden": !o && !t ? !0 : void 0,
@@ -272,17 +281,17 @@ function Qe({
 }
 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 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)]"
+), Ie = /* @__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)]"
+  `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}`
 ), Ee = /* @__PURE__ */ x(
+  "border-t border-solid border-[var(--semantic-color-border-default)]"
+), Ae = /* @__PURE__ */ x(
   "inline-flex transition-transform duration-[var(--hds-motion-productive-duration)] ease",
   {
     variants: {
@@ -294,7 +303,7 @@ const B = "[font-family:var(--semantic-typography-mono-font-family)] [font-size:
     defaultVariants: { expanded: !1 }
   }
 ), q = /* @__PURE__ */ x(
-  "flex cursor-pointer items-center gap-[var(--semantic-space-subgrid-gap)]",
+  "hds-touch-target flex cursor-pointer items-center gap-[var(--semantic-space-subgrid-gap)]",
   {
     variants: {
       variant: {
@@ -304,7 +313,7 @@ const B = "[font-family:var(--semantic-typography-mono-font-family)] [font-size:
     },
     defaultVariants: { variant: "block" }
   }
-), Ae = /* @__PURE__ */ x(
+), _e = /* @__PURE__ */ x(
   `block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap not-italic text-[var(--semantic-color-content-primary)] ${B}`,
   {
     variants: {
@@ -318,7 +327,8 @@ const B = "[font-family:var(--semantic-typography-mono-font-family)] [font-size:
 ), 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))]",
+  // 16px inset (scale-sm), not section-stack (80px): a 2-line snippet was 188px tall (hds#522).
+  "m-0 overflow-x-auto p-[var(--semantic-space-scale-sm)] pr-[calc(var(--semantic-space-scale-sm)_+_var(--semantic-size-control-lg))]",
   {
     variants: {
       panelBackground: {
@@ -339,31 +349,31 @@ function et({
   defaultExpanded: u = !1,
   className: d
 }) {
-  const [p, o] = I(!1), [g, f] = I(u), w = be(), k = W(null), T = W(null);
+  const [p, o] = I(!1), [y, v] = I(u), w = xe(), k = Y(null), T = Y(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);
+    const j = !y;
+    !j && ((F = T.current) != null && F.contains(document.activeElement)) && ((D = k.current) == null || D.focus()), v(j);
   }
-  function v() {
+  function g() {
     navigator.clipboard.writeText(r).then(() => {
       o(!0), setTimeout(() => o(!1), 2e3);
     });
   }
   if (t === "inline")
-    return /* @__PURE__ */ l("div", { className: b(Ne(), d), children: [
-      /* @__PURE__ */ a("code", { className: Ae({ truncateFromStart: i }), children: p ? "Copied" : r }),
+    return /* @__PURE__ */ l("div", { className: b(Ce(), d), children: [
+      /* @__PURE__ */ a("code", { className: _e({ truncateFromStart: i }), children: p ? "Copied" : r }),
       /* @__PURE__ */ a(
         "button",
         {
-          onClick: v,
+          onClick: g,
           "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)" })
+          children: p ? /* @__PURE__ */ a(H, { icon: O, size: "small", color: "var(--semantic-color-content-primary)" }) : /* @__PURE__ */ a(H, { 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: [
+  const A = e || n ? /* @__PURE__ */ a("div", { className: Ie(), children: /* @__PURE__ */ l("div", { className: J(), children: [
     e && /* @__PURE__ */ a(
       "span",
       {
@@ -384,10 +394,10 @@ function et({
   ] }) }) : null, _ = /* @__PURE__ */ a(
     "button",
     {
-      onClick: v,
+      onClick: g,
       "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)" })
+      children: p ? /* @__PURE__ */ a(H, { icon: O, size: "small", color: "var(--semantic-color-content-primary)" }) : /* @__PURE__ */ a(H, { icon: X, size: "small", color: "var(--semantic-color-content-primary)" })
     }
   ), C = /* @__PURE__ */ l("div", { className: "relative", children: [
     /* @__PURE__ */ a(
@@ -409,22 +419,22 @@ function et({
         ref: k,
         type: "button",
         onClick: E,
-        "aria-expanded": g,
+        "aria-expanded": y,
         "aria-controls": w,
-        className: b("hds-focus", Ie()),
+        className: b("hds-focus", Te()),
         children: [
           /* @__PURE__ */ l("span", { className: J(), children: [
-            /* @__PURE__ */ a("span", { children: g ? "Hide code" : "Show code" }),
+            /* @__PURE__ */ a("span", { children: y ? "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)" }) })
+          /* @__PURE__ */ a("span", { className: Ae({ expanded: y }), children: /* @__PURE__ */ a(H, { icon: we, size: "small", color: "var(--semantic-color-content-secondary)" }) })
         ]
       }
     ),
-    g && /* @__PURE__ */ a("div", { ref: T, id: w, className: Te(), children: C })
+    y && /* @__PURE__ */ a("div", { ref: T, id: w, className: Ee(), children: C })
   ] }) : /* @__PURE__ */ l("div", { className: b(U(), d), children: [
     A,
     /* @__PURE__ */ l("div", { className: "relative", children: [
@@ -442,7 +452,7 @@ function et({
     ] })
   ] });
 }
-const _e = /* @__PURE__ */ new Set([
+const je = /* @__PURE__ */ new Set([
   "import",
   "export",
   "from",
@@ -490,7 +500,7 @@ const _e = /* @__PURE__ */ new Set([
   "super",
   "in",
   "of"
-]), je = /* @__PURE__ */ new Set(["important", "inherit", "initial", "unset", "auto", "none"]);
+]), Re = /* @__PURE__ */ new Set(["important", "inherit", "initial", "unset", "auto", "none"]);
 function ze(r) {
   switch (r) {
     case "keyword":
@@ -507,7 +517,7 @@ function ze(r) {
       return "text-[var(--semantic-color-content-primary)]";
   }
 }
-function Re(r) {
+function Fe(r) {
   if (!r) return;
   const t = r.trim().toLowerCase();
   if (["ts", "tsx", "typescript", "js", "jsx", "javascript"].includes(t)) return "ts";
@@ -515,7 +525,7 @@ function Re(r) {
   if (t === "css") return "css";
   if (["html", "xml", "svg"].includes(t)) return "html";
 }
-function Fe(r) {
+function De(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; ) {
@@ -524,13 +534,13 @@ function Fe(r) {
     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 });
+      je.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;
   }
   return n < r.length && t.push({ kind: "plain", value: r.slice(n) }), t;
 }
-function De(r) {
+function $e(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; )
@@ -542,12 +552,12 @@ function He(r) {
   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",
+      kind: Re.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) {
+function Pe(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; )
@@ -555,14 +565,14 @@ function $e(r) {
   return n < r.length && t.push({ kind: "plain", value: r.slice(n) }), t;
 }
 function te(r, t) {
-  const i = Re(t);
+  const i = Fe(t);
   if (!i) return r;
   let n;
   try {
-    if (i === "ts") n = Fe(r);
-    else if (i === "json") n = De(r);
+    if (i === "ts") n = De(r);
+    else if (i === "json") n = $e(r);
     else if (i === "css") n = He(r);
-    else if (i === "html") n = $e(r);
+    else if (i === "html") n = Pe(r);
     else return r;
   } catch {
     return r;
@@ -571,60 +581,68 @@ function te(r, t) {
     (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",
+const ae = {
   display: "flex",
+  maxWidth: "100%",
   alignItems: "center",
   justifyContent: "center",
   fontFamily: m.fontFamily
 };
 function tt({
   displayText: r = "Oops",
-  message: t = "Something went wrong"
+  message: t = "Something went wrong",
+  fullPage: i = !1
 }) {
-  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,
+  const n = re("spatial");
+  return /* @__PURE__ */ a(
+    "div",
     {
-      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,
-          {
-            variant: "display",
-            as: "h1",
-            className: "text-primary",
-            style: { whiteSpace: "nowrap" },
-            children: r
-          }
-        ),
-        /* @__PURE__ */ a(
-          P,
-          {
-            variant: "heading2",
-            as: "p",
-            className: "text-secondary",
-            style: { whiteSpace: "nowrap" },
-            children: t
-          }
-        ),
-        /* @__PURE__ */ a(
-          V,
-          {
-            variant: "primary",
-            onClick: () => {
-              typeof window < "u" && window.history.back();
-            },
-            children: "Back"
-          }
-        )
-      ] })
+      style: i ? { ...ae, minHeight: "100vh" } : ae,
+      "data-role": "error-recovery",
+      children: /* @__PURE__ */ a(M, { padding: "component", className: "min-w-0 max-w-full", children: /* @__PURE__ */ a(
+        se.div,
+        {
+          initial: { opacity: 0, y: 2 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: n.duration, ease: n.easing },
+          children: /* @__PURE__ */ l(h, { gap: "normal", style: { alignItems: "center", textAlign: "center" }, children: [
+            /* @__PURE__ */ a(
+              V,
+              {
+                variant: "display",
+                as: "h1",
+                className: "text-primary",
+                style: { overflowWrap: "anywhere" },
+                children: r
+              }
+            ),
+            /* @__PURE__ */ a(
+              V,
+              {
+                variant: "title",
+                as: "p",
+                className: "text-secondary",
+                style: { overflowWrap: "anywhere" },
+                children: t
+              }
+            ),
+            /* @__PURE__ */ a(
+              P,
+              {
+                variant: "primary",
+                onClick: () => {
+                  typeof window < "u" && window.history.back();
+                },
+                children: "Back"
+              }
+            )
+          ] })
+        }
+      ) })
     }
-  ) }) });
+  );
 }
-const at = /* @__PURE__ */ ye.forwardRef(function({ children: t, animation: i = "fade-up", className: n, style: e, as: s = "div" }, u) {
+const at = /* @__PURE__ */ be.forwardRef(function({ children: t, animation: i = "fade-up", className: n, style: e, as: s = "div" }, u) {
   return /* @__PURE__ */ a(
     s,
     {
@@ -637,7 +655,7 @@ const at = /* @__PURE__ */ ye.forwardRef(function({ children: t, animation: i =
       children: t
     }
   );
-}), nt = /* @__PURE__ */ y.forwardRef(
+}), nt = /* @__PURE__ */ f.forwardRef(
   function({ breadcrumb: t, title: i, status: n, actions: e, level: s = 1, className: u, ...d }, p) {
     const o = `h${s}`;
     return /* @__PURE__ */ a(
@@ -655,7 +673,7 @@ const at = /* @__PURE__ */ ye.forwardRef(function({ children: t, animation: i =
                 o,
                 {
                   style: {
-                    ...m.typeStyles.heading2,
+                    ...m.typeStyles.title,
                     margin: 0,
                     color: "var(--semantic-color-content-primary)"
                   },
@@ -670,23 +688,23 @@ const at = /* @__PURE__ */ ye.forwardRef(function({ children: t, animation: i =
       }
     );
   }
-), Be = 4, Ve = "var(--semantic-size-tile)", Me = " ", rt = /* @__PURE__ */ y.forwardRef(
+), Ve = 4, Be = "var(--semantic-size-tile)", We = " ", rt = /* @__PURE__ */ f.forwardRef(
   function({ label: t, value: i, sub: n, tone: e = "neutral", style: s, ...u }, d) {
     return /* @__PURE__ */ a(
-      L,
+      M,
       {
         ref: d,
         padding: "item",
         "data-hds-component": "MetricTile",
         "data-tone": e,
-        style: { minHeight: Ve, ...s },
+        style: { minHeight: Be, ...s },
         ...u,
         children: /* @__PURE__ */ a(
-          re.Metric,
+          ie.Metric,
           {
             label: t,
             value: i,
-            sub: n ?? Me,
+            sub: n ?? We,
             tone: e,
             className: "px-0"
           }
@@ -695,16 +713,17 @@ const at = /* @__PURE__ */ ye.forwardRef(function({ children: t, animation: i =
     );
   }
 );
-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);
+function oe(r) {
+  return f.Children.toArray(r).reduce((t, i) => f.isValidElement(i) ? i.type === f.Fragment ? t + oe(i.props.children) : t + 1 : t, 0);
 }
-const it = /* @__PURE__ */ y.forwardRef(
+const it = /* @__PURE__ */ f.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 }) });
+    const e = Math.min(Math.max(oe(t), 1), Ve);
+    return /* @__PURE__ */ a("div", { ref: n, "data-hds-component": "MetricTiles", ...i, children: /* @__PURE__ */ a(ne, { columns: e, gap: "tight", align: "stretch", children: t }) });
   }
-), st = /* @__PURE__ */ y.forwardRef(
+), st = /* @__PURE__ */ f.forwardRef(
   function({ primary: t, secondary: i, destructive: n, sticky: e = !1, className: s, style: u, ...d }, p) {
+    const o = f.isValidElement(t) && t.type === P && t.props.variant === void 0 ? f.cloneElement(t, { variant: "primary" }) : t;
     return /* @__PURE__ */ a(
       "div",
       {
@@ -726,7 +745,7 @@ const it = /* @__PURE__ */ y.forwardRef(
               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
+                o
               ] }) })
             ]
           }
@@ -734,7 +753,7 @@ const it = /* @__PURE__ */ y.forwardRef(
       }
     );
   }
-), ot = /* @__PURE__ */ y.forwardRef(function({
+), ot = /* @__PURE__ */ f.forwardRef(function({
   title: t,
   description: i,
   actionLabel: n,
@@ -744,37 +763,37 @@ const it = /* @__PURE__ */ y.forwardRef(
   cancelLabel: d = "Cancel",
   level: p = 2,
   ...o
-}, g) {
-  const f = y.useId();
+}, y) {
+  const v = f.useId();
   return /* @__PURE__ */ a(
     "section",
     {
-      ref: g,
+      ref: y,
       "data-hds-component": "DestructiveSection",
-      "aria-labelledby": f,
+      "aria-labelledby": v,
       ...o,
-      children: /* @__PURE__ */ a(re, { tone: "danger", children: /* @__PURE__ */ l(h, { direction: "row", wrap: "wrap", gap: "normal", align: "center", justify: "space-between", children: [
+      children: /* @__PURE__ */ a(ie, { 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(V, { id: v, as: `h${p}`, variant: "title", children: t }),
+          /* @__PURE__ */ a(V, { 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__ */ a(S.Trigger, { asChild: !0, children: /* @__PURE__ */ a(P, { 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 }) })
+              /* @__PURE__ */ a(S.Cancel, { asChild: !0, children: /* @__PURE__ */ a(P, { variant: "secondary", children: d }) }),
+              /* @__PURE__ */ a(S.Action, { asChild: !0, children: /* @__PURE__ */ a(P, { variant: "primary", tone: "danger", onClick: u, children: e }) })
             ] })
           ] })
         ] }) })
       ] }) })
     }
   );
-}), Le = "8rem", Ye = "6rem", ct = /* @__PURE__ */ y.forwardRef(function({
+}), Me = "8rem", Le = "6rem", ct = /* @__PURE__ */ f.forwardRef(function({
   title: t,
   toolbar: i,
   columns: n,
@@ -784,11 +803,11 @@ const it = /* @__PURE__ */ y.forwardRef(
   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,
+}, y) {
+  const v = f.useId(), w = e.some((g) => g.actions != null), k = w ? [...n, { key: "__actions", label: s, align: "right", width: "max-content" }] : n, T = e.map((g) => ({
+    key: g.key,
     cells: [
-      ...v.cells.map((A, _) => {
+      ...g.cells.map((A, _) => {
         var C;
         return {
           slot: "custom",
@@ -800,27 +819,27 @@ const it = /* @__PURE__ */ y.forwardRef(
         {
           slot: "action",
           align: "right",
-          content: /* @__PURE__ */ a(h, { direction: "row", wrap: "wrap", gap: "tight", align: "center", justify: "end", children: v.actions })
+          content: /* @__PURE__ */ a(h, { direction: "row", wrap: "wrap", gap: "tight", align: "center", justify: "end", children: g.actions })
         }
       ] : []
     ]
-  })), 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: [
+  })), E = `calc(${n.length} * ${Me}${w ? ` + ${Le}` : ""})`;
+  return /* @__PURE__ */ a("section", { ref: y, "data-hds-component": "DataTableSection", "aria-labelledby": v, ...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 }),
+      /* @__PURE__ */ a(V, { id: v, as: `h${p}`, variant: "title", 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,
+    e.length === 0 ? /* @__PURE__ */ a(ge, { title: u, description: d }) : /* @__PURE__ */ a(
+      ye,
       {
         columns: k,
         rows: T,
         minWidth: E,
-        labelledBy: f
+        labelledBy: v
       }
     )
   ] }) });
-}), lt = /* @__PURE__ */ y.forwardRef(
+}), lt = /* @__PURE__ */ f.forwardRef(
   function({ tone: t = "neutral", title: i, notes: n, trailing: e, className: s, ...u }, d) {
     return /* @__PURE__ */ l(
       "div",
@@ -829,14 +848,14 @@ const it = /* @__PURE__ */ y.forwardRef(
         "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",
+          "flex 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))
+            /* @__PURE__ */ a("p", { className: "m-0 hds-type-ui text-foreground", children: i }),
+            n == null ? void 0 : n.map((p, o) => /* @__PURE__ */ a("p", { className: "m-0 mt-1 hds-type-caption text-muted-foreground", children: p }, o))
           ] }),
           e && /* @__PURE__ */ a("div", { className: "shrink-0", children: e })
         ]
@@ -862,12 +881,12 @@ export {
   lt as StatusTile,
   Q as blockCodeTextVariants,
   U as blockContainerVariants,
-  Ce as blockHeaderVariants,
-  Ee as chevronVariants,
-  Ie as collapsibleToggleVariants,
+  Ie as blockHeaderVariants,
+  Ae as chevronVariants,
+  Te as collapsibleToggleVariants,
   q as copyButtonVariants,
-  Ae as inlineCodeTextVariants,
-  Ne as inlineWrapperVariants,
+  _e as inlineCodeTextVariants,
+  Ce as inlineWrapperVariants,
   ee as prePanelVariants,
   ft as useFieldWiring
 };