aural-ui 4.0.1 → 4.1.0

package/dist/icons/import-left-arrow-folder-icon/ImportLeftArrowFolderIcon.stories.tsx

@@ -1,6 +1,21 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
+import { ArrowBoxLeftIcon } from "src/ui/icons/arrow-box-left-icon"
+import { ArrowLeftIcon } from "src/ui/icons/arrow-left-icon"
+import { DownloadIcon } from "src/ui/icons/download-icon"
+import { UploadIcon } from "src/ui/icons/upload-icon"
+import {
+  IconColorVariations,
+  IconDefaultCanvas,
+  IconDirectionalVariations,
+  IconPlaygroundCanvas,
+  IconSizeVariations,
+  IconUsageCanvas,
+  IconUsageSection,
+} from "src/ui/story-spec/icons/icon-story-canvas"
+import { AuralIconDocsPage } from "src/ui/story-spec/icons/icon-story-docs-page"
+
 import { ImportLeftArrowFolderIcon } from "."
 
 const meta: Meta<typeof ImportLeftArrowFolderIcon> = {
@@ -18,1058 +33,73 @@ const meta: Meta<typeof ImportLeftArrowFolderIcon> = {
     },
     docs: {
       page: () => (
-        <>
-          {/* Override default docs styling */}
-          <style>
-            {`
-              .sbdocs-wrapper {
-                padding: 0 ;
-                max-width: none ;
-                background: transparent ;
-              }
-              .sbdocs-content {
-                max-width: none ;
-                padding: 0 ;
-                margin: 0 ;
-                background: transparent ;
-              }
-              .docs-story {
-                background: transparent ;
-              }
-              .sbdocs {
-                background: transparent ;
-              }
-              body {
-                background: var(--color-fm-surface-primary) ;
-              }
-              #storybook-docs {
-                background: var(--color-fm-surface-primary) ;
-              }
-              .sbdocs-preview {
-                background: transparent ;
-                border: none ;
-              }
-              .sbdocs-h1, .sbdocs-h2, .sbdocs-h3, .sbdocs-h4, .sbdocs-h5, .sbdocs-h6 {
-                color: var(--color-fm-icon-active) ;
-              }
-              .sbdocs-p, .sbdocs-li {
-                color: var(--color-fm-secondary) ;
-              }
-              .sbdocs-code {
-                background: var(--color-fm-surface-secondary) ;
-                color: var(--color-fm-secondary-500) ;
-                border: 1px solid var(--color-fm-divider-secondary) ;
-              }
-              .sbdocs-pre {
-                background: var(--color-fm-surface-secondary) ;
-                border: 1px solid var(--color-fm-divider-secondary) ;
-              }
-              .sbdocs-table {
-                background: var(--color-fm-surface-secondary) ;
-                border: 1px solid var(--color-fm-divider-secondary) ;
-              }
-              .sbdocs-table th {
-                background: var(--color-fm-surface-secondary) ;
-                color: var(--color-fm-icon-active) ;
-                border-bottom: 1px solid var(--color-fm-divider-secondary) ;
-              }
-              .sbdocs-table td {
-                color: var(--color-fm-secondary) ;
-                border-bottom: 1px solid var(--color-fm-divider-tertiary) ;
-              }
-              @keyframes search-pulse {
-                0%, 100% { transform: scale(1); opacity: 1; }
-                50% { transform: scale(1.05); opacity: 0.8; }
-              }
-              .animate-search-pulse {
-                animation: search-pulse 2s ease-in-out infinite;
-              }
-              @keyframes document-slide {
-                0%, 100% { transform: translateX(0) rotate(0deg); }
-                50% { transform: translateX(-2px) rotate(-1deg); }
-              }
-              .animate-document-slide {
-                animation: document-slide 3s ease-in-out infinite;
-              }
-            `}
-          </style>
-
-          <div className="from-fm-surface-primary via-fm-icon-info/5 to-fm-surface-primary min-h-screen bg-linear-to-br">
-            {/* Header */}
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary relative overflow-hidden border-b backdrop-blur-xl">
-              <div className="from-fm-icon-info/10 to-fm-icon-info/10 absolute inset-0 bg-linear-to-r via-transparent" />
-              <div className="relative !mx-auto max-w-7xl px-6 py-16">
-                <div className="!space-y-6 text-center">
-                  <div className="border-fm-icon-info/30 from-fm-icon-info/20 to-fm-icon-info/20 !mx-auto flex h-24 w-24 items-center justify-center rounded-2xl border bg-linear-to-br">
-                    <ImportLeftArrowFolderIcon className="text-fm-icon-info h-12 w-12" />
-                  </div>
-                  <h1 className="!text-fm-primary text-5xl font-bold">
-                    ImportLeftArrowFolderIcon
-                  </h1>
-                  <p className="text-fm-secondary! !mx-auto max-w-3xl text-xl leading-relaxed">
-                    A specialized folder icon featuring a left-pointing import
-                    arrow, symbolizing incoming files or data. Ideal for file
-                    transfer interfaces, document import workflows, and
-                    organized content systems. Designed with accessibility in
-                    mind using Radix UI's AccessibleIcon wrapper.
-                  </p>
-
-                  {/* Stats */}
-                  <div className="flex items-center justify-center gap-8 pt-8">
-                    <div className="text-center">
-                      <div className="text-fm-icon-info text-3xl font-bold">
-                        Import
-                      </div>
-                      <div className="text-fm-tertiary text-sm">
-                        Bring in files smoothly
-                      </div>
-                    </div>
-                    <div className="bg-fm-divider-primary h-8 w-px" />
-                    <div className="text-center">
-                      <div className="text-fm-icon-info text-3xl font-bold">
-                        Directional
-                      </div>
-                      <div className="text-fm-tertiary text-sm">
-                        Left-arrow indicator
-                      </div>
-                    </div>
-                    <div className="bg-fm-divider-primary h-8 w-px" />
-                    <div className="text-center">
-                      <div className="text-fm-icon-info text-3xl font-bold">
-                        Accessible
-                      </div>
-                      <div className="text-fm-tertiary text-sm">
-                        Radix UI supported
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Content */}
-            <div className="!mx-auto max-w-7xl !space-y-16 px-6 py-12">
-              {/* Quick Usage */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Quick Start
-                </h2>
-
-                <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-                  {/* Basic Usage */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-xl font-semibold">
-                      Basic Usage
-                    </h3>
-                    <div className="bg-fm-surface-secondary rounded-lg p-4">
-                      <pre className="text-fm-icon-positive! overflow-x-auto text-sm">{`import { ImportLeftArrowFolderIcon } from "@icons/import-left-arrow-folder-icon"
+        <AuralIconDocsPage
+          accentToken="info"
+          features={[
+            {
+              title: "Import Files",
+              description: "Folder with import arrow",
+            },
+            { title: "currentColor", description: "Responds to text tokens" },
+            { title: "Accessible", description: "ARIA-ready by default" },
+          ]}
+          quickStart={{
+            codeExample: `import { ImportLeftArrowFolderIcon } from "src/ui/icons/import-left-arrow-folder-icon"
 
 function ImportButton() {
   return (
-    <button
-      aria-label="Import folder"
-      className="flex items-center gap-2 rounded border border-indigo-500/30 bg-indigo-500/10 px-4 py-2 text-indigo-300 hover:bg-indigo-500/20 hover:cursor-pointer"
-    >
-      <ImportLeftArrowFolderIcon className="h-4 w-4" />
+    <button className="flex items-center gap-2">
+      <ImportLeftArrowFolderIcon className="h-5 w-5 text-fm-icon-active" />
       Import
     </button>
   )
-}`}</pre>
-                    </div>
-                  </div>
-
-                  {/* Live Preview */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-xl font-semibold">
-                      Live Preview
-                    </h3>
-                    <div className="border-fm-divider-secondary bg-fm-surface-secondary flex h-32 items-center justify-center rounded-lg border">
-                      <button className="border-fm-icon-info/30 bg-fm-icon-info/10 text-fm-icon-info hover:bg-fm-icon-info/20 flex items-center gap-2 rounded border px-4 py-2 hover:cursor-pointer">
-                        <ImportLeftArrowFolderIcon className="h-4 w-4" />
-                        Import
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Props Documentation */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Props & Configuration
-                </h2>
-
-                <div className="border-fm-divider-secondary bg-fm-surface-secondary overflow-hidden rounded-lg border">
-                  <div className="bg-fm-surface-secondary p-4">
-                    <h3 className="text-fm-icon-active! text-xl font-semibold">
-                      Props
-                    </h3>
-                  </div>
-                  <table className="!my-0 w-full">
-                    <thead className="bg-fm-surface-secondary">
-                      <tr className="border-fm-divider-secondary border-b">
-                        <th className="text-fm-icon-active! px-6 py-4 text-left text-sm font-semibold">
-                          Prop
-                        </th>
-                        <th className="text-fm-icon-active! px-6 py-4 text-left text-sm font-semibold">
-                          Type
-                        </th>
-                        <th className="text-fm-icon-active! px-6 py-4 text-left text-sm font-semibold">
-                          Default
-                        </th>
-                        <th className="text-fm-icon-active! px-6 py-4 text-left text-sm font-semibold">
-                          Description
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {" "}
-                      <tr className="bg-fm-surface-secondary!">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          withAccessibility
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          boolean
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          true
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          Whether to wrap the icon with accessibility feature
-                        </td>
-                      </tr>
-                      <tr className="border-fm-divider-tertiary bg-fm-surface-secondary! border-b">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          height
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          number | string
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          24
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          Height of the icon in pixels
-                        </td>
-                      </tr>
-                      <tr className="border-fm-divider-tertiary border-b">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          stroke
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          string
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          currentColor
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          Stroke color of the icon lines
-                        </td>
-                      </tr>
-                      <tr className="border-fm-divider-tertiary bg-fm-surface-secondary! border-b">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          strokeWidth
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          number | string
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          1.5
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          Thickness of the stroke lines
-                        </td>
-                      </tr>
-                      <tr className="border-fm-divider-tertiary border-b">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          strokeLinecap
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          string
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          square
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          Style of line endings (e.g., butt, round, square)
-                        </td>
-                      </tr>
-                      <tr className="border-fm-divider-tertiary bg-fm-surface-secondary! border-b">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          className
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          string
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          -
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          CSS classes for styling (use for size, color, etc.)
-                        </td>
-                      </tr>
-                      <tr className="bg-fm-surface-secondary!">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          ...svgProps
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          SVGProps
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          -
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          All standard SVG element props supported by React
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-
-              {/* Size Variations */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Size Variations
-                </h2>
-                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
-                  <div className="!space-y-6">
-                    <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-                      <div className="!space-y-4">
-                        <h3 className="text-fm-icon-info! text-lg font-semibold">
-                          Standard Sizes
-                        </h3>
-                        <div className="bg-fm-surface-secondary flex items-end gap-6 rounded-lg p-6">
-                          <div className="text-center">
-                            <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-3 w-3" />
-                            <span className="text-fm-tertiary text-xs">
-                              12px
-                            </span>
-                          </div>
-                          <div className="text-center">
-                            <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-4 w-4" />
-                            <span className="text-fm-tertiary text-xs">
-                              16px
-                            </span>
-                          </div>
-                          <div className="text-center">
-                            <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-5 w-5" />
-                            <span className="text-fm-tertiary text-xs">
-                              20px
-                            </span>
-                          </div>
-                          <div className="text-center">
-                            <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-6 w-6" />
-                            <span className="text-fm-tertiary text-xs">
-                              24px
-                            </span>
-                          </div>
-                          <div className="text-center">
-                            <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-8 w-8" />
-                            <span className="text-fm-tertiary text-xs">
-                              32px
-                            </span>
-                          </div>
-                          <div className="text-center">
-                            <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-12 w-12" />
-                            <span className="text-fm-tertiary text-xs">
-                              48px
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="!space-y-4">
-                        <h3 className="text-fm-icon-info! text-lg font-semibold">
-                          Code Example
-                        </h3>
-                        <div className="bg-fm-surface-secondary rounded-lg p-4">
-                          <pre className="text-fm-icon-info! overflow-x-auto text-sm">
-                            {`// Small (16px)
-<ImportLeftArrowFolderIcon className="h-4 w-4 " />
-
-// Medium (24px)
-<ImportLeftArrowFolderIcon className="h-6 w-6 " />
-
-// Large (32px)
-<ImportLeftArrowFolderIcon className="h-8 w-8 " />
-
-// Custom size with props
-<ImportLeftArrowFolderIcon width={40} height={40} />`}
-                          </pre>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Color Variations */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Color Variations
-                </h2>
-
-                <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-                  {/* Semantic Colors */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Semantic Colors
-                    </h3>
-                    <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-4 rounded-lg border p-6">
-                      <div className="flex items-center gap-4">
-                        <ImportLeftArrowFolderIcon className="text-fm-icon-info h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Primary
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-info
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <ImportLeftArrowFolderIcon className="text-fm-icon-info h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Active
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-info
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <ImportLeftArrowFolderIcon className="text-fm-placeholder h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Disabled
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-placeholder
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <ImportLeftArrowFolderIcon className="text-fm-icon-info h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Info
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-info
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <ImportLeftArrowFolderIcon className="text-fm-icon-positive h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Success
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-positive
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <ImportLeftArrowFolderIcon className="text-fm-icon-warning h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Warning
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-warning
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <ImportLeftArrowFolderIcon className="text-fm-icon-negative h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Error
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-negative
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Custom Colors */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Custom Colors
-                    </h3>
-                    <div className="bg-fm-surface-secondary rounded-lg p-4">
-                      <pre className="text-fm-icon-positive! overflow-x-auto text-sm">
-                        {`// Using Tailwind classes
-<ImportLeftArrowFolderIcon className="h-6 w-6 text-indigo-400" />
-<ImportLeftArrowFolderIcon className="h-6 w-6 text-cyan-500" />
-
-// Using CSS custom properties
-<ImportLeftArrowFolderIcon 
-  className="h-6 w-6" 
-  style={{ color: 'var(--color-primary)' }} 
-/>
-
-// Direct stroke prop
-<ImportLeftArrowFolderIcon 
-  width={24} 
-  height={24} 
-  stroke="#3b82f6"
-/>`}
-                      </pre>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Usage Examples */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Usage Examples
-                </h2>
-
-                <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-                  {/* File Import Area */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      File Import Area
-                    </h3>
-                    <div className="!space-y-4">
-                      <div className="border-fm-divider-primary bg-fm-surface-secondary hover:border-fm-icon-info/50 hover:bg-fm-icon-info/10 relative rounded-lg border-2 border-dashed p-8 text-center transition-colors">
-                        <ImportLeftArrowFolderIcon className="text-fm-placeholder !mx-auto h-12 w-12" />
-                        <h4 className="text-fm-icon-active! mt-4 text-lg font-medium">
-                          Import Folder
-                        </h4>
-                        <p className="text-fm-tertiary! mt-2 text-sm">
-                          Drag and drop folders here, or click to browse
-                        </p>
-                        <button className="bg-fm-icon-info/20 text-fm-icon-info hover:bg-fm-icon-info/30 mt-4 rounded-lg px-4 py-2 transition-colors">
-                          Browse Folders
-                        </button>
-                      </div>
-                      <div className="bg-fm-surface-secondary rounded-lg p-4">
-                        <pre className="text-fm-icon-positive! overflow-x-auto text-sm">
-                          {`<div className="relative border-2 border-dashed border-white/20 bg-white/5 p-8 text-center rounded-lg hover:border-indigo-400/50 hover:bg-indigo-500/10 transition-colors">
-  <ImportFolderIcon className="mx-auto h-12 w-12 text-white/40" />
-  <h4 className="mt-4 text-lg font-medium text-white">Import Folder</h4>
-  <p className="mt-2 text-sm text-white/60">
-    Drag and drop folders here, or click to browse
-  </p>
-  <button className="mt-4 bg-indigo-500/20 px-4 py-2 rounded-lg text-indigo-300 hover:bg-indigo-500/30 transition-colors">
-    Browse Folders
-  </button>
-</div>`}
-                        </pre>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Import Status List */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Import Status List
-                    </h3>
-                    <div className="!space-y-4">
-                      <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-3 rounded-lg border p-4">
-                        {[
-                          { name: "Documents", status: "completed", count: 24 },
-                          { name: "Images", status: "processing", count: 56 },
-                          { name: "Videos", status: "pending", count: 12 },
-                        ].map((folder, index) => (
-                          <div
-                            key={index}
-                            className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-secondary flex items-center gap-3 rounded border p-3 transition-colors"
-                          >
-                            <ImportLeftArrowFolderIcon
-                              className={`h-5 w-5 ${
-                                folder.status === "completed"
-                                  ? "text-green-400"
-                                  : folder.status === "processing"
-                                    ? "text-yellow-400"
-                                    : "text-gray-400"
-                              }`}
-                            />
-                            <div className="flex-1">
-                              <div className="text-fm-icon-active text-sm font-medium">
-                                {folder.name}
-                              </div>
-                              <div className="text-fm-tertiary text-xs">
-                                {folder.count} files
-                              </div>
-                            </div>
-                            <div
-                              className={`rounded px-2 py-1 text-xs ${
-                                folder.status === "completed"
-                                  ? "bg-green-500/20 text-green-300"
-                                  : folder.status === "processing"
-                                    ? "bg-yellow-500/20 text-yellow-300"
-                                    : "bg-gray-500/20 text-gray-300"
-                              }`}
-                            >
-                              {folder.status}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                      <div className="bg-fm-surface-secondary rounded-lg p-4">
-                        <pre className="text-fm-icon-positive! overflow-x-auto text-sm">
-                          {`// Import status item
-<div className="flex items-center gap-3 border border-white/10 bg-white/5 p-3 rounded hover:bg-white/10 transition-colors">
-  <ImportFolderIcon className="h-5 w-5 text-green-400" />
-  <div className="flex-1">
-    <div className="text-sm font-medium text-white">Documents</div>
-    <div className="text-xs text-white/60">24 files</div>
-  </div>
-  <div className="text-xs px-2 py-1 rounded bg-green-500/20 text-green-300">
-    completed
-  </div>
-</div>`}
-                        </pre>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Button Integration */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Button Integration
-                    </h3>
-                    <div className="!space-y-4">
-                      <div className="flex flex-wrap gap-4">
-                        <button className="border-fm-icon-info/30 bg-fm-icon-info/20 text-fm-icon-info hover:bg-fm-icon-info/30 flex items-center gap-2 rounded-lg border px-4 py-2 transition-colors">
-                          <ImportLeftArrowFolderIcon className="h-4 w-4" />
-                          Import Folder
-                        </button>
-                        <button className="border-fm-icon-warning/30 bg-fm-icon-warning/20 text-fm-icon-warning hover:bg-fm-icon-warning/30 flex items-center gap-2 rounded-lg border px-4 py-2 transition-colors">
-                          <ImportLeftArrowFolderIcon className="h-4 w-4" />
-                          Batch Import
-                        </button>
-                        <button className="border-fm-divider-primary bg-fm-surface-secondary text-fm-secondary hover:bg-fm-surface-secondary flex items-center gap-2 rounded-lg border px-4 py-2 transition-colors">
-                          <ImportLeftArrowFolderIcon className="h-4 w-4" />
-                          Browse Folders
-                        </button>
-                      </div>
-                      <div className="bg-fm-surface-secondary rounded-lg p-4">
-                        <pre className="text-fm-icon-positive! overflow-x-auto text-sm">
-                          {`// Primary import button
-<button className="flex items-center gap-2 bg-indigo-500/20 border border-indigo-500/30 px-4 py-2 rounded-lg">
-  <ImportFolderIcon className="h-4 w-4" />
-  Import Folder
-</button>
-
-// Secondary button
-<button className="flex items-center gap-2 bg-white/5 border border-white/20 px-4 py-2 rounded-lg">
-  <ImportFolderIcon className="h-4 w-4" />
-  Browse Folders
-</button>`}
-                        </pre>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Sidebar Navigation */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Sidebar Navigation
-                    </h3>
-                    <div className="!space-y-4">
-                      <div className="border-fm-divider-secondary bg-fm-surface-secondary max-w-xs rounded-lg border p-3">
-                        {[
-                          { name: "All Files", icon: "📄", active: false },
-                          {
-                            name: "Import Folder",
-                            icon: "ImportFolderIcon",
-                            active: true,
-                          },
-                          { name: "Recent", icon: "🕒", active: false },
-                          { name: "Shared", icon: "👥", active: false },
-                        ].map((item, index) => (
-                          <div
-                            key={index}
-                            className={`flex cursor-pointer items-center gap-3 rounded p-2 transition-colors ${
-                              item.active
-                                ? "bg-indigo-500/20 text-indigo-200"
-                                : "text-white/70 hover:bg-white/10"
-                            }`}
-                          >
-                            {item.icon === "ImportFolderIcon" ? (
-                              <ImportLeftArrowFolderIcon
-                                className={`h-4 w-4 ${
-                                  item.active
-                                    ? "text-indigo-400"
-                                    : "text-white/50"
-                                }`}
-                              />
-                            ) : (
-                              <span className="text-sm">{item.icon}</span>
-                            )}
-                            <span className="flex-1 text-sm">{item.name}</span>
-                            {item.active && (
-                              <div className="bg-fm-icon-info h-2 w-2 rounded-full"></div>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                      <div className="bg-fm-surface-secondary rounded-lg p-4">
-                        <pre className="text-fm-icon-positive! overflow-x-auto text-sm">
-                          {`// Navigation item
-<div className="flex items-center gap-3 p-2 rounded bg-indigo-500/20 text-indigo-200 cursor-pointer">
-  <ImportFolderIcon className="h-4 w-4 text-indigo-400" />
-  <span className="flex-1 text-sm">Import Folder</span>
-  <div className="h-2 w-2 rounded-full bg-indigo-400"></div>
-</div>`}
-                        </pre>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Interactive States And Animations */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Interactive States & Animations
-                </h2>
-                <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Hover & Animation Effects
-                    </h3>
-                    <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-4 rounded-lg border p-6">
-                      <div className="flex items-center gap-4">
-                        <ImportLeftArrowFolderIcon className="text-fm-tertiary hover:text-fm-icon-info h-6 w-6 transition-colors" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Color Change
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            hover:text-fm-icon-info
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <ImportLeftArrowFolderIcon className="text-fm-icon-active h-6 w-6 transition-transform hover:scale-110" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Scale Up
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            hover:scale-110
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <ImportLeftArrowFolderIcon className="text-fm-icon-info h-6 w-6 animate-pulse" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Processing
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            animate-pulse
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <div
-                          className="rounded p-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
-                          tabIndex={0}
-                        >
-                          <ImportLeftArrowFolderIcon className="text-fm-icon-info h-6 w-6" />
-                        </div>
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Focus Ring
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            focus:ring-2
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <ImportLeftArrowFolderIcon className="animate-document-slide text-fm-icon-negative h-6 w-6" />
-
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Document Slide
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            animate-document-slide
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      State Examples
-                    </h3>
-                    <div className="bg-fm-surface-secondary rounded-lg p-4">
-                      <pre className="text-fm-icon-info! overflow-x-auto text-sm">
-                        {`// Hover effects
-<ImportLeftArrowFolderIcon className="h-6 w-6 text-white/60 hover:text-green-400 transition-colors " />
-
-// Scale on hover
-<ImportLeftArrowFolderIcon className="h-6 w-6 text-white hover:scale-110 transition-transform " />
-
-// Processing animation
-<ImportLeftArrowFolderIcon className="h-6 w-6 text-green-400 animate-pulse " />
-
-// Focus states for accessibility
-<div className="p-2 rounded focus:ring-2 focus:ring-green-500 focus:outline-none" tabIndex={0}>
-  <ImportLeftArrowFolderIcon className="h-6 w-6 text-white " />
-</div>
-
-// Pulse animation keyframes
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.animate-pulse {
-  animation: pulse 2s ease-in-out infinite;
-}`}
-                      </pre>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Accessibility */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Accessibility Features
-                </h2>
-
-                <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-4 rounded-lg border p-6">
-                    <h3 className="text-fm-icon-positive! text-lg font-semibold">
-                      ✅ Built-in Features
-                    </h3>
-                    <ul className="text-fm-secondary! !space-y-2 text-sm">
-                      <li className="text-fm-secondary!">
-                        Uses Radix UI AccessibleIcon wrapper
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Provides screen reader label "Import Left Arrow folder
-                        icon"
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Maintains proper color contrast ratios
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Scales with user's font size preferences
-                      </li>
-                    </ul>
-                  </div>
-
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-4 rounded-lg border p-6">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      💡 Best Practices
-                    </h3>
-                    <ul className="text-fm-secondary !space-y-2 text-sm">
-                      <li className="text-fm-secondary!">
-                        Always provide descriptive labels for import-related
-                        actions
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Use consistent placement in upload or import interfaces
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Ensure sufficient click/touch target sizes
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Add focus states for keyboard navigation
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Respect reduced motion preferences for import animations
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-
-                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-                  <h3 className="text-fm-secondary-600! mb-4 text-lg font-semibold">
-                    Custom Accessibility Implementation
-                  </h3>
-                  <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-                    {/* Code Example Block */}
-                    <div className="bg-fm-surface-secondary rounded-lg p-4">
-                      <pre className="text-fm-icon-info! overflow-x-auto text-sm">{`// Import button with ARIA
-<button 
-  aria-label="Import files into folder"
-  aria-pressed={importing}
-  className="flex items-center gap-2 p-2"
->
-  <ImportLeftArrowFolderIcon className="h-4 w-4" />
-  <span className="sr-only">Start file import</span>
-</button>
-
-// Grouped file input options
-<fieldset aria-labelledby="import-heading" className="space-y-2">
-  <legend id="import-heading" className="sr-only">Import Options</legend>
-  <div>
-    <label className="inline-flex items-center gap-2">
-      <input type="checkbox" aria-describedby="import-desc" />
-      Import as Draft
-    </label>
-  </div>
-  <div>
-    <label className="inline-flex items-center gap-2">
-      <input type="checkbox" />
-      Overwrite Existing
-    </label>
-  </div>
-</fieldset>
-<p id="import-desc" className="sr-only">
-  Choose how you want imported files to be handled upon upload.
-</p>`}</pre>
-                    </div>
-
-                    {/* Accessibility Note */}
-                    <div className="!space-y-4">
-                      <p className="text-fm-secondary! text-sm">
-                        When using <code>ImportLeftArrowFolderIcon</code> in
-                        upload or file action buttons, ensure ARIA labels
-                        clearly describe the behavior. Use semantic grouping
-                        with <code>fieldset</code> and
-                        <code>legend</code> for complex import settings to
-                        assist screen readers.
-                      </p>
-                      <div className="border-fm-icon-info/20 bg-fm-icon-info/10 rounded-lg border p-4">
-                        <div className="text-fm-icon-info flex items-center gap-2 text-sm">
-                          <ImportLeftArrowFolderIcon className="h-4 w-4" />
-                          <span>
-                            Use <code>aria-pressed</code> or{" "}
-                            <code>aria-expanded</code> for toggles, and wrap
-                            related settings in
-                            <code>fieldset</code> elements with clear labeling.
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Related Icons */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Related Icons
-                </h2>
-                <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-3 rounded-lg border p-4 text-center">
-                    <div className="bg-fm-icon-info/20 !mx-auto flex h-12 w-12 items-center justify-center rounded-lg">
-                      <span className="text-2xl">🔍</span>
-                    </div>
-                    <div>
-                      <div className="text-fm-icon-active font-medium">
-                        SearchIcon
-                      </div>
-                      <div className="text-fm-tertiary text-xs">
-                        General search
-                      </div>
-                    </div>
-                  </div>
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-3 rounded-lg border p-4 text-center">
-                    <div className="bg-fm-secondary-500/20 !mx-auto flex h-12 w-12 items-center justify-center rounded-lg">
-                      <span className="text-2xl">📈</span>
-                    </div>
-                    <div>
-                      <div className="text-fm-icon-active font-medium">
-                        TrendingUpIcon
-                      </div>
-                      <div className="text-fm-tertiary text-xs">
-                        Growth metrics
-                      </div>
-                    </div>
-                  </div>
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-3 rounded-lg border p-4 text-center">
-                    <div className="bg-fm-icon-info/20 !mx-auto flex h-12 w-12 items-center justify-center rounded-lg">
-                      <span className="text-2xl">📁</span>
-                    </div>
-                    <div>
-                      <div className="text-fm-icon-active font-medium">
-                        FolderIcon
-                      </div>
-                      <div className="text-fm-tertiary text-xs">
-                        File Organization
-                      </div>
-                    </div>
-                  </div>
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-3 rounded-lg border p-4 text-center">
-                    <div className="bg-fm-icon-positive/20 !mx-auto flex h-12 w-12 items-center justify-center rounded-lg">
-                      <span className="text-2xl">💾</span>
-                    </div>
-                    <div>
-                      <div className="text-fm-icon-active font-medium">
-                        SaveIcon
-                      </div>
-                      <div className="text-fm-tertiary text-xs">
-                        Save changes
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Footer */}
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary border-t backdrop-blur-xl">
-              <div className="!mx-auto max-w-7xl px-6 py-8">
-                <div className="!space-y-4 text-center">
-                  <p className="text-fm-tertiary!">
-                    FilterBarRowIcon is part of the Aural UI icon library, built
-                    for document search, content discovery, and page navigation
-                    functionality.
-                  </p>
-                  <p className="text-fm-placeholder! text-sm">
-                    All icons use Radix UI's AccessibleIcon for screen reader
-                    compatibility and follow WCAG guidelines for search
-                    interfaces.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </>
+}`,
+            livePreview: (
+              <button className="text-fm-primary font-fm-text flex items-center gap-2 text-sm">
+                <ImportLeftArrowFolderIcon className="text-fm-icon-active h-5 w-5" />
+                Import
+              </button>
+            ),
+          }}
+          relatedIcons={[
+            {
+              name: "DownloadIcon",
+              description: "Download to device",
+              icon: DownloadIcon,
+              accentToken: "info",
+            },
+            {
+              name: "UploadIcon",
+              description: "Upload from device",
+              icon: UploadIcon,
+              accentToken: "positive",
+            },
+            {
+              name: "ArrowLeftIcon",
+              description: "Simple left arrow",
+              icon: ArrowLeftIcon,
+              accentToken: "warning",
+            },
+            {
+              name: "ArrowBoxLeftIcon",
+              description: "Boxed left arrow",
+              icon: ArrowBoxLeftIcon,
+              accentToken: "negative",
+            },
+          ]}
+        />
       ),
     },
   },
   tags: ["autodocs"],
   argTypes: {
-    width: {
-      control: { type: "range", min: 8, max: 96, step: 2 },
-      description: "Width of the icon in pixels",
+    className: {
+      control: "text",
+      description: "CSS classes including size and color token",
     },
     withAccessibility: {
       control: "boolean",
-      description: "Whether to wrap the icon with accessibility features",
-    },
-    height: {
-      control: { type: "range", min: 8, max: 96, step: 2 },
-      description: "Height of the icon in pixels",
-    },
-    stroke: {
-      control: "color",
-      description: "Stroke color of the icon lines",
-    },
-    strokeWidth: {
-      control: { type: "range", min: 1, max: 4, step: 0.5 },
-      description: "Stroke width of the icon",
-    },
-    strokeLinecap: {
-      control: "select",
-      options: ["butt", "round", "square"],
-      description: "Style of line endings",
-    },
-    className: {
-      control: "text",
-      description: "CSS classes for styling (use  for overrides)",
+      description: "Wrap with accessibility label",
     },
   },
 }
@@ -1077,293 +107,107 @@ function ImportButton() {
 export default meta
 type Story = StoryObj<typeof ImportLeftArrowFolderIcon>
 
-// Story parameters for consistent dark theme
-const storyParameters = {
-  backgrounds: {
-    default: "dark",
-    values: [
-      { name: "dark", value: "var(--color-fm-surface-primary)" },
-      { name: "darker", value: "var(--color-fm-neutral-0)" },
-    ],
-  },
-}
-
 export const Default: Story = {
   args: {
-    width: 24,
-    height: 24,
-    className: "text-fm-icon-info ",
+    className: "h-6 w-6 text-fm-icon-active",
     withAccessibility: true,
   },
-  parameters: storyParameters,
   render: (args) => (
-    <div className="from-fm-surface-primary to-fm-surface-secondary flex h-32 min-h-dvh items-center justify-center rounded-lg bg-linear-to-br">
+    <IconDefaultCanvas>
       <ImportLeftArrowFolderIcon {...args} />
-    </div>
+    </IconDefaultCanvas>
   ),
 }
 
 export const SizeVariations: Story = {
-  parameters: {
-    ...storyParameters,
-    docs: {
-      description: {
-        story:
-          "GitBranchIcon in different sizes, from small search inputs to large interface elements.",
-      },
-    },
-  },
-  render: () => (
-    <div className="from-fm-surface-primary to-fm-surface-secondary flex h-64 min-h-dvh items-center justify-center gap-8 rounded-lg bg-linear-to-br p-8">
-      <div className="text-center">
-        <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-3 w-3" />
-        <span className="text-fm-tertiary text-xs">12px</span>
-      </div>
-      <div className="text-center">
-        <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-4 w-4" />
-        <span className="text-fm-tertiary text-xs">16px</span>
-      </div>
-      <div className="text-center">
-        <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-5 w-5" />
-        <span className="text-fm-tertiary text-xs">20px</span>
-      </div>
-      <div className="text-center">
-        <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-6 w-6" />
-        <span className="text-fm-tertiary text-xs">24px</span>
-      </div>
-      <div className="text-center">
-        <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-8 w-8" />
-        <span className="text-fm-tertiary text-xs">32px</span>
-      </div>
-      <div className="text-center">
-        <ImportLeftArrowFolderIcon className="text-fm-icon-info !mx-auto mb-2 h-12 w-12" />
-        <span className="text-fm-tertiary text-xs">48px</span>
-      </div>
-    </div>
-  ),
+  render: () => <IconSizeVariations icon={ImportLeftArrowFolderIcon} />,
 }
 
 export const ColorVariations: Story = {
-  parameters: {
-    ...storyParameters,
-    docs: {
-      description: {
-        story:
-          "GitBranchIcon in different colors for various search states and contexts.",
-      },
-    },
-  },
+  render: () => <IconColorVariations icon={ImportLeftArrowFolderIcon} />,
+}
+
+export const DirectionalVariations: Story = {
   render: () => (
-    <div className="from-fm-surface-primary to-fm-surface-secondary grid min-h-dvh grid-cols-2 items-center justify-center gap-6 rounded-lg bg-linear-to-br p-8 md:grid-cols-4">
-      <div className="text-center">
-        <div className="border-fm-icon-info/30 bg-fm-icon-info/20 !mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border">
-          <ImportLeftArrowFolderIcon className="text-fm-icon-info h-8 w-8" />
-        </div>
-        <div className="text-fm-icon-active text-sm font-medium">Primary</div>
-        <div className="text-fm-icon-info text-xs">text-fm-icon-info</div>
-      </div>
-      <div className="text-center">
-        <div className="border-fm-icon-info/30 bg-fm-icon-info/20 !mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border">
-          <ImportLeftArrowFolderIcon className="text-fm-icon-info h-8 w-8" />
-        </div>
-        <div className="text-fm-icon-active text-sm font-medium">Active</div>
-        <div className="text-fm-icon-info text-xs">text-fm-icon-info</div>
-      </div>
-      <div className="text-center">
-        <div className="border-fm-divider-primary bg-fm-surface-tertiary/20 !mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border">
-          <ImportLeftArrowFolderIcon className="text-fm-placeholder h-8 w-8" />
-        </div>
-        <div className="text-fm-icon-active text-sm font-medium">Disabled</div>
-        <div className="text-fm-placeholder text-xs">text-fm-placeholder</div>
-      </div>
-      <div className="text-center">
-        <div className="border-fm-icon-info/30 bg-fm-icon-info/20 !mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border">
-          <ImportLeftArrowFolderIcon className="text-fm-icon-info h-8 w-8" />
-        </div>
-        <div className="text-fm-icon-active text-sm font-medium">Info</div>
-        <div className="text-fm-icon-info text-xs">text-fm-icon-info</div>
-      </div>
-    </div>
+    <IconDirectionalVariations
+      icon={ImportLeftArrowFolderIcon}
+      directions={[
+        { label: "Import", className: "h-8 w-8 text-fm-icon-active" },
+        {
+          label: "Export",
+          className: "h-8 w-8 text-fm-icon-active rotate-180",
+        },
+      ]}
+    />
   ),
 }
 
 export const UsageExamples: Story = {
-  parameters: {
-    ...storyParameters,
-    docs: {
-      description: {
-        story:
-          "Real-world usage examples showing GitBranchIcon used in version control interfaces, including actions like creating branches, checking out branches, managing recent branches, and performing branch management tasks such as renaming or deleting branches.",
-      },
-    },
-  },
   render: () => (
-    <div className="from-fm-surface-primary to-fm-surface-primary min-h-dvh space-y-8 rounded-lg bg-linear-to-br p-8">
-      {/* File Import Area */}
-      <div className="space-y-2">
-        <h3 className="text-fm-icon-active text-sm font-medium">
-          File Import Area
-        </h3>
-        <div className="border-fm-divider-primary bg-fm-surface-secondary hover:border-fm-icon-info/50 hover:bg-fm-icon-info/10 relative rounded-lg border-2 border-dashed p-8 text-center transition-colors">
-          <ImportLeftArrowFolderIcon className="text-fm-placeholder mx-auto h-12 w-12" />
-          <h4 className="text-fm-icon-active mt-4 text-lg font-medium">
-            Import Folder
-          </h4>
-          <p className="text-fm-tertiary mt-2 text-sm">
-            Drag and drop folders here, or click to browse
-          </p>
-          <button className="border-fm-icon-info/30 bg-fm-icon-info/15 text-fm-icon-info hover:bg-fm-icon-info/25 mt-4 rounded-lg border px-4 py-2 transition hover:cursor-pointer">
-            Browse Folders
+    <IconUsageCanvas>
+      <IconUsageSection title="Import Action">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary w-full max-w-sm rounded-xl border p-4">
+          <button className="border-fm-divider-secondary flex w-full items-center gap-3 rounded-xl border px-4 py-3">
+            <ImportLeftArrowFolderIcon className="text-fm-icon-active h-5 w-5" />
+            <div className="text-left">
+              <div className="text-fm-primary font-fm-text text-sm font-medium">
+                Import episodes
+              </div>
+              <div className="text-fm-secondary font-fm-text text-xs">
+                From RSS or file
+              </div>
+            </div>
           </button>
         </div>
-      </div>
+      </IconUsageSection>
 
-      {/* Import Status */}
-      <div className="space-y-2">
-        <h3 className="text-fm-icon-active text-sm font-medium">
-          Import Status
-        </h3>
-        <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-lg border p-4">
+      <IconUsageSection title="File Operations">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary w-full max-w-sm space-y-px overflow-hidden rounded-xl border">
           {[
-            { name: "Documents", status: "completed", count: 24 },
-            { name: "Images", status: "processing", count: 56 },
-            { name: "Videos", status: "pending", count: 12 },
-          ].map((folder, index) => (
-            <div
-              key={index}
-              className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-secondary flex items-center gap-3 rounded border p-3 transition"
+            { label: "Import audio", icon: ImportLeftArrowFolderIcon },
+            { label: "Download file", icon: DownloadIcon },
+            { label: "Upload asset", icon: UploadIcon },
+          ].map(({ label, icon: Icon }) => (
+            <button
+              key={label}
+              className="border-fm-divider-secondary flex w-full items-center gap-3 border-b px-4 py-3 last:border-b-0"
             >
-              <ImportLeftArrowFolderIcon
-                className={`h-5 w-5 ${
-                  folder.status === "completed"
-                    ? "text-green-400"
-                    : folder.status === "processing"
-                      ? "text-yellow-400"
-                      : "text-gray-400"
-                }`}
-              />
-              <div className="flex-1">
-                <div className="text-fm-icon-active text-sm font-medium">
-                  {folder.name}
-                </div>
-                <div className="text-fm-tertiary text-xs">
-                  {folder.count} files
-                </div>
-              </div>
-              <div
-                className={`rounded px-2 py-1 text-xs ${
-                  folder.status === "completed"
-                    ? "bg-green-500/20 text-green-300"
-                    : folder.status === "processing"
-                      ? "bg-yellow-500/20 text-yellow-300"
-                      : "bg-gray-500/20 text-gray-300"
-                }`}
-              >
-                {folder.status}
-              </div>
-            </div>
+              <Icon className="text-fm-icon-active h-4 w-4" />
+              <span className="text-fm-primary font-fm-text text-sm">
+                {label}
+              </span>
+            </button>
           ))}
         </div>
-      </div>
+      </IconUsageSection>
 
-      {/* Button Integration */}
-      <div className="space-y-2">
-        <h3 className="text-fm-icon-active text-sm font-medium">
-          Button Integration
-        </h3>
-        <div className="flex gap-4">
-          <button className="border-fm-icon-info/30 bg-fm-icon-info/15 text-fm-icon-info hover:bg-fm-icon-info/25 flex items-center gap-2 rounded-lg border px-4 py-2 transition hover:cursor-pointer">
-            <ImportLeftArrowFolderIcon className="h-4 w-4" />
-            Import Folder
-          </button>
-          <button className="border-fm-icon-info/30 bg-fm-icon-info/15 text-fm-icon-info hover:bg-fm-icon-info/25 flex items-center gap-2 rounded-lg border px-4 py-2 transition hover:cursor-pointer">
-            <ImportLeftArrowFolderIcon className="h-4 w-4" />
-            Batch Import
-          </button>
-          <button className="border-fm-icon-warning/30 bg-fm-icon-warning/15 text-fm-icon-warning hover:bg-fm-icon-warning/25 flex items-center gap-2 rounded-lg border px-4 py-2 transition hover:cursor-pointer">
-            <ImportLeftArrowFolderIcon className="h-4 w-4" />
-            Browse Folders
-          </button>
-          <button className="border-fm-icon-negative/30 bg-fm-icon-negative/15 text-fm-icon-negative hover:bg-fm-icon-negative/25 flex items-center gap-2 rounded-lg border px-4 py-2 transition hover:cursor-pointer">
-            <ImportLeftArrowFolderIcon className="h-4 w-4" />
-            Clear All
-          </button>
-        </div>
-      </div>
-    </div>
-  ),
-}
-
-export const InteractiveStates: Story = {
-  parameters: {
-    ...storyParameters,
-    docs: {
-      description: {
-        story:
-          "Interactive states showing hover effects, animations, and different search states.",
-      },
-    },
-  },
-  render: () => (
-    <div className="from-fm-surface-primary to-fm-surface-secondary min-h-dvh space-y-8 rounded-lg bg-linear-to-br p-8">
-      <div className="space-y-4">
-        <h3 className="text-fm-secondary text-sm font-medium">
-          Interactive States & Motion
-        </h3>
-        <div className="flex gap-8">
-          {/* Hover color transition */}
-          <div className="flex flex-col items-center gap-2">
-            <ImportLeftArrowFolderIcon className="text-fm-tertiary hover:text-fm-icon-info h-8 w-8 transition-colors" />
-            <span className="text-fm-tertiary text-xs">Hover to Highlight</span>
-          </div>
-
-          {/* Hover scale up */}
-          <div className="flex flex-col items-center gap-2">
-            <ImportLeftArrowFolderIcon className="text-fm-icon-active h-8 w-8 transition-transform duration-200 hover:scale-110" />
-            <span className="text-fm-tertiary text-xs">Scale on Hover</span>
+      <IconUsageSection title="Empty State Import">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary flex w-full max-w-sm flex-col items-center rounded-xl border p-6 text-center">
+          <ImportLeftArrowFolderIcon className="text-fm-icon-inactive mb-3 h-8 w-8" />
+          <div className="text-fm-primary font-fm-text mb-1 text-sm font-medium">
+            No content yet
           </div>
-
-          {/* Pulse animation to show sync  */}
-          <div className="flex flex-col items-center gap-2">
-            <ImportLeftArrowFolderIcon className="text-fm-icon-positive h-8 w-8 animate-pulse" />
-            <span className="text-fm-tertiary text-xs">Sync Pulse</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <div
-              className="rounded p-1 focus:ring-2 focus:ring-green-500 focus:outline-none"
-              tabIndex={0}
-            >
-              <ImportLeftArrowFolderIcon className="text-fm-icon-active h-8 w-8" />
-            </div>
-            <span className="text-fm-tertiary text-xs">Focus Ring</span>
+          <div className="text-fm-secondary font-fm-text mb-3 text-xs">
+            Import your first episode to get started
           </div>
+          <button className="border-fm-divider-secondary flex items-center gap-2 rounded-lg border px-3 py-2">
+            <ImportLeftArrowFolderIcon className="text-fm-icon-active h-4 w-4" />
+            <span className="text-fm-primary font-fm-text text-sm">Import</span>
+          </button>
         </div>
-      </div>
-    </div>
+      </IconUsageSection>
+    </IconUsageCanvas>
   ),
 }
 
 export const Playground: Story = {
-  parameters: {
-    ...storyParameters,
-    docs: {
-      description: {
-        story:
-          "Interactive playground to experiment with different GitBranchIcon configurations.",
-      },
-    },
-  },
   args: {
-    width: 32,
-    height: 32,
-    className: "text-fm-icon-info ",
-    strokeLinecap: "square",
+    className: "h-8 w-8 text-fm-icon-active",
+    withAccessibility: true,
   },
   render: (args) => (
-    <div className="from-fm-surface-primary to-fm-surface-secondary flex h-64 min-h-dvh items-center justify-center rounded-lg bg-linear-to-br">
-      <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
-        <ImportLeftArrowFolderIcon {...args} />
-      </div>
-    </div>
+    <IconPlaygroundCanvas>
+      <ImportLeftArrowFolderIcon {...args} />
+    </IconPlaygroundCanvas>
   ),
 }