@frontlit/page-builder 0.1.0-alpha.1

package/dist/chunk-RBJBODQP.js

@@ -0,0 +1,2011 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React10 from 'react';
+import React10__default, { useRef, useState, useLayoutEffect } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+// src/primitives/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+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 Header1 = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.header1;
+  const classes = cn(
+    // Base styles
+    "scroll-m-20 text-4xl font-bold tracking-tight",
+    // Theme overrides
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return /* @__PURE__ */ jsx("h1", { className: classes, ...props, children });
+};
+var Header2 = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.header2;
+  const classes = cn(
+    // Base styles
+    "scroll-m-20 text-3xl font-bold tracking-tight",
+    // Theme overrides
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return /* @__PURE__ */ jsx("h2", { className: classes, ...props, children });
+};
+var Header3 = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.header3;
+  const classes = cn(
+    // Base styles
+    "scroll-m-20 text-2xl font-semibold tracking-normal",
+    // Theme overrides
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return /* @__PURE__ */ jsx("h3", { className: classes, ...props, children });
+};
+var Header4 = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.header4;
+  const classes = cn(
+    // Base styles
+    "scroll-m-20 text-xl font-semibold tracking-normal",
+    // Theme overrides
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return /* @__PURE__ */ jsx("h4", { className: classes, ...props, children });
+};
+var Subheader1 = ({ children, className = "", theme, component = "h5", ...props }) => {
+  const typographyStyles = theme?.typography?.subheader1;
+  const classes = cn(
+    typographyStyles?.fontFamily || "font-sans",
+    typographyStyles?.fontSize || "text-lg",
+    typographyStyles?.fontWeight || "font-medium",
+    typographyStyles?.lineHeight || "leading-relaxed",
+    typographyStyles?.letterSpacing || "tracking-normal",
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return component === "h5" ? /* @__PURE__ */ jsx("h5", { className: classes, ...props, children }) : /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
+};
+var Subheader2 = ({
+  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 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 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 buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React10.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Button2 = ({
+  variant = "default",
+  size = "default",
+  disabled = false,
+  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 Input = React10.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 = React10__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 Textarea = React10__default.forwardRef(
+  ({ className = "", theme, error = false, ...props }, ref) => {
+    const inputStyles = theme?.interactives?.input;
+    const typographyStyles = theme?.typography?.input;
+    const classes = cn(
+      "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50",
+      typographyStyles?.fontFamily,
+      typographyStyles?.fontSize,
+      typographyStyles?.fontWeight,
+      typographyStyles?.lineHeight,
+      typographyStyles?.letterSpacing,
+      inputStyles?.padding?.x,
+      inputStyles?.padding?.y,
+      inputStyles?.border?.width,
+      inputStyles?.border?.style,
+      inputStyles?.border?.radius,
+      inputStyles?.shadow,
+      props.disabled && inputStyles?.disabled?.opacity,
+      props.disabled && inputStyles?.disabled?.cursor,
+      error && "border-red-300 focus:border-red-500 focus:ring-red-500",
+      inputStyles?.custom,
+      className
+    );
+    return /* @__PURE__ */ jsx("textarea", { ref, className: classes, ...props });
+  }
+);
+Textarea.displayName = "Textarea";
+var Caption = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.caption;
+  const classes = cn(
+    // Base styles
+    "text-xs leading-7 text-muted-foreground",
+    // Theme overrides
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
+};
+var PageCard = ({
+  isLink,
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const cardStyles = theme?.interactives?.card;
+  const classes = cn(
+    // Base styles
+    "bg-card text-card-foreground",
+    // Theme interactivity
+    cardStyles?.border?.width,
+    cardStyles?.border?.radius,
+    cardStyles?.border?.style,
+    cardStyles?.shadow,
+    isLink ? "cursor-pointer" : "",
+    // User overrides
+    cardStyles?.custom,
+    className
+  );
+  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
+};
+var PageCardImage = ({
+  src,
+  alt,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const classes = cn(
+    // Base styles
+    "w-full",
+    className
+  );
+  return /* @__PURE__ */ jsx("img", { src, alt, className: classes, ...props });
+};
+var PageCardContent = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const cardStyles = theme?.interactives?.card;
+  const classes = cn(
+    // Base styles
+    "p-4",
+    // Theme interactivity
+    cardStyles?.padding?.x,
+    cardStyles?.padding?.y,
+    className
+  );
+  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
+};
+var PageCardHeader = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const classes = cn(
+    // Base styles
+    "pb-4",
+    className
+  );
+  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children: /* @__PURE__ */ jsx(Header4, { theme, children }) });
+};
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+var Label2 = React10__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(Label, { ref, className: classes, ...props });
+  }
+);
+Label2.displayName = "Label";
+function resolveBackgroundLayerStyle(background, nextTheme) {
+  const isDark = nextTheme === "dark";
+  const attachment = background.backgroundAttachment || "scroll";
+  if (background.type === "color") {
+    return {
+      backgroundColor: isDark ? background.backgroundColorDark || background.backgroundColor : background.backgroundColor
+    };
+  }
+  if (background.type === "image") {
+    return {
+      backgroundImage: background.media?.file ? `url(${background.media.file})` : void 0,
+      backgroundSize: background.backgroundSize || "cover",
+      backgroundPosition: background.backgroundPosition || "center",
+      backgroundRepeat: background.backgroundRepeat || "no-repeat",
+      backgroundAttachment: attachment,
+      maskImage: background.maskImage,
+      WebkitMaskImage: background.maskImage
+    };
+  }
+  return {
+    backgroundImage: isDark ? background.backgroundImageDark || background.backgroundImage : background.backgroundImage,
+    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,
+  nextTheme,
+  component = "section",
+  ...props
+}) => {
+  const classes = cn("bg-background text-foreground relative", className);
+  const isFixed = background && background.type !== "color" && background.backgroundAttachment === "fixed";
+  return /* @__PURE__ */ jsx(Fragment, { children: React10__default.createElement(
+    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: [
+      background && /* @__PURE__ */ jsx(
+        "div",
+        {
+          suppressHydrationWarning: true,
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 z-0",
+          style: resolveBackgroundLayerStyle(
+            background,
+            nextTheme
+          )
+        }
+      ),
+      background && background.type === "image" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 z-[1]",
+          style: {
+            backgroundColor: nextTheme === "dark" ? background?.overlay?.colorDark || background?.overlay?.color : background?.overlay?.color,
+            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 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 Switch = React10.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 = React10__default.forwardRef(({ className = "", theme, ...props }, ref) => {
+  const classes = cn(
+    // Base styles
+    "",
+    // User overrides
+    className
+  );
+  return /* @__PURE__ */ jsx(Switch, { ref, className: classes, ...props });
+});
+
+// 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"
+    },
+    header1: {
+      fontFamily: "font-inter",
+      fontSize: "text-5xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter"
+    },
+    header2: {
+      fontFamily: "font-inter",
+      fontSize: "text-4xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight"
+    },
+    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"
+    }
+  },
+  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"
+    },
+    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/studio.ts
+var themeStyles2 = {
+  colors: {
+    light: {
+      background: "#f4f1ea",
+      foreground: "#1c1917",
+      card: "#fffcf7",
+      cardForeground: "#1c1917",
+      popover: "#fffcf7",
+      popoverForeground: "#1c1917",
+      primary: "#0f766e",
+      primaryForeground: "#f4fffc",
+      secondary: "#ebe4d6",
+      secondaryForeground: "#1c1917",
+      muted: "#ebe6dc",
+      mutedForeground: "#57534e",
+      accent: "#d9f3ee",
+      accentForeground: "#115e59",
+      destructive: "#dc2626",
+      border: "#e0d8cc",
+      input: "#e0d8cc",
+      ring: "#0f766e",
+      chart1: "#0f766e",
+      chart2: "#0d9488",
+      chart3: "#14b8a6",
+      chart4: "#5eead4",
+      chart5: "#ccfbf1",
+      sidebar: "#fffcf7",
+      sidebarForeground: "#1c1917",
+      sidebarPrimary: "#0f766e",
+      sidebarPrimaryForeground: "#f4fffc",
+      sidebarAccent: "#ebe4d6",
+      sidebarAccentForeground: "#1c1917",
+      sidebarBorder: "#e0d8cc",
+      sidebarRing: "#0f766e",
+      shadow2xs: "0 1px 2px 0 rgb(28 25 23 / 0.04)",
+      shadowXs: "0 1px 2px 0 rgb(28 25 23 / 0.05)",
+      shadowSm: "0 1px 2px 0 rgb(15 118 110 / 0.08), 0 1px 3px -1px rgb(28 25 23 / 0.08)",
+      shadowMd: "0 6px 16px -4px rgb(28 25 23 / 0.1), 0 2px 6px -2px rgb(15 118 110 / 0.08)",
+      shadowLg: "0 16px 32px -8px rgb(28 25 23 / 0.12), 0 6px 12px -4px rgb(15 118 110 / 0.08)",
+      shadowXl: "0 24px 48px -12px rgb(28 25 23 / 0.16)",
+      shadow2xl: "0 32px 64px -16px rgb(28 25 23 / 0.22)"
+    },
+    dark: {
+      background: "#12100d",
+      foreground: "#f4efe6",
+      card: "#1b1814",
+      cardForeground: "#f4efe6",
+      popover: "#1b1814",
+      popoverForeground: "#f4efe6",
+      primary: "#2dd4bf",
+      primaryForeground: "#042f2e",
+      secondary: "#2a241c",
+      secondaryForeground: "#f4efe6",
+      muted: "#221e19",
+      mutedForeground: "#a8a29e",
+      accent: "#134e4a",
+      accentForeground: "#ccfbf1",
+      destructive: "#f87171",
+      border: "#2e2922",
+      input: "#2e2922",
+      ring: "#2dd4bf",
+      chart1: "#2dd4bf",
+      chart2: "#5eead4",
+      chart3: "#99f6e4",
+      chart4: "#14b8a6",
+      chart5: "#0f766e",
+      sidebar: "#1b1814",
+      sidebarForeground: "#f4efe6",
+      sidebarPrimary: "#2dd4bf",
+      sidebarPrimaryForeground: "#042f2e",
+      sidebarAccent: "#2a241c",
+      sidebarAccentForeground: "#f4efe6",
+      sidebarBorder: "#2e2922",
+      sidebarRing: "#2dd4bf",
+      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.28)",
+      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.32)",
+      shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.36), 0 1px 3px -1px rgb(0 0 0 / 0.4)",
+      shadowMd: "0 8px 20px -6px rgb(0 0 0 / 0.48)",
+      shadowLg: "0 16px 32px -8px rgb(0 0 0 / 0.52)",
+      shadowXl: "0 24px 48px -10px rgb(0 0 0 / 0.56)",
+      shadow2xl: "0 32px 64px -12px rgb(0 0 0 / 0.64)"
+    }
+  },
+  typography: {
+    preheader: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-xs",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-normal",
+      letterSpacing: "tracking-widest",
+      textTransform: "uppercase"
+    },
+    header1: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-6xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-none",
+      letterSpacing: "tracking-tighter"
+    },
+    header2: {
+      fontFamily: "font-montserrat",
+      fontSize: "text-4xl",
+      fontWeight: "font-semibold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight"
+    },
+    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"
+      }
+    },
+    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: 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"
+    },
+    header1: {
+      fontFamily: "font-roboto",
+      fontSize: "text-5xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter"
+    },
+    header2: {
+      fontFamily: "font-roboto",
+      fontSize: "text-4xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight"
+    },
+    header3: {
+      fontFamily: "font-roboto",
+      fontSize: "text-2xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-snug"
+    },
+    header4: {
+      fontFamily: "font-roboto",
+      fontSize: "text-xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-snug"
+    },
+    subheader1: {
+      fontFamily: "font-roboto",
+      fontSize: "text-lg",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    subheader2: {
+      fontFamily: "font-roboto",
+      fontSize: "text-base",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    text1: {
+      fontFamily: "font-roboto",
+      fontSize: "text-base",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    text2: {
+      fontFamily: "font-roboto",
+      fontSize: "text-sm",
+      fontWeight: "font-normal",
+      lineHeight: "leading-relaxed"
+    },
+    link: {
+      fontFamily: "font-roboto",
+      fontSize: "text-base",
+      fontWeight: "font-medium"
+    },
+    button: {
+      fontFamily: "font-roboto",
+      fontSize: "text-sm",
+      fontWeight: "font-medium",
+      letterSpacing: "tracking-wide"
+    },
+    input: {
+      fontFamily: "font-roboto",
+      fontSize: "text-base",
+      fontWeight: "font-normal"
+    },
+    caption: {
+      fontFamily: "font-roboto",
+      fontSize: "text-xs",
+      fontWeight: "font-medium",
+      lineHeight: "leading-normal",
+      letterSpacing: "tracking-wide"
+    }
+  },
+  interactives: {
+    button: {
+      padding: { x: "px-5", y: "py-3" },
+      border: {
+        width: "border-0",
+        radius: "rounded-xl"
+      },
+      shadow: "shadow-xs",
+      custom: "transition-colors duration-200",
+      disabled: {
+        opacity: "opacity-50",
+        cursor: "cursor-not-allowed"
+      }
+    },
+    link: {
+      padding: { x: "px-0", y: "py-0" },
+      custom: "underline-offset-4 hover:underline"
+    },
+    card: {
+      padding: { x: "px-6", y: "py-6" },
+      border: {
+        width: "border",
+        radius: "rounded-2xl",
+        style: "border-solid"
+      },
+      shadow: "shadow-xs",
+      custom: "transition-shadow duration-200 hover:shadow-md"
+    },
+    input: {
+      padding: { x: "px-4", y: "py-3" },
+      border: {
+        width: "border",
+        radius: "rounded-xl",
+        style: "border-solid"
+      },
+      shadow: "shadow-none",
+      custom: "",
+      disabled: {
+        opacity: "opacity-50",
+        cursor: "cursor-not-allowed"
+      }
+    }
+  },
+  structure: {
+    page: { width: "max-w-6xl" },
+    section: {
+      padding: { x: "px-6", y: "py-16" }
+    }
+  }
+};
+var midnight = {
+  id: "midnight",
+  name: "Midnight",
+  theme: themeStyles3
+};
+
+// src/primitives/themes/editorial.ts
+var themeStyles4 = {
+  colors: {
+    light: {
+      background: "#f6f1e8",
+      foreground: "#1a1612",
+      card: "#fffaf2",
+      cardForeground: "#1a1612",
+      popover: "#fffaf2",
+      popoverForeground: "#1a1612",
+      primary: "#1e3a8a",
+      primaryForeground: "#fffaf2",
+      secondary: "#c2410c",
+      secondaryForeground: "#fffaf2",
+      muted: "#ece4d6",
+      mutedForeground: "#5c5348",
+      accent: "#1d4ed8",
+      accentForeground: "#fffaf2",
+      border: "#e0d5c4",
+      destructive: "#b91c1c",
+      input: "#e0d5c4",
+      ring: "#1e3a8a",
+      chart1: "#1e3a8a",
+      chart2: "#c2410c",
+      chart3: "#1d4ed8",
+      chart4: "#b91c1c",
+      chart5: "#78716c",
+      sidebar: "#fffaf2",
+      sidebarForeground: "#1a1612",
+      sidebarPrimary: "#1e3a8a",
+      sidebarPrimaryForeground: "#fffaf2",
+      sidebarAccent: "#ece4d6",
+      sidebarAccentForeground: "#1a1612",
+      sidebarBorder: "#e0d5c4",
+      sidebarRing: "#1e3a8a",
+      shadow2xs: "0 1px 2px 0 rgb(26 22 18 / 0.05)",
+      shadowXs: "0 1px 2px 0 rgb(26 22 18 / 0.06)",
+      shadowSm: "0 1px 2px 0 rgb(26 22 18 / 0.06), 0 2px 6px -2px rgb(26 22 18 / 0.1)",
+      shadowMd: "0 8px 20px -6px rgb(26 22 18 / 0.12)",
+      shadowLg: "0 16px 32px -10px rgb(26 22 18 / 0.14)",
+      shadowXl: "0 24px 48px -12px rgb(26 22 18 / 0.16)",
+      shadow2xl: "0 32px 64px -16px rgb(26 22 18 / 0.2)"
+    },
+    dark: {
+      background: "#100e0c",
+      foreground: "#f6f1e8",
+      card: "#1b1713",
+      cardForeground: "#f6f1e8",
+      popover: "#1b1713",
+      popoverForeground: "#f6f1e8",
+      primary: "#93c5fd",
+      primaryForeground: "#100e0c",
+      secondary: "#fb923c",
+      secondaryForeground: "#100e0c",
+      muted: "#241f19",
+      mutedForeground: "#c4b8a5",
+      accent: "#60a5fa",
+      accentForeground: "#100e0c",
+      border: "#3a3228",
+      destructive: "#f87171",
+      input: "#3a3228",
+      ring: "#93c5fd",
+      chart1: "#93c5fd",
+      chart2: "#fb923c",
+      chart3: "#60a5fa",
+      chart4: "#f87171",
+      chart5: "#a8a29e",
+      sidebar: "#1b1713",
+      sidebarForeground: "#f6f1e8",
+      sidebarPrimary: "#93c5fd",
+      sidebarPrimaryForeground: "#100e0c",
+      sidebarAccent: "#241f19",
+      sidebarAccentForeground: "#f6f1e8",
+      sidebarBorder: "#3a3228",
+      sidebarRing: "#93c5fd",
+      shadow2xs: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
+      shadowXs: "0 1px 2px 0 rgb(0 0 0 / 0.35)",
+      shadowSm: "0 2px 6px 0 rgb(0 0 0 / 0.4)",
+      shadowMd: "0 8px 20px -6px rgb(0 0 0 / 0.5)",
+      shadowLg: "0 16px 32px -10px rgb(0 0 0 / 0.55)",
+      shadowXl: "0 24px 48px -12px rgb(0 0 0 / 0.6)",
+      shadow2xl: "0 32px 64px -16px rgb(0 0 0 / 0.7)"
+    }
+  },
+  typography: {
+    preheader: {
+      fontFamily: "font-work-sans",
+      fontSize: "text-xs",
+      fontWeight: "font-medium",
+      lineHeight: "leading-relaxed",
+      letterSpacing: "tracking-widest",
+      textTransform: "uppercase"
+    },
+    header1: {
+      fontFamily: "font-playfair-display",
+      fontSize: "text-6xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-none",
+      letterSpacing: "tracking-tighter"
+    },
+    header2: {
+      fontFamily: "font-playfair-display",
+      fontSize: "text-4xl",
+      fontWeight: "font-medium",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tighter"
+    },
+    header3: {
+      fontFamily: "font-source-serif-4",
+      fontSize: "text-3xl",
+      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"
+      }
+    },
+    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: themeStyles4
+};
+
+// src/primitives/themes/neobrutalism.ts
+var themeStyles5 = {
+  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"
+    },
+    header1: {
+      fontFamily: "font-inter",
+      fontSize: "text-5xl",
+      fontWeight: "font-black",
+      lineHeight: "leading-none",
+      letterSpacing: "tracking-tighter"
+    },
+    header2: {
+      fontFamily: "font-inter",
+      fontSize: "text-4xl",
+      fontWeight: "font-extrabold",
+      lineHeight: "leading-tight",
+      letterSpacing: "tracking-tight"
+    },
+    header3: {
+      fontFamily: "font-inter",
+      fontSize: "text-2xl",
+      fontWeight: "font-extrabold",
+      lineHeight: "leading-snug"
+    },
+    header4: {
+      fontFamily: "font-inter",
+      fontSize: "text-xl",
+      fontWeight: "font-bold",
+      lineHeight: "leading-snug"
+    },
+    subheader1: {
+      fontFamily: "font-inter",
+      fontSize: "text-lg",
+      fontWeight: "font-medium",
+      lineHeight: "leading-relaxed"
+    },
+    subheader2: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-medium"
+    },
+    text1: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-medium",
+      lineHeight: "leading-relaxed"
+    },
+    text2: {
+      fontFamily: "font-inter",
+      fontSize: "text-sm",
+      fontWeight: "font-medium"
+    },
+    link: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-extrabold"
+    },
+    button: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-extrabold",
+      letterSpacing: "tracking-wide"
+    },
+    input: {
+      fontFamily: "font-inter",
+      fontSize: "text-base",
+      fontWeight: "font-medium"
+    },
+    caption: {
+      fontFamily: "font-inter",
+      fontSize: "text-xs",
+      fontWeight: "font-bold",
+      letterSpacing: "tracking-wide",
+      textTransform: "uppercase"
+    }
+  },
+  interactives: {
+    button: {
+      padding: { x: "px-6", y: "py-3" },
+      border: {
+        width: "border-2",
+        radius: "rounded-none",
+        style: "border-solid"
+      },
+      shadow: "shadow-md",
+      custom: "transition-transform duration-150 ease-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none",
+      disabled: {
+        opacity: "opacity-50",
+        cursor: "cursor-not-allowed"
+      }
+    },
+    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: themeStyles5
+};
+
+// src/primitives/themes/index.ts
+var themes = [
+  classic,
+  studio,
+  midnight,
+  editorial,
+  neobrutalism
+];
+var Sheet = SheetPrimitive.Root;
+var SheetTrigger = SheetPrimitive.Trigger;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 text-foreground shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = React10.forwardRef(({ side = "right", className, children, container, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { container: container ?? void 0, children: [
+  /* @__PURE__ */ jsx(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    SheetPrimitive.Content,
+    {
+      ref,
+      className: cn(sheetVariants({ side }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+function Drawer({
+  trigger,
+  children,
+  side = "left",
+  open,
+  setOpen,
+  style,
+  className = "",
+  theme: _theme
+}) {
+  const triggerWrapRef = useRef(null);
+  const [container, setContainer] = useState(null);
+  useLayoutEffect(() => {
+    const root = triggerWrapRef.current?.closest(
+      "[data-pb-theme], .pb-theme"
+    );
+    setContainer(root instanceof HTMLElement ? root : null);
+  }, []);
+  return /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { ref: triggerWrapRef, children: trigger }) }),
+    /* @__PURE__ */ jsx(
+      SheetContent,
+      {
+        side,
+        style,
+        container,
+        className: cn(
+          "bg-background text-foreground",
+          !container && "pb-theme",
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+
+export { Badge2 as Badge, Button, Button2, Caption, Drawer, Header1, Header2, Header3, Header4, Input2 as Input, Label2 as Label, Link, PageCard, PageCardContent, PageCardHeader, PageCardImage, Preheader, Section, Subheader1, Subheader2, Switch, Switch2, Text1, Text2, Textarea, cn, themes };
+//# sourceMappingURL=chunk-RBJBODQP.js.map
+//# sourceMappingURL=chunk-RBJBODQP.js.map