@doneisbetter/gds-core 2.6.6 → 3.0.0

package/dist/server.js

@@ -25,6 +25,7 @@ __export(server_exports, {
   ArticleShell: () => ArticleShell,
   AuthShell: () => AuthShell,
   BrowseSurface: () => BrowseSurface,
+  ChartTokenPanel: () => ChartTokenPanel,
   ChoiceChip: () => ChoiceChip,
   ConsumerDashboardGrid: () => ConsumerDashboardGrid,
   ConsumerSection: () => ConsumerSection,
@@ -35,6 +36,7 @@ __export(server_exports, {
   EditorialCard: () => EditorialCard,
   EditorialHero: () => EditorialHero,
   EmptyState: () => EmptyState,
+  EvidencePanel: () => EvidencePanel,
   FeatureBand: () => FeatureBand,
   FilterDrawer: () => FilterDrawer,
   FoodMenuSection: () => FoodMenuSection,
@@ -46,11 +48,15 @@ __export(server_exports, {
   MediaCard: () => MediaCard,
   MediaField: () => MediaField,
   MetricCard: () => MetricCard,
+  PROVIDER_IDENTITY_REGISTRY: () => PROVIDER_IDENTITY_REGISTRY,
   PageHeader: () => PageHeader,
+  PeriodSelector: () => PeriodSelector,
   PlaceholderPanel: () => PlaceholderPanel,
   PlaybackSurface: () => PlaybackSurface,
   ProductCard: () => ProductCard,
   ProgressCard: () => ProgressCard,
+  ProviderIdentityButton: () => ProviderIdentityButton,
+  ProviderIdentityButtonGroup: () => ProviderIdentityButtonGroup,
   PublicBrandFooter: () => PublicBrandFooter,
   PublicFlowShell: () => PublicFlowShell,
   PublicFoodCard: () => PublicFoodCard,
@@ -61,6 +67,7 @@ __export(server_exports, {
   ReferenceLinkGrid: () => ReferenceLinkGrid,
   ReferenceLocaleNotice: () => ReferenceLocaleNotice,
   ReferenceSection: () => ReferenceSection,
+  ReportingSection: () => ReportingSection,
   SectionPanel: () => SectionPanel,
   SimpleDataTable: () => SimpleDataTable,
   SocialAuthButtons: () => SocialAuthButtons,
@@ -75,14 +82,19 @@ __export(server_exports, {
   fr: () => fr,
   gdsLocales: () => gdsLocales,
   getGdsMessages: () => getGdsMessages,
+  getProviderIdentityLabel: () => getProviderIdentityLabel,
+  getProviderIdentityPolicy: () => getProviderIdentityPolicy,
   getSemanticActionConfig: () => getSemanticActionConfig,
   getSemanticActionLabel: () => getSemanticActionLabel,
+  getSupportedProviderIdentityIds: () => getSupportedProviderIdentityIds,
   he: () => he,
   hu: () => hu,
+  isPresentationMode: () => isPresentationMode,
   it: () => it,
   mergeGdsVocabularyPacks: () => mergeGdsVocabularyPacks,
   resolveAccentPanelStyles: () => resolveAccentPanelStyles,
   resolveSemanticActionConfig: () => resolveSemanticActionConfig,
+  resolveSurfacePresentationStyles: () => resolveSurfacePresentationStyles,
   ru: () => ru
 });
 module.exports = __toCommonJS(server_exports);
@@ -554,6 +566,51 @@ var import_core9 = require("@mantine/core");
 
 // src/SectionPanel.tsx
 var import_core8 = require("@mantine/core");
+
+// src/SurfacePresentation.ts
+var toCssLength = (value) => {
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+};
+function resolveSurfacePresentationStyles(props) {
+  const {
+    presentation = "inline",
+    minHeight,
+    contentAlign,
+    contentJustify
+  } = props;
+  if (presentation === "inline") {
+    return {
+      minHeight: toCssLength(minHeight)
+    };
+  }
+  const align = contentAlign ?? "center";
+  const justify = contentJustify ?? (presentation === "centered" ? "center" : "start");
+  if (presentation === "fill") {
+    return {
+      minHeight: toCssLength(minHeight),
+      display: "flex",
+      flex: 1,
+      flexDirection: "column",
+      alignItems: align === "center" ? "center" : "flex-start",
+      justifyContent: justify === "center" ? "center" : "flex-start"
+    };
+  }
+  return {
+    minHeight: toCssLength(minHeight),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: align === "center" ? "center" : "flex-start",
+    justifyContent: justify === "center" ? "center" : "flex-start"
+  };
+}
+function isPresentationMode(value) {
+  return value === "inline" || value === "centered" || value === "fill";
+}
+
+// src/SectionPanel.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var toneBackgrounds = {
   default: "var(--mantine-color-body)",
@@ -568,8 +625,18 @@ function SectionPanel({
   children,
   tone = "default",
   id,
-  divided = true
+  divided = true,
+  presentation = "inline",
+  minHeight,
+  contentAlign,
+  contentJustify
 }) {
+  const bodyLayout = resolveSurfacePresentationStyles({
+    presentation,
+    minHeight,
+    contentAlign,
+    contentJustify
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Paper, { id, withBorder: true, radius: "xl", p: "lg", style: { background: toneBackgrounds[tone] }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Stack, { gap: "md", children: [
     title || description || action ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
@@ -581,7 +648,7 @@ function SectionPanel({
       ] }),
       divided ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Divider, {}) : null
     ] }) : null,
-    children
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Box, { style: bodyLayout, children })
   ] }) });
 }
 
@@ -1222,20 +1289,34 @@ function StateBlock({
   description,
   action,
   icon,
-  compact = false
+  compact = false,
+  presentation = "inline",
+  minHeight,
+  contentAlign,
+  contentJustify
 }) {
   const config = variantConfig[variant];
+  const layout = resolveSurfacePresentationStyles({
+    presentation,
+    minHeight,
+    contentAlign,
+    contentJustify
+  });
+  const centeredText = presentation !== "inline" ? (contentAlign ?? "center") === "center" : !compact;
+  const centeredAlign = presentation !== "inline" ? contentAlign ?? "center" : "start";
+  const headingAlign = presentation === "inline" ? compact ? "flex-start" : "center" : centeredAlign === "center" ? "center" : "flex-start";
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     import_core18.Stack,
     {
-      align: compact ? "flex-start" : "center",
-      justify: "center",
+      align: headingAlign,
+      justify: presentation === "inline" ? "center" : void 0,
       gap: "md",
       py: compact ? "md" : "xl",
-      ta: compact ? "left" : "center",
+      ta: centeredText ? "center" : "left",
+      style: layout,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.ThemeIcon, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Stack, { gap: 6, align: compact ? "flex-start" : "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Stack, { gap: 6, align: headingAlign, children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Title, { order: compact ? 4 : 3, children: title }),
           description ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Text, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
         ] }),
@@ -1579,10 +1660,14 @@ var import_jsx_runtime27 = require("react/jsx-runtime");
 function AuthShell({
   title,
   description,
+  intent = "sign-in",
   brand,
   headerActions,
   footer,
   helper,
+  error,
+  guestAction,
+  supportAction,
   socialAuth,
   dividerLabel = "Or continue with your account",
   children
@@ -1594,12 +1679,18 @@ function AuthShell({
     ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Card, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Stack, { gap: "lg", children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Stack, { gap: "xs", ta: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Group, { justify: "center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Badge, { variant: "light", color: intent === "account-linking" ? "blue" : intent === "guest-entry" ? "gray" : "teal", children: intent.replace("-", " ") }) }),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Title, { order: 2, children: title }),
         description ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Text, { c: "dimmed", size: "sm", children: description }) : null
       ] }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Alert, { color: "red", variant: "light", role: "alert", children: error }) : null,
       socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Box, { children: socialAuth }) : null,
       socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Divider, { label: dividerLabel, labelPosition: "center" }) : null,
       children,
+      guestAction || supportAction ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Group, { justify: "center", gap: "sm", children: [
+        guestAction,
+        supportAction
+      ] }) : null,
       helper ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
     ] }) }),
     footer ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
@@ -1607,45 +1698,196 @@ function AuthShell({
 }
 
 // src/SocialAuthButtons.tsx
+var import_core27 = require("@mantine/core");
+
+// src/ProviderIdentityButtons.tsx
 var import_core26 = require("@mantine/core");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var providerConfig = {
-  google: { label: "Google", mark: "G", color: "red" },
-  apple: { label: "Apple", mark: "A", color: "dark" },
-  github: { label: "GitHub", mark: "GH", color: "gray" },
-  facebook: { label: "Facebook", mark: "F", color: "blue" },
-  microsoft: { label: "Microsoft", mark: "M", color: "cyan" },
-  linkedin: { label: "LinkedIn", mark: "in", color: "blue" },
-  discord: { label: "Discord", mark: "D", color: "indigo" },
-  x: { label: "X", mark: "X", color: "dark" },
-  email: { label: "Email", mark: "@", color: "gray" }
+var PROVIDER_IDENTITY_REGISTRY = {
+  google: {
+    providerLabel: "Google",
+    markLabel: "G",
+    brandColor: "red"
+  },
+  apple: {
+    providerLabel: "Apple",
+    markLabel: "A",
+    brandColor: "dark"
+  },
+  github: {
+    providerLabel: "GitHub",
+    markLabel: "GH",
+    brandColor: "gray"
+  },
+  facebook: {
+    providerLabel: "Facebook",
+    markLabel: "F",
+    brandColor: "blue"
+  },
+  microsoft: {
+    providerLabel: "Microsoft",
+    markLabel: "M",
+    brandColor: "cyan"
+  },
+  linkedin: {
+    providerLabel: "LinkedIn",
+    markLabel: "in",
+    brandColor: "blue"
+  },
+  discord: {
+    providerLabel: "Discord",
+    markLabel: "D",
+    brandColor: "indigo"
+  },
+  x: {
+    providerLabel: "X",
+    markLabel: "X",
+    brandColor: "dark"
+  },
+  email: {
+    providerLabel: "Email",
+    markLabel: "@",
+    brandColor: "gray"
+  }
 };
-function ProviderMark({ id }) {
-  const config = providerConfig[id] ?? { label: id, mark: id.slice(0, 2).toUpperCase(), color: "gray" };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.ThemeIcon, { variant: "light", color: config.color, radius: "xl", size: "md", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "xs", fw: 700, children: config.mark }) });
-}
-function SocialAuthButton({ provider, compact = false }) {
-  const config = providerConfig[provider.id] ?? { label: provider.id, mark: provider.id.slice(0, 2).toUpperCase(), color: "gray" };
-  const label = provider.label ?? `Continue with ${config.label}`;
-  const buttonProps = provider.href ? { component: "a", href: provider.href } : { onClick: provider.onClick };
+function normalizeProviderId(provider) {
+  return (provider ?? "").trim().toLowerCase();
+}
+function isSupportedProviderId(provider) {
+  return provider in PROVIDER_IDENTITY_REGISTRY;
+}
+function getProviderIdentityMeta(provider) {
+  const normalized = normalizeProviderId(provider);
+  if (isSupportedProviderId(normalized)) {
+    return {
+      id: normalized,
+      supported: true,
+      ...PROVIDER_IDENTITY_REGISTRY[normalized]
+    };
+  }
+  return {
+    id: normalized || "provider",
+    supported: false,
+    providerLabel: provider ? provider : "Provider",
+    markLabel: (provider ?? "PR").slice(0, 2).toUpperCase(),
+    brandColor: "gray"
+  };
+}
+function resolveProviderLabel(provider, customLabel) {
+  const meta = getProviderIdentityMeta(provider);
+  if (customLabel != null) {
+    return customLabel;
+  }
+  return `Continue with ${meta.providerLabel}`;
+}
+function mapVariant(variant = "neutral") {
+  if (variant === "solid") {
+    return "filled";
+  }
+  if (variant === "outline") {
+    return "outline";
+  }
+  return "default";
+}
+function getProviderIdentityLabel(provider, fallbackOverride) {
+  return resolveProviderLabel(provider, fallbackOverride);
+}
+function getSupportedProviderIdentityIds() {
+  return Object.keys(PROVIDER_IDENTITY_REGISTRY);
+}
+function getProviderIdentityPolicy(provider) {
+  const meta = getProviderIdentityMeta(provider);
+  return {
+    id: meta.id,
+    supported: meta.supported,
+    providerLabel: meta.providerLabel,
+    colorAuthority: meta.supported ? "provider" : "gds-neutral",
+    minTouchTargetPx: 44,
+    allowedVariants: ["solid", "outline", "neutral"]
+  };
+}
+function ProviderIdentityMark({ provider }) {
+  const meta = getProviderIdentityMeta(provider);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_core26.ThemeIcon,
+    {
+      variant: "light",
+      color: meta.brandColor,
+      radius: "xl",
+      size: "md",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "xs", fw: 700, c: "inherit", children: meta.markLabel })
+    }
+  );
+}
+function ProviderIdentityButton({
+  provider,
+  label,
+  description,
+  policyNote,
+  error,
+  href,
+  onClick,
+  disabled,
+  loading,
+  tenantDisabledReason,
+  fullWidth = true,
+  size = "md",
+  variant = "neutral",
+  ariaLabel,
+  describedBy,
+  minTouchTargetPx = 44
+}) {
+  const meta = getProviderIdentityMeta(provider);
+  const buttonLabel = resolveProviderLabel(provider, label);
+  const resolvedDisabled = disabled || Boolean(tenantDisabledReason);
+  const buttonProps = href ? {
+    component: "a",
+    href
+  } : {
+    onClick
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_core26.Button,
     {
-      variant: "default",
+      variant: mapVariant(variant),
+      color: variant === "solid" ? meta.brandColor : void 0,
       justify: "space-between",
-      fullWidth: true,
-      size: compact ? "sm" : "md",
-      leftSection: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ProviderMark, { id: provider.id }),
-      disabled: provider.disabled,
-      loading: provider.loading,
+      fullWidth,
+      size,
+      "aria-label": ariaLabel ?? (typeof buttonLabel === "string" ? buttonLabel : void 0),
+      "aria-describedby": describedBy,
+      leftSection: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ProviderIdentityMark, { provider }),
+      disabled: resolvedDisabled,
+      loading,
+      styles: { root: { minHeight: minTouchTargetPx } },
       ...buttonProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: 0, align: "flex-start", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { inherit: true, children: label }),
-        provider.description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "xs", c: "dimmed", lh: 1.2, children: provider.description }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { inherit: true, children: buttonLabel }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "xs", c: "dimmed", lh: 1.2, children: description }) : null,
+        policyNote ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "xs", c: "dimmed", lh: 1.2, children: policyNote }) : null,
+        tenantDisabledReason ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "xs", c: "orange.7", lh: 1.2, children: tenantDisabledReason }) : null,
+        error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "xs", c: "red.7", lh: 1.2, role: "alert", children: error }) : null
       ] })
     }
   );
 }
+function ProviderIdentityButtonGroup({ providers, layout = "stack" }) {
+  if (!providers.length) {
+    return null;
+  }
+  const content = providers.map((entry, index) => {
+    const key = `${normalizeProviderId(String(entry.provider)) || "provider"}-${index}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ProviderIdentityButton, { ...entry }, key);
+  });
+  if (layout === "grid") {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Stack, { gap: "sm", children: content });
+}
+
+// src/SocialAuthButtons.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function SocialAuthButtons({
   providers,
   title = "Continue with a trusted provider",
@@ -1656,54 +1898,67 @@ function SocialAuthButtons({
   if (!providers.length) {
     return null;
   }
-  const content = providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SocialAuthButton, { provider, compact }, provider.id));
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: 4, ta: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Group, { justify: "center", gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GdsIcons.Login, { size: "1rem" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { fw: 600, children: title })
+  const buttons = providers.map((provider) => ({
+    provider: provider.id,
+    label: provider.label,
+    description: provider.description,
+    policyNote: provider.policyNote,
+    error: provider.error,
+    href: provider.href,
+    onClick: provider.onClick,
+    disabled: provider.disabled,
+    loading: provider.loading,
+    tenantDisabledReason: provider.tenantDisabledReason,
+    size: provider.size ?? (compact ? "sm" : "md"),
+    variant: provider.variant
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core27.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core27.Stack, { gap: 4, ta: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core27.Group, { justify: "center", gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(GdsIcons.Login, { size: "1rem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Text, { fw: 600, children: title })
       ] }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "sm", c: "dimmed", children: description }) : null
+      description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Text, { size: "sm", c: "dimmed", children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Divider, {}),
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Stack, { gap: "sm", children: content })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ProviderIdentityButtonGroup, { providers: buttons, layout })
   ] });
 }
 
 // src/ArticleShell.tsx
-var import_core27 = require("@mantine/core");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_core28 = require("@mantine/core");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ArticleShell({ eyebrow, title, lead, meta, sideRail, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core27.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core27.Stack, { gap: "lg", maw: 760, flex: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core27.Stack, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Title, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Text, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Group, { gap: "md", children: meta }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Stack, { gap: "lg", maw: 760, flex: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Group, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Stack, { gap: "md", children })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Stack, { gap: "md", children })
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/CtaButtonGroup.tsx
-var import_core28 = require("@mantine/core");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_core29 = require("@mantine/core");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function CtaButtonGroup({ primary, secondary, tertiary }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Group, { gap: "sm", align: "stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: primary }),
-      secondary ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: secondary }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { gap: "sm", align: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: primary }),
+      secondary ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: secondary }) : null
     ] }),
-    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: tertiary }) : null
+    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: tertiary }) : null
   ] });
 }
 
 // src/DocsPageShell.tsx
-var import_core29 = require("@mantine/core");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_core30 = require("@mantine/core");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function DocsPageShell({
   breadcrumbs = [],
   title,
@@ -1714,27 +1969,27 @@ function DocsPageShell({
   footerNext,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { fluid: true, py: "xl", px: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Stack, { component: "article", gap: "lg", flex: 1, miw: 0, children: [
-      breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Breadcrumbs, { children: breadcrumbs.map(
-        (crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Text, { children: crumb.label }, crumb.label)
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Container, { fluid: true, py: "xl", px: { base: "md", md: "lg", lg: "xl" }, w: "100%", maw: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Stack, { component: "article", gap: "lg", flex: 1, miw: 0, children: [
+      breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Breadcrumbs, { children: breadcrumbs.map(
+        (crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Text, { children: crumb.label }, crumb.label)
       ) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Stack, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Title, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Text, { size: "lg", c: "dimmed", maw: 920, children: lead }) : null,
-        meta ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: "md", children: meta }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Group, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Stack, { gap: "md", children }),
-      footerNext ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Stack, { gap: "md", children }),
+      footerNext ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/EditorialHero.tsx
-var import_core30 = require("@mantine/core");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_core31 = require("@mantine/core");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function resolveActionVariant(action, index, seenPrimary) {
   const requested = action.variant ?? (index === 0 ? "primary" : "secondary");
   if (requested === "primary" && !seenPrimary) {
@@ -1746,8 +2001,8 @@ function resolveActionVariant(action, index, seenPrimary) {
   return { variant: "default", seenPrimary };
 }
 function HeroAction({ action, variant }) {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_core30.Anchor,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_core31.Anchor,
     {
       href: action.href,
       onClick: action.onClick,
@@ -1771,8 +2026,8 @@ function HeroAction({ action, variant }) {
     }
   );
   if (!action.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      import_core30.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_core31.Box,
       {
         component: "button",
         type: "button",
@@ -1799,30 +2054,30 @@ function HeroAction({ action, variant }) {
   return content;
 }
 function LoadingHero({ compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Stack, { gap: "md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Skeleton, { height: 16, width: 96, radius: "xl" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Skeleton, { height: 48, width: "90%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Skeleton, { height: 18, width: "100%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Skeleton, { height: 18, width: "82%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Group, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Skeleton, { height: 40, width: 140, radius: "md" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Skeleton, { height: 40, width: 140, radius: "md" })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Skeleton, { height: 16, width: 96, radius: "xl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Skeleton, { height: 48, width: "90%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Skeleton, { height: 18, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Skeleton, { height: 18, width: "82%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Group, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Skeleton, { height: 40, width: 140, radius: "md" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Skeleton, { height: 40, width: 140, radius: "md" })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Skeleton, { radius: "lg" }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Skeleton, { radius: "lg" }) }) })
   ] }) });
 }
 function MediaFallback() {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_core30.ThemeIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_core31.ThemeIcon,
     {
       size: "100%",
       radius: "lg",
       color: "gray",
       variant: "light",
       "aria-label": "Hero media is unavailable",
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
     }
   ) });
 }
@@ -1842,8 +2097,8 @@ function MediaFrame({
   } else if (mediaFade === "soft-start") {
     overlayBackground = "linear-gradient(90deg, light-dark(rgba(255,255,255,0.9), rgba(17,24,39,0.72)) 0%, rgba(255,255,255,0) 28%)";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    import_core30.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    import_core31.Box,
     {
       component: "figure",
       m: 0,
@@ -1856,9 +2111,9 @@ function MediaFrame({
       },
       "aria-label": mediaAlt,
       children: [
-        media ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MediaFallback, {}),
-        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          import_core30.Box,
+        media ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MediaFallback, {}),
+        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          import_core31.Box,
           {
             "aria-hidden": true,
             style: {
@@ -1891,7 +2146,7 @@ function EditorialHero({
   classNames
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoadingHero, { compact });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LoadingHero, { compact });
   }
   const stackAlign = align === "center" ? "center" : "flex-start";
   const textAlign = align === "center" ? "center" : "left";
@@ -1899,15 +2154,15 @@ function EditorialHero({
   const renderedActions = actions.slice(0, 3).map((action, index) => {
     const resolved = resolveActionVariant(action, index, seenPrimary);
     seenPrimary = resolved.seenPrimary;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
   });
-  const textSlot = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Stack, { gap: "sm", align: stackAlign, children: [
-      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
+  const textSlot = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "sm", align: stackAlign, children: [
+      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
     ] }),
-    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       CtaButtonGroup,
       {
         primary: renderedActions[0],
@@ -1915,8 +2170,8 @@ function EditorialHero({
         tertiary: renderedActions[2]
       }
     ) }) : null,
-    meta.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-      import_core30.Group,
+    meta.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      import_core31.Group,
       {
         gap: 6,
         px: "sm",
@@ -1927,17 +2182,17 @@ function EditorialHero({
         },
         children: [
           item.icon,
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Text, { size: "sm", c: "dimmed", children: item.label })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Text, { size: "sm", c: "dimmed", children: item.label })
         ]
       },
       item.id
     )) }) : null
   ] });
-  const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
-  const textCol = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
-  const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_core30.Paper,
+  const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
+  const textCol = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
+  const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_core31.Paper,
     {
       component: "section",
       withBorder: true,
@@ -1945,7 +2200,7 @@ function EditorialHero({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       style: surfaceVariant === "flat-public" ? { boxShadow: "none" } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
         textCol,
         mediaCol
       ] })
@@ -1954,19 +2209,19 @@ function EditorialHero({
 }
 
 // src/FeatureBand.tsx
-var import_core31 = require("@mantine/core");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_core32 = require("@mantine/core");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function FeatureBandSkeleton({
   columns = 3,
   bordered = true,
   variant = "default"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Skeleton, { height: 20, width: "75%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Skeleton, { height: 14, width: "100%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Skeleton, { height: 14, width: "82%", radius: "md" })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Skeleton, { height: 20, width: "75%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Skeleton, { height: 14, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Skeleton, { height: 14, width: "82%", radius: "md" })
     ] })
   ] }) }, index)) });
 }
@@ -1979,10 +2234,10 @@ function FeatureBand({
   variant = "default"
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
   }
   if (!items.length) {
-    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       EmptyState,
       {
         title: "No supporting details available",
@@ -1990,9 +2245,9 @@ function FeatureBand({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "md", children: [
-    variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_core31.Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Stack, { gap: "md", children: [
+    variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      import_core32.Text,
       {
         fw: 800,
         size: "sm",
@@ -2004,31 +2259,31 @@ function FeatureBand({
         },
         children: item.stepLabel ?? `Step ${index + 1}`
       }
-    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Title, { order: 4, children: item.title }),
-      item.description ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Text, { c: "dimmed", children: item.description }) : null,
-      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
+    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Title, { order: 4, children: item.title }),
+      item.description ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Text, { c: "dimmed", children: item.description }) : null,
+      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
     ] })
   ] }) }, item.id)) }) });
 }
 
 // src/MapPanel.tsx
-var import_core33 = require("@mantine/core");
+var import_core34 = require("@mantine/core");
 
 // src/ActionBar.tsx
-var import_core32 = require("@mantine/core");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_core33 = require("@mantine/core");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function renderSemanticAction(action, slot, vocabularyPacks) {
   const { action: actionId, variant, ariaLabel, ...props } = action;
   const fallbackVariant = slot === "primary" ? "filled" : slot === "secondary" ? "default" : "subtle";
   const config = resolveSemanticActionConfig(actionId, vocabularyPacks);
   const Icon = config.icon;
   const label = getSemanticActionLabel(actionId, void 0, vocabularyPacks);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_core32.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_core33.Button,
     {
-      leftSection: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { size: "1rem", stroke: 1.75 }),
+      leftSection: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { size: "1rem", stroke: 1.75 }),
       "aria-label": ariaLabel ?? label,
       variant: variant ?? fallbackVariant,
       ...props,
@@ -2045,23 +2300,23 @@ function ActionBar({
   gap = "sm",
   vocabularyPacks = []
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Stack, { gap, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Group, { justify: "space-between", align: "center", gap, wrap: "wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Group, { gap, wrap: "wrap", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Stack, { gap, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Group, { justify: "space-between", align: "center", gap, wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Group, { gap, wrap: "wrap", children: [
       secondary.map((action) => renderSemanticAction(action, "secondary", vocabularyPacks)),
       tertiary.map((action) => renderSemanticAction(action, "tertiary", vocabularyPacks))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Group, { gap, wrap: "wrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Group, { gap, wrap: "wrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
       iconOnly.map(({ action, ariaLabel, ...props }) => {
         const config = resolveSemanticActionConfig(action, vocabularyPacks);
         const Icon = config.icon;
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          import_core32.ActionIcon,
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          import_core33.ActionIcon,
           {
             variant: "subtle",
             size: "lg",
             "aria-label": ariaLabel ?? getSemanticActionLabel(action, void 0, vocabularyPacks),
             ...props,
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { size: "1rem", stroke: 1.75 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { size: "1rem", stroke: 1.75 })
           },
           `icon-${action}`
         );
@@ -2072,7 +2327,7 @@ function ActionBar({
 }
 
 // src/MapPanel.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function MapPanel({
   title,
   description,
@@ -2088,7 +2343,7 @@ function MapPanel({
 }) {
   let body;
   if (loading) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       StateBlock,
       {
         variant: "loading",
@@ -2098,9 +2353,9 @@ function MapPanel({
       }
     );
   } else if (error) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
   } else if (!iframeSrc && !renderMap) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       StateBlock,
       {
         variant: "empty",
@@ -2110,9 +2365,9 @@ function MapPanel({
       }
     );
   } else if (renderMap) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Box, { style: { minHeight }, children: renderMap() });
+    body = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { style: { minHeight }, children: renderMap() });
   } else {
-    body = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "iframe",
       {
         src: iframeSrc,
@@ -2124,21 +2379,21 @@ function MapPanel({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Title, { order: 3, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Text, { size: "sm", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Title, { order: 3, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { size: "sm", c: "dimmed", children: description }) : null
       ] }),
-      actions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ActionBar, { ...actions }) : null
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ActionBar, { ...actions }) : null
     ] }),
     body
   ] }) });
 }
 
 // src/PublicFlowShell.tsx
-var import_core34 = require("@mantine/core");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_core35 = require("@mantine/core");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var stageTone = {
   idle: { label: "Idle", color: "gray" },
   loading: { label: "Loading", color: "blue" },
@@ -2190,7 +2445,7 @@ function PublicFlowShell({
   const actionBar = toActionBar(stage.actions);
   let body = stage.body;
   if (stage.status === "loading") {
-    body = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       StateBlock,
       {
         variant: "loading",
@@ -2199,7 +2454,7 @@ function PublicFlowShell({
       }
     );
   } else if (stage.status === "error") {
-    body = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    body = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       StateBlock,
       {
         variant: "error",
@@ -2208,7 +2463,7 @@ function PublicFlowShell({
       }
     );
   } else if (!stage.body && !hardwareSurface) {
-    body = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    body = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       EmptyState,
       {
         title: "No stage content available",
@@ -2216,29 +2471,29 @@ function PublicFlowShell({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: 4, children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Group, { gap: "sm", wrap: "wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Title, { order: 2, children: stage.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Badge, { variant: "light", color: tone.color, children: tone.label })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { gap: "sm", wrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Title, { order: 2, children: stage.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Badge, { variant: "light", color: tone.color, children: tone.label })
         ] }),
-        stage.description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { size: "sm", c: "dimmed", children: stage.description }) : null
+        stage.description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "sm", c: "dimmed", children: stage.description }) : null
       ] }),
       exitAction
     ] }),
-    stage.notice ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { size: "sm", c: "dimmed", children: stage.notice }) : null,
+    stage.notice ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "sm", c: "dimmed", children: stage.notice }) : null,
     body,
     hardwareSurface,
     stage.aside,
-    actionBar ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ActionBar, { ...actionBar }) : null
+    actionBar ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ActionBar, { ...actionBar }) : null
   ] }) });
 }
 
 // src/PlaybackSurface.tsx
-var import_core35 = require("@mantine/core");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_core36 = require("@mantine/core");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var stateTone = {
   loading: { label: "Loading", color: "blue" },
   ready: { label: "Ready", color: "teal" },
@@ -2261,7 +2516,7 @@ function PlaybackSurface({
   const tone = stateTone[state];
   let content;
   if (state === "loading") {
-    content = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       StateBlock,
       {
         variant: "loading",
@@ -2270,7 +2525,7 @@ function PlaybackSurface({
       }
     );
   } else if (state === "empty") {
-    content = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    content = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       EmptyState,
       {
         title: "No playback content available",
@@ -2278,7 +2533,7 @@ function PlaybackSurface({
       }
     );
   } else if (state === "error") {
-    content = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    content = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       StateBlock,
       {
         variant: "error",
@@ -2287,23 +2542,23 @@ function PlaybackSurface({
       }
     );
   } else {
-    content = /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "md", children: [
+    content = /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: "md", children: [
       media,
       overlays
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Paper, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "md", children: [
-    title || statusMessage || controls ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: 4, children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Title, { order: 3, children: title }) : null,
-        statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "sm", c: "dimmed", children: statusMessage }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Paper, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: "md", children: [
+    title || statusMessage || controls ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: 4, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Title, { order: 3, children: title }) : null,
+        statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "sm", c: "dimmed", children: statusMessage }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { gap: "sm", align: "center", wrap: "wrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Badge, { variant: "light", color: tone.color, children: tone.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Group, { gap: "sm", align: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Badge, { variant: "light", color: tone.color, children: tone.label }),
         controls
       ] })
     ] }) : null,
-    state === "degraded" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    state === "degraded" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       StateBlock,
       {
         variant: "info",
@@ -2317,28 +2572,35 @@ function PlaybackSurface({
 }
 
 // src/MediaField.tsx
-var import_core37 = require("@mantine/core");
+var import_core38 = require("@mantine/core");
 
 // src/FormField.tsx
-var import_core36 = require("@mantine/core");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_core37 = require("@mantine/core");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function FormField({ label, description, error, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Box, { component: "label", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: 4, children: [
-    typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
-    description ? typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "xs", c: "dimmed", children: description }) : description : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Box, { component: "label", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: 4, children: [
+    typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
+    description ? typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { size: "xs", c: "dimmed", children: description }) : description : null,
     children,
-    error ? typeof error === "string" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "xs", c: "red.7", children: error }) : error : null
+    error ? typeof error === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { size: "xs", c: "red.7", children: error }) : error : null
   ] }) });
 }
 
 // src/MediaField.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var stateLabels = {
   empty: { label: "Empty", color: "gray" },
+  "drag-active": { label: "Drop to select", color: "violet" },
   selected: { label: "Selected", color: "blue" },
+  "preview-loading": { label: "Preview loading", color: "violet" },
   saved: { label: "Saved", color: "teal" },
   invalid: { label: "Needs attention", color: "red" },
-  uploading: { label: "Uploading", color: "violet" }
+  uploading: { label: "Uploading", color: "violet" },
+  "upload-failed": { label: "Upload failed", color: "red" },
+  "unsupported-type": { label: "Unsupported type", color: "red" },
+  "too-large": { label: "Too large", color: "red" },
+  removed: { label: "Removed", color: "gray" },
+  readonly: { label: "Read only", color: "gray" }
 };
 function MediaField({
   label,
@@ -2351,41 +2613,60 @@ function MediaField({
   policyText,
   error,
   retryAction,
+  replaceAction,
   onRemove,
   onReset,
   removeAction,
   resetAction,
   statusAction,
+  acceptedTypes,
+  maxSize,
+  progress,
+  readonly = false,
   state = "empty",
   mode = "stacked"
 }) {
-  const stateBadge = stateLabels[state];
-  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
-  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  const resolvedState = readonly ? "readonly" : state;
+  const stateBadge = stateLabels[resolvedState];
+  const resolvedRemoveAction = removeAction ?? (!readonly && onRemove ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
+  const resolvedResetAction = resetAction ?? (!readonly && onReset ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
+  const boundedProgress = typeof progress === "number" ? Math.max(0, Math.min(100, progress)) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     FormField,
     {
       label,
       description,
       error,
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: "md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Group, { gap: "xs", justify: "flex-end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Stack, { gap: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Group, { gap: "xs", justify: "flex-end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
           statusAction
         ] }) }),
         preview ? preview : null,
-        uploadControl || urlInput ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
+        typeof boundedProgress === "number" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Stack, { gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Progress, { value: boundedProgress, "aria-label": "Upload progress" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Text, { size: "xs", c: "dimmed", children: [
+            boundedProgress,
+            "% complete"
+          ] })
+        ] }) : null,
+        (uploadControl || urlInput) && !readonly ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Stack, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
             uploadControl,
             urlInput
           ] })
         ] }) : null,
-        value ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
-        helpText ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
-        policyText ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
+        value ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
+        helpText ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
+        acceptedTypes || maxSize ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Group, { gap: "xs", wrap: "wrap", children: [
+          acceptedTypes ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Badge, { variant: "outline", color: "gray", children: acceptedTypes }) : null,
+          maxSize ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Badge, { variant: "outline", color: "gray", children: maxSize }) : null
+        ] }) : null,
+        policyText ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
         typeof error !== "string" && error ? error : null,
-        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Group, { gap: "sm", children: [
+        replaceAction || resolvedRemoveAction || resolvedResetAction || retryAction ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Group, { gap: "sm", children: [
+          replaceAction,
           resolvedResetAction,
           retryAction,
           resolvedRemoveAction
@@ -2396,49 +2677,63 @@ function MediaField({
 }
 
 // src/MediaCard.tsx
-var import_core38 = require("@mantine/core");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_core39 = require("@mantine/core");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function MediaCard({ title, image, description, status, overlay, actions = [] }) {
   const EyeIcon = GdsIcons.Eye;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Card, { withBorder: true, radius: "lg", padding: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Card.Section, { pos: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Card, { withBorder: true, radius: "lg", padding: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Card.Section, { pos: "relative", children: [
       image,
-      overlay ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
+      overlay ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Stack, { gap: "sm", mt: "md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Group, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Stack, { gap: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Title, { order: 4, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Text, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Stack, { gap: "sm", mt: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Group, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Stack, { gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Title, { order: 4, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
         ] }),
-        status ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Badge, { variant: "light", children: status }) : null
+        status ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Badge, { variant: "light", children: status }) : null
       ] }),
-      actions.length ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
+      actions.length ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
     ] })
   ] });
 }
 
 // src/AccessSummary.tsx
-var import_core39 = require("@mantine/core");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-function AccessSummary({ title, roles, scope, blocked = false, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Group, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Title, { order: 4, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Badge, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
+var import_core40 = require("@mantine/core");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var accessStateMeta = {
+  allowed: { label: "Allowed", color: "teal" },
+  blocked: { label: "Blocked", color: "red" },
+  forbidden: { label: "Forbidden", color: "red" },
+  expired: { label: "Expired", color: "orange" },
+  "permission-limited": { label: "Permission limited", color: "grape" }
+};
+function AccessSummary({ title, roles, scope, blocked = false, state, owner, recoveryHint, description }) {
+  const resolvedState = state ?? (blocked ? "blocked" : "allowed");
+  const meta = accessStateMeta[resolvedState];
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Badge, { color: meta.color, variant: "light", children: meta.label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Badge, { variant: "outline", children: role }, role)) }),
-    scope ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Text, { size: "sm", c: "dimmed", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Badge, { variant: "outline", children: role }, role)) }),
+    scope ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Text, { size: "sm", c: "dimmed", children: [
       "Scope: ",
       scope
     ] }) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { size: "sm", children: description }) : null
+    owner ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Text, { size: "sm", c: "dimmed", children: [
+      "Owner: ",
+      owner
+    ] }) : null,
+    recoveryHint ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: "sm", c: resolvedState === "allowed" ? "dimmed" : "red.7", children: recoveryHint }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: "sm", children: description }) : null
   ] }) });
 }
 
 // src/PageHeader.tsx
-var import_core40 = require("@mantine/core");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_core41 = require("@mantine/core");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function PageHeader({
   title,
   description,
@@ -2449,19 +2744,19 @@ function PageHeader({
 }) {
   const resolvedDescription = description ?? subtitle;
   const eyebrowProps = eyebrowVariant === "ornamental" ? { tt: "uppercase", style: { letterSpacing: "0.12em" } } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: "xs", children: [
-      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Title, { order: 1, children: title }),
-      resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { c: "dimmed", maw: 720, children: resolvedDescription })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "xs", children: [
+      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Title, { order: 1, children: title }),
+      resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { c: "dimmed", maw: 720, children: resolvedDescription })
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Box, { children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Box, { children: actions }) : null
   ] });
 }
 
 // src/FilterDrawer.tsx
-var import_core41 = require("@mantine/core");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_core42 = require("@mantine/core");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function FilterDrawer({
   opened,
   onClose,
@@ -2477,8 +2772,8 @@ function FilterDrawer({
 }) {
   const resolvedPrimaryAction = applyAction ?? primaryAction;
   const resolvedSecondaryAction = resetAction ?? secondaryAction;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_core41.Drawer,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_core42.Drawer,
     {
       opened,
       onClose,
@@ -2486,11 +2781,11 @@ function FilterDrawer({
       position: mode === "bottom-sheet" ? "bottom" : "right",
       size: mode === "bottom-sheet" ? "auto" : "md",
       radius: mode === "bottom-sheet" ? "xl" : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "md", children: [
-        description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { size: "sm", c: "dimmed", children: description }) : null,
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: "md", children: [
+        description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Text, { size: "sm", c: "dimmed", children: description }) : null,
         children,
-        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Group, { justify: "space-between", mt: "md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Group, { gap: "sm", children: [
+        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Group, { justify: "space-between", mt: "md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Group, { gap: "sm", children: [
             closeAction,
             resolvedSecondaryAction
           ] }),
@@ -2502,8 +2797,8 @@ function FilterDrawer({
 }
 
 // src/PlaceholderPanel.tsx
-var import_core42 = require("@mantine/core");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_core43 = require("@mantine/core");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function PlaceholderPanel({
   title,
   description,
@@ -2513,16 +2808,16 @@ function PlaceholderPanel({
   mode
 }) {
   if (mode === "live" && children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: "md", children: [
-    badge ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Title, { order: 4, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Text, { c: "dimmed", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: "md", children: [
+    badge ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { c: "dimmed", children: description })
     ] }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Text, { size: "sm", children: footer }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { size: "sm", children: footer }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -2535,8 +2830,8 @@ function PlaceholderPanel({
 }
 
 // src/SimpleDataTable.tsx
-var import_core43 = require("@mantine/core");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_core44 = require("@mantine/core");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function SimpleDataTable({
   columns,
   rows,
@@ -2547,23 +2842,23 @@ function SimpleDataTable({
   getRowKey
 }) {
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
   }
   if (!rows.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Table.Th, { children: column.header }, String(column.key))) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Table.Th, { children: column.header }, String(column.key))) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
   ] }) });
 }
 
 // src/StatsSection.tsx
-var import_core44 = require("@mantine/core");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_core45 = require("@mantine/core");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function StatsSection({
   title,
   loading = false,
@@ -2575,11 +2870,11 @@ function StatsSection({
 }) {
   let content = children;
   if (error) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
   } else if (loading) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
   } else if (belowThreshold) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -2589,14 +2884,210 @@ function StatsSection({
       }
     );
   } else if (placeholder) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
+    content = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Title, { order: 3, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core45.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Title, { order: 3, children: title }),
     content
   ] });
 }
 
+// src/PeriodSelector.tsx
+var import_core46 = require("@mantine/core");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function PeriodSelector({
+  label,
+  description,
+  value,
+  options,
+  onChange,
+  timezone,
+  scope,
+  helperText,
+  error,
+  stale = false,
+  filtered = false,
+  disabled = false
+}) {
+  const selectedOption = options.find((option) => option.value === value);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FormField, { label, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      "select",
+      {
+        "aria-label": typeof label === "string" ? label : "Reporting period",
+        value,
+        disabled,
+        onChange: (event) => onChange?.(event.currentTarget.value),
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("option", { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Group, { gap: "xs", wrap: "wrap", children: [
+      timezone ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Badge, { variant: "outline", color: "gray", children: [
+        "Timezone: ",
+        timezone
+      ] }) : null,
+      filtered ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Badge, { variant: "light", color: "blue", children: "Filtered" }) : null,
+      stale ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Badge, { variant: "light", color: "orange", children: "Stale data" }) : null,
+      scope ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Badge, { variant: "outline", color: "gray", children: scope }) : null
+    ] }),
+    selectedOption?.description ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Text, { size: "sm", c: "dimmed", children: selectedOption.description }) : null,
+    helperText ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Text, { size: "sm", c: "dimmed", children: helperText }) : null
+  ] }) });
+}
+
+// src/EvidencePanel.tsx
+var import_core47 = require("@mantine/core");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var stateTone2 = {
+  current: { label: "Current", color: "teal" },
+  stale: { label: "Stale", color: "orange" },
+  partial: { label: "Partial data", color: "yellow" },
+  "permission-limited": { label: "Permission limited", color: "grape" },
+  loading: { label: "Loading", color: "blue" },
+  empty: { label: "No evidence", color: "gray" },
+  error: { label: "Needs attention", color: "red" }
+};
+function EvidencePanel({
+  title,
+  description,
+  source,
+  freshness,
+  confidence,
+  state = "current",
+  evidenceCount,
+  permissionNote,
+  retryAction,
+  details,
+  children
+}) {
+  const tone = stateTone2[state];
+  const isProblem = state === "error" || state === "permission-limited" || state === "stale" || state === "partial";
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Title, { order: 4, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: "dimmed", children: description }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Badge, { variant: "light", color: tone.color, children: tone.label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Group, { gap: "xs", wrap: "wrap", children: [
+      source ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Badge, { variant: "outline", color: "gray", children: [
+        "Source: ",
+        source
+      ] }) : null,
+      freshness ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Badge, { variant: "outline", color: "gray", children: [
+        "Freshness: ",
+        freshness
+      ] }) : null,
+      confidence ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Badge, { variant: "outline", color: "gray", children: [
+        "Confidence: ",
+        confidence
+      ] }) : null,
+      typeof evidenceCount === "number" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Badge, { variant: "outline", color: "gray", children: [
+        "Evidence: ",
+        evidenceCount
+      ] }) : null
+    ] }),
+    permissionNote ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Alert, { color: isProblem ? tone.color : "gray", variant: "light", children: permissionNote }) : null,
+    details,
+    children,
+    retryAction
+  ] }) });
+}
+
+// src/ChartTokenPanel.tsx
+var import_core48 = require("@mantine/core");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function ChartTokenPanel({
+  title,
+  description,
+  summary,
+  state = "ready",
+  legend = [],
+  children,
+  tableFallback,
+  retryAction
+}) {
+  if (state === "loading") {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(StateBlock, { variant: "loading", title: "Loading chart", description: summary, compact: true, action: retryAction });
+  }
+  if (state === "empty") {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(StateBlock, { variant: "empty", title: "No chart data", description: summary, compact: true, action: retryAction });
+  }
+  if (state === "below-threshold") {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(StateBlock, { variant: "not-enough-data", title: "Not enough data for chart", description: summary, compact: true, action: retryAction });
+  }
+  if (state === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(StateBlock, { variant: "error", title: "Unable to load chart", description: summary, compact: true, action: retryAction });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Title, { order: 4, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Text, { size: "sm", c: "dimmed", children: description }) : null
+      ] }),
+      state !== "ready" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Badge, { variant: "light", color: state === "permission-limited" ? "grape" : "yellow", children: state.replace("-", " ") }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Text, { size: "sm", children: summary }),
+    legend.length ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Group, { gap: "xs", wrap: "wrap", "aria-label": "Chart legend", children: legend.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Badge, { variant: "outline", color: "gray", title: typeof item.description === "string" ? item.description : void 0, children: [
+      item.label,
+      ": ",
+      item.token
+    ] }, `${String(item.label)}-${index}`)) }) : null,
+    children,
+    tableFallback ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Text, { size: "sm", fw: 600, children: "Accessible data fallback" }),
+      tableFallback
+    ] }) : null
+  ] }) });
+}
+
+// src/ReportingSection.tsx
+var import_core49 = require("@mantine/core");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+function ReportingSection({
+  title,
+  description,
+  state = "ready",
+  periodControl,
+  evidence,
+  metrics,
+  chart,
+  table,
+  action,
+  stateMessage,
+  retryAction
+}) {
+  let stateBlock = null;
+  if (state === "loading") {
+    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StateBlock, { variant: "loading", title: "Loading report", description: stateMessage ?? "The reporting surface is synchronizing.", compact: true });
+  } else if (state === "empty") {
+    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StateBlock, { variant: "empty", title: "No report data", description: stateMessage ?? "No records match this reporting scope yet.", compact: true });
+  } else if (state === "error") {
+    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StateBlock, { variant: "error", title: "Unable to load report", description: stateMessage ?? "The report could not be prepared.", compact: true, action: retryAction });
+  } else if (state === "below-threshold") {
+    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StateBlock, { variant: "not-enough-data", title: "Not enough data", description: stateMessage ?? "This report is hidden until the threshold is met.", compact: true });
+  } else if (state === "permission-limited") {
+    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StateBlock, { variant: "permission", title: "Permission-limited report", description: stateMessage ?? "Some evidence is hidden by access rules.", compact: true, action: retryAction });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Title, { order: 3, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Text, { size: "sm", c: "dimmed", children: description }) : null
+      ] }),
+      action
+    ] }),
+    periodControl,
+    (state === "partial" || state === "stale" || state === "filtered") && stateMessage ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StateBlock, { variant: "info", title: state === "partial" ? "Partial report" : state === "stale" ? "Stale report" : "Filtered report", description: stateMessage, compact: true }) : null,
+    stateBlock,
+    metrics,
+    chart,
+    table,
+    evidence
+  ] }) });
+}
+
 // src/locales/ar.ts
 var ar = {
   "gds.action.settings": "\u0627\u0644\u0625\u0639\u062F\u0627\u062F\u0627\u062A",
@@ -3906,6 +4397,7 @@ function getGdsMessages(locale) {
   ArticleShell,
   AuthShell,
   BrowseSurface,
+  ChartTokenPanel,
   ChoiceChip,
   ConsumerDashboardGrid,
   ConsumerSection,
@@ -3916,6 +4408,7 @@ function getGdsMessages(locale) {
   EditorialCard,
   EditorialHero,
   EmptyState,
+  EvidencePanel,
   FeatureBand,
   FilterDrawer,
   FoodMenuSection,
@@ -3927,11 +4420,15 @@ function getGdsMessages(locale) {
   MediaCard,
   MediaField,
   MetricCard,
+  PROVIDER_IDENTITY_REGISTRY,
   PageHeader,
+  PeriodSelector,
   PlaceholderPanel,
   PlaybackSurface,
   ProductCard,
   ProgressCard,
+  ProviderIdentityButton,
+  ProviderIdentityButtonGroup,
   PublicBrandFooter,
   PublicFlowShell,
   PublicFoodCard,
@@ -3942,6 +4439,7 @@ function getGdsMessages(locale) {
   ReferenceLinkGrid,
   ReferenceLocaleNotice,
   ReferenceSection,
+  ReportingSection,
   SectionPanel,
   SimpleDataTable,
   SocialAuthButtons,
@@ -3956,13 +4454,18 @@ function getGdsMessages(locale) {
   fr,
   gdsLocales,
   getGdsMessages,
+  getProviderIdentityLabel,
+  getProviderIdentityPolicy,
   getSemanticActionConfig,
   getSemanticActionLabel,
+  getSupportedProviderIdentityIds,
   he,
   hu,
+  isPresentationMode,
   it,
   mergeGdsVocabularyPacks,
   resolveAccentPanelStyles,
   resolveSemanticActionConfig,
+  resolveSurfacePresentationStyles,
   ru
 });