@doneisbetter/gds-core 3.0.0 → 3.0.2

package/dist/index.js

@@ -24,14 +24,22 @@ __export(index_exports, {
   AccessRecoveryPanel: () => AccessRecoveryPanel,
   AccessSummary: () => AccessSummary,
   ActionBar: () => ActionBar,
+  ActiveFilterChips: () => ActiveFilterChips,
+  AdvancedDataTable: () => AdvancedDataTable,
   ArticleShell: () => ArticleShell,
+  AsyncSurface: () => AsyncSurface,
   AuthShell: () => AuthShell,
+  BannerNotice: () => BannerNotice,
   BrowseSurface: () => BrowseSurface,
+  BulkActionsBar: () => BulkActionsBar,
   ChartTokenPanel: () => ChartTokenPanel,
   ChoiceChip: () => ChoiceChip,
+  CommandPalette: () => CommandPalette,
+  CommandRegistryProvider: () => CommandRegistryProvider,
   ConfirmDialog: () => ConfirmDialog,
   ConsumerDashboardGrid: () => ConsumerDashboardGrid,
   ConsumerSection: () => ConsumerSection,
+  CountBadge: () => CountBadge,
   CtaButtonGroup: () => CtaButtonGroup,
   DataToolbar: () => DataToolbar,
   DetailProfileShell: () => DetailProfileShell,
@@ -46,15 +54,26 @@ __export(index_exports, {
   FeatureBand: () => FeatureBand,
   FilterDrawer: () => FilterDrawer,
   FoodMenuSection: () => FoodMenuSection,
+  FormErrorSummary: () => FormErrorSummary,
   FormField: () => FormField,
   GameBoardTile: () => GameBoardTile,
+  GdsChart: () => GdsChart,
+  GdsFormProvider: () => GdsFormProvider,
   GdsIcons: () => GdsIcons,
+  GdsNotificationProvider: () => GdsNotificationProvider,
+  GdsTelemetryProvider: () => GdsTelemetryProvider,
   GdsVocabulary: () => GdsVocabulary,
+  InlineAlert: () => InlineAlert,
+  LabelTag: () => LabelTag,
   ListingCard: () => ListingCard,
+  ListingProvider: () => ListingProvider,
   MapPanel: () => MapPanel,
   MediaCard: () => MediaCard,
   MediaField: () => MediaField,
   MetricCard: () => MetricCard,
+  NotificationCenter: () => NotificationCenter,
+  NotificationCenterView: () => NotificationCenterView,
+  OverlayManagerProvider: () => OverlayManagerProvider,
   PROVIDER_IDENTITY_REGISTRY: () => PROVIDER_IDENTITY_REGISTRY,
   PageHeader: () => PageHeader,
   PeriodSelector: () => PeriodSelector,
@@ -76,6 +95,7 @@ __export(index_exports, {
   ReferenceSection: () => ReferenceSection,
   ReferenceThemeExplorer: () => ReferenceThemeExplorer,
   ReportingSection: () => ReportingSection,
+  ResultSummary: () => ResultSummary,
   SectionPanel: () => SectionPanel,
   SemanticButton: () => SemanticButton,
   ShareButtonGroup: () => ShareButtonGroup,
@@ -84,17 +104,22 @@ __export(index_exports, {
   SidebarNavSection: () => SidebarNavSection,
   SimpleDataTable: () => SimpleDataTable,
   SocialAuthButtons: () => SocialAuthButtons,
+  SortMenu: () => SortMenu,
   StateBlock: () => StateBlock,
   StatsSection: () => StatsSection,
   StatusBadge: () => StatusBadge,
   ThemeToggle: () => ThemeToggle,
   UploadDropzone: () => UploadDropzone,
+  ValidatedFieldMessage: () => ValidatedFieldMessage,
   ar: () => ar,
   createGdsVocabularyPack: () => createGdsVocabularyPack,
   de: () => de,
   en: () => en,
   es: () => es,
   fr: () => fr,
+  gdsCardSizePaddingMap: () => gdsCardSizePaddingMap,
+  gdsCardTitleOrderMap: () => gdsCardTitleOrderMap,
+  gdsFormReducer: () => gdsFormReducer,
   gdsLocales: () => gdsLocales,
   getGdsMessages: () => getGdsMessages,
   getProviderIdentityLabel: () => getProviderIdentityLabel,
@@ -106,11 +131,21 @@ __export(index_exports, {
   hu: () => hu,
   isPresentationMode: () => isPresentationMode,
   it: () => it,
+  listingQueryReducer: () => listingQueryReducer,
   mergeGdsVocabularyPacks: () => mergeGdsVocabularyPacks,
+  renderGdsLayout: () => renderGdsLayout,
   resolveAccentPanelStyles: () => resolveAccentPanelStyles,
   resolveSemanticActionConfig: () => resolveSemanticActionConfig,
   resolveSurfacePresentationStyles: () => resolveSurfacePresentationStyles,
-  ru: () => ru
+  ru: () => ru,
+  useCommandLauncher: () => useCommandLauncher,
+  useDiscoveryShellState: () => useDiscoveryShellState,
+  useGdsForm: () => useGdsForm,
+  useGdsFormSnapshot: () => useGdsFormSnapshot,
+  useGdsNotifications: () => useGdsNotifications,
+  useGdsTelemetry: () => useGdsTelemetry,
+  useListingState: () => useListingState,
+  useOverlayManager: () => useOverlayManager
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -124,9 +159,24 @@ var statusColorMap = {
   info: "blue",
   neutral: "gray"
 };
+var labelTagColorMap = {
+  neutral: "gray",
+  info: "blue",
+  warning: "yellow",
+  success: "green"
+};
 function StatusBadge({ status, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Badge, { color: statusColorMap[status], variant: "light", ...props, children });
 }
+function LabelTag({ tone = "neutral", label, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Badge, { color: labelTagColorMap[tone], variant: "outline", ...props, children: label });
+}
+function CountBadge({ value, cap = 99, srLabel, ...props }) {
+  const normalizedValue = Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+  const normalizedCap = Math.max(1, Math.floor(cap));
+  const displayValue = normalizedValue > normalizedCap ? `${normalizedCap}+` : String(normalizedValue);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Badge, { color: "violet", variant: "filled", "aria-label": srLabel, ...props, children: displayValue });
+}
 
 // src/EmptyState.tsx
 var import_core2 = require("@mantine/core");
@@ -469,12 +519,14 @@ function ConfirmDialog({
 var import_core5 = require("@mantine/core");
 var import_gds_theme2 = require("@doneisbetter/gds-theme");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function ThemeToggle({ size = "md" }) {
+function ThemeToggle({ size = "md", onColorSchemeChange }) {
   const { setColorScheme } = (0, import_core5.useMantineColorScheme)();
   const computedColorScheme = (0, import_core5.useComputedColorScheme)("light", { getInitialValueInEffect: true });
   const { t } = (0, import_gds_theme2.useGdsTranslation)();
   const toggleColorScheme = () => {
-    setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
+    const nextScheme = computedColorScheme === "dark" ? "light" : "dark";
+    setColorScheme(nextScheme);
+    onColorSchemeChange?.(nextScheme);
   };
   const isDark = computedColorScheme === "dark";
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -779,6 +831,24 @@ function FormField({ label, description, error, children }) {
 
 // src/ListingCard.tsx
 var import_core12 = require("@mantine/core");
+
+// src/CardContracts.ts
+var gdsCardSizePaddingMap = {
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl"
+};
+var gdsCardTitleOrderMap = {
+  xs: 6,
+  sm: 5,
+  md: 4,
+  lg: 4,
+  xl: 3
+};
+
+// src/ListingCard.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var ratioMap = {
   "1:1": 1,
@@ -847,17 +917,27 @@ function ListingCard({
   primaryAction,
   saveAction,
   shareAction,
-  compact = false
+  compact = false,
+  size = "md",
+  interactiveMode = "none",
+  revealContent,
+  onSurfaceActivate,
+  defaultFlipped = false
 }) {
+  const cardPadding = compact ? "md" : gdsCardSizePaddingMap[size];
   const titleContent = href && typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { component: "a", href, inherit: true, td: "none", children: title }) : title;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: compact ? "sm" : "md", children: [
+  const interactiveProps = interactiveMode === "surface-link" && href ? { component: "a", href } : interactiveMode === "surface-button" ? { component: "button", type: "button", onClick: onSurfaceActivate } : {};
+  if (interactiveMode === "flip" && defaultFlipped && revealContent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Card, { withBorder: true, radius: "lg", padding: cardPadding, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Stack, { gap: "sm", children: revealContent }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Card, { withBorder: true, radius: "lg", padding: cardPadding, ...interactiveProps, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: compact ? "sm" : "md", children: [
     image ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ListingImageFallback, { mediaRatio }),
     featured || sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", gap: "sm", wrap: "wrap", children: [
       featured ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Badge, { variant: "light", color: "violet", children: "Featured" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", {}),
       sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "xs", c: "dimmed", children: sponsoredDisclosure }) : null
     ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: 4, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Title, { order: compact ? 5 : 4, lineClamp: 2, children: titleContent }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Title, { order: compact ? 5 : gdsCardTitleOrderMap[size], lineClamp: 2, children: titleContent }),
       description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
     ] }),
     metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Stack, { gap: "xs", children: metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "nowrap", children: [
@@ -872,7 +952,8 @@ function ListingCard({
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { gap: "xs", wrap: "nowrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
         saveAction ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ListingAffordance, { affordance: saveAction }) : null,
         shareAction ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ListingAffordance, { affordance: shareAction }) : null,
-        primaryAction
+        primaryAction,
+        interactiveMode === "flip" && revealContent ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "xs", c: "dimmed", children: "Flip mode supports reveal surfaces." }) : null
       ] })
     ] })
   ] }) });
@@ -938,53 +1019,25 @@ function StateBlock({
 var import_gds_theme3 = require("@doneisbetter/gds-theme");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function resolvePreviewColorScheme(presetId, requestedScheme) {
-  if (presetId === "dark-public") {
+  if (presetId === "dark-public" || presetId === "neon-night") {
     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",
-    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",
-    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",
-    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",
-    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(...)",
-    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."
-  }
-};
+var presetCatalog = (0, import_gds_theme3.getGdsThemePresets)();
+var themePresetCatalog = Object.fromEntries(
+  presetCatalog.map((preset) => [
+    preset.id,
+    {
+      label: preset.label,
+      bestFor: `Apps aligned with ${preset.label.toLowerCase()}.`,
+      summary: preset.description,
+      themeKey: preset.runtimeLane,
+      supportedUse: `General product adoption with ${preset.label}.`,
+      avoidFor: "Avoid creating a local non-canonical theme authority."
+    }
+  ])
+);
 var colorSchemeProof = [
   {
     id: "light",
@@ -1065,40 +1118,50 @@ function ThemePreviewSurface({
     ] })
   ] }) });
 }
-function ReferenceThemeExplorer() {
-  const [preset, setPreset] = (0, import_react2.useState)("default");
-  const [colorScheme, setColorScheme] = (0, import_react2.useState)("light");
-  const [brandPrimary, setBrandPrimary] = (0, import_react2.useState)("blue");
-  const [brandFlatSurfaces, setBrandFlatSurfaces] = (0, import_react2.useState)(true);
-  const [brandEditorialSerif, setBrandEditorialSerif] = (0, import_react2.useState)(false);
+function ReferenceThemeExplorer({
+  initialSelection,
+  onSelectionChange
+}) {
+  const [preset, setPreset] = (0, import_react2.useState)(initialSelection?.preset ?? "default");
+  const [colorScheme, setColorScheme] = (0, import_react2.useState)(initialSelection?.colorScheme ?? "light");
+  const [brandPrimary, setBrandPrimary] = (0, import_react2.useState)(initialSelection?.brandPrimary ?? "blue");
+  const [brandFlatSurfaces, setBrandFlatSurfaces] = (0, import_react2.useState)(initialSelection?.brandFlatSurfaces ?? true);
+  const [brandEditorialSerif, setBrandEditorialSerif] = (0, import_react2.useState)(initialSelection?.brandEditorialSerif ?? false);
+  const [fontLane, setFontLane] = (0, import_react2.useState)(initialSelection?.fontLane ?? "inter");
   const [comparisonEnabled, setComparisonEnabled] = (0, import_react2.useState)(false);
   const [comparisonPreset, setComparisonPreset] = (0, import_react2.useState)("editorial");
-  const resolveTheme = (presetId) => {
-    switch (presetId) {
-      case "dark-public":
-        return import_gds_theme3.gdsDarkPublicTheme;
-      case "flat-surface":
-        return import_gds_theme3.gdsFlatSurfaceTheme;
-      case "editorial":
-        return import_gds_theme3.gdsEditorialPublicTheme;
-      case "brand":
-        return (0, import_gds_theme3.createPublicBrandTheme)({
-          flatSurfaces: brandFlatSurfaces,
-          editorialSerif: brandEditorialSerif,
-          overrides: { primaryColor: brandPrimary }
-        });
-      default:
-        return import_gds_theme3.gdsTheme;
-    }
-  };
+  const availableComparisonPresets = presetCatalog.filter((item) => item.id !== preset).map((item) => item.id);
+  const resolveTheme = (presetId) => (0, import_gds_theme3.applyGdsFontLane)((0, import_gds_theme3.resolveGdsThemePreset)(presetId, {
+    brandPrimary,
+    brandFlatSurfaces,
+    brandEditorialSerif
+  }), fontLane);
   const selectionSummary = themePresetCatalog[preset];
   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 selectedTheme = (0, import_react2.useMemo)(() => resolveTheme(preset), [preset, brandPrimary, brandFlatSurfaces, brandEditorialSerif, fontLane]);
+  const comparedTheme = (0, import_react2.useMemo)(() => resolveTheme(comparisonPreset), [comparisonPreset, brandPrimary, brandFlatSurfaces, brandEditorialSerif, fontLane]);
   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 previewKey = `${preset}-${effectiveColorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}-${fontLane}`;
+  const comparisonPreviewKey = `${comparisonPreset}-${effectiveComparisonScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}-${fontLane}`;
+  (0, import_react2.useEffect)(() => {
+    onSelectionChange?.({
+      preset,
+      colorScheme: effectiveColorScheme,
+      theme: selectedTheme,
+      fontLane,
+      runtimeKey: previewKey,
+      brandPrimary,
+      brandFlatSurfaces,
+      brandEditorialSerif
+    });
+  }, [onSelectionChange, preset, effectiveColorScheme, selectedTheme, fontLane, previewKey, brandPrimary, brandFlatSurfaces, brandEditorialSerif]);
+  (0, import_react2.useEffect)(() => {
+    if (comparisonPreset !== preset) {
+      return;
+    }
+    setComparisonPreset(availableComparisonPresets[0] ?? "editorial");
+  }, [comparisonPreset, preset, availableComparisonPresets]);
   const reset = () => {
     setPreset("default");
     setColorScheme("light");
@@ -1107,6 +1170,7 @@ function ReferenceThemeExplorer() {
     setBrandEditorialSerif(false);
     setComparisonEnabled(false);
     setComparisonPreset("editorial");
+    setFontLane("inter");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "xl", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -1139,8 +1203,17 @@ function ReferenceThemeExplorer() {
                 ]
               }
             ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Webfont lane", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_core14.NativeSelect,
+              {
+                "aria-label": "Webfont lane",
+                value: fontLane,
+                onChange: (event) => setFontLane(event.currentTarget.value || "inter"),
+                data: (0, import_gds_theme3.getGdsFontLanes)().map((lane) => ({ value: lane.id, label: lane.label }))
+              }
+            ) }),
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Button, { variant: "default", size: "sm", onClick: reset, children: "Reset theme lab" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "The reference site remounts an isolated provider here so visitors can test shipped presets without changing the whole docs shell." })
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "Theme changes apply to the official site shell so visitors can validate real whole-page runtime behavior." })
           ] }) }),
           /* @__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_core14.Title, { order: 4, children: "Brand builder options" }),
@@ -1194,7 +1267,7 @@ function ReferenceThemeExplorer() {
                 " ",
                 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
+              (preset === "dark-public" || preset === "neon-night") && colorScheme !== effectiveColorScheme ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "This dark-forward preset always renders in dark mode inside the live preview." }) : null
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               import_core14.Checkbox,
@@ -1212,7 +1285,7 @@ function ReferenceThemeExplorer() {
                 value: comparisonPreset,
                 onChange: (event) => setComparisonPreset(event.currentTarget.value || "editorial"),
                 disabled: !comparisonEnabled,
-                data: Object.entries(themePresetCatalog).filter(([value]) => value !== preset).map(([value, item]) => ({ value, label: item.label }))
+                data: availableComparisonPresets.map((value) => ({ value, label: themePresetCatalog[value].label }))
               }
             ) })
           ] }) })
@@ -1600,16 +1673,17 @@ function ProductCard({
   metadata = [],
   primaryAction,
   secondaryActions = [],
-  footer
+  footer,
+  size = "md"
 }) {
   const MoreIcon = GdsIcons.Menu;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Stack, { gap: "md", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Card, { withBorder: true, radius: "lg", padding: gdsCardSizePaddingMap[size], children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Stack, { gap: "md", children: [
     media,
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Group, { align: "flex-start", gap: "sm", wrap: "nowrap", children: [
         icon ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Stack, { gap: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Title, { order: 4, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Title, { order: gdsCardTitleOrderMap[size], children: title }),
           description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Text, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
         ] })
       ] }),
@@ -1693,8 +1767,11 @@ function PublicProductCard({
   secondaryAction,
   metadata = [],
   compact = false,
+  size = "md",
   loading = false,
-  disabled = false
+  disabled = false,
+  interactiveMode = "none",
+  onSurfaceActivate
 }) {
   if (loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LoadingCard, { compact });
@@ -1710,11 +1787,12 @@ function PublicProductCard({
   const pickupHelper = helperKind === "pickup" ? helperText : pickupNote;
   const inventoryHelper = helperKind === "inventory" ? helperText : inventoryNote;
   const hasSupportingRegion = Boolean(price || supportingHelper || pickupHelper || inventoryHelper);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: compact ? "sm" : "md", children: [
+  const interactiveProps = interactiveMode === "surface-button" ? { component: "button", type: "button", onClick: onSurfaceActivate } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : gdsCardSizePaddingMap[size], ...interactiveProps, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: compact ? "sm" : "md", children: [
     image ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ImageFallback, { compact }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", gap: "sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Title, { order: compact ? 5 : 4, lineClamp: 2, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Title, { order: compact ? 5 : gdsCardTitleOrderMap[size], lineClamp: 2, children: title }),
         description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label })
@@ -2088,20 +2166,277 @@ function DetailProfileShell({
   ] }) });
 }
 
+// src/AsyncSurface.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function getRetryAction(onRetry) {
+  if (!onRetry) {
+    return void 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", onClick: onRetry, children: "Retry" });
+}
+function renderStateBlock({
+  variant,
+  title,
+  description,
+  compact,
+  presentation,
+  minHeight,
+  contentAlign,
+  contentJustify,
+  action
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    StateBlock,
+    {
+      variant,
+      title,
+      description,
+      action,
+      compact,
+      presentation,
+      minHeight,
+      contentAlign,
+      contentJustify
+    }
+  );
+}
+function AsyncSurface({
+  state,
+  successContent,
+  idleContent,
+  loadingTitle = "Loading",
+  loadingDescription = "This surface is still synchronizing.",
+  emptyTitle = "No results",
+  emptyDescription = "No data is available for this surface yet.",
+  errorTitle = "Unable to load",
+  errorDescription = "Something went wrong while preparing this surface.",
+  refreshingTitle = "Refreshing",
+  refreshingDescription = "The latest data is being fetched.",
+  onRetry,
+  retryAction,
+  compact = false,
+  presentation = "inline",
+  minHeight,
+  contentAlign,
+  contentJustify
+}) {
+  const fallbackRetryAction = retryAction ?? getRetryAction(onRetry);
+  if (state === "success") {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: successContent });
+  }
+  if (state === "idle") {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: idleContent ?? successContent ?? null });
+  }
+  if (state === "loading") {
+    return renderStateBlock({
+      variant: "loading",
+      title: loadingTitle,
+      description: loadingDescription,
+      compact,
+      presentation,
+      minHeight,
+      contentAlign,
+      contentJustify
+    });
+  }
+  if (state === "empty") {
+    return renderStateBlock({
+      variant: "empty",
+      title: emptyTitle,
+      description: emptyDescription,
+      compact,
+      presentation,
+      minHeight,
+      contentAlign,
+      contentJustify,
+      action: fallbackRetryAction
+    });
+  }
+  if (state === "error") {
+    return renderStateBlock({
+      variant: "error",
+      title: errorTitle,
+      description: errorDescription,
+      compact,
+      presentation,
+      minHeight,
+      contentAlign,
+      contentJustify,
+      action: fallbackRetryAction
+    });
+  }
+  return renderStateBlock({
+    variant: "info",
+    title: refreshingTitle,
+    description: refreshingDescription,
+    compact,
+    presentation,
+    minHeight,
+    contentAlign,
+    contentJustify
+  });
+}
+
+// src/ListingPrimitives.tsx
+var import_core28 = require("@mantine/core");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function ActiveFilterChips({
+  filters,
+  emptyLabel = "No active filters."
+}) {
+  if (!filters.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core28.Text, { size: "sm", c: "dimmed", children: emptyLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core28.Group, { gap: "xs", children: filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_core28.Badge,
+    {
+      variant: "light",
+      rightSection: filter.onRemove ? "\xD7" : void 0,
+      style: filter.onRemove ? { cursor: "pointer" } : void 0,
+      onClick: filter.onRemove,
+      children: filter.label
+    },
+    filter.id
+  )) });
+}
+function ResultSummary({
+  resultCount,
+  noun = "results",
+  description
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core28.Stack, { gap: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core28.Text, { size: "sm", fw: 600, children: [
+      resultCount,
+      " ",
+      noun
+    ] }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core28.Text, { size: "xs", c: "dimmed", children: description }) : null
+  ] });
+}
+function SortMenu({
+  value,
+  options,
+  onChange,
+  label = "Sort"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_core28.Select,
+    {
+      "aria-label": label,
+      label,
+      value,
+      data: options,
+      onChange: (next) => {
+        if (next) {
+          onChange?.(next);
+        }
+      },
+      w: 220
+    }
+  );
+}
+function BulkActionsBar({
+  selectedCount,
+  actions,
+  clearAction
+}) {
+  if (selectedCount <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core28.Group, { justify: "space-between", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core28.Text, { size: "sm", fw: 600, children: [
+      selectedCount,
+      " selected"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core28.Group, { gap: "xs", children: [
+      actions,
+      clearAction ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core28.Button, { variant: "subtle", size: "xs", children: "Clear selection" })
+    ] })
+  ] });
+}
+
+// src/ListingState.client.tsx
+var import_react5 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function createInitialState(config = {}) {
+  return {
+    search: "",
+    sort: config.defaultSort ?? "newest",
+    filters: [],
+    page: 1,
+    pageSize: config.defaultPageSize ?? 25,
+    selection: []
+  };
+}
+function listingQueryReducer(state, action) {
+  if (action.type === "set-search") {
+    return { ...state, search: action.value, page: 1, selection: [] };
+  }
+  if (action.type === "set-sort") {
+    return { ...state, sort: action.value, page: 1, selection: [] };
+  }
+  if (action.type === "toggle-filter") {
+    const exists = state.filters.includes(action.value);
+    return {
+      ...state,
+      filters: exists ? state.filters.filter((item) => item !== action.value) : [...state.filters, action.value],
+      page: 1,
+      selection: []
+    };
+  }
+  if (action.type === "clear-filters") {
+    return { ...state, filters: [], page: 1, selection: [] };
+  }
+  if (action.type === "set-page") {
+    return { ...state, page: Math.max(1, Math.floor(action.value)) };
+  }
+  if (action.type === "set-page-size") {
+    const nextPageSize = Math.max(1, Math.floor(action.value));
+    return { ...state, pageSize: nextPageSize, page: 1, selection: [] };
+  }
+  if (action.type === "toggle-selection") {
+    const exists = state.selection.includes(action.value);
+    return {
+      ...state,
+      selection: exists ? state.selection.filter((item) => item !== action.value) : [...state.selection, action.value]
+    };
+  }
+  if (action.type === "clear-selection") {
+    return { ...state, selection: [] };
+  }
+  return createInitialState({ defaultSort: state.sort, defaultPageSize: state.pageSize });
+}
+var ListingStateContext = (0, import_react5.createContext)(null);
+function ListingProvider({
+  children,
+  config
+}) {
+  const [state, dispatch] = (0, import_react5.useReducer)(listingQueryReducer, config, createInitialState);
+  const value = (0, import_react5.useMemo)(() => ({ state, dispatch }), [state]);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ListingStateContext.Provider, { value, children });
+}
+function useListingState() {
+  const context = (0, import_react5.useContext)(ListingStateContext);
+  if (!context) {
+    throw new Error("useListingState must be used within ListingProvider.");
+  }
+  return context;
+}
+
 // src/PublicShell.tsx
-var import_core29 = require("@mantine/core");
+var import_core30 = require("@mantine/core");
 
 // src/PublicNav.tsx
-var import_core28 = require("@mantine/core");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_core29 = require("@mantine/core");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function PublicNav({ items, activeId, renderLink }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Group, { component: "nav", "aria-label": "Primary", gap: "lg", wrap: "nowrap", children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core29.Group, { component: "nav", "aria-label": "Primary", gap: "lg", wrap: "nowrap", children: items.map((item) => {
     const active = item.id === activeId;
     if (renderLink) {
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: renderLink(item, active) }, item.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: renderLink(item, active) }, item.id);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      import_core28.Anchor,
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_core29.Anchor,
       {
         href: item.href,
         "aria-current": active ? "page" : void 0,
@@ -2118,15 +2453,15 @@ function PublicNav({ items, activeId, renderLink }) {
 }
 
 // src/PublicShell.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function InlineMobileNavigation({
   mobileNavigation,
   className,
   mode
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Box, { component: "details", hiddenFrom: "sm", className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-      import_core29.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core30.Box, { component: "details", hiddenFrom: "sm", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      import_core30.Box,
       {
         component: "summary",
         "aria-label": mode === "drawer" ? "Open site navigation drawer" : "Open site navigation",
@@ -2138,13 +2473,13 @@ function InlineMobileNavigation({
           gap: "0.5rem"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Burger, { opened: false, "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Text, { size: "sm", fw: 600, children: "Menu" })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Burger, { opened: false, "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Text, { size: "sm", fw: 600, children: "Menu" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      import_core29.Box,
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      import_core30.Box,
       {
         mt: "sm",
         p: "sm",
@@ -2153,7 +2488,7 @@ function InlineMobileNavigation({
           border: "1px solid var(--mantine-color-default-border)",
           background: mode === "drawer" ? "light-dark(var(--mantine-color-white), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))" : "var(--mantine-color-body)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Stack, { gap: "sm", children: mobileNavigation })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Stack, { gap: "sm", children: mobileNavigation })
       }
     )
   ] });
@@ -2174,30 +2509,30 @@ function PublicShell({
   mobileNavigationMode = "sheet",
   classNames
 }) {
-  const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PublicNav, { items: navItems, activeId: activeNavId }) : null);
+  const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PublicNav, { items: navItems, activeId: activeNavId }) : null);
   const containerSize = maxContentWidth ?? (compact ? "md" : "lg");
   const headerHeight = headerVariant === "compact" ? 64 : headerVariant === "branded-quiet" ? 88 : 72;
   const mainPadding = headerVariant === "compact" ? "lg" : "xl";
   const usesInlineMobileNavigation = Boolean(mobileNavigation) && mobileNavigationMode !== "sheet";
   const usesSheetMobileNavigation = Boolean(mobileNavigation) && mobileNavigationMode === "sheet";
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-    import_core29.AppShell,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    import_core30.AppShell,
     {
       className: classNames?.root,
       header: { height: headerHeight },
       footer: usesSheetMobileNavigation ? { height: 68 } : void 0,
       padding: 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.AppShell.Header, { withBorder: headerBordered, className: classNames?.header, "data-header-variant": headerVariant, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, h: "100%", py: headerVariant === "branded-quiet" ? "sm" : 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-          import_core29.Group,
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.AppShell.Header, { withBorder: headerBordered, className: classNames?.header, "data-header-variant": headerVariant, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Container, { size: containerSize, h: "100%", py: headerVariant === "branded-quiet" ? "sm" : 0, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          import_core30.Group,
           {
             h: "100%",
             justify: "space-between",
             wrap: "nowrap",
             gap: headerVariant === "compact" ? "sm" : "lg",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { wrap: "nowrap", gap: headerVariant === "compact" ? "xs" : "sm", className: classNames?.brand, children: [
-                usesInlineMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core30.Group, { wrap: "nowrap", gap: headerVariant === "compact" ? "xs" : "sm", className: classNames?.brand, children: [
+                usesInlineMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   InlineMobileNavigation,
                   {
                     mobileNavigation,
@@ -2205,17 +2540,17 @@ function PublicShell({
                     mode: mobileNavigationMode
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { children: brand })
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Box, { children: brand })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: "sm", className: classNames?.actions, children: actions })
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Group, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Group, { gap: "sm", className: classNames?.actions, children: actions })
             ]
           }
         ) }) }),
-        usesSheetMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.AppShell.Main, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Stack, { gap: "xl", children }) }),
-          footer ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Text, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
+        usesSheetMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Group, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core30.AppShell.Main, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Stack, { gap: "xl", children }) }),
+          footer ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Box, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core30.Text, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
         ] })
       ]
     }
@@ -2223,9 +2558,49 @@ function PublicShell({
 }
 
 // src/DiscoveryShell.tsx
-var import_core30 = require("@mantine/core");
+var import_react6 = require("react");
+var import_core31 = require("@mantine/core");
 var import_hooks2 = require("@mantine/hooks");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function useDiscoveryShellState({
+  defaultSidebarOpen = false,
+  sidebarStorageKey,
+  onSidebarOpenedChange
+} = {}) {
+  const [opened, setOpenedState] = (0, import_react6.useState)(defaultSidebarOpen);
+  (0, import_react6.useEffect)(() => {
+    if (!sidebarStorageKey || typeof window === "undefined") {
+      return;
+    }
+    const stored = window.localStorage.getItem(sidebarStorageKey);
+    if (stored === "open") {
+      setOpenedState(true);
+    }
+    if (stored === "closed") {
+      setOpenedState(false);
+    }
+  }, [sidebarStorageKey]);
+  const persistAndNotify = (next) => {
+    if (sidebarStorageKey && typeof window !== "undefined") {
+      window.localStorage.setItem(sidebarStorageKey, next ? "open" : "closed");
+    }
+    onSidebarOpenedChange?.(next);
+  };
+  const setOpened = (next) => {
+    setOpenedState(next);
+    persistAndNotify(next);
+  };
+  const open = () => setOpened(true);
+  const close = () => setOpened(false);
+  const toggle = () => {
+    setOpenedState((current) => {
+      const next = !current;
+      persistAndNotify(next);
+      return next;
+    });
+  };
+  return { opened, open, close, toggle, setOpened };
+}
 function DiscoveryShell({
   header,
   sidebar,
@@ -2233,28 +2608,47 @@ function DiscoveryShell({
   children,
   mobileNavigationLabel = "Toggle navigation",
   defaultSidebarOpen = false,
+  sidebarStorageKey,
+  sidebarOpened,
+  onSidebarOpenedChange,
   stickySidebar = true,
+  desktopCollapsible = false,
+  desktopNavigationLabel = "Toggle sidebar",
   sidebarWidth = 280,
   headerHeight = 60,
   shellPadding = "md",
   collapseBreakpoint = "sm"
 }) {
-  const [opened, { toggle, close }] = (0, import_hooks2.useDisclosure)(defaultSidebarOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    import_core30.AppShell,
+  const breakpointByAlias = {
+    xs: "36em",
+    sm: "48em",
+    md: "62em",
+    lg: "75em",
+    xl: "88em"
+  };
+  const isMobile = (0, import_hooks2.useMediaQuery)(`(max-width: ${breakpointByAlias[collapseBreakpoint]})`);
+  const shellState = useDiscoveryShellState({ defaultSidebarOpen, sidebarStorageKey, onSidebarOpenedChange });
+  const opened = sidebarOpened ?? shellState.opened;
+  const close = onSidebarOpenedChange ? () => onSidebarOpenedChange(false) : shellState.close;
+  const toggle = onSidebarOpenedChange ? () => onSidebarOpenedChange(!opened) : shellState.toggle;
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    import_core31.AppShell,
     {
       header: { height: headerHeight },
       footer: footer ? { height: 68 } : void 0,
       navbar: {
         width: sidebarWidth,
         breakpoint: collapseBreakpoint,
-        collapsed: { mobile: !opened }
+        collapsed: {
+          mobile: !opened,
+          desktop: desktopCollapsible ? !opened : false
+        }
       },
       padding: shellPadding,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Group, { h: "100%", px: "md", gap: "sm", wrap: "nowrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            import_core30.Burger,
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core31.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core31.Group, { h: "100%", px: "md", gap: "sm", wrap: "nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            import_core31.Burger,
             {
               opened,
               onClick: toggle,
@@ -2263,10 +2657,20 @@ function DiscoveryShell({
               "aria-label": mobileNavigationLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Box, { style: { flex: 1, minWidth: 0 }, children: header })
+          desktopCollapsible ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            import_core31.Burger,
+            {
+              opened,
+              onClick: toggle,
+              visibleFrom: collapseBreakpoint,
+              size: "sm",
+              "aria-label": desktopNavigationLabel
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core31.Box, { style: { flex: 1, minWidth: 0 }, children: header })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Navbar, { p: "md", "data-sticky-sidebar": stickySidebar || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.ScrollArea, { h: "100%", type: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          import_core30.Box,
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core31.AppShell.Navbar, { p: "md", "data-sticky-sidebar": stickySidebar || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core31.ScrollArea, { h: "100%", type: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          import_core31.Box,
           {
             h: "100%",
             style: stickySidebar ? {
@@ -2276,27 +2680,37 @@ function DiscoveryShell({
             children: sidebar
           }
         ) }) }),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Group, { h: "100%", px: "md", justify: "space-around", wrap: "nowrap", children: footer }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Main, { onClick: () => close(), children })
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core31.AppShell.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core31.Group, { h: "100%", px: "md", justify: "space-around", wrap: "nowrap", children: footer }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          import_core31.AppShell.Main,
+          {
+            onClick: () => {
+              if (isMobile) {
+                close();
+              }
+            },
+            children
+          }
+        )
       ]
     }
   );
 }
 
 // src/DocsShell.tsx
-var import_react5 = require("react");
-var import_core31 = require("@mantine/core");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_core32 = require("@mantine/core");
+var import_jsx_runtime36 = 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" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core32.Stack, { gap: "md", h: "100%", children: [
+    primaryNavigation ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core32.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core32.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 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core32.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core32.Stack, { gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core32.Text, { size: "xs", fw: 700, c: "dimmed", children: "More" }),
         secondaryNavigation
       ] })
     ] }) : null
@@ -2320,15 +2734,15 @@ function DocsShell({
   children,
   contentWidth = "full"
 }) {
-  const [mobileNavOpen, setMobileNavOpen] = (0, import_react5.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  const [mobileNavOpen, setMobileNavOpen] = (0, import_react7.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.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,
+      header: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core32.Group, { h: "100%", justify: "space-between", align: "center", wrap: "nowrap", gap: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core32.Group, { gap: "sm", align: "center", wrap: "nowrap", style: { minWidth: 0 }, children: [
+          mobileNavigationMode === "inline-collapse" && mobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              import_core32.Burger,
               {
                 opened: mobileNavOpen,
                 onClick: () => setMobileNavOpen((value) => !value),
@@ -2337,14 +2751,14 @@ function DocsShell({
                 "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 }) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core32.Transition, { mounted: mobileNavOpen, transition: "pop", duration: 120, children: (styles) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core32.Box, { style: styles, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core32.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_runtime36.jsx)(import_core32.Box, { style: { minWidth: 0 }, children: brand }),
+          headerContext ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core32.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 })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core32.Group, { gap: "sm", wrap: "nowrap", style: { minWidth: 0 }, children: actions })
       ] }),
-      sidebar: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      sidebar: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         DocsShellSidebar,
         {
           primaryNavigation,
@@ -2354,26 +2768,26 @@ function DocsShell({
       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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core32.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_react8 = require("react");
+var import_core33 = require("@mantine/core");
 var import_gds_theme4 = require("@doneisbetter/gds-theme");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function SidebarNav({ children, ariaLabel = "Primary navigation", gap = "md" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Stack, { component: "nav", "aria-label": ariaLabel, gap, h: "100%", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core33.Stack, { component: "nav", "aria-label": ariaLabel, gap, h: "100%", children });
 }
 function SidebarNavSection({ label, children, pushToBottom = false }) {
-  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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core33.Stack, { gap: "xs", mt: pushToBottom ? "auto" : void 0, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core33.Text, { size: "xs", fw: 700, c: "dimmed", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core33.Stack, { gap: 4, children })
   ] });
 }
-var _SidebarNavItem = (0, import_react6.forwardRef)(
+var _SidebarNavItem = (0, import_react8.forwardRef)(
   ({
     action,
     label,
@@ -2389,14 +2803,14 @@ var _SidebarNavItem = (0, import_react6.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_runtime34.jsx)(
-      import_core32.NavLink,
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_core33.NavLink,
       {
         ref,
         label: resolvedLabel,
         description,
-        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,
+        leftSection: icon ?? (Icon ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { size: "1rem", stroke: 1.5 }) : void 0),
+        rightSection: badge ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core33.Box, { children: badge }) : props.rightSection,
         "aria-label": ariaLabel ?? (typeof resolvedLabel === "string" ? resolvedLabel : void 0),
         "aria-current": props.active ? "page" : ariaCurrent,
         ...props
@@ -2404,21 +2818,21 @@ var _SidebarNavItem = (0, import_react6.forwardRef)(
     );
   }
 );
-var SidebarNavItem = (0, import_core32.createPolymorphicComponent)(_SidebarNavItem);
+var SidebarNavItem = (0, import_core33.createPolymorphicComponent)(_SidebarNavItem);
 
 // src/PublicSiteFooter.tsx
-var import_core33 = require("@mantine/core");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_core34 = require("@mantine/core");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function PublicSiteFooter({ children, meta }) {
-  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
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core34.Stack, { component: "footer", gap: "xs", children: [
+    children ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core34.Text, { size: "sm", children }) : null,
+    meta ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core34.Group, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core34.Text, { size: "xs", c: "dimmed", children: meta }) }) : null
   ] });
 }
 
 // src/PublicBrandFooter.tsx
-var import_core34 = require("@mantine/core");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_core35 = require("@mantine/core");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function PublicBrandFooter({
   media,
   brandTitle,
@@ -2433,8 +2847,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_runtime36.jsx)(
-    import_core34.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    import_core35.Paper,
     {
       component: "footer",
       withBorder: true,
@@ -2442,19 +2856,19 @@ function PublicBrandFooter({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       "data-layout-variant": layoutVariant,
-      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
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core35.Stack, { gap: "lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core35.Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
+          media ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core35.Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core35.Box, { className: classNames?.media, children: media }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core35.Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core35.Stack, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
+            brandTitle ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core35.Title, { order: 4, children: brandTitle }) : null,
+            description ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core35.Text, { c: "dimmed", children: description }) : null,
+            actions ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core35.Box, { children: actions }) : 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
+          secondary ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core35.Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core35.Stack, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
         ] }),
-        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 })
+        legal ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core35.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core35.Group, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core35.Text, { size: "sm", c: "dimmed", children: legal }) : legal })
         ] }) : null
       ] })
     }
@@ -2462,8 +2876,8 @@ function PublicBrandFooter({
 }
 
 // src/AuthShell.tsx
-var import_core35 = require("@mantine/core");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_core36 = require("@mantine/core");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function AuthShell({
   title,
   description,
@@ -2479,37 +2893,37 @@ function AuthShell({
   dividerLabel = "Or continue with your account",
   children
 }) {
-  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
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Box, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Container, { size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core36.Stack, { gap: "xl", children: [
+    brand || headerActions ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core36.Group, { justify: brand && headerActions ? "space-between" : "center", align: "center", children: [
+      brand ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Box, { children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Box, {}),
+      headerActions ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Group, { gap: "sm", children: headerActions }) : null
     ] }) : 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.Group, { justify: "center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Badge, { variant: "light", color: intent === "account-linking" ? "blue" : intent === "guest-entry" ? "gray" : "teal", children: intent.replace("-", " ") }) }),
-        /* @__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
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Card, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core36.Stack, { gap: "lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core36.Stack, { gap: "xs", ta: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Group, { justify: "center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Badge, { variant: "light", color: intent === "account-linking" ? "blue" : intent === "guest-entry" ? "gray" : "teal", children: intent.replace("-", " ") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Title, { order: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Text, { c: "dimmed", size: "sm", children: description }) : null
       ] }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Alert, { color: "red", variant: "light", role: "alert", children: error }) : 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,
+      error ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Alert, { color: "red", variant: "light", role: "alert", children: error }) : null,
+      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Box, { children: socialAuth }) : null,
+      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Divider, { label: dividerLabel, labelPosition: "center" }) : null,
       children,
-      guestAction || supportAction ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { justify: "center", gap: "sm", children: [
+      guestAction || supportAction ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core36.Group, { justify: "center", gap: "sm", children: [
         guestAction,
         supportAction
       ] }) : null,
-      helper ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
+      helper ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
     ] }) }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core36.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
   ] }) }) });
 }
 
 // src/SocialAuthButtons.tsx
-var import_core37 = require("@mantine/core");
+var import_core38 = require("@mantine/core");
 
 // src/ProviderIdentityButtons.tsx
-var import_core36 = require("@mantine/core");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_core37 = require("@mantine/core");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var PROVIDER_IDENTITY_REGISTRY = {
   google: {
     providerLabel: "Google",
@@ -2615,15 +3029,15 @@ function getProviderIdentityPolicy(provider) {
 }
 function ProviderIdentityMark({ provider }) {
   const meta = getProviderIdentityMeta(provider);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_core36.ThemeIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_core37.ThemeIcon,
     {
       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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core37.Text, { size: "xs", fw: 700, c: "inherit", children: meta.markLabel })
     }
   );
 }
@@ -2654,8 +3068,8 @@ function ProviderIdentityButton({
   } : {
     onClick
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_core36.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_core37.Button,
     {
       variant: mapVariant(variant),
       color: variant === "solid" ? meta.brandColor : void 0,
@@ -2664,17 +3078,17 @@ function ProviderIdentityButton({
       size,
       "aria-label": ariaLabel ?? (typeof buttonLabel === "string" ? buttonLabel : void 0),
       "aria-describedby": describedBy,
-      leftSection: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ProviderIdentityMark, { provider }),
+      leftSection: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ProviderIdentityMark, { provider }),
       disabled: resolvedDisabled,
       loading,
       styles: { root: { minHeight: minTouchTargetPx } },
       ...buttonProps,
-      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,
-        policyNote ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "xs", c: "dimmed", lh: 1.2, children: policyNote }) : null,
-        tenantDisabledReason ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "xs", c: "orange.7", lh: 1.2, children: tenantDisabledReason }) : null,
-        error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "xs", c: "red.7", lh: 1.2, role: "alert", children: error }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core37.Stack, { gap: 0, align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core37.Text, { inherit: true, children: buttonLabel }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core37.Text, { size: "xs", c: "dimmed", lh: 1.2, children: description }) : null,
+        policyNote ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core37.Text, { size: "xs", c: "dimmed", lh: 1.2, children: policyNote }) : null,
+        tenantDisabledReason ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core37.Text, { size: "xs", c: "orange.7", lh: 1.2, children: tenantDisabledReason }) : null,
+        error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core37.Text, { size: "xs", c: "red.7", lh: 1.2, role: "alert", children: error }) : null
       ] })
     }
   );
@@ -2685,16 +3099,16 @@ function ProviderIdentityButtonGroup({ providers, layout = "stack" }) {
   }
   const content = providers.map((entry, index) => {
     const key = `${normalizeProviderId(String(entry.provider)) || "provider"}-${index}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ProviderIdentityButton, { ...entry }, key);
+    return /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)(import_core37.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Stack, { gap: "sm", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core37.Stack, { gap: "sm", children: content });
 }
 
 // src/SocialAuthButtons.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function SocialAuthButtons({
   providers,
   title = "Continue with a trusted provider",
@@ -2719,43 +3133,43 @@ function SocialAuthButtons({
     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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core38.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core38.Stack, { gap: 4, ta: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core38.Group, { justify: "center", gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(GdsIcons.Login, { size: "1rem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core38.Text, { fw: 600, children: title })
       ] }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { size: "sm", c: "dimmed", children: description }) : null
+      description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core38.Text, { size: "sm", c: "dimmed", children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ProviderIdentityButtonGroup, { providers: buttons, layout })
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core38.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ProviderIdentityButtonGroup, { providers: buttons, layout })
   ] });
 }
 
 // src/ArticleShell.tsx
-var import_core38 = require("@mantine/core");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_core39 = require("@mantine/core");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function ArticleShell({ eyebrow, title, lead, meta, sideRail, children }) {
-  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
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core39.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core39.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core39.Stack, { gap: "lg", maw: 760, flex: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core39.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core39.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core39.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core39.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core39.Group, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Stack, { gap: "md", children })
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core39.Stack, { gap: "md", children })
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core39.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/DocsCodeBlock.tsx
-var import_react7 = require("react");
-var import_core39 = require("@mantine/core");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_core40 = require("@mantine/core");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function DocsCodeBlock({ code, language, title, withCopy = true }) {
-  const [copied, setCopied] = (0, import_react7.useState)(false);
+  const [copied, setCopied] = (0, import_react9.useState)(false);
   const handleCopy = async () => {
     if (!navigator?.clipboard) {
       return;
@@ -2764,44 +3178,44 @@ function DocsCodeBlock({ code, language, title, withCopy = true }) {
     setCopied(true);
     window.setTimeout(() => setCopied(false), 1200);
   };
-  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
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core40.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core40.Stack, { gap: "sm", children: [
+    title || withCopy ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core40.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core40.Stack, { gap: 0, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core40.Text, { fw: 600, children: title }) : null,
+        language ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core40.Text, { size: "xs", c: "dimmed", children: language }) : null
       ] }),
-      withCopy ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        import_core39.ActionIcon,
+      withCopy ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        import_core40.ActionIcon,
         {
           variant: "subtle",
           "aria-label": copied ? "Copied code block" : "Copy code block",
           onClick: () => {
             void handleCopy();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(GdsIcons.Copy, { size: "1rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(GdsIcons.Copy, { size: "1rem" })
         }
       ) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Code, { block: true, children: code })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core40.Code, { block: true, children: code })
   ] }) });
 }
 
 // src/CtaButtonGroup.tsx
-var import_core40 = require("@mantine/core");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_core41 = require("@mantine/core");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function CtaButtonGroup({ primary, secondary, tertiary }) {
-  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
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core41.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core41.Group, { gap: "sm", align: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: primary }),
+      secondary ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: secondary }) : null
     ] }),
-    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: tertiary }) : null
+    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: tertiary }) : null
   ] });
 }
 
 // src/DocsPageShell.tsx
-var import_core41 = require("@mantine/core");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_core42 = require("@mantine/core");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function DocsPageShell({
   breadcrumbs = [],
   title,
@@ -2812,27 +3226,27 @@ function DocsPageShell({
   footerNext,
   children
 }) {
-  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)
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core42.Container, { fluid: true, py: "xl", px: { base: "md", md: "lg", lg: "xl" }, w: "100%", maw: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core42.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core42.Stack, { component: "article", gap: "lg", flex: 1, miw: 0, children: [
+      breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core42.Breadcrumbs, { children: breadcrumbs.map(
+        (crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core42.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core42.Text, { children: crumb.label }, crumb.label)
       ) }) : 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_runtime46.jsxs)(import_core42.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core42.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core42.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core42.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core42.Group, { gap: "md", children: meta }) : 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
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core42.Stack, { gap: "md", children }),
+      footerNext ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core42.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core42.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/EditorialHero.tsx
-var import_core42 = require("@mantine/core");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_core43 = require("@mantine/core");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function resolveActionVariant(action, index, seenPrimary) {
   const requested = action.variant ?? (index === 0 ? "primary" : "secondary");
   if (requested === "primary" && !seenPrimary) {
@@ -2844,8 +3258,8 @@ function resolveActionVariant(action, index, seenPrimary) {
   return { variant: "default", seenPrimary };
 }
 function HeroAction({ action, variant }) {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_core42.Anchor,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_core43.Anchor,
     {
       href: action.href,
       onClick: action.onClick,
@@ -2869,8 +3283,8 @@ function HeroAction({ action, variant }) {
     }
   );
   if (!action.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      import_core42.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      import_core43.Box,
       {
         component: "button",
         type: "button",
@@ -2897,30 +3311,30 @@ function HeroAction({ action, variant }) {
   return content;
 }
 function LoadingHero({ compact }) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core43.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core43.Stack, { gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Skeleton, { height: 16, width: 96, radius: "xl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Skeleton, { height: 48, width: "90%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Skeleton, { height: 18, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Skeleton, { height: 18, width: "82%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core43.Group, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Skeleton, { height: 40, width: 140, radius: "md" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Skeleton, { height: 40, width: 140, radius: "md" })
       ] })
     ] }) }),
-    /* @__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" }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Skeleton, { radius: "lg" }) }) })
   ] }) });
 }
 function MediaFallback() {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_core42.ThemeIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_core43.ThemeIcon,
     {
       size: "100%",
       radius: "lg",
       color: "gray",
       variant: "light",
       "aria-label": "Hero media is unavailable",
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
     }
   ) });
 }
@@ -2940,8 +3354,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_runtime44.jsxs)(
-    import_core42.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    import_core43.Box,
     {
       component: "figure",
       m: 0,
@@ -2954,9 +3368,9 @@ function MediaFrame({
       },
       "aria-label": mediaAlt,
       children: [
-        media ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MediaFallback, {}),
-        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          import_core42.Box,
+        media ?? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MediaFallback, {}),
+        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_core43.Box,
           {
             "aria-hidden": true,
             style: {
@@ -2989,7 +3403,7 @@ function EditorialHero({
   classNames
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LoadingHero, { compact });
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LoadingHero, { compact });
   }
   const stackAlign = align === "center" ? "center" : "flex-start";
   const textAlign = align === "center" ? "center" : "left";
@@ -2997,15 +3411,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_runtime44.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
   });
-  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
+  const textSlot = /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core43.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core43.Stack, { gap: "sm", align: stackAlign, children: [
+      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
     ] }),
-    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       CtaButtonGroup,
       {
         primary: renderedActions[0],
@@ -3013,8 +3427,8 @@ function EditorialHero({
         tertiary: renderedActions[2]
       }
     ) }) : null,
-    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,
+    meta.length ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      import_core43.Group,
       {
         gap: 6,
         px: "sm",
@@ -3025,17 +3439,17 @@ function EditorialHero({
         },
         children: [
           item.icon,
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Text, { size: "sm", c: "dimmed", children: item.label })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Text, { size: "sm", c: "dimmed", children: item.label })
         ]
       },
       item.id
     )) }) : null
   ] });
-  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,
+  const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
+  const textCol = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
+  const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core43.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_core43.Paper,
     {
       component: "section",
       withBorder: true,
@@ -3043,7 +3457,7 @@ function EditorialHero({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       style: surfaceVariant === "flat-public" ? { boxShadow: "none" } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core43.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
         textCol,
         mediaCol
       ] })
@@ -3052,19 +3466,19 @@ function EditorialHero({
 }
 
 // src/FeatureBand.tsx
-var import_core43 = require("@mantine/core");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_core44 = require("@mantine/core");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function FeatureBandSkeleton({
   columns = 3,
   bordered = true,
   variant = "default"
 }) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core44.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core44.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Skeleton, { height: 20, width: "75%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Skeleton, { height: 14, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Skeleton, { height: 14, width: "82%", radius: "md" })
     ] })
   ] }) }, index)) });
 }
@@ -3077,10 +3491,10 @@ function FeatureBand({
   variant = "default"
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
   }
   if (!items.length) {
-    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       EmptyState,
       {
         title: "No supporting details available",
@@ -3088,9 +3502,9 @@ function FeatureBand({
       }
     );
   }
-  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,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core44.Stack, { gap: "md", children: [
+    variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      import_core44.Text,
       {
         fw: 800,
         size: "sm",
@@ -3102,18 +3516,18 @@ function FeatureBand({
         },
         children: item.stepLabel ?? `Step ${index + 1}`
       }
-    ) }) : 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.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core44.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Title, { order: 4, children: item.title }),
+      item.description ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Text, { c: "dimmed", children: item.description }) : null,
+      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core44.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
     ] })
   ] }) }, item.id)) }) });
 }
 
 // src/MapPanel.tsx
-var import_core44 = require("@mantine/core");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_core45 = require("@mantine/core");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function MapPanel({
   title,
   description,
@@ -3129,7 +3543,7 @@ function MapPanel({
 }) {
   let body;
   if (loading) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       StateBlock,
       {
         variant: "loading",
@@ -3139,9 +3553,9 @@ function MapPanel({
       }
     );
   } else if (error) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
   } else if (!iframeSrc && !renderMap) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       StateBlock,
       {
         variant: "empty",
@@ -3151,9 +3565,9 @@ function MapPanel({
       }
     );
   } else if (renderMap) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Box, { style: { minHeight }, children: renderMap() });
+    body = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core45.Box, { style: { minHeight }, children: renderMap() });
   } else {
-    body = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core45.AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "iframe",
       {
         src: iframeSrc,
@@ -3165,21 +3579,21 @@ function MapPanel({
       }
     ) });
   }
-  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
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core45.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core45.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core45.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core45.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core45.Title, { order: 3, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core45.Text, { size: "sm", c: "dimmed", children: description }) : null
       ] }),
-      actions ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ActionBar, { ...actions }) : null
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActionBar, { ...actions }) : null
     ] }),
     body
   ] }) });
 }
 
 // src/PublicFlowShell.tsx
-var import_core45 = require("@mantine/core");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_core46 = require("@mantine/core");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var stageTone = {
   idle: { label: "Idle", color: "gray" },
   loading: { label: "Loading", color: "blue" },
@@ -3231,7 +3645,7 @@ function PublicFlowShell({
   const actionBar = toActionBar(stage.actions);
   let body = stage.body;
   if (stage.status === "loading") {
-    body = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       StateBlock,
       {
         variant: "loading",
@@ -3240,7 +3654,7 @@ function PublicFlowShell({
       }
     );
   } else if (stage.status === "error") {
-    body = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    body = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       StateBlock,
       {
         variant: "error",
@@ -3249,7 +3663,7 @@ function PublicFlowShell({
       }
     );
   } else if (!stage.body && !hardwareSurface) {
-    body = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    body = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       EmptyState,
       {
         title: "No stage content available",
@@ -3257,29 +3671,29 @@ function PublicFlowShell({
       }
     );
   }
-  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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core46.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core46.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core46.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core46.Stack, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core46.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core46.Group, { gap: "sm", wrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core46.Title, { order: 2, children: stage.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core46.Badge, { variant: "light", color: tone.color, children: tone.label })
         ] }),
-        stage.description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "dimmed", children: stage.description }) : null
+        stage.description ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core46.Text, { size: "sm", c: "dimmed", children: stage.description }) : null
       ] }),
       exitAction
     ] }),
-    stage.notice ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "dimmed", children: stage.notice }) : null,
+    stage.notice ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core46.Text, { size: "sm", c: "dimmed", children: stage.notice }) : null,
     body,
     hardwareSurface,
     stage.aside,
-    actionBar ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActionBar, { ...actionBar }) : null
+    actionBar ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ActionBar, { ...actionBar }) : null
   ] }) });
 }
 
 // src/PlaybackSurface.tsx
-var import_core46 = require("@mantine/core");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_core47 = require("@mantine/core");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var stateTone = {
   loading: { label: "Loading", color: "blue" },
   ready: { label: "Ready", color: "teal" },
@@ -3302,7 +3716,7 @@ function PlaybackSurface({
   const tone = stateTone[state];
   let content;
   if (state === "loading") {
-    content = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       StateBlock,
       {
         variant: "loading",
@@ -3311,7 +3725,7 @@ function PlaybackSurface({
       }
     );
   } else if (state === "empty") {
-    content = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    content = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       EmptyState,
       {
         title: "No playback content available",
@@ -3319,7 +3733,7 @@ function PlaybackSurface({
       }
     );
   } else if (state === "error") {
-    content = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    content = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       StateBlock,
       {
         variant: "error",
@@ -3328,23 +3742,23 @@ function PlaybackSurface({
       }
     );
   } else {
-    content = /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Stack, { gap: "md", children: [
+    content = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core47.Stack, { gap: "md", children: [
       media,
       overlays
     ] });
   }
-  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
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core47.Paper, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core47.Stack, { gap: "md", children: [
+    title || statusMessage || controls ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core47.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core47.Stack, { gap: 4, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core47.Title, { order: 3, children: title }) : null,
+        statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core47.Text, { size: "sm", c: "dimmed", children: statusMessage }) : null
       ] }),
-      /* @__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 }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core47.Group, { gap: "sm", align: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core47.Badge, { variant: "light", color: tone.color, children: tone.label }),
         controls
       ] })
     ] }) : null,
-    state === "degraded" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    state === "degraded" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       StateBlock,
       {
         variant: "info",
@@ -3358,9 +3772,9 @@ function PlaybackSurface({
 }
 
 // src/ShareButtonGroup.tsx
-var import_react8 = require("react");
-var import_core47 = require("@mantine/core");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_core48 = require("@mantine/core");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var channelLabels = {
   native: "Share",
   copy: "Copy link",
@@ -3395,9 +3809,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_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_runtime52.jsx)(import_core48.ActionIcon, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "subtle", size: "lg", "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { size: "1rem", stroke: 1.75 }) }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core48.ActionIcon, { variant: "subtle", size: "lg", "aria-label": label, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { size: "1rem", stroke: 1.75 }) });
   }
-  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 });
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core48.Button, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { size: "1rem", stroke: 1.75 }), children: label }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core48.Button, { variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { size: "1rem", stroke: 1.75 }), onClick, children: label });
 }
 function ShareButtonGroup({
   url,
@@ -3408,8 +3822,8 @@ function ShareButtonGroup({
   label = "Share this",
   description
 }) {
-  const [copied, setCopied] = (0, import_react8.useState)(false);
-  const [shared, setShared] = (0, import_react8.useState)(false);
+  const [copied, setCopied] = (0, import_react10.useState)(false);
+  const [shared, setShared] = (0, import_react10.useState)(false);
   const hrefs = encodeShare(url, title, text);
   async function handleCopy() {
     await navigator.clipboard?.writeText?.(url);
@@ -3425,29 +3839,29 @@ function ShareButtonGroup({
     }
     await handleCopy();
   }
-  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
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_core48.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_core48.Stack, { gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core48.Text, { fw: 600, children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core48.Text, { size: "sm", c: "dimmed", children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Group, { gap: "sm", wrap: "wrap", children: channels.map((channel) => {
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core48.Group, { gap: "sm", wrap: "wrap", children: channels.map((channel) => {
       if (channel === "copy") {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ShareAction, { channel, compact, onClick: () => void handleCopy() }, channel);
+        return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ShareAction, { channel, compact, onClick: () => void handleCopy() }, channel);
       }
       if (channel === "native") {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ShareAction, { channel, compact, onClick: () => void handleNativeShare() }, channel);
+        return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ShareAction, { channel, compact, onClick: () => void handleNativeShare() }, channel);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ShareAction, { channel, compact, href: hrefs[channel] }, channel);
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ShareAction, { channel, compact, href: hrefs[channel] }, channel);
     }) }),
-    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
+    copied ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core48.Text, { size: "sm", c: "teal", children: "Link copied." }) : null,
+    shared ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core48.Text, { size: "sm", c: "teal", children: "Share sheet opened." }) : null
   ] });
 }
 
 // src/UploadDropzone.tsx
-var import_react9 = require("react");
-var import_core48 = require("@mantine/core");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_core49 = require("@mantine/core");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function UploadDropzone({
   title,
   description,
@@ -3466,8 +3880,8 @@ function UploadDropzone({
   removeAction,
   readonly = false
 }) {
-  const inputRef = (0, import_react9.useRef)(null);
-  const [dragging, setDragging] = (0, import_react9.useState)(false);
+  const inputRef = (0, import_react11.useRef)(null);
+  const [dragging, setDragging] = (0, import_react11.useState)(false);
   const UploadIcon = GdsIcons.Upload;
   const effectiveState = readonly ? "readonly" : dragging ? "drag-active" : state;
   const isDisabled = readonly || effectiveState === "upload-pending";
@@ -3478,8 +3892,8 @@ function UploadDropzone({
     }
     onFilesSelected(Array.from(files));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-    import_core48.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+    import_core49.Box,
     {
       onDragOver: (event) => {
         event.preventDefault();
@@ -3502,7 +3916,7 @@ function UploadDropzone({
       },
       "aria-invalid": isError || void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "input",
           {
             ref: inputRef,
@@ -3514,23 +3928,23 @@ function UploadDropzone({
             onChange: (event) => forwardFiles(event.currentTarget.files)
           }
         ),
-        /* @__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.Badge, { variant: "light", color: isError ? "red" : effectiveState === "selected" ? "blue" : effectiveState === "upload-pending" ? "violet" : "gray", children: effectiveState.replace("-", " ") }),
-          /* @__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,
-          acceptedTypesLabel || maxSizeLabel ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Group, { gap: "xs", justify: mode === "inline" ? "flex-start" : "center", children: [
-            acceptedTypesLabel ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Badge, { variant: "outline", color: "gray", children: acceptedTypesLabel }) : null,
-            maxSizeLabel ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Badge, { variant: "outline", color: "gray", children: maxSizeLabel }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core49.Stack, { align: mode === "inline" ? "flex-start" : "center", ta: mode === "inline" ? "left" : "center", gap: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(UploadIcon, { size: "1.5rem" }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core49.Badge, { variant: "light", color: isError ? "red" : effectiveState === "selected" ? "blue" : effectiveState === "upload-pending" ? "violet" : "gray", children: effectiveState.replace("-", " ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core49.Text, { fw: 600, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core49.Text, { size: "sm", c: "dimmed", children: description }) : null,
+          acceptedTypesLabel || maxSizeLabel ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core49.Group, { gap: "xs", justify: mode === "inline" ? "flex-start" : "center", children: [
+            acceptedTypesLabel ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core49.Badge, { variant: "outline", color: "gray", children: acceptedTypesLabel }) : null,
+            maxSizeLabel ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core49.Badge, { variant: "outline", color: "gray", children: maxSizeLabel }) : null
           ] }) : null,
-          selectedFiles.length ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Text, { size: "sm", children: [
+          selectedFiles.length ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core49.Text, { size: "sm", children: [
             "Selected: ",
             selectedFiles.join(", ")
           ] }) : null,
-          policyText ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Text, { size: "sm", c: isError ? "red.7" : "dimmed", children: policyText }) : null,
-          error ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Text, { size: "sm", c: "red.7", role: "alert", children: error }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Group, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Button, { variant: "light", onClick: () => inputRef.current?.click(), disabled: isDisabled, children: actionLabel }),
+          policyText ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core49.Text, { size: "sm", c: isError ? "red.7" : "dimmed", children: policyText }) : null,
+          error ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core49.Text, { size: "sm", c: "red.7", role: "alert", children: error }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core49.Group, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core49.Button, { variant: "light", onClick: () => inputRef.current?.click(), disabled: isDisabled, children: actionLabel }),
             retryAction,
             removeAction
           ] })
@@ -3541,8 +3955,8 @@ function UploadDropzone({
 }
 
 // src/MediaField.tsx
-var import_core49 = require("@mantine/core");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_core50 = require("@mantine/core");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var stateLabels = {
   empty: { label: "Empty", color: "gray" },
   "drag-active": { label: "Drop to select", color: "violet" },
@@ -3583,44 +3997,44 @@ function MediaField({
 }) {
   const resolvedState = readonly ? "readonly" : state;
   const stateBadge = stateLabels[resolvedState];
-  const resolvedRemoveAction = removeAction ?? (!readonly && onRemove ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
-  const resolvedResetAction = resetAction ?? (!readonly && onReset ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
+  const resolvedRemoveAction = removeAction ?? (!readonly && onRemove ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
+  const resolvedResetAction = resetAction ?? (!readonly && onReset ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
   const boundedProgress = typeof progress === "number" ? Math.max(0, Math.min(100, progress)) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     FormField,
     {
       label,
       description,
       error,
-      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 }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core50.Stack, { gap: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core50.Group, { gap: "xs", justify: "flex-end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
           statusAction
         ] }) }),
         preview ? preview : null,
-        typeof boundedProgress === "number" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Stack, { gap: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Progress, { value: boundedProgress, "aria-label": "Upload progress" }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Text, { size: "xs", c: "dimmed", children: [
+        typeof boundedProgress === "number" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core50.Stack, { gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Progress, { value: boundedProgress, "aria-label": "Upload progress" }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core50.Text, { size: "xs", c: "dimmed", children: [
             boundedProgress,
             "% complete"
           ] })
         ] }) : null,
-        (uploadControl || urlInput) && !readonly ? /* @__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) && !readonly ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core50.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_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,
-        acceptedTypes || maxSize ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Group, { gap: "xs", wrap: "wrap", children: [
-          acceptedTypes ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Badge, { variant: "outline", color: "gray", children: acceptedTypes }) : null,
-          maxSize ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Badge, { variant: "outline", color: "gray", children: maxSize }) : null
+        value ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
+        helpText ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
+        acceptedTypes || maxSize ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core50.Group, { gap: "xs", wrap: "wrap", children: [
+          acceptedTypes ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Badge, { variant: "outline", color: "gray", children: acceptedTypes }) : null,
+          maxSize ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Badge, { variant: "outline", color: "gray", children: maxSize }) : null
         ] }) : null,
-        policyText ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
+        policyText ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core50.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
         typeof error !== "string" && error ? error : null,
-        replaceAction || resolvedRemoveAction || resolvedResetAction || retryAction ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Group, { gap: "sm", children: [
+        replaceAction || resolvedRemoveAction || resolvedResetAction || retryAction ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core50.Group, { gap: "sm", children: [
           replaceAction,
           resolvedResetAction,
           retryAction,
@@ -3632,31 +4046,31 @@ function MediaField({
 }
 
 // src/MediaCard.tsx
-var import_core50 = require("@mantine/core");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_core51 = require("@mantine/core");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function MediaCard({ title, image, description, status, overlay, actions = [] }) {
   const EyeIcon = GdsIcons.Eye;
-  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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core51.Card, { withBorder: true, radius: "lg", padding: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core51.Card.Section, { pos: "relative", children: [
       image,
-      overlay ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
+      overlay ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : 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
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core51.Stack, { gap: "sm", mt: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core51.Group, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core51.Stack, { gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core51.Title, { order: 4, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core51.Text, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
         ] }),
-        status ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core50.Badge, { variant: "light", children: status }) : null
+        status ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core51.Badge, { variant: "light", children: status }) : 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
+      actions.length ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core51.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core51.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
     ] })
   ] });
 }
 
 // src/AccessSummary.tsx
-var import_core51 = require("@mantine/core");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_core52 = require("@mantine/core");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var accessStateMeta = {
   allowed: { label: "Allowed", color: "teal" },
   blocked: { label: "Blocked", color: "red" },
@@ -3667,29 +4081,29 @@ var accessStateMeta = {
 function AccessSummary({ title, roles, scope, blocked = false, state, owner, recoveryHint, description }) {
   const resolvedState = state ?? (blocked ? "blocked" : "allowed");
   const meta = accessStateMeta[resolvedState];
-  return /* @__PURE__ */ (0, import_jsx_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: meta.color, variant: "light", children: meta.label })
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core52.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_core52.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_core52.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core52.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core52.Badge, { color: meta.color, variant: "light", children: meta.label })
     ] }),
-    /* @__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: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core52.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core52.Badge, { variant: "outline", children: role }, role)) }),
+    scope ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_core52.Text, { size: "sm", c: "dimmed", children: [
       "Scope: ",
       scope
     ] }) : null,
-    owner ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core51.Text, { size: "sm", c: "dimmed", children: [
+    owner ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_core52.Text, { size: "sm", c: "dimmed", children: [
       "Owner: ",
       owner
     ] }) : null,
-    recoveryHint ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Text, { size: "sm", c: resolvedState === "allowed" ? "dimmed" : "red.7", children: recoveryHint }) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Text, { size: "sm", children: description }) : null
+    recoveryHint ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core52.Text, { size: "sm", c: resolvedState === "allowed" ? "dimmed" : "red.7", children: recoveryHint }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core52.Text, { size: "sm", children: description }) : null
   ] }) });
 }
 
 // src/AccessRecoveryPanel.tsx
-var import_core52 = require("@mantine/core");
+var import_core53 = require("@mantine/core");
 var import_gds_theme5 = require("@doneisbetter/gds-theme");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var stateBlockVariantByState = {
   unauthenticated: "permission",
   "expired-session": "info",
@@ -3769,7 +4183,7 @@ function ActionGroup({
   if (actions.length === 0) {
     return null;
   }
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_core53.Group, { gap: "sm", justify: "center", wrap: "wrap", children: actions.map((actionConfig, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     SemanticButton,
     {
       action: actionConfig.action,
@@ -3803,14 +4217,14 @@ function AccessRecoveryPanel({
     onBack,
     supportAction
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime54.jsx)(
+      action: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         ActionGroup,
         {
           primaryAction: primaryAction ?? defaults.primary,
@@ -3822,9 +4236,141 @@ function AccessRecoveryPanel({
   );
 }
 
+// src/GdsForm.client.tsx
+var import_react12 = require("react");
+var import_core54 = require("@mantine/core");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+function createFieldState(value) {
+  return { value, touched: false, dirty: false };
+}
+function createSnapshot(values) {
+  const fields = Object.entries(values).reduce((acc, [field, value]) => {
+    acc[field] = createFieldState(value);
+    return acc;
+  }, {});
+  return { fields, issues: [], submitState: "idle" };
+}
+function gdsFormReducer(state, action) {
+  switch (action.type) {
+    case "set-field": {
+      const current = state.fields[action.field] ?? createFieldState("");
+      return {
+        ...state,
+        fields: {
+          ...state.fields,
+          [action.field]: {
+            value: action.value,
+            touched: current.touched,
+            dirty: true
+          }
+        }
+      };
+    }
+    case "touch-field": {
+      const current = state.fields[action.field] ?? createFieldState("");
+      return {
+        ...state,
+        fields: {
+          ...state.fields,
+          [action.field]: { ...current, touched: true }
+        }
+      };
+    }
+    case "set-issues":
+      return { ...state, issues: [...action.issues] };
+    case "set-submit-state":
+      return { ...state, submitState: action.submitState, submitError: action.submitError };
+    case "reset":
+      return createSnapshot(action.values ?? {});
+    default:
+      return state;
+  }
+}
+function sortIssues(issues) {
+  const weight = { blocking: 0, warning: 1, info: 2 };
+  return [...issues].sort((a, b) => weight[a.severity] - weight[b.severity]);
+}
+function useGdsForm({
+  initialValues,
+  validate,
+  validateAsync,
+  onSubmit
+}) {
+  const [snapshot, dispatch] = (0, import_react12.useReducer)(gdsFormReducer, initialValues, createSnapshot);
+  const submit = async () => {
+    dispatch({ type: "set-submit-state", submitState: "validating" });
+    const syncIssues = sortIssues(validate ? validate(snapshot) : []);
+    let mergedIssues = syncIssues;
+    if (syncIssues.filter((issue) => issue.severity === "blocking").length === 0 && validateAsync) {
+      const asyncIssues = sortIssues(await validateAsync(snapshot));
+      mergedIssues = sortIssues([...syncIssues, ...asyncIssues]);
+    }
+    dispatch({ type: "set-issues", issues: mergedIssues });
+    if (mergedIssues.some((issue) => issue.severity === "blocking")) {
+      dispatch({ type: "set-submit-state", submitState: "error", submitError: "Please resolve blocking validation issues." });
+      return false;
+    }
+    dispatch({ type: "set-submit-state", submitState: "submitting" });
+    try {
+      await onSubmit(
+        Object.entries(snapshot.fields).reduce((acc, [field, state]) => {
+          acc[field] = state.value;
+          return acc;
+        }, {})
+      );
+      dispatch({ type: "set-submit-state", submitState: "success" });
+      return true;
+    } catch (error) {
+      dispatch({
+        type: "set-submit-state",
+        submitState: "error",
+        submitError: error instanceof Error ? error.message : "Submission failed."
+      });
+      return false;
+    }
+  };
+  return (0, import_react12.useMemo)(
+    () => ({
+      snapshot,
+      setFieldValue: (field, value) => dispatch({ type: "set-field", field, value }),
+      touchField: (field) => dispatch({ type: "touch-field", field }),
+      submit,
+      retrySubmit: submit
+    }),
+    [snapshot]
+  );
+}
+var GdsFormContext = (0, import_react12.createContext)(null);
+function GdsFormProvider({ snapshot, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(GdsFormContext.Provider, { value: { snapshot }, children });
+}
+function useGdsFormSnapshot() {
+  const context = (0, import_react12.useContext)(GdsFormContext);
+  if (!context) {
+    throw new Error("useGdsFormSnapshot must be used within GdsFormProvider.");
+  }
+  return context.snapshot;
+}
+function FormErrorSummary({ title = "Please review the following issues." }) {
+  const snapshot = useGdsFormSnapshot();
+  const blocking = snapshot.issues.filter((issue) => issue.severity === "blocking");
+  if (blocking.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_core54.Alert, { color: "red", title, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_core54.Stack, { gap: 4, children: blocking.map((issue) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_core54.Anchor, { href: `#${issue.field}`, children: issue.message }, `${issue.field}-${issue.message}`)) }) });
+}
+function ValidatedFieldMessage({ field }) {
+  const snapshot = useGdsFormSnapshot();
+  const issue = snapshot.issues.find((item) => item.field === field && item.severity === "blocking");
+  if (!issue) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_core54.Text, { size: "xs", c: "red.7", id: `${field}-error`, children: issue.message });
+}
+
 // src/PageHeader.tsx
-var import_core53 = require("@mantine/core");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_core55 = require("@mantine/core");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function PageHeader({
   title,
   description,
@@ -3835,19 +4381,19 @@ function PageHeader({
 }) {
   const resolvedDescription = description ?? subtitle;
   const eyebrowProps = eyebrowVariant === "ornamental" ? { tt: "uppercase", style: { letterSpacing: "0.12em" } } : {};
-  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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_core55.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_core55.Stack, { gap: "xs", children: [
+      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_core55.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_core55.Title, { order: 1, children: title }),
+      resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_core55.Text, { c: "dimmed", maw: 720, children: resolvedDescription })
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Box, { children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_core55.Box, { children: actions }) : null
   ] });
 }
 
 // src/FilterDrawer.tsx
-var import_core54 = require("@mantine/core");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_core56 = require("@mantine/core");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function FilterDrawer({
   opened,
   onClose,
@@ -3863,8 +4409,8 @@ function FilterDrawer({
 }) {
   const resolvedPrimaryAction = applyAction ?? primaryAction;
   const resolvedSecondaryAction = resetAction ?? secondaryAction;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-    import_core54.Drawer,
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    import_core56.Drawer,
     {
       opened,
       onClose,
@@ -3872,11 +4418,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_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: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_core56.Stack, { gap: "md", children: [
+        description ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_core56.Text, { size: "sm", c: "dimmed", children: description }) : null,
         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: [
+        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_core56.Group, { justify: "space-between", mt: "md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_core56.Group, { gap: "sm", children: [
             closeAction,
             resolvedSecondaryAction
           ] }),
@@ -3888,8 +4434,8 @@ function FilterDrawer({
 }
 
 // src/PlaceholderPanel.tsx
-var import_core55 = require("@mantine/core");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_core57 = require("@mantine/core");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function PlaceholderPanel({
   title,
   description,
@@ -3899,16 +4445,16 @@ function PlaceholderPanel({
   mode
 }) {
   if (mode === "live" && children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx_runtime57.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, { children });
   }
-  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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_core57.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_core57.Stack, { gap: "md", children: [
+    badge ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_core57.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_core57.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_core57.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_core57.Text, { c: "dimmed", children: description })
     ] }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_core55.Text, { size: "sm", children: footer }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_core57.Text, { size: "sm", children: footer }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -3921,8 +4467,8 @@ function PlaceholderPanel({
 }
 
 // src/SimpleDataTable.tsx
-var import_core56 = require("@mantine/core");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_core58 = require("@mantine/core");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function SimpleDataTable({
   columns,
   rows,
@@ -3933,23 +4479,331 @@ function SimpleDataTable({
   getRowKey
 }) {
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime58.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core58.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_core58.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core58.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core58.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core58.Table.Th, { children: column.header }, String(column.key))) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core58.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core58.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core58.Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
+  ] }) });
+}
+
+// src/AdvancedDataTable.client.tsx
+var import_react13 = require("react");
+var import_core59 = require("@mantine/core");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+function compareValues(a, b) {
+  if (typeof a === "number" && typeof b === "number") {
+    return a - b;
+  }
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+function AdvancedDataTable({
+  rows,
+  columns,
+  rowId,
+  loading = false,
+  error = null,
+  density: densityProp,
+  stickyHeader = true,
+  stickyHeaderOffset = 0,
+  selectedRowIds,
+  onSelectedRowIdsChange,
+  sortBy: sortByProp,
+  sortDirection: sortDirectionProp,
+  onSortChange,
+  responsiveFallback = "stacked-cards"
+}) {
+  const [densityState, setDensityState] = (0, import_react13.useState)(densityProp ?? "comfortable");
+  const [sortState, setSortState] = (0, import_react13.useState)({ key: sortByProp ?? null, direction: sortDirectionProp ?? "asc" });
+  const [selectionState, setSelectionState] = (0, import_react13.useState)([]);
+  const density = densityProp ?? densityState;
+  const sortBy = sortByProp ?? sortState.key;
+  const sortDirection = sortDirectionProp ?? sortState.direction;
+  const selection = selectedRowIds ?? selectionState;
+  const sortedRows = (0, import_react13.useMemo)(() => {
+    if (!sortBy) {
+      return rows;
+    }
+    const column = columns.find((item) => item.key === sortBy);
+    if (!column) {
+      return rows;
+    }
+    const next = [...rows].sort((left, right) => {
+      const leftValue = column.sortAccessor ? column.sortAccessor(left) : String(left[column.key] ?? "");
+      const rightValue = column.sortAccessor ? column.sortAccessor(right) : String(right[column.key] ?? "");
+      const result = compareValues(leftValue, rightValue);
+      return sortDirection === "asc" ? result : -result;
+    });
+    return next;
+  }, [rows, columns, sortBy, sortDirection]);
+  const allIds = (0, import_react13.useMemo)(() => sortedRows.map((row, index) => rowId(row, index)), [sortedRows, rowId]);
+  const allSelected = allIds.length > 0 && allIds.every((id) => selection.includes(id));
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StateBlock, { variant: "error", title: "Unable to load table", description: error, compact: true });
+  }
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StateBlock, { variant: "loading", title: "Loading table", description: "Preparing enterprise data grid.", compact: true });
+  }
+  if (!rows.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      StateBlock,
+      {
+        variant: "empty",
+        title: "No rows available",
+        description: "Adjust filters or broaden scope to populate this table.",
+        compact: true
+      }
+    );
+  }
+  const horizontalSpacing = density === "compact" ? "xs" : "md";
+  const verticalSpacing = density === "compact" ? 6 : 10;
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_core59.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_core59.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_core59.Text, { size: "sm", fw: 600, children: [
+        rows.length,
+        " rows"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        import_core59.SegmentedControl,
+        {
+          size: "xs",
+          value: density,
+          onChange: (value) => setDensityState(value),
+          data: [
+            { label: "Compact", value: "compact" },
+            { label: "Comfortable", value: "comfortable" }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core59.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+      import_core59.Table,
+      {
+        stickyHeader,
+        stickyHeaderOffset,
+        withTableBorder: true,
+        highlightOnHover: true,
+        striped: true,
+        horizontalSpacing,
+        verticalSpacing,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core59.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_core59.Table.Tr, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core59.Table.Th, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              import_core59.Checkbox,
+              {
+                "aria-label": "Select all rows",
+                checked: allSelected,
+                indeterminate: !allSelected && selection.length > 0,
+                onChange: (event) => {
+                  const next = event.currentTarget.checked ? allIds : [];
+                  if (onSelectedRowIdsChange) {
+                    onSelectedRowIdsChange(next);
+                  } else {
+                    setSelectionState(next);
+                  }
+                }
+              }
+            ) }),
+            columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core59.Table.Th, { style: column.width ? { width: column.width } : void 0, children: column.sortable ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Sort by ${column.label}`,
+                onClick: () => {
+                  const nextDirection = sortBy === column.key && sortDirection === "asc" ? "desc" : "asc";
+                  if (onSortChange) {
+                    onSortChange(column.key, nextDirection);
+                  } else {
+                    setSortState({ key: column.key, direction: nextDirection });
+                  }
+                },
+                children: column.label
+              }
+            ) : column.label }, column.key))
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core59.Table.Tbody, { children: sortedRows.map((row, index) => {
+            const id = rowId(row, index);
+            const checked = selection.includes(id);
+            return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_core59.Table.Tr, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core59.Table.Td, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                import_core59.Checkbox,
+                {
+                  "aria-label": `Select row ${id}`,
+                  checked,
+                  onChange: () => {
+                    const next = checked ? selection.filter((item) => item !== id) : [...selection, id];
+                    if (onSelectedRowIdsChange) {
+                      onSelectedRowIdsChange(next);
+                    } else {
+                      setSelectionState(next);
+                    }
+                  }
+                }
+              ) }),
+              columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core59.Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, column.key))
+            ] }, id);
+          }) })
+        ]
+      }
+    ) }),
+    responsiveFallback === "stacked-cards" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core59.Stack, { gap: "xs", children: sortedRows.slice(0, 3).map((row, index) => {
+      const id = rowId(row, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        StateBlock,
+        {
+          variant: "info",
+          compact: true,
+          title: String(row[columns[0]?.key] ?? id),
+          description: columns.slice(1, 3).map((column) => `${column.label}: ${String(row[column.key] ?? "")}`).join(" | ")
+        },
+        `card-${id}`
+      );
+    }) }) : null
+  ] });
+}
+
+// src/OverlayManager.client.tsx
+var import_react14 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var OverlayManagerContext = (0, import_react14.createContext)(null);
+function OverlayManagerProvider({ children }) {
+  const [stack, setStack] = (0, import_react14.useState)([]);
+  const value = (0, import_react14.useMemo)(() => ({
+    stack,
+    registerOverlay: (overlay) => {
+      setStack((current) => {
+        const without = current.filter((item) => item.id !== overlay.id);
+        return [...without, overlay];
+      });
+    },
+    unregisterOverlay: (id) => {
+      setStack((current) => current.filter((item) => item.id !== id));
+    },
+    isTopMost: (id) => stack.length > 0 && stack[stack.length - 1]?.id === id,
+    requestClose: (id, reason) => {
+      if (stack.length === 0 || stack[stack.length - 1]?.id !== id) {
+        return null;
+      }
+      return reason;
+    }
+  }), [stack]);
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(OverlayManagerContext.Provider, { value, children });
+}
+function useOverlayManager() {
+  const context = (0, import_react14.useContext)(OverlayManagerContext);
+  if (!context) {
+    throw new Error("useOverlayManager must be used within OverlayManagerProvider.");
+  }
+  return context;
+}
+
+// src/CommandPalette.client.tsx
+var import_react15 = require("react");
+var import_core60 = require("@mantine/core");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var CommandPaletteContext = (0, import_react15.createContext)(null);
+function normalize(text) {
+  return text.trim().toLowerCase();
+}
+function scoreCommand(command, query, recentUse) {
+  const q = normalize(query);
+  if (!q) {
+    return 0;
+  }
+  const label = normalize(command.label);
+  const keywords = command.keywords?.map(normalize) ?? [];
+  const prefix = label.startsWith(q) ? 1 : 0;
+  const keyword = keywords.some((item) => item.includes(q)) ? 1 : 0;
+  const recent = recentUse[command.id] ? 1 : 0;
+  return 0.6 * prefix + 0.3 * keyword + 0.1 * recent;
+}
+function CommandRegistryProvider({ children }) {
+  const [commands, setCommands] = (0, import_react15.useState)([]);
+  const [opened, setOpened] = (0, import_react15.useState)(false);
+  const value = (0, import_react15.useMemo)(() => ({
+    commands,
+    registerCommands: (next) => setCommands(next),
+    open: () => setOpened(true),
+    close: () => setOpened(false)
+  }), [commands]);
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(CommandPaletteContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CommandPalette, { opened, onClose: () => setOpened(false) })
+  ] });
+}
+function useCommandLauncher() {
+  const context = (0, import_react15.useContext)(CommandPaletteContext);
+  if (!context) {
+    throw new Error("useCommandLauncher must be used within CommandRegistryProvider.");
+  }
+  return {
+    open: context.open,
+    close: context.close,
+    registerCommands: context.registerCommands
+  };
+}
+function CommandPalette({ opened, onClose }) {
+  const contextValue = (0, import_react15.useContext)(CommandPaletteContext);
+  if (!contextValue) {
+    throw new Error("CommandPalette must be used within CommandRegistryProvider.");
   }
-  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)) })
+  const registry = contextValue;
+  const [query, setQuery] = (0, import_react15.useState)("");
+  const [recentUse, setRecentUse] = (0, import_react15.useState)({});
+  const enabledCommands = registry.commands.filter((command) => command.enabledWhen ? command.enabledWhen() : true);
+  const filteredCommands = [...enabledCommands].map((command) => ({ command, score: scoreCommand(command, query, recentUse) })).filter(({ command, score }) => normalize(query) === "" || score > 0 || normalize(command.label).includes(normalize(query))).sort((a, b) => b.score - a.score).map((item) => item.command);
+  (0, import_react15.useEffect)(() => {
+    function onKeyDown(event) {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        registry.open();
+      }
+      if (event.key === "Escape" && opened) {
+        onClose();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [registry, opened, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_core60.Modal, { opened, onClose, title: "Quick actions", centered: true, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_core60.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      import_core60.TextInput,
+      {
+        "aria-label": "Command search",
+        placeholder: "Search commands",
+        value: query,
+        onChange: (event) => setQuery(event.currentTarget.value)
+      }
+    ),
+    filteredCommands.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_core60.Text, { size: "sm", c: "dimmed", children: "No matching commands." }) : filteredCommands.map((command) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_core60.Group, { justify: "space-between", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: async () => {
+            await command.run();
+            setRecentUse((current) => ({ ...current, [command.id]: Date.now() }));
+            onClose();
+          },
+          "aria-label": command.label,
+          children: command.label
+        }
+      ),
+      command.shortcut ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_core60.Text, { size: "xs", c: "dimmed", children: command.shortcut }) : null
+    ] }, command.id)),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_core60.Group, { justify: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_core60.ActionIcon, { variant: "subtle", "aria-label": "Close command palette", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(GdsIcons.Close, { size: "1rem" }) }) })
   ] }) });
 }
 
 // src/StatsSection.tsx
-var import_core57 = require("@mantine/core");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_core61 = require("@mantine/core");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function StatsSection({
   title,
   loading = false,
@@ -3961,11 +4815,11 @@ function StatsSection({
 }) {
   let content = children;
   if (error) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
   } else if (loading) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime59.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -3975,17 +4829,17 @@ function StatsSection({
       }
     );
   } else if (placeholder) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
+    content = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
   }
-  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 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_core61.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_core61.Title, { order: 3, children: title }),
     content
   ] });
 }
 
 // src/PeriodSelector.tsx
-var import_core58 = require("@mantine/core");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_core62 = require("@mantine/core");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 function PeriodSelector({
   label,
   description,
@@ -4001,34 +4855,34 @@ function PeriodSelector({
   disabled = false
 }) {
   const selectedOption = options.find((option) => option.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FormField, { label, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_core58.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FormField, { label, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_core62.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       "select",
       {
         "aria-label": typeof label === "string" ? label : "Reporting period",
         value,
         disabled,
         onChange: (event) => onChange?.(event.currentTarget.value),
-        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("option", { value: option.value, children: option.label }, option.value))
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("option", { value: option.value, children: option.label }, option.value))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_core58.Group, { gap: "xs", wrap: "wrap", children: [
-      timezone ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_core58.Badge, { variant: "outline", color: "gray", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_core62.Group, { gap: "xs", wrap: "wrap", children: [
+      timezone ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_core62.Badge, { variant: "outline", color: "gray", children: [
         "Timezone: ",
         timezone
       ] }) : null,
-      filtered ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_core58.Badge, { variant: "light", color: "blue", children: "Filtered" }) : null,
-      stale ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_core58.Badge, { variant: "light", color: "orange", children: "Stale data" }) : null,
-      scope ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_core58.Badge, { variant: "outline", color: "gray", children: scope }) : null
+      filtered ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_core62.Badge, { variant: "light", color: "blue", children: "Filtered" }) : null,
+      stale ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_core62.Badge, { variant: "light", color: "orange", children: "Stale data" }) : null,
+      scope ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_core62.Badge, { variant: "outline", color: "gray", children: scope }) : null
     ] }),
-    selectedOption?.description ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_core58.Text, { size: "sm", c: "dimmed", children: selectedOption.description }) : null,
-    helperText ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_core58.Text, { size: "sm", c: "dimmed", children: helperText }) : null
+    selectedOption?.description ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_core62.Text, { size: "sm", c: "dimmed", children: selectedOption.description }) : null,
+    helperText ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_core62.Text, { size: "sm", c: "dimmed", children: helperText }) : null
   ] }) });
 }
 
 // src/EvidencePanel.tsx
-var import_core59 = require("@mantine/core");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_core63 = require("@mantine/core");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var stateTone2 = {
   current: { label: "Current", color: "teal" },
   stale: { label: "Stale", color: "orange" },
@@ -4053,33 +4907,33 @@ function EvidencePanel({
 }) {
   const tone = stateTone2[state];
   const isProblem = state === "error" || state === "permission-limited" || state === "stale" || state === "partial";
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_core59.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_core59.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_core59.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_core59.Stack, { gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_core59.Title, { order: 4, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_core59.Text, { size: "sm", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_core63.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_core63.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_core63.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_core63.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_core63.Title, { order: 4, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_core63.Text, { size: "sm", c: "dimmed", children: description }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_core59.Badge, { variant: "light", color: tone.color, children: tone.label })
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_core63.Badge, { variant: "light", color: tone.color, children: tone.label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_core59.Group, { gap: "xs", wrap: "wrap", children: [
-      source ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_core59.Badge, { variant: "outline", color: "gray", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_core63.Group, { gap: "xs", wrap: "wrap", children: [
+      source ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_core63.Badge, { variant: "outline", color: "gray", children: [
         "Source: ",
         source
       ] }) : null,
-      freshness ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_core59.Badge, { variant: "outline", color: "gray", children: [
+      freshness ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_core63.Badge, { variant: "outline", color: "gray", children: [
         "Freshness: ",
         freshness
       ] }) : null,
-      confidence ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_core59.Badge, { variant: "outline", color: "gray", children: [
+      confidence ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_core63.Badge, { variant: "outline", color: "gray", children: [
         "Confidence: ",
         confidence
       ] }) : null,
-      typeof evidenceCount === "number" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_core59.Badge, { variant: "outline", color: "gray", children: [
+      typeof evidenceCount === "number" ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_core63.Badge, { variant: "outline", color: "gray", children: [
         "Evidence: ",
         evidenceCount
       ] }) : null
     ] }),
-    permissionNote ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_core59.Alert, { color: isProblem ? tone.color : "gray", variant: "light", children: permissionNote }) : null,
+    permissionNote ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_core63.Alert, { color: isProblem ? tone.color : "gray", variant: "light", children: permissionNote }) : null,
     details,
     children,
     retryAction
@@ -4087,8 +4941,8 @@ function EvidencePanel({
 }
 
 // src/ChartTokenPanel.tsx
-var import_core60 = require("@mantine/core");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_core64 = require("@mantine/core");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function ChartTokenPanel({
   title,
   description,
@@ -4100,42 +4954,127 @@ function ChartTokenPanel({
   retryAction
 }) {
   if (state === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StateBlock, { variant: "loading", title: "Loading chart", description: summary, compact: true, action: retryAction });
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(StateBlock, { variant: "loading", title: "Loading chart", description: summary, compact: true, action: retryAction });
   }
   if (state === "empty") {
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StateBlock, { variant: "empty", title: "No chart data", description: summary, compact: true, action: retryAction });
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(StateBlock, { variant: "empty", title: "No chart data", description: summary, compact: true, action: retryAction });
   }
   if (state === "below-threshold") {
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StateBlock, { variant: "not-enough-data", title: "Not enough data for chart", description: summary, compact: true, action: retryAction });
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(StateBlock, { variant: "not-enough-data", title: "Not enough data for chart", description: summary, compact: true, action: retryAction });
   }
   if (state === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StateBlock, { variant: "error", title: "Unable to load chart", description: summary, compact: true, action: retryAction });
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(StateBlock, { variant: "error", title: "Unable to load chart", description: summary, compact: true, action: retryAction });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core60.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_core60.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_core60.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_core60.Stack, { gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core60.Title, { order: 4, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core60.Text, { size: "sm", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_core64.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_core64.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_core64.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_core64.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_core64.Title, { order: 4, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_core64.Text, { size: "sm", c: "dimmed", children: description }) : null
       ] }),
-      state !== "ready" ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core60.Badge, { variant: "light", color: state === "permission-limited" ? "grape" : "yellow", children: state.replace("-", " ") }) : null
+      state !== "ready" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_core64.Badge, { variant: "light", color: state === "permission-limited" ? "grape" : "yellow", children: state.replace("-", " ") }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core60.Text, { size: "sm", children: summary }),
-    legend.length ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core60.Group, { gap: "xs", wrap: "wrap", "aria-label": "Chart legend", children: legend.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_core60.Badge, { variant: "outline", color: "gray", title: typeof item.description === "string" ? item.description : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_core64.Text, { size: "sm", children: summary }),
+    legend.length ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_core64.Group, { gap: "xs", wrap: "wrap", "aria-label": "Chart legend", children: legend.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_core64.Badge, { variant: "outline", color: "gray", title: typeof item.description === "string" ? item.description : void 0, children: [
       item.label,
       ": ",
       item.token
     ] }, `${String(item.label)}-${index}`)) }) : null,
     children,
-    tableFallback ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_core60.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_core60.Text, { size: "sm", fw: 600, children: "Accessible data fallback" }),
+    tableFallback ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_core64.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_core64.Text, { size: "sm", fw: 600, children: "Accessible data fallback" }),
       tableFallback
     ] }) : null
   ] }) });
 }
 
+// src/GdsChart.tsx
+var import_core65 = require("@mantine/core");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+function GdsChart({ type, title, summary, data, state = "ready", retryAction }) {
+  const tableRows = data.map((item) => ({ label: item.label, value: String(item.value), group: item.group ?? "-" }));
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    ChartTokenPanel,
+    {
+      title,
+      summary,
+      state,
+      retryAction,
+      legend: [
+        { label: "Primary", token: "var(--mantine-color-blue-6)" },
+        { label: "Secondary", token: "var(--mantine-color-teal-6)" }
+      ],
+      tableFallback: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        SimpleDataTable,
+        {
+          columns: [
+            { key: "label", header: "Label" },
+            { key: "value", header: "Value" },
+            { key: "group", header: "Group" }
+          ],
+          rows: tableRows
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_core65.Paper, { withBorder: true, radius: "md", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_core65.Stack, { gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_core65.Group, { justify: "space-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_core65.Text, { fw: 700, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_core65.Badge, { variant: "light", children: type })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_core65.Text, { size: "sm", c: "dimmed", children: summary }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_core65.Text, { size: "xs", c: "dimmed", children: [
+          "Type lane: ",
+          type
+        ] })
+      ] }) })
+    }
+  );
+}
+
+// src/LayoutBlocks.tsx
+var import_core66 = require("@mantine/core");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+function renderBlock(block) {
+  switch (block.type) {
+    case "hero":
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SectionPanel, { title: String(block.props.title ?? "Hero"), description: String(block.props.description ?? "Hero block"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_core66.Text, { children: String(block.props.body ?? "Composable hero content") }) });
+    case "stats":
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_core66.SimpleGrid, { cols: { base: 1, md: 3 }, children: block.props.items?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_core66.Card, { withBorder: true, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_core66.Stack, { gap: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_core66.Text, { size: "sm", c: "dimmed", children: item.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_core66.Title, { order: 4, children: item.value })
+      ] }) }, `${block.id}-${item.label}`)) ?? null });
+    case "cards-grid":
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_core66.SimpleGrid, { cols: { base: 1, md: 2 }, children: block.props.items?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ListingCard, { title: item.title, description: item.description, size: "sm" }, `${block.id}-${item.title}`)) ?? null });
+    case "chart":
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        GdsChart,
+        {
+          type: block.props.chartType ?? "bar",
+          title: String(block.props.title ?? "Chart block"),
+          summary: String(block.props.summary ?? "Block-composed chart summary"),
+          data: block.props.data ?? [{ label: "A", value: 10 }]
+        }
+      );
+    case "cta":
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        ActionBar,
+        {
+          primary: { action: "save" },
+          secondary: [{ action: "cancel" }],
+          tertiary: [{ action: "preview" }]
+        }
+      );
+    case "footer":
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_core66.Text, { size: "sm", c: "dimmed", children: String(block.props.text ?? "Footer block") });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_core66.Alert, { color: "red", children: "Unsupported block type." });
+  }
+}
+function renderGdsLayout(schema) {
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_core66.Stack, { gap: "lg", children: schema.blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { children: renderBlock(block) }, block.id)) });
+}
+
 // src/ReportingSection.tsx
-var import_core61 = require("@mantine/core");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_core67 = require("@mantine/core");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 function ReportingSection({
   title,
   description,
@@ -4151,26 +5090,26 @@ function ReportingSection({
 }) {
   let stateBlock = null;
   if (state === "loading") {
-    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StateBlock, { variant: "loading", title: "Loading report", description: stateMessage ?? "The reporting surface is synchronizing.", compact: true });
+    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(StateBlock, { variant: "loading", title: "Loading report", description: stateMessage ?? "The reporting surface is synchronizing.", compact: true });
   } else if (state === "empty") {
-    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StateBlock, { variant: "empty", title: "No report data", description: stateMessage ?? "No records match this reporting scope yet.", compact: true });
+    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(StateBlock, { variant: "empty", title: "No report data", description: stateMessage ?? "No records match this reporting scope yet.", compact: true });
   } else if (state === "error") {
-    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StateBlock, { variant: "error", title: "Unable to load report", description: stateMessage ?? "The report could not be prepared.", compact: true, action: retryAction });
+    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(StateBlock, { variant: "error", title: "Unable to load report", description: stateMessage ?? "The report could not be prepared.", compact: true, action: retryAction });
   } else if (state === "below-threshold") {
-    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StateBlock, { variant: "not-enough-data", title: "Not enough data", description: stateMessage ?? "This report is hidden until the threshold is met.", compact: true });
+    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(StateBlock, { variant: "not-enough-data", title: "Not enough data", description: stateMessage ?? "This report is hidden until the threshold is met.", compact: true });
   } else if (state === "permission-limited") {
-    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StateBlock, { variant: "permission", title: "Permission-limited report", description: stateMessage ?? "Some evidence is hidden by access rules.", compact: true, action: retryAction });
+    stateBlock = /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(StateBlock, { variant: "permission", title: "Permission-limited report", description: stateMessage ?? "Some evidence is hidden by access rules.", compact: true, action: retryAction });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core61.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_core61.Stack, { gap: "lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_core61.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_core61.Stack, { gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core61.Title, { order: 3, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core61.Text, { size: "sm", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_core67.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_core67.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_core67.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_core67.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_core67.Title, { order: 3, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_core67.Text, { size: "sm", c: "dimmed", children: description }) : null
       ] }),
       action
     ] }),
     periodControl,
-    (state === "partial" || state === "stale" || state === "filtered") && stateMessage ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StateBlock, { variant: "info", title: state === "partial" ? "Partial report" : state === "stale" ? "Stale report" : "Filtered report", description: stateMessage, compact: true }) : null,
+    (state === "partial" || state === "stale" || state === "filtered") && stateMessage ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(StateBlock, { variant: "info", title: state === "partial" ? "Partial report" : state === "stale" ? "Stale report" : "Filtered report", description: stateMessage, compact: true }) : null,
     stateBlock,
     metrics,
     chart,
@@ -4179,6 +5118,190 @@ function ReportingSection({
   ] }) });
 }
 
+// src/Notifications.tsx
+var import_core68 = require("@mantine/core");
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var notificationColorMap = {
+  success: "teal",
+  error: "red",
+  warning: "yellow",
+  info: "blue",
+  neutral: "gray"
+};
+function severityToStateVariant(severity) {
+  if (severity === "success") return "success";
+  if (severity === "error") return "error";
+  if (severity === "warning") return "not-enough-data";
+  if (severity === "neutral") return "disabled";
+  return "info";
+}
+function InlineAlert({
+  title,
+  message,
+  severity = "info",
+  action
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    import_core68.Alert,
+    {
+      variant: "light",
+      color: notificationColorMap[severity],
+      title,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(GdsIcons.Info, { size: "1rem" }),
+      role: severity === "error" ? "alert" : "status",
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_core68.Stack, { gap: "xs", children: [
+        message ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Text, { size: "sm", children: message }) : null,
+        action
+      ] })
+    }
+  );
+}
+function BannerNotice({
+  eyebrow,
+  title,
+  message,
+  severity = "info",
+  action
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_core68.Stack, { gap: "xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_core68.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_core68.Group, { gap: "xs", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Badge, { variant: "light", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Badge, { variant: "light", color: notificationColorMap[severity], children: severityToStateVariant(severity).replace("-", " ") })
+      ] }),
+      action
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Title, { order: 4, children: title }),
+    message ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Text, { size: "sm", c: "dimmed", children: message }) : null
+  ] }) });
+}
+function NotificationCenterView({
+  notifications,
+  onDismiss,
+  onClear,
+  title = "Notifications",
+  emptyMessage = "No active notifications."
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_core68.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_core68.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Button, { size: "xs", variant: "subtle", onClick: onClear, disabled: notifications.length === 0 || !onClear, children: "Clear all" })
+    ] }),
+    notifications.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Text, { size: "sm", c: "dimmed", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Stack, { gap: "sm", children: notifications.map((item) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      InlineAlert,
+      {
+        severity: item.severity,
+        title: item.title,
+        message: item.message,
+        action: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_core68.Group, { gap: "xs", children: [
+          item.actions?.map((action) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Button, { size: "xs", variant: "default", onClick: action.onClick, children: action.label }, action.id)),
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_core68.Button, { size: "xs", variant: "subtle", onClick: () => onDismiss?.(item.id), disabled: !onDismiss, children: "Dismiss" })
+        ] })
+      },
+      item.id
+    )) })
+  ] }) });
+}
+
+// src/Notifications.client.tsx
+var import_react16 = require("react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var GdsNotificationContext = (0, import_react16.createContext)(null);
+function GdsNotificationProvider({ children }) {
+  const [notifications, setNotifications] = (0, import_react16.useState)([]);
+  const value = (0, import_react16.useMemo)(() => ({
+    notifications,
+    notify: (message) => {
+      setNotifications((current) => {
+        const rest = current.filter((item) => item.id !== message.id);
+        return [...rest, message];
+      });
+      if (typeof message.autoCloseMs === "number" && message.autoCloseMs > 0) {
+        window.setTimeout(() => {
+          setNotifications((current) => current.filter((item) => item.id !== message.id));
+        }, message.autoCloseMs);
+      }
+    },
+    dismiss: (id) => {
+      setNotifications((current) => current.filter((item) => item.id !== id));
+    },
+    clear: () => {
+      setNotifications([]);
+    }
+  }), [notifications]);
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(GdsNotificationContext.Provider, { value, children });
+}
+function useGdsNotifications() {
+  const context = (0, import_react16.useContext)(GdsNotificationContext);
+  if (!context) {
+    throw new Error("useGdsNotifications must be used within GdsNotificationProvider.");
+  }
+  return context;
+}
+function NotificationCenter({
+  title = "Notifications",
+  emptyMessage = "No active notifications."
+}) {
+  const { notifications, dismiss, clear } = useGdsNotifications();
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    NotificationCenterView,
+    {
+      title,
+      emptyMessage,
+      notifications,
+      onDismiss: dismiss,
+      onClear: clear
+    }
+  );
+}
+
+// src/Telemetry.client.tsx
+var import_react17 = require("react");
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var GdsTelemetryContext = (0, import_react17.createContext)(null);
+function hashToUnit(value) {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash << 5) - hash + value.charCodeAt(index);
+    hash |= 0;
+  }
+  return Math.abs(hash % 1e3) / 1e3;
+}
+function redactContext(context) {
+  if (!context) {
+    return context;
+  }
+  return Object.entries(context).reduce((acc, [key, value]) => {
+    if (key.toLowerCase().includes("email") || key.toLowerCase().includes("name") || key.toLowerCase().includes("phone")) {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+}
+function GdsTelemetryProvider({ children, sink, sampleRate = 1 }) {
+  const value = (0, import_react17.useMemo)(() => ({
+    emit: (event) => {
+      if (hashToUnit(event.correlationId) > sampleRate) {
+        return;
+      }
+      sink?.({
+        ...event,
+        context: redactContext(event.context),
+        ts: Date.now()
+      });
+    }
+  }), [sampleRate, sink]);
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(GdsTelemetryContext.Provider, { value, children });
+}
+function useGdsTelemetry() {
+  const context = (0, import_react17.useContext)(GdsTelemetryContext);
+  if (!context) {
+    throw new Error("useGdsTelemetry must be used within GdsTelemetryProvider.");
+  }
+  return context;
+}
+
 // src/locales/ar.ts
 var ar = {
   "gds.action.settings": "\u0627\u0644\u0625\u0639\u062F\u0627\u062F\u0627\u062A",
@@ -5487,14 +6610,22 @@ function getGdsMessages(locale) {
   AccessRecoveryPanel,
   AccessSummary,
   ActionBar,
+  ActiveFilterChips,
+  AdvancedDataTable,
   ArticleShell,
+  AsyncSurface,
   AuthShell,
+  BannerNotice,
   BrowseSurface,
+  BulkActionsBar,
   ChartTokenPanel,
   ChoiceChip,
+  CommandPalette,
+  CommandRegistryProvider,
   ConfirmDialog,
   ConsumerDashboardGrid,
   ConsumerSection,
+  CountBadge,
   CtaButtonGroup,
   DataToolbar,
   DetailProfileShell,
@@ -5509,15 +6640,26 @@ function getGdsMessages(locale) {
   FeatureBand,
   FilterDrawer,
   FoodMenuSection,
+  FormErrorSummary,
   FormField,
   GameBoardTile,
+  GdsChart,
+  GdsFormProvider,
   GdsIcons,
+  GdsNotificationProvider,
+  GdsTelemetryProvider,
   GdsVocabulary,
+  InlineAlert,
+  LabelTag,
   ListingCard,
+  ListingProvider,
   MapPanel,
   MediaCard,
   MediaField,
   MetricCard,
+  NotificationCenter,
+  NotificationCenterView,
+  OverlayManagerProvider,
   PROVIDER_IDENTITY_REGISTRY,
   PageHeader,
   PeriodSelector,
@@ -5539,6 +6681,7 @@ function getGdsMessages(locale) {
   ReferenceSection,
   ReferenceThemeExplorer,
   ReportingSection,
+  ResultSummary,
   SectionPanel,
   SemanticButton,
   ShareButtonGroup,
@@ -5547,17 +6690,22 @@ function getGdsMessages(locale) {
   SidebarNavSection,
   SimpleDataTable,
   SocialAuthButtons,
+  SortMenu,
   StateBlock,
   StatsSection,
   StatusBadge,
   ThemeToggle,
   UploadDropzone,
+  ValidatedFieldMessage,
   ar,
   createGdsVocabularyPack,
   de,
   en,
   es,
   fr,
+  gdsCardSizePaddingMap,
+  gdsCardTitleOrderMap,
+  gdsFormReducer,
   gdsLocales,
   getGdsMessages,
   getProviderIdentityLabel,
@@ -5569,9 +6717,19 @@ function getGdsMessages(locale) {
   hu,
   isPresentationMode,
   it,
+  listingQueryReducer,
   mergeGdsVocabularyPacks,
+  renderGdsLayout,
   resolveAccentPanelStyles,
   resolveSemanticActionConfig,
   resolveSurfacePresentationStyles,
-  ru
+  ru,
+  useCommandLauncher,
+  useDiscoveryShellState,
+  useGdsForm,
+  useGdsFormSnapshot,
+  useGdsNotifications,
+  useGdsTelemetry,
+  useListingState,
+  useOverlayManager
 });