@doneisbetter/gds-core 2.6.6 → 3.0.0

package/dist/{chunk-IAP3JU55.mjs → chunk-P7ICTEEB.mjs}

@@ -444,8 +444,51 @@ function ReferenceLinkGrid({
   ] }) }, item.id)) });
 }
 
+// src/SurfacePresentation.ts
+var toCssLength = (value) => {
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+};
+function resolveSurfacePresentationStyles(props) {
+  const {
+    presentation = "inline",
+    minHeight,
+    contentAlign,
+    contentJustify
+  } = props;
+  if (presentation === "inline") {
+    return {
+      minHeight: toCssLength(minHeight)
+    };
+  }
+  const align = contentAlign ?? "center";
+  const justify = contentJustify ?? (presentation === "centered" ? "center" : "start");
+  if (presentation === "fill") {
+    return {
+      minHeight: toCssLength(minHeight),
+      display: "flex",
+      flex: 1,
+      flexDirection: "column",
+      alignItems: align === "center" ? "center" : "flex-start",
+      justifyContent: justify === "center" ? "center" : "flex-start"
+    };
+  }
+  return {
+    minHeight: toCssLength(minHeight),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: align === "center" ? "center" : "flex-start",
+    justifyContent: justify === "center" ? "center" : "flex-start"
+  };
+}
+function isPresentationMode(value) {
+  return value === "inline" || value === "centered" || value === "fill";
+}
+
 // src/SectionPanel.tsx
-import { Divider, Group as Group3, Paper as Paper3, Stack as Stack4, Text as Text4, Title as Title4 } from "@mantine/core";
+import { Box as Box3, Divider, Group as Group3, Paper as Paper3, Stack as Stack4, Text as Text4, Title as Title4 } from "@mantine/core";
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var toneBackgrounds = {
   default: "var(--mantine-color-body)",
@@ -460,8 +503,18 @@ function SectionPanel({
   children,
   tone = "default",
   id,
-  divided = true
+  divided = true,
+  presentation = "inline",
+  minHeight,
+  contentAlign,
+  contentJustify
 }) {
+  const bodyLayout = resolveSurfacePresentationStyles({
+    presentation,
+    minHeight,
+    contentAlign,
+    contentJustify
+  });
   return /* @__PURE__ */ jsx6(Paper3, { id, withBorder: true, radius: "xl", p: "lg", style: { background: toneBackgrounds[tone] }, children: /* @__PURE__ */ jsxs4(Stack4, { gap: "md", children: [
     title || description || action ? /* @__PURE__ */ jsxs4(Fragment, { children: [
       /* @__PURE__ */ jsxs4(Group3, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
@@ -473,7 +526,7 @@ function SectionPanel({
       ] }),
       divided ? /* @__PURE__ */ jsx6(Divider, {}) : null
     ] }) : null,
-    children
+    /* @__PURE__ */ jsx6(Box3, { style: bodyLayout, children })
   ] }) });
 }
 
@@ -567,10 +620,10 @@ function ActionBar({
 }
 
 // src/FormField.tsx
-import { Box as Box3, Stack as Stack7, Text as Text6 } from "@mantine/core";
+import { Box as Box4, Stack as Stack7, Text as Text6 } from "@mantine/core";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function FormField({ label, description, error, children }) {
-  return /* @__PURE__ */ jsx9(Box3, { component: "label", children: /* @__PURE__ */ jsxs7(Stack7, { gap: 4, children: [
+  return /* @__PURE__ */ jsx9(Box4, { component: "label", children: /* @__PURE__ */ jsxs7(Stack7, { gap: 4, children: [
     typeof label === "string" ? /* @__PURE__ */ jsx9(Text6, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
     description ? typeof description === "string" ? /* @__PURE__ */ jsx9(Text6, { size: "xs", c: "dimmed", children: description }) : description : null,
     children,
@@ -698,20 +751,34 @@ function StateBlock({
   description,
   action,
   icon,
-  compact = false
+  compact = false,
+  presentation = "inline",
+  minHeight,
+  contentAlign,
+  contentJustify
 }) {
   const config = variantConfig[variant];
+  const layout = resolveSurfacePresentationStyles({
+    presentation,
+    minHeight,
+    contentAlign,
+    contentJustify
+  });
+  const centeredText = presentation !== "inline" ? (contentAlign ?? "center") === "center" : !compact;
+  const centeredAlign = presentation !== "inline" ? contentAlign ?? "center" : "start";
+  const headingAlign = presentation === "inline" ? compact ? "flex-start" : "center" : centeredAlign === "center" ? "center" : "flex-start";
   return /* @__PURE__ */ jsxs9(
     Stack9,
     {
-      align: compact ? "flex-start" : "center",
-      justify: "center",
+      align: headingAlign,
+      justify: presentation === "inline" ? "center" : void 0,
       gap: "md",
       py: compact ? "md" : "xl",
-      ta: compact ? "left" : "center",
+      ta: centeredText ? "center" : "left",
+      style: layout,
       children: [
         /* @__PURE__ */ jsx11(ThemeIcon2, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
-        /* @__PURE__ */ jsxs9(Stack9, { gap: 6, align: compact ? "flex-start" : "center", children: [
+        /* @__PURE__ */ jsxs9(Stack9, { gap: 6, align: headingAlign, children: [
           /* @__PURE__ */ jsx11(Title6, { order: compact ? 4 : 3, children: title }),
           description ? /* @__PURE__ */ jsx11(Text8, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
         ] }),
@@ -849,7 +916,7 @@ function ConsumerDashboardGrid({
 }
 
 // src/EditorialCard.tsx
-import { Anchor as Anchor3, AspectRatio as AspectRatio2, Badge as Badge7, Box as Box4, Card as Card4, Group as Group9, Stack as Stack12, Text as Text11, Title as Title9 } from "@mantine/core";
+import { Anchor as Anchor3, AspectRatio as AspectRatio2, Badge as Badge7, Box as Box5, Card as Card4, Group as Group9, Stack as Stack12, Text as Text11, Title as Title9 } from "@mantine/core";
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var tonePalette = {
   default: {
@@ -871,7 +938,7 @@ var tonePalette = {
 };
 function EditorialMediaFallback({ compact }) {
   return /* @__PURE__ */ jsx17(AspectRatio2, { ratio: compact ? 16 / 10 : 4 / 3, children: /* @__PURE__ */ jsx17(
-    Box4,
+    Box5,
     {
       style: {
         display: "grid",
@@ -1219,7 +1286,7 @@ function PublicFoodCard({
 }
 
 // src/FoodMenuSection.tsx
-import { Box as Box5, Group as Group13, SimpleGrid as SimpleGrid3, Stack as Stack16, Text as Text15, Title as Title13 } from "@mantine/core";
+import { Box as Box6, Group as Group13, SimpleGrid as SimpleGrid3, Stack as Stack16, Text as Text15, Title as Title13 } from "@mantine/core";
 import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 function FoodMenuSection({
   title,
@@ -1243,7 +1310,7 @@ function FoodMenuSection({
       }
     );
   }
-  return /* @__PURE__ */ jsx21(Box5, { component: "section", "aria-label": typeof title === "string" ? title : "Food menu section", children: /* @__PURE__ */ jsxs16(Stack16, { gap: "xl", children: [
+  return /* @__PURE__ */ jsx21(Box6, { component: "section", "aria-label": typeof title === "string" ? title : "Food menu section", children: /* @__PURE__ */ jsxs16(Stack16, { gap: "xl", children: [
     /* @__PURE__ */ jsxs16(Group13, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
       /* @__PURE__ */ jsxs16(Stack16, { gap: 4, children: [
         eyebrow ? /* @__PURE__ */ jsx21(Text15, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
@@ -1308,7 +1375,7 @@ function DataToolbar({
 }
 
 // src/BrowseSurface.tsx
-import { Badge as Badge12, Box as Box6, Button as Button2, Group as Group15, Paper as Paper4, SimpleGrid as SimpleGrid4, Stack as Stack18, Text as Text16, Title as Title14 } from "@mantine/core";
+import { Badge as Badge12, Box as Box7, Button as Button2, Group as Group15, Paper as Paper4, SimpleGrid as SimpleGrid4, Stack as Stack18, Text as Text16, Title as Title14 } from "@mantine/core";
 import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 function BrowseSurface({
   eyebrow,
@@ -1392,7 +1459,7 @@ function BrowseSurface({
             ...toolbar,
             activeFilters: toolbarFilters.length ? toolbarFilters : toolbar.fallbackActiveFilters
           }
-        ) : /* @__PURE__ */ jsx23(Box6, {}),
+        ) : /* @__PURE__ */ jsx23(Box7, {}),
         sortControl ? /* @__PURE__ */ jsxs18(Stack18, { gap: "xs", align: "stretch", children: [
           /* @__PURE__ */ jsx23(Text16, { size: "sm", fw: 600, c: "dimmed", children: "Sort" }),
           sortControl
@@ -1402,7 +1469,7 @@ function BrowseSurface({
         /* @__PURE__ */ jsx23(Text16, { size: "sm", fw: 600, c: "dimmed", children: "Filters" }),
         mobileFilters
       ] }) : null,
-      filterDrawer ? /* @__PURE__ */ jsx23(Box6, { hiddenFrom: "lg", children: filterDrawer }) : null,
+      filterDrawer ? /* @__PURE__ */ jsx23(Box7, { hiddenFrom: "lg", children: filterDrawer }) : null,
       activeFilters.length ? /* @__PURE__ */ jsx23(Group15, { gap: "xs", wrap: "wrap", children: activeFilters.map((filter) => /* @__PURE__ */ jsx23(
         Badge12,
         {
@@ -1474,16 +1541,16 @@ function PublicNav({ items, activeId, renderLink }) {
 }
 
 // src/PublicShell.tsx
-import { AppShell, Box as Box7, Burger, Container, Group as Group17, Stack as Stack20, Text as Text17 } from "@mantine/core";
+import { AppShell, Box as Box8, Burger, Container, Group as Group17, Stack as Stack20, Text as Text17 } from "@mantine/core";
 import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function InlineMobileNavigation({
   mobileNavigation,
   className,
   mode
 }) {
-  return /* @__PURE__ */ jsxs20(Box7, { component: "details", hiddenFrom: "sm", className, children: [
+  return /* @__PURE__ */ jsxs20(Box8, { component: "details", hiddenFrom: "sm", className, children: [
     /* @__PURE__ */ jsxs20(
-      Box7,
+      Box8,
       {
         component: "summary",
         "aria-label": mode === "drawer" ? "Open site navigation drawer" : "Open site navigation",
@@ -1501,7 +1568,7 @@ function InlineMobileNavigation({
       }
     ),
     /* @__PURE__ */ jsx26(
-      Box7,
+      Box8,
       {
         mt: "sm",
         p: "sm",
@@ -1562,7 +1629,7 @@ function PublicShell({
                     mode: mobileNavigationMode
                   }
                 ) : null,
-                /* @__PURE__ */ jsx26(Box7, { children: brand })
+                /* @__PURE__ */ jsx26(Box8, { children: brand })
               ] }),
               /* @__PURE__ */ jsx26(Group17, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
               /* @__PURE__ */ jsx26(Group17, { gap: "sm", className: classNames?.actions, children: actions })
@@ -1572,7 +1639,7 @@ function PublicShell({
         usesSheetMobileNavigation ? /* @__PURE__ */ jsx26(AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ jsx26(Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ jsx26(Group17, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
         /* @__PURE__ */ jsxs20(AppShell.Main, { children: [
           /* @__PURE__ */ jsx26(Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ jsx26(Stack20, { gap: "xl", children }) }),
-          footer ? /* @__PURE__ */ jsx26(Box7, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ jsx26(Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ jsx26(Text17, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
+          footer ? /* @__PURE__ */ jsx26(Box8, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ jsx26(Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ jsx26(Text17, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
         ] })
       ]
     }
@@ -1590,7 +1657,7 @@ function PublicSiteFooter({ children, meta }) {
 }
 
 // src/PublicBrandFooter.tsx
-import { Box as Box8, Divider as Divider3, Grid, Group as Group19, Paper as Paper6, Stack as Stack22, Text as Text19, Title as Title15 } from "@mantine/core";
+import { Box as Box9, Divider as Divider3, Grid, Group as Group19, Paper as Paper6, Stack as Stack22, Text as Text19, Title as Title15 } from "@mantine/core";
 import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 function PublicBrandFooter({
   media,
@@ -1617,11 +1684,11 @@ function PublicBrandFooter({
       "data-layout-variant": layoutVariant,
       children: /* @__PURE__ */ jsxs22(Stack22, { gap: "lg", children: [
         /* @__PURE__ */ jsxs22(Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
-          media ? /* @__PURE__ */ jsx28(Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ jsx28(Box8, { className: classNames?.media, children: media }) }) : null,
+          media ? /* @__PURE__ */ jsx28(Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ jsx28(Box9, { className: classNames?.media, children: media }) }) : null,
           /* @__PURE__ */ jsx28(Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ jsxs22(Stack22, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
             brandTitle ? /* @__PURE__ */ jsx28(Title15, { order: 4, children: brandTitle }) : null,
             description ? /* @__PURE__ */ jsx28(Text19, { c: "dimmed", children: description }) : null,
-            actions ? /* @__PURE__ */ jsx28(Box8, { children: actions }) : null
+            actions ? /* @__PURE__ */ jsx28(Box9, { children: actions }) : null
           ] }) }),
           secondary ? /* @__PURE__ */ jsx28(Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ jsx28(Stack22, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
         ] }),
@@ -1635,78 +1702,237 @@ function PublicBrandFooter({
 }
 
 // src/AuthShell.tsx
-import { Box as Box9, Card as Card8, Container as Container2, Divider as Divider4, Group as Group20, Stack as Stack23, Text as Text20, Title as Title16 } from "@mantine/core";
+import { Alert, Badge as Badge13, Box as Box10, Card as Card8, Container as Container2, Divider as Divider4, Group as Group20, Stack as Stack23, Text as Text20, Title as Title16 } from "@mantine/core";
 import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 function AuthShell({
   title,
   description,
+  intent = "sign-in",
   brand,
   headerActions,
   footer,
   helper,
+  error,
+  guestAction,
+  supportAction,
   socialAuth,
   dividerLabel = "Or continue with your account",
   children
 }) {
-  return /* @__PURE__ */ jsx29(Box9, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ jsx29(Container2, { size: "xs", children: /* @__PURE__ */ jsxs23(Stack23, { gap: "xl", children: [
+  return /* @__PURE__ */ jsx29(Box10, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ jsx29(Container2, { size: "xs", children: /* @__PURE__ */ jsxs23(Stack23, { gap: "xl", children: [
     brand || headerActions ? /* @__PURE__ */ jsxs23(Group20, { justify: brand && headerActions ? "space-between" : "center", align: "center", children: [
-      brand ? /* @__PURE__ */ jsx29(Box9, { children: brand }) : /* @__PURE__ */ jsx29(Box9, {}),
+      brand ? /* @__PURE__ */ jsx29(Box10, { children: brand }) : /* @__PURE__ */ jsx29(Box10, {}),
       headerActions ? /* @__PURE__ */ jsx29(Group20, { gap: "sm", children: headerActions }) : null
     ] }) : null,
     /* @__PURE__ */ jsx29(Card8, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ jsxs23(Stack23, { gap: "lg", children: [
       /* @__PURE__ */ jsxs23(Stack23, { gap: "xs", ta: "center", children: [
+        /* @__PURE__ */ jsx29(Group20, { justify: "center", children: /* @__PURE__ */ jsx29(Badge13, { variant: "light", color: intent === "account-linking" ? "blue" : intent === "guest-entry" ? "gray" : "teal", children: intent.replace("-", " ") }) }),
         /* @__PURE__ */ jsx29(Title16, { order: 2, children: title }),
         description ? /* @__PURE__ */ jsx29(Text20, { c: "dimmed", size: "sm", children: description }) : null
       ] }),
-      socialAuth ? /* @__PURE__ */ jsx29(Box9, { children: socialAuth }) : null,
+      error ? /* @__PURE__ */ jsx29(Alert, { color: "red", variant: "light", role: "alert", children: error }) : null,
+      socialAuth ? /* @__PURE__ */ jsx29(Box10, { children: socialAuth }) : null,
       socialAuth ? /* @__PURE__ */ jsx29(Divider4, { label: dividerLabel, labelPosition: "center" }) : null,
       children,
+      guestAction || supportAction ? /* @__PURE__ */ jsxs23(Group20, { justify: "center", gap: "sm", children: [
+        guestAction,
+        supportAction
+      ] }) : null,
       helper ? /* @__PURE__ */ jsx29(Text20, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
     ] }) }),
     footer ? /* @__PURE__ */ jsx29(Text20, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
   ] }) }) });
 }
 
-// src/SocialAuthButtons.tsx
-import { Button as Button3, Divider as Divider5, Group as Group21, SimpleGrid as SimpleGrid5, Stack as Stack24, Text as Text21, ThemeIcon as ThemeIcon7 } from "@mantine/core";
+// src/ProviderIdentityButtons.tsx
+import { Button as Button3, SimpleGrid as SimpleGrid5, Stack as Stack24, Text as Text21, ThemeIcon as ThemeIcon7 } from "@mantine/core";
 import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
-var providerConfig = {
-  google: { label: "Google", mark: "G", color: "red" },
-  apple: { label: "Apple", mark: "A", color: "dark" },
-  github: { label: "GitHub", mark: "GH", color: "gray" },
-  facebook: { label: "Facebook", mark: "F", color: "blue" },
-  microsoft: { label: "Microsoft", mark: "M", color: "cyan" },
-  linkedin: { label: "LinkedIn", mark: "in", color: "blue" },
-  discord: { label: "Discord", mark: "D", color: "indigo" },
-  x: { label: "X", mark: "X", color: "dark" },
-  email: { label: "Email", mark: "@", color: "gray" }
+var PROVIDER_IDENTITY_REGISTRY = {
+  google: {
+    providerLabel: "Google",
+    markLabel: "G",
+    brandColor: "red"
+  },
+  apple: {
+    providerLabel: "Apple",
+    markLabel: "A",
+    brandColor: "dark"
+  },
+  github: {
+    providerLabel: "GitHub",
+    markLabel: "GH",
+    brandColor: "gray"
+  },
+  facebook: {
+    providerLabel: "Facebook",
+    markLabel: "F",
+    brandColor: "blue"
+  },
+  microsoft: {
+    providerLabel: "Microsoft",
+    markLabel: "M",
+    brandColor: "cyan"
+  },
+  linkedin: {
+    providerLabel: "LinkedIn",
+    markLabel: "in",
+    brandColor: "blue"
+  },
+  discord: {
+    providerLabel: "Discord",
+    markLabel: "D",
+    brandColor: "indigo"
+  },
+  x: {
+    providerLabel: "X",
+    markLabel: "X",
+    brandColor: "dark"
+  },
+  email: {
+    providerLabel: "Email",
+    markLabel: "@",
+    brandColor: "gray"
+  }
 };
-function ProviderMark({ id }) {
-  const config = providerConfig[id] ?? { label: id, mark: id.slice(0, 2).toUpperCase(), color: "gray" };
-  return /* @__PURE__ */ jsx30(ThemeIcon7, { variant: "light", color: config.color, radius: "xl", size: "md", "aria-hidden": "true", children: /* @__PURE__ */ jsx30(Text21, { size: "xs", fw: 700, children: config.mark }) });
-}
-function SocialAuthButton({ provider, compact = false }) {
-  const config = providerConfig[provider.id] ?? { label: provider.id, mark: provider.id.slice(0, 2).toUpperCase(), color: "gray" };
-  const label = provider.label ?? `Continue with ${config.label}`;
-  const buttonProps = provider.href ? { component: "a", href: provider.href } : { onClick: provider.onClick };
+function normalizeProviderId(provider) {
+  return (provider ?? "").trim().toLowerCase();
+}
+function isSupportedProviderId(provider) {
+  return provider in PROVIDER_IDENTITY_REGISTRY;
+}
+function getProviderIdentityMeta(provider) {
+  const normalized = normalizeProviderId(provider);
+  if (isSupportedProviderId(normalized)) {
+    return {
+      id: normalized,
+      supported: true,
+      ...PROVIDER_IDENTITY_REGISTRY[normalized]
+    };
+  }
+  return {
+    id: normalized || "provider",
+    supported: false,
+    providerLabel: provider ? provider : "Provider",
+    markLabel: (provider ?? "PR").slice(0, 2).toUpperCase(),
+    brandColor: "gray"
+  };
+}
+function resolveProviderLabel(provider, customLabel) {
+  const meta = getProviderIdentityMeta(provider);
+  if (customLabel != null) {
+    return customLabel;
+  }
+  return `Continue with ${meta.providerLabel}`;
+}
+function mapVariant(variant = "neutral") {
+  if (variant === "solid") {
+    return "filled";
+  }
+  if (variant === "outline") {
+    return "outline";
+  }
+  return "default";
+}
+function getProviderIdentityLabel(provider, fallbackOverride) {
+  return resolveProviderLabel(provider, fallbackOverride);
+}
+function getSupportedProviderIdentityIds() {
+  return Object.keys(PROVIDER_IDENTITY_REGISTRY);
+}
+function getProviderIdentityPolicy(provider) {
+  const meta = getProviderIdentityMeta(provider);
+  return {
+    id: meta.id,
+    supported: meta.supported,
+    providerLabel: meta.providerLabel,
+    colorAuthority: meta.supported ? "provider" : "gds-neutral",
+    minTouchTargetPx: 44,
+    allowedVariants: ["solid", "outline", "neutral"]
+  };
+}
+function ProviderIdentityMark({ provider }) {
+  const meta = getProviderIdentityMeta(provider);
+  return /* @__PURE__ */ jsx30(
+    ThemeIcon7,
+    {
+      variant: "light",
+      color: meta.brandColor,
+      radius: "xl",
+      size: "md",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx30(Text21, { size: "xs", fw: 700, c: "inherit", children: meta.markLabel })
+    }
+  );
+}
+function ProviderIdentityButton({
+  provider,
+  label,
+  description,
+  policyNote,
+  error,
+  href,
+  onClick,
+  disabled,
+  loading,
+  tenantDisabledReason,
+  fullWidth = true,
+  size = "md",
+  variant = "neutral",
+  ariaLabel,
+  describedBy,
+  minTouchTargetPx = 44
+}) {
+  const meta = getProviderIdentityMeta(provider);
+  const buttonLabel = resolveProviderLabel(provider, label);
+  const resolvedDisabled = disabled || Boolean(tenantDisabledReason);
+  const buttonProps = href ? {
+    component: "a",
+    href
+  } : {
+    onClick
+  };
   return /* @__PURE__ */ jsx30(
     Button3,
     {
-      variant: "default",
+      variant: mapVariant(variant),
+      color: variant === "solid" ? meta.brandColor : void 0,
       justify: "space-between",
-      fullWidth: true,
-      size: compact ? "sm" : "md",
-      leftSection: /* @__PURE__ */ jsx30(ProviderMark, { id: provider.id }),
-      disabled: provider.disabled,
-      loading: provider.loading,
+      fullWidth,
+      size,
+      "aria-label": ariaLabel ?? (typeof buttonLabel === "string" ? buttonLabel : void 0),
+      "aria-describedby": describedBy,
+      leftSection: /* @__PURE__ */ jsx30(ProviderIdentityMark, { provider }),
+      disabled: resolvedDisabled,
+      loading,
+      styles: { root: { minHeight: minTouchTargetPx } },
       ...buttonProps,
       children: /* @__PURE__ */ jsxs24(Stack24, { gap: 0, align: "flex-start", children: [
-        /* @__PURE__ */ jsx30(Text21, { inherit: true, children: label }),
-        provider.description ? /* @__PURE__ */ jsx30(Text21, { size: "xs", c: "dimmed", lh: 1.2, children: provider.description }) : null
+        /* @__PURE__ */ jsx30(Text21, { inherit: true, children: buttonLabel }),
+        description ? /* @__PURE__ */ jsx30(Text21, { size: "xs", c: "dimmed", lh: 1.2, children: description }) : null,
+        policyNote ? /* @__PURE__ */ jsx30(Text21, { size: "xs", c: "dimmed", lh: 1.2, children: policyNote }) : null,
+        tenantDisabledReason ? /* @__PURE__ */ jsx30(Text21, { size: "xs", c: "orange.7", lh: 1.2, children: tenantDisabledReason }) : null,
+        error ? /* @__PURE__ */ jsx30(Text21, { size: "xs", c: "red.7", lh: 1.2, role: "alert", children: error }) : null
       ] })
     }
   );
 }
+function ProviderIdentityButtonGroup({ providers, layout = "stack" }) {
+  if (!providers.length) {
+    return null;
+  }
+  const content = providers.map((entry, index) => {
+    const key = `${normalizeProviderId(String(entry.provider)) || "provider"}-${index}`;
+    return /* @__PURE__ */ jsx30(ProviderIdentityButton, { ...entry }, key);
+  });
+  if (layout === "grid") {
+    return /* @__PURE__ */ jsx30(SimpleGrid5, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content });
+  }
+  return /* @__PURE__ */ jsx30(Stack24, { gap: "sm", children: content });
+}
+
+// src/SocialAuthButtons.tsx
+import { Divider as Divider5, Group as Group21, Stack as Stack25, Text as Text22 } from "@mantine/core";
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 function SocialAuthButtons({
   providers,
   title = "Continue with a trusted provider",
@@ -1717,54 +1943,67 @@ function SocialAuthButtons({
   if (!providers.length) {
     return null;
   }
-  const content = providers.map((provider) => /* @__PURE__ */ jsx30(SocialAuthButton, { provider, compact }, provider.id));
-  return /* @__PURE__ */ jsxs24(Stack24, { gap: "md", children: [
-    /* @__PURE__ */ jsxs24(Stack24, { gap: 4, ta: "center", children: [
-      /* @__PURE__ */ jsxs24(Group21, { justify: "center", gap: "xs", children: [
-        /* @__PURE__ */ jsx30(GdsIcons.Login, { size: "1rem" }),
-        /* @__PURE__ */ jsx30(Text21, { fw: 600, children: title })
+  const buttons = providers.map((provider) => ({
+    provider: provider.id,
+    label: provider.label,
+    description: provider.description,
+    policyNote: provider.policyNote,
+    error: provider.error,
+    href: provider.href,
+    onClick: provider.onClick,
+    disabled: provider.disabled,
+    loading: provider.loading,
+    tenantDisabledReason: provider.tenantDisabledReason,
+    size: provider.size ?? (compact ? "sm" : "md"),
+    variant: provider.variant
+  }));
+  return /* @__PURE__ */ jsxs25(Stack25, { gap: "md", children: [
+    /* @__PURE__ */ jsxs25(Stack25, { gap: 4, ta: "center", children: [
+      /* @__PURE__ */ jsxs25(Group21, { justify: "center", gap: "xs", children: [
+        /* @__PURE__ */ jsx31(GdsIcons.Login, { size: "1rem" }),
+        /* @__PURE__ */ jsx31(Text22, { fw: 600, children: title })
       ] }),
-      description ? /* @__PURE__ */ jsx30(Text21, { size: "sm", c: "dimmed", children: description }) : null
+      description ? /* @__PURE__ */ jsx31(Text22, { size: "sm", c: "dimmed", children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx30(Divider5, {}),
-    layout === "grid" ? /* @__PURE__ */ jsx30(SimpleGrid5, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content }) : /* @__PURE__ */ jsx30(Stack24, { gap: "sm", children: content })
+    /* @__PURE__ */ jsx31(Divider5, {}),
+    /* @__PURE__ */ jsx31(ProviderIdentityButtonGroup, { providers: buttons, layout })
   ] });
 }
 
 // src/ArticleShell.tsx
-import { Container as Container3, Group as Group22, Stack as Stack25, Text as Text22, Title as Title17 } from "@mantine/core";
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Container as Container3, Group as Group22, Stack as Stack26, Text as Text23, Title as Title17 } from "@mantine/core";
+import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 function ArticleShell({ eyebrow, title, lead, meta, sideRail, children }) {
-  return /* @__PURE__ */ jsx31(Container3, { size: "lg", py: "xl", children: /* @__PURE__ */ jsxs25(Group22, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsxs25(Stack25, { gap: "lg", maw: 760, flex: 1, children: [
-      /* @__PURE__ */ jsxs25(Stack25, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ jsx31(Text22, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
-        /* @__PURE__ */ jsx31(Title17, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ jsx31(Text22, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ jsx31(Group22, { gap: "md", children: meta }) : null
+  return /* @__PURE__ */ jsx32(Container3, { size: "lg", py: "xl", children: /* @__PURE__ */ jsxs26(Group22, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsxs26(Stack26, { gap: "lg", maw: 760, flex: 1, children: [
+      /* @__PURE__ */ jsxs26(Stack26, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ jsx32(Text23, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx32(Title17, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ jsx32(Text23, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ jsx32(Group22, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ jsx31(Stack25, { gap: "md", children })
+      /* @__PURE__ */ jsx32(Stack26, { gap: "md", children })
     ] }),
-    sideRail ? /* @__PURE__ */ jsx31(Stack25, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ jsx32(Stack26, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/CtaButtonGroup.tsx
-import { Group as Group23, Stack as Stack26 } from "@mantine/core";
-import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Group as Group23, Stack as Stack27 } from "@mantine/core";
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 function CtaButtonGroup({ primary, secondary, tertiary }) {
-  return /* @__PURE__ */ jsxs26(Stack26, { gap: "sm", children: [
-    /* @__PURE__ */ jsxs26(Group23, { gap: "sm", align: "stretch", children: [
-      /* @__PURE__ */ jsx32("div", { children: primary }),
-      secondary ? /* @__PURE__ */ jsx32("div", { children: secondary }) : null
+  return /* @__PURE__ */ jsxs27(Stack27, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs27(Group23, { gap: "sm", align: "stretch", children: [
+      /* @__PURE__ */ jsx33("div", { children: primary }),
+      secondary ? /* @__PURE__ */ jsx33("div", { children: secondary }) : null
     ] }),
-    tertiary ? /* @__PURE__ */ jsx32("div", { children: tertiary }) : null
+    tertiary ? /* @__PURE__ */ jsx33("div", { children: tertiary }) : null
   ] });
 }
 
 // src/DocsPageShell.tsx
-import { Anchor as Anchor5, Breadcrumbs, Container as Container4, Group as Group24, Stack as Stack27, Text as Text23, Title as Title18 } from "@mantine/core";
-import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Anchor as Anchor5, Breadcrumbs, Container as Container4, Group as Group24, Stack as Stack28, Text as Text24, Title as Title18 } from "@mantine/core";
+import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
 function DocsPageShell({
   breadcrumbs = [],
   title,
@@ -1775,27 +2014,27 @@ function DocsPageShell({
   footerNext,
   children
 }) {
-  return /* @__PURE__ */ jsx33(Container4, { fluid: true, py: "xl", px: "xl", children: /* @__PURE__ */ jsxs27(Group24, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsxs27(Stack27, { component: "article", gap: "lg", flex: 1, miw: 0, children: [
-      breadcrumbs.length ? /* @__PURE__ */ jsx33(Breadcrumbs, { children: breadcrumbs.map(
-        (crumb) => crumb.href ? /* @__PURE__ */ jsx33(Anchor5, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ jsx33(Text23, { children: crumb.label }, crumb.label)
+  return /* @__PURE__ */ jsx34(Container4, { fluid: true, py: "xl", px: { base: "md", md: "lg", lg: "xl" }, w: "100%", maw: "100%", children: /* @__PURE__ */ jsxs28(Group24, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsxs28(Stack28, { component: "article", gap: "lg", flex: 1, miw: 0, children: [
+      breadcrumbs.length ? /* @__PURE__ */ jsx34(Breadcrumbs, { children: breadcrumbs.map(
+        (crumb) => crumb.href ? /* @__PURE__ */ jsx34(Anchor5, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ jsx34(Text24, { children: crumb.label }, crumb.label)
       ) }) : null,
-      /* @__PURE__ */ jsxs27(Stack27, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ jsx33(Text23, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
-        /* @__PURE__ */ jsx33(Title18, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ jsx33(Text23, { size: "lg", c: "dimmed", maw: 920, children: lead }) : null,
-        meta ? /* @__PURE__ */ jsx33(Group24, { gap: "md", children: meta }) : null
+      /* @__PURE__ */ jsxs28(Stack28, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ jsx34(Text24, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx34(Title18, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ jsx34(Text24, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ jsx34(Group24, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ jsx33(Stack27, { gap: "md", children }),
-      footerNext ? /* @__PURE__ */ jsx33(Anchor5, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
+      /* @__PURE__ */ jsx34(Stack28, { gap: "md", children }),
+      footerNext ? /* @__PURE__ */ jsx34(Anchor5, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
     ] }),
-    sideRail ? /* @__PURE__ */ jsx33(Stack27, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ jsx34(Stack28, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/EditorialHero.tsx
-import { Anchor as Anchor6, AspectRatio as AspectRatio5, Box as Box10, Grid as Grid2, Group as Group25, Paper as Paper7, Skeleton as Skeleton3, Stack as Stack28, Text as Text24, ThemeIcon as ThemeIcon8, Title as Title19 } from "@mantine/core";
-import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Anchor as Anchor6, AspectRatio as AspectRatio5, Box as Box11, Grid as Grid2, Group as Group25, Paper as Paper7, Skeleton as Skeleton3, Stack as Stack29, Text as Text25, ThemeIcon as ThemeIcon8, Title as Title19 } from "@mantine/core";
+import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
 function resolveActionVariant(action, index, seenPrimary) {
   const requested = action.variant ?? (index === 0 ? "primary" : "secondary");
   if (requested === "primary" && !seenPrimary) {
@@ -1807,7 +2046,7 @@ function resolveActionVariant(action, index, seenPrimary) {
   return { variant: "default", seenPrimary };
 }
 function HeroAction({ action, variant }) {
-  const content = /* @__PURE__ */ jsx34(
+  const content = /* @__PURE__ */ jsx35(
     Anchor6,
     {
       href: action.href,
@@ -1832,8 +2071,8 @@ function HeroAction({ action, variant }) {
     }
   );
   if (!action.href) {
-    return /* @__PURE__ */ jsx34(
-      Box10,
+    return /* @__PURE__ */ jsx35(
+      Box11,
       {
         component: "button",
         type: "button",
@@ -1860,22 +2099,22 @@ function HeroAction({ action, variant }) {
   return content;
 }
 function LoadingHero({ compact }) {
-  return /* @__PURE__ */ jsx34(Paper7, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ jsxs28(Grid2, { gutter: compact ? "lg" : "xl", align: "center", children: [
-    /* @__PURE__ */ jsx34(Grid2.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ jsxs28(Stack28, { gap: "md", children: [
-      /* @__PURE__ */ jsx34(Skeleton3, { height: 16, width: 96, radius: "xl" }),
-      /* @__PURE__ */ jsx34(Skeleton3, { height: 48, width: "90%", radius: "md" }),
-      /* @__PURE__ */ jsx34(Skeleton3, { height: 18, width: "100%", radius: "md" }),
-      /* @__PURE__ */ jsx34(Skeleton3, { height: 18, width: "82%", radius: "md" }),
-      /* @__PURE__ */ jsxs28(Group25, { children: [
-        /* @__PURE__ */ jsx34(Skeleton3, { height: 40, width: 140, radius: "md" }),
-        /* @__PURE__ */ jsx34(Skeleton3, { height: 40, width: 140, radius: "md" })
+  return /* @__PURE__ */ jsx35(Paper7, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ jsxs29(Grid2, { gutter: compact ? "lg" : "xl", align: "center", children: [
+    /* @__PURE__ */ jsx35(Grid2.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ jsxs29(Stack29, { gap: "md", children: [
+      /* @__PURE__ */ jsx35(Skeleton3, { height: 16, width: 96, radius: "xl" }),
+      /* @__PURE__ */ jsx35(Skeleton3, { height: 48, width: "90%", radius: "md" }),
+      /* @__PURE__ */ jsx35(Skeleton3, { height: 18, width: "100%", radius: "md" }),
+      /* @__PURE__ */ jsx35(Skeleton3, { height: 18, width: "82%", radius: "md" }),
+      /* @__PURE__ */ jsxs29(Group25, { children: [
+        /* @__PURE__ */ jsx35(Skeleton3, { height: 40, width: 140, radius: "md" }),
+        /* @__PURE__ */ jsx35(Skeleton3, { height: 40, width: 140, radius: "md" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx34(Grid2.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ jsx34(AspectRatio5, { ratio: 16 / 11, children: /* @__PURE__ */ jsx34(Skeleton3, { radius: "lg" }) }) })
+    /* @__PURE__ */ jsx35(Grid2.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ jsx35(AspectRatio5, { ratio: 16 / 11, children: /* @__PURE__ */ jsx35(Skeleton3, { radius: "lg" }) }) })
   ] }) });
 }
 function MediaFallback() {
-  return /* @__PURE__ */ jsx34(AspectRatio5, { ratio: 16 / 11, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(AspectRatio5, { ratio: 16 / 11, children: /* @__PURE__ */ jsx35(
     ThemeIcon8,
     {
       size: "100%",
@@ -1883,7 +2122,7 @@ function MediaFallback() {
       color: "gray",
       variant: "light",
       "aria-label": "Hero media is unavailable",
-      children: /* @__PURE__ */ jsx34(GdsIcons.Gallery, { size: "2.5rem" })
+      children: /* @__PURE__ */ jsx35(GdsIcons.Gallery, { size: "2.5rem" })
     }
   ) });
 }
@@ -1903,8 +2142,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__ */ jsxs28(
-    Box10,
+  return /* @__PURE__ */ jsxs29(
+    Box11,
     {
       component: "figure",
       m: 0,
@@ -1917,9 +2156,9 @@ function MediaFrame({
       },
       "aria-label": mediaAlt,
       children: [
-        media ?? /* @__PURE__ */ jsx34(MediaFallback, {}),
-        media && overlayBackground ? /* @__PURE__ */ jsx34(
-          Box10,
+        media ?? /* @__PURE__ */ jsx35(MediaFallback, {}),
+        media && overlayBackground ? /* @__PURE__ */ jsx35(
+          Box11,
           {
             "aria-hidden": true,
             style: {
@@ -1952,7 +2191,7 @@ function EditorialHero({
   classNames
 }) {
   if (loading) {
-    return /* @__PURE__ */ jsx34(LoadingHero, { compact });
+    return /* @__PURE__ */ jsx35(LoadingHero, { compact });
   }
   const stackAlign = align === "center" ? "center" : "flex-start";
   const textAlign = align === "center" ? "center" : "left";
@@ -1960,15 +2199,15 @@ function EditorialHero({
   const renderedActions = actions.slice(0, 3).map((action, index) => {
     const resolved = resolveActionVariant(action, index, seenPrimary);
     seenPrimary = resolved.seenPrimary;
-    return /* @__PURE__ */ jsx34(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
+    return /* @__PURE__ */ jsx35(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
   });
-  const textSlot = /* @__PURE__ */ jsxs28(Stack28, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
-    /* @__PURE__ */ jsxs28(Stack28, { gap: "sm", align: stackAlign, children: [
-      eyebrow ? /* @__PURE__ */ jsx34(Text24, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
-      /* @__PURE__ */ jsx34(Title19, { order: 1, maw: 760, ta: textAlign, children: title }),
-      description ? /* @__PURE__ */ jsx34(Text24, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
+  const textSlot = /* @__PURE__ */ jsxs29(Stack29, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
+    /* @__PURE__ */ jsxs29(Stack29, { gap: "sm", align: stackAlign, children: [
+      eyebrow ? /* @__PURE__ */ jsx35(Text25, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
+      /* @__PURE__ */ jsx35(Title19, { order: 1, maw: 760, ta: textAlign, children: title }),
+      description ? /* @__PURE__ */ jsx35(Text25, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
     ] }),
-    renderedActions.length ? /* @__PURE__ */ jsx34(Box10, { className: classNames?.actions, children: /* @__PURE__ */ jsx34(
+    renderedActions.length ? /* @__PURE__ */ jsx35(Box11, { className: classNames?.actions, children: /* @__PURE__ */ jsx35(
       CtaButtonGroup,
       {
         primary: renderedActions[0],
@@ -1976,7 +2215,7 @@ function EditorialHero({
         tertiary: renderedActions[2]
       }
     ) }) : null,
-    meta.length ? /* @__PURE__ */ jsx34(Group25, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ jsxs28(
+    meta.length ? /* @__PURE__ */ jsx35(Group25, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ jsxs29(
       Group25,
       {
         gap: 6,
@@ -1988,16 +2227,16 @@ function EditorialHero({
         },
         children: [
           item.icon,
-          /* @__PURE__ */ jsx34(Text24, { size: "sm", c: "dimmed", children: item.label })
+          /* @__PURE__ */ jsx35(Text25, { size: "sm", c: "dimmed", children: item.label })
         ]
       },
       item.id
     )) }) : null
   ] });
-  const mediaSlot = error ? /* @__PURE__ */ jsx34(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ jsx34(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
-  const textCol = /* @__PURE__ */ jsx34(Grid2.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
-  const mediaCol = /* @__PURE__ */ jsx34(Grid2.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
-  return /* @__PURE__ */ jsx34(
+  const mediaSlot = error ? /* @__PURE__ */ jsx35(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ jsx35(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
+  const textCol = /* @__PURE__ */ jsx35(Grid2.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
+  const mediaCol = /* @__PURE__ */ jsx35(Grid2.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
+  return /* @__PURE__ */ jsx35(
     Paper7,
     {
       component: "section",
@@ -2006,7 +2245,7 @@ function EditorialHero({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       style: surfaceVariant === "flat-public" ? { boxShadow: "none" } : void 0,
-      children: /* @__PURE__ */ jsxs28(Grid2, { gutter: compact ? "lg" : "xl", align: "center", children: [
+      children: /* @__PURE__ */ jsxs29(Grid2, { gutter: compact ? "lg" : "xl", align: "center", children: [
         textCol,
         mediaCol
       ] })
@@ -2015,19 +2254,19 @@ function EditorialHero({
 }
 
 // src/FeatureBand.tsx
-import { Box as Box11, Group as Group26, Paper as Paper8, SimpleGrid as SimpleGrid6, Skeleton as Skeleton4, Stack as Stack29, Text as Text25, ThemeIcon as ThemeIcon9, Title as Title20 } from "@mantine/core";
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Box as Box12, Group as Group26, Paper as Paper8, SimpleGrid as SimpleGrid6, Skeleton as Skeleton4, Stack as Stack30, Text as Text26, ThemeIcon as ThemeIcon9, Title as Title20 } from "@mantine/core";
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
 function FeatureBandSkeleton({
   columns = 3,
   bordered = true,
   variant = "default"
 }) {
-  return /* @__PURE__ */ jsx35(SimpleGrid6, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx35(Paper8, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ jsxs29(Stack29, { gap: "md", children: [
-    /* @__PURE__ */ jsx35(Skeleton4, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
-    /* @__PURE__ */ jsxs29(Stack29, { gap: "xs", children: [
-      /* @__PURE__ */ jsx35(Skeleton4, { height: 20, width: "75%", radius: "md" }),
-      /* @__PURE__ */ jsx35(Skeleton4, { height: 14, width: "100%", radius: "md" }),
-      /* @__PURE__ */ jsx35(Skeleton4, { height: 14, width: "82%", radius: "md" })
+  return /* @__PURE__ */ jsx36(SimpleGrid6, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx36(Paper8, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ jsxs30(Stack30, { gap: "md", children: [
+    /* @__PURE__ */ jsx36(Skeleton4, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
+    /* @__PURE__ */ jsxs30(Stack30, { gap: "xs", children: [
+      /* @__PURE__ */ jsx36(Skeleton4, { height: 20, width: "75%", radius: "md" }),
+      /* @__PURE__ */ jsx36(Skeleton4, { height: 14, width: "100%", radius: "md" }),
+      /* @__PURE__ */ jsx36(Skeleton4, { height: 14, width: "82%", radius: "md" })
     ] })
   ] }) }, index)) });
 }
@@ -2040,10 +2279,10 @@ function FeatureBand({
   variant = "default"
 }) {
   if (loading) {
-    return /* @__PURE__ */ jsx35(FeatureBandSkeleton, { columns, bordered, variant });
+    return /* @__PURE__ */ jsx36(FeatureBandSkeleton, { columns, bordered, variant });
   }
   if (!items.length) {
-    return emptyState ? /* @__PURE__ */ jsx35(Fragment5, { children: emptyState }) : /* @__PURE__ */ jsx35(
+    return emptyState ? /* @__PURE__ */ jsx36(Fragment5, { children: emptyState }) : /* @__PURE__ */ jsx36(
       EmptyState,
       {
         title: "No supporting details available",
@@ -2051,9 +2290,9 @@ function FeatureBand({
       }
     );
   }
-  return /* @__PURE__ */ jsx35(Box11, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ jsx35(SimpleGrid6, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ jsx35(Paper8, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ jsxs29(Stack29, { gap: "md", children: [
-    variant === "process" ? /* @__PURE__ */ jsx35(Group26, { children: /* @__PURE__ */ jsx35(
-      Text25,
+  return /* @__PURE__ */ jsx36(Box12, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ jsx36(SimpleGrid6, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ jsx36(Paper8, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ jsxs30(Stack30, { gap: "md", children: [
+    variant === "process" ? /* @__PURE__ */ jsx36(Group26, { children: /* @__PURE__ */ jsx36(
+      Text26,
       {
         fw: 800,
         size: "sm",
@@ -2065,18 +2304,18 @@ function FeatureBand({
         },
         children: item.stepLabel ?? `Step ${index + 1}`
       }
-    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ jsx35(Group26, { children: /* @__PURE__ */ jsx35(ThemeIcon9, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ jsx35(Group26, { children: /* @__PURE__ */ jsx35(ThemeIcon9, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ jsx35(GdsIcons.Info, { size: "1.25rem" }) }) }),
-    /* @__PURE__ */ jsxs29(Stack29, { gap: "xs", children: [
-      /* @__PURE__ */ jsx35(Title20, { order: 4, children: item.title }),
-      item.description ? /* @__PURE__ */ jsx35(Text25, { c: "dimmed", children: item.description }) : null,
-      item.meta ? /* @__PURE__ */ jsx35(Text25, { size: "sm", c: "dimmed", children: item.meta }) : null
+    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ jsx36(Group26, { children: /* @__PURE__ */ jsx36(ThemeIcon9, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ jsx36(Group26, { children: /* @__PURE__ */ jsx36(ThemeIcon9, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ jsx36(GdsIcons.Info, { size: "1.25rem" }) }) }),
+    /* @__PURE__ */ jsxs30(Stack30, { gap: "xs", children: [
+      /* @__PURE__ */ jsx36(Title20, { order: 4, children: item.title }),
+      item.description ? /* @__PURE__ */ jsx36(Text26, { c: "dimmed", children: item.description }) : null,
+      item.meta ? /* @__PURE__ */ jsx36(Text26, { size: "sm", c: "dimmed", children: item.meta }) : null
     ] })
   ] }) }, item.id)) }) });
 }
 
 // src/MapPanel.tsx
-import { AspectRatio as AspectRatio6, Box as Box12, Group as Group27, Paper as Paper9, Stack as Stack30, Text as Text26, Title as Title21 } from "@mantine/core";
-import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
+import { AspectRatio as AspectRatio6, Box as Box13, Group as Group27, Paper as Paper9, Stack as Stack31, Text as Text27, Title as Title21 } from "@mantine/core";
+import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
 function MapPanel({
   title,
   description,
@@ -2092,7 +2331,7 @@ function MapPanel({
 }) {
   let body;
   if (loading) {
-    body = /* @__PURE__ */ jsx36(
+    body = /* @__PURE__ */ jsx37(
       StateBlock,
       {
         variant: "loading",
@@ -2102,9 +2341,9 @@ function MapPanel({
       }
     );
   } else if (error) {
-    body = /* @__PURE__ */ jsx36(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
+    body = /* @__PURE__ */ jsx37(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
   } else if (!iframeSrc && !renderMap) {
-    body = /* @__PURE__ */ jsx36(
+    body = /* @__PURE__ */ jsx37(
       StateBlock,
       {
         variant: "empty",
@@ -2114,9 +2353,9 @@ function MapPanel({
       }
     );
   } else if (renderMap) {
-    body = /* @__PURE__ */ jsx36(Box12, { style: { minHeight }, children: renderMap() });
+    body = /* @__PURE__ */ jsx37(Box13, { style: { minHeight }, children: renderMap() });
   } else {
-    body = /* @__PURE__ */ jsx36(AspectRatio6, { ratio: 16 / 9, children: /* @__PURE__ */ jsx36(
+    body = /* @__PURE__ */ jsx37(AspectRatio6, { ratio: 16 / 9, children: /* @__PURE__ */ jsx37(
       "iframe",
       {
         src: iframeSrc,
@@ -2128,21 +2367,21 @@ function MapPanel({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx36(Paper9, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs30(Stack30, { gap: "md", children: [
-    /* @__PURE__ */ jsxs30(Group27, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-      /* @__PURE__ */ jsxs30(Stack30, { gap: 4, children: [
-        /* @__PURE__ */ jsx36(Title21, { order: 3, children: title }),
-        description ? /* @__PURE__ */ jsx36(Text26, { size: "sm", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ jsx37(Paper9, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs31(Stack31, { gap: "md", children: [
+    /* @__PURE__ */ jsxs31(Group27, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxs31(Stack31, { gap: 4, children: [
+        /* @__PURE__ */ jsx37(Title21, { order: 3, children: title }),
+        description ? /* @__PURE__ */ jsx37(Text27, { size: "sm", c: "dimmed", children: description }) : null
       ] }),
-      actions ? /* @__PURE__ */ jsx36(ActionBar, { ...actions }) : null
+      actions ? /* @__PURE__ */ jsx37(ActionBar, { ...actions }) : null
     ] }),
     body
   ] }) });
 }
 
 // src/PublicFlowShell.tsx
-import { Badge as Badge13, Group as Group28, Paper as Paper10, Stack as Stack31, Text as Text27, Title as Title22 } from "@mantine/core";
-import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Badge as Badge14, Group as Group28, Paper as Paper10, Stack as Stack32, Text as Text28, Title as Title22 } from "@mantine/core";
+import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
 var stageTone = {
   idle: { label: "Idle", color: "gray" },
   loading: { label: "Loading", color: "blue" },
@@ -2194,7 +2433,7 @@ function PublicFlowShell({
   const actionBar = toActionBar(stage.actions);
   let body = stage.body;
   if (stage.status === "loading") {
-    body = /* @__PURE__ */ jsx37(
+    body = /* @__PURE__ */ jsx38(
       StateBlock,
       {
         variant: "loading",
@@ -2203,7 +2442,7 @@ function PublicFlowShell({
       }
     );
   } else if (stage.status === "error") {
-    body = errorState ?? /* @__PURE__ */ jsx37(
+    body = errorState ?? /* @__PURE__ */ jsx38(
       StateBlock,
       {
         variant: "error",
@@ -2212,7 +2451,7 @@ function PublicFlowShell({
       }
     );
   } else if (!stage.body && !hardwareSurface) {
-    body = emptyState ?? /* @__PURE__ */ jsx37(
+    body = emptyState ?? /* @__PURE__ */ jsx38(
       EmptyState,
       {
         title: "No stage content available",
@@ -2220,29 +2459,29 @@ function PublicFlowShell({
       }
     );
   }
-  return /* @__PURE__ */ jsx37(Paper10, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs31(Stack31, { gap: "lg", children: [
-    /* @__PURE__ */ jsxs31(Group28, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-      /* @__PURE__ */ jsxs31(Stack31, { gap: 4, children: [
-        eyebrow ? /* @__PURE__ */ jsx37(Text27, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
-        /* @__PURE__ */ jsxs31(Group28, { gap: "sm", wrap: "wrap", children: [
-          /* @__PURE__ */ jsx37(Title22, { order: 2, children: stage.title }),
-          /* @__PURE__ */ jsx37(Badge13, { variant: "light", color: tone.color, children: tone.label })
+  return /* @__PURE__ */ jsx38(Paper10, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs32(Stack32, { gap: "lg", children: [
+    /* @__PURE__ */ jsxs32(Group28, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxs32(Stack32, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ jsx38(Text28, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ jsxs32(Group28, { gap: "sm", wrap: "wrap", children: [
+          /* @__PURE__ */ jsx38(Title22, { order: 2, children: stage.title }),
+          /* @__PURE__ */ jsx38(Badge14, { variant: "light", color: tone.color, children: tone.label })
         ] }),
-        stage.description ? /* @__PURE__ */ jsx37(Text27, { size: "sm", c: "dimmed", children: stage.description }) : null
+        stage.description ? /* @__PURE__ */ jsx38(Text28, { size: "sm", c: "dimmed", children: stage.description }) : null
       ] }),
       exitAction
     ] }),
-    stage.notice ? /* @__PURE__ */ jsx37(Text27, { size: "sm", c: "dimmed", children: stage.notice }) : null,
+    stage.notice ? /* @__PURE__ */ jsx38(Text28, { size: "sm", c: "dimmed", children: stage.notice }) : null,
     body,
     hardwareSurface,
     stage.aside,
-    actionBar ? /* @__PURE__ */ jsx37(ActionBar, { ...actionBar }) : null
+    actionBar ? /* @__PURE__ */ jsx38(ActionBar, { ...actionBar }) : null
   ] }) });
 }
 
 // src/PlaybackSurface.tsx
-import { Badge as Badge14, Group as Group29, Paper as Paper11, Stack as Stack32, Text as Text28, Title as Title23 } from "@mantine/core";
-import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Badge as Badge15, Group as Group29, Paper as Paper11, Stack as Stack33, Text as Text29, Title as Title23 } from "@mantine/core";
+import { jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
 var stateTone = {
   loading: { label: "Loading", color: "blue" },
   ready: { label: "Ready", color: "teal" },
@@ -2265,7 +2504,7 @@ function PlaybackSurface({
   const tone = stateTone[state];
   let content;
   if (state === "loading") {
-    content = /* @__PURE__ */ jsx38(
+    content = /* @__PURE__ */ jsx39(
       StateBlock,
       {
         variant: "loading",
@@ -2274,7 +2513,7 @@ function PlaybackSurface({
       }
     );
   } else if (state === "empty") {
-    content = emptyState ?? /* @__PURE__ */ jsx38(
+    content = emptyState ?? /* @__PURE__ */ jsx39(
       EmptyState,
       {
         title: "No playback content available",
@@ -2282,7 +2521,7 @@ function PlaybackSurface({
       }
     );
   } else if (state === "error") {
-    content = errorState ?? /* @__PURE__ */ jsx38(
+    content = errorState ?? /* @__PURE__ */ jsx39(
       StateBlock,
       {
         variant: "error",
@@ -2291,23 +2530,23 @@ function PlaybackSurface({
       }
     );
   } else {
-    content = /* @__PURE__ */ jsxs32(Stack32, { gap: "md", children: [
+    content = /* @__PURE__ */ jsxs33(Stack33, { gap: "md", children: [
       media,
       overlays
     ] });
   }
-  return /* @__PURE__ */ jsx38(Paper11, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ jsxs32(Stack32, { gap: "md", children: [
-    title || statusMessage || controls ? /* @__PURE__ */ jsxs32(Group29, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-      /* @__PURE__ */ jsxs32(Stack32, { gap: 4, children: [
-        title ? /* @__PURE__ */ jsx38(Title23, { order: 3, children: title }) : null,
-        statusMessage ? /* @__PURE__ */ jsx38(Text28, { size: "sm", c: "dimmed", children: statusMessage }) : null
+  return /* @__PURE__ */ jsx39(Paper11, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ jsxs33(Stack33, { gap: "md", children: [
+    title || statusMessage || controls ? /* @__PURE__ */ jsxs33(Group29, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxs33(Stack33, { gap: 4, children: [
+        title ? /* @__PURE__ */ jsx39(Title23, { order: 3, children: title }) : null,
+        statusMessage ? /* @__PURE__ */ jsx39(Text29, { size: "sm", c: "dimmed", children: statusMessage }) : null
       ] }),
-      /* @__PURE__ */ jsxs32(Group29, { gap: "sm", align: "center", wrap: "wrap", children: [
-        /* @__PURE__ */ jsx38(Badge14, { variant: "light", color: tone.color, children: tone.label }),
+      /* @__PURE__ */ jsxs33(Group29, { gap: "sm", align: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ jsx39(Badge15, { variant: "light", color: tone.color, children: tone.label }),
         controls
       ] })
     ] }) : null,
-    state === "degraded" ? /* @__PURE__ */ jsx38(
+    state === "degraded" ? /* @__PURE__ */ jsx39(
       StateBlock,
       {
         variant: "info",
@@ -2321,14 +2560,21 @@ function PlaybackSurface({
 }
 
 // src/MediaField.tsx
-import { Badge as Badge15, Button as Button4, Divider as Divider6, Group as Group30, Paper as Paper12, Stack as Stack33, Text as Text29 } from "@mantine/core";
-import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Badge as Badge16, Button as Button4, Divider as Divider6, Group as Group30, Paper as Paper12, Progress as Progress2, Stack as Stack34, Text as Text30 } from "@mantine/core";
+import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
 var stateLabels = {
   empty: { label: "Empty", color: "gray" },
+  "drag-active": { label: "Drop to select", color: "violet" },
   selected: { label: "Selected", color: "blue" },
+  "preview-loading": { label: "Preview loading", color: "violet" },
   saved: { label: "Saved", color: "teal" },
   invalid: { label: "Needs attention", color: "red" },
-  uploading: { label: "Uploading", color: "violet" }
+  uploading: { label: "Uploading", color: "violet" },
+  "upload-failed": { label: "Upload failed", color: "red" },
+  "unsupported-type": { label: "Unsupported type", color: "red" },
+  "too-large": { label: "Too large", color: "red" },
+  removed: { label: "Removed", color: "gray" },
+  readonly: { label: "Read only", color: "gray" }
 };
 function MediaField({
   label,
@@ -2341,41 +2587,60 @@ function MediaField({
   policyText,
   error,
   retryAction,
+  replaceAction,
   onRemove,
   onReset,
   removeAction,
   resetAction,
   statusAction,
+  acceptedTypes,
+  maxSize,
+  progress,
+  readonly = false,
   state = "empty",
   mode = "stacked"
 }) {
-  const stateBadge = stateLabels[state];
-  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ jsx39(Button4, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
-  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ jsx39(Button4, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
-  return /* @__PURE__ */ jsx39(
+  const resolvedState = readonly ? "readonly" : state;
+  const stateBadge = stateLabels[resolvedState];
+  const resolvedRemoveAction = removeAction ?? (!readonly && onRemove ? /* @__PURE__ */ jsx40(Button4, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
+  const resolvedResetAction = resetAction ?? (!readonly && onReset ? /* @__PURE__ */ jsx40(Button4, { 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__ */ jsx40(
     FormField,
     {
       label,
       description,
       error,
-      children: /* @__PURE__ */ jsx39(Paper12, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs33(Stack33, { gap: "md", children: [
-        /* @__PURE__ */ jsx39(Group30, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ jsxs33(Group30, { gap: "xs", justify: "flex-end", children: [
-          /* @__PURE__ */ jsx39(Badge15, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
+      children: /* @__PURE__ */ jsx40(Paper12, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs34(Stack34, { gap: "md", children: [
+        /* @__PURE__ */ jsx40(Group30, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ jsxs34(Group30, { gap: "xs", justify: "flex-end", children: [
+          /* @__PURE__ */ jsx40(Badge16, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
           statusAction
         ] }) }),
         preview ? preview : null,
-        uploadControl || urlInput ? /* @__PURE__ */ jsxs33(Fragment6, { children: [
-          /* @__PURE__ */ jsx39(Divider6, {}),
-          /* @__PURE__ */ jsxs33(Stack33, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
+        typeof boundedProgress === "number" ? /* @__PURE__ */ jsxs34(Stack34, { gap: 4, children: [
+          /* @__PURE__ */ jsx40(Progress2, { value: boundedProgress, "aria-label": "Upload progress" }),
+          /* @__PURE__ */ jsxs34(Text30, { size: "xs", c: "dimmed", children: [
+            boundedProgress,
+            "% complete"
+          ] })
+        ] }) : null,
+        (uploadControl || urlInput) && !readonly ? /* @__PURE__ */ jsxs34(Fragment6, { children: [
+          /* @__PURE__ */ jsx40(Divider6, {}),
+          /* @__PURE__ */ jsxs34(Stack34, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
             uploadControl,
             urlInput
           ] })
         ] }) : null,
-        value ? /* @__PURE__ */ jsx39(Text29, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
-        helpText ? /* @__PURE__ */ jsx39(Text29, { size: "sm", c: "dimmed", children: helpText }) : null,
-        policyText ? /* @__PURE__ */ jsx39(Text29, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
+        value ? /* @__PURE__ */ jsx40(Text30, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
+        helpText ? /* @__PURE__ */ jsx40(Text30, { size: "sm", c: "dimmed", children: helpText }) : null,
+        acceptedTypes || maxSize ? /* @__PURE__ */ jsxs34(Group30, { gap: "xs", wrap: "wrap", children: [
+          acceptedTypes ? /* @__PURE__ */ jsx40(Badge16, { variant: "outline", color: "gray", children: acceptedTypes }) : null,
+          maxSize ? /* @__PURE__ */ jsx40(Badge16, { variant: "outline", color: "gray", children: maxSize }) : null
+        ] }) : null,
+        policyText ? /* @__PURE__ */ jsx40(Text30, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
         typeof error !== "string" && error ? error : null,
-        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ jsxs33(Group30, { gap: "sm", children: [
+        replaceAction || resolvedRemoveAction || resolvedResetAction || retryAction ? /* @__PURE__ */ jsxs34(Group30, { gap: "sm", children: [
+          replaceAction,
           resolvedResetAction,
           retryAction,
           resolvedRemoveAction
@@ -2386,49 +2651,63 @@ function MediaField({
 }
 
 // src/MediaCard.tsx
-import { ActionIcon as ActionIcon4, Badge as Badge16, Card as Card9, Group as Group31, Stack as Stack34, Text as Text30, Title as Title24 } from "@mantine/core";
-import { jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
+import { ActionIcon as ActionIcon4, Badge as Badge17, Card as Card9, Group as Group31, Stack as Stack35, Text as Text31, Title as Title24 } from "@mantine/core";
+import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
 function MediaCard({ title, image, description, status, overlay, actions = [] }) {
   const EyeIcon = GdsIcons.Eye;
-  return /* @__PURE__ */ jsxs34(Card9, { withBorder: true, radius: "lg", padding: "md", children: [
-    /* @__PURE__ */ jsxs34(Card9.Section, { pos: "relative", children: [
+  return /* @__PURE__ */ jsxs35(Card9, { withBorder: true, radius: "lg", padding: "md", children: [
+    /* @__PURE__ */ jsxs35(Card9.Section, { pos: "relative", children: [
       image,
-      overlay ? /* @__PURE__ */ jsx40("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
+      overlay ? /* @__PURE__ */ jsx41("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
     ] }),
-    /* @__PURE__ */ jsxs34(Stack34, { gap: "sm", mt: "md", children: [
-      /* @__PURE__ */ jsxs34(Group31, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ jsxs34(Stack34, { gap: 4, children: [
-          /* @__PURE__ */ jsx40(Title24, { order: 4, children: title }),
-          description ? /* @__PURE__ */ jsx40(Text30, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
+    /* @__PURE__ */ jsxs35(Stack35, { gap: "sm", mt: "md", children: [
+      /* @__PURE__ */ jsxs35(Group31, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ jsxs35(Stack35, { gap: 4, children: [
+          /* @__PURE__ */ jsx41(Title24, { order: 4, children: title }),
+          description ? /* @__PURE__ */ jsx41(Text31, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
         ] }),
-        status ? /* @__PURE__ */ jsx40(Badge16, { variant: "light", children: status }) : null
+        status ? /* @__PURE__ */ jsx41(Badge17, { variant: "light", children: status }) : null
       ] }),
-      actions.length ? /* @__PURE__ */ jsx40(Group31, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ jsx40(ActionIcon4, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ jsx40(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
+      actions.length ? /* @__PURE__ */ jsx41(Group31, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ jsx41(ActionIcon4, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ jsx41(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
     ] })
   ] });
 }
 
 // src/AccessSummary.tsx
-import { Badge as Badge17, Card as Card10, Group as Group32, Stack as Stack35, Text as Text31, Title as Title25 } from "@mantine/core";
-import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
-function AccessSummary({ title, roles, scope, blocked = false, description }) {
-  return /* @__PURE__ */ jsx41(Card10, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs35(Stack35, { gap: "sm", children: [
-    /* @__PURE__ */ jsxs35(Group32, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ jsx41(Title25, { order: 4, children: title }),
-      /* @__PURE__ */ jsx41(Badge17, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
+import { Badge as Badge18, Card as Card10, Group as Group32, Stack as Stack36, Text as Text32, Title as Title25 } from "@mantine/core";
+import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
+var accessStateMeta = {
+  allowed: { label: "Allowed", color: "teal" },
+  blocked: { label: "Blocked", color: "red" },
+  forbidden: { label: "Forbidden", color: "red" },
+  expired: { label: "Expired", color: "orange" },
+  "permission-limited": { label: "Permission limited", color: "grape" }
+};
+function AccessSummary({ title, roles, scope, blocked = false, state, owner, recoveryHint, description }) {
+  const resolvedState = state ?? (blocked ? "blocked" : "allowed");
+  const meta = accessStateMeta[resolvedState];
+  return /* @__PURE__ */ jsx42(Card10, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs36(Stack36, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs36(Group32, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ jsx42(Title25, { order: 4, children: title }),
+      /* @__PURE__ */ jsx42(Badge18, { color: meta.color, variant: "light", children: meta.label })
     ] }),
-    /* @__PURE__ */ jsx41(Group32, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ jsx41(Badge17, { variant: "outline", children: role }, role)) }),
-    scope ? /* @__PURE__ */ jsxs35(Text31, { size: "sm", c: "dimmed", children: [
+    /* @__PURE__ */ jsx42(Group32, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ jsx42(Badge18, { variant: "outline", children: role }, role)) }),
+    scope ? /* @__PURE__ */ jsxs36(Text32, { size: "sm", c: "dimmed", children: [
       "Scope: ",
       scope
     ] }) : null,
-    description ? /* @__PURE__ */ jsx41(Text31, { size: "sm", children: description }) : null
+    owner ? /* @__PURE__ */ jsxs36(Text32, { size: "sm", c: "dimmed", children: [
+      "Owner: ",
+      owner
+    ] }) : null,
+    recoveryHint ? /* @__PURE__ */ jsx42(Text32, { size: "sm", c: resolvedState === "allowed" ? "dimmed" : "red.7", children: recoveryHint }) : null,
+    description ? /* @__PURE__ */ jsx42(Text32, { size: "sm", children: description }) : null
   ] }) });
 }
 
 // src/PageHeader.tsx
-import { Box as Box13, Group as Group33, Stack as Stack36, Text as Text32, Title as Title26 } from "@mantine/core";
-import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Box as Box14, Group as Group33, Stack as Stack37, Text as Text33, Title as Title26 } from "@mantine/core";
+import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
 function PageHeader({
   title,
   description,
@@ -2439,19 +2718,19 @@ function PageHeader({
 }) {
   const resolvedDescription = description ?? subtitle;
   const eyebrowProps = eyebrowVariant === "ornamental" ? { tt: "uppercase", style: { letterSpacing: "0.12em" } } : {};
-  return /* @__PURE__ */ jsxs36(Group33, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
-    /* @__PURE__ */ jsxs36(Stack36, { gap: "xs", children: [
-      eyebrow && /* @__PURE__ */ jsx42(Text32, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
-      /* @__PURE__ */ jsx42(Title26, { order: 1, children: title }),
-      resolvedDescription && /* @__PURE__ */ jsx42(Text32, { c: "dimmed", maw: 720, children: resolvedDescription })
+  return /* @__PURE__ */ jsxs37(Group33, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
+    /* @__PURE__ */ jsxs37(Stack37, { gap: "xs", children: [
+      eyebrow && /* @__PURE__ */ jsx43(Text33, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
+      /* @__PURE__ */ jsx43(Title26, { order: 1, children: title }),
+      resolvedDescription && /* @__PURE__ */ jsx43(Text33, { c: "dimmed", maw: 720, children: resolvedDescription })
     ] }),
-    actions ? /* @__PURE__ */ jsx42(Box13, { children: actions }) : null
+    actions ? /* @__PURE__ */ jsx43(Box14, { children: actions }) : null
   ] });
 }
 
 // src/FilterDrawer.tsx
-import { Drawer, Group as Group34, Stack as Stack37, Text as Text33 } from "@mantine/core";
-import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Drawer, Group as Group34, Stack as Stack38, Text as Text34 } from "@mantine/core";
+import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 function FilterDrawer({
   opened,
   onClose,
@@ -2467,7 +2746,7 @@ function FilterDrawer({
 }) {
   const resolvedPrimaryAction = applyAction ?? primaryAction;
   const resolvedSecondaryAction = resetAction ?? secondaryAction;
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     Drawer,
     {
       opened,
@@ -2476,11 +2755,11 @@ function FilterDrawer({
       position: mode === "bottom-sheet" ? "bottom" : "right",
       size: mode === "bottom-sheet" ? "auto" : "md",
       radius: mode === "bottom-sheet" ? "xl" : void 0,
-      children: /* @__PURE__ */ jsxs37(Stack37, { gap: "md", children: [
-        description ? /* @__PURE__ */ jsx43(Text33, { size: "sm", c: "dimmed", children: description }) : null,
+      children: /* @__PURE__ */ jsxs38(Stack38, { gap: "md", children: [
+        description ? /* @__PURE__ */ jsx44(Text34, { size: "sm", c: "dimmed", children: description }) : null,
         children,
-        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ jsxs37(Group34, { justify: "space-between", mt: "md", children: [
-          /* @__PURE__ */ jsxs37(Group34, { gap: "sm", children: [
+        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ jsxs38(Group34, { justify: "space-between", mt: "md", children: [
+          /* @__PURE__ */ jsxs38(Group34, { gap: "sm", children: [
             closeAction,
             resolvedSecondaryAction
           ] }),
@@ -2492,8 +2771,8 @@ function FilterDrawer({
 }
 
 // src/PlaceholderPanel.tsx
-import { Badge as Badge18, Card as Card11, Stack as Stack38, Text as Text34, Title as Title27 } from "@mantine/core";
-import { Fragment as Fragment7, jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Badge as Badge19, Card as Card11, Stack as Stack39, Text as Text35, Title as Title27 } from "@mantine/core";
+import { Fragment as Fragment7, jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
 function PlaceholderPanel({
   title,
   description,
@@ -2503,16 +2782,16 @@ function PlaceholderPanel({
   mode
 }) {
   if (mode === "live" && children) {
-    return /* @__PURE__ */ jsx44(Fragment7, { children });
+    return /* @__PURE__ */ jsx45(Fragment7, { children });
   }
-  return /* @__PURE__ */ jsx44(Card11, { children: /* @__PURE__ */ jsxs38(Stack38, { gap: "md", children: [
-    badge ? /* @__PURE__ */ jsx44(Badge18, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
-    /* @__PURE__ */ jsxs38(Stack38, { gap: "xs", children: [
-      /* @__PURE__ */ jsx44(Title27, { order: 4, children: title }),
-      /* @__PURE__ */ jsx44(Text34, { c: "dimmed", children: description })
+  return /* @__PURE__ */ jsx45(Card11, { children: /* @__PURE__ */ jsxs39(Stack39, { gap: "md", children: [
+    badge ? /* @__PURE__ */ jsx45(Badge19, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
+    /* @__PURE__ */ jsxs39(Stack39, { gap: "xs", children: [
+      /* @__PURE__ */ jsx45(Title27, { order: 4, children: title }),
+      /* @__PURE__ */ jsx45(Text35, { c: "dimmed", children: description })
     ] }),
-    footer ? /* @__PURE__ */ jsx44(Text34, { size: "sm", children: footer }) : null,
-    /* @__PURE__ */ jsx44(
+    footer ? /* @__PURE__ */ jsx45(Text35, { size: "sm", children: footer }) : null,
+    /* @__PURE__ */ jsx45(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -2526,7 +2805,7 @@ function PlaceholderPanel({
 
 // src/SimpleDataTable.tsx
 import { ScrollArea, Table } from "@mantine/core";
-import { jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
 function SimpleDataTable({
   columns,
   rows,
@@ -2537,23 +2816,23 @@ function SimpleDataTable({
   getRowKey
 }) {
   if (error) {
-    return /* @__PURE__ */ jsx45(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
+    return /* @__PURE__ */ jsx46(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
   }
   if (loading) {
-    return /* @__PURE__ */ jsx45(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
+    return /* @__PURE__ */ jsx46(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
   }
   if (!rows.length) {
-    return /* @__PURE__ */ jsx45(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
+    return /* @__PURE__ */ jsx46(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
   }
-  return /* @__PURE__ */ jsx45(ScrollArea, { children: /* @__PURE__ */ jsxs39(Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
-    /* @__PURE__ */ jsx45(Table.Thead, { children: /* @__PURE__ */ jsx45(Table.Tr, { children: columns.map((column) => /* @__PURE__ */ jsx45(Table.Th, { children: column.header }, String(column.key))) }) }),
-    /* @__PURE__ */ jsx45(Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ jsx45(Table.Tr, { children: columns.map((column) => /* @__PURE__ */ jsx45(Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
+  return /* @__PURE__ */ jsx46(ScrollArea, { children: /* @__PURE__ */ jsxs40(Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
+    /* @__PURE__ */ jsx46(Table.Thead, { children: /* @__PURE__ */ jsx46(Table.Tr, { children: columns.map((column) => /* @__PURE__ */ jsx46(Table.Th, { children: column.header }, String(column.key))) }) }),
+    /* @__PURE__ */ jsx46(Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ jsx46(Table.Tr, { children: columns.map((column) => /* @__PURE__ */ jsx46(Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
   ] }) });
 }
 
 // src/StatsSection.tsx
-import { Stack as Stack39, Title as Title28 } from "@mantine/core";
-import { jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Stack as Stack40, Title as Title28 } from "@mantine/core";
+import { jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
 function StatsSection({
   title,
   loading = false,
@@ -2565,11 +2844,11 @@ function StatsSection({
 }) {
   let content = children;
   if (error) {
-    content = /* @__PURE__ */ jsx46(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
+    content = /* @__PURE__ */ jsx47(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
   } else if (loading) {
-    content = /* @__PURE__ */ jsx46(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
+    content = /* @__PURE__ */ jsx47(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
   } else if (belowThreshold) {
-    content = /* @__PURE__ */ jsx46(
+    content = /* @__PURE__ */ jsx47(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -2579,14 +2858,210 @@ function StatsSection({
       }
     );
   } else if (placeholder) {
-    content = /* @__PURE__ */ jsx46(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
+    content = /* @__PURE__ */ jsx47(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
   }
-  return /* @__PURE__ */ jsxs40(Stack39, { gap: "md", children: [
-    /* @__PURE__ */ jsx46(Title28, { order: 3, children: title }),
+  return /* @__PURE__ */ jsxs41(Stack40, { gap: "md", children: [
+    /* @__PURE__ */ jsx47(Title28, { order: 3, children: title }),
     content
   ] });
 }
 
+// src/PeriodSelector.tsx
+import { Badge as Badge20, Group as Group35, Stack as Stack41, Text as Text36 } from "@mantine/core";
+import { jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
+function PeriodSelector({
+  label,
+  description,
+  value,
+  options,
+  onChange,
+  timezone,
+  scope,
+  helperText,
+  error,
+  stale = false,
+  filtered = false,
+  disabled = false
+}) {
+  const selectedOption = options.find((option) => option.value === value);
+  return /* @__PURE__ */ jsx48(FormField, { label, description, error, children: /* @__PURE__ */ jsxs42(Stack41, { gap: "sm", children: [
+    /* @__PURE__ */ jsx48(
+      "select",
+      {
+        "aria-label": typeof label === "string" ? label : "Reporting period",
+        value,
+        disabled,
+        onChange: (event) => onChange?.(event.currentTarget.value),
+        children: options.map((option) => /* @__PURE__ */ jsx48("option", { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    /* @__PURE__ */ jsxs42(Group35, { gap: "xs", wrap: "wrap", children: [
+      timezone ? /* @__PURE__ */ jsxs42(Badge20, { variant: "outline", color: "gray", children: [
+        "Timezone: ",
+        timezone
+      ] }) : null,
+      filtered ? /* @__PURE__ */ jsx48(Badge20, { variant: "light", color: "blue", children: "Filtered" }) : null,
+      stale ? /* @__PURE__ */ jsx48(Badge20, { variant: "light", color: "orange", children: "Stale data" }) : null,
+      scope ? /* @__PURE__ */ jsx48(Badge20, { variant: "outline", color: "gray", children: scope }) : null
+    ] }),
+    selectedOption?.description ? /* @__PURE__ */ jsx48(Text36, { size: "sm", c: "dimmed", children: selectedOption.description }) : null,
+    helperText ? /* @__PURE__ */ jsx48(Text36, { size: "sm", c: "dimmed", children: helperText }) : null
+  ] }) });
+}
+
+// src/EvidencePanel.tsx
+import { Alert as Alert2, Badge as Badge21, Group as Group36, Paper as Paper13, Stack as Stack42, Text as Text37, Title as Title29 } from "@mantine/core";
+import { jsx as jsx49, jsxs as jsxs43 } from "react/jsx-runtime";
+var stateTone2 = {
+  current: { label: "Current", color: "teal" },
+  stale: { label: "Stale", color: "orange" },
+  partial: { label: "Partial data", color: "yellow" },
+  "permission-limited": { label: "Permission limited", color: "grape" },
+  loading: { label: "Loading", color: "blue" },
+  empty: { label: "No evidence", color: "gray" },
+  error: { label: "Needs attention", color: "red" }
+};
+function EvidencePanel({
+  title,
+  description,
+  source,
+  freshness,
+  confidence,
+  state = "current",
+  evidenceCount,
+  permissionNote,
+  retryAction,
+  details,
+  children
+}) {
+  const tone = stateTone2[state];
+  const isProblem = state === "error" || state === "permission-limited" || state === "stale" || state === "partial";
+  return /* @__PURE__ */ jsx49(Paper13, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs43(Stack42, { gap: "md", children: [
+    /* @__PURE__ */ jsxs43(Group36, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+      /* @__PURE__ */ jsxs43(Stack42, { gap: 4, children: [
+        /* @__PURE__ */ jsx49(Title29, { order: 4, children: title }),
+        description ? /* @__PURE__ */ jsx49(Text37, { size: "sm", c: "dimmed", children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx49(Badge21, { variant: "light", color: tone.color, children: tone.label })
+    ] }),
+    /* @__PURE__ */ jsxs43(Group36, { gap: "xs", wrap: "wrap", children: [
+      source ? /* @__PURE__ */ jsxs43(Badge21, { variant: "outline", color: "gray", children: [
+        "Source: ",
+        source
+      ] }) : null,
+      freshness ? /* @__PURE__ */ jsxs43(Badge21, { variant: "outline", color: "gray", children: [
+        "Freshness: ",
+        freshness
+      ] }) : null,
+      confidence ? /* @__PURE__ */ jsxs43(Badge21, { variant: "outline", color: "gray", children: [
+        "Confidence: ",
+        confidence
+      ] }) : null,
+      typeof evidenceCount === "number" ? /* @__PURE__ */ jsxs43(Badge21, { variant: "outline", color: "gray", children: [
+        "Evidence: ",
+        evidenceCount
+      ] }) : null
+    ] }),
+    permissionNote ? /* @__PURE__ */ jsx49(Alert2, { color: isProblem ? tone.color : "gray", variant: "light", children: permissionNote }) : null,
+    details,
+    children,
+    retryAction
+  ] }) });
+}
+
+// src/ChartTokenPanel.tsx
+import { Badge as Badge22, Group as Group37, Paper as Paper14, Stack as Stack43, Text as Text38, Title as Title30 } from "@mantine/core";
+import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
+function ChartTokenPanel({
+  title,
+  description,
+  summary,
+  state = "ready",
+  legend = [],
+  children,
+  tableFallback,
+  retryAction
+}) {
+  if (state === "loading") {
+    return /* @__PURE__ */ jsx50(StateBlock, { variant: "loading", title: "Loading chart", description: summary, compact: true, action: retryAction });
+  }
+  if (state === "empty") {
+    return /* @__PURE__ */ jsx50(StateBlock, { variant: "empty", title: "No chart data", description: summary, compact: true, action: retryAction });
+  }
+  if (state === "below-threshold") {
+    return /* @__PURE__ */ jsx50(StateBlock, { variant: "not-enough-data", title: "Not enough data for chart", description: summary, compact: true, action: retryAction });
+  }
+  if (state === "error") {
+    return /* @__PURE__ */ jsx50(StateBlock, { variant: "error", title: "Unable to load chart", description: summary, compact: true, action: retryAction });
+  }
+  return /* @__PURE__ */ jsx50(Paper14, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs44(Stack43, { gap: "md", children: [
+    /* @__PURE__ */ jsxs44(Group37, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+      /* @__PURE__ */ jsxs44(Stack43, { gap: 4, children: [
+        /* @__PURE__ */ jsx50(Title30, { order: 4, children: title }),
+        description ? /* @__PURE__ */ jsx50(Text38, { size: "sm", c: "dimmed", children: description }) : null
+      ] }),
+      state !== "ready" ? /* @__PURE__ */ jsx50(Badge22, { variant: "light", color: state === "permission-limited" ? "grape" : "yellow", children: state.replace("-", " ") }) : null
+    ] }),
+    /* @__PURE__ */ jsx50(Text38, { size: "sm", children: summary }),
+    legend.length ? /* @__PURE__ */ jsx50(Group37, { gap: "xs", wrap: "wrap", "aria-label": "Chart legend", children: legend.map((item, index) => /* @__PURE__ */ jsxs44(Badge22, { 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__ */ jsxs44(Stack43, { gap: "xs", children: [
+      /* @__PURE__ */ jsx50(Text38, { size: "sm", fw: 600, children: "Accessible data fallback" }),
+      tableFallback
+    ] }) : null
+  ] }) });
+}
+
+// src/ReportingSection.tsx
+import { Group as Group38, Paper as Paper15, Stack as Stack44, Text as Text39, Title as Title31 } from "@mantine/core";
+import { jsx as jsx51, jsxs as jsxs45 } from "react/jsx-runtime";
+function ReportingSection({
+  title,
+  description,
+  state = "ready",
+  periodControl,
+  evidence,
+  metrics,
+  chart,
+  table,
+  action,
+  stateMessage,
+  retryAction
+}) {
+  let stateBlock = null;
+  if (state === "loading") {
+    stateBlock = /* @__PURE__ */ jsx51(StateBlock, { variant: "loading", title: "Loading report", description: stateMessage ?? "The reporting surface is synchronizing.", compact: true });
+  } else if (state === "empty") {
+    stateBlock = /* @__PURE__ */ jsx51(StateBlock, { variant: "empty", title: "No report data", description: stateMessage ?? "No records match this reporting scope yet.", compact: true });
+  } else if (state === "error") {
+    stateBlock = /* @__PURE__ */ jsx51(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__ */ jsx51(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__ */ jsx51(StateBlock, { variant: "permission", title: "Permission-limited report", description: stateMessage ?? "Some evidence is hidden by access rules.", compact: true, action: retryAction });
+  }
+  return /* @__PURE__ */ jsx51(Paper15, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs45(Stack44, { gap: "lg", children: [
+    /* @__PURE__ */ jsxs45(Group38, { justify: "space-between", align: "flex-start", gap: "md", children: [
+      /* @__PURE__ */ jsxs45(Stack44, { gap: 4, children: [
+        /* @__PURE__ */ jsx51(Title31, { order: 3, children: title }),
+        description ? /* @__PURE__ */ jsx51(Text39, { size: "sm", c: "dimmed", children: description }) : null
+      ] }),
+      action
+    ] }),
+    periodControl,
+    (state === "partial" || state === "stale" || state === "filtered") && stateMessage ? /* @__PURE__ */ jsx51(StateBlock, { variant: "info", title: state === "partial" ? "Partial report" : state === "stale" ? "Stale report" : "Filtered report", description: stateMessage, compact: true }) : null,
+    stateBlock,
+    metrics,
+    chart,
+    table,
+    evidence
+  ] }) });
+}
+
 // src/locales/ar.ts
 var ar = {
   "gds.action.settings": "\u0627\u0644\u0625\u0639\u062F\u0627\u062F\u0627\u062A",
@@ -3904,6 +4379,8 @@ export {
   AccentPanel,
   ReferenceLocaleNotice,
   ReferenceLinkGrid,
+  resolveSurfacePresentationStyles,
+  isPresentationMode,
   SectionPanel,
   ReferenceSection,
   ActionBar,
@@ -3928,6 +4405,12 @@ export {
   PublicSiteFooter,
   PublicBrandFooter,
   AuthShell,
+  PROVIDER_IDENTITY_REGISTRY,
+  getProviderIdentityLabel,
+  getSupportedProviderIdentityIds,
+  getProviderIdentityPolicy,
+  ProviderIdentityButton,
+  ProviderIdentityButtonGroup,
   SocialAuthButtons,
   ArticleShell,
   CtaButtonGroup,
@@ -3945,6 +4428,10 @@ export {
   PlaceholderPanel,
   SimpleDataTable,
   StatsSection,
+  PeriodSelector,
+  EvidencePanel,
+  ChartTokenPanel,
+  ReportingSection,
   ar,
   de,
   en,