diff --git a/packages/demo/src/content/components/alert-dialog.mdx b/packages/demo/src/content/components/alert-dialog.mdx
index 5d0d2603..601e229a 100644
--- a/packages/demo/src/content/components/alert-dialog.mdx
+++ b/packages/demo/src/content/components/alert-dialog.mdx
@@ -1,11 +1,118 @@
 ---
 layout: "@demo/layouts/mdx-layout.astro"
 heading: "Alert Dialog"
-description: "Alert Dialog with sizes and variants"
+description: "A modal dialog for confirmations and destructive actions"
 ---
 
 import { AlertDialogDemo } from "@demo/components/demo/alert-dialog";
 
-## Default
+## Overview
+
+A confirmation dialog that blocks interaction until the user acknowledges it. Unlike [Dialog](dialog), clicking the background overlay won't dismiss it — the user must choose an action.
+
+## Usage
+
+Import the components:
+
+```ts
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@eqtylab/equality";
+```
+
+```jsx
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button>Delete Item</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone. This will permanently delete the item.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Delete</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
 
 <AlertDialogDemo client:only="react" />
+
+## Variants
+
+### Action Button Variants
+
+`AlertDialogAction` and `AlertDialogCancel` accept `variant` and `size` props from Button. Defaults are `primary` (action) and `tertiary` (cancel) at size `sm`.
+
+Use `danger` for destructive confirmations:
+
+```jsx
+<AlertDialogFooter>
+  <AlertDialogCancel>Cancel</AlertDialogCancel>
+  <AlertDialogAction variant="danger">Delete</AlertDialogAction>
+</AlertDialogFooter>
+```
+
+### Controlled State
+
+Control the open state with `open` and `onOpenChange`:
+
+```jsx
+const [open, setOpen] = useState(false);
+
+<AlertDialog open={open} onOpenChange={setOpen}>
+  <AlertDialogTrigger asChild>
+    <Button>Open</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>...</AlertDialogContent>
+</AlertDialog>;
+```
+
+## Slots
+
+| Name                     | Description                                |
+| ------------------------ | ------------------------------------------ |
+| `AlertDialog`            | Root component, manages open state         |
+| `AlertDialogTrigger`     | Opens the dialog on click                  |
+| `AlertDialogContent`     | Dialog panel with header, body, and footer |
+| `AlertDialogHeader`      | Contains the title and description         |
+| `AlertDialogTitle`       | Title text (required for accessibility)    |
+| `AlertDialogDescription` | Describes the action being confirmed       |
+| `AlertDialogFooter`      | Contains action and cancel buttons         |
+| `AlertDialogAction`      | Confirms and closes the dialog             |
+| `AlertDialogCancel`      | Dismisses without acting                   |
+
+## Props
+
+### AlertDialog
+
+| Name           | Description                    | Type                      | Default | Required |
+| -------------- | ------------------------------ | ------------------------- | ------- | -------- |
+| `open`         | Whether the dialog is open     | `boolean`                 | -       | ❌       |
+| `onOpenChange` | Called when open state changes | `(open: boolean) => void` | -       | ❌       |
+
+### AlertDialogAction
+
+| Name      | Description          | Type                                                               | Default   | Required |
+| --------- | -------------------- | ------------------------------------------------------------------ | --------- | -------- |
+| `variant` | Button style variant | `primary`, `danger`, `secondary`, `tertiary`, `link`, `navigation` | `primary` | ❌       |
+| `size`    | Button size          | `sm`, `md`, `lg`                                                   | `sm`      | ❌       |
+
+### AlertDialogCancel
+
+| Name      | Description          | Type                                                               | Default    | Required |
+| --------- | -------------------- | ------------------------------------------------------------------ | ---------- | -------- |
+| `variant` | Button style variant | `primary`, `danger`, `secondary`, `tertiary`, `link`, `navigation` | `tertiary` | ❌       |
+| `size`    | Button size          | `sm`, `md`, `lg`                                                   | `sm`       | ❌       |
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 761730f6..89204b88 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,7 +2,7 @@
   "name": "@eqtylab/equality",
   "description": "EQTYLab's component and token-based design system",
   "homepage": "https://equality.eqtylab.io/",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "license": "Apache-2.0",
   "keywords": [
     "component library",
diff --git a/packages/ui/src/components/alert-dialog/alert-dialog.tsx b/packages/ui/src/components/alert-dialog/alert-dialog.tsx
index 3435e910..4df1922e 100644
--- a/packages/ui/src/components/alert-dialog/alert-dialog.tsx
+++ b/packages/ui/src/components/alert-dialog/alert-dialog.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { type VariantProps } from 'class-variance-authority';
 
 import styles from '@/components/alert-dialog/alert-dialog.module.css';
 import { buttonVariants } from '@/components/button/button';
@@ -78,11 +79,12 @@ AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayNam
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &
+    VariantProps<typeof buttonVariants>
+>(({ className, variant = 'primary', size = 'sm', ...props }, ref) => (
   <AlertDialogPrimitive.Action
     ref={ref}
-    className={cn(buttonVariants({ variant: 'primary', size: 'sm' }), className)}
+    className={cn(buttonVariants({ variant, size }), className)}
     {...props}
   />
 ));
@@ -90,15 +92,12 @@ AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &
+    VariantProps<typeof buttonVariants>
+>(({ className, variant = 'tertiary', size = 'sm', ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(
-      buttonVariants({ variant: 'tertiary', size: 'sm' }),
-      styles['alert-dialog-cancel'],
-      className
-    )}
+    className={cn(buttonVariants({ variant, size }), styles['alert-dialog-cancel'], className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/components/checkbox/checkbox.tsx b/packages/ui/src/components/checkbox/checkbox.tsx
index 168630b7..ef18f7e7 100644
--- a/packages/ui/src/components/checkbox/checkbox.tsx
+++ b/packages/ui/src/components/checkbox/checkbox.tsx
@@ -20,7 +20,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
       {...props}
     >
       <CheckboxPrimitive.Indicator className={styles.indicator}>
-        <CheckIcon className={styles.check} />
+        {Icon ? <Icon className={styles.check} /> : <CheckIcon className={styles.check} />}{' '}
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )
diff --git a/packages/ui/src/components/control-status-badge/control-status-badge.tsx b/packages/ui/src/components/control-status-badge/control-status-badge.tsx
index 5257f03a..b683f44b 100644
--- a/packages/ui/src/components/control-status-badge/control-status-badge.tsx
+++ b/packages/ui/src/components/control-status-badge/control-status-badge.tsx
@@ -102,6 +102,7 @@ export { ControlStatusBadge };
 const MessageCircleCheckIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      className={className}
       xmlns="http://www.w3.org/2000/svg"
       width="12"
       height="12"
diff --git a/packages/ui/src/components/date-range-picker/date-range-picker.tsx b/packages/ui/src/components/date-range-picker/date-range-picker.tsx
index 4ef6d014..60a3e60b 100644
--- a/packages/ui/src/components/date-range-picker/date-range-picker.tsx
+++ b/packages/ui/src/components/date-range-picker/date-range-picker.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react';
 import * as React from 'react';
-import { CalendarDays, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { useState } from 'react';
+import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react';
 
 import { Button } from '@/components/button/button';
 import styles from '@/components/date-range-picker/date-range-picker.module.css';
@@ -9,7 +9,6 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/popover/po
 import { cn } from '@/lib/utils';
 
 const CalendarDaysIcon = CalendarDays as React.ComponentType<{ className?: string }>;
-const XIcon = X as React.ComponentType<{ className?: string }>;
 const ChevronLeftIcon = ChevronLeft as React.ComponentType<{ className?: string }>;
 const ChevronRightIcon = ChevronRight as React.ComponentType<{ className?: string }>;
 
diff --git a/packages/ui/src/components/display-field/display-field.tsx b/packages/ui/src/components/display-field/display-field.tsx
index 64b0b146..f5402d91 100644
--- a/packages/ui/src/components/display-field/display-field.tsx
+++ b/packages/ui/src/components/display-field/display-field.tsx
@@ -151,4 +151,4 @@ function DisplayField({
   );
 }
 
-export { DisplayField, displayFieldVariants };
+export { DisplayField };
diff --git a/packages/ui/src/components/drawer/drawer.tsx b/packages/ui/src/components/drawer/drawer.tsx
index daa3a3a6..5058096a 100644
--- a/packages/ui/src/components/drawer/drawer.tsx
+++ b/packages/ui/src/components/drawer/drawer.tsx
@@ -63,7 +63,7 @@ const DrawerHeaderActions = React.forwardRef<
     <div
       ref={ref}
       className={cn(styles['drawer-header-actions'], className)}
-      style={{ '--row-span': rowSpan } as React.CSSProperties}
+      style={{ ...style, '--row-span': rowSpan } as React.CSSProperties}
       {...props}
     />
   );
diff --git a/packages/ui/src/components/icon-button/icon-button.tsx b/packages/ui/src/components/icon-button/icon-button.tsx
index 3ddcaaee..78237b80 100644
--- a/packages/ui/src/components/icon-button/icon-button.tsx
+++ b/packages/ui/src/components/icon-button/icon-button.tsx
@@ -91,4 +91,4 @@ function IconButton({
   );
 }
 
-export { IconButton, iconButtonVariants };
+export { IconButton };
diff --git a/packages/ui/src/components/table/table-components.tsx b/packages/ui/src/components/table/table-components.tsx
index 93b483ff..def0c2cb 100644
--- a/packages/ui/src/components/table/table-components.tsx
+++ b/packages/ui/src/components/table/table-components.tsx
@@ -11,7 +11,7 @@ const TableContainer = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement> & VariantProps<typeof tableElevationVariants>
 >(({ className, elevation = ELEVATION.RAISED, ...props }, ref) => (
-  <div className={(styles['table'], tableElevationVariants({ elevation }))}>
+  <div className={cn(styles['table'], tableElevationVariants({ elevation }), className)}>
     <table ref={ref} className={styles['table-inner']} {...props} />
   </div>
 ));
@@ -59,22 +59,24 @@ TableHead.displayName = 'TableHead';
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
   React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => <td ref={ref} className={styles['table-cell']} {...props} />);
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn(styles['table-cell'], className)} {...props} />
+));
 TableCell.displayName = 'TableCell';
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={styles['table-caption']} {...props} />
+  <caption ref={ref} className={cn(styles['table-caption'], className)} {...props} />
 ));
 TableCaption.displayName = 'TableCaption';
 
 export {
-  TableContainer,
   TableBody,
   TableCaption,
   TableCell,
+  TableContainer,
   TableFooter,
   TableHead,
   TableHeader,
diff --git a/packages/ui/src/components/toast/toast.tsx b/packages/ui/src/components/toast/toast.tsx
index 5dfaf8c2..060922d1 100644
--- a/packages/ui/src/components/toast/toast.tsx
+++ b/packages/ui/src/components/toast/toast.tsx
@@ -15,7 +15,7 @@ interface ToastProps {
 }
 
 const Toast = ({ toast }: ToastProps) => {
-  const { id, title, description, action, icon, variant, ...props } = toast;
+  const { title, description, action, icon, variant, ...props } = toast;
 
   // Default icons based on variant
   const getDefaultIcon = () => {