@open-mercato/core 0.7.1-develop.7202.1.a52dc6707c → 0.8.0

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

@@ -1,68 +1,259 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import * as React from "react";
+import { CryptocurrencyDemo } from "../demos/cryptocurrency.js";
 import { Archive, Copy, Download, Lock, Plus, Trash2, UserRound } from "lucide-react";
 import { Badge } from "@open-mercato/ui/primitives/badge";
 import { Button } from "@open-mercato/ui/primitives/button";
 import { Page, PageBody, PageHeader } from "@open-mercato/ui/backend/Page";
 import { CollapsibleSection, SectionHeader } from "@open-mercato/ui/backend/SectionHeader";
-import {
-  SectionNav,
-  SectionPage
-} from "@open-mercato/ui/backend/section-page";
-import {
-  ActionsDropdown,
-  FormFooter,
-  FormHeader
-} from "@open-mercato/ui/backend/forms";
-const demoSections = [
+import { SectionNav, SectionPage } from "@open-mercato/ui/backend/section-page";
+import { ActionsDropdown, FormFooter, FormHeader } from "@open-mercato/ui/backend/forms";
+import { PageHeaderExample } from "../demos/shell.js";
+import { shellExampleCode } from "../demos/shell-code.generated.js";
+function PageEntryBasicPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(Page, { children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: t("design_system.gallery.samples.content.currencies"),
+        description: t("design_system.gallery.samples.content.exchangeRatesRefreshNightly")
+      }
+    ),
+    /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed p-6 text-sm text-muted-foreground", children: t("design_system.gallery.samples.content.pageContent") }) })
+  ] }) });
+}
+function PageEntryWithActionsPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(Page, { children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: t("design_system.gallery.samples.content.currencies"),
+        description: t("design_system.gallery.samples.content.exchangeRatesRefreshNightly"),
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: t("design_system.gallery.samples.content.import") }),
+          /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+            /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+            t("design_system.gallery.samples.content.addCurrency")
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed p-6 text-sm text-muted-foreground", children: t("design_system.gallery.samples.content.pageContent") }) })
+  ] }) });
+}
+function SectionHeaderEntryCountAndActionPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    SectionHeader,
+    {
+      title: t("design_system.gallery.samples.content.addresses"),
+      count: 3,
+      action: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", children: [
+        /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+        t("design_system.gallery.samples.content.add")
+      ] })
+    }
+  ) });
+}
+function SectionHeaderEntryCollapsiblePreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(CollapsibleSection, { title: t("design_system.gallery.samples.content.billingDetails"), count: 2, children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed p-4 text-sm text-muted-foreground", children: t("design_system.gallery.samples.content.sectionContent") }) }) });
+}
+function FormHeaderEntryEditModePreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+    FormHeader,
+    {
+      backHref: "#form-header",
+      backLabel: t("design_system.gallery.samples.content.back"),
+      title: t("design_system.gallery.samples.content.editProduct"),
+      actions: {
+        cancelHref: "#form-header",
+        cancelLabel: "Cancel",
+        submit: {
+          label: t("design_system.gallery.samples.content.save"),
+          pendingLabel: "Saving\u2026"
+        }
+      }
+    }
+  ) });
+}
+function FormHeaderEntryDetailModePreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+    FormHeader,
+    {
+      mode: "detail",
+      backHref: "#form-header",
+      entityTypeLabel: t("design_system.gallery.samples.content.company"),
+      title: "Acme Logistics",
+      subtitle: t("design_system.gallery.samples.content.created12Mar2026"),
+      statusBadge: /* @__PURE__ */ jsx(Badge, { variant: "muted", children: t("design_system.gallery.samples.content.active") }),
+      menuActions: [
+        {
+          id: "duplicate",
+          label: t("design_system.gallery.samples.content.duplicate"),
+          icon: Copy,
+          onSelect: () => {
+          }
+        },
+        {
+          id: "archive",
+          label: t("design_system.gallery.samples.content.archive"),
+          icon: Archive,
+          onSelect: () => {
+          }
+        }
+      ],
+      onDelete: () => {
+      },
+      deleteLabel: t("design_system.gallery.samples.content.delete")
+    }
+  ) });
+}
+function FormFooterEntryDefaultPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+    FormFooter,
+    {
+      actions: {
+        cancelHref: "#form-footer",
+        cancelLabel: "Cancel",
+        submit: {
+          label: t("design_system.gallery.samples.content.saveChanges"),
+          pendingLabel: "Saving\u2026"
+        }
+      }
+    }
+  ) });
+}
+function FormFooterEntryEmbeddedWithDeletePreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+    FormFooter,
+    {
+      embedded: true,
+      actions: {
+        showDelete: true,
+        onDelete: () => {
+        },
+        deleteLabel: t("design_system.gallery.samples.content.delete"),
+        cancelHref: "#form-footer",
+        cancelLabel: "Cancel",
+        submit: {
+          label: t("design_system.gallery.samples.content.save")
+        }
+      }
+    }
+  ) });
+}
+function ActionsDropdownEntryLabelTriggerPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(ActionsDropdown, { items: demoActions(t) });
+}
+function ActionsDropdownEntryIconTriggerPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(
+    ActionsDropdown,
+    {
+      items: demoActions(t),
+      triggerMode: "icon",
+      ariaLabel: t("design_system.gallery.samples.content.moreActions")
+    }
+  );
+}
+const demoSections = (t) => [
   {
     id: "account",
-    label: "Account",
+    label: t("design_system.gallery.samples.content.account"),
     items: [
-      { id: "profile", label: "Profile", href: "#profile", icon: /* @__PURE__ */ jsx(UserRound, { className: "size-4" }) },
-      { id: "security", label: "Security", href: "#security", icon: /* @__PURE__ */ jsx(Lock, { className: "size-4" }) }
+      {
+        id: "profile",
+        label: t("design_system.gallery.samples.content.profile"),
+        href: "#profile",
+        icon: /* @__PURE__ */ jsx(UserRound, { className: "size-4" })
+      },
+      {
+        id: "security",
+        label: t("design_system.gallery.samples.content.security"),
+        href: "#security",
+        icon: /* @__PURE__ */ jsx(Lock, { className: "size-4" })
+      }
     ]
   }
 ];
 function SectionPageMiniDemo() {
-  return /* @__PURE__ */ jsx("div", { className: "h-80 w-full overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ jsx(SectionPage, { title: "Settings", sections: demoSections, activePath: "#profile", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Profile" }),
-    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Section content renders here." })
-  ] }) }) });
+  const t = useT();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-example": "section-page",
+      className: "w-full rounded-lg border border-border bg-background [&>div]:h-auto [&>div]:min-h-0 [&>div]:flex-col sm:[&>div]:flex-row [&>div>aside]:w-auto [&_main]:min-w-0 [&_main]:overflow-visible",
+      children: /* @__PURE__ */ jsx(
+        SectionPage,
+        {
+          title: t("design_system.gallery.samples.content.settings"),
+          sections: demoSections(t),
+          activePath: "#profile",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: t("design_system.gallery.samples.content.profile") }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.content.sectionContentRendersHere") })
+          ] })
+        }
+      )
+    }
+  );
 }
 function SectionNavDemo() {
+  const t = useT();
   const [collapsed, setCollapsed] = React.useState(false);
   return /* @__PURE__ */ jsx("div", { className: "w-64 rounded-lg border bg-background px-3 py-4", children: /* @__PURE__ */ jsx(
     SectionNav,
     {
-      title: "Settings",
-      sections: demoSections,
+      title: t("design_system.gallery.samples.content.settings"),
+      sections: demoSections(t),
       activePath: "#profile",
       collapsed,
       onToggleCollapse: () => setCollapsed((value) => !value)
     }
   ) });
 }
-const demoActions = [
-  { id: "duplicate", label: "Duplicate record", icon: Copy, onSelect: () => {
-  } },
-  { id: "export", label: "Export as CSV", icon: Download, onSelect: () => {
-  } },
-  { id: "delete", label: "Delete record", icon: Trash2, onSelect: () => {
-  } }
+const demoActions = (t) => [
+  {
+    id: "duplicate",
+    label: t("design_system.gallery.samples.content.duplicateRecord"),
+    icon: Copy,
+    onSelect: () => {
+    }
+  },
+  {
+    id: "export",
+    label: t("design_system.gallery.samples.content.exportAsCsv"),
+    icon: Download,
+    onSelect: () => {
+    }
+  },
+  {
+    id: "delete",
+    label: t("design_system.gallery.samples.content.deleteRecord"),
+    icon: Trash2,
+    onSelect: () => {
+    }
+  }
 ];
 const pageEntry = {
   id: "page",
+  figmaNodeId: "3829:27898",
   title: "Page",
   importPath: "@open-mercato/ui/backend/Page",
   variants: [
     {
       id: "basic",
       title: "Page + PageHeader + PageBody",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(Page, { children: [
-        /* @__PURE__ */ jsx(PageHeader, { title: "Currencies", description: "Exchange rates refresh nightly." }),
-        /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed p-6 text-sm text-muted-foreground", children: "Page content" }) })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(PageEntryBasicPreview, {}),
       code: `import { Page, PageBody, PageHeader } from '@open-mercato/ui/backend/Page'
 
 <Page>
@@ -73,23 +264,7 @@ const pageEntry = {
     {
       id: "with-actions",
       title: "Header actions",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(Page, { children: [
-        /* @__PURE__ */ jsx(
-          PageHeader,
-          {
-            title: "Currencies",
-            description: "Exchange rates refresh nightly.",
-            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Import" }),
-              /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
-                /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
-                " Add currency"
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed p-6 text-sm text-muted-foreground", children: "Page content" }) })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(PageEntryWithActionsPreview, {}),
       code: `import { Plus } from 'lucide-react'
 import { Page, PageBody, PageHeader } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
@@ -106,6 +281,78 @@ import { Button } from '@open-mercato/ui/primitives/button'
   />
   <PageBody>{/* \u2026 */}</PageBody>
 </Page>`
+    },
+    {
+      id: "source-page-basic",
+      title: "Page header / basic",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "page", type: "basic" }),
+      code: shellExampleCode('<PageHeaderExample appearance="page" type="basic" />')
+    },
+    {
+      id: "source-page-avatar",
+      title: "Page header / avatar",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "page", type: "avatar" }),
+      code: shellExampleCode('<PageHeaderExample appearance="page" type="avatar" />')
+    },
+    {
+      id: "source-page-icon",
+      title: "Page header / icon",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "page", type: "icon" }),
+      code: shellExampleCode('<PageHeaderExample appearance="page" type="icon" />')
+    },
+    {
+      id: "source-page-brand",
+      title: "Page header / brand",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "page", type: "brand" }),
+      code: shellExampleCode('<PageHeaderExample appearance="page" type="brand" />')
+    },
+    {
+      id: "source-page-company",
+      title: "Page header / company",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "page", type: "company" }),
+      code: shellExampleCode('<PageHeaderExample appearance="page" type="company" />')
+    },
+    {
+      id: "source-section-basic",
+      title: "Section header / basic",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "section", type: "basic" }),
+      code: shellExampleCode('<PageHeaderExample appearance="section" type="basic" />')
+    },
+    {
+      id: "source-section-avatar",
+      title: "Section header / avatar",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "section", type: "avatar" }),
+      code: shellExampleCode('<PageHeaderExample appearance="section" type="avatar" />')
+    },
+    {
+      id: "source-section-icon",
+      title: "Section header / icon",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "section", type: "icon" }),
+      code: shellExampleCode('<PageHeaderExample appearance="section" type="icon" />')
+    },
+    {
+      id: "source-section-brand",
+      title: "Section header / brand",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "section", type: "brand" }),
+      code: shellExampleCode('<PageHeaderExample appearance="section" type="brand" />')
+    },
+    {
+      id: "source-section-company",
+      title: "Section header / company",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "section", type: "company" }),
+      code: shellExampleCode('<PageHeaderExample appearance="section" type="company" />')
+    },
+    {
+      id: "source-page-options",
+      title: "Page header / optional content",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "page", type: "company", configurable: true }),
+      code: shellExampleCode('<PageHeaderExample appearance="page" type="company" configurable />')
+    },
+    {
+      id: "source-section-options",
+      title: "Section header / optional content",
+      render: () => /* @__PURE__ */ jsx(PageHeaderExample, { appearance: "section", type: "company", configurable: true }),
+      code: shellExampleCode('<PageHeaderExample appearance="section" type="company" configurable />')
     }
   ]
 };
@@ -117,17 +364,7 @@ const sectionHeaderEntry = {
     {
       id: "count-and-action",
       title: "With count and action",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
-        SectionHeader,
-        {
-          title: "Addresses",
-          count: 3,
-          action: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", children: [
-            /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
-            " Add"
-          ] })
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(SectionHeaderEntryCountAndActionPreview, {}),
       code: `import { Plus } from 'lucide-react'
 import { SectionHeader } from '@open-mercato/ui/backend/SectionHeader'
 import { Button } from '@open-mercato/ui/primitives/button'
@@ -141,7 +378,7 @@ import { Button } from '@open-mercato/ui/primitives/button'
     {
       id: "collapsible",
       title: "CollapsibleSection",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(CollapsibleSection, { title: "Billing details", count: 2, children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed p-4 text-sm text-muted-foreground", children: "Section content" }) }) }),
+      render: () => /* @__PURE__ */ jsx(SectionHeaderEntryCollapsiblePreview, {}),
       code: `import { CollapsibleSection } from '@open-mercato/ui/backend/SectionHeader'
 
 <CollapsibleSection title={t('design_system.gallery.samples.billingDetails')} count={2}>
@@ -157,7 +394,7 @@ const sectionPageEntry = {
   variants: [
     {
       id: "miniature",
-      title: "Two-item miniature (clipped frame)",
+      title: "Two-item responsive section layout",
       render: () => /* @__PURE__ */ jsx(SectionPageMiniDemo, {}),
       code: `import { UserRound, Lock } from 'lucide-react'
 import { SectionPage, type SectionNavGroup } from '@open-mercato/ui/backend/section-page'
@@ -203,19 +440,7 @@ const formHeaderEntry = {
     {
       id: "edit-mode",
       title: "Edit mode",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-        FormHeader,
-        {
-          backHref: "#form-header",
-          backLabel: "Back",
-          title: "Edit product",
-          actions: {
-            cancelHref: "#form-header",
-            cancelLabel: "Cancel",
-            submit: { label: "Save", pendingLabel: "Saving\u2026" }
-          }
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(FormHeaderEntryEditModePreview, {}),
       code: `import { FormHeader } from '@open-mercato/ui/backend/forms'
 
 <FormHeader
@@ -232,26 +457,7 @@ const formHeaderEntry = {
     {
       id: "detail-mode",
       title: "Detail mode",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-        FormHeader,
-        {
-          mode: "detail",
-          backHref: "#form-header",
-          entityTypeLabel: "Company",
-          title: "Acme Logistics",
-          subtitle: "Created 12 Mar 2026",
-          statusBadge: /* @__PURE__ */ jsx(Badge, { variant: "muted", children: "Active" }),
-          menuActions: [
-            { id: "duplicate", label: "Duplicate", icon: Copy, onSelect: () => {
-            } },
-            { id: "archive", label: "Archive", icon: Archive, onSelect: () => {
-            } }
-          ],
-          onDelete: () => {
-          },
-          deleteLabel: "Delete"
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(FormHeaderEntryDetailModePreview, {}),
       code: `import { Archive, Copy } from 'lucide-react'
 import { FormHeader } from '@open-mercato/ui/backend/forms'
 
@@ -280,16 +486,7 @@ const formFooterEntry = {
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-        FormFooter,
-        {
-          actions: {
-            cancelHref: "#form-footer",
-            cancelLabel: "Cancel",
-            submit: { label: "Save changes", pendingLabel: "Saving\u2026" }
-          }
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(FormFooterEntryDefaultPreview, {}),
       code: `import { FormFooter } from '@open-mercato/ui/backend/forms'
 
 <FormFooter
@@ -303,21 +500,7 @@ const formFooterEntry = {
     {
       id: "embedded-with-delete",
       title: "embedded, with delete",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-        FormFooter,
-        {
-          embedded: true,
-          actions: {
-            showDelete: true,
-            onDelete: () => {
-            },
-            deleteLabel: "Delete",
-            cancelHref: "#form-footer",
-            cancelLabel: "Cancel",
-            submit: { label: "Save" }
-          }
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(FormFooterEntryEmbeddedWithDeletePreview, {}),
       code: `import { FormFooter } from '@open-mercato/ui/backend/forms'
 
 <FormFooter
@@ -342,7 +525,7 @@ const actionsDropdownEntry = {
     {
       id: "label-trigger",
       title: "Label trigger",
-      render: () => /* @__PURE__ */ jsx(ActionsDropdown, { items: demoActions }),
+      render: () => /* @__PURE__ */ jsx(ActionsDropdownEntryLabelTriggerPreview, {}),
       code: `import { Copy, Download, Trash2 } from 'lucide-react'
 import { ActionsDropdown, type ActionItem } from '@open-mercato/ui/backend/forms'
 
@@ -357,14 +540,886 @@ const items: ActionItem[] = [
     {
       id: "icon-trigger",
       title: "Icon trigger",
-      render: () => /* @__PURE__ */ jsx(ActionsDropdown, { items: demoActions, triggerMode: "icon", ariaLabel: "More actions" }),
+      render: () => /* @__PURE__ */ jsx(ActionsDropdownEntryIconTriggerPreview, {}),
       code: `import { ActionsDropdown } from '@open-mercato/ui/backend/forms'
 
 <ActionsDropdown items={items} triggerMode="icon" ariaLabel={t('ui.actions.more')} />`
     }
   ]
 };
+const cryptocurrencyPatternCode = (expression) => `import { CryptocurrencyDemo } from '@open-mercato/core/modules/design_system/gallery/demos/cryptocurrency'
+
+${expression}
+`;
+const cryptocurrencyEntry = {
+  id: "cryptocurrency",
+  title: "Cryptocurrency",
+  descriptionKey: "design_system.entries.cryptocurrency.description",
+  importPath: "@open-mercato/core/modules/design_system/gallery/demos/cryptocurrency",
+  figmaNodeId: "6696:81120",
+  variants: [
+    {
+      id: "token-icon-btc",
+      title: "token-icon-btc",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "btc" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="btc" />')
+    },
+    {
+      id: "token-icon-eth",
+      title: "token-icon-eth",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "eth" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="eth" />')
+    },
+    {
+      id: "token-icon-xrp",
+      title: "token-icon-xrp",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "xrp" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="xrp" />')
+    },
+    {
+      id: "token-icon-usdt",
+      title: "token-icon-usdt",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "usdt" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="usdt" />')
+    },
+    {
+      id: "token-icon-bnb",
+      title: "token-icon-bnb",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "bnb" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="bnb" />')
+    },
+    {
+      id: "token-icon-sol",
+      title: "token-icon-sol",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "sol" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="sol" />')
+    },
+    {
+      id: "token-icon-usdc",
+      title: "token-icon-usdc",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "usdc" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="usdc" />')
+    },
+    {
+      id: "token-icon-trx",
+      title: "token-icon-trx",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "trx" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="trx" />')
+    },
+    {
+      id: "token-icon-ada",
+      title: "token-icon-ada",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "ada" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="ada" />')
+    },
+    {
+      id: "token-icon-avax",
+      title: "token-icon-avax",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "avax" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="avax" />')
+    },
+    {
+      id: "token-icon-hbar",
+      title: "token-icon-hbar",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "hbar" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="hbar" />')
+    },
+    {
+      id: "token-icon-dot",
+      title: "token-icon-dot",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "token-icon", kind: "dot" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="token-icon" kind="dot" />')
+    },
+    {
+      id: "status-icon-success",
+      title: "status-icon-success",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "status-icon", kind: "success" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="status-icon" kind="success" />')
+    },
+    {
+      id: "status-icon-pending",
+      title: "status-icon-pending",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "status-icon", kind: "pending" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="status-icon" kind="pending" />')
+    },
+    {
+      id: "status-icon-warning",
+      title: "status-icon-warning",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "status-icon", kind: "warning" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="status-icon" kind="warning" />')
+    },
+    {
+      id: "status-icon-cancelled",
+      title: "status-icon-cancelled",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "status-icon", kind: "cancelled" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="status-icon" kind="cancelled" />')
+    },
+    {
+      id: "navigation-item-default-28",
+      title: "navigation-item-default-28",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-item", state: "default", size: 28 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-item" state="default" size={28} />')
+    },
+    {
+      id: "navigation-item-hover-28",
+      title: "navigation-item-hover-28",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-item", state: "hover", size: 28 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-item" state="hover" size={28} />')
+    },
+    {
+      id: "navigation-item-active-28",
+      title: "navigation-item-active-28",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-item", state: "active", size: 28 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-item" state="active" size={28} />')
+    },
+    {
+      id: "navigation-item-default-24",
+      title: "navigation-item-default-24",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-item", state: "default", size: 24 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-item" state="default" size={24} />')
+    },
+    {
+      id: "navigation-item-hover-24",
+      title: "navigation-item-hover-24",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-item", state: "hover", size: 24 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-item" state="hover" size={24} />')
+    },
+    {
+      id: "navigation-item-active-24",
+      title: "navigation-item-active-24",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-item", state: "active", size: 24 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-item" state="active" size={24} />')
+    },
+    {
+      id: "navigation-search-default",
+      title: "navigation-search-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-search", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-search" state="default" />')
+    },
+    {
+      id: "navigation-search-hover",
+      title: "navigation-search-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-search", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-search" state="hover" />')
+    },
+    {
+      id: "navigation-wallet-default",
+      title: "navigation-wallet-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-wallet", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-wallet" state="default" />')
+    },
+    {
+      id: "navigation-wallet-hover",
+      title: "navigation-wallet-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-wallet", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-wallet" state="hover" />')
+    },
+    {
+      id: "navigation-wallet-active",
+      title: "navigation-wallet-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-wallet", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-wallet" state="active" />')
+    },
+    {
+      id: "navigation-action-favorite-default",
+      title: "navigation-action-favorite-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-action", kind: "favorite", state: "default" }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="navigation-action" kind="favorite" state="default" />'
+      )
+    },
+    {
+      id: "navigation-action-notification-default",
+      title: "navigation-action-notification-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-action", kind: "notification", state: "default" }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="navigation-action" kind="notification" state="default" />'
+      )
+    },
+    {
+      id: "navigation-action-hamburger-default",
+      title: "navigation-action-hamburger-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-action", kind: "hamburger", state: "default" }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="navigation-action" kind="hamburger" state="default" />'
+      )
+    },
+    {
+      id: "navigation-action-favorite-hover",
+      title: "navigation-action-favorite-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-action", kind: "favorite", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-action" kind="favorite" state="hover" />')
+    },
+    {
+      id: "navigation-action-notification-hover",
+      title: "navigation-action-notification-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-action", kind: "notification", state: "hover" }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="navigation-action" kind="notification" state="hover" />'
+      )
+    },
+    {
+      id: "navigation-action-hamburger-hover",
+      title: "navigation-action-hamburger-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-action", kind: "hamburger", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-action" kind="hamburger" state="hover" />')
+    },
+    {
+      id: "navigation-action-favorite-active",
+      title: "navigation-action-favorite-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-action", kind: "favorite", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation-action" kind="favorite" state="active" />')
+    },
+    {
+      id: "navigation-action-notification-active",
+      title: "navigation-action-notification-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-action", kind: "notification", state: "active" }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="navigation-action" kind="notification" state="active" />'
+      )
+    },
+    {
+      id: "navigation-action-hamburger-active",
+      title: "navigation-action-hamburger-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation-action", kind: "hamburger", state: "active" }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="navigation-action" kind="hamburger" state="active" />'
+      )
+    },
+    {
+      id: "chart-item-default",
+      title: "chart-item-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "chart-item", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="chart-item" state="default" />')
+    },
+    {
+      id: "chart-item-hover",
+      title: "chart-item-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "chart-item", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="chart-item" state="hover" />')
+    },
+    {
+      id: "chart-item-active",
+      title: "chart-item-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "chart-item", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="chart-item" state="active" />')
+    },
+    {
+      id: "swap-select-lighter-default",
+      title: "swap-select-lighter-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-select", kind: "lighter", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-select" kind="lighter" state="default" />')
+    },
+    {
+      id: "swap-select-lighter-hover",
+      title: "swap-select-lighter-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-select", kind: "lighter", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-select" kind="lighter" state="hover" />')
+    },
+    {
+      id: "swap-select-lighter-active",
+      title: "swap-select-lighter-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-select", kind: "lighter", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-select" kind="lighter" state="active" />')
+    },
+    {
+      id: "swap-select-stroke-default",
+      title: "swap-select-stroke-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-select", kind: "stroke", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-select" kind="stroke" state="default" />')
+    },
+    {
+      id: "swap-select-stroke-hover",
+      title: "swap-select-stroke-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-select", kind: "stroke", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-select" kind="stroke" state="hover" />')
+    },
+    {
+      id: "swap-select-stroke-active",
+      title: "swap-select-stroke-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-select", kind: "stroke", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-select" kind="stroke" state="active" />')
+    },
+    {
+      id: "chart-switch-1d",
+      title: "chart-switch-1d",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "chart-switch", kind: "1D" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="chart-switch" kind="1D" />')
+    },
+    {
+      id: "chart-switch-1w",
+      title: "chart-switch-1w",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "chart-switch", kind: "1W" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="chart-switch" kind="1W" />')
+    },
+    {
+      id: "chart-switch-1m",
+      title: "chart-switch-1m",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "chart-switch", kind: "1M" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="chart-switch" kind="1M" />')
+    },
+    {
+      id: "chart-switch-3m",
+      title: "chart-switch-3m",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "chart-switch", kind: "3M" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="chart-switch" kind="3M" />')
+    },
+    {
+      id: "chart-switch-1y",
+      title: "chart-switch-1y",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "chart-switch", kind: "1Y" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="chart-switch" kind="1Y" />')
+    },
+    {
+      id: "table-button-explorer-default",
+      title: "table-button-explorer-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-button", kind: "explorer", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-button" kind="explorer" state="default" />')
+    },
+    {
+      id: "table-button-detail-default",
+      title: "table-button-detail-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-button", kind: "detail", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-button" kind="detail" state="default" />')
+    },
+    {
+      id: "table-button-explorer-hover",
+      title: "table-button-explorer-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-button", kind: "explorer", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-button" kind="explorer" state="hover" />')
+    },
+    {
+      id: "table-button-detail-hover",
+      title: "table-button-detail-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-button", kind: "detail", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-button" kind="detail" state="hover" />')
+    },
+    {
+      id: "table-button-explorer-active",
+      title: "table-button-explorer-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-button", kind: "explorer", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-button" kind="explorer" state="active" />')
+    },
+    {
+      id: "table-button-detail-active",
+      title: "table-button-detail-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-button", kind: "detail", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-button" kind="detail" state="active" />')
+    },
+    {
+      id: "table-switch-item-default",
+      title: "table-switch-item-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-switch-item", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-switch-item" state="default" />')
+    },
+    {
+      id: "table-switch-item-hover",
+      title: "table-switch-item-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-switch-item", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-switch-item" state="hover" />')
+    },
+    {
+      id: "table-switch-item-active",
+      title: "table-switch-item-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-switch-item", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-switch-item" state="active" />')
+    },
+    {
+      id: "table-tab-transaction-default",
+      title: "table-tab-transaction-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-tab", kind: "transaction", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-tab" kind="transaction" state="default" />')
+    },
+    {
+      id: "table-tab-open-orders-default",
+      title: "table-tab-open-orders-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-tab", kind: "open-orders", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-tab" kind="open-orders" state="default" />')
+    },
+    {
+      id: "table-tab-earn-rewards-default",
+      title: "table-tab-earn-rewards-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-tab", kind: "earn-rewards", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-tab" kind="earn-rewards" state="default" />')
+    },
+    {
+      id: "table-tab-transaction-hover",
+      title: "table-tab-transaction-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-tab", kind: "transaction", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-tab" kind="transaction" state="hover" />')
+    },
+    {
+      id: "table-tab-open-orders-hover",
+      title: "table-tab-open-orders-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-tab", kind: "open-orders", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-tab" kind="open-orders" state="hover" />')
+    },
+    {
+      id: "table-tab-earn-rewards-hover",
+      title: "table-tab-earn-rewards-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-tab", kind: "earn-rewards", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-tab" kind="earn-rewards" state="hover" />')
+    },
+    {
+      id: "table-tab-transaction-active",
+      title: "table-tab-transaction-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-tab", kind: "transaction", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-tab" kind="transaction" state="active" />')
+    },
+    {
+      id: "table-tab-open-orders-active",
+      title: "table-tab-open-orders-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-tab", kind: "open-orders", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-tab" kind="open-orders" state="active" />')
+    },
+    {
+      id: "table-tab-earn-rewards-active",
+      title: "table-tab-earn-rewards-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-tab", kind: "earn-rewards", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-tab" kind="earn-rewards" state="active" />')
+    },
+    {
+      id: "table-filter-type-default",
+      title: "table-filter-type-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "type", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="type" state="default" />')
+    },
+    {
+      id: "table-filter-date-default",
+      title: "table-filter-date-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "date", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="date" state="default" />')
+    },
+    {
+      id: "table-filter-token-default",
+      title: "table-filter-token-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "token", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="token" state="default" />')
+    },
+    {
+      id: "table-filter-status-default",
+      title: "table-filter-status-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "status", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="status" state="default" />')
+    },
+    {
+      id: "table-filter-date-hover",
+      title: "table-filter-date-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "date", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="date" state="hover" />')
+    },
+    {
+      id: "table-filter-type-hover",
+      title: "table-filter-type-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "type", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="type" state="hover" />')
+    },
+    {
+      id: "table-filter-date-active",
+      title: "table-filter-date-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "date", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="date" state="active" />')
+    },
+    {
+      id: "table-filter-token-hover",
+      title: "table-filter-token-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "token", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="token" state="hover" />')
+    },
+    {
+      id: "table-filter-status-hover",
+      title: "table-filter-status-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "status", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="status" state="hover" />')
+    },
+    {
+      id: "table-filter-date-selected",
+      title: "table-filter-date-selected",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "date", state: "selected" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="date" state="selected" />')
+    },
+    {
+      id: "table-filter-type-active",
+      title: "table-filter-type-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "type", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="type" state="active" />')
+    },
+    {
+      id: "table-filter-token-active",
+      title: "table-filter-token-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "token", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="token" state="active" />')
+    },
+    {
+      id: "table-filter-status-active",
+      title: "table-filter-status-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "status", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="status" state="active" />')
+    },
+    {
+      id: "table-filter-type-selected",
+      title: "table-filter-type-selected",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "type", state: "selected" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="type" state="selected" />')
+    },
+    {
+      id: "table-filter-token-selected",
+      title: "table-filter-token-selected",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "token", state: "selected" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="token" state="selected" />')
+    },
+    {
+      id: "table-filter-status-selected",
+      title: "table-filter-status-selected",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-filter", kind: "status", state: "selected" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-filter" kind="status" state="selected" />')
+    },
+    {
+      id: "table-switch-compact-24",
+      title: "table-switch-compact-24",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-switch", kind: "compact", size: 24 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-switch" kind="compact" size={24} />')
+    },
+    {
+      id: "table-switch-detailed-24",
+      title: "table-switch-detailed-24",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-switch", kind: "detailed", size: 24 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-switch" kind="detailed" size={24} />')
+    },
+    {
+      id: "table-switch-compact-28",
+      title: "table-switch-compact-28",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-switch", kind: "compact", size: 28 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-switch" kind="compact" size={28} />')
+    },
+    {
+      id: "table-switch-detailed-28",
+      title: "table-switch-detailed-28",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "table-switch", kind: "detailed", size: 28 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="table-switch" kind="detailed" size={28} />')
+    },
+    {
+      id: "swap-input-selling-default",
+      title: "swap-input-selling-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "selling", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="selling" state="default" />')
+    },
+    {
+      id: "swap-input-receive-default",
+      title: "swap-input-receive-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "receive", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="receive" state="default" />')
+    },
+    {
+      id: "swap-input-selling-hover",
+      title: "swap-input-selling-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "selling", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="selling" state="hover" />')
+    },
+    {
+      id: "swap-input-receive-hover",
+      title: "swap-input-receive-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "receive", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="receive" state="hover" />')
+    },
+    {
+      id: "swap-input-selling-active",
+      title: "swap-input-selling-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "selling", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="selling" state="active" />')
+    },
+    {
+      id: "swap-input-receive-active",
+      title: "swap-input-receive-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "receive", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="receive" state="active" />')
+    },
+    {
+      id: "swap-input-selling-filled",
+      title: "swap-input-selling-filled",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "selling", state: "filled" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="selling" state="filled" />')
+    },
+    {
+      id: "swap-input-receive-filled",
+      title: "swap-input-receive-filled",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "receive", state: "filled" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="receive" state="filled" />')
+    },
+    {
+      id: "swap-input-selling-disabled",
+      title: "swap-input-selling-disabled",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "selling", state: "disabled" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="selling" state="disabled" />')
+    },
+    {
+      id: "swap-input-receive-disabled",
+      title: "swap-input-receive-disabled",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "receive", state: "disabled" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="receive" state="disabled" />')
+    },
+    {
+      id: "swap-input-selling-error",
+      title: "swap-input-selling-error",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "selling", state: "error" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="selling" state="error" />')
+    },
+    {
+      id: "swap-input-receive-error",
+      title: "swap-input-receive-error",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-input", kind: "receive", state: "error" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-input" kind="receive" state="error" />')
+    },
+    {
+      id: "swap-1",
+      title: "swap-1",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap", step: 1 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap" step={1} />')
+    },
+    {
+      id: "swap-2",
+      title: "swap-2",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap", step: 2 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap" step={2} />')
+    },
+    {
+      id: "swap-3",
+      title: "swap-3",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap", step: 3 }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap" step={3} />')
+    },
+    {
+      id: "search-modal-default",
+      title: "search-modal-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "search-modal", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="search-modal" state="default" />')
+    },
+    {
+      id: "search-modal-searching",
+      title: "search-modal-searching",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "search-modal", state: "searching" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="search-modal" state="searching" />')
+    },
+    {
+      id: "search-modal-empty",
+      title: "search-modal-empty",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "search-modal", state: "empty" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="search-modal" state="empty" />')
+    },
+    {
+      id: "search-input-default",
+      title: "search-input-default",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "search-input", state: "default" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="search-input" state="default" />')
+    },
+    {
+      id: "search-input-hover",
+      title: "search-input-hover",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "search-input", state: "hover" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="search-input" state="hover" />')
+    },
+    {
+      id: "search-input-active",
+      title: "search-input-active",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "search-input", state: "active" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="search-input" state="active" />')
+    },
+    {
+      id: "navigation-false",
+      title: "navigation-false",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation", profile: false }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation" profile={false} />')
+    },
+    {
+      id: "navigation-true",
+      title: "navigation-true",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "navigation", profile: true }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="navigation" profile={true} />')
+    },
+    {
+      id: "social-button-phantom-default-true",
+      title: "social-button-phantom-default-true",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "phantom", state: "default", onlyIcon: true }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="phantom" state="default" onlyIcon={true} />'
+      )
+    },
+    {
+      id: "social-button-walletconnect-default-true",
+      title: "social-button-walletconnect-default-true",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "walletconnect", state: "default", onlyIcon: true }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="walletconnect" state="default" onlyIcon={true} />'
+      )
+    },
+    {
+      id: "social-button-metamask-default-true",
+      title: "social-button-metamask-default-true",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "metamask", state: "default", onlyIcon: true }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="metamask" state="default" onlyIcon={true} />'
+      )
+    },
+    {
+      id: "social-button-phantom-hover-true",
+      title: "social-button-phantom-hover-true",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "phantom", state: "hover", onlyIcon: true }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="phantom" state="hover" onlyIcon={true} />'
+      )
+    },
+    {
+      id: "social-button-walletconnect-hover-true",
+      title: "social-button-walletconnect-hover-true",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "walletconnect", state: "hover", onlyIcon: true }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="walletconnect" state="hover" onlyIcon={true} />'
+      )
+    },
+    {
+      id: "social-button-metamask-hover-true",
+      title: "social-button-metamask-hover-true",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "metamask", state: "hover", onlyIcon: true }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="metamask" state="hover" onlyIcon={true} />'
+      )
+    },
+    {
+      id: "social-button-phantom-default-false",
+      title: "social-button-phantom-default-false",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "phantom", state: "default", onlyIcon: false }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="phantom" state="default" onlyIcon={false} />'
+      )
+    },
+    {
+      id: "social-button-phantom-hover-false",
+      title: "social-button-phantom-hover-false",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "phantom", state: "hover", onlyIcon: false }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="phantom" state="hover" onlyIcon={false} />'
+      )
+    },
+    {
+      id: "social-button-walletconnect-default-false",
+      title: "social-button-walletconnect-default-false",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "walletconnect", state: "default", onlyIcon: false }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="walletconnect" state="default" onlyIcon={false} />'
+      )
+    },
+    {
+      id: "social-button-walletconnect-hover-false",
+      title: "social-button-walletconnect-hover-false",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "walletconnect", state: "hover", onlyIcon: false }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="walletconnect" state="hover" onlyIcon={false} />'
+      )
+    },
+    {
+      id: "social-button-metamask-default-false",
+      title: "social-button-metamask-default-false",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "metamask", state: "default", onlyIcon: false }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="metamask" state="default" onlyIcon={false} />'
+      )
+    },
+    {
+      id: "social-button-metamask-hover-false",
+      title: "social-button-metamask-hover-false",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "social-button", kind: "metamask", state: "hover", onlyIcon: false }),
+      code: cryptocurrencyPatternCode(
+        '<CryptocurrencyDemo part="social-button" kind="metamask" state="hover" onlyIcon={false} />'
+      )
+    },
+    {
+      id: "menu-dropdown",
+      title: "menu-dropdown",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "menu-dropdown" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="menu-dropdown" />')
+    },
+    {
+      id: "favorites-dropdown",
+      title: "favorites-dropdown",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "favorites-dropdown" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="favorites-dropdown" />')
+    },
+    {
+      id: "profile-dropdown",
+      title: "profile-dropdown",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "profile-dropdown" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="profile-dropdown" />')
+    },
+    {
+      id: "wallet-dropdown",
+      title: "wallet-dropdown",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "wallet-dropdown" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="wallet-dropdown" />')
+    },
+    {
+      id: "swap-token-dropdown",
+      title: "swap-token-dropdown",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "swap-token-dropdown" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="swap-token-dropdown" />')
+    },
+    {
+      id: "notifications-dropdown",
+      title: "notifications-dropdown",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "notifications-dropdown" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="notifications-dropdown" />')
+    },
+    {
+      id: "connect-wallet",
+      title: "connect-wallet",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "connect-wallet" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="connect-wallet" />')
+    },
+    {
+      id: "banner",
+      title: "banner",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "banner" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="banner" />')
+    },
+    {
+      id: "filter-type",
+      title: "filter-type",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "filter-type" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="filter-type" />')
+    },
+    {
+      id: "filter-date",
+      title: "filter-date",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "filter-date" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="filter-date" />')
+    },
+    {
+      id: "filter-status",
+      title: "filter-status",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "filter-status" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="filter-status" />')
+    },
+    {
+      id: "filter-token",
+      title: "filter-token",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "filter-token" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="filter-token" />')
+    },
+    {
+      id: "mobile-navigation",
+      title: "mobile-navigation",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "mobile-navigation" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="mobile-navigation" />')
+    },
+    {
+      id: "mobile-bottom-navigation",
+      title: "mobile-bottom-navigation",
+      render: () => /* @__PURE__ */ jsx(CryptocurrencyDemo, { part: "mobile-bottom-navigation" }),
+      code: cryptocurrencyPatternCode('<CryptocurrencyDemo part="mobile-bottom-navigation" />')
+    }
+  ]
+};
 const entries = [
+  cryptocurrencyEntry,
   pageEntry,
   sectionHeaderEntry,
   sectionPageEntry,