@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.1-develop.7204.1.83330e271e

package/dist/modules/design_system/gallery/entries/navigation.js

@@ -1,5 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Label } from "@open-mercato/ui/primitives/label";
 import { CreditCard, LayoutGrid, Settings, ShoppingCart, Truck } from "lucide-react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@open-mercato/ui/primitives/tabs";
 import {
@@ -22,12 +24,18 @@ import {
   AccordionItem,
   AccordionTrigger
 } from "@open-mercato/ui/primitives/accordion";
-function PaginationBasicDemo() {
+import { SidebarFeatureExample, SidebarIdentityExample, SidebarItemsExample, TopbarExample, NavigationBrandsExample } from "../demos/shell.js";
+import { shellExampleCode } from "../demos/shell-code.generated.js";
+import { AiPromptExample, AiIconButtonExamples, AiNavigationExamples, AiSearchExamples, AiAuthExamples, AiSettingsExamples, AiNewChatExample, AiSidebarExample, AiMobileNavigationExample } from "../demos/ai-product.js";
+import { aiProductExampleCode } from "../demos/ai-product-code.generated.js";
+function PaginationBasicDemo({ appearance, disabled = false }) {
   const [page, setPage] = React.useState(2);
   const [pageSize, setPageSize] = React.useState(25);
   return /* @__PURE__ */ jsx(
     Pagination,
     {
+      appearance,
+      disabled,
       page,
       pageSize,
       total: 400,
@@ -50,6 +58,77 @@ function PaginationCompactDemo() {
     }
   );
 }
+function TabsQuantityDemo({ variant, orientation }) {
+  const t = useT();
+  const counts = orientation === "vertical" ? [2, 3, 4, 5, 6, 7, 8] : [2, 3, 4, 5, 6];
+  return /* @__PURE__ */ jsx("div", { className: orientation === "vertical" ? "grid w-full gap-6 xl:grid-cols-2" : "flex w-full flex-col gap-6", children: counts.map((count) => /* @__PURE__ */ jsxs(Tabs, { defaultValue: "1", variant, orientation, className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs(TabsList, { "aria-label": t("design_system.gallery.examples.navigation2.sections", { count }), className: orientation === "vertical" ? "w-64 shrink-0" : "flex w-full overflow-x-auto", children: [
+      orientation === "vertical" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "px-2 py-1 text-xs font-medium uppercase text-muted-foreground", children: t("design_system.gallery.examples.navigation2.selectMenu") }),
+      Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(TabsTrigger, { value: String(index + 1), leading: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-5" }), count: index === 1 ? 12 : void 0, children: t("design_system.gallery.examples.navigation2.section", { number: index + 1 }) }, index))
+    ] }),
+    Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(TabsContent, { value: String(index + 1), className: "text-sm text-muted-foreground", children: t("design_system.gallery.examples.navigation2.panel", { number: index + 1 }) }, index))
+  ] }, count)) });
+}
+function TabsKeyboardDemo() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Tabs, { defaultValue: "overview", variant: "underline", className: "w-full", children: [
+    /* @__PURE__ */ jsxs(TabsList, { "aria-label": t("design_system.gallery.examples.navigation2.keyboard"), children: [
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "overview", leading: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-5" }), children: t("design_system.gallery.examples.navigation2.overview") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "locked", disabled: true, count: 4, children: t("design_system.gallery.examples.navigation2.locked") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "settings", leading: /* @__PURE__ */ jsx(Settings, { className: "size-5" }), children: t("design_system.gallery.examples.navigation2.settings") })
+    ] }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "overview", children: t("design_system.gallery.examples.navigation2.keyboardHint") }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "settings", children: t("design_system.gallery.examples.navigation2.settingsPanel") })
+  ] });
+}
+function BreadcrumbQuantityDemo() {
+  const t = useT();
+  const targetId = React.useId();
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
+    ["arrow", "slash", "dot"].map((divider) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: [3, 4, 5].map((count) => /* @__PURE__ */ jsx(Breadcrumb, { divider, "aria-label": t("design_system.gallery.examples.navigation2.path", { count }), children: /* @__PURE__ */ jsx(BreadcrumbList, { className: "flex-wrap", children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "size-5 justify-center", children: divider === "dot" ? "\u2022" : void 0 }),
+      /* @__PURE__ */ jsx(BreadcrumbItem, { children: index === count - 1 ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: t("design_system.gallery.examples.navigation2.section", { number: index + 1 }) }) : /* @__PURE__ */ jsxs(BreadcrumbLink, { href: `#${targetId}`, children: [
+        /* @__PURE__ */ jsx(LayoutGrid, { className: "size-5", "aria-hidden": "true" }),
+        t("design_system.gallery.examples.navigation2.section", { number: index + 1 })
+      ] }) })
+    ] }, index)) }) }, count)) }, divider)),
+    /* @__PURE__ */ jsx("p", { id: targetId, tabIndex: -1, className: "text-sm text-muted-foreground", children: t("design_system.gallery.examples.navigation2.localDestination") })
+  ] });
+}
+function AccordionStartDemo() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Accordion, { type: "single", collapsible: true, defaultValue: "details", className: "w-full max-w-md space-y-2", children: [
+    /* @__PURE__ */ jsxs(AccordionItem, { value: "overview", children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { iconPosition: "start", children: t("design_system.gallery.examples.navigation2.overview") }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: t("design_system.gallery.examples.navigation2.accordionBody") })
+    ] }),
+    /* @__PURE__ */ jsxs(AccordionItem, { value: "details", children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { iconPosition: "start", children: t("design_system.gallery.examples.navigation2.settings") }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: t("design_system.gallery.examples.navigation2.accordionBody") })
+    ] }),
+    /* @__PURE__ */ jsxs(AccordionItem, { value: "locked", disabled: true, children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { iconPosition: "start", children: t("design_system.gallery.examples.navigation2.locked") }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: t("design_system.gallery.examples.navigation2.accordionBody") })
+    ] })
+  ] });
+}
+function SegmentedSourceDemo({ content }) {
+  const t = useT();
+  const labelId = React.useId();
+  const [value, setValue] = React.useState("overview");
+  const options = [
+    { value: "overview", label: t("design_system.gallery.examples.navigation2.overview"), icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-5", "aria-hidden": "true" }) },
+    { value: "settings", label: t("design_system.gallery.examples.navigation2.settings"), icon: /* @__PURE__ */ jsx(Settings, { className: "size-5", "aria-hidden": "true" }) },
+    { value: "orders", label: t("design_system.gallery.examples.navigation2.orders"), icon: /* @__PURE__ */ jsx(ShoppingCart, { className: "size-5", "aria-hidden": "true" }) }
+  ];
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-sm flex-col gap-6", children: [false, true].map((disabled) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { id: `${labelId}-${disabled}`, className: "leading-5", children: disabled ? t("design_system.gallery.examples.navigation2.locked") : t("design_system.gallery.examples.navigation2.selectMenu") }),
+    /* @__PURE__ */ jsx(SegmentedControl, { value, onValueChange: setValue, disabled, "aria-labelledby": `${labelId}-${disabled}`, className: "h-9 w-full gap-1 rounded-lg border-0 p-1", children: options.map((option) => /* @__PURE__ */ jsxs(SegmentedControlItem, { value: option.value, "aria-label": content === "icon" ? option.label : void 0, className: "h-7 min-w-0 flex-1 gap-1.5 rounded-md p-1", children: [
+      content !== "text" && option.icon,
+      content !== "icon" && option.label
+    ] }, option.value)) })
+  ] }, String(disabled))) });
+}
 const tabsEntry = {
   id: "tabs",
   title: "Tabs",
@@ -69,16 +148,7 @@ const tabsEntry = {
       title: "underline",
       // Underline is the DS canon for page-level tab strips — flat rail
       // with an accent underline, per-tab `leading` icon and `count` badge.
-      render: () => /* @__PURE__ */ jsxs(Tabs, { defaultValue: "orders", variant: "underline", className: "w-full", children: [
-        /* @__PURE__ */ jsxs(TabsList, { "aria-label": "Customer sections", children: [
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "overview", leading: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }), children: "Overview" }),
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "orders", leading: /* @__PURE__ */ jsx(ShoppingCart, { className: "size-4" }), count: 12, children: "Orders" }),
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "settings", leading: /* @__PURE__ */ jsx(Settings, { className: "size-4" }), children: "Settings" })
-        ] }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "overview", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Customer overview panel." }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "orders", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "12 orders in the last 30 days." }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "settings", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Notification and access settings." }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(TabsNavigationUnderlineSample, {}),
       code: `import { LayoutGrid, Settings, ShoppingCart } from 'lucide-react'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 
@@ -96,16 +166,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primi
     {
       id: "pill",
       title: "pill (default)",
-      render: () => /* @__PURE__ */ jsxs(Tabs, { defaultValue: "preview", children: [
-        /* @__PURE__ */ jsxs(TabsList, { "aria-label": "Editor view", children: [
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "preview", children: "Preview" }),
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "code", children: "Code" }),
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "logs", children: "Logs" })
-        ] }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "preview", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Rendered preview." }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "code", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Source code panel." }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "logs", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Runtime logs panel." }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(TabsNavigationPillSample, {}),
       code: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 
 <Tabs defaultValue="preview">
@@ -122,16 +183,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primi
     {
       id: "pill-vertical",
       title: "pill, vertical",
-      render: () => /* @__PURE__ */ jsxs(Tabs, { defaultValue: "profile", orientation: "vertical", className: "w-full", children: [
-        /* @__PURE__ */ jsxs(TabsList, { "aria-label": "Account settings", children: [
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "profile", children: "Profile" }),
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "billing", children: "Billing" }),
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "security", children: "Security" })
-        ] }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "profile", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Profile settings panel." }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "billing", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Billing settings panel." }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "security", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Security settings panel." }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(TabsNavigationPillVerticalSample, {}),
       code: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 
 <Tabs defaultValue="profile" orientation="vertical">
@@ -144,11 +196,123 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primi
   <TabsContent value="billing">\u2026</TabsContent>
   <TabsContent value="security">\u2026</TabsContent>
 </Tabs>`
+    },
+    {
+      id: "underline-quantities",
+      title: "underline \xB7 all source counts",
+      render: () => /* @__PURE__ */ jsx(TabsQuantityDemo, { variant: "underline", orientation: "horizontal" }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { LayoutGrid, Settings } from 'lucide-react'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@open-mercato/ui/primitives/tabs'
+
+function TabsQuantityDemo({ variant, orientation }: { variant: 'underline' | 'card' | 'list'; orientation: 'horizontal' | 'vertical' }) {
+  const t = useT()
+  const counts = orientation === 'vertical' ? [2, 3, 4, 5, 6, 7, 8] : [2, 3, 4, 5, 6]
+  return <div className={orientation === 'vertical' ? 'grid w-full gap-6 xl:grid-cols-2' : 'flex w-full flex-col gap-6'}>
+    {counts.map(count => <Tabs key={count} defaultValue="1" variant={variant} orientation={orientation} className="min-w-0">
+      <TabsList aria-label={t('design_system.gallery.examples.navigation2.sections', { count })} className={orientation === 'vertical' ? 'w-64 shrink-0' : 'flex w-full overflow-x-auto'}>
+        {orientation === 'vertical' && <span aria-hidden="true" className="px-2 py-1 text-xs font-medium uppercase text-muted-foreground">{t('design_system.gallery.examples.navigation2.selectMenu')}</span>}
+        {Array.from({ length: count }, (_, index) => <TabsTrigger key={index} value={String(index + 1)} leading={<LayoutGrid className="size-5" />} count={index === 1 ? 12 : undefined}>
+          {t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}
+        </TabsTrigger>)}
+      </TabsList>
+      {Array.from({ length: count }, (_, index) => <TabsContent key={index} value={String(index + 1)} className="text-sm text-muted-foreground">
+        {t('design_system.gallery.examples.navigation2.panel', { number: index + 1 })}
+      </TabsContent>)}
+    </Tabs>)}
+  </div>
+}
+
+<TabsQuantityDemo variant="underline" orientation="horizontal" />`
+    },
+    {
+      id: "card-quantities",
+      title: "card \xB7 all source counts",
+      render: () => /* @__PURE__ */ jsx(TabsQuantityDemo, { variant: "card", orientation: "vertical" }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { LayoutGrid, Settings } from 'lucide-react'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@open-mercato/ui/primitives/tabs'
+
+function TabsQuantityDemo({ variant, orientation }: { variant: 'underline' | 'card' | 'list'; orientation: 'horizontal' | 'vertical' }) {
+  const t = useT()
+  const counts = orientation === 'vertical' ? [2, 3, 4, 5, 6, 7, 8] : [2, 3, 4, 5, 6]
+  return <div className={orientation === 'vertical' ? 'grid w-full gap-6 xl:grid-cols-2' : 'flex w-full flex-col gap-6'}>
+    {counts.map(count => <Tabs key={count} defaultValue="1" variant={variant} orientation={orientation} className="min-w-0">
+      <TabsList aria-label={t('design_system.gallery.examples.navigation2.sections', { count })} className={orientation === 'vertical' ? 'w-64 shrink-0' : 'flex w-full overflow-x-auto'}>
+        {orientation === 'vertical' && <span aria-hidden="true" className="px-2 py-1 text-xs font-medium uppercase text-muted-foreground">{t('design_system.gallery.examples.navigation2.selectMenu')}</span>}
+        {Array.from({ length: count }, (_, index) => <TabsTrigger key={index} value={String(index + 1)} leading={<LayoutGrid className="size-5" />} count={index === 1 ? 12 : undefined}>
+          {t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}
+        </TabsTrigger>)}
+      </TabsList>
+      {Array.from({ length: count }, (_, index) => <TabsContent key={index} value={String(index + 1)} className="text-sm text-muted-foreground">
+        {t('design_system.gallery.examples.navigation2.panel', { number: index + 1 })}
+      </TabsContent>)}
+    </Tabs>)}
+  </div>
+}
+
+<TabsQuantityDemo variant="card" orientation="vertical" />`
+    },
+    {
+      id: "list-quantities",
+      title: "list \xB7 all source counts",
+      render: () => /* @__PURE__ */ jsx(TabsQuantityDemo, { variant: "list", orientation: "vertical" }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { LayoutGrid, Settings } from 'lucide-react'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@open-mercato/ui/primitives/tabs'
+
+function TabsQuantityDemo({ variant, orientation }: { variant: 'underline' | 'card' | 'list'; orientation: 'horizontal' | 'vertical' }) {
+  const t = useT()
+  const counts = orientation === 'vertical' ? [2, 3, 4, 5, 6, 7, 8] : [2, 3, 4, 5, 6]
+  return <div className={orientation === 'vertical' ? 'grid w-full gap-6 xl:grid-cols-2' : 'flex w-full flex-col gap-6'}>
+    {counts.map(count => <Tabs key={count} defaultValue="1" variant={variant} orientation={orientation} className="min-w-0">
+      <TabsList aria-label={t('design_system.gallery.examples.navigation2.sections', { count })} className={orientation === 'vertical' ? 'w-64 shrink-0' : 'flex w-full overflow-x-auto'}>
+        {orientation === 'vertical' && <span aria-hidden="true" className="px-2 py-1 text-xs font-medium uppercase text-muted-foreground">{t('design_system.gallery.examples.navigation2.selectMenu')}</span>}
+        {Array.from({ length: count }, (_, index) => <TabsTrigger key={index} value={String(index + 1)} leading={<LayoutGrid className="size-5" />} count={index === 1 ? 12 : undefined}>
+          {t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}
+        </TabsTrigger>)}
+      </TabsList>
+      {Array.from({ length: count }, (_, index) => <TabsContent key={index} value={String(index + 1)} className="text-sm text-muted-foreground">
+        {t('design_system.gallery.examples.navigation2.panel', { number: index + 1 })}
+      </TabsContent>)}
+    </Tabs>)}
+  </div>
+}
+
+<TabsQuantityDemo variant="list" orientation="vertical" />`
+    },
+    {
+      id: "keyboard-states",
+      title: "Keyboard and disabled tabs",
+      render: () => /* @__PURE__ */ jsx(TabsKeyboardDemo, {}),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { LayoutGrid, Settings } from 'lucide-react'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@open-mercato/ui/primitives/tabs'
+
+function TabsKeyboardDemo() {
+  const t = useT()
+  return <Tabs defaultValue="overview" variant="underline" className="w-full">
+    <TabsList aria-label={t('design_system.gallery.examples.navigation2.keyboard')}>
+      <TabsTrigger value="overview" leading={<LayoutGrid className="size-5" />}>{t('design_system.gallery.examples.navigation2.overview')}</TabsTrigger>
+      <TabsTrigger value="locked" disabled count={4}>{t('design_system.gallery.examples.navigation2.locked')}</TabsTrigger>
+      <TabsTrigger value="settings" leading={<Settings className="size-5" />}>{t('design_system.gallery.examples.navigation2.settings')}</TabsTrigger>
+    </TabsList>
+    <TabsContent value="overview">{t('design_system.gallery.examples.navigation2.keyboardHint')}</TabsContent>
+    <TabsContent value="settings">{t('design_system.gallery.examples.navigation2.settingsPanel')}</TabsContent>
+  </Tabs>
+}
+
+<TabsKeyboardDemo />`
     }
   ]
 };
 const breadcrumbEntry = {
   id: "breadcrumb",
+  figmaNodeId: "447:8832",
   title: "Breadcrumb",
   importPath: "@open-mercato/ui/primitives/breadcrumb",
   docsAnchor: "#breadcrumb",
@@ -156,13 +320,7 @@ const breadcrumbEntry = {
     {
       id: "slash",
       title: "slash (default)",
-      render: () => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
-        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "Dashboard" }) }),
-        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
-        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "Products" }) }),
-        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
-        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: "Winter catalog" }) })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(BreadcrumbNavigationSlashSample, {}),
       code: `import {
   Breadcrumb,
   BreadcrumbItem,
@@ -191,13 +349,7 @@ const breadcrumbEntry = {
     {
       id: "arrow",
       title: "arrow divider",
-      render: () => /* @__PURE__ */ jsx(Breadcrumb, { divider: "arrow", children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
-        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "Orders" }) }),
-        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
-        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "#20418" }) }),
-        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
-        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: "Shipment" }) })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(BreadcrumbNavigationArrowSample, {}),
       code: `import {
   Breadcrumb,
   BreadcrumbItem,
@@ -226,15 +378,7 @@ const breadcrumbEntry = {
     {
       id: "ellipsis",
       title: "collapsed (ellipsis)",
-      render: () => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
-        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "Dashboard" }) }),
-        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
-        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}) }),
-        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
-        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "Attributes" }) }),
-        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
-        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: "Color" }) })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(BreadcrumbNavigationEllipsisSample, {}),
       code: `import {
   Breadcrumb,
   BreadcrumbEllipsis,
@@ -264,6 +408,39 @@ const breadcrumbEntry = {
     </BreadcrumbItem>
   </BreadcrumbList>
 </Breadcrumb>`
+    },
+    {
+      id: "dividers-quantities",
+      title: "Arrow / Slash / Dot \xB73,4,5items",
+      render: () => /* @__PURE__ */ jsx(BreadcrumbQuantityDemo, {}),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { LayoutGrid } from 'lucide-react'
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbLink, BreadcrumbPage } from '@open-mercato/ui/primitives/breadcrumb'
+
+function BreadcrumbQuantityDemo() {
+  const t = useT()
+  const targetId = React.useId()
+  return <div className="flex w-full flex-col gap-4">
+    {(['arrow', 'slash', 'dot'] as const).map(divider => <div key={divider} className="flex flex-col gap-4">
+      {[3, 4, 5].map(count => <Breadcrumb key={count} divider={divider} aria-label={t('design_system.gallery.examples.navigation2.path', { count })}>
+        <BreadcrumbList className="flex-wrap">
+          {Array.from({ length: count }, (_, index) => <React.Fragment key={index}>
+            {index > 0 && <BreadcrumbSeparator className="size-5 justify-center">{divider === 'dot' ? '\u2022' : undefined}</BreadcrumbSeparator>}
+            <BreadcrumbItem>
+              {index === count - 1
+                ? <BreadcrumbPage>{t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}</BreadcrumbPage>
+                : <BreadcrumbLink href={\`#\${targetId}\`}><LayoutGrid className="size-5" aria-hidden="true" />{t('design_system.gallery.examples.navigation2.section', { number: index + 1 })}</BreadcrumbLink>}
+            </BreadcrumbItem>
+          </React.Fragment>)}
+        </BreadcrumbList>
+      </Breadcrumb>)}
+    </div>)}
+    <p id={targetId} tabIndex={-1} className="text-sm text-muted-foreground">{t('design_system.gallery.examples.navigation2.localDestination')}</p>
+  </div>
+}
+
+<BreadcrumbQuantityDemo />`
     }
   ]
 };
@@ -272,6 +449,7 @@ const paginationEntry = {
   title: "Pagination",
   importPath: "@open-mercato/ui/primitives/pagination",
   docsAnchor: "#pagination",
+  figmaNodeId: "513:3892",
   variants: [
     {
       id: "basic",
@@ -307,12 +485,90 @@ const [page, setPage] = React.useState(1)
   onPageChange={setPage}
   showFirstLast={false}
   showPageSize={false}
+/>`
+    },
+    {
+      id: "source-basic",
+      title: "Basic cells",
+      render: () => /* @__PURE__ */ jsx(PaginationBasicDemo, { appearance: "basic" }),
+      code: `import * as React from 'react'
+import { Pagination } from '@open-mercato/ui/primitives/pagination'
+
+const [page, setPage] = React.useState(2)
+const [pageSize, setPageSize] = React.useState(25)
+
+<Pagination
+  appearance="basic"
+  page={page}
+  pageSize={pageSize}
+  total={400}
+  onPageChange={setPage}
+  onPageSizeChange={setPageSize}
+/>`
+    },
+    {
+      id: "circle",
+      title: "Full radius",
+      render: () => /* @__PURE__ */ jsx(PaginationBasicDemo, { appearance: "circle" }),
+      code: `import * as React from 'react'
+import { Pagination } from '@open-mercato/ui/primitives/pagination'
+
+const [page, setPage] = React.useState(2)
+const [pageSize, setPageSize] = React.useState(25)
+
+<Pagination
+  appearance="circle"
+  page={page}
+  pageSize={pageSize}
+  total={400}
+  onPageChange={setPage}
+  onPageSizeChange={setPageSize}
+/>`
+    },
+    {
+      id: "group",
+      title: "Connected group",
+      render: () => /* @__PURE__ */ jsx(PaginationBasicDemo, { appearance: "group" }),
+      code: `import * as React from 'react'
+import { Pagination } from '@open-mercato/ui/primitives/pagination'
+
+const [page, setPage] = React.useState(2)
+const [pageSize, setPageSize] = React.useState(25)
+
+<Pagination
+  appearance="group"
+  page={page}
+  pageSize={pageSize}
+  total={400}
+  onPageChange={setPage}
+  onPageSizeChange={setPageSize}
+/>`
+    },
+    {
+      id: "disabled",
+      title: "Disabled states",
+      render: () => /* @__PURE__ */ jsx(PaginationBasicDemo, { appearance: "circle", disabled: true }),
+      code: `import * as React from 'react'
+import { Pagination } from '@open-mercato/ui/primitives/pagination'
+
+const [page, setPage] = React.useState(2)
+const [pageSize, setPageSize] = React.useState(25)
+
+<Pagination
+  appearance="circle"
+  page={page}
+  pageSize={pageSize}
+  total={400}
+  onPageChange={setPage}
+  onPageSizeChange={setPageSize}
+  disabled
 />`
     }
   ]
 };
 const segmentedControlEntry = {
   id: "segmented-control",
+  figmaNodeId: "2604:114",
   title: "SegmentedControl",
   importPath: "@open-mercato/ui/primitives/segmented-control",
   docsAnchor: "#segmentedcontrol",
@@ -320,11 +576,7 @@ const segmentedControlEntry = {
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsxs(SegmentedControl, { defaultValue: "all", "aria-label": "View filter", children: [
-        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "all", children: "All" }),
-        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "active", children: "Active" }),
-        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "archived", children: "Archived" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(SegmentedControlNavigationDefaultSample, {}),
       code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
 
 <SegmentedControl defaultValue="all" aria-label="View filter">
@@ -336,12 +588,7 @@ const segmentedControlEntry = {
     {
       id: "small",
       title: "Small",
-      render: () => /* @__PURE__ */ jsxs(SegmentedControl, { size: "sm", defaultValue: "30d", "aria-label": "Chart period", children: [
-        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "7d", children: "7d" }),
-        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "30d", children: "30d" }),
-        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "90d", children: "90d" }),
-        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "1y", children: "1y" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(SegmentedControlNavigationSmallSample, {}),
       code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
 
 <SegmentedControl size="sm" defaultValue="30d" aria-label="Chart period">
@@ -354,21 +601,121 @@ const segmentedControlEntry = {
     {
       id: "disabled",
       title: "Disabled",
-      render: () => /* @__PURE__ */ jsxs(SegmentedControl, { defaultValue: "list", disabled: true, "aria-label": "Layout", children: [
-        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "list", children: "List" }),
-        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "grid", children: "Grid" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(SegmentedControlNavigationDisabledSample, {}),
       code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
 
 <SegmentedControl defaultValue="list" disabled aria-label="Layout">
   <SegmentedControlItem value="list">List</SegmentedControlItem>
   <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
 </SegmentedControl>`
+    },
+    {
+      id: "source-text",
+      title: "Label shell \xB7 text",
+      render: () => /* @__PURE__ */ jsx(SegmentedSourceDemo, { content: "text" }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { LayoutGrid, Settings, ShoppingCart } from 'lucide-react'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+
+function SegmentedSourceDemo({ content }: { content: 'text' | 'leading' | 'icon' }) {
+  const t = useT()
+  const labelId = React.useId()
+  const [value, setValue] = React.useState('overview')
+  const options = [
+    { value: 'overview', label: t('design_system.gallery.examples.navigation2.overview'), icon: <LayoutGrid className="size-5" aria-hidden="true" /> },
+    { value: 'settings', label: t('design_system.gallery.examples.navigation2.settings'), icon: <Settings className="size-5" aria-hidden="true" /> },
+    { value: 'orders', label: t('design_system.gallery.examples.navigation2.orders'), icon: <ShoppingCart className="size-5" aria-hidden="true" /> },
+  ]
+  return <div className="flex w-full max-w-sm flex-col gap-6">
+    {[false, true].map(disabled => <div key={String(disabled)} className="flex flex-col gap-1.5">
+      <Label id={\`\${labelId}-\${disabled}\`} className="leading-5">{disabled ? t('design_system.gallery.examples.navigation2.locked') : t('design_system.gallery.examples.navigation2.selectMenu')}</Label>
+      <SegmentedControl value={value} onValueChange={setValue} disabled={disabled} aria-labelledby={\`\${labelId}-\${disabled}\`} className="h-9 w-full gap-1 rounded-lg border-0 p-1">
+        {options.map(option => <SegmentedControlItem key={option.value} value={option.value} aria-label={content === 'icon' ? option.label : undefined} className="h-7 min-w-0 flex-1 gap-1.5 rounded-md p-1">
+          {content !== 'text' && option.icon}
+          {content !== 'icon' && option.label}
+        </SegmentedControlItem>)}
+      </SegmentedControl>
+    </div>)}
+  </div>
+}
+
+<SegmentedSourceDemo content="text" />`
+    },
+    {
+      id: "source-leading",
+      title: "Label shell \xB7 leading",
+      render: () => /* @__PURE__ */ jsx(SegmentedSourceDemo, { content: "leading" }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { LayoutGrid, Settings, ShoppingCart } from 'lucide-react'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+
+function SegmentedSourceDemo({ content }: { content: 'text' | 'leading' | 'icon' }) {
+  const t = useT()
+  const labelId = React.useId()
+  const [value, setValue] = React.useState('overview')
+  const options = [
+    { value: 'overview', label: t('design_system.gallery.examples.navigation2.overview'), icon: <LayoutGrid className="size-5" aria-hidden="true" /> },
+    { value: 'settings', label: t('design_system.gallery.examples.navigation2.settings'), icon: <Settings className="size-5" aria-hidden="true" /> },
+    { value: 'orders', label: t('design_system.gallery.examples.navigation2.orders'), icon: <ShoppingCart className="size-5" aria-hidden="true" /> },
+  ]
+  return <div className="flex w-full max-w-sm flex-col gap-6">
+    {[false, true].map(disabled => <div key={String(disabled)} className="flex flex-col gap-1.5">
+      <Label id={\`\${labelId}-\${disabled}\`} className="leading-5">{disabled ? t('design_system.gallery.examples.navigation2.locked') : t('design_system.gallery.examples.navigation2.selectMenu')}</Label>
+      <SegmentedControl value={value} onValueChange={setValue} disabled={disabled} aria-labelledby={\`\${labelId}-\${disabled}\`} className="h-9 w-full gap-1 rounded-lg border-0 p-1">
+        {options.map(option => <SegmentedControlItem key={option.value} value={option.value} aria-label={content === 'icon' ? option.label : undefined} className="h-7 min-w-0 flex-1 gap-1.5 rounded-md p-1">
+          {content !== 'text' && option.icon}
+          {content !== 'icon' && option.label}
+        </SegmentedControlItem>)}
+      </SegmentedControl>
+    </div>)}
+  </div>
+}
+
+<SegmentedSourceDemo content="leading" />`
+    },
+    {
+      id: "source-icon",
+      title: "Label shell \xB7 icon",
+      render: () => /* @__PURE__ */ jsx(SegmentedSourceDemo, { content: "icon" }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { LayoutGrid, Settings, ShoppingCart } from 'lucide-react'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+
+function SegmentedSourceDemo({ content }: { content: 'text' | 'leading' | 'icon' }) {
+  const t = useT()
+  const labelId = React.useId()
+  const [value, setValue] = React.useState('overview')
+  const options = [
+    { value: 'overview', label: t('design_system.gallery.examples.navigation2.overview'), icon: <LayoutGrid className="size-5" aria-hidden="true" /> },
+    { value: 'settings', label: t('design_system.gallery.examples.navigation2.settings'), icon: <Settings className="size-5" aria-hidden="true" /> },
+    { value: 'orders', label: t('design_system.gallery.examples.navigation2.orders'), icon: <ShoppingCart className="size-5" aria-hidden="true" /> },
+  ]
+  return <div className="flex w-full max-w-sm flex-col gap-6">
+    {[false, true].map(disabled => <div key={String(disabled)} className="flex flex-col gap-1.5">
+      <Label id={\`\${labelId}-\${disabled}\`} className="leading-5">{disabled ? t('design_system.gallery.examples.navigation2.locked') : t('design_system.gallery.examples.navigation2.selectMenu')}</Label>
+      <SegmentedControl value={value} onValueChange={setValue} disabled={disabled} aria-labelledby={\`\${labelId}-\${disabled}\`} className="h-9 w-full gap-1 rounded-lg border-0 p-1">
+        {options.map(option => <SegmentedControlItem key={option.value} value={option.value} aria-label={content === 'icon' ? option.label : undefined} className="h-7 min-w-0 flex-1 gap-1.5 rounded-md p-1">
+          {content !== 'text' && option.icon}
+          {content !== 'icon' && option.label}
+        </SegmentedControlItem>)}
+      </SegmentedControl>
+    </div>)}
+  </div>
+}
+
+<SegmentedSourceDemo content="icon" />`
     }
   ]
 };
 const accordionEntry = {
   id: "accordion",
+  figmaNodeId: "210:4022",
   title: "Accordion",
   importPath: "@open-mercato/ui/primitives/accordion",
   docsAnchor: "#accordion",
@@ -376,20 +723,7 @@ const accordionEntry = {
     {
       id: "card",
       title: "card (default)",
-      render: () => /* @__PURE__ */ jsxs(Accordion, { type: "single", collapsible: true, defaultValue: "shipping", className: "w-full space-y-2", children: [
-        /* @__PURE__ */ jsxs(AccordionItem, { value: "shipping", children: [
-          /* @__PURE__ */ jsx(AccordionTrigger, { children: "Shipping and delivery" }),
-          /* @__PURE__ */ jsx(AccordionContent, { children: "Orders placed before 2 PM ship the same business day from the nearest warehouse." })
-        ] }),
-        /* @__PURE__ */ jsxs(AccordionItem, { value: "returns", children: [
-          /* @__PURE__ */ jsx(AccordionTrigger, { children: "Returns" }),
-          /* @__PURE__ */ jsx(AccordionContent, { children: "Items can be returned within 30 days of delivery in their original packaging." })
-        ] }),
-        /* @__PURE__ */ jsxs(AccordionItem, { value: "payments", children: [
-          /* @__PURE__ */ jsx(AccordionTrigger, { children: "Payment methods" }),
-          /* @__PURE__ */ jsx(AccordionContent, { children: "We accept cards, bank transfer, and deferred payment for verified B2B accounts." })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(AccordionNavigationCardSample, {}),
       code: `import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'
 
 <Accordion type="single" collapsible defaultValue="shipping" className="w-full space-y-2">
@@ -410,16 +744,7 @@ const accordionEntry = {
     {
       id: "left-icon",
       title: "With leftIcon",
-      render: () => /* @__PURE__ */ jsxs(Accordion, { type: "single", collapsible: true, className: "w-full space-y-2", children: [
-        /* @__PURE__ */ jsxs(AccordionItem, { value: "shipping", children: [
-          /* @__PURE__ */ jsx(AccordionTrigger, { leftIcon: /* @__PURE__ */ jsx(Truck, {}), children: "How fast is shipping?" }),
-          /* @__PURE__ */ jsx(AccordionContent, { children: "Same-day dispatch on weekdays; delivery typically takes 1\u20133 business days." })
-        ] }),
-        /* @__PURE__ */ jsxs(AccordionItem, { value: "billing", children: [
-          /* @__PURE__ */ jsx(AccordionTrigger, { leftIcon: /* @__PURE__ */ jsx(CreditCard, {}), children: "When am I charged?" }),
-          /* @__PURE__ */ jsx(AccordionContent, { children: "Your card is charged when the order ships, never at checkout." })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(AccordionNavigationLeftIconSample, {}),
       code: `import { CreditCard, Truck } from 'lucide-react'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'
 
@@ -437,16 +762,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@o
     {
       id: "chevron",
       title: "Chevron indicator",
-      render: () => /* @__PURE__ */ jsxs(Accordion, { type: "multiple", className: "w-full space-y-2", children: [
-        /* @__PURE__ */ jsxs(AccordionItem, { value: "general", children: [
-          /* @__PURE__ */ jsx(AccordionTrigger, { triggerIcon: "chevron", children: "General" }),
-          /* @__PURE__ */ jsx(AccordionContent, { children: "Store name, contact details, and default locale for the storefront." })
-        ] }),
-        /* @__PURE__ */ jsxs(AccordionItem, { value: "advanced", children: [
-          /* @__PURE__ */ jsx(AccordionTrigger, { triggerIcon: "chevron", children: "Advanced" }),
-          /* @__PURE__ */ jsx(AccordionContent, { children: "Webhooks, API keys, and other developer-facing configuration." })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(AccordionNavigationChevronSample, {}),
       code: `import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'
 
 <Accordion type="multiple" className="w-full space-y-2">
@@ -459,16 +775,273 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@o
     <AccordionContent>Webhooks, API keys, and developer configuration.</AccordionContent>
   </AccordionItem>
 </Accordion>`
+    },
+    {
+      id: "indicator-start",
+      title: "Indicator at start \xB7 closed/open/disabled",
+      render: () => /* @__PURE__ */ jsx(AccordionStartDemo, {}),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@open-mercato/ui/primitives/accordion'
+
+function AccordionStartDemo() {
+  const t = useT()
+  return <Accordion type="single" collapsible defaultValue="details" className="w-full max-w-md space-y-2">
+    <AccordionItem value="overview">
+      <AccordionTrigger iconPosition="start">{t('design_system.gallery.examples.navigation2.overview')}</AccordionTrigger>
+      <AccordionContent>{t('design_system.gallery.examples.navigation2.accordionBody')}</AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="details">
+      <AccordionTrigger iconPosition="start">{t('design_system.gallery.examples.navigation2.settings')}</AccordionTrigger>
+      <AccordionContent>{t('design_system.gallery.examples.navigation2.accordionBody')}</AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="locked" disabled>
+      <AccordionTrigger iconPosition="start">{t('design_system.gallery.examples.navigation2.locked')}</AccordionTrigger>
+      <AccordionContent>{t('design_system.gallery.examples.navigation2.accordionBody')}</AccordionContent>
+    </AccordionItem>
+  </Accordion>
+}
+
+<AccordionStartDemo />`
     }
   ]
 };
+const sidebarEntry = {
+  id: "sidebar",
+  title: "Sidebar and Topbar",
+  figmaNodeId: "3802:11759",
+  importPath: "@open-mercato/ui/primitives/sidebar",
+  usage: { do: ["Presentational composition with local state; the application AppShell still owns tenant APIs and injection points.", "Hover, current navigation, workspace switching, filtering and feature-card actions use real controls.", "Feature-card primary and neutral surfaces use the existing accessible application palettes; they do not claim exact Figma color parity."] },
+  variants: [
+    { id: "items", title: "Sidebar items / expanded and collapsed", render: () => /* @__PURE__ */ jsx(SidebarItemsExample, {}), code: shellExampleCode("<SidebarItemsExample />") },
+    { id: "identity-cards", title: "Header and profile cards / expanded and collapsed", render: () => /* @__PURE__ */ jsx(SidebarIdentityExample, {}), code: shellExampleCode("<SidebarIdentityExample />") },
+    { id: "feature-meeting", title: "Feature card / meeting / 4 styles", render: () => /* @__PURE__ */ jsx(SidebarFeatureExample, { type: "meeting" }), code: shellExampleCode('<SidebarFeatureExample type="meeting" />') },
+    { id: "feature-progress", title: "Feature card / progress / 4 styles", render: () => /* @__PURE__ */ jsx(SidebarFeatureExample, { type: "progress" }), code: shellExampleCode('<SidebarFeatureExample type="progress" />') },
+    { id: "feature-link", title: "Feature card / link / 4 styles", render: () => /* @__PURE__ */ jsx(SidebarFeatureExample, { type: "link" }), code: shellExampleCode('<SidebarFeatureExample type="link" />') },
+    { id: "feature-gift", title: "Feature card / gift / 4 styles", render: () => /* @__PURE__ */ jsx(SidebarFeatureExample, { type: "gift" }), code: shellExampleCode('<SidebarFeatureExample type="gift" />') },
+    { id: "feature-storage", title: "Feature card / storage / 4 styles", render: () => /* @__PURE__ */ jsx(SidebarFeatureExample, { type: "storage" }), code: shellExampleCode('<SidebarFeatureExample type="storage" />') },
+    { id: "feature-support", title: "Feature card / support / 4 styles", render: () => /* @__PURE__ */ jsx(SidebarFeatureExample, { type: "support" }), code: shellExampleCode('<SidebarFeatureExample type="support" />') },
+    { id: "topbar-hr-default", title: "HR topbar / default", render: () => /* @__PURE__ */ jsx(TopbarExample, { product: "hr" }), code: shellExampleCode('<TopbarExample product="hr" />') },
+    { id: "topbar-hr-icons", title: "HR topbar / icons", render: () => /* @__PURE__ */ jsx(TopbarExample, { product: "hr", icons: true }), code: shellExampleCode('<TopbarExample product="hr" icons />') },
+    { id: "topbar-finance-default", title: "FINANCE topbar / default", render: () => /* @__PURE__ */ jsx(TopbarExample, { product: "finance" }), code: shellExampleCode('<TopbarExample product="finance" />') },
+    { id: "topbar-finance-icons", title: "FINANCE topbar / icons", render: () => /* @__PURE__ */ jsx(TopbarExample, { product: "finance", icons: true }), code: shellExampleCode('<TopbarExample product="finance" icons />') },
+    { id: "brand-artwork", title: "Synergy and Apex / 6 original assets", render: () => /* @__PURE__ */ jsx(NavigationBrandsExample, {}), code: shellExampleCode("<NavigationBrandsExample />") }
+  ]
+};
+const promptAreaEntry = {
+  id: "prompt-area",
+  title: "PromptArea",
+  figmaNodeId: "191226:4236",
+  importPath: "@open-mercato/ui/primitives/prompt-area",
+  usage: { do: ["Desktop and mobile compositions expose all 18 source variants through real hover and focus states.", "Enter saves a local draft; Shift+Enter inserts a line break. Attachments stay in this browser and can be removed.", "Model names reproduce source labels. These examples do not call a model or represent a subscription."] },
+  variants: [
+    { id: "desktop", title: "Desktop / empty / Default, Hover, Active", render: () => /* @__PURE__ */ jsx(AiPromptExample, {}), code: aiProductExampleCode("<AiPromptExample />") },
+    { id: "desktop-file", title: "Desktop / file", render: () => /* @__PURE__ */ jsx(AiPromptExample, { attachment: "file" }), code: aiProductExampleCode('<AiPromptExample attachment="file" />') },
+    { id: "desktop-image", title: "Desktop / original image", render: () => /* @__PURE__ */ jsx(AiPromptExample, { attachment: "image" }), code: aiProductExampleCode('<AiPromptExample attachment="image" />') },
+    { id: "mobile", title: "Mobile / empty / Default, Hover, Active", render: () => /* @__PURE__ */ jsx(AiPromptExample, { compact: true }), code: aiProductExampleCode("<AiPromptExample compact />") },
+    { id: "mobile-file", title: "Mobile / file", render: () => /* @__PURE__ */ jsx(AiPromptExample, { compact: true, attachment: "file" }), code: aiProductExampleCode('<AiPromptExample compact attachment="file" />') },
+    { id: "mobile-image", title: "Mobile / original image", render: () => /* @__PURE__ */ jsx(AiPromptExample, { compact: true, attachment: "image" }), code: aiProductExampleCode('<AiPromptExample compact attachment="image" />') }
+  ]
+};
+const aiProductPatternCode = (expression) => `import { ${expression.match(/<(\w+)/)?.[1] ?? "AiPromptExample"} } from '@open-mercato/core/modules/design_system/gallery/demos/ai-product'
+
+${expression}
+`;
+const aiControlsEntry = {
+  id: "ai-controls",
+  title: "AI Product / Controls",
+  figmaNodeId: "191042:2378",
+  importPath: "@open-mercato/core/modules/design_system/gallery/demos/ai-product",
+  usage: { do: ["Source-specific compositions reuse existing primitives with additive semantic radius and typography tokens.", "Hover, keyboard focus and selected states are real interactions. Authentication buttons only display local explanatory feedback.", "Original authentication glyphs are preserved as source assets. Application fonts, focus and semantic colors remain explicit adaptations."] },
+  variants: [
+    { id: "chat-buttons", title: "Chat custom buttons / 2 styles \xD7 3 states", render: () => /* @__PURE__ */ jsx(AiIconButtonExamples, { chat: true }), code: aiProductPatternCode("<AiIconButtonExamples chat />") },
+    { id: "icon-buttons", title: "Custom icon buttons / 4 sizes \xD7 2 tones \xD7 3 states", render: () => /* @__PURE__ */ jsx(AiIconButtonExamples, {}), code: aiProductPatternCode("<AiIconButtonExamples />") },
+    { id: "search", title: "Search / 2 sizes \xD7 3 states", render: () => /* @__PURE__ */ jsx(AiSearchExamples, {}), code: aiProductPatternCode("<AiSearchExamples />") },
+    { id: "new-chat", title: "New chat / Default, Hover", render: () => /* @__PURE__ */ jsx(AiNewChatExample, {}), code: aiProductPatternCode("<AiNewChatExample />") },
+    { id: "navigation-items", title: "Navigation items / 12 variants", render: () => /* @__PURE__ */ jsx(AiNavigationExamples, {}), code: aiProductPatternCode("<AiNavigationExamples />") },
+    { id: "auth-icons", title: "Authentication / 8 original icons", render: () => /* @__PURE__ */ jsx(AiAuthExamples, {}), code: aiProductPatternCode("<AiAuthExamples />") },
+    { id: "social-google", title: "Google button / local feedback", render: () => /* @__PURE__ */ jsx(AiAuthExamples, { kind: "social" }), code: aiProductPatternCode('<AiAuthExamples kind="social" />') },
+    { id: "text-input", title: "Text input / 5 source states", render: () => /* @__PURE__ */ jsx(AiAuthExamples, { kind: "text" }), code: aiProductPatternCode('<AiAuthExamples kind="text" />') },
+    { id: "digit-input", title: "Digit input / 5 source states", render: () => /* @__PURE__ */ jsx(AiAuthExamples, { kind: "digits" }), code: aiProductPatternCode('<AiAuthExamples kind="digits" />') },
+    { id: "settings", title: "Settings navigation, select, counter and model / 15 variants", render: () => /* @__PURE__ */ jsx(AiSettingsExamples, {}), code: aiProductPatternCode("<AiSettingsExamples />") }
+  ]
+};
+const aiSidebarEntry = {
+  id: "ai-sidebar",
+  title: "AI Product / Sidebar",
+  figmaNodeId: "191050:3105",
+  importPath: "@open-mercato/ui/primitives/sidebar",
+  usage: { do: ["All four source sidebar variants render using the presentational Sidebar without application API calls.", "Search filters the local history, navigation updates the selected item, and new chat creates a local draft counter.", "The collapsed logo expands the sidebar; this adds a keyboard-accessible restoration control to the source composition."] },
+  variants: [
+    { id: "search-01", title: "Search 01 / expanded / 272 \xD7 900", render: () => /* @__PURE__ */ jsx(AiSidebarExample, {}), code: aiProductExampleCode("<AiSidebarExample />") },
+    { id: "search-02", title: "Search 02 / expanded", render: () => /* @__PURE__ */ jsx(AiSidebarExample, { search: "02" }), code: aiProductExampleCode('<AiSidebarExample search="02" />') },
+    { id: "search-03", title: "Search 03 / expanded", render: () => /* @__PURE__ */ jsx(AiSidebarExample, { search: "03" }), code: aiProductExampleCode('<AiSidebarExample search="03" />') },
+    { id: "collapsed", title: "Search 01 / collapsed / 72 \xD7 900", render: () => /* @__PURE__ */ jsx(AiSidebarExample, { initialCollapsed: true }), code: aiProductExampleCode("<AiSidebarExample initialCollapsed />") }
+  ]
+};
+const aiMobileNavigationEntry = {
+  id: "ai-mobile-navigation",
+  title: "AI Product / Mobile Navigation",
+  figmaNodeId: "192681:59134",
+  importPath: "@open-mercato/core/modules/design_system/gallery/demos/ai-product",
+  usage: { do: ["All four 390 \xD7 64 source compositions have working local controls and keyboard-accessible popovers.", "Add project stores the entered name only in component state. Escape closes the popover, Enter or Ctrl/Cmd+Enter confirms."] },
+  variants: [
+    { id: "default", title: "Default", render: () => /* @__PURE__ */ jsx(AiMobileNavigationExample, {}), code: aiProductPatternCode("<AiMobileNavigationExample />") },
+    { id: "in-projects", title: "In Projects", render: () => /* @__PURE__ */ jsx(AiMobileNavigationExample, { kind: "in-projects" }), code: aiProductPatternCode('<AiMobileNavigationExample kind="in-projects" />') },
+    { id: "projects", title: "Projects", render: () => /* @__PURE__ */ jsx(AiMobileNavigationExample, { kind: "projects" }), code: aiProductPatternCode('<AiMobileNavigationExample kind="projects" />') },
+    { id: "project-details", title: "Project Details", render: () => /* @__PURE__ */ jsx(AiMobileNavigationExample, { kind: "project-details" }), code: aiProductPatternCode('<AiMobileNavigationExample kind="project-details" />') }
+  ]
+};
 const entries = [
+  promptAreaEntry,
+  aiControlsEntry,
+  aiSidebarEntry,
+  aiMobileNavigationEntry,
+  sidebarEntry,
   tabsEntry,
   breadcrumbEntry,
   paginationEntry,
   segmentedControlEntry,
   accordionEntry
 ];
+function TabsNavigationUnderlineSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Tabs, { defaultValue: "orders", variant: "underline", className: "w-full", children: [
+    /* @__PURE__ */ jsxs(TabsList, { "aria-label": t("design_system.gallery.sampleCopy.customerSections"), children: [
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "overview", leading: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }), children: t("design_system.gallery.examples.navigation2.overview") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "orders", leading: /* @__PURE__ */ jsx(ShoppingCart, { className: "size-4" }), count: 12, children: t("design_system.gallery.examples.navigation2.orders") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "settings", leading: /* @__PURE__ */ jsx(Settings, { className: "size-4" }), children: t("design_system.gallery.examples.navigation2.settings") })
+    ] }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "overview", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.customerOverviewPanel") }) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "orders", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.12OrdersInTheLast30Days") }) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "settings", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.notificationAndAccessSettings") }) })
+  ] });
+}
+function TabsNavigationPillSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Tabs, { defaultValue: "preview", children: [
+    /* @__PURE__ */ jsxs(TabsList, { "aria-label": t("design_system.gallery.sampleCopy.editorView"), children: [
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "preview", children: t("design_system.gallery.samples.table.preview") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "code", children: t("design_system.gallery.samples.richEditor.labels.code") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "logs", children: t("design_system.gallery.sampleCopy.logs") })
+    ] }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "preview", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.renderedPreview") }) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "code", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.sourceCodePanel") }) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "logs", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.runtimeLogsPanel") }) })
+  ] });
+}
+function TabsNavigationPillVerticalSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Tabs, { defaultValue: "profile", orientation: "vertical", className: "w-full", children: [
+    /* @__PURE__ */ jsxs(TabsList, { "aria-label": t("design_system.gallery.samples.crypto.accountSettings"), children: [
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "profile", children: t("design_system.gallery.samples.crypto.profile") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "billing", children: t("design_system.gallery.samples.marketing.billing") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "security", children: t("design_system.gallery.sampleCopy.security") })
+    ] }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "profile", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.profileSettingsPanel") }) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "billing", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.billingSettingsPanel") }) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "security", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.securitySettingsPanel") }) })
+  ] });
+}
+function BreadcrumbNavigationSlashSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: t("design_system.gallery.examples.shell.dashboard") }) }),
+    /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: t("design_system.gallery.sampleCopy.products") }) }),
+    /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: t("design_system.gallery.sampleCopy.winterCatalog") }) })
+  ] }) });
+}
+function BreadcrumbNavigationArrowSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(Breadcrumb, { divider: "arrow", children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: t("design_system.gallery.examples.navigation2.orders") }) }),
+    /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "#20418" }) }),
+    /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: t("design_system.gallery.sampleCopy.shipment") }) })
+  ] }) });
+}
+function BreadcrumbNavigationEllipsisSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: t("design_system.gallery.examples.shell.dashboard") }) }),
+    /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}) }),
+    /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: t("design_system.gallery.sampleCopy.attributes") }) }),
+    /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: t("design_system.gallery.samples.richEditor.labels.textColor") }) })
+  ] }) });
+}
+function SegmentedControlNavigationDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(SegmentedControl, { defaultValue: "all", "aria-label": t("design_system.gallery.sampleCopy.viewFilter"), children: [
+    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "all", children: t("design_system.gallery.samples.feeds.all") }),
+    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "active", children: t("design_system.gallery.samples.finance.active") }),
+    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "archived", children: t("design_system.gallery.sampleCopy.archived") })
+  ] });
+}
+function SegmentedControlNavigationSmallSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(SegmentedControl, { size: "sm", defaultValue: t("design_system.gallery.sampleCopy.30d"), "aria-label": t("design_system.gallery.samples.crypto.chartRange"), children: [
+    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "7d", children: t("design_system.gallery.sampleCopy.7d") }),
+    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "30d", children: t("design_system.gallery.sampleCopy.30d") }),
+    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "90d", children: t("design_system.gallery.sampleCopy.90d") }),
+    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "1y", children: t("design_system.gallery.sampleCopy.1y") })
+  ] });
+}
+function SegmentedControlNavigationDisabledSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(SegmentedControl, { defaultValue: "list", disabled: true, "aria-label": t("design_system.gallery.sampleCopy.layout"), children: [
+    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "list", children: t("design_system.gallery.sampleCopy.list") }),
+    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "grid", children: t("design_system.gallery.sampleCopy.grid") })
+  ] });
+}
+function AccordionNavigationCardSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Accordion, { type: "single", collapsible: true, defaultValue: "shipping", className: "w-full space-y-2", children: [
+    /* @__PURE__ */ jsxs(AccordionItem, { value: "shipping", children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { children: t("design_system.gallery.sampleCopy.shippingAndDelivery") }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: t("design_system.gallery.sampleCopy.ordersPlacedBefore2PMShipTheSameBusinessDay") })
+    ] }),
+    /* @__PURE__ */ jsxs(AccordionItem, { value: "returns", children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { children: t("design_system.gallery.sampleCopy.returns") }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: t("design_system.gallery.sampleCopy.itemsCanBeReturnedWithin30DaysOfDeliveryIn") })
+    ] }),
+    /* @__PURE__ */ jsxs(AccordionItem, { value: "payments", children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { children: t("design_system.gallery.sampleCopy.paymentMethods") }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: t("design_system.gallery.sampleCopy.weAcceptCardsBankTransferAndDeferredPaymentForVerified") })
+    ] })
+  ] });
+}
+function AccordionNavigationLeftIconSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Accordion, { type: "single", collapsible: true, className: "w-full space-y-2", children: [
+    /* @__PURE__ */ jsxs(AccordionItem, { value: "shipping", children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { leftIcon: /* @__PURE__ */ jsx(Truck, {}), children: t("design_system.gallery.sampleCopy.howFastIsShipping") }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: t("design_system.gallery.sampleCopy.samedayDispatchOnWeekdaysDeliveryTypicallyTakes13BusinessDays") })
+    ] }),
+    /* @__PURE__ */ jsxs(AccordionItem, { value: "billing", children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { leftIcon: /* @__PURE__ */ jsx(CreditCard, {}), children: t("design_system.gallery.sampleCopy.whenAmICharged") }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: t("design_system.gallery.sampleCopy.yourCardIsChargedWhenTheOrderShipsNeverAt") })
+    ] })
+  ] });
+}
+function AccordionNavigationChevronSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Accordion, { type: "multiple", className: "w-full space-y-2", children: [
+    /* @__PURE__ */ jsxs(AccordionItem, { value: "general", children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { triggerIcon: "chevron", children: t("design_system.gallery.sampleCopy.general") }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: t("design_system.gallery.sampleCopy.storeNameContactDetailsAndDefaultLocaleForTheStorefront") })
+    ] }),
+    /* @__PURE__ */ jsxs(AccordionItem, { value: "advanced", children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { triggerIcon: "chevron", children: t("design_system.gallery.samples.finance.advanced") }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: t("design_system.gallery.sampleCopy.webhooksAPIKeysAndOtherDeveloperfacingConfiguration") })
+    ] })
+  ] });
+}
 export {
   entries
 };