@frontlit/page-builder 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/{chunk-RBJBODQP.js → chunk-SGNRWWG3.js}

@@ -1,77 +1,331 @@
 "use client";
+import { getMediaUrl } from './chunk-XU7ALPGQ.js';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { X, Check, Circle, ChevronRight, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React7 from 'react';
+import React7__default, { useRef, useState, useLayoutEffect } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React10 from 'react';
-import React10__default, { useRef, useState, useLayoutEffect } from 'react';
-import { Slot } from '@radix-ui/react-slot';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { cva } from 'class-variance-authority';
+import { Slot } from '@radix-ui/react-slot';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-// src/primitives/lib/utils.ts
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var Preheader = ({
-  children,
-  className = "",
-  theme,
+var AlertDialogThemeContext = React7.createContext(void 0);
+function useAlertDialogTheme(providedTheme) {
+  const contextTheme = React7.useContext(AlertDialogThemeContext);
+  return providedTheme ?? contextTheme;
+}
+function AlertDialog({ theme, children, ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialogThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { ...props, children }) });
+}
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogCancel = AlertDialogPrimitive.Cancel;
+var AlertDialogAction = AlertDialogPrimitive.Action;
+var AlertDialogPortal = AlertDialogPrimitive.Portal;
+var AlertDialogOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/60 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+var AlertDialogContent = React7.forwardRef(
+  ({
+    children,
+    className,
+    closeClassName,
+    overlayClassName,
+    showCloseButton = false,
+    theme: providedTheme,
+    ...props
+  }, ref) => {
+    const theme = useAlertDialogTheme(providedTheme);
+    const styles = theme?.interactives?.dialog;
+    return /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx(AlertDialogOverlay, { className: overlayClassName }),
+      /* @__PURE__ */ jsxs(
+        AlertDialogPrimitive.Content,
+        {
+          ref,
+          className: cn(
+            "fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-lg border bg-popover p-6 text-popover-foreground shadow-lg outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+            styles?.padding?.x,
+            styles?.padding?.y,
+            styles?.border?.width,
+            styles?.border?.radius,
+            styles?.border?.style,
+            styles?.shadow,
+            styles?.custom,
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            showCloseButton ? /* @__PURE__ */ jsxs(
+              AlertDialogPrimitive.Cancel,
+              {
+                className: cn(
+                  "absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+                  closeClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(X, { className: "size-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
+);
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+function AlertDialogHeader({
+  className,
   ...props
-}) => {
-  const typographyStyles = theme?.typography?.preheader;
-  const classes = cn(
-    // Base styles
-    "text-sm font-medium uppercase tracking-wide",
-    // Theme typography
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2 text-left", className), ...props });
+}
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
   );
-  return /* @__PURE__ */ jsx("p", { className: classes, ...props, children });
-};
-var Header1 = ({
+}
+var AlertDialogTitle = React7.forwardRef(({ className, theme: providedTheme, ...props }, ref) => {
+  const theme = useAlertDialogTheme(providedTheme);
+  const typography = theme?.typography?.header4;
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Title,
+    {
+      ref,
+      className: cn(
+        "text-lg leading-none font-semibold",
+        typography?.fontFamily,
+        typography?.fontSize,
+        typography?.fontWeight,
+        typography?.lineHeight,
+        typography?.letterSpacing,
+        typography?.textTransform,
+        typography?.textDecoration,
+        typography?.textOverflow,
+        className
+      ),
+      ...props
+    }
+  );
+});
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+var AlertDialogDescription = React7.forwardRef(({ className, theme: providedTheme, ...props }, ref) => {
+  const theme = useAlertDialogTheme(providedTheme);
+  const typography = theme?.typography?.text2;
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Description,
+    {
+      ref,
+      className: cn(
+        "text-sm text-muted-foreground",
+        typography?.fontFamily,
+        typography?.fontSize,
+        typography?.fontWeight,
+        typography?.lineHeight,
+        typography?.letterSpacing,
+        typography?.textTransform,
+        typography?.textDecoration,
+        typography?.textOverflow,
+        className
+      ),
+      ...props
+    }
+  );
+});
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+var AvatarThemeContext = React7.createContext(void 0);
+function Avatar({ className, theme, ...props }) {
+  return /* @__PURE__ */ jsx(AvatarThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(
+    AvatarPrimitive.Root,
+    {
+      className: cn(
+        "relative flex size-10 shrink-0 overflow-hidden rounded-full bg-muted",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square size-full object-cover", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React7.forwardRef(({ className, ...props }, ref) => {
+  const theme = React7.useContext(AvatarThemeContext);
+  const typography = theme?.typography?.text2;
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Fallback,
+    {
+      ref,
+      className: cn(
+        "flex size-full items-center justify-center bg-muted text-muted-foreground",
+        typography?.fontFamily,
+        typography?.fontSize,
+        typography?.fontWeight,
+        typography?.lineHeight,
+        typography?.letterSpacing,
+        className
+      ),
+      ...props
+    }
+  );
+});
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+var Badge2 = ({
+  variant = "default",
   children,
   className = "",
+  style = {},
   theme,
   ...props
 }) => {
-  const typographyStyles = theme?.typography?.header1;
+  const typographyStyles = theme?.typography?.caption;
+  const buttonStyles = theme?.interactives?.button;
   const classes = cn(
     // Base styles
-    "scroll-m-20 text-4xl font-bold tracking-tight",
-    // Theme overrides
+    // "bg-secondary",
+    // Theme typography from caption
     typographyStyles?.fontFamily,
     typographyStyles?.fontSize,
     typographyStyles?.fontWeight,
     typographyStyles?.lineHeight,
     typographyStyles?.letterSpacing,
     typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
+    buttonStyles?.border?.width,
+    buttonStyles?.border?.radius,
+    buttonStyles?.border?.style,
     className
   );
-  return /* @__PURE__ */ jsx("h1", { className: classes, ...props, children });
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant,
+      className: classes,
+      style: {
+        ...style,
+        backgroundColor: style.backgroundColor,
+        color: style.color
+      },
+      ...props,
+      children
+    }
+  );
 };
-var Header2 = ({
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React7.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Button2 = ({
+  variant = "default",
+  size = "default",
+  disabled = false,
   children,
   className = "",
   theme,
   ...props
 }) => {
-  const typographyStyles = theme?.typography?.header2;
+  const buttonStyles = theme?.interactives?.button;
+  const typographyStyles = theme?.typography?.button;
+  const isIcon = size === "icon";
   const classes = cn(
     // Base styles
-    "scroll-m-20 text-3xl font-bold tracking-tight",
-    // Theme overrides
+    "",
+    // Theme typography
     typographyStyles?.fontFamily,
     typographyStyles?.fontSize,
     typographyStyles?.fontWeight,
@@ -80,20 +334,47 @@ var Header2 = ({
     typographyStyles?.textTransform,
     typographyStyles?.textDecoration,
     typographyStyles?.textOverflow,
+    // Theme interactivity. Icon buttons stay square — CTA padding
+    // would stretch them off the size="icon" box.
+    !isIcon && buttonStyles?.padding?.x,
+    !isIcon && buttonStyles?.padding?.y,
+    buttonStyles?.border?.width,
+    buttonStyles?.border?.radius,
+    buttonStyles?.border?.style,
+    // buttonStyles?.border?.color,
+    buttonStyles?.shadow,
+    // Theme disabled states
+    disabled && buttonStyles?.disabled?.opacity,
+    disabled && buttonStyles?.disabled?.cursor,
+    disabled && buttonStyles?.disabled?.color,
+    disabled && buttonStyles?.disabled?.background,
+    disabled && buttonStyles?.disabled?.border,
+    // User overrides
+    buttonStyles?.custom,
     className
   );
-  return /* @__PURE__ */ jsx("h2", { className: classes, ...props, children });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant,
+      size,
+      disabled,
+      className: classes,
+      ...props,
+      children
+    }
+  );
 };
-var Header3 = ({
+var Caption = ({
   children,
   className = "",
   theme,
   ...props
 }) => {
-  const typographyStyles = theme?.typography?.header3;
+  const typographyStyles = theme?.typography?.caption;
   const classes = cn(
     // Base styles
-    "scroll-m-20 text-2xl font-semibold tracking-normal",
+    "text-xs leading-7 text-muted-foreground",
     // Theme overrides
     typographyStyles?.fontFamily,
     typographyStyles?.fontSize,
@@ -105,7 +386,7 @@ var Header3 = ({
     typographyStyles?.textOverflow,
     className
   );
-  return /* @__PURE__ */ jsx("h3", { className: classes, ...props, children });
+  return /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
 };
 var Header4 = ({
   children,
@@ -130,64 +411,576 @@ var Header4 = ({
   );
   return /* @__PURE__ */ jsx("h4", { className: classes, ...props, children });
 };
-var Subheader1 = ({ children, className = "", theme, component = "h5", ...props }) => {
-  const typographyStyles = theme?.typography?.subheader1;
-  const classes = cn(
-    typographyStyles?.fontFamily || "font-sans",
-    typographyStyles?.fontSize || "text-lg",
-    typographyStyles?.fontWeight || "font-medium",
-    typographyStyles?.lineHeight || "leading-relaxed",
-    typographyStyles?.letterSpacing || "tracking-normal",
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  );
-  return component === "h5" ? /* @__PURE__ */ jsx("h5", { className: classes, ...props, children }) : /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
-};
-var Subheader2 = ({
+var PageCard = ({
+  isLink,
   children,
   className = "",
   theme,
   ...props
 }) => {
-  const typographyStyles = theme?.typography?.subheader2;
-  const classes = [
-    typographyStyles?.fontFamily || "font-sans",
-    typographyStyles?.fontSize || "text-base",
-    typographyStyles?.fontWeight || "font-medium",
-    typographyStyles?.lineHeight || "leading-relaxed",
-    typographyStyles?.letterSpacing || "tracking-normal",
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("h6", { className: classes, ...props, children });
+  const cardStyles = theme?.interactives?.card;
+  const classes = cn(
+    // Base styles
+    "bg-card text-card-foreground",
+    // Theme interactivity
+    cardStyles?.border?.width,
+    cardStyles?.border?.radius,
+    cardStyles?.border?.style,
+    cardStyles?.shadow,
+    isLink ? "cursor-pointer" : "",
+    // User overrides
+    cardStyles?.custom,
+    className
+  );
+  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
 };
-var Text1 = ({ children, className = "", theme, component = "p", ...props }) => {
-  const typographyStyles = theme?.typography?.text1;
+var PageCardImage = ({
+  src,
+  alt,
+  className = "",
+  theme,
+  ...props
+}) => {
   const classes = cn(
     // Base styles
-    "text-base",
-    // Theme overrides
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
+    "w-full",
     className
   );
-  return component === "p" ? /* @__PURE__ */ jsx("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
+  return /* @__PURE__ */ jsx("img", { src, alt, className: classes, ...props });
 };
-var Text2 = ({ children, className = "", theme, component = "p", ...props }) => {
-  const typographyStyles = theme?.typography?.text2;
+var PageCardContent = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const cardStyles = theme?.interactives?.card;
+  const classes = cn(
+    // Base styles
+    "p-4",
+    // Theme interactivity
+    cardStyles?.padding?.x,
+    cardStyles?.padding?.y,
+    className
+  );
+  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
+};
+var PageCardHeader = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const classes = cn(
+    // Base styles
+    "pb-4",
+    className
+  );
+  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children: /* @__PURE__ */ jsx(Header4, { theme, children }) });
+};
+var Checkbox = React7.forwardRef(({ className, theme, ...props }, ref) => {
+  const inputStyles = theme?.interactives?.input;
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "peer size-4 shrink-0 rounded-sm border border-primary shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        inputStyles?.border?.width,
+        inputStyles?.border?.radius,
+        inputStyles?.border?.style,
+        inputStyles?.shadow,
+        inputStyles?.custom,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) })
+    }
+  );
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+var DialogThemeContext = React7.createContext(void 0);
+function useDialogTheme(providedTheme) {
+  const contextTheme = React7.useContext(DialogThemeContext);
+  return providedTheme ?? contextTheme;
+}
+function Dialog({ theme, children, ...props }) {
+  return /* @__PURE__ */ jsx(DialogThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props, children }) });
+}
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogClose = DialogPrimitive.Close;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/60 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React7.forwardRef(
+  ({
+    children,
+    className,
+    closeClassName,
+    overlayClassName,
+    showCloseButton = true,
+    theme: providedTheme,
+    ...props
+  }, ref) => {
+    const theme = useDialogTheme(providedTheme);
+    const styles = theme?.interactives?.dialog;
+    return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
+      /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          ref,
+          className: cn(
+            "fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-lg border bg-popover p-6 text-popover-foreground shadow-lg outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+            styles?.padding?.x,
+            styles?.padding?.y,
+            styles?.border?.width,
+            styles?.border?.radius,
+            styles?.border?.style,
+            styles?.shadow,
+            styles?.custom,
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            showCloseButton ? /* @__PURE__ */ jsxs(
+              DialogPrimitive.Close,
+              {
+                className: cn(
+                  "absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none",
+                  closeClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(X, { className: "size-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2 text-left", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var DialogTitle = React7.forwardRef(({ className, theme: providedTheme, ...props }, ref) => {
+  const theme = useDialogTheme(providedTheme);
+  const typography = theme?.typography?.header4;
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      ref,
+      className: cn(
+        "text-lg leading-none font-semibold",
+        typography?.fontFamily,
+        typography?.fontSize,
+        typography?.fontWeight,
+        typography?.lineHeight,
+        typography?.letterSpacing,
+        typography?.textTransform,
+        typography?.textDecoration,
+        typography?.textOverflow,
+        className
+      ),
+      ...props
+    }
+  );
+});
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React7.forwardRef(({ className, theme: providedTheme, ...props }, ref) => {
+  const theme = useDialogTheme(providedTheme);
+  const typography = theme?.typography?.text2;
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      ref,
+      className: cn(
+        "text-sm text-muted-foreground",
+        typography?.fontFamily,
+        typography?.fontSize,
+        typography?.fontWeight,
+        typography?.lineHeight,
+        typography?.letterSpacing,
+        typography?.textTransform,
+        typography?.textDecoration,
+        typography?.textOverflow,
+        className
+      ),
+      ...props
+    }
+  );
+});
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+var Sheet = DialogPrimitive.Root;
+var SheetTrigger = DialogPrimitive.Trigger;
+var SheetPortal = DialogPrimitive.Portal;
+var SheetOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 text-foreground shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = React7.forwardRef(({ side = "right", className, children, container, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { container: container ?? void 0, children: [
+  /* @__PURE__ */ jsx(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(sheetVariants({ side }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+var SheetTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+var SheetDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
+function Drawer({
+  trigger,
+  children,
+  side = "left",
+  open,
+  setOpen,
+  style,
+  className = "",
+  theme: _theme
+}) {
+  const triggerWrapRef = useRef(null);
+  const [container, setContainer] = useState(null);
+  useLayoutEffect(() => {
+    const root = triggerWrapRef.current?.closest("[data-pb-theme], .pb-theme");
+    setContainer(root instanceof HTMLElement ? root : null);
+  }, []);
+  return /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { ref: triggerWrapRef, children: trigger }) }),
+    /* @__PURE__ */ jsx(
+      SheetContent,
+      {
+        side,
+        style,
+        container,
+        className: cn(
+          "bg-background text-foreground",
+          !container && "pb-theme",
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+var DropdownMenuThemeContext = React7.createContext(void 0);
+function useDropdownMenuTheme(providedTheme) {
+  const contextTheme = React7.useContext(DropdownMenuThemeContext);
+  return providedTheme ?? contextTheme;
+}
+function DropdownMenu({ theme, children, ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenuThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { ...props, children }) });
+}
+var DropdownMenuTrigger = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ref, className, ...props }));
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuContent = React7.forwardRef(({ className, sideOffset = 4, theme: providedTheme, ...props }, ref) => {
+  const theme = useDropdownMenuTheme(providedTheme);
+  const menuStyles = theme?.interactives?.menu;
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        menuStyles?.padding?.x,
+        menuStyles?.padding?.y,
+        menuStyles?.border?.width,
+        menuStyles?.border?.radius,
+        menuStyles?.border?.style,
+        menuStyles?.shadow,
+        menuStyles?.custom,
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React7.forwardRef(({ className, inset, theme: providedTheme, ...props }, ref) => {
+  const theme = useDropdownMenuTheme(providedTheme);
+  const menuItemStyles = theme?.interactives?.menu?.item;
+  const typographyStyles = theme?.typography?.button;
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        inset && "pl-8",
+        typographyStyles?.fontFamily,
+        typographyStyles?.fontSize,
+        typographyStyles?.fontWeight,
+        typographyStyles?.lineHeight,
+        typographyStyles?.letterSpacing,
+        typographyStyles?.textTransform,
+        typographyStyles?.textDecoration,
+        typographyStyles?.textOverflow,
+        menuItemStyles?.padding?.x,
+        menuItemStyles?.padding?.y,
+        menuItemStyles?.border?.width,
+        menuItemStyles?.border?.radius,
+        menuItemStyles?.border?.style,
+        menuItemStyles?.custom,
+        className
+      ),
+      ...props
+    }
+  );
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React7.forwardRef(({ className, children, checked, theme: providedTheme, ...props }, ref) => {
+  const theme = useDropdownMenuTheme(providedTheme);
+  const menuItemStyles = theme?.interactives?.menu?.item;
+  const typographyStyles = theme?.typography?.button;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      ref,
+      checked,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        typographyStyles?.fontFamily,
+        typographyStyles?.fontSize,
+        typographyStyles?.fontWeight,
+        typographyStyles?.lineHeight,
+        typographyStyles?.letterSpacing,
+        menuItemStyles?.padding?.x,
+        menuItemStyles?.padding?.y,
+        menuItemStyles?.border?.width,
+        menuItemStyles?.border?.radius,
+        menuItemStyles?.border?.style,
+        menuItemStyles?.custom,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+});
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React7.forwardRef(({ className, children, theme: providedTheme, ...props }, ref) => {
+  const theme = useDropdownMenuTheme(providedTheme);
+  const menuItemStyles = theme?.interactives?.menu?.item;
+  const typographyStyles = theme?.typography?.button;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        typographyStyles?.fontFamily,
+        typographyStyles?.fontSize,
+        typographyStyles?.fontWeight,
+        typographyStyles?.lineHeight,
+        typographyStyles?.letterSpacing,
+        menuItemStyles?.padding?.x,
+        menuItemStyles?.padding?.y,
+        menuItemStyles?.border?.width,
+        menuItemStyles?.border?.radius,
+        menuItemStyles?.border?.style,
+        menuItemStyles?.custom,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+});
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React7.forwardRef(({ className, inset, theme: providedTheme, ...props }, ref) => {
+  const theme = useDropdownMenuTheme(providedTheme);
+  const typographyStyles = theme?.typography?.caption ?? theme?.typography?.button;
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      ref,
+      className: cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        inset && "pl-8",
+        typographyStyles?.fontFamily,
+        typographyStyles?.fontSize,
+        typographyStyles?.fontWeight,
+        typographyStyles?.lineHeight,
+        typographyStyles?.letterSpacing,
+        typographyStyles?.textTransform,
+        className
+      ),
+      ...props
+    }
+  );
+});
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+    ...props
+  }
+);
+var DropdownMenuSubTrigger = React7.forwardRef(({ className, inset, children, theme: providedTheme, ...props }, ref) => {
+  const theme = useDropdownMenuTheme(providedTheme);
+  const menuItemStyles = theme?.interactives?.menu?.item;
+  const typographyStyles = theme?.typography?.button;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      ref,
+      className: cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent",
+        inset && "pl-8",
+        typographyStyles?.fontFamily,
+        typographyStyles?.fontSize,
+        typographyStyles?.fontWeight,
+        typographyStyles?.lineHeight,
+        typographyStyles?.letterSpacing,
+        menuItemStyles?.padding?.x,
+        menuItemStyles?.padding?.y,
+        menuItemStyles?.border?.radius,
+        menuItemStyles?.custom,
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+});
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React7.forwardRef(({ className, theme: providedTheme, ...props }, ref) => {
+  const theme = useDropdownMenuTheme(providedTheme);
+  const menuStyles = theme?.interactives?.menu;
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      ref,
+      className: cn(
+        "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
+        menuStyles?.padding?.x,
+        menuStyles?.padding?.y,
+        menuStyles?.border?.width,
+        menuStyles?.border?.radius,
+        menuStyles?.border?.style,
+        menuStyles?.shadow,
+        menuStyles?.custom,
+        className
+      ),
+      ...props
+    }
+  );
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuArrow = DropdownMenuPrimitive.Arrow;
+var Header1 = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.header1;
   const classes = cn(
     // Base styles
-    "text-sm",
+    "scroll-m-20 text-4xl font-bold tracking-tight",
     // Theme overrides
     typographyStyles?.fontFamily,
     typographyStyles?.fontSize,
@@ -199,22 +992,19 @@ var Text2 = ({ children, className = "", theme, component = "p", ...props }) =>
     typographyStyles?.textOverflow,
     className
   );
-  return component === "p" ? /* @__PURE__ */ jsx("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
+  return /* @__PURE__ */ jsx("h1", { className: classes, ...props, children });
 };
-var Link = ({
+var Header2 = ({
   children,
   className = "",
   theme,
-  disabled = false,
-  style,
   ...props
 }) => {
-  const typographyStyles = theme?.typography?.link;
-  const linkStyles = theme?.interactives?.link;
+  const typographyStyles = theme?.typography?.header2;
   const classes = cn(
     // Base styles
-    "font-medium cursor-pointer",
-    // Theme typography
+    "scroll-m-20 text-3xl font-bold tracking-tight",
+    // Theme overrides
     typographyStyles?.fontFamily,
     typographyStyles?.fontSize,
     typographyStyles?.fontWeight,
@@ -223,90 +1013,21 @@ var Link = ({
     typographyStyles?.textTransform,
     typographyStyles?.textDecoration,
     typographyStyles?.textOverflow,
-    // Theme interactivity
-    linkStyles?.padding?.x,
-    linkStyles?.padding?.y,
-    linkStyles?.border?.width,
-    linkStyles?.border?.radius,
-    linkStyles?.border?.style,
-    // Theme disabled states
-    disabled && linkStyles?.disabled?.color,
-    disabled && linkStyles?.disabled?.background,
-    disabled && linkStyles?.disabled?.border,
-    disabled && linkStyles?.disabled?.opacity,
-    disabled && linkStyles?.disabled?.cursor,
-    // User overrides
-    linkStyles?.custom,
     className
   );
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: classes,
-      style: {
-        ...style,
-        textShadow: linkStyles?.textShadow || void 0
-      },
-      ...props,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("h2", { className: classes, ...props, children });
 };
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React10.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var Button2 = ({
-  variant = "default",
-  size = "default",
-  disabled = false,
+var Header3 = ({
   children,
   className = "",
   theme,
   ...props
 }) => {
-  const buttonStyles = theme?.interactives?.button;
-  const typographyStyles = theme?.typography?.button;
-  const isIcon = size === "icon";
+  const typographyStyles = theme?.typography?.header3;
   const classes = cn(
     // Base styles
-    "",
-    // Theme typography
+    "scroll-m-20 text-2xl font-semibold tracking-normal",
+    // Theme overrides
     typographyStyles?.fontFamily,
     typographyStyles?.fontSize,
     typographyStyles?.fontWeight,
@@ -315,38 +1036,22 @@ var Button2 = ({
     typographyStyles?.textTransform,
     typographyStyles?.textDecoration,
     typographyStyles?.textOverflow,
-    // Theme interactivity. Icon buttons stay square — CTA padding
-    // would stretch them off the size="icon" box.
-    !isIcon && buttonStyles?.padding?.x,
-    !isIcon && buttonStyles?.padding?.y,
-    buttonStyles?.border?.width,
-    buttonStyles?.border?.radius,
-    buttonStyles?.border?.style,
-    // buttonStyles?.border?.color,
-    buttonStyles?.shadow,
-    // Theme disabled states
-    disabled && buttonStyles?.disabled?.opacity,
-    disabled && buttonStyles?.disabled?.cursor,
-    disabled && buttonStyles?.disabled?.color,
-    disabled && buttonStyles?.disabled?.background,
-    disabled && buttonStyles?.disabled?.border,
-    // User overrides
-    buttonStyles?.custom,
     className
   );
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant,
-      size,
-      disabled,
-      className: classes,
-      ...props,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("h3", { className: classes, ...props, children });
+};
+var Image2 = ({
+  src,
+  alt = "",
+  className = "",
+  theme,
+  ...props
+}) => {
+  const cardStyles = theme?.interactives?.card;
+  const classes = cn("w-full object-cover", cardStyles?.border?.radius, className);
+  return /* @__PURE__ */ jsx("img", { src, alt, className: classes, ...props });
 };
-var Input = React10.forwardRef(
+var Input = React7.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -363,7 +1068,7 @@ var Input = React10.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Input2 = React10__default.forwardRef(
+var Input2 = React7__default.forwardRef(
   ({
     className = "",
     theme,
@@ -408,128 +1113,11 @@ var Input2 = React10__default.forwardRef(
     return /* @__PURE__ */ jsx(Input, { ref, className: classes, ...props });
   }
 );
-Input2.displayName = "Input";
-var Textarea = React10__default.forwardRef(
-  ({ className = "", theme, error = false, ...props }, ref) => {
-    const inputStyles = theme?.interactives?.input;
-    const typographyStyles = theme?.typography?.input;
-    const classes = cn(
-      "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50",
-      typographyStyles?.fontFamily,
-      typographyStyles?.fontSize,
-      typographyStyles?.fontWeight,
-      typographyStyles?.lineHeight,
-      typographyStyles?.letterSpacing,
-      inputStyles?.padding?.x,
-      inputStyles?.padding?.y,
-      inputStyles?.border?.width,
-      inputStyles?.border?.style,
-      inputStyles?.border?.radius,
-      inputStyles?.shadow,
-      props.disabled && inputStyles?.disabled?.opacity,
-      props.disabled && inputStyles?.disabled?.cursor,
-      error && "border-red-300 focus:border-red-500 focus:ring-red-500",
-      inputStyles?.custom,
-      className
-    );
-    return /* @__PURE__ */ jsx("textarea", { ref, className: classes, ...props });
-  }
-);
-Textarea.displayName = "Textarea";
-var Caption = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const typographyStyles = theme?.typography?.caption;
-  const classes = cn(
-    // Base styles
-    "text-xs leading-7 text-muted-foreground",
-    // Theme overrides
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
-    typographyStyles?.textTransform,
-    typographyStyles?.textDecoration,
-    typographyStyles?.textOverflow,
-    className
-  );
-  return /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
-};
-var PageCard = ({
-  isLink,
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const cardStyles = theme?.interactives?.card;
-  const classes = cn(
-    // Base styles
-    "bg-card text-card-foreground",
-    // Theme interactivity
-    cardStyles?.border?.width,
-    cardStyles?.border?.radius,
-    cardStyles?.border?.style,
-    cardStyles?.shadow,
-    isLink ? "cursor-pointer" : "",
-    // User overrides
-    cardStyles?.custom,
-    className
-  );
-  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
-};
-var PageCardImage = ({
-  src,
-  alt,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const classes = cn(
-    // Base styles
-    "w-full",
-    className
-  );
-  return /* @__PURE__ */ jsx("img", { src, alt, className: classes, ...props });
-};
-var PageCardContent = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const cardStyles = theme?.interactives?.card;
-  const classes = cn(
-    // Base styles
-    "p-4",
-    // Theme interactivity
-    cardStyles?.padding?.x,
-    cardStyles?.padding?.y,
-    className
-  );
-  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
-};
-var PageCardHeader = ({
-  children,
-  className = "",
-  theme,
-  ...props
-}) => {
-  const classes = cn(
-    // Base styles
-    "pb-4",
-    className
-  );
-  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children: /* @__PURE__ */ jsx(Header4, { theme, children }) });
-};
+Input2.displayName = "Input";
 var labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label2 = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -537,8 +1125,8 @@ var Label = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 ));
-Label.displayName = LabelPrimitive.Root.displayName;
-var Label2 = React10__default.forwardRef(
+Label2.displayName = LabelPrimitive.Root.displayName;
+var Label3 = React7__default.forwardRef(
   ({ className = "", theme, error = false, ...props }, ref) => {
     const typographyStyles = theme?.typography?.text2;
     const classes = cn(
@@ -555,10 +1143,150 @@ var Label2 = React10__default.forwardRef(
       error && "text-red-500",
       className
     );
-    return /* @__PURE__ */ jsx(Label, { ref, className: classes, ...props });
+    return /* @__PURE__ */ jsx(Label2, { ref, className: classes, ...props });
   }
 );
-Label2.displayName = "Label";
+Label3.displayName = "Label";
+var Link = ({
+  children,
+  className = "",
+  theme,
+  disabled = false,
+  style,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.link;
+  const linkStyles = theme?.interactives?.link;
+  const classes = cn(
+    // Base styles
+    "font-medium cursor-pointer",
+    // Theme typography
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    // Theme interactivity
+    linkStyles?.padding?.x,
+    linkStyles?.padding?.y,
+    linkStyles?.border?.width,
+    linkStyles?.border?.radius,
+    linkStyles?.border?.style,
+    // Theme disabled states
+    disabled && linkStyles?.disabled?.color,
+    disabled && linkStyles?.disabled?.background,
+    disabled && linkStyles?.disabled?.border,
+    disabled && linkStyles?.disabled?.opacity,
+    disabled && linkStyles?.disabled?.cursor,
+    // User overrides
+    linkStyles?.custom,
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: classes,
+      style: {
+        ...style,
+        textShadow: linkStyles?.textShadow || void 0
+      },
+      ...props,
+      children
+    }
+  );
+};
+var PopoverThemeContext = React7.createContext(void 0);
+function usePopoverTheme(providedTheme) {
+  const contextTheme = React7.useContext(PopoverThemeContext);
+  return providedTheme ?? contextTheme;
+}
+function Popover({ theme, children, ...props }) {
+  return /* @__PURE__ */ jsx(PopoverThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(PopoverPrimitive.Root, { ...props, children }) });
+}
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverClose = PopoverPrimitive.Close;
+var PopoverPortal = PopoverPrimitive.Portal;
+var PopoverContent = React7.forwardRef(({ className, sideOffset = 4, theme: providedTheme, ...props }, ref) => {
+  const theme = usePopoverTheme(providedTheme);
+  const styles = theme?.interactives?.popover;
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        "z-50 w-72 overflow-hidden rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        styles?.padding?.x,
+        styles?.padding?.y,
+        styles?.border?.width,
+        styles?.border?.radius,
+        styles?.border?.style,
+        styles?.shadow,
+        styles?.custom,
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var Preheader = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.preheader;
+  const classes = cn(
+    // Base styles
+    "text-sm font-medium uppercase tracking-wide",
+    // Theme typography
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return /* @__PURE__ */ jsx("p", { className: classes, ...props, children });
+};
+var RadioGroupThemeContext = React7.createContext(void 0);
+function useRadioGroupTheme(providedTheme) {
+  const contextTheme = React7.useContext(RadioGroupThemeContext);
+  return providedTheme ?? contextTheme;
+}
+function RadioGroup2({ theme, className, ...props }) {
+  return /* @__PURE__ */ jsx(RadioGroupThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props }) });
+}
+var RadioGroupItem = React7.forwardRef(({ className, theme: providedTheme, ...props }, ref) => {
+  const theme = useRadioGroupTheme(providedTheme);
+  const inputStyles = theme?.interactives?.input;
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "aspect-square size-4 shrink-0 rounded-full border border-primary text-primary shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        inputStyles?.border?.width,
+        inputStyles?.border?.radius,
+        inputStyles?.border?.style,
+        inputStyles?.shadow,
+        inputStyles?.custom,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "size-2.5 fill-current" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 function resolveBackgroundLayerStyle(background, nextTheme) {
   const isDark = nextTheme === "dark";
   const attachment = background.backgroundAttachment || "scroll";
@@ -568,8 +1296,9 @@ function resolveBackgroundLayerStyle(background, nextTheme) {
     };
   }
   if (background.type === "image") {
+    const bgUrl = getMediaUrl(background.media);
     return {
-      backgroundImage: background.media?.file ? `url(${background.media.file})` : void 0,
+      backgroundImage: bgUrl ? `url(${bgUrl})` : void 0,
       backgroundSize: background.backgroundSize || "cover",
       backgroundPosition: background.backgroundPosition || "center",
       backgroundRepeat: background.backgroundRepeat || "no-repeat",
@@ -599,7 +1328,7 @@ var Section = ({
 }) => {
   const classes = cn("bg-background text-foreground relative", className);
   const isFixed = background && background.type !== "color" && background.backgroundAttachment === "fixed";
-  return /* @__PURE__ */ jsx(Fragment, { children: React10__default.createElement(
+  return /* @__PURE__ */ jsx(Fragment, { children: React7__default.createElement(
     component,
     {
       // `overflow-clip` keeps a fixed-attachment layer painted
@@ -615,10 +1344,7 @@ var Section = ({
           suppressHydrationWarning: true,
           "aria-hidden": true,
           className: "pointer-events-none absolute inset-0 z-0",
-          style: resolveBackgroundLayerStyle(
-            background,
-            nextTheme
-          )
+          style: resolveBackgroundLayerStyle(background, nextTheme)
         }
       ),
       background && background.type === "image" && /* @__PURE__ */ jsx(
@@ -658,66 +1384,230 @@ var Section = ({
     ] })
   ) });
 };
-var badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground"
+var SelectThemeContext = React7.createContext(void 0);
+function useSelectTheme(providedTheme) {
+  const contextTheme = React7.useContext(SelectThemeContext);
+  return providedTheme ?? contextTheme;
+}
+function Select({ theme, children, ...props }) {
+  return /* @__PURE__ */ jsx(SelectThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { ...props, children }) });
+}
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectLabel = SelectPrimitive.Label;
+var SelectTrigger = React7.forwardRef(({ className, children, theme: providedTheme, ...props }, ref) => {
+  const theme = useSelectTheme(providedTheme);
+  const styles = theme?.interactives?.input;
+  const typography = theme?.typography?.input;
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-xs outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        typography?.fontFamily,
+        typography?.fontSize,
+        typography?.fontWeight,
+        typography?.lineHeight,
+        typography?.letterSpacing,
+        typography?.textTransform,
+        typography?.textDecoration,
+        typography?.textOverflow,
+        styles?.padding?.x,
+        styles?.padding?.y,
+        styles?.border?.width,
+        styles?.border?.radius,
+        styles?.border?.style,
+        styles?.shadow,
+        styles?.custom,
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectContent = React7.forwardRef(
+  ({
+    className,
+    children,
+    position = "popper",
+    sideOffset = 4,
+    theme: providedTheme,
+    ...props
+  }, ref) => {
+    const theme = useSelectTheme(providedTheme);
+    const styles = theme?.interactives?.menu;
+    return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+      SelectPrimitive.Content,
+      {
+        ref,
+        position,
+        sideOffset,
+        className: cn(
+          "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          styles?.padding?.x,
+          styles?.padding?.y,
+          styles?.border?.width,
+          styles?.border?.radius,
+          styles?.border?.style,
+          styles?.shadow,
+          styles?.custom,
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+          /* @__PURE__ */ jsx(
+            SelectPrimitive.Viewport,
+            {
+              className: cn(
+                "p-1",
+                position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+              ),
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+        ]
       }
-    },
-    defaultVariants: {
-      variant: "default"
+    ) });
+  }
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectScrollUpButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectItem = React7.forwardRef(({ className, children, theme: providedTheme, ...props }, ref) => {
+  const theme = useSelectTheme(providedTheme);
+  const styles = theme?.interactives?.menu?.item;
+  const typography = theme?.typography?.button;
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        typography?.fontFamily,
+        typography?.fontSize,
+        typography?.fontWeight,
+        typography?.lineHeight,
+        typography?.letterSpacing,
+        typography?.textTransform,
+        typography?.textDecoration,
+        typography?.textOverflow,
+        styles?.padding?.x,
+        styles?.padding?.y,
+        styles?.border?.width,
+        styles?.border?.radius,
+        styles?.border?.style,
+        styles?.custom,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) })
+      ]
     }
+  );
+});
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
   }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var Separator3 = React7.forwardRef(
+  ({
+    className,
+    orientation = "horizontal",
+    decorative = true,
+    theme: _theme,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  )
 );
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-var Badge2 = ({
-  variant = "default",
+Separator3.displayName = SeparatorPrimitive.Root.displayName;
+var Subheader1 = ({
   children,
   className = "",
-  style = {},
   theme,
+  component = "h5",
   ...props
 }) => {
-  const typographyStyles = theme?.typography?.caption;
-  const buttonStyles = theme?.interactives?.button;
+  const typographyStyles = theme?.typography?.subheader1;
   const classes = cn(
-    // Base styles
-    // "bg-secondary",
-    // Theme typography from caption
-    typographyStyles?.fontFamily,
-    typographyStyles?.fontSize,
-    typographyStyles?.fontWeight,
-    typographyStyles?.lineHeight,
-    typographyStyles?.letterSpacing,
+    typographyStyles?.fontFamily || "font-sans",
+    typographyStyles?.fontSize || "text-lg",
+    typographyStyles?.fontWeight || "font-medium",
+    typographyStyles?.lineHeight || "leading-relaxed",
+    typographyStyles?.letterSpacing || "tracking-normal",
     typographyStyles?.textTransform,
-    buttonStyles?.border?.width,
-    buttonStyles?.border?.radius,
-    buttonStyles?.border?.style,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
     className
   );
-  return /* @__PURE__ */ jsx(
-    Badge,
-    {
-      variant,
-      className: classes,
-      style: {
-        ...style,
-        backgroundColor: style.backgroundColor,
-        color: style.color
-      },
-      ...props,
-      children
-    }
-  );
+  return component === "h5" ? /* @__PURE__ */ jsx("h5", { className: classes, ...props, children }) : /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
+};
+var Subheader2 = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.subheader2;
+  const classes = [
+    typographyStyles?.fontFamily || "font-sans",
+    typographyStyles?.fontSize || "text-base",
+    typographyStyles?.fontWeight || "font-medium",
+    typographyStyles?.lineHeight || "leading-relaxed",
+    typographyStyles?.letterSpacing || "tracking-normal",
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("h6", { className: classes, ...props, children });
 };
-var Switch = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -737,15 +1627,90 @@ var Switch = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
-var Switch2 = React10__default.forwardRef(({ className = "", theme, ...props }, ref) => {
+var Switch2 = React7__default.forwardRef(({ className = "", theme, ...props }, ref) => {
   const classes = cn(
     // Base styles
     "",
     // User overrides
     className
   );
-  return /* @__PURE__ */ jsx(Switch, { ref, className: classes, ...props });
-});
+  return /* @__PURE__ */ jsx(Switch, { ref, className: classes, ...props });
+});
+var Text1 = ({
+  children,
+  className = "",
+  theme,
+  component = "p",
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.text1;
+  const classes = cn(
+    // Base styles
+    "text-base",
+    // Theme overrides
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return component === "p" ? /* @__PURE__ */ jsx("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
+};
+var Text2 = ({
+  children,
+  className = "",
+  theme,
+  component = "p",
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.text2;
+  const classes = cn(
+    // Base styles
+    "text-sm",
+    // Theme overrides
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return component === "p" ? /* @__PURE__ */ jsx("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
+};
+var Textarea = React7__default.forwardRef(
+  ({ className = "", theme, error = false, ...props }, ref) => {
+    const inputStyles = theme?.interactives?.input;
+    const typographyStyles = theme?.typography?.input;
+    const classes = cn(
+      "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50",
+      typographyStyles?.fontFamily,
+      typographyStyles?.fontSize,
+      typographyStyles?.fontWeight,
+      typographyStyles?.lineHeight,
+      typographyStyles?.letterSpacing,
+      inputStyles?.padding?.x,
+      inputStyles?.padding?.y,
+      inputStyles?.border?.width,
+      inputStyles?.border?.style,
+      inputStyles?.border?.radius,
+      inputStyles?.shadow,
+      props.disabled && inputStyles?.disabled?.opacity,
+      props.disabled && inputStyles?.disabled?.cursor,
+      error && "border-red-300 focus:border-red-500 focus:ring-red-500",
+      inputStyles?.custom,
+      className
+    );
+    return /* @__PURE__ */ jsx("textarea", { ref, className: classes, ...props });
+  }
+);
+Textarea.displayName = "Textarea";
 
 // src/primitives/themes/classic.ts
 var themeStyles = {
@@ -943,6 +1908,30 @@ var themeStyles = {
       },
       custom: "transition-colors duration-200"
     },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border", radius: "rounded-xl", style: "border-solid" },
+      shadow: "shadow-xs",
+      item: {
+        padding: { x: "px-3", y: "py-2" },
+        border: { radius: "rounded-lg" }
+      }
+    },
+    dialog: {
+      padding: { x: "px-6", y: "py-6" },
+      border: { width: "border-0", radius: "rounded-xl" },
+      shadow: "shadow-lg"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border-0", radius: "rounded-xl" },
+      shadow: "shadow-md"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border-0", radius: "rounded-sm" },
+      shadow: "shadow-sm"
+    },
     link: {
       custom: "underline-offset-4 hover:underline",
       disabled: {
@@ -1000,168 +1989,169 @@ var classic = {
   theme: themeStyles
 };
 
-// src/primitives/themes/studio.ts
+// src/primitives/themes/editorial.ts
 var themeStyles2 = {
   colors: {
     light: {
-      background: "#f4f1ea",
-      foreground: "#1c1917",
-      card: "#fffcf7",
-      cardForeground: "#1c1917",
-      popover: "#fffcf7",
-      popoverForeground: "#1c1917",
-      primary: "#0f766e",
-      primaryForeground: "#f4fffc",
-      secondary: "#ebe4d6",
-      secondaryForeground: "#1c1917",
-      muted: "#ebe6dc",
-      mutedForeground: "#57534e",
-      accent: "#d9f3ee",
-      accentForeground: "#115e59",
-      destructive: "#dc2626",
-      border: "#e0d8cc",
-      input: "#e0d8cc",
-      ring: "#0f766e",
-      chart1: "#0f766e",
-      chart2: "#0d9488",
-      chart3: "#14b8a6",
-      chart4: "#5eead4",
-      chart5: "#ccfbf1",
-      sidebar: "#fffcf7",
-      sidebarForeground: "#1c1917",
-      sidebarPrimary: "#0f766e",
-      sidebarPrimaryForeground: "#f4fffc",
-      sidebarAccent: "#ebe4d6",
-      sidebarAccentForeground: "#1c1917",
-      sidebarBorder: "#e0d8cc",
-      sidebarRing: "#0f766e",
-      shadow2xs: "0 1px 2px 0 rgb(28 25 23 / 0.04)",
-      shadowXs: "0 1px 2px 0 rgb(28 25 23 / 0.05)",
-      shadowSm: "0 1px 2px 0 rgb(15 118 110 / 0.08), 0 1px 3px -1px rgb(28 25 23 / 0.08)",
-      shadowMd: "0 6px 16px -4px rgb(28 25 23 / 0.1), 0 2px 6px -2px rgb(15 118 110 / 0.08)",
-      shadowLg: "0 16px 32px -8px rgb(28 25 23 / 0.12), 0 6px 12px -4px rgb(15 118 110 / 0.08)",
-      shadowXl: "0 24px 48px -12px rgb(28 25 23 / 0.16)",
-      shadow2xl: "0 32px 64px -16px rgb(28 25 23 / 0.22)"
+      background: "#f6f1e8",
+      foreground: "#1a1612",
+      card: "#fffaf2",
+      cardForeground: "#1a1612",
+      popover: "#fffaf2",
+      popoverForeground: "#1a1612",
+      primary: "#1e3a8a",
+      primaryForeground: "#fffaf2",
+      secondary: "#c2410c",
+      secondaryForeground: "#fffaf2",
+      muted: "#ece4d6",
+      mutedForeground: "#5c5348",
+      accent: "#1d4ed8",
+      accentForeground: "#fffaf2",
+      border: "#e0d5c4",
+      destructive: "#b91c1c",
+      input: "#e0d5c4",
+      ring: "#1e3a8a",
+      chart1: "#1e3a8a",
+      chart2: "#c2410c",
+      chart3: "#1d4ed8",
+      chart4: "#b91c1c",
+      chart5: "#78716c",
+      sidebar: "#fffaf2",
+      sidebarForeground: "#1a1612",
+      sidebarPrimary: "#1e3a8a",
+      sidebarPrimaryForeground: "#fffaf2",
+      sidebarAccent: "#ece4d6",
+      sidebarAccentForeground: "#1a1612",
+      sidebarBorder: "#e0d5c4",
+      sidebarRing: "#1e3a8a",
+      shadow2xs: "0 1px 2px 0 rgb(26 22 18 / 0.05)",
+      shadowXs: "0 1px 2px 0 rgb(26 22 18 / 0.06)",
+      shadowSm: "0 1px 2px 0 rgb(26 22 18 / 0.06), 0 2px 6px -2px rgb(26 22 18 / 0.1)",
+      shadowMd: "0 8px 20px -6px rgb(26 22 18 / 0.12)",
+      shadowLg: "0 16px 32px -10px rgb(26 22 18 / 0.14)",
+      shadowXl: "0 24px 48px -12px rgb(26 22 18 / 0.16)",
+      shadow2xl: "0 32px 64px -16px rgb(26 22 18 / 0.2)"
     },
     dark: {
-      background: "#12100d",
-      foreground: "#f4efe6",
-      card: "#1b1814",
-      cardForeground: "#f4efe6",
-      popover: "#1b1814",
-      popoverForeground: "#f4efe6",
-      primary: "#2dd4bf",
-      primaryForeground: "#042f2e",
-      secondary: "#2a241c",
-      secondaryForeground: "#f4efe6",
-      muted: "#221e19",
-      mutedForeground: "#a8a29e",
-      accent: "#134e4a",
-      accentForeground: "#ccfbf1",
+      background: "#100e0c",
+      foreground: "#f6f1e8",
+      card: "#1b1713",
+      cardForeground: "#f6f1e8",
+      popover: "#1b1713",
+      popoverForeground: "#f6f1e8",
+      primary: "#93c5fd",
+      primaryForeground: "#100e0c",
+      secondary: "#fb923c",
+      secondaryForeground: "#100e0c",
+      muted: "#241f19",
+      mutedForeground: "#c4b8a5",
+      accent: "#60a5fa",
+      accentForeground: "#100e0c",
+      border: "#3a3228",
       destructive: "#f87171",
-      border: "#2e2922",
-      input: "#2e2922",
-      ring: "#2dd4bf",
-      chart1: "#2dd4bf",
-      chart2: "#5eead4",
-      chart3: "#99f6e4",
-      chart4: "#14b8a6",
-      chart5: "#0f766e",
-      sidebar: "#1b1814",
-      sidebarForeground: "#f4efe6",
-      sidebarPrimary: "#2dd4bf",
-      sidebarPrimaryForeground: "#042f2e",
-      sidebarAccent: "#2a241c",
-      sidebarAccentForeground: "#f4efe6",
-      sidebarBorder: "#2e2922",
-      sidebarRing: "#2dd4bf",
-      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.28)",
-      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.32)",
-      shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.36), 0 1px 3px -1px rgb(0 0 0 / 0.4)",
-      shadowMd: "0 8px 20px -6px rgb(0 0 0 / 0.48)",
-      shadowLg: "0 16px 32px -8px rgb(0 0 0 / 0.52)",
-      shadowXl: "0 24px 48px -10px rgb(0 0 0 / 0.56)",
-      shadow2xl: "0 32px 64px -12px rgb(0 0 0 / 0.64)"
+      input: "#3a3228",
+      ring: "#93c5fd",
+      chart1: "#93c5fd",
+      chart2: "#fb923c",
+      chart3: "#60a5fa",
+      chart4: "#f87171",
+      chart5: "#a8a29e",
+      sidebar: "#1b1713",
+      sidebarForeground: "#f6f1e8",
+      sidebarPrimary: "#93c5fd",
+      sidebarPrimaryForeground: "#100e0c",
+      sidebarAccent: "#241f19",
+      sidebarAccentForeground: "#f6f1e8",
+      sidebarBorder: "#3a3228",
+      sidebarRing: "#93c5fd",
+      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
+      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.35)",
+      shadowSm: "0 2px 6px 0 rgb(0 0 0 / 0.4)",
+      shadowMd: "0 8px 20px -6px rgb(0 0 0 / 0.5)",
+      shadowLg: "0 16px 32px -10px rgb(0 0 0 / 0.55)",
+      shadowXl: "0 24px 48px -12px rgb(0 0 0 / 0.6)",
+      shadow2xl: "0 32px 64px -16px rgb(0 0 0 / 0.7)"
     }
   },
   typography: {
     preheader: {
-      fontFamily: "font-montserrat",
+      fontFamily: "font-work-sans",
       fontSize: "text-xs",
-      fontWeight: "font-semibold",
-      lineHeight: "leading-normal",
+      fontWeight: "font-medium",
+      lineHeight: "leading-relaxed",
       letterSpacing: "tracking-widest",
       textTransform: "uppercase"
     },
     header1: {
-      fontFamily: "font-montserrat",
+      fontFamily: "font-playfair-display",
       fontSize: "text-6xl",
-      fontWeight: "font-semibold",
+      fontWeight: "font-medium",
       lineHeight: "leading-none",
       letterSpacing: "tracking-tighter"
     },
     header2: {
-      fontFamily: "font-montserrat",
+      fontFamily: "font-playfair-display",
       fontSize: "text-4xl",
-      fontWeight: "font-semibold",
+      fontWeight: "font-medium",
       lineHeight: "leading-tight",
-      letterSpacing: "tracking-tight"
+      letterSpacing: "tracking-tighter"
     },
     header3: {
-      fontFamily: "font-montserrat",
-      fontSize: "text-2xl",
-      fontWeight: "font-semibold",
+      fontFamily: "font-source-serif-4",
+      fontSize: "text-3xl",
+      fontWeight: "font-medium",
       lineHeight: "leading-snug",
       letterSpacing: "tracking-tight"
     },
     header4: {
-      fontFamily: "font-montserrat",
-      fontSize: "text-xl",
+      fontFamily: "font-source-serif-4",
+      fontSize: "text-2xl",
       fontWeight: "font-medium",
-      lineHeight: "leading-snug"
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
     },
     subheader1: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-source-serif-4",
       fontSize: "text-xl",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     subheader2: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-work-sans",
       fontSize: "text-lg",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     text1: {
-      fontFamily: "font-source-sans-3",
-      fontSize: "text-base",
+      fontFamily: "font-source-serif-4",
+      fontSize: "text-lg",
       fontWeight: "font-normal",
-      lineHeight: "leading-relaxed"
+      lineHeight: "leading-loose"
     },
     text2: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-work-sans",
       fontSize: "text-sm",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     link: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-work-sans",
       fontSize: "text-base",
       fontWeight: "font-medium"
     },
     button: {
-      fontFamily: "font-montserrat",
+      fontFamily: "font-work-sans",
       fontSize: "text-sm",
       fontWeight: "font-medium",
       letterSpacing: "tracking-wide"
     },
     input: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-work-sans",
       fontSize: "text-base",
       fontWeight: "font-normal"
     },
     caption: {
-      fontFamily: "font-source-sans-3",
+      fontFamily: "font-work-sans",
       fontSize: "text-xs",
       fontWeight: "font-medium",
       lineHeight: "leading-normal",
@@ -1173,55 +2163,77 @@ var themeStyles2 = {
       padding: { x: "px-6", y: "py-3" },
       border: {
         width: "border-0",
-        radius: "rounded-2xl"
+        radius: "rounded-full"
       },
-      shadow: "shadow-xs",
+      shadow: "shadow-none",
       custom: "transition-colors duration-200",
       disabled: {
         opacity: "opacity-50",
         cursor: "cursor-not-allowed"
       }
     },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border-0", radius: "rounded-none" },
+      shadow: "shadow-none",
+      item: {
+        padding: { x: "px-3", y: "py-2" },
+        border: { radius: "rounded-none" }
+      }
+    },
+    dialog: {
+      padding: { x: "px-6", y: "py-6" },
+      border: { width: "border-0", radius: "rounded-none" },
+      shadow: "shadow-none"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border-0", radius: "rounded-none" },
+      shadow: "shadow-none"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border-0", radius: "rounded-none" },
+      shadow: "shadow-none"
+    },
     link: {
       padding: { x: "px-0", y: "py-0" },
-      custom: "underline-offset-4 transition-colors duration-150 hover:underline"
+      custom: "underline-offset-4 decoration-1 hover:underline"
     },
     card: {
       padding: { x: "px-8", y: "py-8" },
       border: {
-        width: "border",
-        radius: "rounded-3xl",
-        style: "border-solid"
+        width: "border-0",
+        radius: "rounded-none"
       },
-      shadow: "shadow-xs",
-      custom: "transition-shadow duration-200 hover:shadow-lg"
+      shadow: "shadow-none",
+      custom: ""
     },
     input: {
-      borderRadius: "rounded-2xl",
       padding: { x: "px-4", y: "py-3" },
       border: {
         width: "border",
-        style: "border-solid",
-        radius: "rounded-2xl"
+        radius: "rounded-none",
+        style: "border-solid"
       },
       shadow: "shadow-none",
-      custom: "transition-shadow duration-150",
+      custom: "",
       disabled: {
-        cursor: "cursor-not-allowed",
-        opacity: "opacity-50"
+        opacity: "opacity-50",
+        cursor: "cursor-not-allowed"
       }
     }
   },
   structure: {
-    page: { width: "max-w-6xl" },
+    page: { width: "max-w-5xl" },
     section: {
       padding: { x: "px-6", y: "py-24" }
     }
   }
 };
-var studio = {
-  id: "studio",
-  name: "Studio",
+var editorial = {
+  id: "editorial",
+  name: "Editorial",
   theme: themeStyles2
 };
 
@@ -1334,283 +2346,58 @@ var themeStyles3 = {
     },
     header3: {
       fontFamily: "font-roboto",
-      fontSize: "text-2xl",
-      fontWeight: "font-medium",
-      lineHeight: "leading-snug"
-    },
-    header4: {
-      fontFamily: "font-roboto",
-      fontSize: "text-xl",
-      fontWeight: "font-medium",
-      lineHeight: "leading-snug"
-    },
-    subheader1: {
-      fontFamily: "font-roboto",
-      fontSize: "text-lg",
-      fontWeight: "font-normal",
-      lineHeight: "leading-relaxed"
-    },
-    subheader2: {
-      fontFamily: "font-roboto",
-      fontSize: "text-base",
-      fontWeight: "font-normal",
-      lineHeight: "leading-relaxed"
-    },
-    text1: {
-      fontFamily: "font-roboto",
-      fontSize: "text-base",
-      fontWeight: "font-normal",
-      lineHeight: "leading-relaxed"
-    },
-    text2: {
-      fontFamily: "font-roboto",
-      fontSize: "text-sm",
-      fontWeight: "font-normal",
-      lineHeight: "leading-relaxed"
-    },
-    link: {
-      fontFamily: "font-roboto",
-      fontSize: "text-base",
-      fontWeight: "font-medium"
-    },
-    button: {
-      fontFamily: "font-roboto",
-      fontSize: "text-sm",
-      fontWeight: "font-medium",
-      letterSpacing: "tracking-wide"
-    },
-    input: {
-      fontFamily: "font-roboto",
-      fontSize: "text-base",
-      fontWeight: "font-normal"
-    },
-    caption: {
-      fontFamily: "font-roboto",
-      fontSize: "text-xs",
-      fontWeight: "font-medium",
-      lineHeight: "leading-normal",
-      letterSpacing: "tracking-wide"
-    }
-  },
-  interactives: {
-    button: {
-      padding: { x: "px-5", y: "py-3" },
-      border: {
-        width: "border-0",
-        radius: "rounded-xl"
-      },
-      shadow: "shadow-xs",
-      custom: "transition-colors duration-200",
-      disabled: {
-        opacity: "opacity-50",
-        cursor: "cursor-not-allowed"
-      }
-    },
-    link: {
-      padding: { x: "px-0", y: "py-0" },
-      custom: "underline-offset-4 hover:underline"
-    },
-    card: {
-      padding: { x: "px-6", y: "py-6" },
-      border: {
-        width: "border",
-        radius: "rounded-2xl",
-        style: "border-solid"
-      },
-      shadow: "shadow-xs",
-      custom: "transition-shadow duration-200 hover:shadow-md"
-    },
-    input: {
-      padding: { x: "px-4", y: "py-3" },
-      border: {
-        width: "border",
-        radius: "rounded-xl",
-        style: "border-solid"
-      },
-      shadow: "shadow-none",
-      custom: "",
-      disabled: {
-        opacity: "opacity-50",
-        cursor: "cursor-not-allowed"
-      }
-    }
-  },
-  structure: {
-    page: { width: "max-w-6xl" },
-    section: {
-      padding: { x: "px-6", y: "py-16" }
-    }
-  }
-};
-var midnight = {
-  id: "midnight",
-  name: "Midnight",
-  theme: themeStyles3
-};
-
-// src/primitives/themes/editorial.ts
-var themeStyles4 = {
-  colors: {
-    light: {
-      background: "#f6f1e8",
-      foreground: "#1a1612",
-      card: "#fffaf2",
-      cardForeground: "#1a1612",
-      popover: "#fffaf2",
-      popoverForeground: "#1a1612",
-      primary: "#1e3a8a",
-      primaryForeground: "#fffaf2",
-      secondary: "#c2410c",
-      secondaryForeground: "#fffaf2",
-      muted: "#ece4d6",
-      mutedForeground: "#5c5348",
-      accent: "#1d4ed8",
-      accentForeground: "#fffaf2",
-      border: "#e0d5c4",
-      destructive: "#b91c1c",
-      input: "#e0d5c4",
-      ring: "#1e3a8a",
-      chart1: "#1e3a8a",
-      chart2: "#c2410c",
-      chart3: "#1d4ed8",
-      chart4: "#b91c1c",
-      chart5: "#78716c",
-      sidebar: "#fffaf2",
-      sidebarForeground: "#1a1612",
-      sidebarPrimary: "#1e3a8a",
-      sidebarPrimaryForeground: "#fffaf2",
-      sidebarAccent: "#ece4d6",
-      sidebarAccentForeground: "#1a1612",
-      sidebarBorder: "#e0d5c4",
-      sidebarRing: "#1e3a8a",
-      shadow2xs: "0 1px 2px 0 rgb(26 22 18 / 0.05)",
-      shadowXs: "0 1px 2px 0 rgb(26 22 18 / 0.06)",
-      shadowSm: "0 1px 2px 0 rgb(26 22 18 / 0.06), 0 2px 6px -2px rgb(26 22 18 / 0.1)",
-      shadowMd: "0 8px 20px -6px rgb(26 22 18 / 0.12)",
-      shadowLg: "0 16px 32px -10px rgb(26 22 18 / 0.14)",
-      shadowXl: "0 24px 48px -12px rgb(26 22 18 / 0.16)",
-      shadow2xl: "0 32px 64px -16px rgb(26 22 18 / 0.2)"
-    },
-    dark: {
-      background: "#100e0c",
-      foreground: "#f6f1e8",
-      card: "#1b1713",
-      cardForeground: "#f6f1e8",
-      popover: "#1b1713",
-      popoverForeground: "#f6f1e8",
-      primary: "#93c5fd",
-      primaryForeground: "#100e0c",
-      secondary: "#fb923c",
-      secondaryForeground: "#100e0c",
-      muted: "#241f19",
-      mutedForeground: "#c4b8a5",
-      accent: "#60a5fa",
-      accentForeground: "#100e0c",
-      border: "#3a3228",
-      destructive: "#f87171",
-      input: "#3a3228",
-      ring: "#93c5fd",
-      chart1: "#93c5fd",
-      chart2: "#fb923c",
-      chart3: "#60a5fa",
-      chart4: "#f87171",
-      chart5: "#a8a29e",
-      sidebar: "#1b1713",
-      sidebarForeground: "#f6f1e8",
-      sidebarPrimary: "#93c5fd",
-      sidebarPrimaryForeground: "#100e0c",
-      sidebarAccent: "#241f19",
-      sidebarAccentForeground: "#f6f1e8",
-      sidebarBorder: "#3a3228",
-      sidebarRing: "#93c5fd",
-      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
-      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.35)",
-      shadowSm: "0 2px 6px 0 rgb(0 0 0 / 0.4)",
-      shadowMd: "0 8px 20px -6px rgb(0 0 0 / 0.5)",
-      shadowLg: "0 16px 32px -10px rgb(0 0 0 / 0.55)",
-      shadowXl: "0 24px 48px -12px rgb(0 0 0 / 0.6)",
-      shadow2xl: "0 32px 64px -16px rgb(0 0 0 / 0.7)"
-    }
-  },
-  typography: {
-    preheader: {
-      fontFamily: "font-work-sans",
-      fontSize: "text-xs",
-      fontWeight: "font-medium",
-      lineHeight: "leading-relaxed",
-      letterSpacing: "tracking-widest",
-      textTransform: "uppercase"
-    },
-    header1: {
-      fontFamily: "font-playfair-display",
-      fontSize: "text-6xl",
-      fontWeight: "font-medium",
-      lineHeight: "leading-none",
-      letterSpacing: "tracking-tighter"
-    },
-    header2: {
-      fontFamily: "font-playfair-display",
-      fontSize: "text-4xl",
-      fontWeight: "font-medium",
-      lineHeight: "leading-tight",
-      letterSpacing: "tracking-tighter"
-    },
-    header3: {
-      fontFamily: "font-source-serif-4",
-      fontSize: "text-3xl",
+      fontSize: "text-2xl",
       fontWeight: "font-medium",
-      lineHeight: "leading-snug",
-      letterSpacing: "tracking-tight"
+      lineHeight: "leading-snug"
     },
     header4: {
-      fontFamily: "font-source-serif-4",
-      fontSize: "text-2xl",
+      fontFamily: "font-roboto",
+      fontSize: "text-xl",
       fontWeight: "font-medium",
-      lineHeight: "leading-snug",
-      letterSpacing: "tracking-tight"
+      lineHeight: "leading-snug"
     },
     subheader1: {
-      fontFamily: "font-source-serif-4",
-      fontSize: "text-xl",
+      fontFamily: "font-roboto",
+      fontSize: "text-lg",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     subheader2: {
-      fontFamily: "font-work-sans",
-      fontSize: "text-lg",
+      fontFamily: "font-roboto",
+      fontSize: "text-base",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     text1: {
-      fontFamily: "font-source-serif-4",
-      fontSize: "text-lg",
+      fontFamily: "font-roboto",
+      fontSize: "text-base",
       fontWeight: "font-normal",
-      lineHeight: "leading-loose"
+      lineHeight: "leading-relaxed"
     },
     text2: {
-      fontFamily: "font-work-sans",
+      fontFamily: "font-roboto",
       fontSize: "text-sm",
       fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     link: {
-      fontFamily: "font-work-sans",
+      fontFamily: "font-roboto",
       fontSize: "text-base",
       fontWeight: "font-medium"
     },
     button: {
-      fontFamily: "font-work-sans",
+      fontFamily: "font-roboto",
       fontSize: "text-sm",
       fontWeight: "font-medium",
       letterSpacing: "tracking-wide"
     },
     input: {
-      fontFamily: "font-work-sans",
+      fontFamily: "font-roboto",
       fontSize: "text-base",
       fontWeight: "font-normal"
     },
     caption: {
-      fontFamily: "font-work-sans",
+      fontFamily: "font-roboto",
       fontSize: "text-xs",
       fontWeight: "font-medium",
       lineHeight: "leading-normal",
@@ -1619,36 +2406,61 @@ var themeStyles4 = {
   },
   interactives: {
     button: {
-      padding: { x: "px-6", y: "py-3" },
+      padding: { x: "px-5", y: "py-3" },
       border: {
         width: "border-0",
-        radius: "rounded-full"
+        radius: "rounded-xl"
       },
-      shadow: "shadow-none",
+      shadow: "shadow-xs",
       custom: "transition-colors duration-200",
       disabled: {
         opacity: "opacity-50",
         cursor: "cursor-not-allowed"
       }
     },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border", radius: "rounded-2xl", style: "border-solid" },
+      shadow: "shadow-xs",
+      item: {
+        padding: { x: "px-3", y: "py-2" },
+        border: { radius: "rounded-xl" }
+      }
+    },
+    dialog: {
+      padding: { x: "px-6", y: "py-6" },
+      border: { width: "border", radius: "rounded-2xl", style: "border-solid" },
+      shadow: "shadow-xl"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border", radius: "rounded-2xl", style: "border-solid" },
+      shadow: "shadow-lg"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border", radius: "rounded-lg", style: "border-solid" },
+      shadow: "shadow-sm"
+    },
     link: {
       padding: { x: "px-0", y: "py-0" },
-      custom: "underline-offset-4 decoration-1 hover:underline"
+      custom: "underline-offset-4 hover:underline"
     },
     card: {
-      padding: { x: "px-8", y: "py-8" },
+      padding: { x: "px-6", y: "py-6" },
       border: {
-        width: "border-0",
-        radius: "rounded-none"
+        width: "border",
+        radius: "rounded-2xl",
+        style: "border-solid"
       },
-      shadow: "shadow-none",
-      custom: ""
+      shadow: "shadow-xs",
+      custom: "transition-shadow duration-200 hover:shadow-md"
     },
     input: {
       padding: { x: "px-4", y: "py-3" },
       border: {
         width: "border",
-        radius: "rounded-none",
+        radius: "rounded-xl",
         style: "border-solid"
       },
       shadow: "shadow-none",
@@ -1660,20 +2472,20 @@ var themeStyles4 = {
     }
   },
   structure: {
-    page: { width: "max-w-5xl" },
+    page: { width: "max-w-6xl" },
     section: {
-      padding: { x: "px-6", y: "py-24" }
+      padding: { x: "px-6", y: "py-16" }
     }
   }
 };
-var editorial = {
-  id: "editorial",
-  name: "Editorial",
-  theme: themeStyles4
+var midnight = {
+  id: "midnight",
+  name: "Midnight",
+  theme: themeStyles3
 };
 
 // src/primitives/themes/neobrutalism.ts
-var themeStyles5 = {
+var themeStyles4 = {
   colors: {
     light: {
       background: "#f3fff9",
@@ -1758,122 +2570,395 @@ var themeStyles5 = {
   },
   typography: {
     preheader: {
-      fontFamily: "font-inter",
-      fontSize: "text-sm",
-      fontWeight: "font-bold",
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-bold",
+      letterSpacing: "tracking-widest",
+      textTransform: "uppercase"
+    },
+    header1: {
+      fontFamily: "font-inter",
+      fontSize: "text-5xl",
+      fontWeight: "font-black",
+      lineHeight: "leading-none",
+      letterSpacing: "tracking-tighter"
+    },
+    header2: {
+      fontFamily: "font-inter",
+      fontSize: "text-4xl",
+      fontWeight: "font-extrabold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight"
+    },
+    header3: {
+      fontFamily: "font-inter",
+      fontSize: "text-2xl",
+      fontWeight: "font-extrabold",
+      lineHeight: "leading-snug"
+    },
+    header4: {
+      fontFamily: "font-inter",
+      fontSize: "text-xl",
+      fontWeight: "font-bold",
+      lineHeight: "leading-snug"
+    },
+    subheader1: {
+      fontFamily: "font-inter",
+      fontSize: "text-lg",
+      fontWeight: "font-medium",
+      lineHeight: "leading-relaxed"
+    },
+    subheader2: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-medium"
+    },
+    text1: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-medium",
+      lineHeight: "leading-relaxed"
+    },
+    text2: {
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-medium"
+    },
+    link: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-extrabold"
+    },
+    button: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-extrabold",
+      letterSpacing: "tracking-wide"
+    },
+    input: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-medium"
+    },
+    caption: {
+      fontFamily: "font-inter",
+      fontSize: "text-xs",
+      fontWeight: "font-bold",
+      letterSpacing: "tracking-wide",
+      textTransform: "uppercase"
+    }
+  },
+  interactives: {
+    button: {
+      padding: { x: "px-6", y: "py-3" },
+      border: {
+        width: "border-2",
+        radius: "rounded-none",
+        style: "border-solid"
+      },
+      shadow: "shadow-md",
+      custom: "transition-transform duration-150 ease-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none",
+      disabled: {
+        opacity: "opacity-50",
+        cursor: "cursor-not-allowed"
+      }
+    },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border-2", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-md",
+      item: {
+        padding: { x: "px-3", y: "py-2" },
+        border: { radius: "rounded-none" }
+      }
+    },
+    dialog: {
+      padding: { x: "px-6", y: "py-6" },
+      border: { width: "border-2", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-md"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border-2", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-md"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border-2", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-md"
+    },
+    link: {
+      padding: { x: "px-0", y: "py-0" },
+      custom: "underline decoration-2 underline-offset-4"
+    },
+    card: {
+      padding: { x: "px-6", y: "py-6" },
+      border: {
+        width: "border-2",
+        radius: "rounded-none",
+        style: "border-solid"
+      },
+      shadow: "shadow-md",
+      custom: "transition-transform duration-150 ease-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none"
+    },
+    input: {
+      padding: { x: "px-4", y: "py-3" },
+      border: {
+        width: "border-2",
+        style: "border-solid",
+        radius: "rounded-none"
+      },
+      shadow: "shadow-sm",
+      custom: "",
+      disabled: {
+        cursor: "cursor-not-allowed",
+        opacity: "opacity-50"
+      }
+    }
+  },
+  structure: {
+    page: { width: "max-w-6xl" },
+    section: {
+      padding: { x: "px-6", y: "py-16" }
+    }
+  }
+};
+var neobrutalism = {
+  id: "neobrutalism",
+  name: "Neo-Brutalism",
+  theme: themeStyles4
+};
+
+// src/primitives/themes/studio.ts
+var themeStyles5 = {
+  colors: {
+    light: {
+      background: "#f4f1ea",
+      foreground: "#1c1917",
+      card: "#fffcf7",
+      cardForeground: "#1c1917",
+      popover: "#fffcf7",
+      popoverForeground: "#1c1917",
+      primary: "#0f766e",
+      primaryForeground: "#f4fffc",
+      secondary: "#ebe4d6",
+      secondaryForeground: "#1c1917",
+      muted: "#ebe6dc",
+      mutedForeground: "#57534e",
+      accent: "#d9f3ee",
+      accentForeground: "#115e59",
+      destructive: "#dc2626",
+      border: "#e0d8cc",
+      input: "#e0d8cc",
+      ring: "#0f766e",
+      chart1: "#0f766e",
+      chart2: "#0d9488",
+      chart3: "#14b8a6",
+      chart4: "#5eead4",
+      chart5: "#ccfbf1",
+      sidebar: "#fffcf7",
+      sidebarForeground: "#1c1917",
+      sidebarPrimary: "#0f766e",
+      sidebarPrimaryForeground: "#f4fffc",
+      sidebarAccent: "#ebe4d6",
+      sidebarAccentForeground: "#1c1917",
+      sidebarBorder: "#e0d8cc",
+      sidebarRing: "#0f766e",
+      shadow2xs: "0 1px 2px 0 rgb(28 25 23 / 0.04)",
+      shadowXs: "0 1px 2px 0 rgb(28 25 23 / 0.05)",
+      shadowSm: "0 1px 2px 0 rgb(15 118 110 / 0.08), 0 1px 3px -1px rgb(28 25 23 / 0.08)",
+      shadowMd: "0 6px 16px -4px rgb(28 25 23 / 0.1), 0 2px 6px -2px rgb(15 118 110 / 0.08)",
+      shadowLg: "0 16px 32px -8px rgb(28 25 23 / 0.12), 0 6px 12px -4px rgb(15 118 110 / 0.08)",
+      shadowXl: "0 24px 48px -12px rgb(28 25 23 / 0.16)",
+      shadow2xl: "0 32px 64px -16px rgb(28 25 23 / 0.22)"
+    },
+    dark: {
+      background: "#12100d",
+      foreground: "#f4efe6",
+      card: "#1b1814",
+      cardForeground: "#f4efe6",
+      popover: "#1b1814",
+      popoverForeground: "#f4efe6",
+      primary: "#2dd4bf",
+      primaryForeground: "#042f2e",
+      secondary: "#2a241c",
+      secondaryForeground: "#f4efe6",
+      muted: "#221e19",
+      mutedForeground: "#a8a29e",
+      accent: "#134e4a",
+      accentForeground: "#ccfbf1",
+      destructive: "#f87171",
+      border: "#2e2922",
+      input: "#2e2922",
+      ring: "#2dd4bf",
+      chart1: "#2dd4bf",
+      chart2: "#5eead4",
+      chart3: "#99f6e4",
+      chart4: "#14b8a6",
+      chart5: "#0f766e",
+      sidebar: "#1b1814",
+      sidebarForeground: "#f4efe6",
+      sidebarPrimary: "#2dd4bf",
+      sidebarPrimaryForeground: "#042f2e",
+      sidebarAccent: "#2a241c",
+      sidebarAccentForeground: "#f4efe6",
+      sidebarBorder: "#2e2922",
+      sidebarRing: "#2dd4bf",
+      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.28)",
+      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.32)",
+      shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.36), 0 1px 3px -1px rgb(0 0 0 / 0.4)",
+      shadowMd: "0 8px 20px -6px rgb(0 0 0 / 0.48)",
+      shadowLg: "0 16px 32px -8px rgb(0 0 0 / 0.52)",
+      shadowXl: "0 24px 48px -10px rgb(0 0 0 / 0.56)",
+      shadow2xl: "0 32px 64px -12px rgb(0 0 0 / 0.64)"
+    }
+  },
+  typography: {
+    preheader: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-xs",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-normal",
       letterSpacing: "tracking-widest",
       textTransform: "uppercase"
     },
     header1: {
-      fontFamily: "font-inter",
-      fontSize: "text-5xl",
-      fontWeight: "font-black",
+      fontFamily: "font-montserrat",
+      fontSize: "text-6xl",
+      fontWeight: "font-semibold",
       lineHeight: "leading-none",
       letterSpacing: "tracking-tighter"
     },
     header2: {
-      fontFamily: "font-inter",
+      fontFamily: "font-montserrat",
       fontSize: "text-4xl",
-      fontWeight: "font-extrabold",
+      fontWeight: "font-semibold",
       lineHeight: "leading-tight",
       letterSpacing: "tracking-tight"
     },
     header3: {
-      fontFamily: "font-inter",
+      fontFamily: "font-montserrat",
       fontSize: "text-2xl",
-      fontWeight: "font-extrabold",
-      lineHeight: "leading-snug"
+      fontWeight: "font-semibold",
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
     },
     header4: {
-      fontFamily: "font-inter",
+      fontFamily: "font-montserrat",
       fontSize: "text-xl",
-      fontWeight: "font-bold",
+      fontWeight: "font-medium",
       lineHeight: "leading-snug"
     },
     subheader1: {
-      fontFamily: "font-inter",
-      fontSize: "text-lg",
-      fontWeight: "font-medium",
+      fontFamily: "font-source-sans-3",
+      fontSize: "text-xl",
+      fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     subheader2: {
-      fontFamily: "font-inter",
-      fontSize: "text-base",
-      fontWeight: "font-medium"
+      fontFamily: "font-source-sans-3",
+      fontSize: "text-lg",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
     },
     text1: {
-      fontFamily: "font-inter",
+      fontFamily: "font-source-sans-3",
       fontSize: "text-base",
-      fontWeight: "font-medium",
+      fontWeight: "font-normal",
       lineHeight: "leading-relaxed"
     },
     text2: {
-      fontFamily: "font-inter",
+      fontFamily: "font-source-sans-3",
       fontSize: "text-sm",
-      fontWeight: "font-medium"
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
     },
     link: {
-      fontFamily: "font-inter",
+      fontFamily: "font-source-sans-3",
       fontSize: "text-base",
-      fontWeight: "font-extrabold"
+      fontWeight: "font-medium"
     },
     button: {
-      fontFamily: "font-inter",
-      fontSize: "text-base",
-      fontWeight: "font-extrabold",
+      fontFamily: "font-montserrat",
+      fontSize: "text-sm",
+      fontWeight: "font-medium",
       letterSpacing: "tracking-wide"
     },
     input: {
-      fontFamily: "font-inter",
+      fontFamily: "font-source-sans-3",
       fontSize: "text-base",
-      fontWeight: "font-medium"
+      fontWeight: "font-normal"
     },
     caption: {
-      fontFamily: "font-inter",
+      fontFamily: "font-source-sans-3",
       fontSize: "text-xs",
-      fontWeight: "font-bold",
-      letterSpacing: "tracking-wide",
-      textTransform: "uppercase"
+      fontWeight: "font-medium",
+      lineHeight: "leading-normal",
+      letterSpacing: "tracking-wide"
     }
   },
   interactives: {
     button: {
       padding: { x: "px-6", y: "py-3" },
       border: {
-        width: "border-2",
-        radius: "rounded-none",
-        style: "border-solid"
+        width: "border-0",
+        radius: "rounded-2xl"
       },
-      shadow: "shadow-md",
-      custom: "transition-transform duration-150 ease-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none",
+      shadow: "shadow-xs",
+      custom: "transition-colors duration-200",
       disabled: {
         opacity: "opacity-50",
         cursor: "cursor-not-allowed"
       }
     },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border", radius: "rounded-2xl", style: "border-solid" },
+      shadow: "shadow-xs",
+      item: {
+        padding: { x: "px-3", y: "py-2" },
+        border: { radius: "rounded-xl" }
+      }
+    },
+    dialog: {
+      padding: { x: "px-6", y: "py-6" },
+      border: { width: "border-0", radius: "rounded-2xl" },
+      shadow: "shadow-lg"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border-0", radius: "rounded-2xl" },
+      shadow: "shadow-md"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border-0", radius: "rounded-lg" },
+      shadow: "shadow-sm"
+    },
     link: {
       padding: { x: "px-0", y: "py-0" },
-      custom: "underline decoration-2 underline-offset-4"
+      custom: "underline-offset-4 transition-colors duration-150 hover:underline"
     },
     card: {
-      padding: { x: "px-6", y: "py-6" },
+      padding: { x: "px-8", y: "py-8" },
       border: {
-        width: "border-2",
-        radius: "rounded-none",
+        width: "border",
+        radius: "rounded-3xl",
         style: "border-solid"
       },
-      shadow: "shadow-md",
-      custom: "transition-transform duration-150 ease-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none"
+      shadow: "shadow-xs",
+      custom: "transition-shadow duration-200 hover:shadow-lg"
     },
     input: {
+      borderRadius: "rounded-2xl",
       padding: { x: "px-4", y: "py-3" },
       border: {
-        width: "border-2",
+        width: "border",
         style: "border-solid",
-        radius: "rounded-none"
+        radius: "rounded-2xl"
       },
-      shadow: "shadow-sm",
-      custom: "",
+      shadow: "shadow-none",
+      custom: "transition-shadow duration-150",
       disabled: {
         cursor: "cursor-not-allowed",
         opacity: "opacity-50"
@@ -1883,129 +2968,56 @@ var themeStyles5 = {
   structure: {
     page: { width: "max-w-6xl" },
     section: {
-      padding: { x: "px-6", y: "py-16" }
+      padding: { x: "px-6", y: "py-24" }
     }
   }
 };
-var neobrutalism = {
-  id: "neobrutalism",
-  name: "Neo-Brutalism",
+var studio = {
+  id: "studio",
+  name: "Studio",
   theme: themeStyles5
 };
 
 // src/primitives/themes/index.ts
-var themes = [
-  classic,
-  studio,
-  midnight,
-  editorial,
-  neobrutalism
-];
-var Sheet = SheetPrimitive.Root;
-var SheetTrigger = SheetPrimitive.Trigger;
-var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SheetPrimitive.Overlay,
-  {
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props,
-    ref
-  }
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-var sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 text-foreground shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
-      }
-    },
-    defaultVariants: {
-      side: "right"
-    }
-  }
-);
-var SheetContent = React10.forwardRef(({ side = "right", className, children, container, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { container: container ?? void 0, children: [
-  /* @__PURE__ */ jsx(SheetOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    SheetPrimitive.Content,
+var themes = [classic, studio, midnight, editorial, neobrutalism];
+var TooltipThemeContext = React7.createContext(void 0);
+function useTooltipTheme(providedTheme) {
+  const contextTheme = React7.useContext(TooltipThemeContext);
+  return providedTheme ?? contextTheme;
+}
+function TooltipProvider({ theme, children, ...props }) {
+  return /* @__PURE__ */ jsx(TooltipThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { ...props, children }) });
+}
+function Tooltip({ theme, children, ...props }) {
+  return /* @__PURE__ */ jsx(TooltipThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props, children }) });
+}
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipPortal = TooltipPrimitive.Portal;
+var TooltipContent = React7.forwardRef(({ className, sideOffset = 6, theme: providedTheme, ...props }, ref) => {
+  const theme = useTooltipTheme(providedTheme);
+  const styles = theme?.interactives?.tooltip;
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
     {
       ref,
-      className: cn(sheetVariants({ side }), className),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
+      sideOffset,
+      className: cn(
+        "z-50 w-fit rounded-sm bg-foreground px-2.5 py-1.5 text-xs font-medium text-background outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
+        styles?.padding?.x,
+        styles?.padding?.y,
+        styles?.border?.width,
+        styles?.border?.radius,
+        styles?.border?.style,
+        styles?.shadow,
+        styles?.custom,
+        className
+      ),
+      ...props
     }
-  )
-] }));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-var SheetTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SheetPrimitive.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold text-foreground", className),
-    ...props
-  }
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SheetPrimitive.Description,
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-function Drawer({
-  trigger,
-  children,
-  side = "left",
-  open,
-  setOpen,
-  style,
-  className = "",
-  theme: _theme
-}) {
-  const triggerWrapRef = useRef(null);
-  const [container, setContainer] = useState(null);
-  useLayoutEffect(() => {
-    const root = triggerWrapRef.current?.closest(
-      "[data-pb-theme], .pb-theme"
-    );
-    setContainer(root instanceof HTMLElement ? root : null);
-  }, []);
-  return /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { ref: triggerWrapRef, children: trigger }) }),
-    /* @__PURE__ */ jsx(
-      SheetContent,
-      {
-        side,
-        style,
-        container,
-        className: cn(
-          "bg-background text-foreground",
-          !container && "pb-theme",
-          className
-        ),
-        children
-      }
-    )
-  ] });
-}
+  ) });
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Badge2 as Badge, Button, Button2, Caption, Drawer, Header1, Header2, Header3, Header4, Input2 as Input, Label2 as Label, Link, PageCard, PageCardContent, PageCardHeader, PageCardImage, Preheader, Section, Subheader1, Subheader2, Switch, Switch2, Text1, Text2, Textarea, cn, themes };
-//# sourceMappingURL=chunk-RBJBODQP.js.map
-//# sourceMappingURL=chunk-RBJBODQP.js.map
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge2 as Badge, Button, Button2, Caption, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Header1, Header2, Header3, Header4, Image2 as Image, Input2 as Input, Label3 as Label, Link, PageCard, PageCardContent, PageCardHeader, PageCardImage, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Preheader, RadioGroup2 as RadioGroup, RadioGroupItem, Section, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Subheader1, Subheader2, Switch, Switch2, Text1, Text2, Textarea, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, cn, themes };
+//# sourceMappingURL=chunk-SGNRWWG3.js.map
+//# sourceMappingURL=chunk-SGNRWWG3.js.map