@doneisbetter/gds-core 2.6.5 → 2.6.7

package/dist/client.js

@@ -37,6 +37,7 @@ __export(client_exports, {
   DiscoveryShell: () => DiscoveryShell,
   DocsCodeBlock: () => DocsCodeBlock,
   DocsPageShell: () => DocsPageShell,
+  DocsShell: () => DocsShell,
   EditorialCard: () => EditorialCard,
   EditorialHero: () => EditorialHero,
   EmptyState: () => EmptyState,
@@ -52,11 +53,14 @@ __export(client_exports, {
   MediaCard: () => MediaCard,
   MediaField: () => MediaField,
   MetricCard: () => MetricCard,
+  PROVIDER_IDENTITY_REGISTRY: () => PROVIDER_IDENTITY_REGISTRY,
   PageHeader: () => PageHeader,
   PlaceholderPanel: () => PlaceholderPanel,
   PlaybackSurface: () => PlaybackSurface,
   ProductCard: () => ProductCard,
   ProgressCard: () => ProgressCard,
+  ProviderIdentityButton: () => ProviderIdentityButton,
+  ProviderIdentityButtonGroup: () => ProviderIdentityButtonGroup,
   PublicBrandFooter: () => PublicBrandFooter,
   PublicFlowShell: () => PublicFlowShell,
   PublicFoodCard: () => PublicFoodCard,
@@ -89,14 +93,17 @@ __export(client_exports, {
   fr: () => fr,
   gdsLocales: () => gdsLocales,
   getGdsMessages: () => getGdsMessages,
+  getProviderIdentityLabel: () => getProviderIdentityLabel,
   getSemanticActionConfig: () => getSemanticActionConfig,
   getSemanticActionLabel: () => getSemanticActionLabel,
   he: () => he,
   hu: () => hu,
+  isPresentationMode: () => isPresentationMode,
   it: () => it,
   mergeGdsVocabularyPacks: () => mergeGdsVocabularyPacks,
   resolveAccentPanelStyles: () => resolveAccentPanelStyles,
   resolveSemanticActionConfig: () => resolveSemanticActionConfig,
+  resolveSurfacePresentationStyles: () => resolveSurfacePresentationStyles,
   ru: () => ru
 });
 module.exports = __toCommonJS(client_exports);
@@ -574,6 +581,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)",
@@ -588,8 +640,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: [
@@ -601,7 +663,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 })
   ] }) });
 }
 
@@ -829,20 +891,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_runtime14.jsxs)(
     import_core13.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_runtime14.jsx)(import_core13.ThemeIcon, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: 6, align: compact ? "flex-start" : "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: 6, align: headingAlign, children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Title, { order: compact ? 4 : 3, children: title }),
           description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
         ] }),
@@ -855,42 +931,60 @@ function StateBlock({
 // src/ReferenceThemeExplorer.tsx
 var import_gds_theme3 = require("@doneisbetter/gds-theme");
 var import_jsx_runtime15 = require("react/jsx-runtime");
+function resolvePreviewColorScheme(presetId, requestedScheme) {
+  if (presetId === "dark-public") {
+    return "dark";
+  }
+  return requestedScheme;
+}
 var themePresetCatalog = {
   default: {
     label: "Default runtime theme",
     bestFor: "Balanced multi-surface products that need the baseline GDS system.",
     summary: "The default shared runtime lane for most adopters.",
-    themeKey: "gdsTheme"
+    themeKey: "gdsTheme",
+    supportedUse: "Starter products, hybrid public/admin apps, and teams adopting all canonical contracts.",
+    avoidFor: "Avoid for products requiring a distinct editorial voice or guaranteed dark-first brand contrast."
   },
   "dark-public": {
     label: "Dark public theme",
     bestFor: "Dark-first public experiences and campaign-style landing surfaces.",
     summary: "A darker public presentation lane with the shipped runtime rhythm intact.",
-    themeKey: "gdsDarkPublicTheme"
+    themeKey: "gdsDarkPublicTheme",
+    supportedUse: "Products with a deliberate dark visual baseline, low-light UX, or premium media-first surfaces.",
+    avoidFor: "Avoid when mixed mode and editorial readability are core requirements."
   },
   "flat-surface": {
     label: "Flat surface theme",
     bestFor: "Operational products that prefer quieter elevation and flatter surface contrast.",
     summary: "Removes some visual weight without creating a second token authority.",
-    themeKey: "gdsFlatSurfaceTheme"
+    themeKey: "gdsFlatSurfaceTheme",
+    supportedUse: "Dashboards, admin surfaces, and dense content where elevation becomes distracting.",
+    avoidFor: "Avoid for brand-first storytelling or high-expressiveness hero-first pages."
   },
   editorial: {
     label: "Editorial serif theme",
     bestFor: "Documentation, editorial, and content-led experiences.",
     summary: "Adds a more expressive public reading tone while staying inside GDS contracts.",
-    themeKey: "gdsEditorialPublicTheme"
+    themeKey: "gdsEditorialPublicTheme",
+    supportedUse: "Guides, docs, and catalog content where reading comfort matters more than impact.",
+    avoidFor: "Avoid for dense transactional or data-first workflows with strict minimal contrast."
   },
   brand: {
     label: "Brand theme generator",
     bestFor: "Consumer teams that need controlled brand expression without forking the system.",
     summary: "Composes the shipped helpers into a governed product-authored theme lane.",
-    themeKey: "createPublicBrandTheme(...)"
+    themeKey: "createPublicBrandTheme(...)",
+    supportedUse: "Whitelisted public branding programs with narrow product-authored intent and policy guardrails.",
+    avoidFor: "Avoid for local style experiments or temporary visual fixes without compliance approval."
   }
 };
 function ThemePreviewSurface({
   preset,
-  colorScheme
+  colorScheme,
+  requestedColorScheme
 }) {
+  const forcedScheme = requestedColorScheme && requestedColorScheme !== colorScheme;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-start", wrap: "wrap", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 4, children: [
@@ -905,7 +999,8 @@ function ThemePreviewSurface({
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Color scheme:" }),
           " ",
           colorScheme
-        ] })
+        ] }),
+        forcedScheme ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "This lane always previews in dark mode so the runtime stays inside its sanctioned contrast contract." }) : null
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemeToggle, {})
     ] }),
@@ -972,8 +1067,10 @@ function ReferenceThemeExplorer() {
   const comparisonSummary = themePresetCatalog[comparisonPreset];
   const selectedTheme = (0, import_react2.useMemo)(() => resolveTheme(preset), [preset, brandPrimary, brandFlatSurfaces, brandEditorialSerif]);
   const comparedTheme = (0, import_react2.useMemo)(() => resolveTheme(comparisonPreset), [comparisonPreset, brandPrimary, brandFlatSurfaces, brandEditorialSerif]);
-  const previewKey = `${preset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}`;
-  const comparisonPreviewKey = `${comparisonPreset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}`;
+  const effectiveColorScheme = resolvePreviewColorScheme(preset, colorScheme);
+  const effectiveComparisonScheme = resolvePreviewColorScheme(comparisonPreset, colorScheme);
+  const previewKey = `${preset}-${effectiveColorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}`;
+  const comparisonPreviewKey = `${comparisonPreset}-${effectiveComparisonScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}`;
   const reset = () => {
     setPreset("default");
     setColorScheme("light");
@@ -1068,7 +1165,8 @@ function ReferenceThemeExplorer() {
                 /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Color scheme:" }),
                 " ",
                 colorScheme
-              ] })
+              ] }),
+              preset === "dark-public" && colorScheme !== effectiveColorScheme ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "gdsDarkPublicTheme always renders in dark mode inside the live preview." }) : null
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               import_core14.Checkbox,
@@ -1101,7 +1199,17 @@ function ReferenceThemeExplorer() {
         children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.SimpleGrid, { cols: { base: 1, md: 2, xl: 5 }, spacing: "md", children: Object.values(themePresetCatalog).map((lane) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 6, children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, size: "sm", children: lane.label }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: lane.summary }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Code, { block: true, fz: "10px", children: lane.themeKey })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Best for:" }),
+            " ",
+            lane.supportedUse
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Code, { block: true, fz: "10px", children: lane.themeKey }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "xs", c: "dimmed", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Avoid for:" }),
+            " ",
+            lane.avoidFor ?? "No special exclusion noted for this lane."
+          ] })
         ] }) }, lane.themeKey)) })
       }
     ),
@@ -1111,8 +1219,15 @@ function ReferenceThemeExplorer() {
         title: "Live Theme Preview",
         description: "Visitors can test the shipped presets, compare lanes, and inspect actual GDS surfaces under each theme.",
         children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.SimpleGrid, { cols: { base: 1, xl: comparisonEnabled ? 2 : 1 }, spacing: "lg", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_gds_theme3.GdsProvider, { theme: selectedTheme, defaultColorScheme: colorScheme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemePreviewSurface, { preset: selectionSummary, colorScheme }) }, previewKey),
-          comparisonEnabled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_gds_theme3.GdsProvider, { theme: comparedTheme, defaultColorScheme: colorScheme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_gds_theme3.GdsProvider, { theme: selectedTheme, defaultColorScheme: effectiveColorScheme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            ThemePreviewSurface,
+            {
+              preset: selectionSummary,
+              colorScheme: effectiveColorScheme,
+              requestedColorScheme: colorScheme
+            }
+          ) }, previewKey),
+          comparisonEnabled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_gds_theme3.GdsProvider, { theme: comparedTheme, defaultColorScheme: effectiveComparisonScheme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
             /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-start", wrap: "wrap", children: [
               /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 4, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, children: "Comparison Preview Surface" }),
@@ -1120,7 +1235,14 @@ function ReferenceThemeExplorer() {
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { color: "violet", variant: "light", children: comparisonSummary.label })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemePreviewSurface, { preset: comparisonSummary, colorScheme })
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              ThemePreviewSurface,
+              {
+                preset: comparisonSummary,
+                colorScheme: effectiveComparisonScheme,
+                requestedColorScheme: colorScheme
+              }
+            )
           ] }) }) }, comparisonPreviewKey) : null
         ] })
       }
@@ -2105,21 +2227,97 @@ function DiscoveryShell({
   );
 }
 
-// src/SidebarNav.tsx
+// src/DocsShell.tsx
 var import_react5 = require("react");
 var import_core31 = require("@mantine/core");
-var import_gds_theme4 = require("@doneisbetter/gds-theme");
 var import_jsx_runtime33 = require("react/jsx-runtime");
+function DocsShellSidebar({ primaryNavigation, secondaryNavigation }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "md", h: "100%", children: [
+    primaryNavigation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Text, { size: "xs", fw: 700, c: "dimmed", children: "Primary" }),
+      primaryNavigation
+    ] }) : null,
+    secondaryNavigation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Text, { size: "xs", fw: 700, c: "dimmed", children: "More" }),
+        secondaryNavigation
+      ] })
+    ] }) : null
+  ] });
+}
+function resolveContentContainerSize(value) {
+  if (value === "full") {
+    return "100%";
+  }
+  return value ?? "lg";
+}
+function DocsShell({
+  brand,
+  primaryNavigation,
+  secondaryNavigation,
+  headerContext,
+  actions,
+  mobileNavigation,
+  mobileNavigationMode = "drawer",
+  footer,
+  children,
+  contentWidth = "full"
+}) {
+  const [mobileNavOpen, setMobileNavOpen] = (0, import_react5.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    DiscoveryShell,
+    {
+      header: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Group, { h: "100%", justify: "space-between", align: "center", wrap: "nowrap", gap: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Group, { gap: "sm", align: "center", wrap: "nowrap", style: { minWidth: 0 }, children: [
+          mobileNavigationMode === "inline-collapse" && mobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              import_core31.Burger,
+              {
+                opened: mobileNavOpen,
+                onClick: () => setMobileNavOpen((value) => !value),
+                hiddenFrom: "sm",
+                size: "sm",
+                "aria-label": "Toggle docs navigation"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Transition, { mounted: mobileNavOpen, transition: "pop", duration: 120, children: (styles) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Box, { style: styles, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Box, { mt: "xs", p: "sm", style: { borderRadius: 8, border: "1px solid var(--mantine-color-default-border)" }, children: mobileNavigation }) }) })
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Box, { style: { minWidth: 0 }, children: brand }),
+          headerContext ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Text, { size: "sm", c: "dimmed", lineClamp: 1, children: headerContext }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Group, { gap: "sm", wrap: "nowrap", style: { minWidth: 0 }, children: actions })
+      ] }),
+      sidebar: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        DocsShellSidebar,
+        {
+          primaryNavigation,
+          secondaryNavigation
+        }
+      ),
+      footer,
+      mobileNavigationLabel: "Open docs navigation",
+      headerHeight: 72,
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Container, { size: resolveContentContainerSize(contentWidth), px: "md", py: "lg", w: "100%", children })
+    }
+  );
+}
+
+// src/SidebarNav.tsx
+var import_react6 = require("react");
+var import_core32 = require("@mantine/core");
+var import_gds_theme4 = require("@doneisbetter/gds-theme");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function SidebarNav({ children, ariaLabel = "Primary navigation", gap = "md" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Stack, { component: "nav", "aria-label": ariaLabel, gap, h: "100%", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Stack, { component: "nav", "aria-label": ariaLabel, gap, h: "100%", children });
 }
 function SidebarNavSection({ label, children, pushToBottom = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "xs", mt: pushToBottom ? "auto" : void 0, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Text, { size: "xs", fw: 700, c: "dimmed", children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Stack, { gap: 4, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Stack, { gap: "xs", mt: pushToBottom ? "auto" : void 0, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Text, { size: "xs", fw: 700, c: "dimmed", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Stack, { gap: 4, children })
   ] });
 }
-var _SidebarNavItem = (0, import_react5.forwardRef)(
+var _SidebarNavItem = (0, import_react6.forwardRef)(
   ({
     action,
     label,
@@ -2135,14 +2333,14 @@ var _SidebarNavItem = (0, import_react5.forwardRef)(
     const config = action ? resolveSemanticActionConfig(action, vocabularyPacks) : null;
     const Icon = config?.icon;
     const resolvedLabel = label ?? (action ? getSemanticActionLabel(action, t, vocabularyPacks) : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_core31.NavLink,
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      import_core32.NavLink,
       {
         ref,
         label: resolvedLabel,
         description,
-        leftSection: icon ?? (Icon ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { size: "1rem", stroke: 1.5 }) : void 0),
-        rightSection: badge ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Box, { children: badge }) : props.rightSection,
+        leftSection: icon ?? (Icon ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { size: "1rem", stroke: 1.5 }) : void 0),
+        rightSection: badge ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Box, { children: badge }) : props.rightSection,
         "aria-label": ariaLabel ?? (typeof resolvedLabel === "string" ? resolvedLabel : void 0),
         "aria-current": props.active ? "page" : ariaCurrent,
         ...props
@@ -2150,21 +2348,21 @@ var _SidebarNavItem = (0, import_react5.forwardRef)(
     );
   }
 );
-var SidebarNavItem = (0, import_core31.createPolymorphicComponent)(_SidebarNavItem);
+var SidebarNavItem = (0, import_core32.createPolymorphicComponent)(_SidebarNavItem);
 
 // src/PublicSiteFooter.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 PublicSiteFooter({ children, meta }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Stack, { component: "footer", gap: "xs", children: [
-    children ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Text, { size: "sm", children }) : null,
-    meta ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Group, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Text, { size: "xs", c: "dimmed", children: meta }) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { component: "footer", gap: "xs", children: [
+    children ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Text, { size: "sm", children }) : null,
+    meta ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Group, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Text, { size: "xs", c: "dimmed", children: meta }) }) : null
   ] });
 }
 
 // src/PublicBrandFooter.tsx
-var import_core33 = require("@mantine/core");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_core34 = require("@mantine/core");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function PublicBrandFooter({
   media,
   brandTitle,
@@ -2179,8 +2377,8 @@ function PublicBrandFooter({
   const mediaSpan = layoutVariant === "immersive-media" ? 5 : 4;
   const primarySpan = media ? layoutVariant === "balanced-quote" ? 4 : 4 : secondary ? 6 : 12;
   const secondarySpan = media ? Math.max(3, 12 - mediaSpan - primarySpan) : Math.max(4, 12 - primarySpan);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_core33.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_core34.Paper,
     {
       component: "footer",
       withBorder: true,
@@ -2188,19 +2386,19 @@ function PublicBrandFooter({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       "data-layout-variant": layoutVariant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { gap: "lg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
-          media ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Box, { className: classNames?.media, children: media }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
-            brandTitle ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Title, { order: 4, children: brandTitle }) : null,
-            description ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Text, { c: "dimmed", children: description }) : null,
-            actions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Box, { children: actions }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
+          media ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { className: classNames?.media, children: media }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
+            brandTitle ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Title, { order: 4, children: brandTitle }) : null,
+            description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { c: "dimmed", children: description }) : null,
+            actions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { children: actions }) : null
           ] }) }),
-          secondary ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Stack, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
+          secondary ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Stack, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
         ] }),
-        legal ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Group, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Text, { size: "sm", c: "dimmed", children: legal }) : legal })
+        legal ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Group, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { size: "sm", c: "dimmed", children: legal }) : legal })
         ] }) : null
       ] })
     }
@@ -2208,8 +2406,8 @@ function PublicBrandFooter({
 }
 
 // src/AuthShell.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");
 function AuthShell({
   title,
   description,
@@ -2221,65 +2419,195 @@ function AuthShell({
   dividerLabel = "Or continue with your account",
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Container, { size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "xl", children: [
-    brand || headerActions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Group, { justify: brand && headerActions ? "space-between" : "center", align: "center", children: [
-      brand ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, {}),
-      headerActions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Group, { gap: "sm", children: headerActions }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Box, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Container, { size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "xl", children: [
+    brand || headerActions ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { justify: brand && headerActions ? "space-between" : "center", align: "center", children: [
+      brand ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Box, { children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Box, {}),
+      headerActions ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Group, { gap: "sm", children: headerActions }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Card, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "xs", ta: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Title, { order: 2, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { c: "dimmed", size: "sm", children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Card, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "xs", ta: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Title, { order: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { c: "dimmed", size: "sm", children: description }) : null
       ] }),
-      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { children: socialAuth }) : null,
-      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Divider, { label: dividerLabel, labelPosition: "center" }) : null,
+      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Box, { children: socialAuth }) : null,
+      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Divider, { label: dividerLabel, labelPosition: "center" }) : null,
       children,
-      helper ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
+      helper ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
     ] }) }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
   ] }) }) });
 }
 
 // src/SocialAuthButtons.tsx
-var import_core35 = require("@mantine/core");
-var import_jsx_runtime37 = 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 import_core37 = require("@mantine/core");
+
+// src/ProviderIdentityButtons.tsx
+var import_core36 = require("@mantine/core");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+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_runtime37.jsx)(import_core35.ThemeIcon, { variant: "light", color: config.color, radius: "xl", size: "md", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "xs", fw: 700, children: config.mark }) });
+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 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 };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_core35.Button,
+function ProviderIdentityMark({ provider }) {
+  const meta = getProviderIdentityMeta(provider);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_core36.ThemeIcon,
     {
-      variant: "default",
+      variant: "light",
+      color: meta.brandColor,
+      radius: "xl",
+      size: "md",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "xs", fw: 700, c: "inherit", children: meta.markLabel })
+    }
+  );
+}
+function ProviderIdentityButton({
+  provider,
+  label,
+  description,
+  href,
+  onClick,
+  disabled,
+  loading,
+  fullWidth = true,
+  size = "md",
+  variant = "neutral",
+  ariaLabel,
+  describedBy,
+  minTouchTargetPx = 44
+}) {
+  const meta = getProviderIdentityMeta(provider);
+  const buttonLabel = resolveProviderLabel(provider, label);
+  const buttonProps = href ? {
+    component: "a",
+    href
+  } : {
+    onClick
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_core36.Button,
+    {
+      variant: mapVariant(variant),
+      color: variant === "solid" ? meta.brandColor : void 0,
       justify: "space-between",
-      fullWidth: true,
-      size: compact ? "sm" : "md",
-      leftSection: /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime38.jsx)(ProviderIdentityMark, { provider }),
+      disabled,
+      loading,
+      styles: { root: { minHeight: minTouchTargetPx } },
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: 0, align: "flex-start", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { inherit: true, children: label }),
-        provider.description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "xs", c: "dimmed", lh: 1.2, children: provider.description }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: 0, align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { inherit: true, children: buttonLabel }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "xs", c: "dimmed", lh: 1.2, children: description }) : 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_runtime38.jsx)(ProviderIdentityButton, { ...entry }, key);
+  });
+  if (layout === "grid") {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Stack, { gap: "sm", children: content });
+}
+
+// src/SocialAuthButtons.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function SocialAuthButtons({
   providers,
   title = "Continue with a trusted provider",
@@ -2290,44 +2618,54 @@ function SocialAuthButtons({
   if (!providers.length) {
     return null;
   }
-  const content = providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SocialAuthButton, { provider, compact }, provider.id));
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: 4, ta: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { justify: "center", gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(GdsIcons.Login, { size: "1rem" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { fw: 600, children: title })
+  const buttons = providers.map((provider) => ({
+    provider: provider.id,
+    label: provider.label,
+    description: provider.description,
+    href: provider.href,
+    onClick: provider.onClick,
+    disabled: provider.disabled,
+    loading: provider.loading,
+    size: provider.size ?? (compact ? "sm" : "md"),
+    variant: provider.variant
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: 4, ta: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Group, { justify: "center", gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GdsIcons.Login, { size: "1rem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { fw: 600, children: title })
       ] }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "sm", c: "dimmed", children: description }) : null
+      description ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { size: "sm", c: "dimmed", children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Divider, {}),
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Stack, { gap: "sm", children: content })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ProviderIdentityButtonGroup, { providers: buttons, layout })
   ] });
 }
 
 // src/ArticleShell.tsx
-var import_core36 = require("@mantine/core");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_core38 = require("@mantine/core");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function ArticleShell({ eyebrow, title, lead, meta, sideRail, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: "lg", maw: 760, flex: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Title, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Group, { gap: "md", children: meta }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Stack, { gap: "lg", maw: 760, flex: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Group, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Stack, { gap: "md", children })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Stack, { gap: "md", children })
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/DocsCodeBlock.tsx
-var import_react6 = require("react");
-var import_core37 = require("@mantine/core");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_core39 = require("@mantine/core");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function DocsCodeBlock({ code, language, title, withCopy = true }) {
-  const [copied, setCopied] = (0, import_react6.useState)(false);
+  const [copied, setCopied] = (0, import_react7.useState)(false);
   const handleCopy = async () => {
     if (!navigator?.clipboard) {
       return;
@@ -2336,44 +2674,44 @@ function DocsCodeBlock({ code, language, title, withCopy = true }) {
     setCopied(true);
     window.setTimeout(() => setCopied(false), 1200);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: "sm", children: [
-    title || withCopy ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Group, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: 0, children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { fw: 600, children: title }) : null,
-        language ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { size: "xs", c: "dimmed", children: language }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Stack, { gap: "sm", children: [
+    title || withCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Stack, { gap: 0, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { fw: 600, children: title }) : null,
+        language ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { size: "xs", c: "dimmed", children: language }) : null
       ] }),
-      withCopy ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        import_core37.ActionIcon,
+      withCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        import_core39.ActionIcon,
         {
           variant: "subtle",
           "aria-label": copied ? "Copied code block" : "Copy code block",
           onClick: () => {
             void handleCopy();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GdsIcons.Copy, { size: "1rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(GdsIcons.Copy, { size: "1rem" })
         }
       ) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Code, { block: true, children: code })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Code, { block: true, children: code })
   ] }) });
 }
 
 // src/CtaButtonGroup.tsx
-var import_core38 = require("@mantine/core");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_core40 = require("@mantine/core");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function CtaButtonGroup({ primary, secondary, tertiary }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Group, { gap: "sm", align: "stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: primary }),
-      secondary ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: secondary }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Group, { gap: "sm", align: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: primary }),
+      secondary ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: secondary }) : null
     ] }),
-    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: tertiary }) : null
+    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: tertiary }) : null
   ] });
 }
 
 // src/DocsPageShell.tsx
-var import_core39 = require("@mantine/core");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_core41 = require("@mantine/core");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function DocsPageShell({
   breadcrumbs = [],
   title,
@@ -2384,27 +2722,27 @@ function DocsPageShell({
   footerNext,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Stack, { component: "article", gap: "lg", maw: 760, flex: 1, children: [
-      breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Breadcrumbs, { children: breadcrumbs.map(
-        (crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { children: crumb.label }, crumb.label)
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Container, { fluid: true, py: "xl", px: { base: "md", md: "lg", lg: "xl" }, w: "100%", maw: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { component: "article", gap: "lg", flex: 1, miw: 0, children: [
+      breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Breadcrumbs, { children: breadcrumbs.map(
+        (crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { children: crumb.label }, crumb.label)
       ) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Stack, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Title, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Group, { gap: "md", children: meta }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Group, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Stack, { gap: "md", children }),
-      footerNext ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Stack, { gap: "md", children }),
+      footerNext ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/EditorialHero.tsx
-var import_core40 = require("@mantine/core");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_core42 = require("@mantine/core");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function resolveActionVariant(action, index, seenPrimary) {
   const requested = action.variant ?? (index === 0 ? "primary" : "secondary");
   if (requested === "primary" && !seenPrimary) {
@@ -2416,8 +2754,8 @@ function resolveActionVariant(action, index, seenPrimary) {
   return { variant: "default", seenPrimary };
 }
 function HeroAction({ action, variant }) {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_core40.Anchor,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_core42.Anchor,
     {
       href: action.href,
       onClick: action.onClick,
@@ -2441,8 +2779,8 @@ function HeroAction({ action, variant }) {
     }
   );
   if (!action.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      import_core40.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      import_core42.Box,
       {
         component: "button",
         type: "button",
@@ -2469,30 +2807,30 @@ function HeroAction({ action, variant }) {
   return content;
 }
 function LoadingHero({ compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: "md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 16, width: 96, radius: "xl" }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 48, width: "90%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 18, width: "100%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 18, width: "82%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Group, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 40, width: 140, radius: "md" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 40, width: 140, radius: "md" })
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Skeleton, { height: 16, width: 96, radius: "xl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Skeleton, { height: 48, width: "90%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Skeleton, { height: 18, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Skeleton, { height: 18, width: "82%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Group, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Skeleton, { height: 40, width: 140, radius: "md" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Skeleton, { height: 40, width: 140, radius: "md" })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { radius: "lg" }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Skeleton, { radius: "lg" }) }) })
   ] }) });
 }
 function MediaFallback() {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_core40.ThemeIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_core42.ThemeIcon,
     {
       size: "100%",
       radius: "lg",
       color: "gray",
       variant: "light",
       "aria-label": "Hero media is unavailable",
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
     }
   ) });
 }
@@ -2512,8 +2850,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_runtime42.jsxs)(
-    import_core40.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    import_core42.Box,
     {
       component: "figure",
       m: 0,
@@ -2526,9 +2864,9 @@ function MediaFrame({
       },
       "aria-label": mediaAlt,
       children: [
-        media ?? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MediaFallback, {}),
-        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          import_core40.Box,
+        media ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MediaFallback, {}),
+        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_core42.Box,
           {
             "aria-hidden": true,
             style: {
@@ -2561,7 +2899,7 @@ function EditorialHero({
   classNames
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(LoadingHero, { compact });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LoadingHero, { compact });
   }
   const stackAlign = align === "center" ? "center" : "flex-start";
   const textAlign = align === "center" ? "center" : "left";
@@ -2569,15 +2907,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_runtime42.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
   });
-  const textSlot = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: "sm", align: stackAlign, children: [
-      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
+  const textSlot = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: "sm", align: stackAlign, children: [
+      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
     ] }),
-    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       CtaButtonGroup,
       {
         primary: renderedActions[0],
@@ -2585,8 +2923,8 @@ function EditorialHero({
         tertiary: renderedActions[2]
       }
     ) }) : null,
-    meta.length ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-      import_core40.Group,
+    meta.length ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      import_core42.Group,
       {
         gap: 6,
         px: "sm",
@@ -2597,17 +2935,17 @@ function EditorialHero({
         },
         children: [
           item.icon,
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: "sm", c: "dimmed", children: item.label })
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Text, { size: "sm", c: "dimmed", children: item.label })
         ]
       },
       item.id
     )) }) : null
   ] });
-  const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
-  const textCol = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
-  const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_core40.Paper,
+  const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
+  const textCol = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
+  const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_core42.Paper,
     {
       component: "section",
       withBorder: true,
@@ -2615,7 +2953,7 @@ function EditorialHero({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       style: surfaceVariant === "flat-public" ? { boxShadow: "none" } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
         textCol,
         mediaCol
       ] })
@@ -2624,19 +2962,19 @@ function EditorialHero({
 }
 
 // src/FeatureBand.tsx
-var import_core41 = require("@mantine/core");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_core43 = require("@mantine/core");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function FeatureBandSkeleton({
   columns = 3,
   bordered = true,
   variant = "default"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: 20, width: "75%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: 14, width: "100%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: 14, width: "82%", radius: "md" })
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Skeleton, { height: 20, width: "75%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Skeleton, { height: 14, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Skeleton, { height: 14, width: "82%", radius: "md" })
     ] })
   ] }) }, index)) });
 }
@@ -2649,10 +2987,10 @@ function FeatureBand({
   variant = "default"
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
   }
   if (!items.length) {
-    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       EmptyState,
       {
         title: "No supporting details available",
@@ -2660,9 +2998,9 @@ function FeatureBand({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "md", children: [
-    variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      import_core41.Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: "md", children: [
+    variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      import_core43.Text,
       {
         fw: 800,
         size: "sm",
@@ -2674,18 +3012,18 @@ function FeatureBand({
         },
         children: item.stepLabel ?? `Step ${index + 1}`
       }
-    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Title, { order: 4, children: item.title }),
-      item.description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { c: "dimmed", children: item.description }) : null,
-      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
+    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Title, { order: 4, children: item.title }),
+      item.description ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { c: "dimmed", children: item.description }) : null,
+      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
     ] })
   ] }) }, item.id)) }) });
 }
 
 // src/MapPanel.tsx
-var import_core42 = require("@mantine/core");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_core44 = require("@mantine/core");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function MapPanel({
   title,
   description,
@@ -2701,7 +3039,7 @@ function MapPanel({
 }) {
   let body;
   if (loading) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       StateBlock,
       {
         variant: "loading",
@@ -2711,9 +3049,9 @@ function MapPanel({
       }
     );
   } else if (error) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
   } else if (!iframeSrc && !renderMap) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       StateBlock,
       {
         variant: "empty",
@@ -2723,9 +3061,9 @@ function MapPanel({
       }
     );
   } else if (renderMap) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Box, { style: { minHeight }, children: renderMap() });
+    body = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Box, { style: { minHeight }, children: renderMap() });
   } else {
-    body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "iframe",
       {
         src: iframeSrc,
@@ -2737,21 +3075,21 @@ function MapPanel({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Title, { order: 3, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Text, { size: "sm", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Title, { order: 3, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Text, { size: "sm", c: "dimmed", children: description }) : null
       ] }),
-      actions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ActionBar, { ...actions }) : null
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ActionBar, { ...actions }) : null
     ] }),
     body
   ] }) });
 }
 
 // src/PublicFlowShell.tsx
-var import_core43 = require("@mantine/core");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_core45 = require("@mantine/core");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var stageTone = {
   idle: { label: "Idle", color: "gray" },
   loading: { label: "Loading", color: "blue" },
@@ -2803,7 +3141,7 @@ function PublicFlowShell({
   const actionBar = toActionBar(stage.actions);
   let body = stage.body;
   if (stage.status === "loading") {
-    body = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       StateBlock,
       {
         variant: "loading",
@@ -2812,7 +3150,7 @@ function PublicFlowShell({
       }
     );
   } else if (stage.status === "error") {
-    body = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    body = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       StateBlock,
       {
         variant: "error",
@@ -2821,7 +3159,7 @@ function PublicFlowShell({
       }
     );
   } else if (!stage.body && !hardwareSurface) {
-    body = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    body = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       EmptyState,
       {
         title: "No stage content available",
@@ -2829,29 +3167,29 @@ function PublicFlowShell({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: "lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: 4, children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Group, { gap: "sm", wrap: "wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Title, { order: 2, children: stage.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Badge, { variant: "light", color: tone.color, children: tone.label })
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core45.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core45.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core45.Stack, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core45.Group, { gap: "sm", wrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Title, { order: 2, children: stage.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Badge, { variant: "light", color: tone.color, children: tone.label })
         ] }),
-        stage.description ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { size: "sm", c: "dimmed", children: stage.description }) : null
+        stage.description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "dimmed", children: stage.description }) : null
       ] }),
       exitAction
     ] }),
-    stage.notice ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { size: "sm", c: "dimmed", children: stage.notice }) : null,
+    stage.notice ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "dimmed", children: stage.notice }) : null,
     body,
     hardwareSurface,
     stage.aside,
-    actionBar ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ActionBar, { ...actionBar }) : null
+    actionBar ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActionBar, { ...actionBar }) : null
   ] }) });
 }
 
 // src/PlaybackSurface.tsx
-var import_core44 = require("@mantine/core");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_core46 = require("@mantine/core");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var stateTone = {
   loading: { label: "Loading", color: "blue" },
   ready: { label: "Ready", color: "teal" },
@@ -2874,7 +3212,7 @@ function PlaybackSurface({
   const tone = stateTone[state];
   let content;
   if (state === "loading") {
-    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       StateBlock,
       {
         variant: "loading",
@@ -2883,7 +3221,7 @@ function PlaybackSurface({
       }
     );
   } else if (state === "empty") {
-    content = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    content = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       EmptyState,
       {
         title: "No playback content available",
@@ -2891,7 +3229,7 @@ function PlaybackSurface({
       }
     );
   } else if (state === "error") {
-    content = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    content = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       StateBlock,
       {
         variant: "error",
@@ -2900,23 +3238,23 @@ function PlaybackSurface({
       }
     );
   } else {
-    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: "md", children: [
+    content = /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Stack, { gap: "md", children: [
       media,
       overlays
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Paper, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: "md", children: [
-    title || statusMessage || controls ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: 4, children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Title, { order: 3, children: title }) : null,
-        statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Text, { size: "sm", c: "dimmed", children: statusMessage }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Paper, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Stack, { gap: "md", children: [
+    title || statusMessage || controls ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Stack, { gap: 4, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Title, { order: 3, children: title }) : null,
+        statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Text, { size: "sm", c: "dimmed", children: statusMessage }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Group, { gap: "sm", align: "center", wrap: "wrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Badge, { variant: "light", color: tone.color, children: tone.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Group, { gap: "sm", align: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Badge, { variant: "light", color: tone.color, children: tone.label }),
         controls
       ] })
     ] }) : null,
-    state === "degraded" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    state === "degraded" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       StateBlock,
       {
         variant: "info",
@@ -2930,9 +3268,9 @@ function PlaybackSurface({
 }
 
 // src/ShareButtonGroup.tsx
-var import_react7 = require("react");
-var import_core45 = require("@mantine/core");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_core47 = require("@mantine/core");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var channelLabels = {
   native: "Share",
   copy: "Copy link",
@@ -2967,9 +3305,9 @@ function ShareAction({
   const label = channelLabels[channel];
   const Icon = channel === "copy" ? GdsIcons.Copy : channel === "mail" ? GdsIcons.Mail : channel === "message" ? GdsIcons.Message : GdsIcons.Refer;
   if (compact) {
-    return href ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.ActionIcon, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "subtle", size: "lg", "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "1rem", stroke: 1.75 }) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.ActionIcon, { variant: "subtle", size: "lg", "aria-label": label, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "1rem", stroke: 1.75 }) });
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.ActionIcon, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "subtle", size: "lg", "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { size: "1rem", stroke: 1.75 }) }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.ActionIcon, { variant: "subtle", size: "lg", "aria-label": label, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { size: "1rem", stroke: 1.75 }) });
   }
-  return href ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Button, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "1rem", stroke: 1.75 }), children: label }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Button, { variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "1rem", stroke: 1.75 }), onClick, children: label });
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Button, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { size: "1rem", stroke: 1.75 }), children: label }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Button, { variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { size: "1rem", stroke: 1.75 }), onClick, children: label });
 }
 function ShareButtonGroup({
   url,
@@ -2980,8 +3318,8 @@ function ShareButtonGroup({
   label = "Share this",
   description
 }) {
-  const [copied, setCopied] = (0, import_react7.useState)(false);
-  const [shared, setShared] = (0, import_react7.useState)(false);
+  const [copied, setCopied] = (0, import_react8.useState)(false);
+  const [shared, setShared] = (0, import_react8.useState)(false);
   const hrefs = encodeShare(url, title, text);
   async function handleCopy() {
     await navigator.clipboard?.writeText?.(url);
@@ -2997,29 +3335,29 @@ function ShareButtonGroup({
     }
     await handleCopy();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core45.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core45.Stack, { gap: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { fw: 600, children: label }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Stack, { gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { fw: 600, children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: "dimmed", children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Group, { gap: "sm", wrap: "wrap", children: channels.map((channel) => {
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Group, { gap: "sm", wrap: "wrap", children: channels.map((channel) => {
       if (channel === "copy") {
-        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShareAction, { channel, compact, onClick: () => void handleCopy() }, channel);
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ShareAction, { channel, compact, onClick: () => void handleCopy() }, channel);
       }
       if (channel === "native") {
-        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShareAction, { channel, compact, onClick: () => void handleNativeShare() }, channel);
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ShareAction, { channel, compact, onClick: () => void handleNativeShare() }, channel);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShareAction, { channel, compact, href: hrefs[channel] }, channel);
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ShareAction, { channel, compact, href: hrefs[channel] }, channel);
     }) }),
-    copied ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "teal", children: "Link copied." }) : null,
-    shared ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "teal", children: "Share sheet opened." }) : null
+    copied ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: "teal", children: "Link copied." }) : null,
+    shared ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: "teal", children: "Share sheet opened." }) : null
   ] });
 }
 
 // src/UploadDropzone.tsx
-var import_react8 = require("react");
-var import_core46 = require("@mantine/core");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_core48 = require("@mantine/core");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function UploadDropzone({
   title,
   description,
@@ -3029,8 +3367,8 @@ function UploadDropzone({
   actionLabel = "Choose files",
   mode = "panel"
 }) {
-  const inputRef = (0, import_react8.useRef)(null);
-  const [dragging, setDragging] = (0, import_react8.useState)(false);
+  const inputRef = (0, import_react9.useRef)(null);
+  const [dragging, setDragging] = (0, import_react9.useState)(false);
   const UploadIcon = GdsIcons.Upload;
   const forwardFiles = (files) => {
     if (!files?.length || !onFilesSelected) {
@@ -3038,8 +3376,8 @@ function UploadDropzone({
     }
     onFilesSelected(Array.from(files));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-    import_core46.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    import_core48.Box,
     {
       onDragOver: (event) => {
         event.preventDefault();
@@ -3058,7 +3396,7 @@ function UploadDropzone({
         background: dragging ? "var(--mantine-color-violet-light)" : "transparent"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "input",
           {
             ref: inputRef,
@@ -3069,11 +3407,11 @@ function UploadDropzone({
             onChange: (event) => forwardFiles(event.currentTarget.files)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Stack, { align: mode === "inline" ? "flex-start" : "center", ta: mode === "inline" ? "left" : "center", gap: "sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(UploadIcon, { size: "1.5rem" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Text, { fw: 600, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Text, { size: "sm", c: "dimmed", children: description }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Button, { variant: "light", onClick: () => inputRef.current?.click(), children: actionLabel }) })
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Stack, { align: mode === "inline" ? "flex-start" : "center", ta: mode === "inline" ? "left" : "center", gap: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(UploadIcon, { size: "1.5rem" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Text, { fw: 600, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Text, { size: "sm", c: "dimmed", children: description }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Button, { variant: "light", onClick: () => inputRef.current?.click(), children: actionLabel }) })
         ] })
       ]
     }
@@ -3081,8 +3419,8 @@ function UploadDropzone({
 }
 
 // src/MediaField.tsx
-var import_core47 = require("@mantine/core");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_core49 = require("@mantine/core");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var stateLabels = {
   empty: { label: "Empty", color: "gray" },
   selected: { label: "Selected", color: "blue" },
@@ -3110,32 +3448,32 @@ function MediaField({
   mode = "stacked"
 }) {
   const stateBadge = stateLabels[state];
-  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
-  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
+  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     FormField,
     {
       label,
       description,
       error,
-      children: /* @__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.jsx)(import_core47.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Group, { gap: "xs", justify: "flex-end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
+      children: /* @__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: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Group, { gap: "xs", justify: "flex-end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
           statusAction
         ] }) }),
         preview ? preview : null,
-        uploadControl || urlInput ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Stack, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
+        uploadControl || urlInput ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.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_runtime49.jsx)(import_core47.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
-        helpText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
-        policyText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
+        value ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
+        helpText ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
+        policyText ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
         typeof error !== "string" && error ? error : null,
-        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Group, { gap: "sm", children: [
+        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Group, { gap: "sm", children: [
           resolvedResetAction,
           retryAction,
           resolvedRemoveAction
@@ -3146,50 +3484,50 @@ function MediaField({
 }
 
 // src/MediaCard.tsx
-var import_core48 = require("@mantine/core");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_core50 = require("@mantine/core");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function MediaCard({ title, image, description, status, overlay, actions = [] }) {
   const EyeIcon = GdsIcons.Eye;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Card, { withBorder: true, radius: "lg", padding: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Card.Section, { pos: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_core50.Card, { withBorder: true, radius: "lg", padding: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_core50.Card.Section, { pos: "relative", children: [
       image,
-      overlay ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
+      overlay ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Stack, { gap: "sm", mt: "md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Group, { justify: "space-between", align: "flex-start", 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", lineClamp: 2, children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_core50.Stack, { gap: "sm", mt: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_core50.Group, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_core50.Stack, { gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core50.Title, { order: 4, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core50.Text, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
         ] }),
-        status ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Badge, { variant: "light", children: status }) : null
+        status ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core50.Badge, { variant: "light", children: status }) : null
       ] }),
-      actions.length ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
+      actions.length ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core50.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core50.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
     ] })
   ] });
 }
 
 // src/AccessSummary.tsx
-var import_core49 = require("@mantine/core");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_core51 = require("@mantine/core");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function AccessSummary({ title, roles, scope, blocked = false, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Group, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Title, { order: 4, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Badge, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core51.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core51.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Badge, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Badge, { variant: "outline", children: role }, role)) }),
-    scope ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Text, { size: "sm", c: "dimmed", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Badge, { variant: "outline", children: role }, role)) }),
+    scope ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core51.Text, { size: "sm", c: "dimmed", children: [
       "Scope: ",
       scope
     ] }) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Text, { size: "sm", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Text, { size: "sm", children: description }) : null
   ] }) });
 }
 
 // src/AccessRecoveryPanel.tsx
-var import_core50 = require("@mantine/core");
+var import_core52 = require("@mantine/core");
 var import_gds_theme5 = require("@doneisbetter/gds-theme");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var stateBlockVariantByState = {
   unauthenticated: "permission",
   "expired-session": "info",
@@ -3258,7 +3596,7 @@ function ActionGroup({
   if (actions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core50.Group, { gap: "sm", justify: "center", wrap: "wrap", children: actions.map((actionConfig, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core52.Group, { gap: "sm", justify: "center", wrap: "wrap", children: actions.map((actionConfig, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     SemanticButton,
     {
       action: actionConfig.action,
@@ -3292,14 +3630,14 @@ function AccessRecoveryPanel({
     onBack,
     supportAction
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     StateBlock,
     {
       variant: stateBlockVariantByState[state],
       compact,
       title: title ?? t(`gds.accessRecovery.${state}.title`, defaultCopy.title),
       description: description ?? t(`gds.accessRecovery.${state}.description`, defaultCopy.description),
-      action: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      action: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         ActionGroup,
         {
           primaryAction: primaryAction ?? defaults.primary,
@@ -3312,8 +3650,8 @@ function AccessRecoveryPanel({
 }
 
 // src/PageHeader.tsx
-var import_core51 = require("@mantine/core");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_core53 = require("@mantine/core");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function PageHeader({
   title,
   description,
@@ -3324,19 +3662,19 @@ function PageHeader({
 }) {
   const resolvedDescription = description ?? subtitle;
   const eyebrowProps = eyebrowVariant === "ornamental" ? { tt: "uppercase", style: { letterSpacing: "0.12em" } } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core51.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core51.Stack, { gap: "xs", children: [
-      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Title, { order: 1, children: title }),
-      resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Text, { c: "dimmed", maw: 720, children: resolvedDescription })
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core53.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core53.Stack, { gap: "xs", children: [
+      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Title, { order: 1, children: title }),
+      resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Text, { c: "dimmed", maw: 720, children: resolvedDescription })
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Box, { children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Box, { children: actions }) : null
   ] });
 }
 
 // src/FilterDrawer.tsx
-var import_core52 = require("@mantine/core");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_core54 = require("@mantine/core");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function FilterDrawer({
   opened,
   onClose,
@@ -3352,8 +3690,8 @@ function FilterDrawer({
 }) {
   const resolvedPrimaryAction = applyAction ?? primaryAction;
   const resolvedSecondaryAction = resetAction ?? secondaryAction;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-    import_core52.Drawer,
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    import_core54.Drawer,
     {
       opened,
       onClose,
@@ -3361,11 +3699,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_runtime54.jsxs)(import_core52.Stack, { gap: "md", children: [
-        description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core52.Text, { size: "sm", c: "dimmed", children: description }) : null,
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_core54.Stack, { gap: "md", children: [
+        description ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Text, { size: "sm", c: "dimmed", children: description }) : null,
         children,
-        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core52.Group, { justify: "space-between", mt: "md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core52.Group, { gap: "sm", children: [
+        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_core54.Group, { justify: "space-between", mt: "md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_core54.Group, { gap: "sm", children: [
             closeAction,
             resolvedSecondaryAction
           ] }),
@@ -3377,8 +3715,8 @@ function FilterDrawer({
 }
 
 // src/PlaceholderPanel.tsx
-var import_core53 = require("@mantine/core");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_core55 = require("@mantine/core");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function PlaceholderPanel({
   title,
   description,
@@ -3388,16 +3726,16 @@ function PlaceholderPanel({
   mode
 }) {
   if (mode === "live" && children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx_runtime57.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core53.Stack, { gap: "md", children: [
-    badge ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core53.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Title, { order: 4, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Text, { c: "dimmed", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_core55.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_core55.Stack, { gap: "md", children: [
+    badge ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_core55.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_core55.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_core55.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_core55.Text, { c: "dimmed", children: description })
     ] }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Text, { size: "sm", children: footer }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_core55.Text, { size: "sm", children: footer }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -3410,8 +3748,8 @@ function PlaceholderPanel({
 }
 
 // src/SimpleDataTable.tsx
-var import_core54 = require("@mantine/core");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_core56 = require("@mantine/core");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function SimpleDataTable({
   columns,
   rows,
@@ -3422,23 +3760,23 @@ function SimpleDataTable({
   getRowKey
 }) {
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime58.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_runtime56.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_core54.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Th, { children: column.header }, String(column.key))) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.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_runtime58.jsx)(import_core56.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_core56.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_core56.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_core56.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_core56.Table.Th, { children: column.header }, String(column.key))) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_core56.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_core56.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_core56.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_core55 = require("@mantine/core");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_core57 = require("@mantine/core");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function StatsSection({
   title,
   loading = false,
@@ -3450,11 +3788,11 @@ function StatsSection({
 }) {
   let content = children;
   if (error) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
   } else if (loading) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime59.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_runtime57.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -3464,10 +3802,10 @@ function StatsSection({
       }
     );
   } else if (placeholder) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
+    content = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_core55.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_core55.Title, { order: 3, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_core57.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_core57.Title, { order: 3, children: title }),
     content
   ] });
 }
@@ -4793,6 +5131,7 @@ function getGdsMessages(locale) {
   DiscoveryShell,
   DocsCodeBlock,
   DocsPageShell,
+  DocsShell,
   EditorialCard,
   EditorialHero,
   EmptyState,
@@ -4808,11 +5147,14 @@ function getGdsMessages(locale) {
   MediaCard,
   MediaField,
   MetricCard,
+  PROVIDER_IDENTITY_REGISTRY,
   PageHeader,
   PlaceholderPanel,
   PlaybackSurface,
   ProductCard,
   ProgressCard,
+  ProviderIdentityButton,
+  ProviderIdentityButtonGroup,
   PublicBrandFooter,
   PublicFlowShell,
   PublicFoodCard,
@@ -4845,13 +5187,16 @@ function getGdsMessages(locale) {
   fr,
   gdsLocales,
   getGdsMessages,
+  getProviderIdentityLabel,
   getSemanticActionConfig,
   getSemanticActionLabel,
   he,
   hu,
+  isPresentationMode,
   it,
   mergeGdsVocabularyPacks,
   resolveAccentPanelStyles,
   resolveSemanticActionConfig,
+  resolveSurfacePresentationStyles,
   ru
 });