@doneisbetter/gds-core 2.6.1 → 2.6.4

package/dist/index.js

@@ -23,14 +23,18 @@ __export(index_exports, {
   AccentPanel: () => AccentPanel,
   AccessRecoveryPanel: () => AccessRecoveryPanel,
   AccessSummary: () => AccessSummary,
+  ActionBar: () => ActionBar,
   ArticleShell: () => ArticleShell,
   AuthShell: () => AuthShell,
   BrowseSurface: () => BrowseSurface,
+  ChoiceChip: () => ChoiceChip,
   ConfirmDialog: () => ConfirmDialog,
   ConsumerDashboardGrid: () => ConsumerDashboardGrid,
   ConsumerSection: () => ConsumerSection,
   CtaButtonGroup: () => CtaButtonGroup,
   DataToolbar: () => DataToolbar,
+  DetailProfileShell: () => DetailProfileShell,
+  DiscoveryShell: () => DiscoveryShell,
   DocsCodeBlock: () => DocsCodeBlock,
   DocsPageShell: () => DocsPageShell,
   EditorialCard: () => EditorialCard,
@@ -38,41 +42,57 @@ __export(index_exports, {
   EmptyState: () => EmptyState,
   FeatureBand: () => FeatureBand,
   FilterDrawer: () => FilterDrawer,
+  FoodMenuSection: () => FoodMenuSection,
   FormField: () => FormField,
   GameBoardTile: () => GameBoardTile,
   GdsIcons: () => GdsIcons,
   GdsVocabulary: () => GdsVocabulary,
+  ListingCard: () => ListingCard,
+  MapPanel: () => MapPanel,
   MediaCard: () => MediaCard,
   MediaField: () => MediaField,
   MetricCard: () => MetricCard,
   PageHeader: () => PageHeader,
   PlaceholderPanel: () => PlaceholderPanel,
+  PlaybackSurface: () => PlaybackSurface,
   ProductCard: () => ProductCard,
   ProgressCard: () => ProgressCard,
   PublicBrandFooter: () => PublicBrandFooter,
+  PublicFlowShell: () => PublicFlowShell,
+  PublicFoodCard: () => PublicFoodCard,
   PublicNav: () => PublicNav,
   PublicProductCard: () => PublicProductCard,
   PublicShell: () => PublicShell,
   PublicSiteFooter: () => PublicSiteFooter,
   SectionPanel: () => SectionPanel,
   SemanticButton: () => SemanticButton,
+  ShareButtonGroup: () => ShareButtonGroup,
+  SidebarNav: () => SidebarNav,
+  SidebarNavItem: () => SidebarNavItem,
+  SidebarNavSection: () => SidebarNavSection,
   SimpleDataTable: () => SimpleDataTable,
+  SocialAuthButtons: () => SocialAuthButtons,
   StateBlock: () => StateBlock,
   StatsSection: () => StatsSection,
   StatusBadge: () => StatusBadge,
   ThemeToggle: () => ThemeToggle,
   UploadDropzone: () => UploadDropzone,
   ar: () => ar,
+  createGdsVocabularyPack: () => createGdsVocabularyPack,
   de: () => de,
   en: () => en,
   es: () => es,
   fr: () => fr,
   gdsLocales: () => gdsLocales,
   getGdsMessages: () => getGdsMessages,
+  getSemanticActionConfig: () => getSemanticActionConfig,
+  getSemanticActionLabel: () => getSemanticActionLabel,
   he: () => he,
   hu: () => hu,
   it: () => it,
+  mergeGdsVocabularyPacks: () => mergeGdsVocabularyPacks,
   resolveAccentPanelStyles: () => resolveAccentPanelStyles,
+  resolveSemanticActionConfig: () => resolveSemanticActionConfig,
   ru: () => ru
 });
 module.exports = __toCommonJS(index_exports);
@@ -222,7 +242,6 @@ var GdsIcons = {
 
 // src/vocabulary.ts
 var GdsVocabulary = {
-  // Base
   settings: { id: "gds.action.settings", defaultMessage: "Settings", icon: GdsIcons.Settings, feedback: { icon: GdsIcons.Settings, color: "teal", messageId: "gds.feedback.saved" } },
   analytics: { id: "gds.action.analytics", defaultMessage: "Analytics", icon: GdsIcons.Analytics, feedback: { icon: GdsIcons.Analytics, color: "teal", messageId: "gds.feedback.loaded" } },
   dashboard: { id: "gds.action.dashboard", defaultMessage: "Dashboard", icon: GdsIcons.Dashboard, feedback: { icon: GdsIcons.Dashboard, color: "teal", messageId: "gds.feedback.loaded" } },
@@ -238,14 +257,12 @@ var GdsVocabulary = {
   close: { id: "gds.action.close", defaultMessage: "Close", icon: GdsIcons.Close, feedback: { icon: GdsIcons.Close, color: "gray", messageId: "gds.feedback.closed" } },
   language: { id: "gds.action.language", defaultMessage: "Language", icon: GdsIcons.Language, feedback: { icon: GdsIcons.Language, color: "teal", messageId: "gds.feedback.changed" } },
   theme: { id: "gds.action.theme", defaultMessage: "Theme", icon: GdsIcons.Theme, feedback: { icon: GdsIcons.Theme, color: "teal", messageId: "gds.feedback.changed" } },
-  // Navigation
   home: { id: "gds.action.home", defaultMessage: "Home", icon: GdsIcons.Home, feedback: { icon: GdsIcons.Home, color: "teal", messageId: "gds.feedback.opened" } },
   inbox: { id: "gds.action.inbox", defaultMessage: "Inbox", icon: GdsIcons.Inbox, feedback: { icon: GdsIcons.Inbox, color: "teal", messageId: "gds.feedback.opened" } },
   calendar: { id: "gds.action.calendar", defaultMessage: "Calendar", icon: GdsIcons.Calendar, feedback: { icon: GdsIcons.Calendar, color: "teal", messageId: "gds.feedback.opened" } },
   gallery: { id: "gds.action.gallery", defaultMessage: "Gallery", icon: GdsIcons.Gallery, feedback: { icon: GdsIcons.Gallery, color: "teal", messageId: "gds.feedback.opened" } },
   history: { id: "gds.action.history", defaultMessage: "History", icon: GdsIcons.History, feedback: { icon: GdsIcons.History, color: "teal", messageId: "gds.feedback.opened" } },
   profile: { id: "gds.action.profile", defaultMessage: "Profile", icon: GdsIcons.Profile, feedback: { icon: GdsIcons.Profile, color: "teal", messageId: "gds.feedback.opened" } },
-  // Actions
   send: { id: "gds.action.send", defaultMessage: "Send", icon: GdsIcons.Send, feedback: { icon: GdsIcons.Send, color: "blue", messageId: "gds.feedback.sent" } },
   reply: { id: "gds.action.reply", defaultMessage: "Reply", icon: GdsIcons.Reply, feedback: { icon: GdsIcons.Reply, color: "blue", messageId: "gds.feedback.replied" } },
   forward: { id: "gds.action.forward", defaultMessage: "Forward", icon: GdsIcons.Forward, feedback: { icon: GdsIcons.Forward, color: "blue", messageId: "gds.feedback.forwarded" } },
@@ -259,12 +276,10 @@ var GdsVocabulary = {
   uncheck: { id: "gds.action.uncheck", defaultMessage: "Uncheck", icon: GdsIcons.Uncheck, feedback: { icon: GdsIcons.Uncheck, color: "red", messageId: "gds.feedback.unchecked" } },
   complete: { id: "gds.action.complete", defaultMessage: "Complete", icon: GdsIcons.Complete, feedback: { icon: GdsIcons.Complete, color: "teal", messageId: "gds.feedback.completed" } },
   clear: { id: "gds.action.clear", defaultMessage: "Clear", icon: GdsIcons.Clear, feedback: { icon: GdsIcons.Clear, color: "red", messageId: "gds.feedback.cleared" } },
-  // Media (camera project)
   capture: { id: "gds.action.capture", defaultMessage: "Capture", icon: GdsIcons.Capture, feedback: { icon: GdsIcons.Capture, color: "teal", messageId: "gds.feedback.captured" } },
   record: { id: "gds.action.record", defaultMessage: "Record", icon: GdsIcons.Record, feedback: { icon: GdsIcons.Record, color: "teal", messageId: "gds.feedback.recorded" } },
   flip: { id: "gds.action.flip", defaultMessage: "Flip", icon: GdsIcons.Flip, feedback: { icon: GdsIcons.Flip, color: "teal", messageId: "gds.feedback.flipped" } },
   flash: { id: "gds.action.flash", defaultMessage: "Flash", icon: GdsIcons.Flash, feedback: { icon: GdsIcons.Flash, color: "teal", messageId: "gds.feedback.flashed" } },
-  // Domain specific (amanoba, classscout, kidex, habigoal)
   course: { id: "gds.action.course", defaultMessage: "Course", icon: GdsIcons.Course, feedback: { icon: GdsIcons.Course, color: "teal", messageId: "gds.feedback.done" } },
   lesson: { id: "gds.action.lesson", defaultMessage: "Lesson", icon: GdsIcons.Lesson, feedback: { icon: GdsIcons.Lesson, color: "teal", messageId: "gds.feedback.done" } },
   certificate: { id: "gds.action.certificate", defaultMessage: "Certificate", icon: GdsIcons.Certificate, feedback: { icon: GdsIcons.Certificate, color: "teal", messageId: "gds.feedback.done" } },
@@ -277,7 +292,6 @@ var GdsVocabulary = {
   goal: { id: "gds.action.goal", defaultMessage: "Goal", icon: GdsIcons.Goal, feedback: { icon: GdsIcons.Goal, color: "teal", messageId: "gds.feedback.done" } },
   streak: { id: "gds.action.streak", defaultMessage: "Streak", icon: GdsIcons.Streak, feedback: { icon: GdsIcons.Streak, color: "teal", messageId: "gds.feedback.done" } },
   reward: { id: "gds.action.reward", defaultMessage: "Reward", icon: GdsIcons.Reward, feedback: { icon: GdsIcons.Reward, color: "yellow", messageId: "gds.feedback.rewarded" } },
-  // Codebase analysis additions
   trophy: { id: "gds.action.trophy", defaultMessage: "Trophy", icon: GdsIcons.Trophy, feedback: { icon: GdsIcons.Trophy, color: "yellow", messageId: "gds.feedback.rewarded" } },
   crown: { id: "gds.action.crown", defaultMessage: "Crown", icon: GdsIcons.Crown, feedback: { icon: GdsIcons.Crown, color: "yellow", messageId: "gds.feedback.rewarded" } },
   pause: { id: "gds.action.pause", defaultMessage: "Pause", icon: GdsIcons.Pause, feedback: { icon: GdsIcons.Pause, color: "teal", messageId: "gds.feedback.paused" } },
@@ -297,7 +311,6 @@ var GdsVocabulary = {
   help: { id: "gds.action.help", defaultMessage: "Help", icon: GdsIcons.Help, feedback: { icon: GdsIcons.Help, color: "teal", messageId: "gds.feedback.done" } },
   filter: { id: "gds.action.filter", defaultMessage: "Filter", icon: GdsIcons.Filter, feedback: { icon: GdsIcons.Filter, color: "teal", messageId: "gds.feedback.filtered" } },
   sort: { id: "gds.action.sort", defaultMessage: "Sort", icon: GdsIcons.Sort, feedback: { icon: GdsIcons.Sort, color: "teal", messageId: "gds.feedback.sorted" } },
-  // Audit-driven additions
   export: { id: "gds.action.export", defaultMessage: "Export", icon: GdsIcons.Export, feedback: { icon: GdsIcons.Export, color: "teal", messageId: "gds.feedback.exported" } },
   import: { id: "gds.action.import", defaultMessage: "Import", icon: GdsIcons.Import, feedback: { icon: GdsIcons.Import, color: "teal", messageId: "gds.feedback.imported" } },
   preview: { id: "gds.action.preview", defaultMessage: "Preview", icon: GdsIcons.Preview, feedback: { icon: GdsIcons.Preview, color: "teal", messageId: "gds.feedback.previewed" } },
@@ -315,13 +328,68 @@ var GdsVocabulary = {
   refer: { id: "gds.action.refer", defaultMessage: "Refer", icon: GdsIcons.Refer, feedback: { icon: GdsIcons.Refer, color: "teal", messageId: "gds.feedback.referred" } },
   evidence: { id: "gds.action.evidence", defaultMessage: "Evidence", icon: GdsIcons.Evidence, feedback: { icon: GdsIcons.Evidence, color: "teal", messageId: "gds.feedback.added" } }
 };
+function createGdsVocabularyPack(namespace, actions) {
+  return {
+    namespace,
+    actions: Object.fromEntries(
+      Object.entries(actions).map(([key, definition]) => [
+        `${namespace}:${key}`,
+        {
+          ...definition,
+          id: `gds.action.${namespace}.${key}`
+        }
+      ])
+    )
+  };
+}
+function mergeGdsVocabularyPacks(packs = []) {
+  return packs.reduce((acc, pack) => {
+    for (const [key, definition] of Object.entries(pack.actions)) {
+      acc[key] = definition;
+    }
+    return acc;
+  }, {});
+}
+function resolveSemanticActionConfig(action, packs = []) {
+  const baseConfig = GdsVocabulary[action];
+  if (baseConfig) {
+    return baseConfig;
+  }
+  const merged = mergeGdsVocabularyPacks(packs);
+  const packConfig = merged[action];
+  if (packConfig) {
+    return packConfig;
+  }
+  throw new Error(`Unknown semantic action: ${action}`);
+}
+function getSemanticActionConfig(action, packs = []) {
+  return resolveSemanticActionConfig(action, packs);
+}
+function getSemanticActionLabel(action, translate, packs = []) {
+  const config = resolveSemanticActionConfig(action, packs);
+  return translate ? translate(config.id, config.defaultMessage) : config.defaultMessage;
+}
 
 // src/SemanticButton.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function SemanticButton({ action, loading, feedbackState, feedbackText, ...props }) {
+function SemanticButton({
+  action,
+  loading,
+  feedbackState,
+  feedbackText,
+  prerenderLabelOnly = true,
+  vocabularyPacks = [],
+  ...props
+}) {
   const { t } = (0, import_gds_theme.useGdsTranslation)();
-  const config = GdsVocabulary[action];
+  const config = resolveSemanticActionConfig(action, vocabularyPacks);
+  const [mounted, setMounted] = (0, import_react.useState)(!prerenderLabelOnly);
   const [internalFeedback, setInternalFeedback] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (prerenderLabelOnly) {
+      setMounted(true);
+    }
+  }, [prerenderLabelOnly]);
   (0, import_react.useEffect)(() => {
     if (feedbackState) {
       setInternalFeedback(feedbackState);
@@ -330,10 +398,14 @@ function SemanticButton({ action, loading, feedbackState, feedbackText, ...props
     }
   }, [feedbackState]);
   let Icon = config.icon;
-  let label = t(config.id, config.defaultMessage);
+  let label = getSemanticActionLabel(action, t, vocabularyPacks);
   let color = props.color;
+  if (!mounted) {
+    const { leftSection, ...buttonProps } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Button, { loading, color, ...buttonProps, children: getSemanticActionLabel(action, void 0, vocabularyPacks) });
+  }
   if (internalFeedback === "success") {
-    const defaultFeedback = "feedback" in config && config.feedback ? config.feedback : { icon: import_icons_react2.IconCheck, color: "teal", messageId: "gds.feedback.saved" };
+    const defaultFeedback = config.feedback ?? { icon: import_icons_react2.IconCheck, color: "teal", messageId: "gds.feedback.saved" };
     Icon = defaultFeedback.icon;
     label = feedbackText || t(defaultFeedback.messageId, "Success");
     color = defaultFeedback.color;
@@ -400,34 +472,136 @@ function ThemeToggle({ size = "md" }) {
   );
 }
 
-// src/MetricCard.tsx
+// src/ChoiceChip.tsx
 var import_core6 = require("@mantine/core");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function ChoiceChip({
+  label,
+  active = false,
+  href,
+  onClick,
+  component,
+  ...props
+}) {
+  const sharedProps = {
+    variant: active ? "filled" : "light",
+    size: "sm",
+    radius: "xl",
+    ...props
+  };
+  if (href) {
+    const LinkComponent = component || "a";
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_core6.Badge,
+      {
+        component: LinkComponent,
+        href,
+        "aria-current": active ? "page" : void 0,
+        ...sharedProps,
+        children: label
+      }
+    );
+  }
+  if (onClick || component) {
+    const ButtonComponent = component || "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_core6.Badge,
+      {
+        component: ButtonComponent,
+        type: component ? void 0 : "button",
+        onClick,
+        "aria-pressed": onClick ? active : void 0,
+        ...sharedProps,
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Badge, { ...sharedProps, children: label });
+}
+
+// src/ActionBar.tsx
+var import_core7 = require("@mantine/core");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function renderSemanticAction(action, slot, vocabularyPacks) {
+  const { action: actionId, variant, ariaLabel, ...props } = action;
+  const fallbackVariant = slot === "primary" ? "filled" : slot === "secondary" ? "default" : "subtle";
+  const config = resolveSemanticActionConfig(actionId, vocabularyPacks);
+  const Icon = config.icon;
+  const label = getSemanticActionLabel(actionId, void 0, vocabularyPacks);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_core7.Button,
+    {
+      leftSection: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "1rem", stroke: 1.75 }),
+      "aria-label": ariaLabel ?? label,
+      variant: variant ?? fallbackVariant,
+      ...props,
+      children: label
+    },
+    `${slot}-${actionId}`
+  );
+}
+function ActionBar({
+  primary,
+  secondary = [],
+  tertiary = [],
+  iconOnly = [],
+  gap = "sm",
+  vocabularyPacks = []
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Stack, { gap, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { justify: "space-between", align: "center", gap, wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { gap, wrap: "wrap", children: [
+      secondary.map((action) => renderSemanticAction(action, "secondary", vocabularyPacks)),
+      tertiary.map((action) => renderSemanticAction(action, "tertiary", vocabularyPacks))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { gap, wrap: "wrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
+      iconOnly.map(({ action, ariaLabel, ...props }) => {
+        const config = resolveSemanticActionConfig(action, vocabularyPacks);
+        const Icon = config.icon;
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_core7.ActionIcon,
+          {
+            variant: "subtle",
+            size: "lg",
+            "aria-label": ariaLabel ?? getSemanticActionLabel(action, void 0, vocabularyPacks),
+            ...props,
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "1rem", stroke: 1.75 })
+          },
+          `icon-${action}`
+        );
+      }),
+      primary ? renderSemanticAction(primary, "primary", vocabularyPacks) : null
+    ] })
+  ] }) });
+}
+
+// src/MetricCard.tsx
+var import_core8 = require("@mantine/core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var trendColors = {
   positive: "teal",
   negative: "red",
   neutral: "gray"
 };
 function MetricCard({ label, value, description, trend, icon, footer }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Stack, { gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Text, { size: "sm", c: "dimmed", fw: 600, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Title, { order: 3, children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Text, { size: "sm", c: "dimmed", fw: 600, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Title, { order: 3, children: value })
       ] }),
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null
     ] }),
-    description || trend ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Group, { justify: "space-between", align: "center", gap: "sm", children: [
-      description ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Text, { size: "sm", c: "dimmed", flex: 1, children: description }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {}),
-      trend ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Badge, { color: trendColors[trend.tone ?? "neutral"], variant: "light", children: trend.label }) : null
+    description || trend ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Group, { justify: "space-between", align: "center", gap: "sm", children: [
+      description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Text, { size: "sm", c: "dimmed", flex: 1, children: description }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {}),
+      trend ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Badge, { color: trendColors[trend.tone ?? "neutral"], variant: "light", children: trend.label }) : null
     ] }) : null,
     footer
   ] }) });
 }
 
 // src/ProgressCard.tsx
-var import_core7 = require("@mantine/core");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_core9 = require("@mantine/core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ProgressCard({
   label,
   value,
@@ -436,31 +610,31 @@ function ProgressCard({
   description,
   action
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { justify: "space-between", align: "flex-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Stack, { gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Text, { size: "sm", c: "dimmed", fw: 600, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Title, { order: 3, children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Group, { justify: "space-between", align: "flex-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Text, { size: "sm", c: "dimmed", fw: 600, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Title, { order: 3, children: value })
       ] }),
       action
     ] }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Text, { size: "sm", c: "dimmed", children: description }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Stack, { gap: 6, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Text, { size: "sm", fw: 500, children: progressLabel ?? "Progress" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Text, { size: "sm", c: "dimmed", children: [
+    description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Text, { size: "sm", c: "dimmed", children: description }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Stack, { gap: 6, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Group, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Text, { size: "sm", fw: 500, children: progressLabel ?? "Progress" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Text, { size: "sm", c: "dimmed", children: [
           Math.round(progress),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Progress, { value: progress, radius: "xl", size: "md" })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Progress, { value: progress, radius: "xl", size: "md" })
     ] })
   ] }) });
 }
 
 // src/SectionPanel.tsx
-var import_core8 = require("@mantine/core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_core10 = require("@mantine/core");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var toneBackgrounds = {
   default: "var(--mantine-color-body)",
   supporting: "light-dark(var(--mantine-color-gray-0), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))",
@@ -476,23 +650,23 @@ function SectionPanel({
   id,
   divided = true
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Paper, { id, withBorder: true, radius: "xl", p: "lg", style: { background: toneBackgrounds[tone] }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Stack, { gap: "md", children: [
-    title || description || action ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-        title || description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Stack, { gap: 4, children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Title, { order: 3, children: title }) : null,
-          description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Text, { size: "sm", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Paper, { id, withBorder: true, radius: "xl", p: "lg", style: { background: toneBackgrounds[tone] }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Stack, { gap: "md", children: [
+    title || description || action ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+        title || description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Stack, { gap: 4, children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Title, { order: 3, children: title }) : null,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Text, { size: "sm", c: "dimmed", children: description }) : null
         ] }) : null,
         action
       ] }),
-      divided ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Divider, {}) : null
+      divided ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Divider, {}) : null
     ] }) : null,
     children
   ] }) });
 }
 
 // src/ConsumerSection.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function ConsumerSection({
   title,
   description,
@@ -500,23 +674,23 @@ function ConsumerSection({
   children,
   tone = "default"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionPanel, { title, description, action, tone, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SectionPanel, { title, description, action, tone, children });
 }
 
 // src/ConsumerDashboardGrid.tsx
-var import_core9 = require("@mantine/core");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_core11 = require("@mantine/core");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function ConsumerDashboardGrid({
   children,
   columns = 3
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children });
 }
 
 // src/GameBoardTile.tsx
-var import_core10 = require("@mantine/core");
+var import_core12 = require("@mantine/core");
 var import_hooks = require("@mantine/hooks");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function GameBoardTile({
   face,
   revealed,
@@ -525,12 +699,12 @@ function GameBoardTile({
   onPress,
   highlightColor
 }) {
-  const theme = (0, import_core10.useMantineTheme)();
+  const theme = (0, import_core12.useMantineTheme)();
   const reduceMotion = (0, import_hooks.useMediaQuery)("(prefers-reduced-motion: reduce)");
   const highlighted = revealed && !matched;
   const revealBg = highlightColor ?? (typeof theme.primaryColor === "string" ? `${theme.primaryColor}.5` : "violet.5");
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core10.UnstyledButton, { w: "100%", disabled, onClick: onPress, "aria-pressed": revealed, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_core10.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.UnstyledButton, { w: "100%", disabled, onClick: onPress, "aria-pressed": revealed, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_core12.Paper,
     {
       withBorder: true,
       radius: "md",
@@ -545,14 +719,14 @@ function GameBoardTile({
           transform: reduceMotion || !highlighted ? "scale(1)" : "scale(1.02)"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core10.Center, { h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core10.Text, { size: "xl", fw: 700, children: face }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Center, { h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "xl", fw: 700, children: face }) })
     }
   ) });
 }
 
 // src/EditorialCard.tsx
-var import_core11 = require("@mantine/core");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_core13 = require("@mantine/core");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var tonePalette = {
   default: {
     accent: "violet",
@@ -572,8 +746,8 @@ var tonePalette = {
   }
 };
 function EditorialMediaFallback({ compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.AspectRatio, { ratio: compact ? 16 / 10 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_core11.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.AspectRatio, { ratio: compact ? 16 / 10 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_core13.Box,
     {
       style: {
         display: "grid",
@@ -583,7 +757,7 @@ function EditorialMediaFallback({ compact }) {
         background: "var(--mantine-color-gray-0)",
         borderRadius: "var(--mantine-radius-md)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
     }
   ) });
 }
@@ -606,8 +780,8 @@ function EditorialCard({
   const featured = variant === "featured";
   const palette = tonePalette[tone];
   const interactiveProps = href ? { component: "a", href } : onClick ? { component: "button", onClick, type: "button" } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_core11.Card,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    import_core13.Card,
     {
       className: classNames?.root,
       withBorder: true,
@@ -621,21 +795,21 @@ function EditorialCard({
         cursor: href || onClick ? "pointer" : "default"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Card.Section, { className: classNames?.media, children: media ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EditorialMediaFallback, { compact }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Stack, { gap: "md", p: compact ? "md" : "lg", className: classNames?.body, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Stack, { gap: 4, flex: 1, children: [
-              eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "xs", fw: 700, c: "dimmed", children: eyebrow }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Title, { order: compact ? 4 : 3, className: classNames?.title, children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Card.Section, { className: classNames?.media, children: media ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EditorialMediaFallback, { compact }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: "md", p: compact ? "md" : "lg", className: classNames?.body, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: 4, flex: 1, children: [
+              eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "xs", fw: 700, c: "dimmed", children: eyebrow }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Title, { order: compact ? 4 : 3, className: classNames?.title, children: title })
             ] }),
-            badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Badge, { color: palette.accent, variant: "light", children: badge }) : badge : null
+            badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Badge, { color: palette.accent, variant: "light", children: badge }) : badge : null
           ] }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", c: "dimmed", children: description }) : null,
-          meta ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", c: "dimmed", className: classNames?.meta, children: meta }) : null,
-          href || onClick || ctaLabel ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { gap: 6, c: `${palette.accent}.7`, className: classNames?.action, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { fw: 600, size: "sm", children: ctaLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              import_core11.Anchor,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", c: "dimmed", children: description }) : null,
+          meta ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", c: "dimmed", className: classNames?.meta, children: meta }) : null,
+          href || onClick || ctaLabel ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { gap: 6, c: `${palette.accent}.7`, className: classNames?.action, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { fw: 600, size: "sm", children: ctaLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_core13.Anchor,
               {
                 component: "span",
                 underline: "never",
@@ -652,8 +826,8 @@ function EditorialCard({
 }
 
 // src/ProductCard.tsx
-var import_core12 = require("@mantine/core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_core14 = require("@mantine/core");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ProductCard({
   title,
   description,
@@ -666,39 +840,39 @@ function ProductCard({
   footer
 }) {
   const MoreIcon = GdsIcons.Menu;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: "md", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
     media,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { align: "flex-start", gap: "sm", wrap: "nowrap", children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Title, { order: 4, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { align: "flex-start", gap: "sm", wrap: "nowrap", children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Title, { order: 4, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { gap: "xs", align: "center", wrap: "nowrap", children: [
-        typeof status === "string" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Badge, { variant: "light", children: status }) : status,
-        secondaryActions.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Menu, { position: "bottom-end", withinPortal: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.ActionIcon, { variant: "subtle", "aria-label": "More actions", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MoreIcon, { size: "1rem" }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Menu.Dropdown, { children: secondaryActions.map(
-            (action) => action.href ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Menu.Item, { component: "a", href: action.href, color: action.color, children: action.label }, action.label) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Menu.Item, { onClick: action.onClick, color: action.color, children: action.label }, action.label)
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { gap: "xs", align: "center", wrap: "nowrap", children: [
+        typeof status === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { variant: "light", children: status }) : status,
+        secondaryActions.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Menu, { position: "bottom-end", withinPortal: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.ActionIcon, { variant: "subtle", "aria-label": "More actions", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MoreIcon, { size: "1rem" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Menu.Dropdown, { children: secondaryActions.map(
+            (action) => action.href ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Menu.Item, { component: "a", href: action.href, color: action.color, children: action.label }, action.label) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Menu.Item, { onClick: action.onClick, color: action.color, children: action.label }, action.label)
           ) })
         ] }) : null
       ] })
     ] }),
-    metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Stack, { gap: 6, children: metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", gap: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", children: item.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", fw: 500, ta: "right", children: item.value })
+    metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Stack, { gap: 6, children: metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: item.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", fw: 500, ta: "right", children: item.value })
     ] }, item.label)) }) : null,
-    primaryAction ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Group, { justify: "space-between", children: primaryAction }) : null,
+    primaryAction ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Group, { justify: "space-between", children: primaryAction }) : null,
     footer
   ] }) });
 }
 
 // src/PublicProductCard.tsx
 var import_react2 = require("react");
-var import_core13 = require("@mantine/core");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_core15 = require("@mantine/core");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var stateConfig = {
   available: { label: "Available", color: "teal" },
   limited: { label: "Limited", color: "yellow" },
@@ -715,29 +889,29 @@ function enhanceAction(action, disabled) {
   });
 }
 function ImageFallback({ compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.AspectRatio, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_core13.ThemeIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.AspectRatio, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_core15.ThemeIcon,
     {
       size: "100%",
       radius: "md",
       variant: "light",
       color: "gray",
       "aria-label": "No product image available",
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
     }
   ) });
 }
 function LoadingCard({ compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.AspectRatio, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Skeleton, { radius: "md" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Skeleton, { height: 20, radius: "sm", width: "70%" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Skeleton, { height: 14, radius: "sm", width: "100%" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Skeleton, { height: 14, radius: "sm", width: "85%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.AspectRatio, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Skeleton, { radius: "md" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Skeleton, { height: 20, radius: "sm", width: "70%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Skeleton, { height: 14, radius: "sm", width: "100%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Skeleton, { height: 14, radius: "sm", width: "85%" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Skeleton, { height: 18, radius: "sm", width: 72 }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Skeleton, { height: 36, radius: "md", width: 120 })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Skeleton, { height: 18, radius: "sm", width: 72 }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Skeleton, { height: 36, radius: "md", width: 120 })
     ] })
   ] }) });
 }
@@ -760,7 +934,7 @@ function PublicProductCard({
   disabled = false
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LoadingCard, { compact });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LoadingCard, { compact });
   }
   const isActionDisabled = disabled || state === "sold-out";
   const resolvedPrimaryAction = enhanceAction(primaryAction, isActionDisabled);
@@ -773,46 +947,312 @@ function PublicProductCard({
   const pickupHelper = helperKind === "pickup" ? helperText : pickupNote;
   const inventoryHelper = helperKind === "inventory" ? helperText : inventoryNote;
   const hasSupportingRegion = Boolean(price || supportingHelper || pickupHelper || inventoryHelper);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: compact ? "sm" : "md", children: [
-    image ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ImageFallback, { compact }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", gap: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Title, { order: compact ? 5 : 4, lineClamp: 2, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Stack, { gap: compact ? "sm" : "md", children: [
+    image ?? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageFallback, { compact }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Title, { order: compact ? 5 : 4, lineClamp: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label })
     ] }),
-    hasSupportingRegion ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
-        price ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { fw: 700, size: compact ? "md" : "lg", children: price }) : null,
-        supportingHelper ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "xs", c: "dimmed", children: supportingHelper }) : null
+    hasSupportingRegion ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Group, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
+        price ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Text, { fw: 700, size: compact ? "md" : "lg", children: price }) : null,
+        supportingHelper ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Text, { size: "xs", c: "dimmed", children: supportingHelper }) : null
       ] }),
       resolvedPrimaryAction
-    ] }) : resolvedPrimaryAction ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Group, { justify: "flex-end", children: resolvedPrimaryAction }) : null,
-    pickupHelper || inventoryHelper || metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: 6, children: [
-      pickupHelper ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", c: "dimmed", children: "Pickup" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", fw: 500, ta: "right", children: pickupHelper })
+    ] }) : resolvedPrimaryAction ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Group, { justify: "flex-end", children: resolvedPrimaryAction }) : null,
+    pickupHelper || inventoryHelper || metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Stack, { gap: 6, children: [
+      pickupHelper ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Group, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Text, { size: "sm", c: "dimmed", children: "Pickup" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Text, { size: "sm", fw: 500, ta: "right", children: pickupHelper })
       ] }) : null,
-      inventoryHelper ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", c: "dimmed", children: "Availability" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", fw: 500, ta: "right", children: inventoryHelper })
+      inventoryHelper ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Group, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Text, { size: "sm", c: "dimmed", children: "Availability" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Text, { size: "sm", fw: 500, ta: "right", children: inventoryHelper })
       ] }) : null,
-      metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", c: "dimmed", children: item.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", fw: 500, ta: "right", children: item.value })
+      metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Group, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Text, { size: "sm", c: "dimmed", children: item.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Text, { size: "sm", fw: 500, ta: "right", children: item.value })
       ] }, item.label))
     ] }) : null,
-    resolvedSecondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Group, { justify: "flex-end", children: resolvedSecondaryAction }) : null
+    resolvedSecondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Group, { justify: "flex-end", children: resolvedSecondaryAction }) : null
   ] }) });
 }
 
-// src/BrowseSurface.tsx
+// src/PublicFoodCard.tsx
+var import_react3 = require("react");
 var import_core16 = require("@mantine/core");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ratioMap = {
+  square: 1,
+  dish: 4 / 3,
+  landscape: 16 / 9
+};
+var stateConfig2 = {
+  available: { label: "Available", color: "teal" },
+  preorder: { label: "Preorder", color: "violet" },
+  limited: { label: "Limited batch", color: "yellow" },
+  "sold-out": { label: "Sold out", color: "red" },
+  "coming-soon": { label: "Coming soon", color: "gray" }
+};
+var markerToneMap = {
+  default: "gray",
+  positive: "teal",
+  warning: "orange",
+  muted: "dark"
+};
+function enhanceAction2(action, disabled) {
+  if (!(0, import_react3.isValidElement)(action)) {
+    return action;
+  }
+  return (0, import_react3.cloneElement)(action, {
+    disabled: disabled || Boolean(action.props.disabled),
+    "aria-disabled": disabled || void 0
+  });
+}
+function FoodImageFallback({ mediaRatio }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.AspectRatio, { ratio: ratioMap[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.ThemeIcon, { size: "100%", radius: "md", variant: "light", color: "gray", "aria-label": "No food image available", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GdsIcons.Gallery, { size: "2rem" }) }) });
+}
+function LoadingFoodCard({ mediaRatio }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.AspectRatio, { ratio: ratioMap[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Skeleton, { radius: "md" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Skeleton, { height: 20, radius: "sm", width: "72%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Skeleton, { height: 14, radius: "sm", width: "96%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Skeleton, { height: 14, radius: "sm", width: "78%" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Skeleton, { height: 18, radius: "sm", width: 96 }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Skeleton, { height: 36, radius: "md", width: 112 })
+    ] })
+  ] }) });
+}
+function PublicFoodCard({
+  title,
+  description,
+  image,
+  price,
+  priceNote,
+  state,
+  helperText,
+  pickupNote,
+  freshnessNote,
+  markers = [],
+  metadata = [],
+  primaryAction,
+  secondaryAction,
+  quantityHint,
+  mediaRatio = "dish",
+  loading = false,
+  disabled = false
+}) {
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoadingFoodCard, { mediaRatio });
+  }
+  const stateBadge = stateConfig2[state];
+  const isActionDisabled = disabled || state === "sold-out" || state === "coming-soon";
+  const resolvedPrimaryAction = enhanceAction2(primaryAction, isActionDisabled);
+  const resolvedSecondaryAction = enhanceAction2(secondaryAction, disabled);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "md", children: [
+    image ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FoodImageFallback, { mediaRatio }),
+    markers.length > 0 || quantityHint ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "center", wrap: "wrap", gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Group, { gap: "xs", wrap: "wrap", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Badge, { variant: "light", color: markerToneMap[marker.tone ?? "default"], children: marker.label }, marker.id)) }),
+      quantityHint ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "xs", fw: 600, c: "dimmed", children: quantityHint }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Title, { order: 4, lineClamp: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
+        price ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { fw: 800, size: "lg", children: price }) : null,
+        priceNote ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "xs", c: "dimmed", children: priceNote }) : null,
+        helperText ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", c: "dimmed", children: helperText }) : null
+      ] }),
+      resolvedPrimaryAction
+    ] }),
+    pickupNote || freshnessNote || metadata.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: 6, children: [
+      pickupNote ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", c: "dimmed", children: "Pickup" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", fw: 500, ta: "right", children: pickupNote })
+      ] }) : null,
+      freshnessNote ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", c: "dimmed", children: "Freshness" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", fw: 500, ta: "right", children: freshnessNote })
+      ] }) : null,
+      metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { gap: "xs", wrap: "nowrap", children: [
+        item.icon,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", c: "dimmed", children: item.label })
+      ] }) }, item.id))
+    ] }) : null,
+    resolvedSecondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Group, { justify: "flex-end", children: resolvedSecondaryAction }) : null
+  ] }) });
+}
+
+// src/FoodMenuSection.tsx
+var import_core17 = require("@mantine/core");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function FoodMenuSection({
+  title,
+  description,
+  eyebrow,
+  categories,
+  sectionNote,
+  action,
+  emptyState,
+  columns = 3,
+  showEmptyCategories = false
+}) {
+  const normalizedCategories = (categories ?? []).filter(Boolean);
+  const visibleCategories = showEmptyCategories ? normalizedCategories : normalizedCategories.filter((category) => category.items.length > 0);
+  if (!visibleCategories.length) {
+    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      EmptyState,
+      {
+        title: "No active menu available",
+        description: "Publish grouped menu categories here when the current weekly or seasonal menu is ready."
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Box, { component: "section", "aria-label": typeof title === "string" ? title : "Food menu section", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Title, { order: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", c: "dimmed", maw: 760, children: description }) : null,
+        sectionNote ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", c: "dimmed", children: sectionNote }) : null
+      ] }),
+      action
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Stack, { gap: "xl", children: visibleCategories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Title, { order: 3, children: category.title }),
+        category.description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", c: "dimmed", children: category.description }) : null,
+        category.helperNote ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", c: "dimmed", children: category.helperNote }) : null
+      ] }),
+      category.items.length ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: category.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PublicFoodCard, { ...item }, item.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        EmptyState,
+        {
+          title: "No items in this category",
+          description: "This category is defined, but it does not currently have any visible dishes or bundles."
+        }
+      )
+    ] }, category.id)) })
+  ] }) });
+}
+
+// src/ListingCard.tsx
+var import_core18 = require("@mantine/core");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ratioMap2 = {
+  "1:1": 1,
+  "4:3": 4 / 3,
+  "16:9": 16 / 9
+};
+var toneColorMap = {
+  default: void 0,
+  positive: "teal",
+  warning: "orange",
+  muted: "gray"
+};
+function ListingImageFallback({ mediaRatio }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.AspectRatio, { ratio: ratioMap2[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_core18.ThemeIcon,
+    {
+      size: "100%",
+      radius: "md",
+      variant: "light",
+      color: "gray",
+      "aria-label": "No listing image available",
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(GdsIcons.Gallery, { size: "2rem" })
+    }
+  ) });
+}
+function ListingAffordance({ affordance }) {
+  const config = GdsVocabulary[affordance.action];
+  const Icon = config.icon;
+  const label = affordance.ariaLabel ?? getSemanticActionLabel(affordance.action);
+  if (affordance.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_core18.ActionIcon,
+      {
+        component: "a",
+        href: affordance.href,
+        variant: "subtle",
+        size: "lg",
+        "aria-label": label,
+        disabled: affordance.disabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { size: "1rem", stroke: 1.75 })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_core18.ActionIcon,
+    {
+      variant: "subtle",
+      size: "lg",
+      "aria-label": label,
+      onClick: affordance.onClick,
+      disabled: affordance.disabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { size: "1rem", stroke: 1.75 })
+    }
+  );
+}
+function ListingCard({
+  title,
+  href,
+  description,
+  image,
+  mediaRatio = "4:3",
+  metadata = [],
+  featured = false,
+  sponsoredDisclosure,
+  price,
+  primaryAction,
+  saveAction,
+  shareAction,
+  compact = false
+}) {
+  const titleContent = href && typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { component: "a", href, inherit: true, td: "none", children: title }) : title;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Stack, { gap: compact ? "sm" : "md", children: [
+    image ?? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ListingImageFallback, { mediaRatio }),
+    featured || sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Group, { justify: "space-between", gap: "sm", wrap: "wrap", children: [
+      featured ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Badge, { variant: "light", color: "violet", children: "Featured" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {}),
+      sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { size: "xs", c: "dimmed", children: sponsoredDisclosure }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Stack, { gap: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Title, { order: compact ? 5 : 4, lineClamp: 2, children: titleContent }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
+    ] }),
+    metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Stack, { gap: "xs", children: metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Group, { gap: "xs", wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: [
+        item.icon,
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { size: "sm", c: item.tone ? toneColorMap[item.tone] : "dimmed", lineClamp: 1, children: item.label })
+      ] }),
+      item.value ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { size: "sm", fw: 500, ta: "right", children: item.value }) : null
+    ] }, item.id)) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Group, { justify: "space-between", align: "center", gap: "sm", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: price ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { fw: 700, size: compact ? "md" : "lg", children: price }) : null }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Group, { gap: "xs", wrap: "nowrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
+        saveAction ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ListingAffordance, { affordance: saveAction }) : null,
+        shareAction ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ListingAffordance, { affordance: shareAction }) : null,
+        primaryAction
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/BrowseSurface.tsx
+var import_core21 = require("@mantine/core");
 
 // src/DataToolbar.tsx
-var import_core14 = require("@mantine/core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_core19 = require("@mantine/core");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function DataToolbar({
   searchSlot,
   filterSlot,
@@ -821,20 +1261,20 @@ function DataToolbar({
   createAction,
   activeFilters = []
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { flex: 1, align: "flex-start", gap: "sm", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Group, { flex: 1, align: "flex-start", gap: "sm", children: [
         searchSlot,
         filterSlot,
         sortSlot
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Group, { gap: "sm", children: [
         resetAction,
         createAction
       ] })
     ] }),
-    activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Group, { gap: "xs", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_core14.Badge,
+    activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Group, { gap: "xs", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_core19.Badge,
       {
         variant: "light",
         rightSection: filter.onRemove ? "\xD7" : void 0,
@@ -848,17 +1288,17 @@ function DataToolbar({
 }
 
 // src/StateBlock.tsx
-var import_core15 = require("@mantine/core");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_core20 = require("@mantine/core");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var variantConfig = {
-  loading: { color: "violet", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Loader, { size: "sm" }) },
-  empty: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Inbox, { size: "1.1rem" }) },
-  error: { color: "red", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Danger, { size: "1.1rem" }) },
-  permission: { color: "orange", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Verify, { size: "1.1rem" }) },
-  disabled: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Toggle, { size: "1.1rem" }) },
-  success: { color: "teal", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Success, { size: "1.1rem" }) },
-  info: { color: "blue", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Info, { size: "1.1rem" }) },
-  "not-enough-data": { color: "yellow", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Analytics, { size: "1.1rem" }) }
+  loading: { color: "violet", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Loader, { size: "sm" }) },
+  empty: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Inbox, { size: "1.1rem" }) },
+  error: { color: "red", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Danger, { size: "1.1rem" }) },
+  permission: { color: "orange", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Verify, { size: "1.1rem" }) },
+  disabled: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Toggle, { size: "1.1rem" }) },
+  success: { color: "teal", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Success, { size: "1.1rem" }) },
+  info: { color: "blue", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Info, { size: "1.1rem" }) },
+  "not-enough-data": { color: "yellow", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Analytics, { size: "1.1rem" }) }
 };
 function StateBlock({
   variant,
@@ -869,8 +1309,8 @@ function StateBlock({
   compact = false
 }) {
   const config = variantConfig[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-    import_core15.Stack,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    import_core20.Stack,
     {
       align: compact ? "flex-start" : "center",
       justify: "center",
@@ -878,10 +1318,10 @@ function StateBlock({
       py: compact ? "md" : "xl",
       ta: compact ? "left" : "center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.ThemeIcon, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Stack, { gap: 6, align: compact ? "flex-start" : "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Title, { order: compact ? 4 : 3, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Text, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.ThemeIcon, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Stack, { gap: 6, align: compact ? "flex-start" : "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Title, { order: compact ? 4 : 3, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Text, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
         ] }),
         action
       ]
@@ -890,7 +1330,7 @@ function StateBlock({
 }
 
 // src/BrowseSurface.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function BrowseSurface({
   eyebrow,
   title,
@@ -924,22 +1364,22 @@ function BrowseSurface({
   }));
   let body = content;
   if (loading) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StateBlock, { variant: "loading", title: loadingTitle, description: loadingDescription, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StateBlock, { variant: "loading", title: loadingTitle, description: loadingDescription, compact: true });
   } else if (error) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StateBlock, { variant: "error", title: errorTitle, description: error, action: errorAction ?? emptyAction, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StateBlock, { variant: "error", title: errorTitle, description: error, action: errorAction ?? emptyAction, compact: true });
   } else if (empty) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, action: emptyAction, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, action: emptyAction, compact: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Paper, { withBorder: true, radius: "xl", p: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "xs", maw: 760, children: [
-          eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "xs", fw: 700, tt: "uppercase", c: "dimmed", style: { letterSpacing: "0.18em" }, children: eyebrow }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Title, { order: 1, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "lg", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Paper, { withBorder: true, radius: "xl", p: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { gap: "lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { gap: "xs", maw: 760, children: [
+          eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { size: "xs", fw: 700, tt: "uppercase", c: "dimmed", style: { letterSpacing: "0.18em" }, children: eyebrow }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Title, { order: 1, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { size: "lg", c: "dimmed", children: description }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { align: "flex-end", gap: "xs", children: [
-          typeof resultCount === "number" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Badge, { size: "lg", radius: "xl", variant: "light", color: "violet", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { align: "flex-end", gap: "xs", children: [
+          typeof resultCount === "number" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Badge, { size: "lg", radius: "xl", variant: "light", color: "violet", children: [
             resultCount,
             " ",
             resultLabel
@@ -947,10 +1387,10 @@ function BrowseSurface({
           primaryControls
         ] })
       ] }),
-      scopeOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", fw: 600, c: "dimmed", children: scopeLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Group, { gap: "xs", wrap: "wrap", children: scopeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          import_core16.Button,
+      scopeOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { size: "sm", fw: 600, c: "dimmed", children: scopeLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Group, { gap: "xs", wrap: "wrap", children: scopeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          import_core21.Button,
           {
             variant: option.active ? "filled" : "default",
             color: option.active ? "violet" : "gray",
@@ -962,30 +1402,30 @@ function BrowseSurface({
           option.id
         )) })
       ] }) : null,
-      locationControls ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", fw: 600, c: "dimmed", children: "Location" }),
+      locationControls ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { size: "sm", fw: 600, c: "dimmed", children: "Location" }),
         locationControls
       ] }) : null,
-      toolbar || sortControl ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.SimpleGrid, { cols: { base: 1, lg: sortControl ? 2 : 1 }, spacing: "md", children: [
-        toolbar ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      toolbar || sortControl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.SimpleGrid, { cols: { base: 1, lg: sortControl ? 2 : 1 }, spacing: "md", children: [
+        toolbar ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           DataToolbar,
           {
             ...toolbar,
             activeFilters: toolbarFilters.length ? toolbarFilters : toolbar.fallbackActiveFilters
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Box, {}),
-        sortControl ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "xs", align: "stretch", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", fw: 600, c: "dimmed", children: "Sort" }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Box, {}),
+        sortControl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { gap: "xs", align: "stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { size: "sm", fw: 600, c: "dimmed", children: "Sort" }),
           sortControl
         ] }) : null
       ] }) : null,
-      mobileFilters ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { hiddenFrom: "lg", gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", fw: 600, c: "dimmed", children: "Filters" }),
+      mobileFilters ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { hiddenFrom: "lg", gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { size: "sm", fw: 600, c: "dimmed", children: "Filters" }),
         mobileFilters
       ] }) : null,
-      filterDrawer ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Box, { hiddenFrom: "lg", children: filterDrawer }) : null,
-      activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Group, { gap: "xs", wrap: "wrap", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_core16.Badge,
+      filterDrawer ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Box, { hiddenFrom: "lg", children: filterDrawer }) : null,
+      activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Group, { gap: "xs", wrap: "wrap", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_core21.Badge,
         {
           variant: "light",
           color: "violet",
@@ -1002,8 +1442,8 @@ function BrowseSurface({
 }
 
 // src/AccentPanel.tsx
-var import_core17 = require("@mantine/core");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_core22 = require("@mantine/core");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var toneStyles = {
   gray: {
     bg: "light-dark(var(--mantine-color-gray-0), color-mix(in srgb, var(--mantine-color-gray-7) 88%, black))",
@@ -1059,29 +1499,56 @@ function AccentPanel({
   children
 }) {
   const styles = resolveAccentPanelStyles(tone, variant);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Paper, { withBorder: true, radius: "lg", p: "lg", style: styles, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "sm", children: [
-    title || badge ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Title, { order: 4, c: "inherit", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Box, {}),
-      badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Badge, { color: tone === "amber" ? "yellow" : tone, variant: "filled", children: badge }) : badge : null
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Paper, { withBorder: true, radius: "lg", p: "lg", style: styles, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "sm", children: [
+    title || badge ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Title, { order: 4, c: "inherit", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Box, {}),
+      badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Badge, { color: tone === "amber" ? "yellow" : tone, variant: "filled", children: badge }) : badge : null
     ] }) : null,
-    typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { c: "inherit", children }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Box, { c: "inherit", children })
+    typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { c: "inherit", children }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Box, { c: "inherit", children })
+  ] }) });
+}
+
+// src/DetailProfileShell.tsx
+var import_core23 = require("@mantine/core");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function DetailProfileShell({
+  mode = "page",
+  hero,
+  actions,
+  sections,
+  related,
+  padding = "lg",
+  showDividers = true
+}) {
+  const content = sections.filter(Boolean);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Paper, { withBorder: mode === "drawer", radius: mode === "drawer" ? "xl" : "md", p: padding, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "lg", children: [
+    hero,
+    actions,
+    content.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "lg", children: [
+      index > 0 && showDividers ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Divider, {}) : null,
+      section
+    ] }, index)),
+    related ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+      content.length && showDividers ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Divider, {}) : null,
+      related
+    ] }) : null
   ] }) });
 }
 
 // src/PublicShell.tsx
-var import_core19 = require("@mantine/core");
+var import_core25 = require("@mantine/core");
 
 // src/PublicNav.tsx
-var import_core18 = require("@mantine/core");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_core24 = require("@mantine/core");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function PublicNav({ items, activeId, renderLink }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Group, { component: "nav", "aria-label": "Primary", gap: "lg", wrap: "nowrap", children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Group, { component: "nav", "aria-label": "Primary", gap: "lg", wrap: "nowrap", children: items.map((item) => {
     const active = item.id === activeId;
     if (renderLink) {
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: renderLink(item, active) }, item.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: renderLink(item, active) }, item.id);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_core18.Anchor,
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_core24.Anchor,
       {
         href: item.href,
         "aria-current": active ? "page" : void 0,
@@ -1098,15 +1565,15 @@ function PublicNav({ items, activeId, renderLink }) {
 }
 
 // src/PublicShell.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function InlineMobileNavigation({
   mobileNavigation,
   className,
   mode
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Box, { component: "details", hiddenFrom: "sm", className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      import_core19.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Box, { component: "details", hiddenFrom: "sm", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      import_core25.Box,
       {
         component: "summary",
         "aria-label": mode === "drawer" ? "Open site navigation drawer" : "Open site navigation",
@@ -1118,13 +1585,13 @@ function InlineMobileNavigation({
           gap: "0.5rem"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Burger, { opened: false, "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Text, { size: "sm", fw: 600, children: "Menu" })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Burger, { opened: false, "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Text, { size: "sm", fw: 600, children: "Menu" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_core19.Box,
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      import_core25.Box,
       {
         mt: "sm",
         p: "sm",
@@ -1133,7 +1600,7 @@ function InlineMobileNavigation({
           border: "1px solid var(--mantine-color-default-border)",
           background: mode === "drawer" ? "light-dark(var(--mantine-color-white), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))" : "var(--mantine-color-body)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Stack, { gap: "sm", children: mobileNavigation })
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Stack, { gap: "sm", children: mobileNavigation })
       }
     )
   ] });
@@ -1154,30 +1621,30 @@ function PublicShell({
   mobileNavigationMode = "sheet",
   classNames
 }) {
-  const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PublicNav, { items: navItems, activeId: activeNavId }) : null);
+  const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PublicNav, { items: navItems, activeId: activeNavId }) : null);
   const containerSize = maxContentWidth ?? (compact ? "md" : "lg");
   const headerHeight = headerVariant === "compact" ? 64 : headerVariant === "branded-quiet" ? 88 : 72;
   const mainPadding = headerVariant === "compact" ? "lg" : "xl";
   const usesInlineMobileNavigation = Boolean(mobileNavigation) && mobileNavigationMode !== "sheet";
   const usesSheetMobileNavigation = Boolean(mobileNavigation) && mobileNavigationMode === "sheet";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    import_core19.AppShell,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    import_core25.AppShell,
     {
       className: classNames?.root,
       header: { height: headerHeight },
       footer: usesSheetMobileNavigation ? { height: 68 } : void 0,
       padding: 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.AppShell.Header, { withBorder: headerBordered, className: classNames?.header, "data-header-variant": headerVariant, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Container, { size: containerSize, h: "100%", py: headerVariant === "branded-quiet" ? "sm" : 0, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          import_core19.Group,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.AppShell.Header, { withBorder: headerBordered, className: classNames?.header, "data-header-variant": headerVariant, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Container, { size: containerSize, h: "100%", py: headerVariant === "branded-quiet" ? "sm" : 0, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          import_core25.Group,
           {
             h: "100%",
             justify: "space-between",
             wrap: "nowrap",
             gap: headerVariant === "compact" ? "sm" : "lg",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Group, { wrap: "nowrap", gap: headerVariant === "compact" ? "xs" : "sm", className: classNames?.brand, children: [
-                usesInlineMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Group, { wrap: "nowrap", gap: headerVariant === "compact" ? "xs" : "sm", className: classNames?.brand, children: [
+                usesInlineMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   InlineMobileNavigation,
                   {
                     mobileNavigation,
@@ -1185,36 +1652,144 @@ function PublicShell({
                     mode: mobileNavigationMode
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Box, { children: brand })
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Box, { children: brand })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Group, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Group, { gap: "sm", className: classNames?.actions, children: actions })
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Group, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Group, { gap: "sm", className: classNames?.actions, children: actions })
             ]
           }
         ) }) }),
-        usesSheetMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Group, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.AppShell.Main, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Stack, { gap: "xl", children }) }),
-          footer ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Box, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Text, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
+        usesSheetMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Group, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.AppShell.Main, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Stack, { gap: "xl", children }) }),
+          footer ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Box, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Text, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
         ] })
       ]
     }
   );
 }
 
+// src/DiscoveryShell.tsx
+var import_core26 = require("@mantine/core");
+var import_hooks2 = require("@mantine/hooks");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function DiscoveryShell({
+  header,
+  sidebar,
+  footer,
+  children,
+  mobileNavigationLabel = "Toggle navigation",
+  defaultSidebarOpen = false,
+  stickySidebar = true,
+  sidebarWidth = 280,
+  headerHeight = 60,
+  shellPadding = "md",
+  collapseBreakpoint = "sm"
+}) {
+  const [opened, { toggle, close }] = (0, import_hooks2.useDisclosure)(defaultSidebarOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    import_core26.AppShell,
+    {
+      header: { height: headerHeight },
+      footer: footer ? { height: 68 } : void 0,
+      navbar: {
+        width: sidebarWidth,
+        breakpoint: collapseBreakpoint,
+        collapsed: { mobile: !opened }
+      },
+      padding: shellPadding,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Group, { h: "100%", px: "md", gap: "sm", wrap: "nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_core26.Burger,
+            {
+              opened,
+              onClick: toggle,
+              hiddenFrom: collapseBreakpoint,
+              size: "sm",
+              "aria-label": mobileNavigationLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Box, { style: { flex: 1, minWidth: 0 }, children: header })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.AppShell.Navbar, { p: "md", "data-sticky-sidebar": stickySidebar || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.ScrollArea, { h: "100%", type: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_core26.Box,
+          {
+            h: "100%",
+            style: stickySidebar ? {
+              display: "flex",
+              flexDirection: "column"
+            } : void 0,
+            children: sidebar
+          }
+        ) }) }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.AppShell.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Group, { h: "100%", px: "md", justify: "space-around", wrap: "nowrap", children: footer }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.AppShell.Main, { onClick: () => close(), children })
+      ]
+    }
+  );
+}
+
+// src/SidebarNav.tsx
+var import_react4 = require("react");
+var import_core27 = require("@mantine/core");
+var import_gds_theme3 = require("@doneisbetter/gds-theme");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function SidebarNav({ children, ariaLabel = "Primary navigation", gap = "md" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Stack, { component: "nav", "aria-label": ariaLabel, gap, h: "100%", children });
+}
+function SidebarNavSection({ label, children, pushToBottom = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Stack, { gap: "xs", mt: pushToBottom ? "auto" : void 0, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Text, { size: "xs", fw: 700, c: "dimmed", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Stack, { gap: 4, children })
+  ] });
+}
+var _SidebarNavItem = (0, import_react4.forwardRef)(
+  ({
+    action,
+    label,
+    description,
+    badge,
+    icon,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent,
+    vocabularyPacks = [],
+    ...props
+  }, ref) => {
+    const { t } = (0, import_gds_theme3.useGdsTranslation)();
+    const config = action ? resolveSemanticActionConfig(action, vocabularyPacks) : null;
+    const Icon = config?.icon;
+    const resolvedLabel = label ?? (action ? getSemanticActionLabel(action, t, vocabularyPacks) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      import_core27.NavLink,
+      {
+        ref,
+        label: resolvedLabel,
+        description,
+        leftSection: icon ?? (Icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { size: "1rem", stroke: 1.5 }) : void 0),
+        rightSection: badge ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Box, { children: badge }) : props.rightSection,
+        "aria-label": ariaLabel ?? (typeof resolvedLabel === "string" ? resolvedLabel : void 0),
+        "aria-current": props.active ? "page" : ariaCurrent,
+        ...props
+      }
+    );
+  }
+);
+var SidebarNavItem = (0, import_core27.createPolymorphicComponent)(_SidebarNavItem);
+
 // src/PublicSiteFooter.tsx
-var import_core20 = require("@mantine/core");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_core28 = require("@mantine/core");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function PublicSiteFooter({ children, meta }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Stack, { component: "footer", gap: "xs", children: [
-    children ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Text, { size: "sm", children }) : null,
-    meta ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Group, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Text, { size: "xs", c: "dimmed", children: meta }) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { component: "footer", gap: "xs", children: [
+    children ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Text, { size: "sm", children }) : null,
+    meta ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Text, { size: "xs", c: "dimmed", children: meta }) }) : null
   ] });
 }
 
 // src/PublicBrandFooter.tsx
-var import_core21 = require("@mantine/core");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_core29 = require("@mantine/core");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function PublicBrandFooter({
   media,
   brandTitle,
@@ -1229,8 +1804,8 @@ function PublicBrandFooter({
   const mediaSpan = layoutVariant === "immersive-media" ? 5 : 4;
   const primarySpan = media ? layoutVariant === "balanced-quote" ? 4 : 4 : secondary ? 6 : 12;
   const secondarySpan = media ? Math.max(3, 12 - mediaSpan - primarySpan) : Math.max(4, 12 - primarySpan);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_core21.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_core29.Paper,
     {
       component: "footer",
       withBorder: true,
@@ -1238,19 +1813,19 @@ function PublicBrandFooter({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       "data-layout-variant": layoutVariant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { gap: "lg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
-          media ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Box, { className: classNames?.media, children: media }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
-            brandTitle ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Title, { order: 4, children: brandTitle }) : null,
-            description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { c: "dimmed", children: description }) : null,
-            actions ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Box, { children: actions }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
+          media ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Box, { className: classNames?.media, children: media }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
+            brandTitle ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Title, { order: 4, children: brandTitle }) : null,
+            description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Text, { c: "dimmed", children: description }) : null,
+            actions ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Box, { children: actions }) : null
           ] }) }),
-          secondary ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Stack, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
+          secondary ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Stack, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
         ] }),
-        legal ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Group, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { size: "sm", c: "dimmed", children: legal }) : legal })
+        legal ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Group, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Text, { size: "sm", c: "dimmed", children: legal }) : legal })
         ] }) : null
       ] })
     }
@@ -1258,47 +1833,126 @@ function PublicBrandFooter({
 }
 
 // src/AuthShell.tsx
-var import_core22 = require("@mantine/core");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-function AuthShell({ title, description, brand, footer, helper, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Box, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Container, { size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "xl", children: [
-    brand ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Group, { justify: "center", children: brand }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Card, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "xs", ta: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Title, { order: 2, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { c: "dimmed", size: "sm", children: description }) : null
+var import_core30 = require("@mantine/core");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function AuthShell({
+  title,
+  description,
+  brand,
+  headerActions,
+  footer,
+  helper,
+  socialAuth,
+  dividerLabel = "Or continue with your account",
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Box, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Container, { size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Stack, { gap: "xl", children: [
+    brand || headerActions ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Group, { justify: brand && headerActions ? "space-between" : "center", align: "center", children: [
+      brand ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Box, { children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Box, {}),
+      headerActions ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Group, { gap: "sm", children: headerActions }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Card, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Stack, { gap: "lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Stack, { gap: "xs", ta: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Title, { order: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Text, { c: "dimmed", size: "sm", children: description }) : null
       ] }),
+      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Box, { children: socialAuth }) : null,
+      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Divider, { label: dividerLabel, labelPosition: "center" }) : null,
       children,
-      helper ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
+      helper ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
     ] }) }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
   ] }) }) });
 }
 
+// src/SocialAuthButtons.tsx
+var import_core31 = require("@mantine/core");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var providerConfig = {
+  google: { label: "Google", mark: "G", color: "red" },
+  apple: { label: "Apple", mark: "A", color: "dark" },
+  github: { label: "GitHub", mark: "GH", color: "gray" },
+  facebook: { label: "Facebook", mark: "F", color: "blue" },
+  microsoft: { label: "Microsoft", mark: "M", color: "cyan" },
+  linkedin: { label: "LinkedIn", mark: "in", color: "blue" },
+  discord: { label: "Discord", mark: "D", color: "indigo" },
+  x: { label: "X", mark: "X", color: "dark" },
+  email: { label: "Email", mark: "@", color: "gray" }
+};
+function ProviderMark({ id }) {
+  const config = providerConfig[id] ?? { label: id, mark: id.slice(0, 2).toUpperCase(), color: "gray" };
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.ThemeIcon, { variant: "light", color: config.color, radius: "xl", size: "md", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { size: "xs", fw: 700, children: config.mark }) });
+}
+function SocialAuthButton({ provider, compact = false }) {
+  const config = providerConfig[provider.id] ?? { label: provider.id, mark: provider.id.slice(0, 2).toUpperCase(), color: "gray" };
+  const label = provider.label ?? `Continue with ${config.label}`;
+  const buttonProps = provider.href ? { component: "a", href: provider.href } : { onClick: provider.onClick };
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    import_core31.Button,
+    {
+      variant: "default",
+      justify: "space-between",
+      fullWidth: true,
+      size: compact ? "sm" : "md",
+      leftSection: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ProviderMark, { id: provider.id }),
+      disabled: provider.disabled,
+      loading: provider.loading,
+      ...buttonProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Stack, { gap: 0, align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { inherit: true, children: label }),
+        provider.description ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { size: "xs", c: "dimmed", lh: 1.2, children: provider.description }) : null
+      ] })
+    }
+  );
+}
+function SocialAuthButtons({
+  providers,
+  title = "Continue with a trusted provider",
+  description,
+  layout = "stack",
+  compact = false
+}) {
+  if (!providers.length) {
+    return null;
+  }
+  const content = providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SocialAuthButton, { provider, compact }, provider.id));
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Stack, { gap: 4, ta: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Group, { justify: "center", gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GdsIcons.Login, { size: "1rem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { fw: 600, children: title })
+      ] }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { size: "sm", c: "dimmed", children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Divider, {}),
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Stack, { gap: "sm", children: content })
+  ] });
+}
+
 // src/ArticleShell.tsx
-var import_core23 = require("@mantine/core");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_core32 = require("@mantine/core");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function ArticleShell({ eyebrow, title, lead, meta, sideRail, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "lg", maw: 760, flex: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Title, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Text, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Group, { gap: "md", children: meta }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Stack, { gap: "lg", maw: 760, flex: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Group, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Stack, { gap: "md", children })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Stack, { gap: "md", children })
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/DocsCodeBlock.tsx
-var import_react3 = require("react");
-var import_core24 = require("@mantine/core");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_core33 = require("@mantine/core");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function DocsCodeBlock({ code, language, title, withCopy = true }) {
-  const [copied, setCopied] = (0, import_react3.useState)(false);
+  const [copied, setCopied] = (0, import_react5.useState)(false);
   const handleCopy = async () => {
     if (!navigator?.clipboard) {
       return;
@@ -1307,44 +1961,44 @@ function DocsCodeBlock({ code, language, title, withCopy = true }) {
     setCopied(true);
     window.setTimeout(() => setCopied(false), 1200);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: "sm", children: [
-    title || withCopy ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Group, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: 0, children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Text, { fw: 600, children: title }) : null,
-        language ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Text, { size: "xs", c: "dimmed", children: language }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { gap: "sm", children: [
+    title || withCopy ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { gap: 0, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Text, { fw: 600, children: title }) : null,
+        language ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Text, { size: "xs", c: "dimmed", children: language }) : null
       ] }),
-      withCopy ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        import_core24.ActionIcon,
+      withCopy ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        import_core33.ActionIcon,
         {
           variant: "subtle",
           "aria-label": copied ? "Copied code block" : "Copy code block",
           onClick: () => {
             void handleCopy();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GdsIcons.Copy, { size: "1rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GdsIcons.Copy, { size: "1rem" })
         }
       ) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Code, { block: true, children: code })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Code, { block: true, children: code })
   ] }) });
 }
 
 // src/CtaButtonGroup.tsx
-var import_core25 = require("@mantine/core");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_core34 = require("@mantine/core");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function CtaButtonGroup({ primary, secondary, tertiary }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Group, { gap: "sm", align: "stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: primary }),
-      secondary ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: secondary }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core34.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core34.Group, { gap: "sm", align: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: primary }),
+      secondary ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: secondary }) : null
     ] }),
-    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: tertiary }) : null
+    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: tertiary }) : null
   ] });
 }
 
 // src/DocsPageShell.tsx
-var import_core26 = require("@mantine/core");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_core35 = require("@mantine/core");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function DocsPageShell({
   breadcrumbs = [],
   title,
@@ -1355,27 +2009,27 @@ function DocsPageShell({
   footerNext,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Stack, { component: "article", gap: "lg", maw: 760, flex: 1, children: [
-      breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Breadcrumbs, { children: breadcrumbs.map(
-        (crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Text, { children: crumb.label }, crumb.label)
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core35.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core35.Stack, { component: "article", gap: "lg", maw: 760, flex: 1, children: [
+      breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Breadcrumbs, { children: breadcrumbs.map(
+        (crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Text, { children: crumb.label }, crumb.label)
       ) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Stack, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Title, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Text, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Group, { gap: "md", children: meta }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core35.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Group, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Stack, { gap: "md", children }),
-      footerNext ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Stack, { gap: "md", children }),
+      footerNext ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/EditorialHero.tsx
-var import_core27 = require("@mantine/core");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_core36 = require("@mantine/core");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function resolveActionVariant(action, index, seenPrimary) {
   const requested = action.variant ?? (index === 0 ? "primary" : "secondary");
   if (requested === "primary" && !seenPrimary) {
@@ -1387,8 +2041,8 @@ function resolveActionVariant(action, index, seenPrimary) {
   return { variant: "default", seenPrimary };
 }
 function HeroAction({ action, variant }) {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_core27.Anchor,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_core36.Anchor,
     {
       href: action.href,
       onClick: action.onClick,
@@ -1412,8 +2066,8 @@ function HeroAction({ action, variant }) {
     }
   );
   if (!action.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      import_core27.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_core36.Box,
       {
         component: "button",
         type: "button",
@@ -1440,30 +2094,30 @@ function HeroAction({ action, variant }) {
   return content;
 }
 function LoadingHero({ compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Stack, { gap: "md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Skeleton, { height: 16, width: 96, radius: "xl" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Skeleton, { height: 48, width: "90%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Skeleton, { height: 18, width: "100%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Skeleton, { height: 18, width: "82%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Group, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Skeleton, { height: 40, width: 140, radius: "md" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Skeleton, { height: 40, width: 140, radius: "md" })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Stack, { gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Skeleton, { height: 16, width: 96, radius: "xl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Skeleton, { height: 48, width: "90%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Skeleton, { height: 18, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Skeleton, { height: 18, width: "82%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Group, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Skeleton, { height: 40, width: 140, radius: "md" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Skeleton, { height: 40, width: 140, radius: "md" })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Skeleton, { radius: "lg" }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Skeleton, { radius: "lg" }) }) })
   ] }) });
 }
 function MediaFallback() {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_core27.ThemeIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_core36.ThemeIcon,
     {
       size: "100%",
       radius: "lg",
       color: "gray",
       variant: "light",
       "aria-label": "Hero media is unavailable",
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
     }
   ) });
 }
@@ -1483,8 +2137,8 @@ function MediaFrame({
   } else if (mediaFade === "soft-start") {
     overlayBackground = "linear-gradient(90deg, light-dark(rgba(255,255,255,0.9), rgba(17,24,39,0.72)) 0%, rgba(255,255,255,0) 28%)";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    import_core27.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    import_core36.Box,
     {
       component: "figure",
       m: 0,
@@ -1497,9 +2151,9 @@ function MediaFrame({
       },
       "aria-label": mediaAlt,
       children: [
-        media ?? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MediaFallback, {}),
-        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          import_core27.Box,
+        media ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MediaFallback, {}),
+        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          import_core36.Box,
           {
             "aria-hidden": true,
             style: {
@@ -1532,7 +2186,7 @@ function EditorialHero({
   classNames
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LoadingHero, { compact });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LoadingHero, { compact });
   }
   const stackAlign = align === "center" ? "center" : "flex-start";
   const textAlign = align === "center" ? "center" : "left";
@@ -1540,15 +2194,15 @@ function EditorialHero({
   const renderedActions = actions.slice(0, 3).map((action, index) => {
     const resolved = resolveActionVariant(action, index, seenPrimary);
     seenPrimary = resolved.seenPrimary;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
   });
-  const textSlot = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Stack, { gap: "sm", align: stackAlign, children: [
-      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
+  const textSlot = /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Stack, { gap: "sm", align: stackAlign, children: [
+      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
     ] }),
-    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       CtaButtonGroup,
       {
         primary: renderedActions[0],
@@ -1556,8 +2210,8 @@ function EditorialHero({
         tertiary: renderedActions[2]
       }
     ) }) : null,
-    meta.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-      import_core27.Group,
+    meta.length ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      import_core36.Group,
       {
         gap: 6,
         px: "sm",
@@ -1568,17 +2222,17 @@ function EditorialHero({
         },
         children: [
           item.icon,
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Text, { size: "sm", c: "dimmed", children: item.label })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Text, { size: "sm", c: "dimmed", children: item.label })
         ]
       },
       item.id
     )) }) : null
   ] });
-  const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
-  const textCol = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
-  const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_core27.Paper,
+  const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
+  const textCol = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
+  const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_core36.Paper,
     {
       component: "section",
       withBorder: true,
@@ -1586,7 +2240,7 @@ function EditorialHero({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       style: surfaceVariant === "flat-public" ? { boxShadow: "none" } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
         textCol,
         mediaCol
       ] })
@@ -1595,19 +2249,19 @@ function EditorialHero({
 }
 
 // src/FeatureBand.tsx
-var import_core28 = require("@mantine/core");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_core37 = require("@mantine/core");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function FeatureBandSkeleton({
   columns = 3,
   bordered = true,
   variant = "default"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 20, width: "75%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 14, width: "100%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 14, width: "82%", radius: "md" })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Skeleton, { height: 20, width: "75%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Skeleton, { height: 14, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Skeleton, { height: 14, width: "82%", radius: "md" })
     ] })
   ] }) }, index)) });
 }
@@ -1620,10 +2274,10 @@ function FeatureBand({
   variant = "default"
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
   }
   if (!items.length) {
-    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       EmptyState,
       {
         title: "No supporting details available",
@@ -1631,9 +2285,9 @@ function FeatureBand({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: "md", children: [
-    variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      import_core28.Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Stack, { gap: "md", children: [
+    variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      import_core37.Text,
       {
         fw: 800,
         size: "sm",
@@ -1645,19 +2299,352 @@ function FeatureBand({
         },
         children: item.stepLabel ?? `Step ${index + 1}`
       }
-    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Title, { order: 4, children: item.title }),
-      item.description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Text, { c: "dimmed", children: item.description }) : null,
-      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
+    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Title, { order: 4, children: item.title }),
+      item.description ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Text, { c: "dimmed", children: item.description }) : null,
+      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
     ] })
   ] }) }, item.id)) }) });
 }
 
+// src/MapPanel.tsx
+var import_core38 = require("@mantine/core");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function MapPanel({
+  title,
+  description,
+  actions,
+  loading = false,
+  empty,
+  error,
+  embedTitle,
+  iframeSrc,
+  iframeSandbox = "allow-scripts allow-same-origin allow-popups",
+  renderMap,
+  minHeight = 320
+}) {
+  let body;
+  if (loading) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      StateBlock,
+      {
+        variant: "loading",
+        title: "Loading map",
+        description: "The shared map panel is still preparing the embedded surface.",
+        compact: true
+      }
+    );
+  } else if (error) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
+  } else if (!iframeSrc && !renderMap) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      StateBlock,
+      {
+        variant: "empty",
+        title: "No map available",
+        description: empty ?? "Add coordinates or a sanctioned embed source to render this panel.",
+        compact: true
+      }
+    );
+  } else if (renderMap) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Box, { style: { minHeight }, children: renderMap() });
+  } else {
+    body = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "iframe",
+      {
+        src: iframeSrc,
+        title: embedTitle ?? "Embedded map",
+        sandbox: iframeSandbox,
+        loading: "lazy",
+        referrerPolicy: "no-referrer-when-downgrade",
+        style: { width: "100%", height: "100%", border: 0, borderRadius: 12 }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core38.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core38.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core38.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Title, { order: 3, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Text, { size: "sm", c: "dimmed", children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ActionBar, { ...actions }) : null
+    ] }),
+    body
+  ] }) });
+}
+
+// src/PublicFlowShell.tsx
+var import_core39 = require("@mantine/core");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var stageTone = {
+  idle: { label: "Idle", color: "gray" },
+  loading: { label: "Loading", color: "blue" },
+  ready: { label: "Ready", color: "teal" },
+  error: { label: "Error", color: "red" },
+  complete: { label: "Complete", color: "teal" }
+};
+function toActionBar(actions = []) {
+  if (!actions.length) {
+    return void 0;
+  }
+  const ordered = [...actions].sort((left, right) => {
+    const rank = { primary: 0, secondary: 1, tertiary: 2 };
+    return rank[left.priority] - rank[right.priority];
+  });
+  const primary = ordered.find((action) => action.priority === "primary");
+  const secondary = ordered.filter((action) => action.priority === "secondary");
+  const tertiary = ordered.filter((action) => action.priority === "tertiary");
+  return {
+    primary: primary ? {
+      action: primary.action,
+      disabled: primary.disabled,
+      loading: primary.loading,
+      onClick: primary.onClick
+    } : void 0,
+    secondary: secondary.map((action) => ({
+      action: action.action,
+      disabled: action.disabled,
+      loading: action.loading,
+      onClick: action.onClick
+    })),
+    tertiary: tertiary.map((action) => ({
+      action: action.action,
+      disabled: action.disabled,
+      loading: action.loading,
+      onClick: action.onClick
+    }))
+  };
+}
+function PublicFlowShell({
+  stage,
+  eyebrow,
+  exitAction,
+  hardwareSurface,
+  emptyState,
+  errorState
+}) {
+  const tone = stageTone[stage.status];
+  const actionBar = toActionBar(stage.actions);
+  let body = stage.body;
+  if (stage.status === "loading") {
+    body = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      StateBlock,
+      {
+        variant: "loading",
+        title: "Preparing flow",
+        description: stage.description ?? "The current public flow stage is still loading."
+      }
+    );
+  } else if (stage.status === "error") {
+    body = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      StateBlock,
+      {
+        variant: "error",
+        title: "Flow unavailable",
+        description: stage.description ?? "This public flow could not continue safely."
+      }
+    );
+  } else if (!stage.body && !hardwareSurface) {
+    body = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      EmptyState,
+      {
+        title: "No stage content available",
+        description: "Add the current flow stage body or a bounded hardware surface to render this contract."
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core39.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core39.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core39.Stack, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core39.Group, { gap: "sm", wrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Title, { order: 2, children: stage.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Badge, { variant: "light", color: tone.color, children: tone.label })
+        ] }),
+        stage.description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Text, { size: "sm", c: "dimmed", children: stage.description }) : null
+      ] }),
+      exitAction
+    ] }),
+    stage.notice ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Text, { size: "sm", c: "dimmed", children: stage.notice }) : null,
+    body,
+    hardwareSurface,
+    stage.aside,
+    actionBar ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ActionBar, { ...actionBar }) : null
+  ] }) });
+}
+
+// src/PlaybackSurface.tsx
+var import_core40 = require("@mantine/core");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var stateTone = {
+  loading: { label: "Loading", color: "blue" },
+  ready: { label: "Ready", color: "teal" },
+  playing: { label: "Playing", color: "teal" },
+  empty: { label: "Empty", color: "gray" },
+  error: { label: "Error", color: "red" },
+  degraded: { label: "Degraded", color: "orange" }
+};
+function PlaybackSurface({
+  title,
+  state,
+  media,
+  statusMessage,
+  controls,
+  emptyState,
+  errorState,
+  overlays,
+  mode = "embedded"
+}) {
+  const tone = stateTone[state];
+  let content;
+  if (state === "loading") {
+    content = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      StateBlock,
+      {
+        variant: "loading",
+        title: "Loading playback",
+        description: "The playback surface is still preparing timed or fullscreen media."
+      }
+    );
+  } else if (state === "empty") {
+    content = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      EmptyState,
+      {
+        title: "No playback content available",
+        description: "Add media assets or a playlist to render this playback surface."
+      }
+    );
+  } else if (state === "error") {
+    content = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      StateBlock,
+      {
+        variant: "error",
+        title: "Playback unavailable",
+        description: "The playback surface could not render the current media safely."
+      }
+    );
+  } else {
+    content = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core40.Stack, { gap: "md", children: [
+      media,
+      overlays
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core40.Paper, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core40.Stack, { gap: "md", children: [
+    title || statusMessage || controls ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core40.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core40.Stack, { gap: 4, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core40.Title, { order: 3, children: title }) : null,
+        statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core40.Text, { size: "sm", c: "dimmed", children: statusMessage }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core40.Group, { gap: "sm", align: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core40.Badge, { variant: "light", color: tone.color, children: tone.label }),
+        controls
+      ] })
+    ] }) : null,
+    state === "degraded" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      StateBlock,
+      {
+        variant: "info",
+        title: "Playback degraded",
+        description: statusMessage ?? "Playback is continuing with reduced fidelity or recoverable media failures.",
+        compact: true
+      }
+    ) : null,
+    content
+  ] }) });
+}
+
+// src/ShareButtonGroup.tsx
+var import_react6 = require("react");
+var import_core41 = require("@mantine/core");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var channelLabels = {
+  native: "Share",
+  copy: "Copy link",
+  mail: "Email",
+  message: "Message",
+  x: "Share on X",
+  facebook: "Share on Facebook",
+  linkedin: "Share on LinkedIn",
+  whatsapp: "Share on WhatsApp",
+  telegram: "Share on Telegram"
+};
+function encodeShare(url, title, text) {
+  const safeUrl = encodeURIComponent(url);
+  const safeTitle = encodeURIComponent(title ?? "");
+  const safeText = encodeURIComponent(text ?? title ?? "");
+  return {
+    mail: `mailto:?subject=${safeTitle}&body=${safeText ? `${safeText}%0A%0A` : ""}${safeUrl}`,
+    message: `sms:?&body=${safeText ? `${safeText}%20` : ""}${safeUrl}`,
+    x: `https://x.com/intent/tweet?text=${safeText ? `${safeText}%20` : ""}${safeUrl}`,
+    facebook: `https://www.facebook.com/sharer/sharer.php?u=${safeUrl}`,
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${safeUrl}`,
+    whatsapp: `https://wa.me/?text=${safeText ? `${safeText}%20` : ""}${safeUrl}`,
+    telegram: `https://t.me/share/url?url=${safeUrl}&text=${safeText}`
+  };
+}
+function ShareAction({
+  channel,
+  compact,
+  href,
+  onClick
+}) {
+  const label = channelLabels[channel];
+  const Icon = channel === "copy" ? GdsIcons.Copy : channel === "mail" ? GdsIcons.Mail : channel === "message" ? GdsIcons.Message : GdsIcons.Refer;
+  if (compact) {
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.ActionIcon, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "subtle", size: "lg", "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { size: "1rem", stroke: 1.75 }) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.ActionIcon, { variant: "subtle", size: "lg", "aria-label": label, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { size: "1rem", stroke: 1.75 }) });
+  }
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Button, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { size: "1rem", stroke: 1.75 }), children: label }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Button, { variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { size: "1rem", stroke: 1.75 }), onClick, children: label });
+}
+function ShareButtonGroup({
+  url,
+  title,
+  text,
+  channels = ["native", "copy", "mail"],
+  compact = false,
+  label = "Share this",
+  description
+}) {
+  const [copied, setCopied] = (0, import_react6.useState)(false);
+  const [shared, setShared] = (0, import_react6.useState)(false);
+  const hrefs = encodeShare(url, title, text);
+  async function handleCopy() {
+    await navigator.clipboard?.writeText?.(url);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1800);
+  }
+  async function handleNativeShare() {
+    if (navigator.share) {
+      await navigator.share({ url, title, text });
+      setShared(true);
+      setTimeout(() => setShared(false), 1800);
+      return;
+    }
+    await handleCopy();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core41.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core41.Stack, { gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Text, { fw: 600, children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Text, { size: "sm", c: "dimmed", children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Group, { gap: "sm", wrap: "wrap", children: channels.map((channel) => {
+      if (channel === "copy") {
+        return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ShareAction, { channel, compact, onClick: () => void handleCopy() }, channel);
+      }
+      if (channel === "native") {
+        return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ShareAction, { channel, compact, onClick: () => void handleNativeShare() }, channel);
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ShareAction, { channel, compact, href: hrefs[channel] }, channel);
+    }) }),
+    copied ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Text, { size: "sm", c: "teal", children: "Link copied." }) : null,
+    shared ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Text, { size: "sm", c: "teal", children: "Share sheet opened." }) : null
+  ] });
+}
+
 // src/UploadDropzone.tsx
-var import_react4 = require("react");
-var import_core29 = require("@mantine/core");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_core42 = require("@mantine/core");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function UploadDropzone({
   title,
   description,
@@ -1667,8 +2654,8 @@ function UploadDropzone({
   actionLabel = "Choose files",
   mode = "panel"
 }) {
-  const inputRef = (0, import_react4.useRef)(null);
-  const [dragging, setDragging] = (0, import_react4.useState)(false);
+  const inputRef = (0, import_react7.useRef)(null);
+  const [dragging, setDragging] = (0, import_react7.useState)(false);
   const UploadIcon = GdsIcons.Upload;
   const forwardFiles = (files) => {
     if (!files?.length || !onFilesSelected) {
@@ -1676,8 +2663,8 @@ function UploadDropzone({
     }
     onFilesSelected(Array.from(files));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-    import_core29.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    import_core42.Box,
     {
       onDragOver: (event) => {
         event.preventDefault();
@@ -1696,7 +2683,7 @@ function UploadDropzone({
         background: dragging ? "var(--mantine-color-violet-light)" : "transparent"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "input",
           {
             ref: inputRef,
@@ -1707,11 +2694,11 @@ function UploadDropzone({
             onChange: (event) => forwardFiles(event.currentTarget.files)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { align: mode === "inline" ? "flex-start" : "center", ta: mode === "inline" ? "left" : "center", gap: "sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UploadIcon, { size: "1.5rem" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Text, { fw: 600, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Text, { size: "sm", c: "dimmed", children: description }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Button, { variant: "light", onClick: () => inputRef.current?.click(), children: actionLabel }) })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core42.Stack, { align: mode === "inline" ? "flex-start" : "center", ta: mode === "inline" ? "left" : "center", gap: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UploadIcon, { size: "1.5rem" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core42.Text, { fw: 600, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core42.Text, { size: "sm", c: "dimmed", children: description }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core42.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core42.Button, { variant: "light", onClick: () => inputRef.current?.click(), children: actionLabel }) })
         ] })
       ]
     }
@@ -1719,22 +2706,22 @@ function UploadDropzone({
 }
 
 // src/MediaField.tsx
-var import_core31 = require("@mantine/core");
+var import_core44 = require("@mantine/core");
 
 // src/FormField.tsx
-var import_core30 = require("@mantine/core");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_core43 = require("@mantine/core");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function FormField({ label, description, error, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Box, { component: "label", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Stack, { gap: 4, children: [
-    typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Text, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
-    description ? typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Text, { size: "xs", c: "dimmed", children: description }) : description : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core43.Box, { component: "label", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core43.Stack, { gap: 4, children: [
+    typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core43.Text, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
+    description ? typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core43.Text, { size: "xs", c: "dimmed", children: description }) : description : null,
     children,
-    error ? typeof error === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Text, { size: "xs", c: "red.7", children: error }) : error : null
+    error ? typeof error === "string" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core43.Text, { size: "xs", c: "red.7", children: error }) : error : null
   ] }) });
 }
 
 // src/MediaField.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var stateLabels = {
   empty: { label: "Empty", color: "gray" },
   selected: { label: "Selected", color: "blue" },
@@ -1762,32 +2749,32 @@ function MediaField({
   mode = "stacked"
 }) {
   const stateBadge = stateLabels[state];
-  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
-  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core44.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
+  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core44.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     FormField,
     {
       label,
       description,
       error,
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Stack, { gap: "md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Group, { gap: "xs", justify: "flex-end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core44.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core44.Stack, { gap: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core44.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core44.Group, { gap: "xs", justify: "flex-end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core44.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
           statusAction
         ] }) }),
         preview ? preview : null,
-        uploadControl || urlInput ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Stack, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
+        uploadControl || urlInput ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core44.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core44.Stack, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
             uploadControl,
             urlInput
           ] })
         ] }) : null,
-        value ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
-        helpText ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
-        policyText ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
+        value ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core44.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
+        helpText ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core44.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
+        policyText ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core44.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
         typeof error !== "string" && error ? error : null,
-        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Group, { gap: "sm", children: [
+        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core44.Group, { gap: "sm", children: [
           resolvedResetAction,
           retryAction,
           resolvedRemoveAction
@@ -1798,50 +2785,50 @@ function MediaField({
 }
 
 // src/MediaCard.tsx
-var import_core32 = require("@mantine/core");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_core45 = require("@mantine/core");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function MediaCard({ title, image, description, status, overlay, actions = [] }) {
   const EyeIcon = GdsIcons.Eye;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Card, { withBorder: true, radius: "lg", padding: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Card.Section, { pos: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core45.Card, { withBorder: true, radius: "lg", padding: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core45.Card.Section, { pos: "relative", children: [
       image,
-      overlay ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
+      overlay ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Stack, { gap: "sm", mt: "md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Group, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Stack, { gap: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Title, { order: 4, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Text, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core45.Stack, { gap: "sm", mt: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core45.Group, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core45.Stack, { gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core45.Title, { order: 4, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core45.Text, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
         ] }),
-        status ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Badge, { variant: "light", children: status }) : null
+        status ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core45.Badge, { variant: "light", children: status }) : null
       ] }),
-      actions.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
+      actions.length ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core45.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core45.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
     ] })
   ] });
 }
 
 // src/AccessSummary.tsx
-var import_core33 = require("@mantine/core");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_core46 = require("@mantine/core");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function AccessSummary({ title, roles, scope, blocked = false, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Group, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Title, { order: 4, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Badge, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core46.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core46.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core46.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core46.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core46.Badge, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Badge, { variant: "outline", children: role }, role)) }),
-    scope ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Text, { size: "sm", c: "dimmed", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core46.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core46.Badge, { variant: "outline", children: role }, role)) }),
+    scope ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core46.Text, { size: "sm", c: "dimmed", children: [
       "Scope: ",
       scope
     ] }) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Text, { size: "sm", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core46.Text, { size: "sm", children: description }) : null
   ] }) });
 }
 
 // src/AccessRecoveryPanel.tsx
-var import_core34 = require("@mantine/core");
-var import_gds_theme3 = require("@doneisbetter/gds-theme");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_core47 = require("@mantine/core");
+var import_gds_theme4 = require("@doneisbetter/gds-theme");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var stateBlockVariantByState = {
   unauthenticated: "permission",
   "expired-session": "info",
@@ -1910,7 +2897,7 @@ function ActionGroup({
   if (actions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.Group, { gap: "sm", justify: "center", wrap: "wrap", children: actions.map((actionConfig, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core47.Group, { gap: "sm", justify: "center", wrap: "wrap", children: actions.map((actionConfig, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     SemanticButton,
     {
       action: actionConfig.action,
@@ -1936,7 +2923,7 @@ function AccessRecoveryPanel({
   supportAction,
   compact = false
 }) {
-  const { t } = (0, import_gds_theme3.useGdsTranslation)();
+  const { t } = (0, import_gds_theme4.useGdsTranslation)();
   const defaultCopy = defaultCopyByState[state];
   const defaults = defaultActionsForState(state, {
     onRetry,
@@ -1944,14 +2931,14 @@ function AccessRecoveryPanel({
     onBack,
     supportAction
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     StateBlock,
     {
       variant: stateBlockVariantByState[state],
       compact,
       title: title ?? t(`gds.accessRecovery.${state}.title`, defaultCopy.title),
       description: description ?? t(`gds.accessRecovery.${state}.description`, defaultCopy.description),
-      action: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      action: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         ActionGroup,
         {
           primaryAction: primaryAction ?? defaults.primary,
@@ -1964,29 +2951,31 @@ function AccessRecoveryPanel({
 }
 
 // src/PageHeader.tsx
-var import_core35 = require("@mantine/core");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_core48 = require("@mantine/core");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function PageHeader({
   title,
   description,
+  subtitle,
   eyebrow,
   actions,
   eyebrowVariant = "neutral"
 }) {
+  const resolvedDescription = description ?? subtitle;
   const eyebrowProps = eyebrowVariant === "ornamental" ? { tt: "uppercase", style: { letterSpacing: "0.12em" } } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core35.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core35.Stack, { gap: "xs", children: [
-      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Title, { order: 1, children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Text, { c: "dimmed", maw: 720, children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core48.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core48.Stack, { gap: "xs", children: [
+      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core48.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core48.Title, { order: 1, children: title }),
+      resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core48.Text, { c: "dimmed", maw: 720, children: resolvedDescription })
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Box, { children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core48.Box, { children: actions }) : null
   ] });
 }
 
 // src/FilterDrawer.tsx
-var import_core36 = require("@mantine/core");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_core49 = require("@mantine/core");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function FilterDrawer({
   opened,
   onClose,
@@ -2002,8 +2991,8 @@ function FilterDrawer({
 }) {
   const resolvedPrimaryAction = applyAction ?? primaryAction;
   const resolvedSecondaryAction = resetAction ?? secondaryAction;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_core36.Drawer,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    import_core49.Drawer,
     {
       opened,
       onClose,
@@ -2011,11 +3000,11 @@ function FilterDrawer({
       position: mode === "bottom-sheet" ? "bottom" : "right",
       size: mode === "bottom-sheet" ? "auto" : "md",
       radius: mode === "bottom-sheet" ? "xl" : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Stack, { gap: "md", children: [
-        description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Text, { size: "sm", c: "dimmed", children: description }) : null,
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core49.Stack, { gap: "md", children: [
+        description ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core49.Text, { size: "sm", c: "dimmed", children: description }) : null,
         children,
-        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Group, { justify: "space-between", mt: "md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Group, { gap: "sm", children: [
+        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core49.Group, { justify: "space-between", mt: "md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core49.Group, { gap: "sm", children: [
             closeAction,
             resolvedSecondaryAction
           ] }),
@@ -2027,8 +3016,8 @@ function FilterDrawer({
 }
 
 // src/PlaceholderPanel.tsx
-var import_core37 = require("@mantine/core");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_core50 = require("@mantine/core");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function PlaceholderPanel({
   title,
   description,
@@ -2038,16 +3027,16 @@ function PlaceholderPanel({
   mode
 }) {
   if (mode === "live" && children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Stack, { gap: "md", children: [
-    badge ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Title, { order: 4, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Text, { c: "dimmed", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core50.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core50.Stack, { gap: "md", children: [
+    badge ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core50.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core50.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core50.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core50.Text, { c: "dimmed", children: description })
     ] }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Text, { size: "sm", children: footer }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core50.Text, { size: "sm", children: footer }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -2060,8 +3049,8 @@ function PlaceholderPanel({
 }
 
 // src/SimpleDataTable.tsx
-var import_core38 = require("@mantine/core");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_core51 = require("@mantine/core");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function SimpleDataTable({
   columns,
   rows,
@@ -2072,23 +3061,23 @@ function SimpleDataTable({
   getRowKey
 }) {
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
   }
   if (!rows.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core38.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Table.Th, { children: column.header }, String(column.key))) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core51.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_core51.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core51.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core51.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core51.Table.Th, { children: column.header }, String(column.key))) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core51.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core51.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core51.Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
   ] }) });
 }
 
 // src/StatsSection.tsx
-var import_core39 = require("@mantine/core");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_core52 = require("@mantine/core");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function StatsSection({
   title,
   loading = false,
@@ -2100,11 +3089,11 @@ function StatsSection({
 }) {
   let content = children;
   if (error) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
   } else if (loading) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
   } else if (belowThreshold) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -2114,10 +3103,10 @@ function StatsSection({
       }
     );
   } else if (placeholder) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
+    content = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core39.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Title, { order: 3, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core52.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core52.Title, { order: 3, children: title }),
     content
   ] });
 }
@@ -3429,14 +4418,18 @@ function getGdsMessages(locale) {
   AccentPanel,
   AccessRecoveryPanel,
   AccessSummary,
+  ActionBar,
   ArticleShell,
   AuthShell,
   BrowseSurface,
+  ChoiceChip,
   ConfirmDialog,
   ConsumerDashboardGrid,
   ConsumerSection,
   CtaButtonGroup,
   DataToolbar,
+  DetailProfileShell,
+  DiscoveryShell,
   DocsCodeBlock,
   DocsPageShell,
   EditorialCard,
@@ -3444,40 +4437,56 @@ function getGdsMessages(locale) {
   EmptyState,
   FeatureBand,
   FilterDrawer,
+  FoodMenuSection,
   FormField,
   GameBoardTile,
   GdsIcons,
   GdsVocabulary,
+  ListingCard,
+  MapPanel,
   MediaCard,
   MediaField,
   MetricCard,
   PageHeader,
   PlaceholderPanel,
+  PlaybackSurface,
   ProductCard,
   ProgressCard,
   PublicBrandFooter,
+  PublicFlowShell,
+  PublicFoodCard,
   PublicNav,
   PublicProductCard,
   PublicShell,
   PublicSiteFooter,
   SectionPanel,
   SemanticButton,
+  ShareButtonGroup,
+  SidebarNav,
+  SidebarNavItem,
+  SidebarNavSection,
   SimpleDataTable,
+  SocialAuthButtons,
   StateBlock,
   StatsSection,
   StatusBadge,
   ThemeToggle,
   UploadDropzone,
   ar,
+  createGdsVocabularyPack,
   de,
   en,
   es,
   fr,
   gdsLocales,
   getGdsMessages,
+  getSemanticActionConfig,
+  getSemanticActionLabel,
   he,
   hu,
   it,
+  mergeGdsVocabularyPacks,
   resolveAccentPanelStyles,
+  resolveSemanticActionConfig,
   ru
 });