@keboola/design 2.0.0 → 2.1.0

package/src/hooks/useElement.ts

@@ -1,16 +0,0 @@
-import { useCallback, useState } from 'react';
-
-// This hook is used to set an element reference and ensure that it only updates once, when element is first set.
-export const useElement = () => {
-  const [element, _setElement] = useState<HTMLElement | null>(null);
-
-  const setElement = useCallback((node: HTMLElement | null) => {
-    _setElement((prev) => {
-      // Only update if not already set
-      if (prev !== null) return prev;
-      return node;
-    });
-  }, []);
-
-  return [element, setElement] as const;
-};

package/src/hooks/useScrollbarPosition.ts

@@ -1,68 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { useElement } from './useElement';
-
-const calcPosition = ({
-  scrollHeight,
-  clientHeight,
-  scrollTop,
-}: {
-  scrollHeight: number;
-  clientHeight: number;
-  scrollTop: number;
-}) => {
-  // If content doesn't overflow, no scrollbar
-  if (scrollHeight <= clientHeight) return 'none';
-
-  if (scrollTop === 0) return 'top';
-
-  // At the bottom (with small tolerance for precision issues)
-  if (scrollTop + clientHeight >= scrollHeight - 1) return 'bottom';
-
-  return 'middle';
-};
-
-export const useScrollbarPosition = () => {
-  const [element, setElement] = useElement();
-  const [scrollbarPosition, setPosition] = useState<ReturnType<typeof calcPosition>>('none');
-
-  useEffect(() => {
-    if (element === null) return;
-
-    const updatePosition = () => {
-      if (element === null) return;
-
-      const position = calcPosition({
-        scrollHeight: element.scrollHeight,
-        clientHeight: element.clientHeight,
-        scrollTop: element.scrollTop,
-      });
-
-      setPosition(position);
-    };
-
-    // Initial check.
-    const rafId = requestAnimationFrame(updatePosition);
-
-    // Listening for scroll events.
-    element.addEventListener('scroll', updatePosition);
-
-    // Listen for the resize event that might affect scrollbar visibility.
-    const resizeObserver = new ResizeObserver(updatePosition);
-    resizeObserver.observe(element);
-
-    return () => {
-      cancelAnimationFrame(rafId);
-      element.removeEventListener('scroll', updatePosition);
-      resizeObserver.disconnect();
-    };
-  }, [element]);
-
-  return {
-    setElement,
-    isTop: scrollbarPosition === 'top',
-    isBottom: scrollbarPosition === 'bottom',
-    isMiddle: scrollbarPosition === 'middle',
-    isNone: scrollbarPosition === 'none',
-  };
-};

package/src/icon-names.ts

@@ -1,20 +0,0 @@
-import { fas } from '@awesome.me/kit-be8bcf7e5e/icons';
-
-/**
- * Reads available FontAwesome solid icon names from the FA kit.
- * Returns deduplicated, sorted kebab-case icon names (e.g. "chart-bar", "circle-check").
- */
-export const getAvailableIconNames = (): string[] => {
-  const names = new Set<string>();
-  for (const def of Object.values(fas)) {
-    if (
-      def !== null &&
-      typeof def === 'object' &&
-      'iconName' in def &&
-      typeof def.iconName === 'string'
-    ) {
-      names.add(def.iconName);
-    }
-  }
-  return [...names].sort();
-};

package/src/icons/Keboola.tsx

@@ -1,28 +0,0 @@
-import { forwardRef } from 'react';
-import type { LucideIcon, LucideProps } from 'lucide-react';
-
-// `forwardRef` here is required for type compatibility with `LucideIcon`
-// (a `ForwardRefExoticComponent` from lucide-react). React 19's ref-as-prop
-// pattern produces a plain function component which isn't structurally
-// assignable to `LucideIcon`, so consumers couldn't pass `Keboola`
-// interchangeably with imported Lucide icons (e.g. `<Button><Keboola className="tw-size-4" /></Button>`).
-// oxlint-disable-next-line react-x/no-forward-ref
-export const Keboola: LucideIcon = forwardRef<SVGSVGElement, LucideProps>(
-  ({ size = 24, color = 'currentColor', className, children, ...rest }, ref) => (
-    <svg
-      ref={ref}
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 300 512"
-      fill={color}
-      className={className}
-      {...rest}
-    >
-      <path d="M152 320C79.7 320 24.5 233.9 24.5 124.7C24.5 15.6 70.5 0 152 0s123.6 15.6 123.6 124.7C275.5 233.9 217.7 320 152 320zm-8.7-50.5c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm55.7 0c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm68.9 115.1c10.2 9.3 20.2 20.5 29 35c5.9 9.7 2.6 22.1-7.5 27.8c-3.4 1.9-7.1 2.8-10.7 2.8c-7.2 0-14.3-3.6-18.3-10c-6.8-11.1-13.8-18.9-21.7-26.1c-7.3-6.7-15.6-12.7-24.9-19.5c-.7-.5-1.4-1-2.1-1.5c-5-3.6-10-6.8-14.9-9.4c.6 1 1.2 2.1 1.8 3.2c14.4 26.4 29.2 63.1 29.2 104.9c0 11.2-9.5 20.3-21.2 20.3c-11.7 0-21.2-9.1-21.2-20.3c.1-31.8-11.6-62.3-23.8-84.9c-4-7.4-8-13.9-11.6-19.3c-3.4 5.2-7.2 11.3-11 18.3c-12.5 22.7-24.5 53.8-24.4 86c0 11.2-9.5 20.3-21.2 20.3s-21.2-9.1-21.2-20.3c.1-41.8 14.9-78.4 29.2-104.9c.6-1.1 1.2-2.1 1.8-3.2c-5 2.7-9.9 5.8-14.9 9.4c-.6 .5-1.3 .9-1.9 1.4c-9.5 6.9-17.8 12.9-25.1 19.7c-7.9 7.2-14.9 15.1-21.7 26.1c-5.9 9.7-18.9 12.9-29 7.2C.5 441.8-2.9 429.3 3.1 419.7c8.9-14.4 18.8-25.7 29-35c9.2-8.4 18.5-15.1 27.6-21.7c1-.7 2-1.4 3-2.2c4.7-3.5 9.6-6.7 14.6-9.6c-5-2.9-9.8-6.1-14.6-9.6C39.8 325 19.9 302.5 3.1 275.1c-5.9-9.7-2.6-22.1 7.5-27.8c10.1-5.7 23.1-2.5 29 7.2c14.6 23.7 31.1 42 48.7 54.9c18.9 13.7 37.4 20.5 56.5 21.5c1.7-.1 3.5-.1 5.2-.1c1.8 0 3.5 .1 5.2 .1c0 0 0 0 0 0c19.1-1.1 37.6-7.9 56.5-21.5c17.6-12.8 34.2-31.2 48.7-54.9c6-9.7 18.9-12.9 29-7.2c10.1 5.7 13.4 18.1 7.5 27.8c-16.8 27.4-36.7 49.9-59.6 66.6c-4.7 3.5-9.6 6.7-14.5 9.6c4.9 2.9 9.8 6.1 14.5 9.6c.9 .7 1.8 1.3 2.7 2c9.2 6.7 18.5 13.5 27.9 22z" />
-      {children}
-    </svg>
-  ),
-);
-
-Keboola.displayName = 'Keboola';

package/src/icons/icons.stories.tsx

@@ -1,174 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import type { LucideIcon } from 'lucide-react';
-
-import {
-  AlertCircle,
-  AlertTriangle,
-  ArrowLeft,
-  ArrowRight,
-  Bell,
-  BookOpen,
-  Bug,
-  Calendar,
-  Check,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-  Circle,
-  CircleCheck,
-  CircleHelp,
-  Clock,
-  CloudDownload,
-  Code,
-  Copy,
-  EllipsisVertical,
-  Expand,
-  Eye,
-  FolderOpen,
-  Gauge,
-  Info,
-  Keboola,
-  Layers,
-  Link,
-  List,
-  Loader2,
-  Minus,
-  PanelLeft,
-  Pencil,
-  Pipette,
-  Play,
-  Plus,
-  Rocket,
-  Search,
-  Send,
-  Settings,
-  SquareCode,
-  Star,
-  Table,
-  ThumbsDown,
-  ThumbsUp,
-  Trash2,
-  Unlink,
-  Upload,
-  Users,
-  Warehouse,
-  X,
-  XCircle,
-  Zap,
-} from './index';
-
-type IconEntry = {
-  Icon: LucideIcon;
-  name: string;
-  fa: string;
-};
-
-const entries: IconEntry[] = [
-  { Icon: AlertCircle, name: 'AlertCircle', fa: 'circle-exclamation' },
-  { Icon: AlertTriangle, name: 'AlertTriangle', fa: 'triangle-exclamation' },
-  { Icon: ArrowLeft, name: 'ArrowLeft', fa: 'arrow-left' },
-  { Icon: ArrowRight, name: 'ArrowRight', fa: 'arrow-right' },
-  { Icon: Bell, name: 'Bell', fa: 'bell' },
-  { Icon: BookOpen, name: 'BookOpen', fa: 'book-blank' },
-  { Icon: Bug, name: 'Bug', fa: 'bug' },
-  { Icon: Calendar, name: 'Calendar', fa: 'calendar' },
-  { Icon: Check, name: 'Check', fa: 'check' },
-  { Icon: ChevronDown, name: 'ChevronDown', fa: 'chevron-down / angle-down / caret-down' },
-  { Icon: ChevronLeft, name: 'ChevronLeft', fa: 'chevron-left / angle-left' },
-  { Icon: ChevronRight, name: 'ChevronRight', fa: 'chevron-right' },
-  { Icon: ChevronUp, name: 'ChevronUp', fa: 'chevron-up / angle-up' },
-  { Icon: Circle, name: 'Circle', fa: 'dot-circle' },
-  { Icon: CircleCheck, name: 'CircleCheck', fa: 'circle-check / check-circle' },
-  { Icon: CircleHelp, name: 'CircleHelp', fa: 'circle-question' },
-  { Icon: Clock, name: 'Clock', fa: 'clock' },
-  { Icon: CloudDownload, name: 'CloudDownload', fa: 'cloud-arrow-down' },
-  { Icon: Code, name: 'Code', fa: 'code' },
-  { Icon: Copy, name: 'Copy', fa: 'copy' },
-  { Icon: EllipsisVertical, name: 'EllipsisVertical', fa: 'ellipsis-vertical' },
-  { Icon: Expand, name: 'Expand', fa: 'expand-alt' },
-  { Icon: Eye, name: 'Eye', fa: 'eye' },
-  { Icon: FolderOpen, name: 'FolderOpen', fa: 'folder-open' },
-  { Icon: Gauge, name: 'Gauge', fa: 'gauge' },
-  { Icon: Info, name: 'Info', fa: 'circle-info / info-circle' },
-  { Icon: Keboola, name: 'Keboola', fa: "['fak', 'keboola']" },
-  { Icon: Layers, name: 'Layers', fa: 'layer-group' },
-  { Icon: Link, name: 'Link', fa: 'link' },
-  { Icon: List, name: 'List', fa: 'list-ul' },
-  { Icon: Minus, name: 'Minus', fa: 'minus' },
-  { Icon: PanelLeft, name: 'PanelLeft', fa: 'sidebar' },
-  { Icon: Pencil, name: 'Pencil', fa: 'pen' },
-  { Icon: Pipette, name: 'Pipette', fa: 'eye-dropper' },
-  { Icon: Play, name: 'Play', fa: 'play' },
-  { Icon: Plus, name: 'Plus', fa: 'plus' },
-  { Icon: Rocket, name: 'Rocket', fa: 'rocket' },
-  { Icon: Search, name: 'Search', fa: 'magnifying-glass / search' },
-  { Icon: Send, name: 'Send', fa: 'paper-plane-top' },
-  { Icon: Settings, name: 'Settings', fa: 'cog' },
-  { Icon: SquareCode, name: 'SquareCode', fa: 'square-code' },
-  { Icon: Star, name: 'Star', fa: 'star' },
-  { Icon: Table, name: 'Table', fa: 'table' },
-  { Icon: ThumbsDown, name: 'ThumbsDown', fa: 'thumbs-down' },
-  { Icon: ThumbsUp, name: 'ThumbsUp', fa: 'thumbs-up' },
-  { Icon: Trash2, name: 'Trash2', fa: 'trash' },
-  { Icon: Unlink, name: 'Unlink', fa: 'link-slash' },
-  { Icon: Upload, name: 'Upload', fa: 'upload / up-from-line' },
-  { Icon: Users, name: 'Users', fa: 'user-group' },
-  { Icon: Warehouse, name: 'Warehouse', fa: 'warehouse' },
-  { Icon: X, name: 'X', fa: 'xmark / times / close / cancel' },
-  { Icon: XCircle, name: 'XCircle', fa: 'circle-xmark' },
-  { Icon: Zap, name: 'Zap', fa: 'bolt' },
-];
-
-const Grid = () => (
-  <div className="tw-grid tw-grid-cols-2 tw-gap-4 md:tw-grid-cols-3 lg:tw-grid-cols-4">
-    {entries.map(({ Icon, name, fa }) => (
-      <div
-        key={name}
-        className="tw-flex tw-flex-col tw-items-start tw-gap-2 tw-rounded-md tw-border tw-border-border tw-p-4"
-      >
-        <Icon className="tw-size-6" />
-        <div className="tw-font-semibold">{name}</div>
-        <div className="tw-text-sm tw-text-muted-foreground">FA: {fa}</div>
-      </div>
-    ))}
-  </div>
-);
-
-const meta = {
-  title: 'Foundations/Icons (Lucide)',
-  component: Grid,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Canonical icon surface for `@keboola/design`. Import named icons directly from `@keboola/design/icons` — Lucide icons and Keboola-custom icons are interchangeable (both typed `LucideIcon`):\n\n```tsx\nimport { ChevronDown, Keboola, Loader2 } from \'@keboola/design/icons\';\n\n<ChevronDown className="tw-size-4" />\n<Loader2 className="tw-size-4 tw-animate-spin" />\n<Keboola className="tw-size-6" />\n```\n\nSizing uses the prefixed Tailwind `tw-size-*` utility (`tw-size-4` = 16px, `tw-size-5` = 20px). Spinner animation is explicit via `tw-animate-spin` (FA\'s `<Icon icon="spinner" />` had it built-in).',
-      },
-    },
-  },
-} satisfies Meta<typeof Grid>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Curated: Story = {};
-
-export const Spinner: Story = {
-  render: () => (
-    <div className="tw-flex tw-items-center tw-gap-4">
-      <Loader2 className="tw-size-4 tw-animate-spin" />
-      <Loader2 className="tw-size-6 tw-animate-spin" />
-      <Loader2 className="tw-size-10 tw-animate-spin" />
-    </div>
-  ),
-};
-
-export const BrandMark: Story = {
-  render: () => (
-    <div className="tw-flex tw-items-center tw-gap-4">
-      <Keboola className="tw-size-4" />
-      <Keboola className="tw-size-6" />
-      <Keboola className="tw-size-10" />
-    </div>
-  ),
-};

package/src/icons/index.ts

@@ -1,186 +0,0 @@
-export {
-  AlertCircle,
-  AlertTriangle,
-  AlignCenter,
-  AlignJustify,
-  AlignLeft,
-  AlignRight,
-  ArrowBigUpDash,
-  ArrowDown,
-  ArrowDownToLine,
-  ArrowLeft,
-  ArrowLeftRight,
-  ArrowLeftToLine,
-  ArrowRight,
-  ArrowRightLeft,
-  ArrowUp,
-  ArrowUpAZ,
-  ArrowUpRight,
-  Ban,
-  Bell,
-  BellRing,
-  Bold,
-  BookOpen,
-  Braces,
-  Bug,
-  Calendar,
-  Camera,
-  Check,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-  ChevronsLeft,
-  ChevronsRight,
-  ChevronsUpDown,
-  Circle,
-  CircleAlert,
-  CircleArrowDown,
-  CircleArrowRight,
-  CircleArrowUp,
-  CircleCheck,
-  CircleChevronDown,
-  CircleChevronUp,
-  CircleHelp,
-  CirclePause,
-  CirclePlay,
-  CirclePlus,
-  CircleUser,
-  CircleX,
-  Clock,
-  CloudDownload,
-  Code,
-  Cog,
-  Columns2,
-  Columns3,
-  Copy,
-  CreditCard,
-  Crosshair,
-  Database,
-  Diamond,
-  Download,
-  Ellipsis,
-  EllipsisVertical,
-  Expand,
-  ExternalLink,
-  Eye,
-  EyeOff,
-  File,
-  FileDown,
-  FileInput,
-  FileSpreadsheet,
-  FileText,
-  Flag,
-  Folder,
-  FolderOpen,
-  FolderTree,
-  FolderUp,
-  Gauge,
-  Gift,
-  GitBranch,
-  GitCompare,
-  GitMerge,
-  GitPullRequest,
-  Globe,
-  GripVertical,
-  Heading1,
-  Heading2,
-  Heading3,
-  History,
-  Hourglass,
-  Image,
-  Info,
-  Italic,
-  KanbanSquare,
-  Key,
-  Keyboard,
-  Layers,
-  LayoutGrid,
-  LineChart,
-  Link,
-  List,
-  ListChecks,
-  ListFilter,
-  ListOrdered,
-  Loader2,
-  Lock,
-  LogIn,
-  Mail,
-  Map,
-  Maximize,
-  Maximize2,
-  Menu,
-  MessageCircleQuestion,
-  Minimize,
-  Minimize2,
-  Minus,
-  Moon,
-  MoveHorizontal,
-  MoveVertical,
-  OctagonAlert,
-  PanelBottomClose,
-  PanelBottomOpen,
-  PanelLeft,
-  PanelLeftClose,
-  PanelLeftOpen,
-  PartyPopper,
-  Pause,
-  Pencil,
-  PencilLine,
-  Pipette,
-  Play,
-  Plus,
-  Quote,
-  RefreshCw,
-  Repeat,
-  Repeat2,
-  Reply,
-  Rocket,
-  RotateCcw,
-  RotateCw,
-  Rows3,
-  ScanLine,
-  Search,
-  Send,
-  Settings,
-  Share,
-  Share2,
-  Slash,
-  Sliders,
-  SlidersHorizontal,
-  Sparkle,
-  Sparkles,
-  Split,
-  Square,
-  SquareChevronRight,
-  SquareCode,
-  SquareKanban,
-  SquarePen,
-  SquareTerminal,
-  Star,
-  StickyNote,
-  Strikethrough,
-  Table,
-  ThumbsDown,
-  ThumbsUp,
-  ToggleRight,
-  Trash2,
-  TriangleAlert,
-  Type,
-  Underline,
-  Unlink,
-  Upload,
-  User,
-  Users,
-  Wand2,
-  Warehouse,
-  Webhook,
-  Workflow,
-  Wrench,
-  X,
-  XCircle,
-  Zap,
-} from 'lucide-react';
-
-export { Keboola } from './Keboola';
-export type { LucideIcon, LucideProps } from 'lucide-react';

package/src/index.ts

@@ -1,89 +0,0 @@
-export * from './components/Button';
-export * from './components/ButtonGroup';
-export * from './components/Calendar';
-export * from './components/DatePicker';
-export * from './components/TimePicker';
-export * from './components/Input';
-export * from './components/InputGroup';
-export * from './components/Label';
-export * from './components/Card';
-export * from './components/Clipboard';
-export * from './components/Switch';
-export * from './components/HelpBlock';
-export * from './components/HoverCard';
-export * from './components/Separator';
-export * from './components/RadioGroup';
-export * from './components/Slider';
-export * from './components/Search';
-export * from './components/Select';
-export * from './components/Checkbox';
-export * from './components/DropdownMenu';
-export * from './components/Popover';
-export * from './components/ScrollArea';
-export * from './components/Modal';
-export * from './components/FullScreenModal';
-export * from './components/Popconfirm';
-export * from './blocks/SplitButton';
-export * from './components/Sheet';
-export * from './components/Sidebar';
-export * from './components/Command';
-export * from './components/Combobox';
-export * from './components/Badge';
-export * from './components/Breadcrumb';
-export * from './components/Navbar';
-export * from './components/Pagination';
-export * from './components/Icon';
-export * from './components/ThemeProvider';
-export * from './components/Avatar';
-export * from './components/MarkedText';
-export * from './components/Toggle';
-export * from './components/ToggleGroup';
-export * from './components/Timeline';
-export * from './components/Kbd';
-export * from './components/Collapsible';
-export * from './components/Progress';
-export * from './components/DiffView';
-export * from './blocks/Textarea';
-export * from './blocks/MultiCombobox';
-export { FormGroup, type ValidityState } from './components/FormGroup';
-export { Link } from './components/Link';
-export { Tabs, TabsContent, type Trigger } from './components/Tabs';
-export { Alert } from './components/Alert';
-export { CodeEditor, SqlEditor, type SqlDialectName } from './components/CodeEditor';
-export * from './components/MergeEditor';
-export { Collapse } from './components/Collapse';
-export { CollapsiblePanel } from './components/CollapsiblePanel';
-export { Tooltip, TooltipProvider, type Props as TooltipProps } from './components/Tooltip';
-export { PanelWithDetails } from './components/PanelWithDetails';
-export { Skeleton } from './components/Skeleton/Skeleton';
-export { SkeletonList } from './components/Skeleton/SkeletonList';
-export { EmptySearchContent } from './components/EmptySearchContent';
-export { cn, copyToClipboard, isMac } from './utils';
-export { DotsLoader } from './components/DotsLoader';
-export { Slot } from '@radix-ui/react-slot';
-export { Table } from './components/Table';
-export { mergeRefs } from './utils/mergeRefs';
-export * from './components/Resizable';
-export * from './components/Toast';
-export * from './blocks/EmptyConfigurationActionCard';
-export * from './blocks/EmptyState';
-export * from './blocks/ErrorState';
-export * from './blocks/PageLayout';
-export * from './blocks/PageHeader';
-export * from './blocks/PageToolbar';
-export * from './blocks/SearchInput';
-export * from './blocks/SearchInputWithNavigation';
-export * from './blocks/Tagger';
-export * from './blocks/MultiActionButtonGroup';
-export * from './blocks/ClipboardButton';
-export * from './blocks/AIKit';
-export * from './blocks/AutoSaveTextarea';
-export * from './blocks/ColorInput';
-export * from './blocks/NumberInput';
-export * from './blocks/PasswordInput';
-export * from './blocks/Form';
-export { Truncated } from './components/Truncated';
-export * from './components/ZoomableSvg';
-
-export * from './hooks/useAutosizeInput';
-export * from './hooks/useScrollbarPosition';

package/src/patterns/AlertWithAction.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Alert, Button } from '@keboola/design';
-
-const TrialEndingAlert = ({ onExtend }: { onExtend: () => void }) => (
-  <Alert
-    variant="warning"
-    title="Trial ends in 3 days"
-    actions={
-      <Button size="small" variant="outline" onClick={onExtend}>
-        Extend
-      </Button>
-    }
-  >
-    Add a payment method to keep your project active after the trial expires.
-  </Alert>
-);
-
-const meta = {
-  title: 'Patterns/AlertWithAction',
-  component: TrialEndingAlert,
-} satisfies Meta<typeof TrialEndingAlert>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { onExtend: () => {} },
-};

package/src/patterns/CardWithEmptyState.stories.tsx

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button, Card, EmptyState, Table } from '@keboola/design';
-import { Plus } from '@keboola/design/icons';
-
-type Token = { id: string; name: string };
-
-const TokensCard = ({ tokens }: { tokens: Token[] }) => (
-  <Card bordered padding="none">
-    <Card.Header className="tw-flex tw-items-center tw-justify-between tw-p-4">
-      <Card.Title>Tokens</Card.Title>
-      <Button size="small">
-        <Plus className="tw-size-4" />
-        New token
-      </Button>
-    </Card.Header>
-    <Card.Content className="tw-p-0">
-      {tokens.length === 0 ? (
-        <EmptyState variant="compact">
-          <EmptyState.Title>No tokens yet</EmptyState.Title>
-          <EmptyState.Description>Create your first token to get started.</EmptyState.Description>
-          <EmptyState.Actions>
-            <Button size="small">Create token</Button>
-          </EmptyState.Actions>
-        </EmptyState>
-      ) : (
-        <Table>
-          <Table.Header>
-            <Table.Row>
-              <Table.Head>Name</Table.Head>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {tokens.map((token) => (
-              <Table.Row key={token.id}>
-                <Table.Cell>{token.name}</Table.Cell>
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      )}
-    </Card.Content>
-  </Card>
-);
-
-const meta = {
-  title: 'Patterns/CardWithEmptyState',
-  component: TokensCard,
-} satisfies Meta<typeof TokensCard>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Empty: Story = {
-  args: { tokens: [] },
-};
-
-export const Populated: Story = {
-  args: {
-    tokens: [
-      { id: '1', name: 'CI deploy token' },
-      { id: '2', name: 'Local dev token' },
-    ],
-  },
-};