@hirobius/design-system 0.22.0 → 0.23.0

package/dist/patterns.js

@@ -1,28 +1,28 @@
 'use client';
-import { F as ut, b as mt, a as ht, u as ft } from "./chunks/form-By82qZcC.js";
+import { F as ht, b as ft, a as vt, u as gt } from "./chunks/form-zCZ_B83I.js";
 import { jsx as a, jsxs as l } from "react/jsx-runtime";
 import m from "./tokens.js";
-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 { C as ge, h as ye, S as h, G as ie, u as se, a as M, I as D, T as H, B as $, b as oe, A as S, E as be, c as xe } from "./chunks/empty-state-ChC_xZfg.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 we, { useState as I, useId as ke, useRef as O } from "react";
+import { AnimatePresence as X, motion as ce } from "motion/react";
 import { cva as x } from "class-variance-authority";
-import { Check as O, Copy as X, ChevronDown as we } from "lucide-react";
+import { Check as G, Copy as K, ChevronDown as Se } from "lucide-react";
 import { cn as b } from "./cn.js";
-const ke = {
+const Ne = {
   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({
+function et({
   children: r,
   maxWidth: t = "max",
   paddingY: i = "default",
   style: n,
   className: e
 }) {
-  const s = ke[i];
-  return /* @__PURE__ */ a(fe, { maxWidth: t, className: e, children: /* @__PURE__ */ a(
+  const s = Ne[i];
+  return /* @__PURE__ */ a(ge, { maxWidth: t, className: e, children: /* @__PURE__ */ a(
     "div",
     {
       "data-hds-component": "Page",
@@ -32,7 +32,7 @@ function qe({
     }
   ) });
 }
-const Se = {
+const Ce = {
   background: "var(--semantic-color-surface-accent)",
   border: "none",
   borderRadius: m.borderRadius.full,
@@ -43,26 +43,26 @@ const Se = {
   pointerEvents: "none",
   paddingBlock: m.space.px6,
   paddingInline: m.space.px16
-}, Ne = {
+}, Ie = {
   ...m.typeStyles.ui,
   userSelect: "none",
   whiteSpace: "nowrap"
 };
-function G({ label: r }) {
-  const t = re("productive");
+function U({ label: r }) {
+  const t = se("productive");
   return /* @__PURE__ */ a(
-    se.div,
+    ce.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(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 }) }) })
+      children: /* @__PURE__ */ a(M, { as: "span", padding: "none", style: Ce, children: /* @__PURE__ */ a(h, { as: "span", direction: "row", gap: "xs", align: "center", style: Ie, 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(ve, { children: /* @__PURE__ */ a(Z, { children: r && /* @__PURE__ */ a(
+function J({ visible: r, mode: t, label: i = "Expand", x: n = 0, y: e = 0 }) {
+  return t === "cursor" ? /* @__PURE__ */ a(ye, { children: /* @__PURE__ */ a(X, { children: r && /* @__PURE__ */ a(
     h,
     {
       gap: "xs",
@@ -74,10 +74,10 @@ function K({ visible: r, mode: t, label: i = "Expand", x: n = 0, y: e = 0 }) {
         transform: "translate(14px, -50%)",
         pointerEvents: "none"
       },
-      children: /* @__PURE__ */ a(G, { label: i })
+      children: /* @__PURE__ */ a(U, { label: i })
     }
-  ) }) }) : /* @__PURE__ */ a(Z, { children: r && /* @__PURE__ */ a(
-    ne,
+  ) }) }) : /* @__PURE__ */ a(X, { children: r && /* @__PURE__ */ a(
+    ie,
     {
       columns: 1,
       gap: "tight",
@@ -89,12 +89,12 @@ function K({ visible: r, mode: t, label: i = "Expand", x: n = 0, y: e = 0 }) {
         pointerEvents: "none",
         zIndex: m.zIndex.focus
       },
-      children: /* @__PURE__ */ a(G, { label: i })
+      children: /* @__PURE__ */ a(U, { label: i })
     }
   ) });
 }
 const z = 280;
-function Qe({
+function tt({
   src: r,
   alt: t,
   title: i,
@@ -114,9 +114,11 @@ function Qe({
   context: g = "default",
   loading: A = "lazy"
 }) {
-  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;
+  const [_, N] = I(!1), [V, B] = I(r);
+  r !== V && (B(r), N(!1));
+  const j = n && typeof n == "object" ? n : {}, [L, Y] = I(!1), [de, Z] = I(!1), [pe, ue] = I(0), [me, he] = I(0), fe = g === "default" && T && !!o;
   if (!_)
-    return me ? /* @__PURE__ */ l(
+    return fe ? /* @__PURE__ */ l(
       "div",
       {
         className: e ? `hds-focus ${e}` : "hds-focus",
@@ -134,17 +136,17 @@ function Qe({
         onKeyDown: (c) => {
           (c.key === "Enter" || c.key === " ") && o && (c.preventDefault(), o(c));
         },
-        onMouseEnter: () => D(!0),
+        onMouseEnter: () => Y(!0),
         onMouseMove: (c) => {
-          de(c.clientX), ue(c.clientY), v == null || v(c);
+          ue(c.clientX), he(c.clientY), v == null || v(c);
         },
         onMouseLeave: (c) => {
-          D(!1), k == null || k(c);
+          Y(!1), k == null || k(c);
         },
         onMouseDown: y,
         onMouseUp: w,
-        onFocus: () => L(!0),
-        onBlur: () => L(!1),
+        onFocus: () => Z(!0),
+        onBlur: () => Z(!1),
         children: [
           /* @__PURE__ */ a(
             "img",
@@ -154,17 +156,17 @@ function Qe({
               loading: A,
               style: j,
               draggable: s,
-              onError: () => C(!0)
+              onError: () => N(!0)
             }
           ),
-          /* @__PURE__ */ a(K, { mode: "centered", visible: ce && !F, label: E }),
+          /* @__PURE__ */ a(J, { mode: "centered", visible: de && !L, label: E }),
           /* @__PURE__ */ a(
-            K,
+            J,
             {
               mode: "cursor",
-              visible: F,
-              x: le,
-              y: pe,
+              visible: L,
+              x: pe,
+              y: me,
               label: E
             }
           )
@@ -189,7 +191,7 @@ function Qe({
           onMouseMove: v,
           onMouseUp: w,
           onMouseLeave: k,
-          onError: () => C(!0)
+          onError: () => N(!0)
         }
       )
     );
@@ -209,27 +211,27 @@ function Qe({
         "aria-label": t || void 0
       }
     );
-  const N = d && p ? d / p : 4 / 3, he = N < 1;
+  const C = d && p ? d / p : 4 / 3, ve = C < 1;
   let W = {};
   if (g === "lightbox")
-    W = n.width === "100%" ? { width: "100%", aspectRatio: `${N}`, display: "block" } : {
+    W = n.width === "100%" ? { width: "100%", aspectRatio: `${C}`, display: "block" } : {
       height: n.maxHeight ?? "70vh",
       width: "auto",
       maxWidth: "100%",
-      aspectRatio: `${N}`,
+      aspectRatio: `${C}`,
       display: "block",
       flexShrink: 0
     };
   else {
     let c, R;
     if (n.maxHeight && !n.width) {
-      const $ = parseInt(n.maxHeight) || z;
-      R = $, c = Math.round($ * N);
+      const F = parseInt(n.maxHeight) || z;
+      R = F, c = Math.round(F * C);
     } else if (n.maxWidth && !n.height) {
-      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" } : {
+      const F = parseInt(n.maxWidth) || z;
+      c = F, R = Math.round(F / C);
+    } else n.width === "100%" ? (c = 0, R = 0) : ve ? (c = z, R = Math.round(z / C)) : (R = z, c = Math.round(z * C));
+    W = c === 0 ? { width: "100%", aspectRatio: `${C}`, 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,
@@ -279,19 +281,19 @@ 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(
+const P = "[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)]", q = /* @__PURE__ */ x(
   "overflow-hidden rounded-[var(--semantic-radius-action)] border border-solid border-[var(--semantic-color-border-default)] bg-[var(--semantic-color-surface-raised)]"
-), Ce = /* @__PURE__ */ x(
+), Te = /* @__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(
+), Ee = /* @__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(
+), Q = /* @__PURE__ */ x(
   "flex items-center gap-[var(--semantic-space-scale-xs)]"
-), Te = /* @__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}`
-), Ee = /* @__PURE__ */ x(
-  "border-t border-solid border-[var(--semantic-color-border-default)]"
 ), Ae = /* @__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)] ${P}`
+), _e = /* @__PURE__ */ x(
+  "border-t border-solid border-[var(--semantic-color-border-default)]"
+), je = /* @__PURE__ */ x(
   "inline-flex transition-transform duration-[var(--hds-motion-productive-duration)] ease",
   {
     variants: {
@@ -302,7 +304,7 @@ const B = "[font-family:var(--semantic-typography-mono-font-family)] [font-size:
     },
     defaultVariants: { expanded: !1 }
   }
-), q = /* @__PURE__ */ x(
+), ee = /* @__PURE__ */ x(
   "hds-touch-target flex cursor-pointer items-center gap-[var(--semantic-space-subgrid-gap)]",
   {
     variants: {
@@ -313,8 +315,8 @@ const B = "[font-family:var(--semantic-typography-mono-font-family)] [font-size:
     },
     defaultVariants: { variant: "block" }
   }
-), _e = /* @__PURE__ */ x(
-  `block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap not-italic text-[var(--semantic-color-content-primary)] ${B}`,
+), Re = /* @__PURE__ */ x(
+  `block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap not-italic text-[var(--semantic-color-content-primary)] ${P}`,
   {
     variants: {
       truncateFromStart: {
@@ -324,9 +326,9 @@ const B = "[font-family:var(--semantic-typography-mono-font-family)] [font-size:
     },
     defaultVariants: { truncateFromStart: !1 }
   }
-), Q = /* @__PURE__ */ x(
-  `whitespace-pre text-[var(--semantic-color-content-primary)] ${B}`
-), ee = /* @__PURE__ */ x(
+), te = /* @__PURE__ */ x(
+  `whitespace-pre text-[var(--semantic-color-content-primary)] ${P}`
+), ae = /* @__PURE__ */ x(
   // 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))]",
   {
@@ -339,7 +341,7 @@ const B = "[font-family:var(--semantic-typography-mono-font-family)] [font-size:
     defaultVariants: { panelBackground: !1 }
   }
 );
-function et({
+function at({
   code: r,
   variant: t = "block",
   truncateFromStart: i = !1,
@@ -349,11 +351,11 @@ function et({
   defaultExpanded: u = !1,
   className: d
 }) {
-  const [p, o] = I(!1), [y, v] = I(u), w = xe(), k = Y(null), T = Y(null);
+  const [p, o] = I(!1), [y, v] = I(u), w = ke(), k = O(null), T = O(null);
   function E() {
-    var F, D;
-    const j = !y;
-    !j && ((F = T.current) != null && F.contains(document.activeElement)) && ((D = k.current) == null || D.focus()), v(j);
+    var B, j;
+    const V = !y;
+    !V && ((B = T.current) != null && B.contains(document.activeElement)) && ((j = k.current) == null || j.focus()), v(V);
   }
   function g() {
     navigator.clipboard.writeText(r).then(() => {
@@ -361,23 +363,23 @@ function et({
     });
   }
   if (t === "inline")
-    return /* @__PURE__ */ l("div", { className: b(Ce(), d), children: [
-      /* @__PURE__ */ a("code", { className: _e({ truncateFromStart: i }), children: p ? "Copied" : r }),
+    return /* @__PURE__ */ l("div", { className: b(Te(), d), children: [
+      /* @__PURE__ */ a("code", { className: Re({ truncateFromStart: i }), children: p ? "Copied" : r }),
       /* @__PURE__ */ a(
         "button",
         {
           onClick: g,
           "aria-label": p ? "Copied" : "Copy code",
-          className: b("hds-focus", q({ variant: "inline" })),
-          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)" })
+          className: b("hds-focus", ee({ variant: "inline" })),
+          children: p ? /* @__PURE__ */ a(D, { icon: G, size: "small", color: "var(--semantic-color-content-primary)" }) : /* @__PURE__ */ a(D, { icon: K, size: "small", color: "var(--semantic-color-content-primary)" })
         }
       )
     ] });
-  const A = e || n ? /* @__PURE__ */ a("div", { className: Ie(), children: /* @__PURE__ */ l("div", { className: J(), children: [
+  const A = e || n ? /* @__PURE__ */ a("div", { className: Ee(), children: /* @__PURE__ */ l("div", { className: Q(), children: [
     e && /* @__PURE__ */ a(
       "span",
       {
-        className: b(B, "text-[var(--semantic-color-content-primary)]"),
+        className: b(P, "text-[var(--semantic-color-content-primary)]"),
         children: e
       }
     ),
@@ -385,7 +387,7 @@ function et({
       "span",
       {
         className: b(
-          B,
+          P,
           "text-[var(--semantic-color-content-secondary)]"
         ),
         children: n.toLowerCase()
@@ -396,23 +398,23 @@ function et({
     {
       onClick: g,
       "aria-label": p ? "Copied" : "Copy code",
-      className: b("hds-focus", q({ variant: "block" })),
-      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)" })
+      className: b("hds-focus", ee({ variant: "block" })),
+      children: p ? /* @__PURE__ */ a(D, { icon: G, size: "small", color: "var(--semantic-color-content-primary)" }) : /* @__PURE__ */ a(D, { icon: K, size: "small", color: "var(--semantic-color-content-primary)" })
     }
-  ), C = /* @__PURE__ */ l("div", { className: "relative", children: [
+  ), N = /* @__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) })
+        className: ae({ panelBackground: !0 }),
+        children: /* @__PURE__ */ a("code", { className: te(), children: ne(r, n) })
       }
     ),
     _
   ] });
-  return s ? /* @__PURE__ */ l("div", { className: b(U(), d), children: [
+  return s ? /* @__PURE__ */ l("div", { className: b(q(), d), children: [
     /* @__PURE__ */ l(
       "button",
       {
@@ -421,21 +423,21 @@ function et({
         onClick: E,
         "aria-expanded": y,
         "aria-controls": w,
-        className: b("hds-focus", Te()),
+        className: b("hds-focus", Ae()),
         children: [
-          /* @__PURE__ */ l("span", { className: J(), children: [
+          /* @__PURE__ */ l("span", { className: Q(), children: [
             /* @__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: Ae({ expanded: y }), children: /* @__PURE__ */ a(H, { icon: we, size: "small", color: "var(--semantic-color-content-secondary)" }) })
+          /* @__PURE__ */ a("span", { className: je({ expanded: y }), children: /* @__PURE__ */ a(D, { icon: Se, size: "small", color: "var(--semantic-color-content-secondary)" }) })
         ]
       }
     ),
-    y && /* @__PURE__ */ a("div", { ref: T, id: w, className: Ee(), children: C })
-  ] }) : /* @__PURE__ */ l("div", { className: b(U(), d), children: [
+    y && /* @__PURE__ */ a("div", { ref: T, id: w, className: _e(), children: N })
+  ] }) : /* @__PURE__ */ l("div", { className: b(q(), d), children: [
     A,
     /* @__PURE__ */ l("div", { className: "relative", children: [
       /* @__PURE__ */ a(
@@ -444,15 +446,15 @@ function et({
           tabIndex: 0,
           role: "region",
           "aria-label": "Code sample",
-          className: ee({ panelBackground: !1 }),
-          children: /* @__PURE__ */ a("code", { className: Q(), children: te(r, n) })
+          className: ae({ panelBackground: !1 }),
+          children: /* @__PURE__ */ a("code", { className: te(), children: ne(r, n) })
         }
       ),
       _
     ] })
   ] });
 }
-const je = /* @__PURE__ */ new Set([
+const ze = /* @__PURE__ */ new Set([
   "import",
   "export",
   "from",
@@ -500,8 +502,8 @@ const je = /* @__PURE__ */ new Set([
   "super",
   "in",
   "of"
-]), Re = /* @__PURE__ */ new Set(["important", "inherit", "initial", "unset", "auto", "none"]);
-function ze(r) {
+]), Fe = /* @__PURE__ */ new Set(["important", "inherit", "initial", "unset", "auto", "none"]);
+function De(r) {
   switch (r) {
     case "keyword":
       return "text-[var(--semantic-color-content-accent,var(--semantic-color-content-primary))]";
@@ -517,7 +519,7 @@ function ze(r) {
       return "text-[var(--semantic-color-content-primary)]";
   }
 }
-function Fe(r) {
+function $e(r) {
   if (!r) return;
   const t = r.trim().toLowerCase();
   if (["ts", "tsx", "typescript", "js", "jsx", "javascript"].includes(t)) return "ts";
@@ -525,7 +527,7 @@ function Fe(r) {
   if (t === "css") return "css";
   if (["html", "xml", "svg"].includes(t)) return "html";
 }
-function De(r) {
+function He(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; ) {
@@ -534,80 +536,80 @@ function De(r) {
     else if (e[3]) t.push({ kind: "number", value: e[3] });
     else if (e[4]) {
       const s = e[4];
-      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 });
+      ze.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 $e(r) {
+function Pe(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) {
+function Ve(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: Re.has(e[5].toLowerCase()) ? "keyword" : "plain",
+      kind: Fe.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 Pe(r) {
+function Be(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 = Fe(t);
+function ne(r, t) {
+  const i = $e(t);
   if (!i) return r;
   let n;
   try {
-    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 = Pe(r);
+    if (i === "ts") n = He(r);
+    else if (i === "json") n = Pe(r);
+    else if (i === "css") n = Ve(r);
+    else if (i === "html") n = Be(r);
     else return r;
   } catch {
     return r;
   }
   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)
+    (e, s) => e.kind === "plain" ? /* @__PURE__ */ a("span", { children: e.value }, s) : /* @__PURE__ */ a("span", { className: De(e.kind), children: e.value }, s)
   );
 }
-const ae = {
+const re = {
   display: "flex",
   maxWidth: "100%",
   alignItems: "center",
   justifyContent: "center",
   fontFamily: m.fontFamily
 };
-function tt({
+function nt({
   displayText: r = "Oops",
   message: t = "Something went wrong",
   fullPage: i = !1
 }) {
-  const n = re("spatial");
+  const n = se("spatial");
   return /* @__PURE__ */ a(
     "div",
     {
-      style: i ? { ...ae, minHeight: "100vh" } : ae,
+      style: i ? { ...re, minHeight: "100vh" } : re,
       "data-role": "error-recovery",
       children: /* @__PURE__ */ a(M, { padding: "component", className: "min-w-0 max-w-full", children: /* @__PURE__ */ a(
-        se.div,
+        ce.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,
+              H,
               {
                 variant: "display",
                 as: "h1",
@@ -617,7 +619,7 @@ function tt({
               }
             ),
             /* @__PURE__ */ a(
-              V,
+              H,
               {
                 variant: "title",
                 as: "p",
@@ -627,7 +629,7 @@ function tt({
               }
             ),
             /* @__PURE__ */ a(
-              P,
+              $,
               {
                 variant: "primary",
                 onClick: () => {
@@ -642,7 +644,7 @@ function tt({
     }
   );
 }
-const at = /* @__PURE__ */ be.forwardRef(function({ children: t, animation: i = "fade-up", className: n, style: e, as: s = "div" }, u) {
+const rt = /* @__PURE__ */ we.forwardRef(function({ children: t, animation: i = "fade-up", className: n, style: e, as: s = "div" }, u) {
   return /* @__PURE__ */ a(
     s,
     {
@@ -655,7 +657,7 @@ const at = /* @__PURE__ */ be.forwardRef(function({ children: t, animation: i =
       children: t
     }
   );
-}), nt = /* @__PURE__ */ f.forwardRef(
+}), it = /* @__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(
@@ -688,7 +690,7 @@ const at = /* @__PURE__ */ be.forwardRef(function({ children: t, animation: i =
       }
     );
   }
-), Ve = 4, Be = "var(--semantic-size-tile)", We = " ", rt = /* @__PURE__ */ f.forwardRef(
+), We = 4, Me = "var(--semantic-size-tile)", Le = " ", st = /* @__PURE__ */ f.forwardRef(
   function({ label: t, value: i, sub: n, tone: e = "neutral", style: s, ...u }, d) {
     return /* @__PURE__ */ a(
       M,
@@ -697,14 +699,14 @@ const at = /* @__PURE__ */ be.forwardRef(function({ children: t, animation: i =
         padding: "item",
         "data-hds-component": "MetricTile",
         "data-tone": e,
-        style: { minHeight: Be, ...s },
+        style: { minHeight: Me, ...s },
         ...u,
         children: /* @__PURE__ */ a(
-          ie.Metric,
+          oe.Metric,
           {
             label: t,
             value: i,
-            sub: n ?? We,
+            sub: n ?? Le,
             tone: e,
             className: "px-0"
           }
@@ -713,17 +715,17 @@ const at = /* @__PURE__ */ be.forwardRef(function({ children: t, animation: i =
     );
   }
 );
-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);
+function le(r) {
+  return f.Children.toArray(r).reduce((t, i) => f.isValidElement(i) ? i.type === f.Fragment ? t + le(i.props.children) : t + 1 : t, 0);
 }
-const it = /* @__PURE__ */ f.forwardRef(
+const ot = /* @__PURE__ */ f.forwardRef(
   function({ children: t, ...i }, n) {
-    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 }) });
+    const e = Math.min(Math.max(le(t), 1), We);
+    return /* @__PURE__ */ a("div", { ref: n, "data-hds-component": "MetricTiles", ...i, children: /* @__PURE__ */ a(ie, { columns: e, gap: "tight", align: "stretch", children: t }) });
   }
-), st = /* @__PURE__ */ f.forwardRef(
+), ct = /* @__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;
+    const o = f.isValidElement(t) && t.type === $ && t.props.variant === void 0 ? f.cloneElement(t, { variant: "primary" }) : t;
     return /* @__PURE__ */ a(
       "div",
       {
@@ -753,7 +755,7 @@ const it = /* @__PURE__ */ f.forwardRef(
       }
     );
   }
-), ot = /* @__PURE__ */ f.forwardRef(function({
+), lt = /* @__PURE__ */ f.forwardRef(function({
   title: t,
   description: i,
   actionLabel: n,
@@ -772,28 +774,28 @@ const it = /* @__PURE__ */ f.forwardRef(
       "data-hds-component": "DestructiveSection",
       "aria-labelledby": v,
       ...o,
-      children: /* @__PURE__ */ a(ie, { tone: "danger", children: /* @__PURE__ */ l(h, { direction: "row", wrap: "wrap", gap: "normal", align: "center", justify: "space-between", children: [
+      children: /* @__PURE__ */ a(oe, { 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(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(H, { id: v, as: `h${p}`, variant: "title", children: t }),
+          /* @__PURE__ */ a(H, { 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(P, { variant: "secondary", tone: "danger", children: n ?? e }) }),
+          /* @__PURE__ */ a(S.Trigger, { asChild: !0, children: /* @__PURE__ */ a($, { 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(P, { variant: "secondary", children: d }) }),
-              /* @__PURE__ */ a(S.Action, { asChild: !0, children: /* @__PURE__ */ a(P, { variant: "primary", tone: "danger", onClick: u, children: e }) })
+              /* @__PURE__ */ a(S.Cancel, { asChild: !0, children: /* @__PURE__ */ a($, { variant: "secondary", children: d }) }),
+              /* @__PURE__ */ a(S.Action, { asChild: !0, children: /* @__PURE__ */ a($, { variant: "primary", tone: "danger", onClick: u, children: e }) })
             ] })
           ] })
         ] }) })
       ] }) })
     }
   );
-}), Me = "8rem", Le = "6rem", ct = /* @__PURE__ */ f.forwardRef(function({
+}), Ye = "8rem", Ze = "6rem", dt = /* @__PURE__ */ f.forwardRef(function({
   title: t,
   toolbar: i,
   columns: n,
@@ -808,11 +810,11 @@ const it = /* @__PURE__ */ f.forwardRef(
     key: g.key,
     cells: [
       ...g.cells.map((A, _) => {
-        var C;
+        var N;
         return {
           slot: "custom",
           content: A,
-          align: (C = n[_]) == null ? void 0 : C.align
+          align: (N = n[_]) == null ? void 0 : N.align
         };
       }),
       ...w ? [
@@ -823,14 +825,14 @@ const it = /* @__PURE__ */ f.forwardRef(
         }
       ] : []
     ]
-  })), E = `calc(${n.length} * ${Me}${w ? ` + ${Le}` : ""})`;
+  })), E = `calc(${n.length} * ${Ye}${w ? ` + ${Ze}` : ""})`;
   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(V, { id: v, as: `h${p}`, variant: "title", children: t }),
+      /* @__PURE__ */ a(H, { 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(ge, { title: u, description: d }) : /* @__PURE__ */ a(
-      ye,
+    e.length === 0 ? /* @__PURE__ */ a(be, { title: u, description: d }) : /* @__PURE__ */ a(
+      xe,
       {
         columns: k,
         rows: T,
@@ -839,7 +841,7 @@ const it = /* @__PURE__ */ f.forwardRef(
       }
     )
   ] }) });
-}), lt = /* @__PURE__ */ f.forwardRef(
+}), pt = /* @__PURE__ */ f.forwardRef(
   function({ tone: t = "neutral", title: i, notes: n, trailing: e, className: s, ...u }, d) {
     return /* @__PURE__ */ l(
       "div",
@@ -864,29 +866,29 @@ const it = /* @__PURE__ */ f.forwardRef(
   }
 );
 export {
-  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,
-  Ie as blockHeaderVariants,
-  Ae as chevronVariants,
-  Te as collapsibleToggleVariants,
-  q as copyButtonVariants,
-  _e as inlineCodeTextVariants,
-  Ce as inlineWrapperVariants,
-  ee as prePanelVariants,
-  ft as useFieldWiring
+  tt as AssetImg,
+  at as CodeBlock,
+  dt as DataTableSection,
+  lt as DestructiveSection,
+  nt as ErrorPattern,
+  ht as Form,
+  ct as FormActions,
+  ft as FormField,
+  vt as FormFieldShell,
+  st as MetricTile,
+  ot as MetricTiles,
+  et as Page,
+  it as PageHeader,
+  rt as Reveal,
+  pt as StatusTile,
+  te as blockCodeTextVariants,
+  q as blockContainerVariants,
+  Ee as blockHeaderVariants,
+  je as chevronVariants,
+  Ae as collapsibleToggleVariants,
+  ee as copyButtonVariants,
+  Re as inlineCodeTextVariants,
+  Te as inlineWrapperVariants,
+  ae as prePanelVariants,
+  gt as useFieldWiring
 };