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

package/dist/chunk-J7Z4UW45.js

@@ -0,0 +1,3418 @@
+"use client";
+import { getMediaUrl } from './chunk-XU7ALPGQ.js';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { X, Check, Circle, ChevronRight, ChevronDown, ChevronUp, Copy } 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 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 TooltipPrimitive from '@radix-ui/react-tooltip';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+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
+}) {
+  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
+    }
+  );
+}
+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?.caption;
+  const buttonStyles = theme?.interactives?.button;
+  const classes = cn(
+    // Base styles
+    // "bg-secondary",
+    // Theme typography from caption
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    buttonStyles?.border?.width,
+    buttonStyles?.border?.radius,
+    buttonStyles?.border?.style,
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant,
+      className: classes,
+      style: {
+        ...style,
+        backgroundColor: style.backgroundColor,
+        color: style.color
+      },
+      ...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 = 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 buttonStyles = theme?.interactives?.button;
+  const typographyStyles = theme?.typography?.button;
+  const isIcon = size === "icon";
+  const classes = cn(
+    // Base styles
+    "",
+    // Theme typography
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    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
+    }
+  );
+};
+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 FLUID_MIN_VIEWPORT = 360;
+var FLUID_MAX_VIEWPORT = 1280;
+var TAILWIND_TEXT_PX = {
+  "text-xs": 12,
+  "text-sm": 14,
+  "text-base": 16,
+  "text-lg": 18,
+  "text-xl": 20,
+  "text-2xl": 24,
+  "text-3xl": 30,
+  "text-4xl": 36,
+  "text-5xl": 48,
+  "text-6xl": 60,
+  "text-7xl": 72,
+  "text-8xl": 96,
+  "text-9xl": 128
+};
+var rem = (px) => `${+(px / 16).toFixed(4)}rem`;
+function fluidFontSize({ min, max }) {
+  const slope = (max - min) / (FLUID_MAX_VIEWPORT - FLUID_MIN_VIEWPORT);
+  const intercept = min - slope * FLUID_MIN_VIEWPORT;
+  return `clamp(${rem(Math.min(min, max))}, ${rem(intercept)} + ${+(slope * 100).toFixed(4)}vw, ${rem(Math.max(min, max))})`;
+}
+function themeSize(typography) {
+  if (typography?.fluid) return fluidFontSize(typography.fluid);
+  const px = TAILWIND_TEXT_PX[typography?.fontSize ?? ""];
+  return px ? rem(px) : void 0;
+}
+function createHeading(displayName, defaultTag, baseClasses, getTypography) {
+  const Heading = ({
+    children,
+    className = "",
+    theme,
+    as: Tag = defaultTag,
+    sizeClassName,
+    style,
+    ...props
+  }) => {
+    const typography = getTypography(theme);
+    const fluid = typography?.fluid;
+    const classes = cn(
+      baseClasses,
+      typography?.fontSize,
+      // A class (not an inline font-size) so `sizeClassName` still wins.
+      fluid && "text-[length:var(--pb-theme-size)]",
+      sizeClassName,
+      typography?.fontFamily,
+      typography?.fontWeight,
+      typography?.lineHeight,
+      typography?.letterSpacing,
+      typography?.textTransform,
+      typography?.textDecoration,
+      typography?.textOverflow,
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        className: classes,
+        style: { "--pb-theme-size": themeSize(typography), ...style },
+        ...props,
+        children
+      }
+    );
+  };
+  Heading.displayName = displayName;
+  return Heading;
+}
+
+// src/primitives/header4.tsx
+var Header4 = createHeading(
+  "Header4",
+  "h4",
+  "scroll-m-20 text-xl font-semibold tracking-normal",
+  (theme) => theme?.typography?.header4
+);
+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 }) });
+};
+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 ?? 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;
+function CodeSnippet({ code, prompt, theme, className }) {
+  const [copied, setCopied] = React7__default.useState(false);
+  const typography = theme?.typography?.code;
+  const card = theme?.interactives?.card;
+  React7__default.useEffect(() => {
+    if (!copied) return;
+    const timeout = setTimeout(() => setCopied(false), 2e3);
+    return () => clearTimeout(timeout);
+  }, [copied]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full min-w-0 items-start gap-3 border border-border bg-card text-card-foreground",
+        card?.border?.radius ?? "rounded-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "pre",
+          {
+            className: cn(
+              "min-w-0 flex-1 overflow-x-auto whitespace-pre px-4 py-3 text-left",
+              typography?.fontFamily ?? "font-jetbrains-mono",
+              typography?.fontSize ?? "text-sm",
+              typography?.fontWeight,
+              typography?.lineHeight ?? "leading-relaxed",
+              typography?.letterSpacing
+            ),
+            children: [
+              prompt && /* @__PURE__ */ jsx("span", { className: "mr-2 select-none text-muted-foreground", "aria-hidden": "true", children: prompt }),
+              /* @__PURE__ */ jsx("code", { children: code })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": copied ? "Copied" : "Copy to clipboard",
+            title: copied ? "Copied" : "Copy",
+            className: "m-1.5 inline-flex h-8 w-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            onClick: () => {
+              void navigator.clipboard?.writeText(code).then(() => setCopied(true));
+            },
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/primitives/display.tsx
+var Display = createHeading(
+  "Display",
+  "h1",
+  "scroll-m-20 text-balance text-5xl font-bold tracking-tight",
+  (theme) => theme?.typography?.display ?? theme?.typography?.header1
+);
+
+// src/primitives/header1.tsx
+var Header1 = createHeading(
+  "Header1",
+  "h1",
+  "scroll-m-20 text-balance text-4xl font-bold tracking-tight",
+  (theme) => theme?.typography?.header1
+);
+
+// src/primitives/header2.tsx
+var Header2 = createHeading(
+  "Header2",
+  "h2",
+  "scroll-m-20 text-balance text-3xl font-bold tracking-tight",
+  (theme) => theme?.typography?.header2
+);
+
+// src/primitives/header3.tsx
+var Header3 = createHeading(
+  "Header3",
+  "h3",
+  "scroll-m-20 text-2xl font-semibold tracking-normal",
+  (theme) => theme?.typography?.header3
+);
+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 = React7.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var Input2 = React7__default.forwardRef(
+  ({
+    className = "",
+    theme,
+    error = false,
+    /*style = {},*/
+    ...props
+  }, ref) => {
+    const inputStyles = theme?.interactives?.input;
+    const typographyStyles = theme?.typography?.input;
+    const classes = cn(
+      // Base styles
+      // "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+      // Theme typography
+      typographyStyles?.fontFamily,
+      typographyStyles?.fontSize,
+      typographyStyles?.fontWeight,
+      typographyStyles?.lineHeight,
+      typographyStyles?.letterSpacing,
+      typographyStyles?.textTransform,
+      typographyStyles?.textDecoration,
+      typographyStyles?.textOverflow,
+      // Theme interactivity
+      inputStyles?.padding?.x,
+      inputStyles?.padding?.y,
+      inputStyles?.border?.width,
+      inputStyles?.border?.style,
+      inputStyles?.border?.radius,
+      // inputStyles?.border?.color,
+      inputStyles?.shadow,
+      // Theme disabled states
+      props.disabled && inputStyles?.disabled?.opacity,
+      props.disabled && inputStyles?.disabled?.cursor,
+      props.disabled && inputStyles?.disabled?.color,
+      props.disabled && inputStyles?.disabled?.background,
+      props.disabled && inputStyles?.disabled?.border,
+      // Error state
+      error && "border-red-300 focus:border-red-500 focus:ring-red-500",
+      // User overrides
+      inputStyles?.custom,
+      className
+    );
+    return /* @__PURE__ */ jsx(Input, { ref, className: classes, ...props });
+  }
+);
+Input2.displayName = "Input";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label2 = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label2.displayName = LabelPrimitive.Root.displayName;
+var Label3 = React7__default.forwardRef(
+  ({ className = "", theme, error = false, ...props }, ref) => {
+    const typographyStyles = theme?.typography?.text2;
+    const classes = cn(
+      // Theme typography
+      typographyStyles?.fontFamily,
+      typographyStyles?.fontSize,
+      typographyStyles?.fontWeight,
+      typographyStyles?.lineHeight,
+      typographyStyles?.letterSpacing,
+      typographyStyles?.textTransform,
+      typographyStyles?.textDecoration,
+      typographyStyles?.textOverflow,
+      // Error state
+      error && "text-red-500",
+      className
+    );
+    return /* @__PURE__ */ jsx(Label2, { ref, className: classes, ...props });
+  }
+);
+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 resolveBackgroundLayer(background) {
+  const attachment = background.backgroundAttachment || "scroll";
+  if (background.type === "color") {
+    return {
+      className: "[background-color:var(--pb-bg)] dark:[background-color:var(--pb-bg-dark,var(--pb-bg))]",
+      style: {
+        "--pb-bg": background.backgroundColor,
+        "--pb-bg-dark": background.backgroundColorDark
+      }
+    };
+  }
+  if (background.type === "image") {
+    const bgUrl = getMediaUrl(background.media);
+    return {
+      style: {
+        backgroundImage: bgUrl ? `url(${bgUrl})` : void 0,
+        backgroundSize: background.backgroundSize || "cover",
+        backgroundPosition: background.backgroundPosition || "center",
+        backgroundRepeat: background.backgroundRepeat || "no-repeat",
+        backgroundAttachment: attachment,
+        maskImage: background.maskImage,
+        WebkitMaskImage: background.maskImage
+      }
+    };
+  }
+  return {
+    className: "[background-image:var(--pb-bg-image)] dark:[background-image:var(--pb-bg-image-dark,var(--pb-bg-image))]",
+    style: {
+      "--pb-bg-image": background.backgroundImage,
+      "--pb-bg-image-dark": background.backgroundImageDark,
+      backgroundSize: background.gradientBackgroundSize || "cover",
+      backgroundPosition: background.gradientBackgroundPosition || "center",
+      backgroundRepeat: background.gradientBackgroundRepeat || "no-repeat",
+      backgroundAttachment: attachment,
+      maskImage: background.gradientMaskImage,
+      WebkitMaskImage: background.gradientMaskImage
+    }
+  };
+}
+var Section = ({
+  children,
+  className = "",
+  theme,
+  background,
+  component = "section",
+  ...props
+}) => {
+  const classes = cn(
+    "bg-background text-foreground relative",
+    component === "section" && theme?.structure?.section?.dividers && "border-t border-border",
+    className
+  );
+  const backgroundLayer = background ? resolveBackgroundLayer(background) : null;
+  const isFixed = background && background.type !== "color" && background.backgroundAttachment === "fixed";
+  return /* @__PURE__ */ jsx(Fragment, { children: React7__default.createElement(
+    component,
+    {
+      // `overflow-clip` keeps a fixed-attachment layer painted
+      // only within the section bounds without creating a new
+      // scroll container (unlike overflow-hidden in some cases).
+      className: cn(classes, isFixed && "overflow-clip"),
+      ...props
+    },
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      backgroundLayer && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "pointer-events-none absolute inset-0 z-0",
+            backgroundLayer.className
+          ),
+          style: backgroundLayer.style
+        }
+      ),
+      background && background.type === "image" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 z-[1] [background-color:var(--pb-overlay)] dark:[background-color:var(--pb-overlay-dark,var(--pb-overlay))]",
+          style: {
+            "--pb-overlay": background?.overlay?.color,
+            "--pb-overlay-dark": background?.overlay?.colorDark,
+            opacity: background?.overlay?.opacity ? background.overlay.opacity / 10 : 0,
+            mixBlendMode: background?.overlay?.blendMode
+          }
+        }
+      ),
+      background && background.type === "image" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 z-[2]",
+          style: {
+            backdropFilter: background?.blur ? `blur(${background?.blur}px)` : void 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mx-auto z-[3] relative overflow-hidden",
+            `lg:${theme?.structure?.page?.width || "max-w-6xl"}`,
+            theme?.structure?.section?.padding?.x || "px-4",
+            theme?.structure?.section?.padding?.y || "py-4"
+          ),
+          children
+        }
+      )
+    ] })
+  ) });
+};
+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, {})
+        ]
+      }
+    ) });
+  }
+);
+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
+    }
+  )
+);
+Separator3.displayName = SeparatorPrimitive.Root.displayName;
+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 = ({
+  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 = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+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 });
+});
+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 = {
+  colors: {
+    light: {
+      background: "#f7f7f5",
+      foreground: "#18181b",
+      card: "#ffffff",
+      cardForeground: "#18181b",
+      popover: "#ffffff",
+      popoverForeground: "#18181b",
+      primary: "#18181b",
+      primaryForeground: "#fafafa",
+      secondary: "#eeeee8",
+      secondaryForeground: "#18181b",
+      muted: "#f0efe9",
+      mutedForeground: "#52525b",
+      accent: "#eeeee8",
+      accentForeground: "#18181b",
+      destructive: "#e11d48",
+      border: "#e4e4de",
+      input: "#e4e4de",
+      ring: "#18181b",
+      chart1: "#18181b",
+      chart2: "#71717a",
+      chart3: "#a1a1aa",
+      chart4: "#d4d4d8",
+      chart5: "#e4e4e7",
+      sidebar: "#f7f7f5",
+      sidebarForeground: "#18181b",
+      sidebarPrimary: "#18181b",
+      sidebarPrimaryForeground: "#fafafa",
+      sidebarAccent: "#eeeee8",
+      sidebarAccentForeground: "#18181b",
+      sidebarBorder: "#e4e4de",
+      sidebarRing: "#18181b",
+      shadow2xs: "0 1px 2px 0 rgb(24 24 27 / 0.04)",
+      shadowXs: "0 1px 2px 0 rgb(24 24 27 / 0.05)",
+      shadowSm: "0 1px 2px 0 rgb(24 24 27 / 0.05), 0 1px 3px -1px rgb(24 24 27 / 0.08)",
+      shadowMd: "0 2px 4px -1px rgb(24 24 27 / 0.06), 0 4px 8px -2px rgb(24 24 27 / 0.08)",
+      shadowLg: "0 8px 16px -4px rgb(24 24 27 / 0.08), 0 4px 6px -2px rgb(24 24 27 / 0.04)",
+      shadowXl: "0 16px 32px -8px rgb(24 24 27 / 0.12)",
+      shadow2xl: "0 24px 48px -12px rgb(24 24 27 / 0.18)"
+    },
+    dark: {
+      background: "#09090b",
+      foreground: "#fafafa",
+      card: "#141416",
+      cardForeground: "#fafafa",
+      popover: "#18181b",
+      popoverForeground: "#fafafa",
+      primary: "#fafafa",
+      primaryForeground: "#09090b",
+      secondary: "#27272a",
+      secondaryForeground: "#fafafa",
+      muted: "#1c1c1f",
+      mutedForeground: "#a1a1aa",
+      accent: "#27272a",
+      accentForeground: "#fafafa",
+      destructive: "#fb7185",
+      border: "#27272a",
+      input: "#27272a",
+      ring: "#d4d4d8",
+      chart1: "#fafafa",
+      chart2: "#a1a1aa",
+      chart3: "#71717a",
+      chart4: "#52525b",
+      chart5: "#3f3f46",
+      sidebar: "#141416",
+      sidebarForeground: "#fafafa",
+      sidebarPrimary: "#fafafa",
+      sidebarPrimaryForeground: "#09090b",
+      sidebarAccent: "#27272a",
+      sidebarAccentForeground: "#fafafa",
+      sidebarBorder: "#27272a",
+      sidebarRing: "#d4d4d8",
+      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.24)",
+      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.28)",
+      shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.32), 0 1px 3px -1px rgb(0 0 0 / 0.4)",
+      shadowMd: "0 4px 8px -2px rgb(0 0 0 / 0.4), 0 2px 4px -1px rgb(0 0 0 / 0.28)",
+      shadowLg: "0 12px 24px -6px rgb(0 0 0 / 0.5)",
+      shadowXl: "0 20px 40px -8px rgb(0 0 0 / 0.55)",
+      shadow2xl: "0 32px 64px -12px rgb(0 0 0 / 0.65)"
+    }
+  },
+  typography: {
+    preheader: {
+      fontFamily: "font-inter",
+      fontSize: "text-xs",
+      fontWeight: "font-medium",
+      lineHeight: "leading-normal",
+      letterSpacing: "tracking-widest",
+      textTransform: "uppercase"
+    },
+    display: {
+      fontFamily: "font-inter",
+      fontSize: "text-6xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 34, max: 56 }
+    },
+    header1: {
+      fontFamily: "font-inter",
+      fontSize: "text-5xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 28, max: 48 }
+    },
+    header2: {
+      fontFamily: "font-inter",
+      fontSize: "text-4xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight",
+      fluid: { min: 24, max: 36 }
+    },
+    header3: {
+      fontFamily: "font-inter",
+      fontSize: "text-2xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
+    },
+    header4: {
+      fontFamily: "font-inter",
+      fontSize: "text-xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
+    },
+    subheader1: {
+      fontFamily: "font-inter",
+      fontSize: "text-xl",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed",
+      letterSpacing: "tracking-normal"
+    },
+    subheader2: {
+      fontFamily: "font-inter",
+      fontSize: "text-lg",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed",
+      letterSpacing: "tracking-normal"
+    },
+    text1: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed",
+      letterSpacing: "tracking-normal"
+    },
+    text2: {
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed",
+      letterSpacing: "tracking-normal"
+    },
+    caption: {
+      fontFamily: "font-inter",
+      fontSize: "text-xs",
+      fontWeight: "font-medium",
+      lineHeight: "leading-relaxed",
+      letterSpacing: "tracking-wide"
+    },
+    link: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-medium",
+      lineHeight: "leading-relaxed",
+      letterSpacing: "tracking-normal",
+      textDecoration: "no-underline"
+    },
+    button: {
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-medium",
+      lineHeight: "leading-normal",
+      letterSpacing: "tracking-wide"
+    },
+    input: {
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-normal",
+      lineHeight: "leading-normal",
+      letterSpacing: "tracking-normal"
+    }
+  },
+  highlight: "marker",
+  interactives: {
+    button: {
+      padding: {
+        x: "px-5",
+        y: "py-3"
+      },
+      border: {
+        width: "border-0",
+        radius: "rounded-xl"
+      },
+      shadow: "shadow-xs",
+      disabled: {
+        opacity: "opacity-50",
+        cursor: "cursor-not-allowed"
+      },
+      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: {
+        color: "gray-400",
+        cursor: "cursor-not-allowed"
+      }
+    },
+    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: {
+      borderRadius: "rounded-xl",
+      padding: {
+        x: "px-4",
+        y: "py-3"
+      },
+      border: {
+        width: "border",
+        style: "border-solid",
+        radius: "rounded-xl"
+      },
+      shadow: "shadow-none",
+      custom: "transition-shadow duration-150 focus-visible:shadow-sm",
+      disabled: {
+        opacity: "opacity-50",
+        cursor: "cursor-not-allowed"
+      }
+    }
+  },
+  structure: {
+    page: {
+      width: "max-w-6xl"
+    },
+    section: {
+      padding: {
+        x: "px-6",
+        y: "py-20"
+      }
+    }
+  }
+};
+var classic = {
+  id: "classic",
+  name: "Classic",
+  theme: themeStyles
+};
+
+// src/primitives/themes/editorial.ts
+var themeStyles2 = {
+  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"
+    },
+    display: {
+      fontFamily: "font-playfair-display",
+      fontSize: "text-7xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 34, max: 60 }
+    },
+    header1: {
+      fontFamily: "font-playfair-display",
+      fontSize: "text-6xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 30, max: 52 }
+    },
+    header2: {
+      fontFamily: "font-playfair-display",
+      fontSize: "text-4xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 24, max: 36 }
+    },
+    header3: {
+      fontFamily: "font-source-serif-4",
+      fontSize: "text-3xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
+    },
+    header4: {
+      fontFamily: "font-source-serif-4",
+      fontSize: "text-2xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
+    },
+    subheader1: {
+      fontFamily: "font-source-serif-4",
+      fontSize: "text-xl",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    subheader2: {
+      fontFamily: "font-work-sans",
+      fontSize: "text-lg",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    text1: {
+      fontFamily: "font-source-serif-4",
+      fontSize: "text-lg",
+      fontWeight: "font-normal",
+      lineHeight: "leading-loose"
+    },
+    text2: {
+      fontFamily: "font-work-sans",
+      fontSize: "text-sm",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    link: {
+      fontFamily: "font-work-sans",
+      fontSize: "text-base",
+      fontWeight: "font-medium"
+    },
+    button: {
+      fontFamily: "font-work-sans",
+      fontSize: "text-sm",
+      fontWeight: "font-medium",
+      letterSpacing: "tracking-wide"
+    },
+    input: {
+      fontFamily: "font-work-sans",
+      fontSize: "text-base",
+      fontWeight: "font-normal"
+    },
+    caption: {
+      fontFamily: "font-work-sans",
+      fontSize: "text-xs",
+      fontWeight: "font-medium",
+      lineHeight: "leading-normal",
+      letterSpacing: "tracking-wide"
+    }
+  },
+  interactives: {
+    button: {
+      padding: { x: "px-6", y: "py-3" },
+      border: {
+        width: "border-0",
+        radius: "rounded-full"
+      },
+      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 decoration-1 hover:underline"
+    },
+    card: {
+      padding: { x: "px-8", y: "py-8" },
+      border: {
+        width: "border-0",
+        radius: "rounded-none"
+      },
+      shadow: "shadow-none",
+      custom: ""
+    },
+    input: {
+      padding: { x: "px-4", y: "py-3" },
+      border: {
+        width: "border",
+        radius: "rounded-none",
+        style: "border-solid"
+      },
+      shadow: "shadow-none",
+      custom: "",
+      disabled: {
+        opacity: "opacity-50",
+        cursor: "cursor-not-allowed"
+      }
+    }
+  },
+  structure: {
+    page: { width: "max-w-5xl" },
+    section: {
+      padding: { x: "px-6", y: "py-24" }
+    }
+  }
+};
+var editorial = {
+  id: "editorial",
+  name: "Editorial",
+  theme: themeStyles2
+};
+
+// src/primitives/themes/midnight.ts
+var themeStyles3 = {
+  colors: {
+    light: {
+      background: "#f4f5f7",
+      foreground: "#1c1f26",
+      card: "#ffffff",
+      cardForeground: "#1c1f26",
+      popover: "#ffffff",
+      popoverForeground: "#1c1f26",
+      primary: "#61afef",
+      primaryForeground: "#0b0d11",
+      secondary: "#e8eaf0",
+      secondaryForeground: "#1c1f26",
+      muted: "#eceef2",
+      mutedForeground: "#5b6170",
+      accent: "#d7f1f4",
+      accentForeground: "#164e63",
+      border: "#d7dbe3",
+      destructive: "#e06c75",
+      input: "#d7dbe3",
+      ring: "#61afef",
+      chart1: "#61afef",
+      chart2: "#818cf8",
+      chart3: "#56b6c2",
+      chart4: "#98c379",
+      chart5: "#e5c07b",
+      sidebar: "#ffffff",
+      sidebarForeground: "#1c1f26",
+      sidebarPrimary: "#61afef",
+      sidebarPrimaryForeground: "#0b0d11",
+      sidebarAccent: "#e8eaf0",
+      sidebarAccentForeground: "#1c1f26",
+      sidebarBorder: "#d7dbe3",
+      sidebarRing: "#61afef",
+      shadow2xs: "0 1px 2px 0 rgb(28 31 38 / 0.05)",
+      shadowXs: "0 1px 2px 0 rgb(28 31 38 / 0.06)",
+      shadowSm: "0 1px 2px 0 rgb(97 175 239 / 0.12), 0 1px 3px -1px rgb(28 31 38 / 0.08)",
+      shadowMd: "0 8px 20px -6px rgb(28 31 38 / 0.12)",
+      shadowLg: "0 16px 32px -8px rgb(28 31 38 / 0.16)",
+      shadowXl: "0 24px 48px -12px rgb(28 31 38 / 0.2)",
+      shadow2xl: "0 32px 64px -16px rgb(28 31 38 / 0.24)"
+    },
+    dark: {
+      background: "#0c0e12",
+      foreground: "#e6e8ee",
+      card: "#14171e",
+      cardForeground: "#e6e8ee",
+      popover: "#14171e",
+      popoverForeground: "#e6e8ee",
+      primary: "#61afef",
+      primaryForeground: "#0b0d11",
+      secondary: "#1d2230",
+      secondaryForeground: "#e6e8ee",
+      muted: "#171b24",
+      mutedForeground: "#9aa3b2",
+      accent: "#14363c",
+      accentForeground: "#a5f3fc",
+      border: "#262b38",
+      destructive: "#e06c75",
+      input: "#262b38",
+      ring: "#61afef",
+      chart1: "#61afef",
+      chart2: "#818cf8",
+      chart3: "#56b6c2",
+      chart4: "#98c379",
+      chart5: "#e5c07b",
+      sidebar: "#14171e",
+      sidebarForeground: "#e6e8ee",
+      sidebarPrimary: "#61afef",
+      sidebarPrimaryForeground: "#0b0d11",
+      sidebarAccent: "#1d2230",
+      sidebarAccentForeground: "#e6e8ee",
+      sidebarBorder: "#262b38",
+      sidebarRing: "#61afef",
+      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.35)",
+      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.4)",
+      shadowSm: "0 2px 6px 0 rgb(0 0 0 / 0.45)",
+      shadowMd: "0 10px 24px -6px rgb(0 0 0 / 0.55)",
+      shadowLg: "0 18px 36px -8px rgb(0 0 0 / 0.6)",
+      shadowXl: "0 28px 52px -12px rgb(0 0 0 / 0.65)",
+      shadow2xl: "0 36px 72px -16px rgb(0 0 0 / 0.75)"
+    }
+  },
+  typography: {
+    preheader: {
+      fontFamily: "font-roboto",
+      fontSize: "text-xs",
+      fontWeight: "font-medium",
+      lineHeight: "leading-normal",
+      letterSpacing: "tracking-widest",
+      textTransform: "uppercase"
+    },
+    display: {
+      fontFamily: "font-roboto",
+      fontSize: "text-6xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 34, max: 56 }
+    },
+    header1: {
+      fontFamily: "font-roboto",
+      fontSize: "text-5xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 28, max: 48 }
+    },
+    header2: {
+      fontFamily: "font-roboto",
+      fontSize: "text-4xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight",
+      fluid: { min: 24, max: 36 }
+    },
+    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"
+      }
+    },
+    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 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/neobrutalism.ts
+var themeStyles4 = {
+  colors: {
+    light: {
+      background: "#f3fff9",
+      foreground: "#050505",
+      card: "#ffffff",
+      cardForeground: "#050505",
+      popover: "#ffffff",
+      popoverForeground: "#050505",
+      primary: "#ffe600",
+      primaryForeground: "#050505",
+      secondary: "#7df9ff",
+      secondaryForeground: "#050505",
+      muted: "#e7fff4",
+      mutedForeground: "#3f3f46",
+      accent: "#2ff2f2",
+      accentForeground: "#050505",
+      border: "#050505",
+      destructive: "#ff4911",
+      input: "#050505",
+      ring: "#050505",
+      chart1: "#ffe600",
+      chart2: "#7df9ff",
+      chart3: "#2ff2f2",
+      chart4: "#ff4911",
+      chart5: "#6fffd7",
+      sidebar: "#ffffff",
+      sidebarForeground: "#050505",
+      sidebarPrimary: "#ffe600",
+      sidebarPrimaryForeground: "#050505",
+      sidebarAccent: "#2ff2f2",
+      sidebarAccentForeground: "#050505",
+      sidebarBorder: "#050505",
+      sidebarRing: "#050505",
+      shadow2xs: "2px 2px 0 0 #050505",
+      shadowXs: "3px 3px 0 0 #050505",
+      shadowSm: "4px 4px 0 0 #050505",
+      shadowMd: "6px 6px 0 0 #050505",
+      shadowLg: "8px 8px 0 0 #050505",
+      shadowXl: "10px 10px 0 0 #050505",
+      shadow2xl: "14px 14px 0 0 #050505"
+    },
+    dark: {
+      background: "#050505",
+      foreground: "#6fffd7",
+      card: "#0a0a0a",
+      cardForeground: "#6fffd7",
+      popover: "#0a0a0a",
+      popoverForeground: "#6fffd7",
+      primary: "#ffe600",
+      primaryForeground: "#050505",
+      secondary: "#7df9ff",
+      secondaryForeground: "#050505",
+      muted: "#141414",
+      mutedForeground: "#a1a1aa",
+      accent: "#2ff2f2",
+      accentForeground: "#050505",
+      border: "#6fffd7",
+      destructive: "#ff4911",
+      input: "#6fffd7",
+      ring: "#6fffd7",
+      chart1: "#ffe600",
+      chart2: "#7df9ff",
+      chart3: "#2ff2f2",
+      chart4: "#ff4911",
+      chart5: "#6fffd7",
+      sidebar: "#050505",
+      sidebarForeground: "#6fffd7",
+      sidebarPrimary: "#ffe600",
+      sidebarPrimaryForeground: "#050505",
+      sidebarAccent: "#2ff2f2",
+      sidebarAccentForeground: "#050505",
+      sidebarBorder: "#6fffd7",
+      sidebarRing: "#6fffd7",
+      shadow2xs: "2px 2px 0 0 #6fffd7",
+      shadowXs: "3px 3px 0 0 #6fffd7",
+      shadowSm: "4px 4px 0 0 #6fffd7",
+      shadowMd: "6px 6px 0 0 #6fffd7",
+      shadowLg: "8px 8px 0 0 #6fffd7",
+      shadowXl: "10px 10px 0 0 #6fffd7",
+      shadow2xl: "14px 14px 0 0 #6fffd7"
+    }
+  },
+  typography: {
+    preheader: {
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-bold",
+      letterSpacing: "tracking-widest",
+      textTransform: "uppercase"
+    },
+    display: {
+      fontFamily: "font-inter",
+      fontSize: "text-6xl",
+      fontWeight: "font-black",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 34, max: 56 }
+    },
+    header1: {
+      fontFamily: "font-inter",
+      fontSize: "text-5xl",
+      fontWeight: "font-black",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 28, max: 48 }
+    },
+    header2: {
+      fontFamily: "font-inter",
+      fontSize: "text-4xl",
+      fontWeight: "font-extrabold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight",
+      fluid: { min: 24, max: 36 }
+    },
+    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"
+    }
+  },
+  highlight: "marker",
+  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"
+    },
+    display: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-7xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 34, max: 60 }
+    },
+    header1: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-6xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter",
+      fluid: { min: 30, max: 52 }
+    },
+    header2: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-4xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight",
+      fluid: { min: 24, max: 36 }
+    },
+    header3: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-2xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
+    },
+    header4: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-snug"
+    },
+    subheader1: {
+      fontFamily: "font-source-sans-3",
+      fontSize: "text-xl",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    subheader2: {
+      fontFamily: "font-source-sans-3",
+      fontSize: "text-lg",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    text1: {
+      fontFamily: "font-source-sans-3",
+      fontSize: "text-base",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    text2: {
+      fontFamily: "font-source-sans-3",
+      fontSize: "text-sm",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    link: {
+      fontFamily: "font-source-sans-3",
+      fontSize: "text-base",
+      fontWeight: "font-medium"
+    },
+    button: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-sm",
+      fontWeight: "font-medium",
+      letterSpacing: "tracking-wide"
+    },
+    input: {
+      fontFamily: "font-source-sans-3",
+      fontSize: "text-base",
+      fontWeight: "font-normal"
+    },
+    caption: {
+      fontFamily: "font-source-sans-3",
+      fontSize: "text-xs",
+      fontWeight: "font-medium",
+      lineHeight: "leading-normal",
+      letterSpacing: "tracking-wide"
+    }
+  },
+  interactives: {
+    button: {
+      padding: { x: "px-6", y: "py-3" },
+      border: {
+        width: "border-0",
+        radius: "rounded-2xl"
+      },
+      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-offset-4 transition-colors duration-150 hover:underline"
+    },
+    card: {
+      padding: { x: "px-8", y: "py-8" },
+      border: {
+        width: "border",
+        radius: "rounded-3xl",
+        style: "border-solid"
+      },
+      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",
+        style: "border-solid",
+        radius: "rounded-2xl"
+      },
+      shadow: "shadow-none",
+      custom: "transition-shadow duration-150",
+      disabled: {
+        cursor: "cursor-not-allowed",
+        opacity: "opacity-50"
+      }
+    }
+  },
+  structure: {
+    page: { width: "max-w-6xl" },
+    section: {
+      padding: { x: "px-6", y: "py-24" }
+    }
+  }
+};
+var studio = {
+  id: "studio",
+  name: "Studio",
+  theme: themeStyles5
+};
+
+// src/primitives/themes/terminal.ts
+var themeStyles6 = {
+  colors: {
+    light: {
+      background: "#ffffff",
+      foreground: "#111111",
+      card: "#ffffff",
+      cardForeground: "#111111",
+      popover: "#ffffff",
+      popoverForeground: "#111111",
+      primary: "#111111",
+      primaryForeground: "#ffffff",
+      secondary: "#ffffff",
+      secondaryForeground: "#111111",
+      muted: "#f5f5f5",
+      mutedForeground: "#5c5c66",
+      accent: "#f0f0f2",
+      accentForeground: "#111111",
+      border: "#dcdce0",
+      destructive: "#d92d20",
+      input: "#111111",
+      ring: "#6d28d9",
+      chart1: "#111111",
+      chart2: "#6d28d9",
+      chart3: "#2f4ad8",
+      chart4: "#5c5c66",
+      chart5: "#a1a1aa",
+      sidebar: "#ffffff",
+      sidebarForeground: "#111111",
+      sidebarPrimary: "#111111",
+      sidebarPrimaryForeground: "#ffffff",
+      sidebarAccent: "#f0f0f2",
+      sidebarAccentForeground: "#111111",
+      sidebarBorder: "#dcdce0",
+      sidebarRing: "#6d28d9",
+      shadow2xs: "none",
+      shadowXs: "none",
+      shadowSm: "none",
+      shadowMd: "none",
+      shadowLg: "none",
+      shadowXl: "none",
+      shadow2xl: "none"
+    },
+    dark: {
+      background: "#17171a",
+      foreground: "#eae8ee",
+      card: "#1c1c20",
+      cardForeground: "#eae8ee",
+      popover: "#1c1c20",
+      popoverForeground: "#eae8ee",
+      primary: "#cba6f7",
+      primaryForeground: "#17171a",
+      secondary: "#17171a",
+      secondaryForeground: "#eae8ee",
+      muted: "#222226",
+      mutedForeground: "#9b99a3",
+      accent: "#26262b",
+      accentForeground: "#eae8ee",
+      border: "#2e2e34",
+      destructive: "#f38ba8",
+      input: "#3a3a41",
+      ring: "#cba6f7",
+      chart1: "#cba6f7",
+      chart2: "#a6e3a1",
+      chart3: "#89b4fa",
+      chart4: "#f9e2af",
+      chart5: "#f38ba8",
+      sidebar: "#17171a",
+      sidebarForeground: "#eae8ee",
+      sidebarPrimary: "#cba6f7",
+      sidebarPrimaryForeground: "#17171a",
+      sidebarAccent: "#26262b",
+      sidebarAccentForeground: "#eae8ee",
+      sidebarBorder: "#2e2e34",
+      sidebarRing: "#cba6f7",
+      shadow2xs: "none",
+      shadowXs: "none",
+      shadowSm: "none",
+      shadowMd: "none",
+      shadowLg: "none",
+      shadowXl: "none",
+      shadow2xl: "none"
+    }
+  },
+  typography: {
+    preheader: {
+      fontFamily: "font-jetbrains-mono",
+      fontSize: "text-xs",
+      fontWeight: "font-normal",
+      letterSpacing: "tracking-widest",
+      textTransform: "uppercase"
+    },
+    display: {
+      fontFamily: "font-archivo",
+      fontSize: "text-7xl",
+      fontWeight: "font-black",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight",
+      fluid: { min: 36, max: 64 }
+    },
+    header1: {
+      fontFamily: "font-archivo",
+      fontSize: "text-5xl",
+      fontWeight: "font-extrabold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight",
+      fluid: { min: 28, max: 44 }
+    },
+    header2: {
+      fontFamily: "font-archivo",
+      fontSize: "text-3xl",
+      fontWeight: "font-extrabold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight",
+      fluid: { min: 22, max: 32 }
+    },
+    header3: {
+      fontFamily: "font-archivo",
+      fontSize: "text-xl",
+      fontWeight: "font-bold",
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
+    },
+    header4: {
+      fontFamily: "font-archivo",
+      fontSize: "text-lg",
+      fontWeight: "font-bold",
+      lineHeight: "leading-snug",
+      letterSpacing: "tracking-tight"
+    },
+    subheader1: {
+      fontFamily: "font-inter",
+      fontSize: "text-lg",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    subheader2: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    text1: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    text2: {
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    link: {
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-medium"
+    },
+    button: {
+      fontFamily: "font-jetbrains-mono",
+      fontSize: "text-xs",
+      fontWeight: "font-medium",
+      letterSpacing: "tracking-wider",
+      textTransform: "uppercase"
+    },
+    input: {
+      fontFamily: "font-jetbrains-mono",
+      fontSize: "text-sm",
+      fontWeight: "font-normal"
+    },
+    code: {
+      fontFamily: "font-jetbrains-mono",
+      fontSize: "text-sm",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    caption: {
+      fontFamily: "font-jetbrains-mono",
+      fontSize: "text-xs",
+      fontWeight: "font-normal",
+      letterSpacing: "tracking-wider",
+      textTransform: "uppercase"
+    }
+  },
+  highlight: "marker",
+  interactives: {
+    button: {
+      padding: { x: "px-5", y: "py-3" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none",
+      custom: "transition-colors",
+      disabled: { opacity: "opacity-50", cursor: "cursor-not-allowed" }
+    },
+    menu: {
+      padding: { x: "px-1", y: "py-1" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      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", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none"
+    },
+    popover: {
+      padding: { x: "px-4", y: "py-4" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none"
+    },
+    tooltip: {
+      padding: { x: "px-2", y: "py-1" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none"
+    },
+    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-none", style: "border-solid" },
+      shadow: "shadow-none",
+      custom: ""
+    },
+    input: {
+      padding: { x: "px-4", y: "py-3" },
+      border: { width: "border", radius: "rounded-none", style: "border-solid" },
+      shadow: "shadow-none",
+      custom: "",
+      disabled: { cursor: "cursor-not-allowed", opacity: "opacity-50" }
+    }
+  },
+  structure: {
+    page: { width: "max-w-6xl" },
+    section: {
+      dividers: true,
+      padding: { x: "px-6", y: "py-20" }
+    }
+  }
+};
+var terminal = {
+  id: "terminal",
+  name: "Terminal",
+  theme: themeStyles6
+};
+
+// src/primitives/themes/index.ts
+var themes = [
+  classic,
+  studio,
+  midnight,
+  editorial,
+  neobrutalism,
+  terminal
+];
+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,
+      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
+    }
+  ) });
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge2 as Badge, Button, Button2, Caption, Checkbox, CodeSnippet, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Display, 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, TAILWIND_TEXT_PX, Text1, Text2, Textarea, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, cn, createHeading, fluidFontSize, themes };
+//# sourceMappingURL=chunk-J7Z4UW45.js.map
+//# sourceMappingURL=chunk-J7Z4UW45.js.map