@a2v2ai/uikit 0.0.38 → 0.0.39

package/Button/Button.stories.tsx

@@ -1,684 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { ArrowRight, Mail, Plus, Search, Trash2, Download, ChevronDown } from "../icons"
-import { Typography } from "../Typography/Typography"
-import { Flex } from "../Flex/Flex"
-import { Button } from "./Button"
-
-const meta: Meta<typeof Button> = {
-  title: "Components/Button",
-  component: Button,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: [
-        "primary",
-        "secondary",
-        "outline",
-        "ghost",
-        "ghost-muted",
-        "destructive",
-      ],
-      description: "The visual style variant of the button",
-    },
-    size: {
-      control: "select",
-      options: ["mini", "small", "regular", "large"],
-      description: "The size of the button",
-    },
-    roundness: {
-      control: "select",
-      options: ["default", "round"],
-      description: "The roundness of the button corners",
-    },
-    disabled: {
-      control: "boolean",
-      description: "Whether the button is disabled",
-    },
-    asChild: {
-      control: "boolean",
-      description: "Render as child element (for use with Link components)",
-    },
-    leftIcon: {
-      control: false,
-      description: "Icon to display on the left side of the button",
-    },
-    rightIcon: {
-      control: false,
-      description: "Icon to display on the right side of the button",
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof Button>
-
-export const Primary: Story = {
-  args: {
-    children: "Button",
-    variant: "primary",
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    children: "Button",
-    variant: "secondary",
-  },
-}
-
-export const Outline: Story = {
-  args: {
-    children: "Button",
-    variant: "outline",
-  },
-}
-
-export const Ghost: Story = {
-  args: {
-    children: "Button",
-    variant: "ghost",
-  },
-}
-
-export const GhostMuted: Story = {
-  args: {
-    children: "Button",
-    variant: "ghost-muted",
-  },
-}
-
-export const Destructive: Story = {
-  args: {
-    children: "Button",
-    variant: "destructive",
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    children: "Button",
-    disabled: true,
-  },
-}
-
-export const Sizes: Story = {
-  render: () => (
-    <Flex direction="row" align="center" gap={4}>
-      <Button size="mini">Mini</Button>
-      <Button size="small">Small</Button>
-      <Button size="regular">Regular</Button>
-      <Button size="large">Large</Button>
-    </Flex>
-  ),
-}
-
-export const Variants: Story = {
-  render: () => (
-    <Flex direction="row" align="center" gap={4}>
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="ghost-muted">Ghost Muted</Button>
-      <Button variant="destructive">Destructive</Button>
-    </Flex>
-  ),
-}
-
-export const Rounded: Story = {
-  render: () => (
-    <Flex direction="row" align="center" gap={4}>
-      <Button roundness="round" variant="primary">
-        Primary
-      </Button>
-      <Button roundness="round" variant="secondary">
-        Secondary
-      </Button>
-      <Button roundness="round" variant="outline">
-        Outline
-      </Button>
-      <Button roundness="round" variant="ghost">
-        Ghost
-      </Button>
-    </Flex>
-  ),
-}
-
-export const WithIcons: Story = {
-  render: () => (
-    <Flex gap={4}>
-      <Flex direction="row" align="center" gap={4}>
-        <Button leftIcon={<Mail />}>
-          Login with Email
-        </Button>
-        <Button rightIcon={<ArrowRight />}>
-          Next Step
-        </Button>
-        <Button leftIcon={<Plus />} rightIcon={<ChevronDown />}>
-          Add New
-        </Button>
-      </Flex>
-      <Flex direction="row" align="center" gap={4}>
-        <Button variant="secondary" leftIcon={<Search />}>
-          Search
-        </Button>
-        <Button variant="outline" leftIcon={<Download />}>
-          Download
-        </Button>
-        <Button variant="destructive" leftIcon={<Trash2 />}>
-          Delete
-        </Button>
-      </Flex>
-    </Flex>
-  ),
-}
-
-export const IconPositions: Story = {
-  parameters: {
-    layout: "padded",
-  },
-  render: () => (
-    <Flex gap={6}>
-      <Typography variant="subtitle1" color="main-700">Icon Positions</Typography>
-
-      {/* No Icons */}
-      <Flex gap={2}>
-        <Typography variant="body3" color="main-500">No Icons</Typography>
-        <Flex direction="row" align="center" gap={3}>
-          <Button variant="primary">Label</Button>
-          <Button variant="secondary">Label</Button>
-          <Button variant="outline">Label</Button>
-          <Button variant="ghost">Label</Button>
-          <Button variant="destructive">Label</Button>
-        </Flex>
-      </Flex>
-
-      {/* Left Icon Only */}
-      <Flex gap={2}>
-        <Typography variant="body3" color="main-500">Left Icon Only</Typography>
-        <Flex direction="row" align="center" gap={3}>
-          <Button variant="primary" leftIcon={<Mail />}>Label</Button>
-          <Button variant="secondary" leftIcon={<Plus />}>Label</Button>
-          <Button variant="outline" leftIcon={<Search />}>Label</Button>
-          <Button variant="ghost" leftIcon={<Download />}>Label</Button>
-          <Button variant="destructive" leftIcon={<Trash2 />}>Label</Button>
-        </Flex>
-      </Flex>
-
-      {/* Right Icon Only */}
-      <Flex gap={2}>
-        <Typography variant="body3" color="main-500">Right Icon Only</Typography>
-        <Flex direction="row" align="center" gap={3}>
-          <Button variant="primary" rightIcon={<ArrowRight />}>Label</Button>
-          <Button variant="secondary" rightIcon={<ChevronDown />}>Label</Button>
-          <Button variant="outline" rightIcon={<ArrowRight />}>Label</Button>
-          <Button variant="ghost" rightIcon={<ChevronDown />}>Label</Button>
-          <Button variant="destructive" rightIcon={<ArrowRight />}>Label</Button>
-        </Flex>
-      </Flex>
-
-      {/* Both Icons */}
-      <Flex gap={2}>
-        <Typography variant="body3" color="main-500">Both Icons</Typography>
-        <Flex direction="row" align="center" gap={3}>
-          <Button variant="primary" leftIcon={<Mail />} rightIcon={<ArrowRight />}>Label</Button>
-          <Button variant="secondary" leftIcon={<Plus />} rightIcon={<ChevronDown />}>Label</Button>
-          <Button variant="outline" leftIcon={<Search />} rightIcon={<ArrowRight />}>Label</Button>
-          <Button variant="ghost" leftIcon={<Download />} rightIcon={<ChevronDown />}>Label</Button>
-          <Button variant="destructive" leftIcon={<Trash2 />} rightIcon={<ArrowRight />}>Label</Button>
-        </Flex>
-      </Flex>
-
-      {/* Icon Only (Square Buttons) */}
-      <Flex gap={2}>
-        <Typography variant="body3" color="main-500">Icon Only (Square)</Typography>
-        <Flex direction="row" align="center" gap={3}>
-          <Button variant="primary" style={{ padding: "0", width: "36px", height: "36px" }}><Plus /></Button>
-          <Button variant="secondary" style={{ padding: "0", width: "36px", height: "36px" }}><Search /></Button>
-          <Button variant="outline" style={{ padding: "0", width: "36px", height: "36px" }}><Mail /></Button>
-          <Button variant="ghost" style={{ padding: "0", width: "36px", height: "36px" }}><Download /></Button>
-          <Button variant="destructive" style={{ padding: "0", width: "36px", height: "36px" }}><Trash2 /></Button>
-        </Flex>
-      </Flex>
-
-      {/* Icon Only (Round Buttons) */}
-      <Flex gap={2}>
-        <Typography variant="body3" color="main-500">Icon Only (Round)</Typography>
-        <Flex direction="row" align="center" gap={3}>
-          <Button variant="primary" roundness="round" style={{ padding: "0", width: "36px", height: "36px" }}><Plus /></Button>
-          <Button variant="secondary" roundness="round" style={{ padding: "0", width: "36px", height: "36px" }}><Search /></Button>
-          <Button variant="outline" roundness="round" style={{ padding: "0", width: "36px", height: "36px" }}><Mail /></Button>
-          <Button variant="ghost" roundness="round" style={{ padding: "0", width: "36px", height: "36px" }}><Download /></Button>
-          <Button variant="destructive" roundness="round" style={{ padding: "0", width: "36px", height: "36px" }}><Trash2 /></Button>
-        </Flex>
-      </Flex>
-    </Flex>
-  ),
-}
-
-export const AllSizesWithIcons: Story = {
-  parameters: {
-    layout: "padded",
-  },
-  render: () => (
-    <Flex gap={6}>
-      <Typography variant="subtitle1" color="main-700">All Sizes with Icons</Typography>
-
-      {/* Large */}
-      <Flex gap={2}>
-        <Typography variant="body3" color="main-500">Large</Typography>
-        <Flex direction="row" align="center" gap={3}>
-          <Button size="large">Label</Button>
-          <Button size="large" leftIcon={<Mail />}>Label</Button>
-          <Button size="large" rightIcon={<ArrowRight />}>Label</Button>
-          <Button size="large" leftIcon={<Mail />} rightIcon={<ArrowRight />}>Label</Button>
-        </Flex>
-      </Flex>
-
-      {/* Regular */}
-      <Flex gap={2}>
-        <Typography variant="body3" color="main-500">Regular</Typography>
-        <Flex direction="row" align="center" gap={3}>
-          <Button size="regular">Label</Button>
-          <Button size="regular" leftIcon={<Mail />}>Label</Button>
-          <Button size="regular" rightIcon={<ArrowRight />}>Label</Button>
-          <Button size="regular" leftIcon={<Mail />} rightIcon={<ArrowRight />}>Label</Button>
-        </Flex>
-      </Flex>
-
-      {/* Small */}
-      <Flex gap={2}>
-        <Typography variant="body3" color="main-500">Small</Typography>
-        <Flex direction="row" align="center" gap={3}>
-          <Button size="small">Label</Button>
-          <Button size="small" leftIcon={<Mail />}>Label</Button>
-          <Button size="small" rightIcon={<ArrowRight />}>Label</Button>
-          <Button size="small" leftIcon={<Mail />} rightIcon={<ArrowRight />}>Label</Button>
-        </Flex>
-      </Flex>
-
-      {/* Mini */}
-      <Flex gap={2}>
-        <Typography variant="body3" color="main-500">Mini</Typography>
-        <Flex direction="row" align="center" gap={3}>
-          <Button size="mini">Label</Button>
-          <Button size="mini" leftIcon={<Mail />}>Label</Button>
-          <Button size="mini" rightIcon={<ArrowRight />}>Label</Button>
-          <Button size="mini" leftIcon={<Mail />} rightIcon={<ArrowRight />}>Label</Button>
-        </Flex>
-      </Flex>
-    </Flex>
-  ),
-}
-
-export const AllVariantsAndSizes: Story = {
-  parameters: {
-    layout: "fullscreen",
-  },
-  render: () => (
-    <Flex style={{ padding: "32px", backgroundColor: "#ffffff", minHeight: "100vh", overflowX: "auto" }}>
-      {/* Header */}
-      <Flex style={{ borderBottom: "1px solid #e5e7eb", paddingBottom: "24px", marginBottom: "32px" }}>
-        <Typography variant="h3" color="main-950">Button</Typography>
-      </Flex>
-
-      {/* Main Content */}
-      <Flex gap={12} style={{ minWidth: "fit-content" }}>
-        {/* Default Roundness Section */}
-        <Flex gap={6}>
-          <Typography variant="subtitle1" color="main-700">Default Roundness</Typography>
-
-          {/* Variant Headers */}
-          <Flex direction="row">
-            <Flex style={{ width: "80px" }} />
-            <Flex direction="row" gap={0}>
-              {/* Primary */}
-              <Flex align="center" style={{ width: "532px" }}>
-                <Typography variant="body3" color="accent-600">Primary</Typography>
-                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
-                </Flex>
-              </Flex>
-              {/* Secondary */}
-              <Flex align="center" style={{ width: "532px" }}>
-                <Typography variant="body3" color="accent-600">Secondary</Typography>
-                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
-                </Flex>
-              </Flex>
-              {/* Outline */}
-              <Flex align="center" style={{ width: "532px" }}>
-                <Typography variant="body3" color="accent-600">Outline</Typography>
-                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
-                </Flex>
-              </Flex>
-            </Flex>
-          </Flex>
-
-          {/* Regular Row */}
-          <Flex direction="row" align="center">
-            <Flex style={{ width: "80px" }}>
-              <Typography variant="body3" color="main-500">Regular</Typography>
-            </Flex>
-            <Flex direction="row" gap={0}>
-              {/* Primary */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="regular">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="regular" className="bg-accent-700">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="regular" disabled>Label</Button></Flex>
-              {/* Secondary */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="regular">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="regular" className="bg-main-200">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="regular" disabled>Label</Button></Flex>
-              {/* Outline */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="regular">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="regular" className="bg-main-100">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="regular" disabled>Label</Button></Flex>
-            </Flex>
-          </Flex>
-
-          {/* Large Row */}
-          <Flex direction="row" align="center">
-            <Flex style={{ width: "80px" }}>
-              <Typography variant="body3" color="main-500">Large</Typography>
-            </Flex>
-            <Flex direction="row" gap={0}>
-              {/* Primary */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="large">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="large" className="bg-accent-700">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="large" disabled>Label</Button></Flex>
-              {/* Secondary */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="large">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="large" className="bg-main-200">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="large" disabled>Label</Button></Flex>
-              {/* Outline */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="large">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="large" className="bg-main-100">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="large" disabled>Label</Button></Flex>
-            </Flex>
-          </Flex>
-
-          {/* Small Row */}
-          <Flex direction="row" align="center">
-            <Flex style={{ width: "80px" }}>
-              <Typography variant="body3" color="main-500">Small</Typography>
-            </Flex>
-            <Flex direction="row" gap={0}>
-              {/* Primary */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="small">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="small" className="bg-accent-700">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="small" disabled>Label</Button></Flex>
-              {/* Secondary */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="small">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="small" className="bg-main-200">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="small" disabled>Label</Button></Flex>
-              {/* Outline */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="small">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="small" className="bg-main-100">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="small" disabled>Label</Button></Flex>
-            </Flex>
-          </Flex>
-
-          {/* Mini Row */}
-          <Flex direction="row" align="center">
-            <Flex style={{ width: "80px" }}>
-              <Typography variant="body3" color="main-500">Mini</Typography>
-            </Flex>
-            <Flex direction="row" gap={0}>
-              {/* Primary */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="mini">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="mini" className="bg-accent-700">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="mini" disabled>Label</Button></Flex>
-              {/* Secondary */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="mini">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="mini" className="bg-main-200">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="mini" disabled>Label</Button></Flex>
-              {/* Outline */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="mini">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="mini" className="bg-main-100">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="mini" disabled>Label</Button></Flex>
-            </Flex>
-          </Flex>
-        </Flex>
-
-        {/* Ghost, Destructive, Ghost Muted Section */}
-        <Flex gap={6}>
-          {/* Variant Headers */}
-          <Flex direction="row">
-            <Flex style={{ width: "80px" }} />
-            <Flex direction="row" gap={0}>
-              {/* Ghost */}
-              <Flex align="center" style={{ width: "532px" }}>
-                <Typography variant="body3" color="accent-600">Ghost</Typography>
-                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
-                </Flex>
-              </Flex>
-              {/* Destructive */}
-              <Flex align="center" style={{ width: "532px" }}>
-                <Typography variant="body3" color="error-600">Destructive</Typography>
-                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
-                </Flex>
-              </Flex>
-              {/* Ghost Muted */}
-              <Flex align="center" style={{ width: "532px" }}>
-                <Typography variant="body3" color="main-400">Ghost Muted</Typography>
-                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
-                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
-                </Flex>
-              </Flex>
-            </Flex>
-          </Flex>
-
-          {/* Regular Row */}
-          <Flex direction="row" align="center">
-            <Flex style={{ width: "80px" }}>
-              <Typography variant="body3" color="main-500">Regular</Typography>
-            </Flex>
-            <Flex direction="row" gap={0}>
-              {/* Ghost */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="regular">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="regular" className="bg-main-100 text-main-950">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="regular" disabled>Label</Button></Flex>
-              {/* Destructive */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="regular">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="regular" className="bg-error-700">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="regular" disabled>Label</Button></Flex>
-              {/* Ghost Muted */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="regular">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="regular" className="bg-main-100 text-main-600">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="regular" disabled>Label</Button></Flex>
-            </Flex>
-          </Flex>
-
-          {/* Large Row */}
-          <Flex direction="row" align="center">
-            <Flex style={{ width: "80px" }}>
-              <Typography variant="body3" color="main-500">Large</Typography>
-            </Flex>
-            <Flex direction="row" gap={0}>
-              {/* Ghost */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="large">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="large" className="bg-main-100 text-main-950">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="large" disabled>Label</Button></Flex>
-              {/* Destructive */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="large">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="large" className="bg-error-700">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="large" disabled>Label</Button></Flex>
-              {/* Ghost Muted */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="large">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="large" className="bg-main-100 text-main-600">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="large" disabled>Label</Button></Flex>
-            </Flex>
-          </Flex>
-
-          {/* Small Row */}
-          <Flex direction="row" align="center">
-            <Flex style={{ width: "80px" }}>
-              <Typography variant="body3" color="main-500">Small</Typography>
-            </Flex>
-            <Flex direction="row" gap={0}>
-              {/* Ghost */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="small">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="small" className="bg-main-100 text-main-950">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="small" disabled>Label</Button></Flex>
-              {/* Destructive */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="small">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="small" className="bg-error-700">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="small" disabled>Label</Button></Flex>
-              {/* Ghost Muted */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="small">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="small" className="bg-main-100 text-main-600">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="small" disabled>Label</Button></Flex>
-            </Flex>
-          </Flex>
-
-          {/* Mini Row */}
-          <Flex direction="row" align="center">
-            <Flex style={{ width: "80px" }}>
-              <Typography variant="body3" color="main-500">Mini</Typography>
-            </Flex>
-            <Flex direction="row" gap={0}>
-              {/* Ghost */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="mini">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="mini" className="bg-main-100 text-main-950">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="mini" disabled>Label</Button></Flex>
-              {/* Destructive */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="mini">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="mini" className="bg-error-700">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="mini" disabled>Label</Button></Flex>
-              {/* Ghost Muted */}
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="mini">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="mini" className="bg-main-100 text-main-600">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
-              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="mini" disabled>Label</Button></Flex>
-            </Flex>
-          </Flex>
-        </Flex>
-
-        {/* Examples Section */}
-        <Flex gap={6} style={{ marginTop: "24px", paddingTop: "24px", borderTop: "1px solid #e5e7eb" }}>
-          <Typography variant="subtitle1" color="main-700">Examples</Typography>
-
-          <Flex direction="row" gap={12}>
-            {/* Regular size examples */}
-            <Flex gap={4}>
-              <Typography variant="body2" color="main-600" className="font-medium">Regular Size</Typography>
-              <Flex gap={3}>
-                <Flex direction="row" gap={3}>
-                  <Button variant="primary" leftIcon={<Mail />}>Login with Email</Button>
-                  <Button variant="secondary" leftIcon={<Plus />}>Add Item</Button>
-                </Flex>
-                <Flex direction="row" gap={3}>
-                  <Button variant="outline" leftIcon={<Search />}>Edit</Button>
-                  <Button variant="ghost" leftIcon={<Plus />}>Add</Button>
-                  <Button variant="destructive" leftIcon={<Trash2 />}>Delete</Button>
-                </Flex>
-                <Flex direction="row" gap={3}>
-                  <Button variant="outline" leftIcon={<ChevronDown />}>Dropdown</Button>
-                  <Button variant="outline" leftIcon={<ChevronDown />}>Display</Button>
-                  <Button variant="outline" leftIcon={<ChevronDown />}>Display</Button>
-                </Flex>
-                <Flex direction="row" gap={3}>
-                  <Button variant="outline" leftIcon={<ArrowRight />}>Previous</Button>
-                  <Button variant="ghost" rightIcon={<ArrowRight />}>Next</Button>
-                </Flex>
-                <Flex direction="row" gap={3}>
-                  <Button variant="ghost" leftIcon={<Search />}>Search</Button>
-                  <Button variant="ghost" leftIcon={<Download />}>Bookmark</Button>
-                </Flex>
-              </Flex>
-            </Flex>
-
-            {/* Small size examples */}
-            <Flex gap={4}>
-              <Typography variant="body2" color="main-600" className="font-medium">Small Size</Typography>
-              <Flex gap={3}>
-                <Flex direction="row" gap={3}>
-                  <Button variant="primary" size="small" leftIcon={<Mail />}>Login with Email</Button>
-                  <Button variant="secondary" size="small" leftIcon={<Plus />}>Add Item</Button>
-                </Flex>
-                <Flex direction="row" gap={3}>
-                  <Button variant="outline" size="small" leftIcon={<Search />}>Edit</Button>
-                  <Button variant="ghost" size="small" leftIcon={<Plus />}>Add</Button>
-                  <Button variant="destructive" size="small" leftIcon={<Trash2 />}>Delete</Button>
-                </Flex>
-                <Flex direction="row" gap={3}>
-                  <Button variant="outline" size="small" leftIcon={<ChevronDown />}>Dropdown</Button>
-                  <Button variant="outline" size="small" leftIcon={<ChevronDown />}>Display</Button>
-                  <Button variant="outline" size="small" leftIcon={<ChevronDown />}>Display</Button>
-                </Flex>
-                <Flex direction="row" gap={3}>
-                  <Button variant="outline" size="small" leftIcon={<ArrowRight />}>Previous</Button>
-                  <Button variant="ghost" size="small" rightIcon={<ArrowRight />}>Next</Button>
-                </Flex>
-                <Flex direction="row" gap={3}>
-                  <Button variant="ghost" size="small" leftIcon={<Search />}>Search</Button>
-                  <Button variant="ghost" size="small" leftIcon={<Download />}>Bookmark</Button>
-                </Flex>
-              </Flex>
-            </Flex>
-
-            {/* Loading states */}
-            <Flex gap={4}>
-              <Typography variant="body2" color="main-600" className="font-medium">1:1 Fit</Typography>
-              <Typography variant="caption" color="main-400">Note: You can set a minimum width to<br />make the 1:1 pill button, e.g. 2:1</Typography>
-              <Flex gap={3}>
-                <Button variant="primary" roundness="round" style={{ width: "36px", height: "36px", padding: 0 }}><Plus /></Button>
-                <Button variant="secondary" roundness="round" style={{ width: "36px", height: "36px", padding: 0 }}><Plus /></Button>
-                <Button variant="outline" roundness="round" style={{ width: "36px", height: "36px", padding: 0 }}><Plus /></Button>
-                <Button variant="ghost" roundness="round" style={{ width: "36px", height: "36px", padding: 0 }}><Plus /></Button>
-              </Flex>
-            </Flex>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Flex>
-  ),
-}