@xenide-io/the-old-ui-theme 0.4.3 → 0.4.6

package/src/components/sections/AccordionShowcase.tsx

@@ -1,45 +0,0 @@
-import { Accordion, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function AccordionShowcase() {
-  const items = [
-    {
-      id: "1",
-      title: "What is The Old UI?",
-      content: "The Old UI is a comprehensive component library with swappable themes, bespoke icons, and dashboard-ready components built with Tailwind CSS.",
-    },
-    {
-      id: "2",
-      title: "How do I install it?",
-      content: "Simply copy the component files into your project. Each component is self-contained and uses Tailwind CSS utility classes.",
-    },
-    {
-      id: "3",
-      title: "Can I customize themes?",
-      content: "Yes! The Old UI supports multiple themes including TurtleTime, HedgeHog Light, Sheets, and more. Themes are CSS-variable based.",
-    },
-  ];
-
-  const code = `import { Accordion } from "the-old-ui";
-
-<Accordion items={items} allowMultiple defaultOpen={["1"]} />`;
-
-  return (
-    <ShowcaseWrapper
-      title="Accordion"
-      description="Disclosure list with controlled defaults for single or multiple open items."
-      code={code}
-      filename="AccordionExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "items", type: "{ id; title; content }[]", description: "Accordion panels to render." },
-            { name: "allowMultiple", type: "boolean", defaultValue: "false", description: "Allows more than one panel open." },
-            { name: "defaultOpen", type: "string[]", description: "Initial open item ids." },
-          ]}
-        />
-      }
-    >
-      <Accordion items={items} allowMultiple defaultOpen={["1"]} />
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/AlertShowcase.tsx

@@ -1,40 +0,0 @@
-import { Alert, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function AlertShowcase() {
-  const code = `import { Alert } from "@xenide-io/the-old-ui-theme";
-
-<div className="space-y-4">
-  <Alert status="info" title="Pipeline delay" description="Events are flowing; warehouse sync may lag by ~2 minutes." />
-  <Alert status="success" title="Flag shipped" description="The multivariate rollout finished for all environments." />
-  <Alert status="warning" title="Sample rate adjusted" description="Replay capture dropped to 20% until billing resets." />
-  <Alert status="danger" title="Exporter error" description="Snowflake credential rotation failed — check IAM role ARN." />
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Alerts"
-      description="Status messages with built-in icon, title, description, and optional dismiss action."
-      code={code}
-      filename="AlertExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "status", type: "info | success | warning | danger", defaultValue: "info", description: "Controls icon, border, and semantic colour." },
-            { name: "title", type: "string", description: "Short message title." },
-            { name: "description", type: "string", description: "Supporting message copy." },
-            { name: "onDismiss", type: "() => void", description: "Shows a close button when provided." },
-            { name: "icon", type: "ReactNode", description: "Optional custom icon override." },
-            { name: "live", type: "off | polite | assertive", description: "Opt into live-region announcements for content that appears dynamically." },
-          ]}
-        />
-      }
-    >
-      <div className="space-y-4">
-        <Alert status="info" title="Pipeline delay" description="Events are flowing; warehouse sync may lag by ~2 minutes." />
-        <Alert status="success" title="Flag shipped" description="The multivariate rollout finished for all environments." />
-        <Alert status="warning" title="Sample rate adjusted" description="Replay capture dropped to 20% until billing resets." />
-        <Alert status="danger" title="Exporter error" description="Snowflake credential rotation failed — check IAM role ARN." />
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/AvatarShowcase.tsx

@@ -1,80 +0,0 @@
-import { Avatar, AvatarGroup, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function AvatarShowcase() {
-  const code = `import { Avatar, AvatarGroup } from "the-old-ui";
-
-<div className="grid gap-8 lg:grid-cols-2">
-  <div className="ph-panel space-y-4">
-    <h3>Sizes</h3>
-    <Avatar label="XL" size="xl" color="bg-ph-brand text-white" />
-    <Avatar label="LG" size="lg" color="bg-ph-blue text-white" />
-    <Avatar label="MD" size="md" color="bg-ph-purple text-white" />
-    <Avatar label="SM" size="sm" color="bg-ph-toolbar text-ph-ink" />
-  </div>
-
-  <div className="ph-panel space-y-5">
-    <h3>Stacked collaborators</h3>
-    <AvatarGroup>
-      <Avatar label="MJ" color="bg-orange-400 text-orange-950" />
-      <Avatar label="AR" color="bg-sky-500 text-white" />
-      <Avatar label="CK" color="bg-violet-600 text-white" />
-    </AvatarGroup>
-
-    <div className="flex gap-4">
-      <Avatar label="ON" color="bg-emerald-200 text-emerald-950" status="online" />
-      <Avatar label="JD" color="bg-ph-muted text-ph-ink" status="offline" />
-      <Avatar label="CP" color="bg-amber-200 text-amber-950" badge="12" />
-    </div>
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Avatars"
-      description="Reusable avatar component with sizes, status indicators, badges, and group stacking."
-      code={code}
-      filename="AvatarExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "label", type: "string", description: "Text initials or label." },
-            { name: "size", type: "xs | sm | md | lg | xl", defaultValue: "md", description: "Avatar size." },
-            { name: "color", type: "string", defaultValue: "bg-ph-brand text-white", description: "Tailwind colour classes." },
-            { name: "status", type: "online | offline | away | busy", description: "Status indicator dot." },
-            { name: "badge", type: "string", description: "Badge count/text." },
-            { name: "icon", type: "ReactNode", description: "Optional icon or image." },
-          ]}
-        />
-      }
-    >
-      <div className="grid gap-8 lg:grid-cols-2">
-        <div className="ph-panel space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Sizes</h3>
-          <div className="flex flex-wrap items-end gap-5">
-            <Avatar label="XL" size="xl" color="bg-ph-brand text-white" />
-            <Avatar label="LG" size="lg" color="bg-ph-blue text-white" />
-            <Avatar label="MD" size="md" color="bg-ph-purple text-white" />
-            <Avatar label="SM" size="sm" color="bg-ph-toolbar text-ph-ink" />
-            <Avatar label="XS" size="xs" color="bg-ph-muted text-ph-ink" />
-          </div>
-        </div>
-
-        <div className="ph-panel space-y-5">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Stacked collaborators</h3>
-          <AvatarGroup max={3}>
-            <Avatar label="MJ" color="bg-orange-400 text-orange-950" />
-            <Avatar label="AR" color="bg-sky-500 text-white" />
-            <Avatar label="CK" color="bg-violet-600 text-white" />
-            <Avatar label="+9" color="bg-ph-toolbar text-ph-subtle" />
-          </AvatarGroup>
-
-          <div className="flex gap-4">
-            <Avatar label="ON" color="bg-emerald-200 text-emerald-950" status="online" />
-            <Avatar label="JD" color="bg-ph-muted text-ph-ink" status="offline" />
-            <Avatar label="CP" color="bg-amber-200 text-amber-950" badge="12" />
-          </div>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/BadgeShowcase.tsx

@@ -1,65 +0,0 @@
-import { Badge, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function BadgeShowcase() {
-  const code = `import { Badge } from "@xenide-io/the-old-ui-theme";
-
-<div className="ph-panel space-y-6">
-  <div>
-    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic</h3>
-    <div className="flex flex-wrap gap-2">
-      <Badge variant="brand">Beta</Badge>
-      <Badge variant="neutral">Archived</Badge>
-      <Badge variant="success">Live</Badge>
-      <Badge variant="warning">Queued</Badge>
-      <Badge variant="danger">Failed</Badge>
-      <Badge variant="info">Docs</Badge>
-    </div>
-  </div>
-  <div>
-    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Outline</h3>
-    <div className="flex flex-wrap gap-2">
-      <Badge variant="outline">Feature flag</Badge>
-      <Badge variant="outline">Experiment</Badge>
-    </div>
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Badges"
-      description="Use badges for compact status, category, and product metadata. Defaults work without classes; use props for variants."
-      code={code}
-      filename="BadgeExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "variant", type: "brand | neutral | success | warning | danger | info | outline", defaultValue: "neutral", description: "Controls semantic colour and border treatment." },
-            { name: "size", type: "sm | md", defaultValue: "md", description: "Use sm for dense tables or compact nav." },
-            { name: "className", type: "string", description: "Optional escape hatch for layout-only overrides." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel space-y-6">
-        <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic</h3>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="brand">Beta</Badge>
-            <Badge variant="neutral">Archived</Badge>
-            <Badge variant="success">Live</Badge>
-            <Badge variant="warning">Queued</Badge>
-            <Badge variant="danger">Failed</Badge>
-            <Badge variant="info">Docs</Badge>
-          </div>
-        </div>
-        <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Outline</h3>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline">Feature flag</Badge>
-            <Badge variant="outline">Experiment</Badge>
-          </div>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/ButtonShowcase.tsx

@@ -1,308 +0,0 @@
-import {
-  IconDownload,
-  IconPlayCircle,
-  IconPlus,
-  IconSave,
-  IconSubArrowRight,
-  IconTrash,
-  IconUpload,
-} from "@/components/icons";
-import { Button, ComponentDocs, DropdownButton, DropdownItem, Panel, ShowcaseWrapper } from "@/components/ui";
-
-export default function ButtonShowcase() {
-  const code = `import { Button, DropdownButton, DropdownItem, IconDownload, IconPlayCircle, IconPlus, IconSave, IconSubArrowRight, IconTrash, IconUpload, Panel } from "@xenide-io/the-old-ui-theme";
-
-<div className="space-y-8">
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Toolbar (like HogQL / insights)</h3>
-    <div className="flex flex-wrap items-center gap-2 rounded-lemon border border-ph-border bg-ph-surface p-3 shadow-elevation-3000">
-      <DropdownButton
-        label="Run"
-        variant="primary"
-        split
-        icon={<IconPlayCircle className="h-4 w-4" aria-hidden />}
-      >
-        <DropdownItem>Run now</DropdownItem>
-        <DropdownItem>Run as new insight…</DropdownItem>
-      </DropdownButton>
-      <DropdownButton
-        label="Variables"
-        variant="secondary"
-        icon={
-          <span className="font-mono text-sm leading-none" aria-hidden>
-            {"{}"}
-          </span>
-        }
-      >
-        <DropdownItem>Manage variables…</DropdownItem>
-        <DropdownItem>Insert column…</DropdownItem>
-      </DropdownButton>
-      <DropdownButton label="Filters" variant="secondary" panelClassName="min-w-[13rem]">
-        <DropdownItem>Add filter group</DropdownItem>
-        <DropdownItem>Clear all filters</DropdownItem>
-        <DropdownItem className="text-ph-mutedtext">Save as cohort…</DropdownItem>
-      </DropdownButton>
-      <Button variant="secondary" size="sm" shape="square" aria-label="Layout">
-        <span className="flex gap-0.5" aria-hidden>
-          <span className="h-4 w-1.5 rounded-sm bg-current" />
-          <span className="h-4 w-1.5 rounded-sm bg-current opacity-40" />
-        </span>
-      </Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Lemon 3000 primary & secondary</h3>
-    <div className="flex flex-wrap gap-3">
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="primary" outline>
-        Primary outline
-      </Button>
-      <Button variant="secondary" outline>
-        Secondary outline
-      </Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Marketing signal vs in-app</h3>
-    <div className="flex flex-wrap gap-3">
-      <Button variant="primary">App primary (3000)</Button>
-      <Button variant="signal">Marketing signal</Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic solids</h3>
-    <div className="flex flex-wrap gap-3">
-      <Button variant="accent">Accent</Button>
-      <Button variant="neutral">Neutral</Button>
-      <Button variant="info">Info</Button>
-      <Button variant="success">Success</Button>
-      <Button variant="warning">Warning</Button>
-      <Button variant="danger">Danger</Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">With icons</h3>
-    <div className="flex flex-wrap gap-3">
-      <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />}>
-        New project
-      </Button>
-      <Button variant="primary" sideIcon={<IconSubArrowRight className="h-4 w-4" aria-hidden />}>
-        Continue
-      </Button>
-      <Button variant="secondary" icon={<IconDownload className="h-4 w-4" aria-hidden />}>
-        Export
-      </Button>
-      <Button variant="success" icon={<IconSave className="h-4 w-4" aria-hidden />}>
-        Save
-      </Button>
-      <Button variant="danger" icon={<IconTrash className="h-4 w-4" aria-hidden />}>
-        Delete
-      </Button>
-      <Button variant="ghost" icon={<IconUpload className="h-4 w-4" aria-hidden />}>
-        Upload
-      </Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Sizes & shapes</h3>
-    <div className="flex flex-wrap items-end gap-3">
-      <Button variant="primary" size="xs">
-        XS
-      </Button>
-      <Button variant="primary" size="sm">
-        SM
-      </Button>
-      <Button variant="primary">MD</Button>
-      <Button variant="primary" size="lg">
-        LG
-      </Button>
-      <Button variant="primary" shape="circle" aria-label="Add">
-        <IconPlus className="h-5 w-5" />
-      </Button>
-      <Button variant="primary" shape="square" aria-label="Add">
-        <IconPlus className="h-5 w-5" />
-      </Button>
-      <Button variant="secondary" shape="wide">
-        Wide
-      </Button>
-    </div>
-  </Panel>
-
-  <Panel className="space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Ghost, link & states</h3>
-    <div className="flex flex-wrap items-center gap-4">
-      <Button variant="ghost">Tertiary</Button>
-      <Button variant="link">Text link button</Button>
-      <Button variant="primary" disabled>
-        Disabled
-      </Button>
-      <Button variant="primary" loading>Loading</Button>
-    </div>
-  </Panel>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Buttons"
-      description="Every filled variant shares the same bordered face, lower frame, hover lift, and pressed depth. Ghost and link actions stay flat."
-      code={code}
-      filename="ButtonExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "variant", type: "primary | secondary | tertiary | signal | accent | neutral | info | success | warning | danger | ghost | link", defaultValue: "secondary", description: "Controls semantic colour and Lemon chrome treatment." },
-            { name: "size", type: "xs | sm | md | lg", defaultValue: "md", description: "Controls density without extra classes." },
-            { name: "shape", type: "default | circle | square | wide", defaultValue: "default", description: "Applies common button shapes without className." },
-            { name: "outline", type: "boolean", defaultValue: "false", description: "Converts solid variants to outline treatment." },
-            { name: "icon", type: "ReactNode", description: "Leading icon slot." },
-            { name: "sideIcon", type: "ReactNode", description: "Trailing icon slot." },
-            { name: "split", type: "boolean", defaultValue: "false", description: "Adds split divider before the trailing slot." },
-            { name: "loading", type: "boolean", defaultValue: "false", description: "Disables the action, exposes aria-busy, and replaces the leading icon with a spinner." },
-            { name: "loadingLabel", type: "ReactNode", description: "Optional label shown while loading; the normal label stays in place by default." },
-          ]}
-        />
-      }
-    >
-      <div className="space-y-8">
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Toolbar (like HogQL / insights)</h3>
-          <div className="flex flex-wrap items-center gap-2 rounded-lemon border border-ph-border bg-ph-surface p-3 shadow-elevation-3000">
-            <DropdownButton
-              label="Run"
-              variant="primary"
-              split
-              icon={<IconPlayCircle className="h-4 w-4" aria-hidden />}
-            >
-              <DropdownItem>Run now</DropdownItem>
-              <DropdownItem>Run as new insight…</DropdownItem>
-            </DropdownButton>
-            <DropdownButton
-              label="Variables"
-              variant="secondary"
-              icon={
-                <span className="font-mono text-sm leading-none" aria-hidden>
-                  {"{}"}
-                </span>
-              }
-            >
-              <DropdownItem>Manage variables…</DropdownItem>
-              <DropdownItem>Insert column…</DropdownItem>
-            </DropdownButton>
-            <DropdownButton label="Filters" variant="secondary" panelClassName="min-w-[13rem]">
-              <DropdownItem>Add filter group</DropdownItem>
-              <DropdownItem>Clear all filters</DropdownItem>
-              <DropdownItem className="text-ph-mutedtext">Save as cohort…</DropdownItem>
-            </DropdownButton>
-            <Button variant="secondary" size="sm" shape="square" aria-label="Layout">
-              <span className="flex gap-0.5" aria-hidden>
-                <span className="h-4 w-1.5 rounded-sm bg-current" />
-                <span className="h-4 w-1.5 rounded-sm bg-current opacity-40" />
-              </span>
-            </Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Lemon 3000 primary & secondary</h3>
-          <div className="flex flex-wrap gap-3">
-            <Button variant="primary">Primary</Button>
-            <Button variant="secondary">Secondary</Button>
-            <Button variant="primary" outline>
-              Primary outline
-            </Button>
-            <Button variant="secondary" outline>
-              Secondary outline
-            </Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Marketing signal vs in-app</h3>
-          <div className="flex flex-wrap gap-3">
-            <Button variant="primary">App primary (3000)</Button>
-            <Button variant="signal">Marketing signal</Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic solids</h3>
-          <div className="flex flex-wrap gap-3">
-            <Button variant="accent">Accent</Button>
-            <Button variant="neutral">Neutral</Button>
-            <Button variant="info">Info</Button>
-            <Button variant="success">Success</Button>
-            <Button variant="warning">Warning</Button>
-            <Button variant="danger">Danger</Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">With icons</h3>
-          <div className="flex flex-wrap gap-3">
-            <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />}>
-              New project
-            </Button>
-            <Button variant="primary" sideIcon={<IconSubArrowRight className="h-4 w-4" aria-hidden />}>
-              Continue
-            </Button>
-            <Button variant="secondary" icon={<IconDownload className="h-4 w-4" aria-hidden />}>
-              Export
-            </Button>
-            <Button variant="success" icon={<IconSave className="h-4 w-4" aria-hidden />}>
-              Save
-            </Button>
-            <Button variant="danger" icon={<IconTrash className="h-4 w-4" aria-hidden />}>
-              Delete
-            </Button>
-            <Button variant="ghost" icon={<IconUpload className="h-4 w-4" aria-hidden />}>
-              Upload
-            </Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Sizes & shapes</h3>
-          <div className="flex flex-wrap items-end gap-3">
-            <Button variant="primary" size="xs">
-              XS
-            </Button>
-            <Button variant="primary" size="sm">
-              SM
-            </Button>
-            <Button variant="primary">MD</Button>
-            <Button variant="primary" size="lg">
-              LG
-            </Button>
-            <Button variant="primary" shape="circle" aria-label="Add">
-              <IconPlus className="h-5 w-5" />
-            </Button>
-            <Button variant="primary" shape="square" aria-label="Add">
-              <IconPlus className="h-5 w-5" />
-            </Button>
-            <Button variant="secondary" shape="wide">
-              Wide
-            </Button>
-          </div>
-        </Panel>
-
-        <Panel className="space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Ghost, link & states</h3>
-          <div className="flex flex-wrap items-center gap-4">
-            <Button variant="ghost">Tertiary</Button>
-            <Button variant="link">Text link button</Button>
-            <Button variant="primary" disabled>
-              Disabled
-            </Button>
-            <Button variant="primary" loading>Loading</Button>
-          </div>
-        </Panel>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/CalendarShowcase.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Calendar, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function CalendarShowcase() {
-  const [date, setDate] = useState<Date | undefined>(new Date());
-
-  const code = `import { Calendar } from "the-old-ui";
-
-const [date, setDate] = useState(new Date());
-
-<Calendar value={date} onChange={setDate} />`;
-
-  return (
-    <ShowcaseWrapper
-      title="Calendar"
-      description="Controlled date picker with theme-aware styling and navigation."
-      code={code}
-      filename="CalendarExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "value", type: "Date | undefined", description: "Selected date." },
-            { name: "onChange", type: "(date?: Date) => void", description: "Called when a date is selected." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel flex justify-center">
-        <Calendar value={date} onChange={setDate} />
-      </div>
-    </ShowcaseWrapper>
-  );
-}