ai-design-system 0.1.47 → 0.1.49

package/components/ai-elements/code-block.tsx

@@ -3,7 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { Element } from "hast";
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import {
   type ComponentProps,
   createContext,
@@ -163,8 +163,6 @@ export const CodeBlockCopyButton = ({
     }
   };
 
-  const Icon = isCopied ? CheckIcon : CopyIcon;
-
   return (
     <Button
       className={cn("shrink-0", className)}
@@ -173,7 +171,7 @@ export const CodeBlockCopyButton = ({
       variant="ghost"
       {...props}
     >
-      {children ?? <Icon size={14} />}
+      {children ?? <CheckIcon size={14} />}
     </Button>
   );
 };

package/components/ai-elements/prompt-input.tsx

@@ -37,26 +37,21 @@ import {
 import { cn } from "@/lib/utils";
 import type { ChatStatus, FileUIPart } from "ai";
 import {
-  ImageIcon,
   Loader2Icon,
-  MicIcon,
-  PaperclipIcon,
-  PlusIcon,
   SendIcon,
   SquareIcon,
   XIcon,
 } from "lucide-react";
+import React from "react";
 import { nanoid } from "nanoid";
 import {
   type ChangeEvent,
   type ChangeEventHandler,
-  Children,
   type ClipboardEventHandler,
   type ComponentProps,
   createContext,
   type FormEvent,
   type FormEventHandler,
-  Fragment,
   type HTMLAttributes,
   type KeyboardEventHandler,
   type PropsWithChildren,
@@ -295,7 +290,7 @@ export function PromptInputAttachment({
                 />
               ) : (
                 <div className="flex size-5 items-center justify-center text-muted-foreground">
-                  <PaperclipIcon className="size-3" />
+                  <div className="size-3" />
                 </div>
               )}
             </div>
@@ -365,7 +360,7 @@ export function PromptInputAttachments({
   }
 
   return attachments.files.map((file) => (
-    <Fragment key={file.id}>{children(file)}</Fragment>
+    <React.Fragment key={file.id}>{children(file)}</React.Fragment>
   ));
 }
 
@@ -389,7 +384,7 @@ export const PromptInputActionAddAttachments = ({
         attachments.openFileDialog();
       }}
     >
-      <ImageIcon className="mr-2 size-4" /> {label}
+      {label}
     </DropdownMenuItem>
   );
 };
@@ -900,7 +895,7 @@ export const PromptInputButton = ({
   ...props
 }: PromptInputButtonProps) => {
   const newSize =
-    size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
+    size ?? (React.Children.count(props.children) > 1 ? "sm" : "icon-sm");
 
   return (
     <InputGroupButton
@@ -927,7 +922,7 @@ export const PromptInputActionMenuTrigger = ({
 }: PromptInputActionMenuTriggerProps) => (
   <DropdownMenuTrigger asChild>
     <PromptInputButton className={className} {...props}>
-      {children ?? <PlusIcon className="size-4" />}
+      {children}
     </PromptInputButton>
   </DropdownMenuTrigger>
 );
@@ -1150,7 +1145,7 @@ export const PromptInputSpeechButton = ({
       onClick={toggleListening}
       {...props}
     >
-      <MicIcon className="size-4" />
+      <div className="size-4" />
     </PromptInputButton>
   );
 };

package/components/ai-elements/queue.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/collapsible";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
-import { ChevronDownIcon, PaperclipIcon } from "lucide-react";
+import { ChevronDownIcon } from "lucide-react";
 import type { ComponentProps } from "react";
 
 export type QueueMessagePart = {
@@ -174,7 +174,7 @@ export const QueueItemFile = ({
     )}
     {...props}
   >
-    <PaperclipIcon size={12} />
+    <div className="size-3" />
     <span className="max-w-[100px] truncate">{children}</span>
   </span>
 );

package/components/blocks/DataTable/DataTable.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-import { Plus } from "lucide-react"
 
 import {
   EnhancedDataTable,
@@ -8,6 +7,7 @@ import {
 } from "@/components/composites/DataTable"
 import type { DynamicTableSchema } from "ui-schema-contracts"
 import { Button } from "@/components/primitives/Button"
+import { Icon } from "@/components/primitives/Icon"
 
 export interface DataTableProps {
   rows: DashboardRow[]
@@ -29,7 +29,7 @@ export const DataTable = React.memo<DataTableProps>(({ rows, tableSchema, handle
         rightActions={
           handlers?.onAddSection ? (
             <Button variant="outline" size="sm" className="h-8" onClick={handlers.onAddSection}>
-              <Plus className="size-4" />
+              <Icon name="plus" size="sm" />
               <span className="hidden lg:inline">Add Section</span>
             </Button>
           ) : null

package/components/blocks/index.ts

@@ -10,26 +10,15 @@ export type { DocumentEditorWithCommentsProps } from './DocumentEditorWithCommen
 export { FileChangeQueue } from './FileChangeQueue'
 export type { FileChangeQueueProps } from './FileChangeQueue'
 
-export { PromptInput } from './PromptInput'
-export type { PromptInputBlockProps } from './PromptInput'
-
 // Blocks
-export * from './LayoutProvider'
 export * from './SectionLayout'
-export type { LayoutProviderProps } from './LayoutProvider'
 
 export { WorkflowCanvas, getLayoutedElements } from './WorkflowCanvas'
 export type { WorkflowCanvasProps, WorkflowNode, WorkflowEdge, WorkflowNodeData } from './WorkflowCanvas'
 
-export { DashboardHeader } from './DashboardHeader'
-export type { DashboardHeaderProps } from './DashboardHeader'
-
 export { DashboardMetrics } from './DashboardMetrics'
 export type { DashboardMetricsProps } from './DashboardMetrics'
 
-export { DashboardChart } from './DashboardChart'
-export type { DashboardChartProps } from './DashboardChart'
-
 export { DataTable } from './DataTable'
 export type { DataTableProps } from './DataTable'
 

package/components/composites/AppHeader/AppHeader.tsx

@@ -22,7 +22,11 @@ export const AppHeader = React.memo<AppHeaderProps>(({
           {showSidebarToggle && showTitle && title && (
             <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
           )}
-          {showTitle && title && <h1 className="max-w-[28rem] truncate text-base font-medium">{title}</h1>}
+          {showTitle && title && (
+            typeof title === 'string' 
+              ? <h1 className="max-w-[28rem] truncate text-base font-medium">{title}</h1>
+              : title
+          )}
         </div>
 
         <div className="justify-self-center">

package/components/composites/AppHeader/interfaces.ts

@@ -6,7 +6,7 @@ export interface TabItem {
 }
 
 export interface AppHeaderProps {
-  title?: string;
+  title?: React.ReactNode;
   actions?: React.ReactNode;
   tabs?: TabItem[];
   defaultTab?: string;

package/components/composites/ApprovalCard/ApprovalCard.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { useState } from "react";
-import { Check, Pencil, X, ChevronLeft, ChevronRight } from "lucide-react";
+import { Icon } from "@/components/primitives/Icon";
 import { Input } from "@/components/primitives/Input";
 import { Textarea } from "@/components/primitives/Textarea";
 import { Label } from "@/components/primitives/Label";
@@ -222,7 +222,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     disabled={currentQuestionIndex === 0}
                     className="hover:text-foreground disabled:opacity-30 p-0.5 transition-colors"
                   >
-                    <ChevronLeft className="h-4 w-4" />
+                    <Icon name="chevron-left" size="sm" />
                   </button>
                   <span className="font-medium">{currentQuestionIndex + 1} of {questions.length}</span>
                   <button
@@ -233,7 +233,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     disabled={currentQuestionIndex === questions.length - 1}
                     className="hover:text-foreground disabled:opacity-30 p-0.5 transition-colors"
                   >
-                    <ChevronRight className="h-4 w-4" />
+                    <Icon name="chevron-right" size="sm" />
                   </button>
                 </div>
               )}
@@ -343,13 +343,13 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
             >
               {currentQuestionIndex === questions.length - 1 ? (
                 <>
-                  <Check className="h-4 w-4 mr-2" />
+                <Icon name="check" size="sm" className="mr-2" />
                   {submitButtonText}
                 </>
               ) : (
                 <>
                   Next
-                  <ChevronRight className="h-4 w-4 ml-2" />
+                  <Icon name="chevron-right" size="sm" className="ml-2" />
                 </>
               )}
             </ConfirmationAction>
@@ -370,7 +370,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
         {isEditing ? (
           <div className="space-y-4">
             <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-              <Pencil className="h-4 w-4" />
+              <Icon name="pencil" size="sm" />
               <span>
                 Edit —{" "}
                 <code className="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">
@@ -435,7 +435,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                 }}
                 disabled={isProcessing}
               >
-                <Check className="h-4 w-4 mr-2" />
+                    <Icon name="check" size="sm" className="mr-2" />
                 Save & Approve
               </ConfirmationAction>
             </ConfirmationActions>
@@ -511,7 +511,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     }}
                     disabled={isProcessing}
                   >
-                    <X className="h-4 w-4 mr-2" />
+                      <Icon name="x" size="sm" className="mr-2" />
                     Confirm Rejection
                   </ConfirmationAction>
                 </>
@@ -524,7 +524,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                       onClick={() => setShowRejectInput(true)}
                       disabled={isProcessing}
                     >
-                      <X className="h-4 w-4 mr-2" />
+                    <Icon name="x" size="sm" className="mr-2" />
                       {skipButtonText}
                     </ConfirmationAction>
                   )}
@@ -535,7 +535,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                       onClick={() => setIsEditing(true)}
                       disabled={isProcessing}
                     >
-                      <Pencil className="h-4 w-4 mr-2" />
+                      <Icon name="pencil" size="sm" className="mr-2" />
                       Edit
                     </ConfirmationAction>
                   )}
@@ -545,7 +545,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     onClick={onApprove}
                     disabled={isProcessing}
                   >
-                    <Check className="h-4 w-4 mr-2" />
+                  <Icon name="check" size="sm" className="mr-2" />
                     {submitButtonText}
                   </ConfirmationAction>
                 </>

package/components/composites/CommentBox/CommentBox.tsx

@@ -56,7 +56,7 @@ import {
   InputGroupTextarea,
   InputGroupButton,
 } from '@/components/primitives/InputGroup'
-import { Send } from 'lucide-react'
+import { Icon } from '@/components/primitives/Icon'
 import { formatCommentDate } from '@/utils/ai-editor'
 import type { CommentBoxProps, Comment } from '@/types/ai-editor'
 import { cn } from '@/lib/utils'
@@ -132,7 +132,7 @@ const CommentThreadDisplay = React.memo<{
               }
             }}
           >
-            <Send className="h-4 w-4" />
+            <Icon name="send" size="sm" />
           </InputGroupButton>
         </InputGroup>
       </ConversationContent>
@@ -208,7 +208,7 @@ export const CommentBox = React.memo<CommentBoxProps>(
                   }
                 }}
               >
-                <Send className="h-4 w-4" />
+                <Icon name="send" size="sm" />
               </InputGroupButton>
             </InputGroup>
           </div>

package/components/{blocks → composites}/DashboardHeader/DashboardHeader.tsx

@@ -18,3 +18,5 @@ export const DashboardHeader = React.memo<DashboardHeaderProps>(({ ctaLabel = "Q
 })
 
 DashboardHeader.displayName = "DashboardHeader"
+
+

package/components/composites/DataTable/DragHandleCell.tsx

@@ -1,7 +1,7 @@
 import { useSortable } from "@dnd-kit/sortable"
-import { GripVertical } from "lucide-react"
 
 import { Button } from "@/components/primitives/Button"
+import { Icon } from "@/components/primitives/Icon"
 
 export interface DragHandleCellProps {
   id: number | string
@@ -19,7 +19,7 @@ export function DragHandleCell({ id }: DragHandleCellProps) {
       className="size-7 text-muted-foreground hover:bg-transparent"
       aria-label="Drag to reorder"
     >
-      <GripVertical className="size-3" />
+      <Icon name="grip-vertical" size="xs" />
     </Button>
   )
 }

package/components/composites/DataTable/EnhancedDataTable.behaviors.stories.tsx

@@ -19,7 +19,7 @@ const tableSchema = dynamicTableSchema.parse({
   enablePagination: true,
   enableRowSelection: true,
   columns: [
-    { key: "header", label: "Header", sortable: true, hideable: false },
+    { key: "header", label: "Header", renderType: "link", sortable: true, hideable: false },
     { key: "type", label: "Type", sortable: true },
     { key: "status", label: "Status", renderType: "badge", sortable: true },
     { key: "target", label: "Target", align: "right", sortable: true },

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -11,7 +11,7 @@ import {
 } from "@dnd-kit/core"
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
-import { MoreVertical, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Columns3, Plus } from "lucide-react"
+import { Icon } from "@/components/primitives/Icon"
 import { flexRender, type ColumnDef } from "@tanstack/react-table"
 import type { DynamicTableSchema, TableColumn } from "ui-schema-contracts"
 
@@ -35,6 +35,7 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 
 import { DragHandleCell } from "./DragHandleCell"
 import { DraggableRow } from "./DraggableRow"
+import { RowDetailDrawer } from "./RowDetailDrawer"
 import { createTableSelectColumn } from "./TableSelectColumn"
 import type {
   DashboardPaginationState,
@@ -318,6 +319,16 @@ export function EnhancedDataTable({
           const rawValue = row.original[column.key]
           const rowId = String(toRowId(row.original, tableSchema))
           const isRowEditing = editingRowId === rowId
+          if (column.renderType === "link") {
+            return (
+              <div className={alignClass(column.align)}>
+                <RowDetailDrawer
+                  item={row.original}
+                  onChange={(rowId, key, value) => handleInlineSave(rowId, String(key), value)}
+                />
+              </div>
+            )
+          }
           if (isRowEditing && (column.editable ?? false) && (column.inputType ?? "none") !== "none") {
             return renderEditableCell(row.original, column, rawValue)
           }
@@ -336,7 +347,7 @@ export function EnhancedDataTable({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" className="flex size-8 text-muted-foreground data-[state=open]:bg-muted" size="icon">
-              <MoreVertical className="size-4" />
+              <Icon name="more-vertical" size="sm" />
               <span className="sr-only">Open menu</span>
             </Button>
           </DropdownMenuTrigger>
@@ -470,10 +481,10 @@ export function EnhancedDataTable({
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="outline" size="sm" className="h-8">
-                <Columns3 className="size-4" />
+                <Icon name="columns-3" size="sm" />
                 <span className="hidden lg:inline">Customize Columns</span>
                 <span className="lg:hidden">Columns</span>
-                <ChevronDown className="size-4" />
+                <Icon name="chevron-down" size="sm" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-56">
@@ -496,7 +507,7 @@ export function EnhancedDataTable({
             </DropdownMenuContent>
           </DropdownMenu>
           <Button variant="outline" size="sm" className="h-8" onClick={onCreateClick}>
-            <Plus className="size-4" />
+            <Icon name="plus" size="sm" />
             <span>{createButtonLabel}</span>
           </Button>
           {rightActions}
@@ -588,7 +599,7 @@ export function EnhancedDataTable({
                 disabled={!canPreviousPage}
               >
                 <span className="sr-only">Go to first page</span>
-                <ChevronsLeft className="size-4" />
+                <Icon name="chevrons-left" size="sm" />
               </Button>
               <Button
                 variant="outline"
@@ -602,7 +613,7 @@ export function EnhancedDataTable({
                 disabled={!canPreviousPage}
               >
                 <span className="sr-only">Go to previous page</span>
-                <ChevronLeft className="size-4" />
+                <Icon name="chevron-left" size="sm" />
               </Button>
               <Button
                 variant="outline"
@@ -616,7 +627,7 @@ export function EnhancedDataTable({
                 disabled={!canNextPage}
               >
                 <span className="sr-only">Go to next page</span>
-                <ChevronRight className="size-4" />
+                <Icon name="chevron-right" size="sm" />
               </Button>
               <Button
                 variant="outline"
@@ -630,7 +641,7 @@ export function EnhancedDataTable({
                 disabled={!canNextPage}
               >
                 <span className="sr-only">Go to last page</span>
-                <ChevronsRight className="size-4" />
+                <Icon name="chevrons-right" size="sm" />
               </Button>
             </div>
           </div>

package/components/composites/DataTable/InlineEditCell.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-import { toast } from "sonner"
 
 import { Input } from "@/components/primitives/Input"
 import { Label } from "@/components/primitives/Label"
@@ -23,7 +22,6 @@ export function InlineEditCell({ row, field, onSave }: InlineEditCellProps) {
       const formData = new FormData(event.currentTarget)
       const value = String(formData.get(field) ?? "").trim()
       onSave(rowId, field, value)
-      toast.success(`Saved ${field} for ${rowHeader}`)
     },
     [field, onSave, rowId, rowHeader]
   )

package/components/composites/DataTable/RowDetailDrawer.tsx

@@ -1,8 +1,7 @@
 import * as React from "react"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-import { TrendingUp } from "lucide-react"
-
 import { Button } from "@/components/primitives/Button"
+import { Icon } from "@/components/primitives/Icon"
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/primitives/Chart"
 import {
   Drawer,
@@ -90,7 +89,7 @@ export function RowDetailDrawer({ item, onChange }: RowDetailDrawerProps) {
               <Separator />
               <div className="grid gap-2">
                 <div className="flex gap-2 leading-none font-medium">
-                  Trending up by 5.2% this month <TrendingUp className="size-4" />
+                  Trending up by 5.2% this month <Icon name="trending-up" size="sm" />
                 </div>
                 <div className="text-muted-foreground">
                   Showing total visitors for the last 6 months. This section mirrors the v4 row detail panel.

package/components/composites/DataTable/StatusCell.tsx

@@ -1,5 +1,5 @@
 import { Badge } from "@/components/primitives/Badge"
-import { CheckCircle2, LoaderCircle, CircleSlash } from "lucide-react"
+import { Icon } from "@/components/primitives/Icon"
 
 import type { DashboardRow } from "./table-types"
 
@@ -10,9 +10,9 @@ export interface StatusCellProps {
 export function StatusCell({ status }: StatusCellProps) {
   return (
     <Badge variant="outline" className="gap-1 px-1.5 text-muted-foreground">
-      {status === "Done" ? <CheckCircle2 className="size-3 text-green-500" /> : null}
-      {status === "In Process" ? <LoaderCircle className="size-3 animate-spin" /> : null}
-      {status === "Not Started" ? <CircleSlash className="size-3" /> : null}
+      {status === "Done" ? <Icon name="circle-check" size="xs" className="text-green-500" /> : null}
+      {status === "In Process" ? <Icon name="loader-2" size="xs" className="animate-spin" /> : null}
+      {status === "Not Started" ? <Icon name="circle-slash" size="xs" /> : null}
       {status as React.ReactNode}
     </Badge>
   )

package/components/composites/DataTable/index.ts

@@ -10,8 +10,6 @@ export { InlineEditCell } from './InlineEditCell'
 export type { InlineEditCellProps } from './InlineEditCell'
 export { ReviewerCell } from './ReviewerCell'
 export type { ReviewerCellProps } from './ReviewerCell'
-export { StatusCell } from './StatusCell'
-export type { StatusCellProps } from './StatusCell'
 export { RowDetailDrawer } from './RowDetailDrawer'
 export type { RowDetailDrawerProps } from './RowDetailDrawer'
 export { createTableSelectColumn } from './TableSelectColumn'

package/components/composites/DocumentTabBar/DocumentTabBar.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react'
 import { Tabs, TabsList, TabsTrigger, Button, ScrollArea } from '@/components/primitives'
-import { X, Circle } from 'lucide-react'
+import { Icon } from '@/components/primitives/Icon'
 import { cn } from '@/lib/utils'
 export interface DocumentFile {
   id: string
@@ -102,8 +102,9 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
                     <div className="flex items-center gap-2">
                       {/* Dirty indicator */}
                       {tab.isDirty && (
-                        <Circle
-                          className="size-2 fill-primary text-primary flex-shrink-0"
+                        <Icon
+                          name="circle"
+                          className="size-2 fill-primary text-primary"
                           aria-label="unsaved changes"
                         />
                       )}
@@ -128,7 +129,7 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
                     )}
                     aria-label={`Close ${tab.name}`}
                   >
-                    <X className="size-3" />
+                    <Icon name="x" size="xs" />
                   </Button>
                 </div>
               ))}

package/components/composites/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+
+import { EmptyState } from "./EmptyState"
+
+const meta = {
+  title: "Composites/EmptyState",
+  component: EmptyState,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    onAction: fn(),
+  },
+} satisfies Meta<typeof EmptyState>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: "Distribute Track",
+    description: "Upload your first master to start reaching listeners on Spotify, Apple Music, and more.",
+    actionLabel: "Create Release",
+  },
+}

package/components/composites/EmptyState/EmptyState.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+
+import { Button } from "@/components/primitives/Button"
+import { Icon } from "@/components/primitives/Icon"
+
+export interface EmptyStateProps {
+  title: string
+  description: string
+  actionLabel: string
+  onAction?: () => void
+  className?: string
+}
+
+export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ title, description, actionLabel, onAction, className }, ref) => {
+    return (
+      <div 
+        ref={ref}
+        className={`flex flex-col items-center justify-center rounded-3xl border border-border bg-card p-10 text-center shadow-md max-w-[420px] w-full mx-auto ${className || ""}`}
+      >
+        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-muted/50 mb-6">
+          <Icon name="plus" size="lg" className="text-muted-foreground" />
+        </div>
+        <h3 className="mb-3 text-xl font-semibold tracking-tight text-card-foreground">
+          {title}
+        </h3>
+        <p className="mb-8 text-sm text-muted-foreground leading-relaxed">
+          {description}
+        </p>
+        <Button onClick={onAction} variant="secondary" className="rounded-full px-6 py-5 font-medium">
+          {actionLabel}
+        </Button>
+      </div>
+    )
+  }
+)
+
+EmptyState.displayName = "EmptyState"

package/components/composites/EmptyState/index.ts

@@ -0,0 +1 @@
+export * from "./EmptyState"