@oods/components-react 0.3.2 → 0.4.0

package/dist/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var React7 = require('react');
+var React8 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
-var jsxRuntime = require('react/jsx-runtime');
 var componentContracts = require('@oods/component-contracts');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -23,342 +23,25 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
+var React8__namespace = /*#__PURE__*/_interopNamespace(React8);
 
 // src/presentational.tsx
-
-// src/status-map.json
-var status_map_default = {
-  domains: {
-    subscription: {
-      future: {
-        description: "Subscription is scheduled but not yet active.",
-        chip: {
-          foreground: "color.text.info",
-          background: "color.background.info.subtle",
-          border: "color.border.info",
-          icon: "icon.status.scheduled"
-        },
-        banner: {
-          foreground: "color.text.info",
-          background: "color.background.surface.default",
-          border: "color.border.info",
-          icon: "icon.status.scheduled"
-        }
-      },
-      trialing: {
-        description: "Subscription is in a trial period before billing begins.",
-        chip: {
-          foreground: "color.text.accent",
-          background: "color.background.accent.subtle",
-          border: "color.border.accent",
-          icon: "icon.status.trial"
-        },
-        banner: {
-          foreground: "color.text.accent",
-          background: "color.background.surface.default",
-          border: "color.border.accent",
-          icon: "icon.status.trial"
-        }
-      },
-      active: {
-        description: "Subscription is paid and service is provisioned.",
-        chip: {
-          foreground: "color.text.positive",
-          background: "color.background.positive.subtle",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        },
-        banner: {
-          foreground: "color.text.positive",
-          background: "color.background.surface.default",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        }
-      },
-      paused: {
-        description: "Billing paused temporarily by finance or customer request.",
-        chip: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.paused"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.surface.muted",
-          border: "color.border.neutral",
-          icon: "icon.status.paused"
-        }
-      },
-      pending_cancellation: {
-        description: "Subscription will cancel at period end but remains active now.",
-        chip: {
-          foreground: "color.text.info",
-          background: "color.background.info.subtle",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        },
-        banner: {
-          foreground: "color.text.info",
-          background: "color.background.surface.default",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        }
-      },
-      past_due: {
-        description: "Renewal payment failed; smart retries ongoing and access retained during the grace window.",
-        chip: {
-          foreground: "color.text.danger",
-          background: "color.background.danger.subtle",
-          border: "color.border.danger",
-          icon: "icon.status.warning"
-        },
-        banner: {
-          foreground: "color.text.onbold",
-          background: "color.background.danger.bold",
-          border: "color.border.danger",
-          icon: "icon.status.warning"
-        }
-      },
-      unpaid: {
-        description: "Payment retries exhausted; service access revoked.",
-        chip: {
-          foreground: "color.text.danger",
-          background: "color.background.danger.subtle",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        },
-        banner: {
-          foreground: "color.text.onbold",
-          background: "color.background.danger.bold",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        }
-      },
-      terminated: {
-        description: "Subscription ended; service access revoked and billing stopped.",
-        chip: {
-          foreground: "color.text.disabled",
-          background: "color.background.disabled",
-          border: "color.border.disabled",
-          icon: "icon.status.canceled"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.canceled"
-        }
-      }
-    },
-    invoice: {
-      draft: {
-        description: "Invoice is editable and not yet finalized.",
-        chip: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.draft"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.surface.muted",
-          border: "color.border.neutral",
-          icon: "icon.status.draft"
-        }
-      },
-      posted: {
-        description: "Invoice finalized with terms before collection.",
-        chip: {
-          foreground: "color.text.info",
-          background: "color.background.info.subtle",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        },
-        banner: {
-          foreground: "color.text.info",
-          background: "color.background.surface.default",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        }
-      },
-      paid: {
-        description: "Invoice collected successfully in full.",
-        chip: {
-          foreground: "color.text.positive",
-          background: "color.background.positive.subtle",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        },
-        banner: {
-          foreground: "color.text.positive",
-          background: "color.background.surface.default",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        }
-      },
-      past_due: {
-        description: "Invoice is unpaid past its due date.",
-        chip: {
-          foreground: "color.text.danger",
-          background: "color.background.danger.subtle",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        },
-        banner: {
-          foreground: "color.text.onbold",
-          background: "color.background.danger.bold",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        }
-      },
-      void: {
-        description: "Invoice canceled and no longer payable.",
-        chip: {
-          foreground: "color.text.disabled",
-          background: "color.background.disabled",
-          border: "color.border.disabled",
-          icon: "icon.status.void"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.void"
-        }
-      }
-    }
-  }
-};
-
-// src/status.ts
-var TONE_ALIASES = {
-  info: "info",
-  informational: "info",
-  accent: "accent",
-  highlight: "accent",
-  positive: "success",
-  success: "success",
-  ok: "success",
-  warning: "warning",
-  caution: "warning",
-  danger: "critical",
-  critical: "critical",
-  error: "critical",
-  negative: "critical",
-  neutral: "neutral",
-  pending: "info"
+var REACT_NAMES = {
+  viewBox: "viewBox",
+  fill: "fill",
+  stroke: "stroke",
+  "stroke-width": "strokeWidth",
+  "stroke-linecap": "strokeLinecap",
+  "stroke-linejoin": "strokeLinejoin",
+  "aria-hidden": "aria-hidden",
+  focusable: "focusable"
 };
-var toLabel = (status) => status.split(/[_-]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join(" ");
-var inferTone = (entry) => {
-  if (!entry) return "neutral";
-  for (const reference of [entry.foreground, entry.background, entry.border]) {
-    const segments = reference.replace(/^\{|\}$/g, "").split(/[\s./_-]+/).reverse();
-    for (const segment of segments) {
-      const tone = TONE_ALIASES[segment.toLowerCase()];
-      if (tone) return tone;
-    }
-  }
-  return "neutral";
-};
-var componentTokenSet = (tone) => {
-  const normalized = tone === "positive" ? "success" : tone === "danger" ? "critical" : tone;
-  return {
-    background: `var(--sys-status-${normalized}-surface)`,
-    border: `var(--sys-status-${normalized}-border)`,
-    foreground: `var(--sys-status-${normalized}-text)`
-  };
-};
-var rawTokenSet = (entry) => {
-  const tone = inferTone(entry);
-  return componentTokenSet(tone);
-};
-var bannerFallback = (tone) => tone === "neutral" ? {
-  background: "var(--cmp-banner-background)",
-  border: "var(--cmp-banner-border)",
-  foreground: "var(--cmp-banner-text)"
-} : componentTokenSet(tone);
-var fallback = (domain, status, tone = "neutral") => ({
-  domain,
-  status,
-  label: toLabel(status || "Unknown"),
-  description: "Status not found in registry; falling back to the requested token set.",
-  tone,
-  badge: { subtle: componentTokenSet(tone), solid: componentTokenSet(tone) },
-  banner: { subtle: bannerFallback(tone), solid: componentTokenSet(tone) }
-});
-var registry = /* @__PURE__ */ new Map();
-for (const [domain, entries] of Object.entries(status_map_default.domains)) {
-  const domainEntries = /* @__PURE__ */ new Map();
-  for (const [status, entry] of Object.entries(entries)) {
-    const tone = inferTone(entry.chip);
-    domainEntries.set(status.toLowerCase(), {
-      domain,
-      status,
-      label: toLabel(status),
-      description: entry.description,
-      tone,
-      iconName: entry.chip.icon ?? entry.banner?.icon,
-      badge: { subtle: rawTokenSet(entry.chip), solid: componentTokenSet(tone) },
-      banner: {
-        subtle: entry.banner ? rawTokenSet(entry.banner) : bannerFallback(tone),
-        solid: componentTokenSet(tone)
-      }
-    });
-  }
-  registry.set(domain, domainEntries);
-}
-var LEGACY_STATUS_ALIASES = {
-  subscription: { delinquent: "unpaid" }
-};
-Object.freeze([...registry.keys()]);
-function getStatusPresentation(domain, status) {
-  const entries = registry.get(domain);
-  if (!entries) return fallback(domain, status);
-  const normalized = status.toLowerCase();
-  const direct = entries.get(normalized);
-  if (direct) return direct;
-  const alias = LEGACY_STATUS_ALIASES[domain]?.[normalized];
-  const aliased = alias ? entries.get(alias) : void 0;
-  return aliased ? { ...aliased, status, label: toLabel(status) } : fallback(domain, status);
-}
-function getToneTokenSet(tone) {
-  return componentTokenSet(tone);
-}
-function getBannerToneTokenSet(tone) {
-  return bannerFallback(tone);
-}
-var ICON_GLYPHS = {
-  success: "\u2714\uFE0E",
-  warning: "\u26A0\uFE0E",
-  critical: "\u2A2F",
-  danger: "\u2A2F",
-  error: "\u2A2F",
-  negative: "\u2A2F",
-  pending: "\u2026",
-  processing: "\u27F3",
-  paused: "\u23F8",
-  canceled: "\u2205",
-  cancelled: "\u2205",
-  draft: "\u270E",
-  void: "\u2205",
-  paid: "\u2714\uFE0E",
-  info: "\u2139\uFE0E",
-  trial: "\u2605",
-  future: "\u23F2",
-  scheduled: "\u23F2",
-  refunded: "\u21BA",
-  locked: "\u{1F512}",
-  unlocked: "\u{1F513}",
-  default: "\u2022"
-};
-function resolveStatusGlyph(iconName) {
-  const segment = iconName?.split(".").pop()?.toLowerCase();
-  return segment ? ICON_GLYPHS[segment] ?? ICON_GLYPHS.default : void 0;
+var svgProps = Object.fromEntries(Object.entries(componentContracts.STATUS_ICON_SVG_ATTRS).map(([name, value]) => [REACT_NAMES[name] ?? name, value]));
+function StatusIcon({ name }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...svgProps, children: componentContracts.STATUS_ICON_SHAPES[name].map((shape, index) => React8__namespace.createElement(shape.tag, { key: index, ...shape.attrs })) });
 }
 var classes = (...values) => values.filter(Boolean).join(" ");
-var Badge = React7__namespace.forwardRef(
+var Badge = React8__namespace.forwardRef(
   ({
     content,
     status,
@@ -375,18 +58,19 @@ var Badge = React7__namespace.forwardRef(
     "aria-label": ariaLabel,
     ...rest
   }, ref) => {
-    const presentation = status ? getStatusPresentation(domain, status) : void 0;
+    const presentation = status ? componentContracts.getStatusPresentation(domain, status) : void 0;
     const tone = toneOverride ?? presentation?.tone ?? "neutral";
-    const tokenSet = toneOverride !== void 0 ? getToneTokenSet(tone) : emphasis === "solid" ? presentation?.badge.solid ?? getToneTokenSet(tone) : presentation?.badge.subtle ?? getToneTokenSet(tone);
+    const tokenSet = toneOverride !== void 0 ? componentContracts.getToneTokenSet(tone) : emphasis === "solid" ? presentation?.badge.solid ?? componentContracts.getToneTokenSet(tone) : presentation?.badge.subtle ?? componentContracts.getToneTokenSet(tone);
     const resolvedContent = children ?? content ?? presentation?.label ?? status;
-    const resolvedIcon = icon ?? resolveStatusGlyph(presentation?.iconName);
+    const statusIcon = componentContracts.resolveStatusIcon(presentation?.iconName);
+    const resolvedIcon = icon ?? (statusIcon ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: statusIcon }) : void 0);
     const resolvedShowIcon = showIcon ?? resolvedIcon !== void 0;
-    const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__icon statusable-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
+    const iconNode = resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__icon", "aria-hidden": "true", children: resolvedIcon }) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
         ref,
-        className: classes("oods-badge", "statusable-badge", className),
+        className: classes("oods-badge", className),
         "data-oods-component": "Badge",
         "data-status": status,
         "data-domain": domain,
@@ -398,16 +82,12 @@ var Badge = React7__namespace.forwardRef(
           "--cmp-badge-background": tokenSet.background,
           "--cmp-badge-border": tokenSet.border,
           "--cmp-badge-text": tokenSet.foreground,
-          "--statusable-badge-background": tokenSet.background,
-          "--statusable-badge-border": tokenSet.border,
-          "--statusable-badge-foreground": tokenSet.foreground,
-          "--statusable-badge-icon-color": tokenSet.foreground,
           ...style
         },
         ...rest,
         children: [
           iconPosition === "start" ? iconNode : null,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__label statusable-badge__label", children: resolvedContent }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-badge__label", children: resolvedContent }),
           iconPosition === "end" ? iconNode : null
         ]
       }
@@ -415,7 +95,7 @@ var Badge = React7__namespace.forwardRef(
   }
 );
 Badge.displayName = "OODS.Badge";
-var Banner = React7__namespace.forwardRef(
+var Banner = React8__namespace.forwardRef(
   ({
     title,
     detail,
@@ -435,13 +115,14 @@ var Banner = React7__namespace.forwardRef(
     style,
     ...rest
   }, ref) => {
-    const presentation = status ? getStatusPresentation(domain, status) : void 0;
+    const presentation = status ? componentContracts.getStatusPresentation(domain, status) : void 0;
     const tone = toneOverride ?? presentation?.tone ?? "neutral";
-    const tokenSet = emphasis === "solid" ? presentation?.banner.solid ?? getToneTokenSet(tone) : presentation?.banner.subtle ?? getBannerToneTokenSet(tone);
+    const tokenSet = emphasis === "solid" ? presentation?.banner.solid ?? componentContracts.getToneTokenSet(tone) : presentation?.banner.subtle ?? componentContracts.getBannerToneTokenSet(tone);
     const heading = title ?? presentation?.label ?? status;
     const body = detail ?? description ?? children ?? content ?? presentation?.description;
     const role = tone === "critical" || tone === "danger" ? "alert" : "status";
-    const resolvedIcon = icon ?? resolveStatusGlyph(presentation?.iconName);
+    const statusIcon = componentContracts.resolveStatusIcon(presentation?.iconName);
+    const resolvedIcon = icon ?? (statusIcon ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: statusIcon }) : void 0);
     const resolvedShowIcon = showIcon ?? resolvedIcon !== void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -449,7 +130,7 @@ var Banner = React7__namespace.forwardRef(
         ref,
         role,
         "aria-live": role === "alert" ? "assertive" : "polite",
-        className: classes("oods-banner", "statusable-banner", className),
+        className: classes("oods-banner", className),
         "data-oods-component": "Banner",
         "data-status": status,
         "data-domain": domain,
@@ -459,28 +140,24 @@ var Banner = React7__namespace.forwardRef(
           "--cmp-banner-background": tokenSet.background,
           "--cmp-banner-border": tokenSet.border,
           "--cmp-banner-text": tokenSet.foreground,
-          "--statusable-banner-background": tokenSet.background,
-          "--statusable-banner-border": tokenSet.border,
-          "--statusable-banner-foreground": tokenSet.foreground,
-          "--statusable-banner-icon-color": tokenSet.foreground,
           ...style
         },
         ...rest,
         children: [
-          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-banner__icon statusable-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-banner__content statusable-banner__content", children: [
-            heading ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "oods-banner__title statusable-banner__title", children: heading }) : null,
-            body ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-banner__detail statusable-banner__description", children: body }) : null,
-            actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-banner__actions statusable-banner__actions", children: actions }) : null
+          resolvedShowIcon && resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-banner__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-banner__content", children: [
+            heading ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "oods-banner__title", children: heading }) : null,
+            body ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-banner__detail", children: body }) : null,
+            actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-banner__actions", children: actions }) : null
           ] }),
           onDismiss ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              className: "oods-banner-dismiss oods-banner__dismiss statusable-banner__dismiss",
+              className: "oods-banner-dismiss oods-banner__dismiss",
               "aria-label": dismissLabel,
               onClick: () => onDismiss(),
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xD7" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: "x" })
             }
           ) : null
         ]
@@ -489,7 +166,7 @@ var Banner = React7__namespace.forwardRef(
   }
 );
 Banner.displayName = "OODS.Banner";
-var Button = React7__namespace.forwardRef(
+var Button = React8__namespace.forwardRef(
   ({
     asChild = false,
     content,
@@ -535,7 +212,85 @@ var Button = React7__namespace.forwardRef(
   }
 );
 Button.displayName = "OODS.Button";
-var Card = React7__namespace.forwardRef(
+var noSubscription = () => () => void 0;
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React8__namespace.useEffect : React8__namespace.useLayoutEffect;
+var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+var hasContent = (node) => node !== void 0 && node !== null && node !== false && node !== "";
+var Dialog = React8__namespace.forwardRef(
+  ({
+    id,
+    open = false,
+    modal = true,
+    title,
+    description,
+    dismissLabel = "Close",
+    size = "md",
+    actions,
+    children,
+    className,
+    onClose,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const generatedId = React8__namespace.useId().replace(/[^\w-]/g, "");
+    const dialogId = id ?? `oods-dialog-${generatedId}`;
+    const element = React8__namespace.useRef(null);
+    const openRef = React8__namespace.useRef(open);
+    const serverMarkup = React8__namespace.useSyncExternalStore(noSubscription, () => false, () => true);
+    const managed = modal && !serverMarkup && canShowModal();
+    const setRef = React8__namespace.useCallback((node) => {
+      element.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }, [ref]);
+    useIsomorphicLayoutEffect(() => {
+      openRef.current = open;
+      const dialog = element.current;
+      if (!dialog || !managed) return;
+      if (open && !dialog.open) dialog.showModal();
+      else if (!open && dialog.open) dialog.close();
+    }, [open, managed]);
+    const requestClose = (event) => {
+      event.preventDefault();
+      onClose?.();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "dialog",
+      {
+        ref: setRef,
+        id: dialogId,
+        className: classes("oods-dialog", className),
+        "data-oods-component": "Dialog",
+        "data-size": size,
+        "aria-labelledby": `${dialogId}-title`,
+        "aria-describedby": hasContent(description) ? `${dialogId}-description` : void 0,
+        open: managed ? void 0 : open,
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.key === "Escape" && !event.defaultPrevented) requestClose(event);
+        },
+        onCancel: requestClose,
+        onClose: () => {
+          if (openRef.current && !element.current?.open) onClose?.();
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-dialog__header", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-dialog__heading", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: `${dialogId}-title`, className: "oods-dialog__title", children: title }),
+              hasContent(description) ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${dialogId}-description`, className: "oods-dialog__description", children: description }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "oods-dialog__close", "aria-label": dismissLabel, onClick: () => onClose?.(), children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: "x" }) })
+          ] }),
+          hasContent(children) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-dialog__body", children }) : null,
+          hasContent(actions) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oods-dialog__footer", children: actions }) : null
+        ]
+      }
+    );
+  }
+);
+Dialog.displayName = "OODS.Dialog";
+var Card = React8__namespace.forwardRef(
   ({ as = "div", elevated = false, className, ...rest }, ref) => {
     const Element = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -551,7 +306,7 @@ var Card = React7__namespace.forwardRef(
   }
 );
 Card.displayName = "OODS.Card";
-var Text = React7__namespace.forwardRef(
+var Text = React8__namespace.forwardRef(
   ({
     as = "span",
     content,
@@ -606,7 +361,7 @@ var FieldFrame = ({
 }) => {
   const resolvedHelp = help ?? description;
   const validationTone = validation?.state === "error" ? "critical" : validation?.state === "warning" ? "warning" : validation?.state;
-  const validationTokens = validationTone ? getToneTokenSet(validationTone) : void 0;
+  const validationTokens = validationTone ? componentContracts.getToneTokenSet(validationTone) : void 0;
   const validationStyle = validationTokens ? {
     "--cmp-input-message-border": validationTokens.border,
     "--cmp-input-message-text": validationTokens.foreground,
@@ -660,7 +415,7 @@ var FieldFrame = ({
     }
   );
 };
-var InputPrimitive = React7__namespace.forwardRef(
+var InputPrimitive = React8__namespace.forwardRef(
   ({
     id,
     label,
@@ -730,21 +485,20 @@ var InputPrimitive = React7__namespace.forwardRef(
 );
 InputPrimitive.displayName = "OODS.Input";
 var Input = InputPrimitive;
-var DatePicker = React7__namespace.forwardRef(
-  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DatePicker = React8__namespace.forwardRef(
+  ({ pickerClassName, pickerStyle, inputClassName, inputStyle, className, style, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2("oods-date-picker", className), style, "data-oods-component": "DatePicker", children: /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
       ref,
       type: "date",
-      "data-oods-component": "DatePicker",
       inputClassName: classes2("form-field__date-picker", inputClassName, pickerClassName),
       inputStyle: { ...inputStyle, ...pickerStyle },
       ...rest
     }
-  )
+  ) })
 );
 DatePicker.displayName = "OODS.DatePicker";
-var Checkbox = React7__namespace.forwardRef(
+var Checkbox = React8__namespace.forwardRef(
   ({
     id,
     label,
@@ -807,7 +561,85 @@ var Checkbox = React7__namespace.forwardRef(
   }
 );
 Checkbox.displayName = "OODS.Checkbox";
-var Select = React7__namespace.forwardRef(
+var Switch = React8__namespace.forwardRef(
+  ({
+    id,
+    label,
+    checked,
+    defaultChecked = false,
+    required,
+    help,
+    validation,
+    size = "md",
+    className,
+    style,
+    onClick,
+    onCheckedChange,
+    onUpdate,
+    "aria-describedby": nativeDescription,
+    ...rest
+  }, ref) => {
+    const [internalChecked, setInternalChecked] = React8__namespace.useState(defaultChecked);
+    const on = checked ?? internalChecked;
+    const validationId = validation?.id ?? `${id}-validation`;
+    const describedBy = [nativeDescription, help ? `${id}-help` : void 0, validation?.message ? validationId : void 0].filter(Boolean).join(" ") || void 0;
+    const tone = validation ? validation.state === "error" ? "critical" : validation.state : void 0;
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      const next = !on;
+      if (checked === void 0) setInternalChecked(next);
+      onCheckedChange?.(next);
+      onUpdate?.(next);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: classes2("oods-field", "oods-switch", className),
+        style: {
+          ...tone ? {
+            "--cmp-input-message-border": `var(--sys-status-${tone}-border)`,
+            "--cmp-input-message-text": `var(--sys-status-${tone}-text)`
+          } : {},
+          ...style
+        },
+        "data-oods-component": "Switch",
+        "data-size": size,
+        "data-validation-state": validation?.state,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oods-switch__row", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                ref,
+                id,
+                type: "button",
+                role: "switch",
+                className: "oods-switch__control",
+                "aria-checked": on,
+                "aria-labelledby": `${id}-label`,
+                "aria-describedby": describedBy,
+                "aria-required": required || void 0,
+                "aria-invalid": validation?.state === "error" || void 0,
+                onClick: handleClick,
+                ...rest,
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-switch__thumb", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { id: `${id}-label`, className: "oods-field-label oods-switch__label", htmlFor: id, children: [
+              label,
+              required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oods-field-required", "aria-hidden": "true", children: "*" }) : null
+            ] })
+          ] }),
+          help ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${id}-help`, className: "oods-field-help", children: help }) : null,
+          validation?.message ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: validationId, className: "oods-field-error", role: validation.state === "error" ? "alert" : void 0, children: validation.message }) : null
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "OODS.Switch";
+var Select = React8__namespace.forwardRef(
   ({
     id,
     label,
@@ -875,7 +707,7 @@ var Select = React7__namespace.forwardRef(
   }
 );
 Select.displayName = "OODS.Select";
-var Textarea = React7__namespace.forwardRef(
+var Textarea = React8__namespace.forwardRef(
   ({
     id,
     label,
@@ -958,7 +790,7 @@ var maxColumns = (columns) => {
   const count = Number(columns);
   return Number.isFinite(count) && count > 0 ? count : void 0;
 };
-var Grid = React7__namespace.forwardRef(
+var Grid = React8__namespace.forwardRef(
   ({
     columns = "auto-fit",
     minColumnWidth = "16rem",
@@ -988,7 +820,7 @@ var Grid = React7__namespace.forwardRef(
   )
 );
 Grid.displayName = "OODS.Grid";
-var Stack = React7__namespace.forwardRef(
+var Stack = React8__namespace.forwardRef(
   ({
     direction = "column",
     gap = "md",
@@ -1020,19 +852,19 @@ var Stack = React7__namespace.forwardRef(
 );
 Stack.displayName = "OODS.Stack";
 var classes4 = (...values) => values.filter(Boolean).join(" ");
-var TableHead = React7__namespace.forwardRef(
+var TableHead = React8__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: classes4("oods-table__header", className), ...rest })
 );
 TableHead.displayName = "OODS.Table.Head";
-var TableBody = React7__namespace.forwardRef(
+var TableBody = React8__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: classes4("oods-table__body", className), ...rest })
 );
 TableBody.displayName = "OODS.Table.Body";
-var TableCaption = React7__namespace.forwardRef(
+var TableCaption = React8__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("caption", { ref, className: classes4("oods-table__caption", className), ...rest })
 );
 TableCaption.displayName = "OODS.Table.Caption";
-var TableRow = React7__namespace.forwardRef(
+var TableRow = React8__namespace.forwardRef(
   ({
     selectable = false,
     selected = false,
@@ -1071,7 +903,7 @@ var TableRow = React7__namespace.forwardRef(
   }
 );
 TableRow.displayName = "OODS.Table.Row";
-var TableHeaderCell = React7__namespace.forwardRef(
+var TableHeaderCell = React8__namespace.forwardRef(
   ({ numeric = false, className, scope = "col", ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
@@ -1088,7 +920,7 @@ var TableHeaderCell = React7__namespace.forwardRef(
   )
 );
 TableHeaderCell.displayName = "OODS.Table.HeaderCell";
-var TableCell = React7__namespace.forwardRef(
+var TableCell = React8__namespace.forwardRef(
   ({
     numeric = false,
     status,
@@ -1101,9 +933,9 @@ var TableCell = React7__namespace.forwardRef(
     title,
     ...rest
   }, ref) => {
-    const presentation = status ? getStatusPresentation(statusDomain, status) : void 0;
+    const presentation = status ? componentContracts.getStatusPresentation(statusDomain, status) : void 0;
     const tone = toneOverride ?? presentation?.tone;
-    const tokens = tone ? getToneTokenSet(tone) : void 0;
+    const tokens = tone ? componentContracts.getToneTokenSet(tone) : void 0;
     const statusStyle = tokens ? statusEmphasis === "text" ? { "--table-cell-status-foreground": tokens.foreground } : {
       "--table-cell-status-background": tokens.background,
       "--table-cell-status-border": tokens.border,
@@ -1134,9 +966,10 @@ var TableCell = React7__namespace.forwardRef(
   }
 );
 TableCell.displayName = "OODS.Table.Cell";
-var TableRoot = React7__namespace.forwardRef(
+var TableRoot = React8__namespace.forwardRef(
   ({
     caption,
+    showCaption = true,
     columns,
     rows,
     density = "comfortable",
@@ -1162,8 +995,8 @@ var TableRoot = React7__namespace.forwardRef(
           "data-density": density,
           ...rest,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            caption ? /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { children: caption }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns?.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
+            caption ? /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { "data-visually-hidden": showCaption ? void 0 : "true", children: caption }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: columns?.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: (rows?.length ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: Math.max(columns?.length ?? 0, 1), children: "No rows available." }) }) : rows?.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
               "tr",
               {
@@ -1215,7 +1048,7 @@ var partitionForOverflow = (items, visibleCount, selectedId) => {
     overflowItems: items.filter((item) => !visibleIds.has(item.id))
   };
 };
-var Tabs = React7__namespace.forwardRef(
+var Tabs = React8__namespace.forwardRef(
   ({
     items,
     selectedId,
@@ -1229,22 +1062,22 @@ var Tabs = React7__namespace.forwardRef(
     "aria-label": ariaLabelAttribute,
     ...rest
   }, ref) => {
-    const instanceId = React7__namespace.useId().replaceAll(":", "");
+    const instanceId = React8__namespace.useId().replaceAll(":", "");
     const controlled = selectedId !== void 0;
     const firstEnabled = items.find((item) => !item.disabled && !item.isDisabled)?.id ?? "";
-    const [internalSelectedId, setInternalSelectedId] = React7__namespace.useState(
+    const [internalSelectedId, setInternalSelectedId] = React8__namespace.useState(
       defaultSelectedId ?? firstEnabled
     );
     const activeId = controlled ? selectedId : internalSelectedId;
-    const [focusedId, setFocusedId] = React7__namespace.useState(activeId);
-    const [visibleCount, setVisibleCount] = React7__namespace.useState(items.length);
-    const [menuOpen, setMenuOpen] = React7__namespace.useState(false);
-    const listRef = React7__namespace.useRef(null);
-    const tabRefs = React7__namespace.useRef(/* @__PURE__ */ new Map());
-    const itemWidths = React7__namespace.useRef(/* @__PURE__ */ new Map());
-    const focusRequestedByUser = React7__namespace.useRef(false);
-    React7__namespace.useEffect(() => setFocusedId(activeId), [activeId]);
-    const select = React7__namespace.useCallback(
+    const [focusedId, setFocusedId] = React8__namespace.useState(activeId);
+    const [visibleCount, setVisibleCount] = React8__namespace.useState(items.length);
+    const [menuOpen, setMenuOpen] = React8__namespace.useState(false);
+    const listRef = React8__namespace.useRef(null);
+    const tabRefs = React8__namespace.useRef(/* @__PURE__ */ new Map());
+    const itemWidths = React8__namespace.useRef(/* @__PURE__ */ new Map());
+    const focusRequestedByUser = React8__namespace.useRef(false);
+    React8__namespace.useEffect(() => setFocusedId(activeId), [activeId]);
+    const select = React8__namespace.useCallback(
       (id) => {
         const item = items.find((candidate) => candidate.id === id);
         if (!item || item.disabled || item.isDisabled) return;
@@ -1256,7 +1089,7 @@ var Tabs = React7__namespace.forwardRef(
       },
       [controlled, items, onChange, onUpdate]
     );
-    const measure = React7__namespace.useCallback(() => {
+    const measure = React8__namespace.useCallback(() => {
       const list = listRef.current;
       if (!list || items.length < 2) return;
       const available = list.offsetWidth;
@@ -1280,7 +1113,7 @@ var Tabs = React7__namespace.forwardRef(
       }
       setVisibleCount(Math.max(1, count));
     }, [items.length]);
-    React7__namespace.useLayoutEffect(() => {
+    React8__namespace.useLayoutEffect(() => {
       measure();
       const list = listRef.current;
       if (!list || typeof ResizeObserver === "undefined") return void 0;
@@ -1308,7 +1141,7 @@ var Tabs = React7__namespace.forwardRef(
       if (!nextId) return;
       select(nextId);
     };
-    React7__namespace.useEffect(() => {
+    React8__namespace.useEffect(() => {
       if (focusRequestedByUser.current && visibleItems.some((item) => item.id === focusedId)) {
         focusRequestedByUser.current = false;
         tabRefs.current.get(focusedId)?.focus();
@@ -1432,7 +1265,7 @@ var Tabs = React7__namespace.forwardRef(
 Tabs.displayName = "OODS.Tabs";
 var classes6 = (...values) => values.filter(Boolean).join(" ");
 var humanize = (value) => value.split(/[_-]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join(" ");
-var StatusBadge = React7__namespace.forwardRef(
+var StatusBadge = React8__namespace.forwardRef(
   ({
     status,
     value,
@@ -1450,11 +1283,12 @@ var StatusBadge = React7__namespace.forwardRef(
     compact,
     variant,
     title,
+    className,
     "aria-label": ariaLabel,
     ...rest
   }, ref) => {
     const resolvedStatus = status ?? value ?? "unknown";
-    const presentation = getStatusPresentation(domain, resolvedStatus);
+    const presentation = componentContracts.getStatusPresentation(domain, resolvedStatus);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Badge,
       {
@@ -1467,6 +1301,7 @@ var StatusBadge = React7__namespace.forwardRef(
         content: children ?? content,
         title: title ?? presentation.description,
         "aria-label": ariaLabel ?? label ?? `Status: ${presentation.label}`,
+        className: classes6("oods-status-badge", className),
         "data-oods-component": "StatusBadge",
         ...rest
       }
@@ -1474,8 +1309,8 @@ var StatusBadge = React7__namespace.forwardRef(
   }
 );
 StatusBadge.displayName = "OODS.StatusBadge";
-function formatPrice(amount, currency, fallback2) {
-  if (amount === void 0 || !Number.isFinite(amount)) return fallback2;
+function formatPrice(amount, currency, fallback) {
+  if (amount === void 0 || !Number.isFinite(amount)) return fallback;
   if (!currency) return new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(amount);
   try {
     return new Intl.NumberFormat(void 0, {
@@ -1486,7 +1321,7 @@ function formatPrice(amount, currency, fallback2) {
     return `${currency.toUpperCase()} ${amount.toFixed(2)}`;
   }
 }
-var PriceBadge = React7__namespace.forwardRef(
+var PriceBadge = React8__namespace.forwardRef(
   ({
     amountCents,
     unitAmountCents,
@@ -1561,7 +1396,7 @@ function normalizeTimelineEvents(values) {
     }];
   });
 }
-var TimelinePrimitive = React7__namespace.forwardRef(
+var TimelinePrimitive = React8__namespace.forwardRef(
   ({
     componentId,
     defaultTitle,
@@ -1605,29 +1440,29 @@ var TimelinePrimitive = React7__namespace.forwardRef(
         "data-timeline-type": kind,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "oods-timeline__title", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "oods-timeline__title", "data-timeline-title": "true", children: title }),
           kind === "status" && status ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__current", "data-timeline-current": "true", children: [
             "Current status: ",
             humanize(status)
           ] }) : null,
-          transitionCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          transitionCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { "data-timeline-transitions": "true", children: [
             "Allowed transitions: ",
             allowedTransitions?.join(", ")
           ] }) : null,
-          children ?? /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "oods-timeline__events", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { "data-timeline-empty": "true", children: "No events" }) : visibleEvents.map((event, index) => {
+          children ?? /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "oods-timeline__events", "data-timeline-events": "true", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { "data-timeline-empty": "true", children: "No events" }) : visibleEvents.map((event, index) => {
             const timestamp = event.timestamp ?? event.datetime;
             const actor = event.actor ?? event.actorId ?? event.actor_id;
             const eventLabel = event.label ?? event.title ?? (event.from && event.to ? `${humanize(event.from)} \u2192 ${humanize(event.to)}` : void 0) ?? (event.status ? humanize(event.status) : void 0) ?? (event.state ? humanize(event.state) : void 0) ?? "Event";
             const detail = event.detail ?? event.description;
             return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "oods-timeline__event", "data-timeline-event": "true", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__label", children: eventLabel }),
-              timestamp ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: timestamp, children: componentContracts.formatDateTime(timestamp) }) : null,
-              detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__detail", children: detail }) : null,
-              showActorId && actor ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__actor", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__label", "data-timeline-label": "true", children: eventLabel }),
+              timestamp ? /* @__PURE__ */ jsxRuntime.jsx("time", { "data-timeline-time": "true", dateTime: timestamp, children: componentContracts.formatDateTime(timestamp) }) : null,
+              detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oods-timeline__detail", "data-timeline-detail": "true", children: detail }) : null,
+              showActorId && actor ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__actor", "data-timeline-actor": "true", children: [
                 "Actor: ",
                 actor
               ] }) : null,
-              showReason && event.reason ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__reason", children: [
+              showReason && event.reason ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "oods-timeline__reason", "data-timeline-reason": "true", children: [
                 "Reason: ",
                 event.reason
               ] }) : null
@@ -1639,7 +1474,7 @@ var TimelinePrimitive = React7__namespace.forwardRef(
   }
 );
 TimelinePrimitive.displayName = "OODS.TimelinePrimitive";
-var StatusTimeline = React7__namespace.forwardRef(
+var StatusTimeline = React8__namespace.forwardRef(
   (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     TimelinePrimitive,
     {
@@ -1652,7 +1487,7 @@ var StatusTimeline = React7__namespace.forwardRef(
   )
 );
 StatusTimeline.displayName = "OODS.StatusTimeline";
-var AuditTimeline = React7__namespace.forwardRef(
+var AuditTimeline = React8__namespace.forwardRef(
   ({ auditLog, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     TimelinePrimitive,
     {
@@ -1666,7 +1501,7 @@ var AuditTimeline = React7__namespace.forwardRef(
   )
 );
 AuditTimeline.displayName = "OODS.AuditTimeline";
-var CancellationSummary = React7__namespace.forwardRef(
+var CancellationSummary = React8__namespace.forwardRef(
   ({
     label,
     title = label ?? "Cancellation Summary",
@@ -1723,7 +1558,7 @@ var CancellationSummary = React7__namespace.forwardRef(
   }
 );
 CancellationSummary.displayName = "OODS.CancellationSummary";
-var SearchInput = React7__namespace.forwardRef(
+var SearchInput = React8__namespace.forwardRef(
   ({
     id,
     label = "Search",
@@ -1749,13 +1584,13 @@ var SearchInput = React7__namespace.forwardRef(
     onKeyDown,
     ...rest
   }, ref) => {
-    const generatedId = React7__namespace.useId();
+    const generatedId = React8__namespace.useId();
     const resolvedId = id ?? `oods-search-${generatedId.replace(/:/g, "")}`;
-    const [uncontrolledValue, setUncontrolledValue] = React7__namespace.useState(defaultValue);
+    const [uncontrolledValue, setUncontrolledValue] = React8__namespace.useState(defaultValue);
     const currentValue = value ?? uncontrolledValue;
-    const timerRef = React7__namespace.useRef(void 0);
+    const timerRef = React8__namespace.useRef(void 0);
     const delay = Math.max(0, debounceMs ?? debounce ?? 0);
-    React7__namespace.useEffect(() => () => {
+    React8__namespace.useEffect(() => () => {
       if (timerRef.current !== void 0) clearTimeout(timerRef.current);
     }, []);
     const publish = (nextValue) => {
@@ -1818,7 +1653,7 @@ var SearchInput = React7__namespace.forwardRef(
               "aria-label": "Clear search",
               disabled,
               onClick: clear,
-              children: "\xD7"
+              children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { name: "x" })
             }
           ) : null
         ]
@@ -1839,7 +1674,7 @@ function visiblePages(page, totalPages) {
   }
   return result;
 }
-var PaginationBar = React7__namespace.forwardRef(
+var PaginationBar = React8__namespace.forwardRef(
   ({
     page = 1,
     pageSize = 25,
@@ -1980,7 +1815,7 @@ function relativeLabel(date, now) {
     unit
   );
 }
-var RelativeTimestamp = React7__namespace.forwardRef(
+var RelativeTimestamp = React8__namespace.forwardRef(
   ({
     datetime,
     timestamp,
@@ -2006,7 +1841,7 @@ var RelativeTimestamp = React7__namespace.forwardRef(
     const date = asDate(raw);
     if (hideWhenEmpty && !date) return null;
     const nowDate = asDate(now) ?? /* @__PURE__ */ new Date();
-    const iso = date?.toISOString() ?? (raw === void 0 ? void 0 : String(raw));
+    const iso = date?.toISOString() ?? (raw === void 0 || raw === "" ? void 0 : String(raw));
     const absolute = componentContracts.formatDateTime(date, { timeZone: timezone });
     const content = relative ?? label ?? text ?? (now !== void 0 && date ? relativeLabel(date, nowDate) : absolute || children || "Unknown time");
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2028,8 +1863,8 @@ RelativeTimestamp.displayName = "OODS.RelativeTimestamp";
 var classes7 = (...values) => values.filter(Boolean).join(" ");
 var firstText = (...values) => values.find((value) => typeof value === "string" && value.trim().length > 0);
 function childContent(children) {
-  const flatten = (value) => React7__namespace.Children.toArray(value).flatMap((node) => {
-    if (React7__namespace.isValidElement(node) && node.type === React7__namespace.Fragment) {
+  const flatten = (value) => React8__namespace.Children.toArray(value).flatMap((node) => {
+    if (React8__namespace.isValidElement(node) && node.type === React8__namespace.Fragment) {
       return flatten(node.props.children);
     }
     return [node];
@@ -2041,16 +1876,16 @@ function childContent(children) {
   }
   return { authored: nodes.length > 0 };
 }
-function headingElement(as, level, fallback2) {
+function headingElement(as, level, fallback) {
   if (as && /^h[1-6]$/.test(as)) return as;
-  const bounded = Number.isFinite(level) ? Math.max(1, Math.min(6, Math.trunc(level))) : fallback2;
+  const bounded = Number.isFinite(level) ? Math.max(1, Math.min(6, Math.trunc(level))) : fallback;
   return `h${bounded}`;
 }
 function notEcho(supporting, heading) {
   if (!supporting || !heading) return supporting;
   return supporting.trim() === heading.trim() ? void 0 : supporting;
 }
-var DetailHeader = React7__namespace.forwardRef(
+var DetailHeader = React8__namespace.forwardRef(
   ({ title, label, text, subtitle, sublabel, description, metadata, meta, level, as, children, className, ...rest }, ref) => {
     const Heading = headingElement(as, level, 2);
     const content = childContent(children);
@@ -2065,7 +1900,7 @@ var DetailHeader = React7__namespace.forwardRef(
   }
 );
 DetailHeader.displayName = "OODS.DetailHeader";
-var CardHeader = React7__namespace.forwardRef(
+var CardHeader = React8__namespace.forwardRef(
   ({ title, label, text, supporting, supportingText, subtitle, description, level, as, children, className, ...rest }, ref) => {
     const Heading = headingElement(as, level, 2);
     const content = childContent(children);
@@ -2078,7 +1913,7 @@ var CardHeader = React7__namespace.forwardRef(
   }
 );
 CardHeader.displayName = "OODS.CardHeader";
-var ColorSwatch = React7__namespace.forwardRef(
+var ColorSwatch = React8__namespace.forwardRef(
   ({ color, value, state, label, children, className, style, ...rest }, ref) => {
     const resolvedColor = firstText(color, value, state);
     const content = childContent(children);
@@ -2103,7 +1938,7 @@ var ColorSwatch = React7__namespace.forwardRef(
   }
 );
 ColorSwatch.displayName = "OODS.ColorSwatch";
-var ColorizedBadge = React7__namespace.forwardRef(
+var ColorizedBadge = React8__namespace.forwardRef(
   ({ label, text, state, value, status, color, hue, swatch, variant, tone, emphasis, children, className, style, ...rest }, ref) => {
     const content = childContent(children);
     const resolvedLabel = content.scalar ?? firstText(label, text, state, value) ?? "Color";
@@ -2133,10 +1968,12 @@ var ColorizedBadge = React7__namespace.forwardRef(
   }
 );
 ColorizedBadge.displayName = "OODS.ColorizedBadge";
-var VizAreaPreview = React7__namespace.forwardRef(
-  ({ width = 640, height = 360, svg, svgNarrow, svgWide, title, description, children, className, style, ...rest }, ref) => {
+var VizAreaPreview = React8__namespace.forwardRef(
+  ({ width = 640, height = 360, svg, svgNarrow, svgWide, svgDark, svgDarkNarrow, svgDarkWide, svgHc, svgHcNarrow, svgHcWide, title, description, children, className, style, ...rest }, ref) => {
     const content = childContent(children);
     if (svg !== void 0) {
+      const layers = componentContracts.vizPreviewLayers({ svg, svgNarrow, svgWide, svgDark, svgDarkNarrow, svgDarkWide, svgHc, svgHcNarrow, svgHcWide });
+      const renders = (layer) => layer.renders.map(([attribute, markup]) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...{ [attribute]: "true" }, dangerouslySetInnerHTML: { __html: markup } }, attribute));
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "figure",
         {
@@ -2155,9 +1992,7 @@ var VizAreaPreview = React7__namespace.forwardRef(
           ...rest,
           children: [
             title && !componentContracts.svgCarriesTitle(svg, title) ? /* @__PURE__ */ jsxRuntime.jsx("figcaption", { children: title }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { "data-viz-svg": "true", dangerouslySetInnerHTML: { __html: componentContracts.assertStaticSvg(svg) } }),
-            svgNarrow !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-viz-svg-narrow": "true", dangerouslySetInnerHTML: { __html: componentContracts.assertStaticSvg(svgNarrow) } }) : null,
-            svgWide !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-viz-svg-wide": "true", dangerouslySetInnerHTML: { __html: componentContracts.assertStaticSvg(svgWide) } }) : null,
+            layers.map((layer) => layer.theme === void 0 ? renders(layer) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-viz-theme": layer.theme, "data-viz-narrow": layer.narrow ? "true" : void 0, "data-viz-wide": layer.wide ? "true" : void 0, children: renders(layer) }, layer.theme)),
             description ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-viz-description": "true", children: description }) : null
           ]
         }
@@ -2202,13 +2037,13 @@ var descriptorLabel = (descriptor) => firstText(
   typeof descriptor.field === "string" ? descriptor.field : void 0
 ) ?? "Filter";
 function createPanelSection(component, className, panelType, defaultTitle) {
-  const Panel = React7__namespace.forwardRef(
+  const Panel = React8__namespace.forwardRef(
     ({ title, label, heading, name, subtitle, description, metadata, summary: summary2, text, body, emptyMessage, children, className: consumerClassName, ...rest }, ref) => {
       const content = childContent(children);
       const authored = content.authored || content.scalar !== void 0;
       const resolvedTitle = firstText(title, label, heading, name) ?? defaultTitle;
       const resolvedSubtitle = firstText(subtitle, description, metadata);
-      const fallback2 = firstText(summary2, text, body, emptyMessage);
+      const fallback = firstText(summary2, text, body, emptyMessage);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "section",
         {
@@ -2222,7 +2057,7 @@ function createPanelSection(component, className, panelType, defaultTitle) {
               /* @__PURE__ */ jsxRuntime.jsx("h2", { children: resolvedTitle }),
               resolvedSubtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-panel-subtitle": "true", children: resolvedSubtitle }) : null
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { "data-panel-content": "true", children: authored ? children : fallback2 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-panel-summary": "true", children: fallback2 }) : null })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { "data-panel-content": "true", children: authored ? children : fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-panel-summary": "true", children: fallback }) : null })
           ]
         }
       );
@@ -2235,7 +2070,7 @@ var ClassificationPanel = createPanelSection("ClassificationPanel", "oods-classi
 var AddressCollectionPanel = createPanelSection("AddressCollectionPanel", "oods-address-collection-panel", "address", "Addresses");
 var MembershipPanel = createPanelSection("MembershipPanel", "oods-membership-panel", "membership", "Membership");
 var PreferencePanel = createPanelSection("PreferencePanel", "oods-preference-panel", "preference", "Preferences");
-var FilterPanel = React7__namespace.forwardRef(
+var FilterPanel = React8__namespace.forwardRef(
   ({ filters, activeFilters, mode, collapsible = true, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2269,7 +2104,7 @@ var FilterPanel = React7__namespace.forwardRef(
   }
 );
 FilterPanel.displayName = "OODS.FilterPanel";
-var PriceSummary = React7__namespace.forwardRef(
+var PriceSummary = React8__namespace.forwardRef(
   ({
     title,
     label,
@@ -2302,7 +2137,7 @@ var PriceSummary = React7__namespace.forwardRef(
       ["Interval", componentContracts.formatPriceCode(interval ?? billingInterval)]
     ];
     const terms = entries.filter((entry) => entry[1] !== void 0);
-    const fallback2 = firstText(summary2, text, description);
+    const fallback = firstText(summary2, text, description);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -2316,7 +2151,7 @@ var PriceSummary = React7__namespace.forwardRef(
           authored ? children : terms.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-summary-item": "true", children: [
             /* @__PURE__ */ jsxRuntime.jsx("dt", { children: term }),
             /* @__PURE__ */ jsxRuntime.jsx("dd", { children: value })
-          ] }, term)) }) : fallback2 ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback2 }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
+          ] }, term)) }) : fallback ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
         ]
       }
     );
@@ -2342,7 +2177,7 @@ var normalizeTagItems = (value) => {
   }
   return items.filter((item) => item.length > 0);
 };
-var TagManager = React7__namespace.forwardRef(
+var TagManager = React8__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, tags, value, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2389,7 +2224,7 @@ var asCount = (value) => {
 };
 function createBadgeFamily(options) {
   const consumed = /* @__PURE__ */ new Set([...options.labelKeys, ...options.statusKeys, "variant", "tone", "emphasis"]);
-  const Family = React7__namespace.forwardRef((allProps, ref) => {
+  const Family = React8__namespace.forwardRef((allProps, ref) => {
     const { children, className, ...rest } = allProps;
     const record = rest;
     const scalar = (key) => {
@@ -2449,7 +2284,7 @@ var PreferenceSummaryBadge = createBadgeFamily({
   labelKeys: ["label", "text", "namespace", "value"],
   statusKeys: ["status", "state", "version"]
 });
-var RoleBadgeList = React7__namespace.forwardRef(
+var RoleBadgeList = React8__namespace.forwardRef(
   ({ roles, badges, roleLabels, value, variant, tone, label, text, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2469,7 +2304,7 @@ var RoleBadgeList = React7__namespace.forwardRef(
   }
 );
 RoleBadgeList.displayName = "OODS.RoleBadgeList";
-var TagPills = React7__namespace.forwardRef(
+var TagPills = React8__namespace.forwardRef(
   ({ tags, value, maxVisible, overflowLabel, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2521,7 +2356,7 @@ var normalizeTimelineItems = (raw) => {
 };
 function createTimelineFamily(options) {
   const consumed = /* @__PURE__ */ new Set(["title", "label", "heading", "name", ...options.eventKeys]);
-  const Family = React7__namespace.forwardRef((allProps, ref) => {
+  const Family = React8__namespace.forwardRef((allProps, ref) => {
     const { children, className, ...rest } = allProps;
     const record = rest;
     const text = (key) => {
@@ -2586,7 +2421,7 @@ var PreferenceTimeline = createTimelineFamily({
   timelineType: "preference",
   eventKeys: ["events", "changes", "history"]
 });
-var AuditEvent = React7__namespace.forwardRef(
+var AuditEvent = React8__namespace.forwardRef(
   ({
     label,
     title,
@@ -2672,7 +2507,7 @@ var addressRecord = (form) => {
   };
   return { street: read("street"), city: read("city"), region: read("region"), postalCode: read("postalCode") };
 };
-var AddressEditor = React7__namespace.forwardRef(
+var AddressEditor = React8__namespace.forwardRef(
   ({
     title,
     label,
@@ -2730,7 +2565,7 @@ var AddressEditor = React7__namespace.forwardRef(
   }
 );
 AddressEditor.displayName = "OODS.AddressEditor";
-var PreferenceEditor = React7__namespace.forwardRef(
+var PreferenceEditor = React8__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, namespaces, namespace, document, json, value, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2767,7 +2602,7 @@ var PreferenceEditor = React7__namespace.forwardRef(
   }
 );
 PreferenceEditor.displayName = "OODS.PreferenceEditor";
-var RoleAssignmentForm = React7__namespace.forwardRef(
+var RoleAssignmentForm = React8__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, roles, availableRoles, role, defaultRoleId, assignee, member, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2804,7 +2639,7 @@ var RoleAssignmentForm = React7__namespace.forwardRef(
   }
 );
 RoleAssignmentForm.displayName = "OODS.RoleAssignmentForm";
-var StatusSelector = React7__namespace.forwardRef(
+var StatusSelector = React8__namespace.forwardRef(
   ({ label, title, help, options, states, value, status, children, className, onChange, onValueChange, onUpdate, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2846,7 +2681,7 @@ var StatusSelector = React7__namespace.forwardRef(
   }
 );
 StatusSelector.displayName = "OODS.StatusSelector";
-var TagInput = React7__namespace.forwardRef(
+var TagInput = React8__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, tags, value, placeholder, children, className, onChange, onValueChange, onUpdate, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2893,7 +2728,7 @@ var TagInput = React7__namespace.forwardRef(
   }
 );
 TagInput.displayName = "OODS.TagInput";
-var TemplatePicker = React7__namespace.forwardRef(
+var TemplatePicker = React8__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, templates, options, templateId, value, channels, channel, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const authored = content.authored || content.scalar !== void 0;
@@ -2931,14 +2766,14 @@ var truncateLabel = (value, maxLength) => {
   const limit = typeof maxLength === "number" ? maxLength : Number(maxLength);
   return !Number.isFinite(limit) || limit <= 0 || value.length <= limit ? value : `${value.slice(0, Math.max(0, limit - 1)).trimEnd()}...`;
 };
-var InlineLabel = React7__namespace.forwardRef(
+var InlineLabel = React8__namespace.forwardRef(
   ({ label, text, value, maxLength, children, className, ...rest }, ref) => {
     const content = childContent(children);
     return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: classes7("oods-inline-label", className), "data-oods-component": "InlineLabel", ...rest, children: content.authored || content.scalar !== void 0 ? children : truncateLabel(firstText(label, text, value) ?? "", maxLength) });
   }
 );
 InlineLabel.displayName = "OODS.InlineLabel";
-var LabelCell = React7__namespace.forwardRef(
+var LabelCell = React8__namespace.forwardRef(
   ({ label, text, value, description, subtitle, sublabel, supporting, truncate, maxLength, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const limit = truncate ? maxLength ?? 40 : maxLength;
@@ -2951,7 +2786,7 @@ var LabelCell = React7__namespace.forwardRef(
   }
 );
 LabelCell.displayName = "OODS.LabelCell";
-var FormLabelGroup = React7__namespace.forwardRef(
+var FormLabelGroup = React8__namespace.forwardRef(
   ({ label, text, title, placeholder, hint, description, htmlFor, for: forId, inputId, children, className, ...rest }, ref) => {
     const detail = firstText(placeholder, hint, description);
     return /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, className: classes7("oods-form-label-group", className), "data-oods-component": "FormLabelGroup", htmlFor: htmlFor ?? forId ?? inputId, ...rest, children: [
@@ -2970,7 +2805,7 @@ var ClassificationBadge = createBadgeFamily({
   labelKeys: ["label", "text", "category", "value"],
   statusKeys: ["status", "state", "mode"]
 });
-var ClassificationEditor = React7__namespace.forwardRef(
+var ClassificationEditor = React8__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, category, primaryCategory, tags, modes, mode, classificationMode, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const tagText = typeof tags === "string" ? tags : tags === void 0 ? "" : JSON.stringify(tags);
@@ -3016,38 +2851,38 @@ var OwnerBadge = createBadgeFamily({
   labelKeys: ["label", "text", "owner", "ownerType", "value"],
   statusKeys: ["status", "state"]
 });
-var OwnershipSummary = React7__namespace.forwardRef(
+var OwnershipSummary = React8__namespace.forwardRef(
   ({ title, label, heading, name, ownerLabel, ownerId, owner_id, ownerType, owner_type, role, ownershipRole, summary: summary2, text, description, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Owner", ownerId === void 0 && owner_id === void 0 && ownerLabel === void 0 ? void 0 : componentContracts.formatReferenceLabel(ownerId ?? owner_id, ownerLabel, "Owner")], ["Owner Type", firstScalar(ownerType, owner_type)], ["Role", firstScalar(role, ownershipRole)]].filter((entry) => entry[1] !== void 0);
-    const fallback2 = firstText(summary2, text, description);
+    const fallback = firstText(summary2, text, description);
     return /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: classes7("oods-ownership-summary", className), "data-oods-component": "OwnershipSummary", "data-summary-type": "ownership", ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-summary-title": "true", children: firstText(title, label, heading, name) ?? "Ownership Summary" }),
       content.authored || content.scalar !== void 0 ? children : terms.length ? /* @__PURE__ */ jsxRuntime.jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-summary-item": "true", children: [
         /* @__PURE__ */ jsxRuntime.jsx("dt", { children: term }),
         /* @__PURE__ */ jsxRuntime.jsx("dd", { children: value })
-      ] }, term)) }) : fallback2 ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback2 }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
+      ] }, term)) }) : fallback ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
     ] });
   }
 );
 OwnershipSummary.displayName = "OODS.OwnershipSummary";
-var TagSummary = React7__namespace.forwardRef(
+var TagSummary = React8__namespace.forwardRef(
   ({ title, label, heading, name, tagCount, count, tags, summary: summary2, text, description, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const tagText = Array.isArray(tags) ? normalizeTagItems(tags).join(", ") || void 0 : firstText(tags);
     const terms = [["Tag Count", firstScalar(tagCount, count)], ["Tags", tagText]].filter((entry) => entry[1] !== void 0);
-    const fallback2 = firstText(summary2, text, description);
+    const fallback = firstText(summary2, text, description);
     return /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: classes7("oods-tags-summary", className), "data-oods-component": "TagSummary", "data-summary-type": "tags", ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-summary-title": "true", children: firstText(title, label, heading, name) ?? "Tag Summary" }),
       content.authored || content.scalar !== void 0 ? children : terms.length ? /* @__PURE__ */ jsxRuntime.jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-summary-item": "true", children: [
         /* @__PURE__ */ jsxRuntime.jsx("dt", { children: term }),
         /* @__PURE__ */ jsxRuntime.jsx("dd", { children: value })
-      ] }, term)) }) : fallback2 ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback2 }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
+      ] }, term)) }) : fallback ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
     ] });
   }
 );
 TagSummary.displayName = "OODS.TagSummary";
-var OwnershipMeta = React7__namespace.forwardRef(
+var OwnershipMeta = React8__namespace.forwardRef(
   ({ title, label, heading, name, ownerType, owner_type, role, ownershipRole, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Owner Type", firstScalar(ownerType, owner_type)], ["Role", firstScalar(role, ownershipRole)]].filter((entry) => entry[1] !== void 0);
@@ -3085,22 +2920,22 @@ var CancellationBadge = createBadgeFamily({
   booleanProps: ["cancelAtPeriodEnd", "isCancelled", "value"],
   booleanLabels: ["Cancellation scheduled", "No cancellation scheduled"]
 });
-var ArchiveSummary = React7__namespace.forwardRef(
+var ArchiveSummary = React8__namespace.forwardRef(
   ({ title, label, heading, name, isArchived, archived, status, archivedAt, reason, archiveReason, summary: summary2, text, description, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Archived", componentContracts.summaryValue(isArchived ?? archived ?? status)], ["Archived At", archivedAt ? componentContracts.formatDateTime(archivedAt) : void 0], ["Reason", firstText(reason, archiveReason)]].filter((entry) => entry[1] !== void 0);
-    const fallback2 = firstText(summary2, text, description);
+    const fallback = firstText(summary2, text, description);
     return /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: classes7("oods-archive-summary", className), "data-oods-component": "ArchiveSummary", "data-summary-type": "archive", ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-summary-title": "true", children: firstText(title, label, heading, name) ?? "Archive Summary" }),
       content.authored || content.scalar !== void 0 ? children : terms.length ? /* @__PURE__ */ jsxRuntime.jsx("dl", { children: terms.map(([term, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-summary-item": "true", children: [
         /* @__PURE__ */ jsxRuntime.jsx("dt", { children: term }),
         /* @__PURE__ */ jsxRuntime.jsx("dd", { children: value })
-      ] }, term)) }) : fallback2 ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback2 }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
+      ] }, term)) }) : fallback ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-summary-fallback": "true", children: fallback }) : /* @__PURE__ */ jsxRuntime.jsx("dl", {})
     ] });
   }
 );
 ArchiveSummary.displayName = "OODS.ArchiveSummary";
-var PriceCardMeta = React7__namespace.forwardRef(
+var PriceCardMeta = React8__namespace.forwardRef(
   ({ title, label, heading, name, model, pricingModel, interval, billingInterval, children, className, ...rest }, ref) => {
     const content = childContent(children);
     const terms = [["Model", componentContracts.formatPriceCode(firstText(model, pricingModel))], ["Interval", componentContracts.formatPriceCode(firstText(interval, billingInterval))]].filter((entry) => entry[1] !== void 0);
@@ -3118,12 +2953,12 @@ var PriceCardMeta = React7__namespace.forwardRef(
   }
 );
 PriceCardMeta.displayName = "OODS.PriceCardMeta";
-var CancellationForm = React7__namespace.forwardRef(
+var CancellationForm = React8__namespace.forwardRef(
   ({ title, label, heading, name, description, subtitle, hint, allowedReasons, reasonCode, reason, cancellationReason, embedded, reasonHelp, codeHelp, children, className, onSubmit, ...rest }, ref) => {
     const content = childContent(children);
     const choices = normalizeSelectOptions(allowedReasons ?? ["no_longer_needed", "budget", "duplicate"]);
     if (reasonCode && !choices.some((choice) => choice.value === reasonCode)) choices.unshift({ value: reasonCode, label: reasonCode });
-    return React7__namespace.createElement(embedded ? "fieldset" : "form", {
+    return React8__namespace.createElement(embedded ? "fieldset" : "form", {
       ...rest,
       ref,
       className: classes7("oods-cancellation-form", className),
@@ -3155,11 +2990,11 @@ function BillingSummaryBadge({ id, amount, currency, minorUnits, interval, showI
   return /* @__PURE__ */ jsxRuntime.jsx("span", { id, className: `oods-billing-summary ${className ?? ""}`.trim(), "data-oods-component": "BillingSummaryBadge", children: showInterval ? componentContracts.billingSummary(amount, currency, minorUnits, interval) : componentContracts.formatBillingAmount(amount, currency, minorUnits) });
 }
 function BillingAmountInput({ id, amount, currency = "usd", minorUnits = componentContracts.BILLING_MINOR_UNITS, label = "Billing amount", name, disabled, className, help, onChange }) {
-  const generatedId = React7__namespace.useId();
+  const generatedId = React8__namespace.useId();
   const controlId = id ?? `billing-amount-${generatedId}`;
-  const [text, setText] = React7__namespace.useState(() => componentContracts.billingAmountText(amount, minorUnits));
-  const [error, setError] = React7__namespace.useState(() => componentContracts.billingAmountMessage(amount, minorUnits));
-  React7__namespace.useEffect(() => {
+  const [text, setText] = React8__namespace.useState(() => componentContracts.billingAmountText(amount, minorUnits));
+  const [error, setError] = React8__namespace.useState(() => componentContracts.billingAmountMessage(amount, minorUnits));
+  React8__namespace.useEffect(() => {
     setText(componentContracts.billingAmountText(amount, minorUnits));
     setError(componentContracts.billingAmountMessage(amount, minorUnits));
   }, [amount, minorUnits]);
@@ -3193,10 +3028,10 @@ function BillingAmountInput({ id, amount, currency = "usd", minorUnits = compone
   ] });
 }
 function BillingIntervalSelector({ id, interval, intervals = componentContracts.BILLING_INTERVALS, label = "Billing interval", name, disabled, className, help, onChange }) {
-  const generatedId = React7__namespace.useId();
+  const generatedId = React8__namespace.useId();
   const controlId = id ?? `billing-interval-${generatedId}`;
-  const [value, setValue] = React7__namespace.useState(interval ?? "");
-  React7__namespace.useEffect(() => {
+  const [value, setValue] = React8__namespace.useState(interval ?? "");
+  React8__namespace.useEffect(() => {
     setValue(interval ?? "");
   }, [interval]);
   const error = componentContracts.billingIntervalMessage(value || void 0, intervals);
@@ -3304,8 +3139,8 @@ function AuditSummaryCard({ id, title = "Audit summary", showTransitionCount = t
   ] });
 }
 function SortIndicator({ id, label = "Sort", onChange, "data-oods-action": action, ...values }) {
-  const [state, setState] = React7__namespace.useState(() => componentContracts.initialSort(values));
-  React7__namespace.useEffect(() => setState(componentContracts.initialSort(values)), [values.sortField, values.sortDirection, values.sortActive, values.defaultSortField, values.defaultSortDirection]);
+  const [state, setState] = React8__namespace.useState(() => componentContracts.initialSort(values));
+  React8__namespace.useEffect(() => setState(componentContracts.initialSort(values)), [values.sortField, values.sortDirection, values.sortActive, values.defaultSortField, values.defaultSortDirection]);
   const sort = componentContracts.ariaSort(state);
   return /* @__PURE__ */ jsxRuntime.jsx("table", { id, className: "oods-sort-indicator", "data-oods-component": "SortIndicator", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", "aria-sort": sort, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-oods-action": action, "aria-label": `${label} ${state.field}`, onClick: () => {
     const next = componentContracts.nextSort(state, values.triStateSort);
@@ -3313,7 +3148,7 @@ function SortIndicator({ id, label = "Sort", onChange, "data-oods-action": actio
     onChange?.(next);
   }, children: `${state.field}: ${sort}` }) }) }) }) });
 }
-var TimelineEntryLabel = React7__namespace.forwardRef(({ compact = true, maxLength, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(InlineLabel, { ...props, ref, maxLength: maxLength ?? (compact ? 40 : void 0), "data-oods-component": "TimelineEntryLabel", "data-timeline-label": "true", "data-compact": compact }));
+var TimelineEntryLabel = React8__namespace.forwardRef(({ compact = true, maxLength, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(InlineLabel, { ...props, ref, maxLength: maxLength ?? (compact ? 40 : void 0), "data-oods-component": "TimelineEntryLabel", "data-timeline-label": "true", "data-compact": compact }));
 TimelineEntryLabel.displayName = "OODS.TimelineEntryLabel";
 function eventRecipe(id, kind, title) {
   return function TraitEvent({ id: elementId, title: heading = title, ...values }) {
@@ -3356,9 +3191,9 @@ function CommunicationDetailPanel({ id, title = "Communication", channels = [],
   ] });
 }
 function ColorStatePicker({ id, title = "Color state", colorStates = componentContracts.DEFAULT_COLOR_STATES, value, disabled, onChange }) {
-  const generatedId = React7__namespace.useId();
-  const [selected, setSelected] = React7__namespace.useState(value ?? colorStates[0] ?? "");
-  React7__namespace.useEffect(() => setSelected(value ?? colorStates[0] ?? ""), [value, colorStates]);
+  const generatedId = React8__namespace.useId();
+  const [selected, setSelected] = React8__namespace.useState(value ?? colorStates[0] ?? "");
+  React8__namespace.useEffect(() => setSelected(value ?? colorStates[0] ?? ""), [value, colorStates]);
   return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { id, className: "oods-trait-recipe", "data-oods-component": "ColorStatePicker", children: [
     /* @__PURE__ */ jsxRuntime.jsx("legend", { children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(Select, { id: `${id ?? generatedId}-state`, label: "Color state", name: "color_state", value: selected, disabled, options: [...!colorStates.includes(selected) ? [{ value: selected, label: selected || "Choose state", disabled: true }] : [], ...colorStates.map((value2) => ({ value: value2, label: componentContracts.formatReadOnlyValue(value2, "string", true) }))], onValueChange: (next) => {
@@ -3380,9 +3215,9 @@ function StatusColorLegend({ id, title = "Status colors", colorStates = componen
   ] });
 }
 function GeoFieldMappingForm({ id, title = "Geographic fields", embedded = false, disabled, onChange, ...values }) {
-  const generatedId = React7__namespace.useId();
-  const [value, setValue] = React7__namespace.useState(() => componentContracts.geoFieldMapping(values));
-  React7__namespace.useEffect(() => setValue(componentContracts.geoFieldMapping(values)), [values.latitude, values.longitude, values.identifier, values.autoDetect]);
+  const generatedId = React8__namespace.useId();
+  const [value, setValue] = React8__namespace.useState(() => componentContracts.geoFieldMapping(values));
+  React8__namespace.useEffect(() => setValue(componentContracts.geoFieldMapping(values)), [values.latitude, values.longitude, values.identifier, values.autoDetect]);
   const update = (patch) => {
     const next = { ...value, ...patch };
     setValue(next);
@@ -3416,11 +3251,11 @@ function GeocodablePreview({ id, title = "Geographic data", resolution, requires
 }
 function controls(id) {
   const Component = ({ id: htmlId, title = componentContracts.VIZ_CONTROL_TITLES[id], value, channel = "x", disabled, onChange }) => {
-    const generatedId = React7__namespace.useId();
-    const [current, setCurrent] = React7__namespace.useState(value ?? {});
-    const [drafts, setDrafts] = React7__namespace.useState({});
-    const [errors, setErrors] = React7__namespace.useState({});
-    React7__namespace.useEffect(() => {
+    const generatedId = React8__namespace.useId();
+    const [current, setCurrent] = React8__namespace.useState(value ?? {});
+    const [drafts, setDrafts] = React8__namespace.useState({});
+    const [errors, setErrors] = React8__namespace.useState({});
+    React8__namespace.useEffect(() => {
       setCurrent(value ?? {});
       setDrafts({});
       setErrors({});
@@ -3530,6 +3365,7 @@ exports.CommunicationDetailPanel = CommunicationDetailPanel;
 exports.CycleProgressCard = CycleProgressCard;
 exports.DatePicker = DatePicker;
 exports.DetailHeader = DetailHeader;
+exports.Dialog = Dialog;
 exports.FilterPanel = FilterPanel;
 exports.FormLabelGroup = FormLabelGroup;
 exports.GeoFieldMappingForm = GeoFieldMappingForm;
@@ -3568,6 +3404,7 @@ exports.StatusBadge = StatusBadge;
 exports.StatusColorLegend = StatusColorLegend;
 exports.StatusSelector = StatusSelector;
 exports.StatusTimeline = StatusTimeline;
+exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.TagInput = TagInput;