@timmbr/ui 1.4.2 → 1.6.0

package/README.md

@@ -67,16 +67,18 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 | Category | Components | Description |
 | :--- | :--- | :--- |
-| **Actions** | `Button`, `LinkButton` | Accessible buttons and anchor links with `next/link` default SPA routing, adornment icons, loading spinners, and cross-zone delegation. |
-| **Typography** | `Text`, `Heading` | Typography primitives restricted to semantic elements (`<p>`, `<span>`, `<h1>`–`<h6>`) with design token scaling. |
-| **Surfaces** | `Card`, `Avatar`, `Badge`, `Chip`, `Divider` | Display primitives including user avatars, status pills, elevated cards, interactive chips, and separators. |
-| **Layout** | `Container`, `Stack`, `Inline`, `Grid`, `Center` | Responsive breakpoint containers, flex distribution, responsive CSS grid, and centered wrappers. |
-| **Form Controls** | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, `RangeSlider`, `FormField`, `Label` | Comprehensive form primitives with labels, helper text, validation error states, and dual-thumb sliders. |
-| **Navigation** | `Tabs`, `Pagination`, `SideBarNavigation` | Accessible tabs, multi-page pagination, and responsive collapsable sidebar navigation. |
-| **Feedback** | `Alert`, `Progress`, `Skeleton`, `Spinner`, `Toast` | Status banners, determinate/indeterminate progress, shimmer loaders, and card-deck multi-toasts with hover-spread. |
-| **Overlays** | `Dialog`, `Drawer`, `Dropdown`, `Popover`, `Tooltip` | Centered dialogs, off-canvas sliding drawers, contextual dropdowns, interactive popovers, and accessible tooltips. |
-| **Data Display** | `Table`, `DataList`, `Stat`, `EmptyState` | Structured data tables with pagination, key-value data lists, KPI metrics, and empty state placeholders. |
-| **Visual Media** | `Icon` | Unified icon wrapper supporting Lucide icons, external image URLs, raw SVGs, and clickable modes. |
+| **Layout** | `Container`, `Stack`, `Inline`, `Grid`, `GridItem`, `Center`, `Divider`, `PageHeader`, `VisuallyHidden` | Responsive containers, flex and grid layout, separators, and page titles with description, actions and a back link. |
+| **Typography** | `Heading`, `Text` | Typography primitives restricted to semantic elements (`<p>`, `<span>`, `<h1>`–`<h6>`) with design token scaling. |
+| **Actions** | `Button`, `LinkButton` | Accessible buttons and anchor links with `next/link` default SPA routing, adornment icons, loading spinners, cross-zone delegation, and destructive variants. |
+| **Forms** | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, `RangeSlider`, `OtpInput`, `ImageUpload`, `FormField`, `Label`, `Fieldset`, `FormActions` | Form primitives with labels, helper text, validation error states, one-time codes and uploads. |
+| **Data Display** | `Card`, `MediaCard`, `Badge`, `Chip`, `Avatar`, `IconTile`, `Price`, `Rating`, `DataList`, `List`, `Table`, `Stat`, `Accordion`, `Icon` | Surfaces and cards (`MediaCard` is the media + text template that feature cards build on), status pills, prices with discounts, read-only ratings, key-value lists, tables and KPIs. |
+| **Feedback** | `Alert`, `EmptyState`, `Progress`, `Skeleton`, `Spinner`, `Toast` | Status banners, empty states, progress, shimmer loaders and toasts. |
+| **Overlays** | `Dialog`, `AlertDialog`, `ConfirmDialog`, `Drawer`, `ResponsiveDialog`, `Dropdown`, `Popover`, `Tooltip`, `AuthModal` | Dialogs and confirmations, off-canvas drawers and bottom sheets (`ResponsiveDialog`: dialog on desktop, bottom sheet on phones), menus (with icons and destructive items), popovers, tooltips and the sign-in modal. |
+| **Navigation** | `NavHeader`, `NavFooter`, `SideBarNavigation`, `SubNav`, `Tabs`, `Pagination`, `Stepper` | Site header and footer, app sidebar, in-page section navigation (`SubNav`), tabs, pagination and step progress (`Stepper`). |
+
+Use theme tokens (`bg-card`, `border-border`, `text-muted-foreground`, …) and the DS primitives (`Text`, `Stack`, `Card` parts…) inside components rather than palette steps or raw typography, so a theme change lands in one place.
+
+Storybook uses the same groups (`Foundations` holds the design tokens).
 
 
 ## Component Usage

package/dist/components/Accordion/Accordion.js

@@ -25,7 +25,7 @@ const AccordionTrigger = React.forwardRef(({ className, children, ...props }, re
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-slate-500 transition-transform duration-200" })
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-grey-500 transition-transform duration-200" })
     ]
   }
 ) }));

package/dist/components/Accordion/Accordion.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,oFAAyD,CAAC;AAE5F,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAEpC,CAAC"}
+{"version":3,"file":"Accordion.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,oFAAuD,CAAC;AAE1F,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAEpC,CAAC"}

package/dist/components/Accordion/Accordion.styles.js

@@ -1,11 +1,11 @@
 import { cva } from 'class-variance-authority';
 
-const accordionItemVariants = cva("border-b border-slate-200 dark:border-slate-800");
+const accordionItemVariants = cva("border-b border-grey-100 dark:border-grey-800");
 const accordionTriggerVariants = cva(
-  "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 cursor-pointer"
+  "flex flex-1 items-center justify-between py-4 text-body-2 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 cursor-pointer"
 );
 const accordionContentVariants = cva(
-  "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  "overflow-hidden text-body-2 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
 );
 
 export { accordionContentVariants, accordionItemVariants, accordionTriggerVariants };

package/dist/components/Alert/Alert.js

@@ -61,7 +61,7 @@ const Alert = React.forwardRef(
               type: "button",
               onClick: handleDismiss,
               "aria-label": "Dismiss alert",
-              className: "shrink-0 p-1 -mr-1 -mt-1 text-muted-foreground hover:text-foreground rounded-sm transition-colors hover:bg-black/5 dark:hover:bg-white/5 cursor-pointer active:scale-95",
+              className: "shrink-0 p-1 -mr-1 -mt-1 text-muted-foreground hover:text-foreground rounded-sm transition-colors hover:bg-grey-1000/5 dark:hover:bg-grey-50/5 cursor-pointer active:scale-95",
               children: /* @__PURE__ */ jsx(X, { className: "size-4" })
             }
           )
@@ -89,7 +89,7 @@ const AlertDescription = React.forwardRef(
     {
       ref,
       "data-slot": "alert-description",
-      className: cn("text-xs text-muted-foreground leading-relaxed", className),
+      className: cn("text-body-3 text-muted-foreground leading-relaxed", className),
       ...props
     }
   )

package/dist/components/Alert/Alert.styles.d.ts

@@ -1,11 +1,11 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const alertVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const alertIconVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type AlertVariants = VariantProps<typeof alertVariants>;
 //# sourceMappingURL=Alert.styles.d.ts.map

package/dist/components/Alert/Alert.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const alertVariants = cva(
-  "relative flex w-full gap-3 p-4 rounded-lg border text-sm font-sans transition-all duration-200",
+  "relative flex w-full gap-3 p-4 rounded-lg border text-body-2 transition-all duration-200",
   {
     variants: {
       variant: {
@@ -12,9 +12,9 @@ const alertVariants = cva(
         destructive: "border-destructive/30 bg-destructive/10 text-foreground dark:border-destructive/40 dark:bg-destructive/15"
       },
       size: {
-        sm: "p-3 text-xs gap-2.5",
-        default: "p-4 text-sm gap-3",
-        lg: "p-5 text-base gap-3.5"
+        sm: "p-3 text-body-3 gap-2.5",
+        default: "p-4 text-body-2 gap-3",
+        lg: "p-5 text-body-1 gap-3.5"
       }
     },
     defaultVariants: {

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import type { AlertDialogProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps } from './AlertDialog.types';
+import type { AlertDialogProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogActionProps, AlertDialogCancelProps, AlertDialogMediaProps } from './AlertDialog.types';
 export declare const AlertDialog: React.FC<AlertDialogProps>;
 export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
 export declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
 export declare const AlertDialogHeader: React.FC<AlertDialogHeaderProps>;
+/** Icon circle above the title, e.g. a warning for a destructive confirmation. */
+export declare const AlertDialogMedia: React.FC<AlertDialogMediaProps>;
 export declare const AlertDialogBody: React.FC<AlertDialogBodyProps>;
 export declare const AlertDialogFooter: React.FC<AlertDialogFooterProps>;
 export declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=AlertDialog.d.ts.map

package/dist/components/AlertDialog/AlertDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAarE,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,sBAAsB,EACtB,oBAAoB,EACpB,sBAAsB,EAGvB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAA6B,CAAC;AACjF,eAAO,MAAM,kBAAkB,wHAA+B,CAAC;AAC/D,eAAO,MAAM,iBAAiB,uDAA8B,CAAC;AAE7D,eAAO,MAAM,kBAAkB,wKAU7B,CAAC;AAGH,eAAO,MAAM,kBAAkB,gGA4B7B,CAAC;AAGH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAE9D,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAE1D,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAE9D,CAAC;AAGF,eAAO,MAAM,gBAAgB,8KAU3B,CAAC;AAGH,eAAO,MAAM,sBAAsB,wLAUjC,CAAC;AAGH,eAAO,MAAM,iBAAiB,6KAU5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6KAU5B,CAAC"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAerE,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,sBAAsB,EACtB,oBAAoB,EACpB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAA6B,CAAC;AACjF,eAAO,MAAM,kBAAkB,wHAA+B,CAAC;AAC/D,eAAO,MAAM,iBAAiB,uDAA8B,CAAC;AAE7D,eAAO,MAAM,kBAAkB,wKAU7B,CAAC;AAGH,eAAO,MAAM,kBAAkB,gGA4B7B,CAAC;AAGH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAE9D,CAAC;AAGF,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAO5D,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAE1D,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAE9D,CAAC;AAGF,eAAO,MAAM,gBAAgB,8KAU3B,CAAC;AAGH,eAAO,MAAM,sBAAsB,wLAUjC,CAAC;AAGH,eAAO,MAAM,iBAAiB,kGAW5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,kGAW5B,CAAC"}

package/dist/components/AlertDialog/AlertDialog.js

@@ -4,7 +4,8 @@ import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cn } from '@timmbr/utils';
 import { resolveMotion } from '../../types/motion.js';
-import { alertDialogBodyVariants, alertDialogContentVariants, alertDialogDescriptionVariants, alertDialogFooterVariants, alertDialogHeaderVariants, alertDialogOverlayVariants, alertDialogTitleVariants } from './AlertDialog.styles.js';
+import { alertDialogBodyVariants, alertDialogContentVariants, alertDialogDescriptionVariants, alertDialogFooterVariants, alertDialogHeaderVariants, alertDialogMediaVariants, alertDialogOverlayVariants, alertDialogTitleVariants } from './AlertDialog.styles.js';
+import { buttonVariants } from '../Button/Button.styles.js';
 import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
 
 const AlertDialog = AlertDialogPrimitive.Root;
@@ -20,7 +21,7 @@ const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-const AlertDialogContent = React.forwardRef(({ className, children, motion, ...props }, ref) => {
+const AlertDialogContent = React.forwardRef(({ className, children, motion, size, ...props }, ref) => {
   const globalMotion = useGlobalAnimation();
   const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
   return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
@@ -32,7 +33,7 @@ const AlertDialogContent = React.forwardRef(({ className, children, motion, ...p
         "data-slot": "alert-dialog-content",
         role: "alertdialog",
         className: cn(
-          alertDialogContentVariants(),
+          alertDialogContentVariants({ size }),
           !shouldAnimate && "transition-none animate-none",
           motionClass,
           className
@@ -46,6 +47,16 @@ const AlertDialogContent = React.forwardRef(({ className, children, motion, ...p
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "alert-dialog-header", className: cn(alertDialogHeaderVariants(), className), ...props });
 AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogMedia = ({ className, tone, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "alert-dialog-media",
+    "aria-hidden": "true",
+    className: cn(alertDialogMediaVariants({ tone }), className),
+    ...props
+  }
+);
+AlertDialogMedia.displayName = "AlertDialogMedia";
 const AlertDialogBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "alert-dialog-body", className: cn(alertDialogBodyVariants(), className), ...props });
 AlertDialogBody.displayName = "AlertDialogBody";
 const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "alert-dialog-footer", className: cn(alertDialogFooterVariants(), className), ...props });
@@ -70,25 +81,27 @@ const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const AlertDialogAction = React.forwardRef(({ className, variant = "primary", size, asChild, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Action,
   {
     ref,
+    asChild,
     "data-slot": "alert-dialog-action",
-    className: cn(className),
+    className: cn(!asChild && buttonVariants({ variant, size }), className),
     ...props
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const AlertDialogCancel = React.forwardRef(({ className, variant = "outline", size, asChild, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
+    asChild,
     "data-slot": "alert-dialog-cancel",
-    className: cn(className),
+    className: cn(!asChild && buttonVariants({ variant, size }), className),
     ...props
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
-export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
+export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/AlertDialog/AlertDialog.styles.d.ts

@@ -1,8 +1,14 @@
 export declare const alertDialogOverlayVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const alertDialogContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const alertDialogContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Title and description; a leading AlertDialogMedia gets more room. */
 export declare const alertDialogHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const alertDialogBodyVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const alertDialogFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const alertDialogTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const alertDialogDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const alertDialogMediaVariants: (props?: ({
+    tone?: "default" | "destructive" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=AlertDialog.styles.d.ts.map

package/dist/components/AlertDialog/AlertDialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,oFAEtC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oFAEtC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,eAAO,MAAM,8BAA8B,oFAE1C,CAAC"}
+{"version":3,"file":"AlertDialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,oFAEtC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;8EAYtC,CAAC;AAEF,wEAAwE;AACxE,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,eAAO,MAAM,8BAA8B,oFAE1C,CAAC;AAGF,eAAO,MAAM,wBAAwB;;8EAYpC,CAAC"}

package/dist/components/AlertDialog/AlertDialog.styles.js

@@ -1,13 +1,23 @@
 import { cva } from 'class-variance-authority';
 
 const alertDialogOverlayVariants = cva(
-  "fixed inset-0 z-50 bg-black/60 backdrop-blur-xs transition-opacity duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
+  "fixed inset-0 z-50 bg-grey-1000/60 backdrop-blur-xs transition-opacity duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
 );
 const alertDialogContentVariants = cva(
-  "relative pointer-events-auto flex flex-col w-full max-w-lg rounded-xl border border-grey-200 dark:border-grey-800 bg-white dark:bg-grey-900 shadow-xl font-sans text-foreground overflow-hidden p-6 gap-4 data-[state=open]:animate-dialog-scale-in data-[state=closed]:animate-dialog-scale-out"
+  "relative pointer-events-auto flex flex-col w-full rounded-xl border border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900 shadow-xl font-sans text-foreground overflow-hidden p-6 gap-4 data-[state=open]:animate-dialog-scale-in data-[state=closed]:animate-dialog-scale-out",
+  {
+    variants: {
+      size: {
+        sm: "max-w-md",
+        md: "max-w-lg",
+        lg: "max-w-2xl"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
 );
 const alertDialogHeaderVariants = cva(
-  "flex flex-col space-y-1.5 text-left"
+  "flex flex-col gap-1.5 text-left has-[>[data-slot=alert-dialog-media]]:gap-3"
 );
 const alertDialogBodyVariants = cva(
   "flex flex-col space-y-3 min-h-0"
@@ -16,10 +26,23 @@ const alertDialogFooterVariants = cva(
   "flex flex-col-reverse sm:flex-row sm:justify-end gap-2.5 pt-2"
 );
 const alertDialogTitleVariants = cva(
-  "text-lg font-display font-semibold leading-none tracking-tight text-foreground"
+  "text-h6 font-semibold leading-none tracking-tight text-foreground"
 );
 const alertDialogDescriptionVariants = cva(
-  "text-sm text-muted-foreground font-sans leading-relaxed"
+  "text-body-2 text-muted-foreground leading-relaxed"
+);
+const alertDialogMediaVariants = cva(
+  "flex size-12 shrink-0 items-center justify-center rounded-full [&_svg]:size-6",
+  {
+    variants: {
+      tone: {
+        default: "bg-primary/10 text-primary",
+        destructive: "bg-destructive/10 text-destructive",
+        warning: "bg-warning/15 text-warning-foreground"
+      }
+    },
+    defaultVariants: { tone: "default" }
+  }
 );
 
-export { alertDialogBodyVariants, alertDialogContentVariants, alertDialogDescriptionVariants, alertDialogFooterVariants, alertDialogHeaderVariants, alertDialogOverlayVariants, alertDialogTitleVariants };
+export { alertDialogBodyVariants, alertDialogContentVariants, alertDialogDescriptionVariants, alertDialogFooterVariants, alertDialogHeaderVariants, alertDialogMediaVariants, alertDialogOverlayVariants, alertDialogTitleVariants };

package/dist/components/AlertDialog/AlertDialog.types.d.ts

@@ -1,8 +1,11 @@
 import type * as React from 'react';
 import type * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import type { MotionProp } from '../../types/motion';
+import type { ButtonVariants } from '../Button/Button.styles';
 export type AlertDialogProps = AlertDialogPrimitive.AlertDialogProps;
 export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
+    /** Width: sm (28rem), md (32rem, default), lg (42rem). */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * Motion transition control.
      */
@@ -11,6 +14,20 @@ export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<
 export type AlertDialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 export type AlertDialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
 export type AlertDialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
-export type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>;
-export type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;
+/**
+ * Button look of the footer actions. Ignored with `asChild` (the child, e.g.
+ * a `Button`, brings its own styles).
+ */
+export interface AlertDialogButtonStyleProps {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+}
+export interface AlertDialogActionProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>, AlertDialogButtonStyleProps {
+}
+export interface AlertDialogCancelProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>, AlertDialogButtonStyleProps {
+}
+export interface AlertDialogMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Tint of the icon circle. */
+    tone?: 'default' | 'destructive' | 'warning';
+}
 //# sourceMappingURL=AlertDialog.types.d.ts.map

package/dist/components/AlertDialog/AlertDialog.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,gBAAgB,CAAC;AAErE,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC;IAC3E;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAC1E,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACxE,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAE1E,MAAM,MAAM,sBAAsB,GAChC,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,CAAC;AAErE,MAAM,MAAM,sBAAsB,GAChC,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"AlertDialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,gBAAgB,CAAC;AAErE,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC;IAC3E,0DAA0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAC1E,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACxE,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAE1E;;;GAGG;AACH,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,EACxE,2BAA2B;CAAG;AAElC,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,EACxE,2BAA2B;CAAG;AAElC,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,+BAA+B;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC;CAC9C"}

package/dist/components/AuthModal/AuthModal.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { AuthModalProps } from './AuthModal.types';
+export declare const AuthModal: React.ForwardRefExoticComponent<AuthModalProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=AuthModal.d.ts.map

package/dist/components/AuthModal/AuthModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModal.d.ts","sourceRoot":"","sources":["../../../src/components/AuthModal/AuthModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAWxD,eAAO,MAAM,SAAS,uFA6ErB,CAAC"}

package/dist/components/AuthModal/AuthModal.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { DEFAULT_AUTH_MODAL_LABELS, AuthModalLabelsContext } from './AuthModal.labels.js';
+import { authModalCardVariants, authModalContainerVariants } from './AuthModal.styles.js';
+import { AuthModalBanner } from './subcomponents/AuthModalBanner.js';
+import { AuthModalIdentifierForm } from './subcomponents/AuthModalIdentifierForm.js';
+import { AuthModalOAuth } from './subcomponents/AuthModalOAuth.js';
+import { AuthModalSuccess } from './subcomponents/AuthModalSuccess.js';
+import { AuthModalSetPasswordForm } from './subcomponents/AuthModalSetPasswordForm.js';
+import { AuthModalPasswordForm } from './subcomponents/AuthModalPasswordForm.js';
+import { AuthModalOtpForm } from './subcomponents/AuthModalOtpForm.js';
+
+const AuthModal = React.forwardRef(
+  ({ isOpen, onClose, banner, form, oauth, legal, labels: labelOverrides, className }, ref) => {
+    const step = form.step ?? "IDENTIFIER";
+    const labels = React.useMemo(
+      () => ({ ...DEFAULT_AUTH_MODAL_LABELS, ...labelOverrides }),
+      [labelOverrides]
+    );
+    const renderStep = () => {
+      switch (step) {
+        case "OTP":
+          return /* @__PURE__ */ jsx(AuthModalOtpForm, { form });
+        case "PASSWORD":
+          return /* @__PURE__ */ jsx(AuthModalPasswordForm, { form });
+        case "SET_PASSWORD":
+          return /* @__PURE__ */ jsx(AuthModalSetPasswordForm, { form });
+        case "SUCCESS":
+          return /* @__PURE__ */ jsx(AuthModalSuccess, { form });
+        case "IDENTIFIER":
+        default:
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(AuthModalIdentifierForm, { form, legal }),
+            /* @__PURE__ */ jsx(AuthModalOAuth, { providers: oauth?.providers, disabled: form.isLoading })
+          ] });
+      }
+    };
+    return /* @__PURE__ */ jsx(AuthModalLabelsContext.Provider, { value: labels, children: /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx(
+        DialogPrimitive.Overlay,
+        {
+          "data-slot": "auth-modal-overlay",
+          className: "fixed inset-0 z-50 bg-grey-1000/50 backdrop-blur-[2px] transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 pointer-events-none", children: /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          ref,
+          "data-slot": "auth-modal-content",
+          className: cn(
+            authModalContainerVariants(),
+            "pointer-events-auto transition-all data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: labels.dialogTitle }),
+            /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: "sr-only", children: labels.dialogDescription }),
+            /* @__PURE__ */ jsx(
+              DialogPrimitive.Close,
+              {
+                "data-slot": "auth-modal-close",
+                "aria-label": labels.close,
+                className: "absolute right-3 top-3 z-30 rounded-sm p-1.5 text-grey-700 hover:text-grey-950 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AuthModalBanner,
+              {
+                data: banner?.data,
+                promoTermsUrl: banner?.promoTermsUrl,
+                className: banner?.className
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { "data-slot": "auth-modal-card", className: authModalCardVariants(), children: /* @__PURE__ */ jsx("div", { children: renderStep() }) })
+          ]
+        }
+      ) })
+    ] }) }) });
+  }
+);
+AuthModal.displayName = "AuthModal";
+
+export { AuthModal };

package/dist/components/AuthModal/AuthModal.labels.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { AuthModalLabels } from './AuthModal.types';
+export declare const DEFAULT_AUTH_MODAL_LABELS: AuthModalLabels;
+export declare const AuthModalLabelsContext: React.Context<AuthModalLabels>;
+export declare function useAuthModalLabels(): AuthModalLabels;
+//# sourceMappingURL=AuthModal.labels.d.ts.map

package/dist/components/AuthModal/AuthModal.labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModal.labels.d.ts","sourceRoot":"","sources":["../../../src/components/AuthModal/AuthModal.labels.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,eAAO,MAAM,yBAAyB,EAAE,eA6CvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,gCAElC,CAAC;AAEF,wBAAgB,kBAAkB,oBAEjC"}

package/dist/components/AuthModal/AuthModal.labels.js

@@ -0,0 +1,52 @@
+"use client";
+import * as React from 'react';
+
+const DEFAULT_AUTH_MODAL_LABELS = {
+  dialogTitle: "Sign in",
+  dialogDescription: "Sign in or create an account with your email or mobile number.",
+  close: "Close",
+  identifierTitle: "Log in or Sign up",
+  identifierSubtitle: "Enter your email or mobile number to continue",
+  identifierLabel: "Email or mobile number",
+  identifierPlaceholder: "Email or Mobile number",
+  continue: "Continue",
+  usePassword: "Use password instead",
+  legalPrefix: "By continuing, you agree to our",
+  termsOfUse: "Terms of Use",
+  privacyPolicy: "Privacy Policy",
+  oauthDivider: "or",
+  oauthContinueWith: (name) => `Continue with ${name}`,
+  otpTitle: "Verify with OTP",
+  otpSentTo: "Sent to",
+  otpLabel: "Verification code",
+  otpSubmit: "Verify & Proceed",
+  otpResend: "Resend OTP",
+  otpResendIn: (s) => `Resend OTP in ${s}s`,
+  edit: "Edit",
+  passwordTitle: "Enter your password",
+  passwordLabel: "Password",
+  passwordPlaceholder: "Password",
+  passwordSubmit: "Log in",
+  forgotPassword: "Forgot password? Log in with OTP",
+  showPassword: "Show password",
+  hidePassword: "Hide password",
+  setPasswordCreateTitle: "Create a password",
+  setPasswordCreateSubtitle: "Sign in faster next time with your password.",
+  setPasswordResetTitle: "Set a new password",
+  setPasswordResetSubtitle: "You're verified. Choose a new password for your account.",
+  newPasswordLabel: "New password",
+  confirmPasswordLabel: "Confirm password",
+  passwordHint: "At least 8 characters, with an uppercase letter, a number and a symbol.",
+  passwordMismatch: "Passwords don't match.",
+  setPasswordSubmit: "Save password",
+  skipForNow: "Skip for now",
+  successTitle: "You're signed in"
+};
+const AuthModalLabelsContext = React.createContext(
+  DEFAULT_AUTH_MODAL_LABELS
+);
+function useAuthModalLabels() {
+  return React.useContext(AuthModalLabelsContext);
+}
+
+export { AuthModalLabelsContext, DEFAULT_AUTH_MODAL_LABELS, useAuthModalLabels };

package/dist/components/AuthModal/AuthModal.styles.d.ts

@@ -0,0 +1,12 @@
+export declare const authModalContainerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const authModalBannerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const authModalCardVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const authModalHeadingVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const authModalSubtitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const authModalInputVariants: (props?: ({
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const authModalSubmitButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const authModalSecondaryButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const authModalLinkVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//# sourceMappingURL=AuthModal.styles.d.ts.map

package/dist/components/AuthModal/AuthModal.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AuthModal/AuthModal.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,0BAA0B,oFAEtC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAA0C,CAAC;AAEjF,eAAO,MAAM,sBAAsB;;8EAWlC,CAAC;AAEF,eAAO,MAAM,6BAA6B,oFAEzC,CAAC;AAEF,eAAO,MAAM,gCAAgC,oFAE5C,CAAC;AAEF,eAAO,MAAM,qBAAqB,oFAEjC,CAAC"}

package/dist/components/AuthModal/AuthModal.styles.js

@@ -0,0 +1,38 @@
+import { cva } from 'class-variance-authority';
+
+const authModalContainerVariants = cva(
+  "relative flex w-full max-w-[675px] bg-grey-50 overflow-hidden rounded-sm shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.15)] flex-col sm:flex-row sm:min-h-[454px] max-h-[calc(100dvh-24px)] sm:max-h-[calc(100dvh-32px)]"
+);
+const authModalBannerVariants = cva(
+  "relative hidden sm:flex shrink-0 w-[320px] flex-col justify-between p-8 overflow-hidden select-none"
+);
+const authModalCardVariants = cva(
+  "flex-1 min-w-0 min-h-0 p-6 sm:p-8 flex flex-col justify-between overflow-y-auto"
+);
+const authModalHeadingVariants = cva(
+  "text-h4 text-grey-950 tracking-tight outline-none"
+);
+const authModalSubtitleVariants = cva("text-body-2 text-grey-600 mt-1.5");
+const authModalInputVariants = cva(
+  "w-full px-4 py-3 rounded-lg border bg-grey-50 text-body-1 text-grey-950 placeholder:text-sand-muted focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all disabled:opacity-50",
+  {
+    variants: {
+      invalid: {
+        true: "border-destructive",
+        false: "border-border-warm"
+      }
+    },
+    defaultVariants: { invalid: false }
+  }
+);
+const authModalSubmitButtonVariants = cva(
+  "w-full py-3 px-4 rounded-lg bg-primary text-grey-50 font-medium text-body-1 hover:bg-primary-600 active:bg-primary-700 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 cursor-pointer shadow-sm"
+);
+const authModalSecondaryButtonVariants = cva(
+  "w-full py-3 px-4 rounded-lg border border-border-warm bg-grey-50 text-grey-950 font-medium text-body-2 hover:bg-bg-2 active:bg-bg-1 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3 cursor-pointer"
+);
+const authModalLinkVariants = cva(
+  "font-sans font-medium text-primary hover:underline cursor-pointer disabled:opacity-50 disabled:no-underline disabled:cursor-not-allowed focus:outline-none focus-visible:underline"
+);
+
+export { authModalBannerVariants, authModalCardVariants, authModalContainerVariants, authModalHeadingVariants, authModalInputVariants, authModalLinkVariants, authModalSecondaryButtonVariants, authModalSubmitButtonVariants, authModalSubtitleVariants };