@moontra/moonui-pro 2.1.4 → 2.2.1

package/dist/index.mjs

@@ -1879,7 +1879,7 @@ var tapAnimations = {
     transition: { duration: 0.1 }
   }
 };
-var cardVariants = cva(
+cva(
   "rounded-lg border bg-card text-card-foreground shadow-sm dark:shadow-gray-900/20 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-all duration-200",
   {
     variants: {
@@ -1916,7 +1916,7 @@ var cardVariants = cva(
     }
   }
 );
-var Card = React16.forwardRef(
+var MoonUICardPro = React16.forwardRef(
   ({ className, variant, size, radius, interactive, microInteraction = "lift", ...props }, ref) => {
     if (interactive && microInteraction !== "none") {
       const interactionProps = {
@@ -1943,8 +1943,8 @@ var Card = React16.forwardRef(
     );
   }
 );
-Card.displayName = "Card";
-var CardHeader = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+MoonUICardPro.displayName = "MoonUICardPro";
+var MoonUICardHeaderPro = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1952,8 +1952,8 @@ var CardHeader = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ...props
   }
 ));
-CardHeader.displayName = "CardHeader";
-var CardTitle = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+MoonUICardHeaderPro.displayName = "MoonUICardHeaderPro";
+var MoonUICardTitlePro = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -1961,8 +1961,8 @@ var CardTitle = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE_
     ...props
   }
 ));
-CardTitle.displayName = "CardTitle";
-var CardDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+MoonUICardTitlePro.displayName = "MoonUICardTitlePro";
+var MoonUICardDescriptionPro = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -1970,10 +1970,10 @@ var CardDescription = React16.forwardRef(({ className, ...props }, ref) => /* @_
     ...props
   }
 ));
-CardDescription.displayName = "CardDescription";
-var CardContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("pt-0", className), ...props }));
-CardContent.displayName = "CardContent";
-var CardFooter = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+MoonUICardDescriptionPro.displayName = "MoonUICardDescriptionPro";
+var MoonUICardContentPro = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("pt-0", className), ...props }));
+MoonUICardContentPro.displayName = "MoonUICardContentPro";
+var MoonUICardFooterPro = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1981,8 +1981,8 @@ var CardFooter = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ...props
   }
 ));
-CardFooter.displayName = "CardFooter";
-var buttonVariants = cva(
+MoonUICardFooterPro.displayName = "MoonUICardFooterPro";
+var moonUIButtonProVariants = cva(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
     "font-medium relative",
@@ -2131,7 +2131,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React16.forwardRef(
+var MoonUIButtonPro2 = React16.forwardRef(
   ({
     className,
     variant,
@@ -2150,7 +2150,7 @@ var Button = React16.forwardRef(
     return /* @__PURE__ */ jsxs(
       Comp,
       {
-        className: cn(buttonVariants({ variant, size, rounded, fullWidth, className })),
+        className: cn(moonUIButtonProVariants({ variant, size, rounded, fullWidth, className })),
         ref,
         disabled: disabled || loading,
         "data-loading": loading ? "" : void 0,
@@ -2165,7 +2165,7 @@ var Button = React16.forwardRef(
     );
   }
 );
-Button.displayName = "Button";
+MoonUIButtonPro2.displayName = "MoonUIButtonPro";
 
 // src/hooks/use-subscription.ts
 function useSubscription() {
@@ -2326,12 +2326,12 @@ var AnimatedButton = React16__default.forwardRef(
   ({ className, ...props }, ref) => {
     const { hasProAccess, isLoading } = useSubscription();
     if (!isLoading && !hasProAccess) {
-      return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Animated Button is available exclusively to MoonUI Pro subscribers." }),
-          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
             /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
             "Upgrade to Pro"
           ] }) })
@@ -2359,14 +2359,14 @@ var ErrorBoundaryInternal = class extends Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center min-h-[200px] p-4", this.props.className), children: /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-md", children: [
-        /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
+      return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center min-h-[200px] p-4", this.props.className), children: /* @__PURE__ */ jsxs(MoonUICardPro, { className: "w-full max-w-md", children: [
+        /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "text-center", children: [
           /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-red-600" }) }),
-          /* @__PURE__ */ jsx(CardTitle, { children: "Something went wrong" }),
-          /* @__PURE__ */ jsx(CardDescription, { children: "An error occurred while rendering this component" })
+          /* @__PURE__ */ jsx(MoonUICardTitlePro, { children: "Something went wrong" }),
+          /* @__PURE__ */ jsx(MoonUICardDescriptionPro, { children: "An error occurred while rendering this component" })
         ] }),
-        /* @__PURE__ */ jsx(CardContent, { className: "text-center", children: /* @__PURE__ */ jsxs(
-          Button,
+        /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "text-center", children: /* @__PURE__ */ jsxs(
+          MoonUIButtonPro2,
           {
             onClick: () => this.setState({ hasError: false, error: void 0 }),
             className: "mt-4",
@@ -2384,12 +2384,12 @@ var ErrorBoundaryInternal = class extends Component {
 function ErrorBoundaryWrapper(props) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", props.className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", props.className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Error Boundary is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) })
@@ -2534,12 +2534,12 @@ var FloatingActionButton = React16__default.forwardRef(
   ({ className, ...props }, ref) => {
     const { hasProAccess, isLoading } = useSubscription();
     if (!isLoading && !hasProAccess) {
-      return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Floating Action Button is available exclusively to MoonUI Pro subscribers." }),
-          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
             /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
             "Upgrade to Pro"
           ] }) })
@@ -2658,12 +2658,12 @@ var HoverCard3D = React16__default.forwardRef(
   ({ className, ...props }, ref) => {
     const { hasProAccess, isLoading } = useSubscription();
     if (!isLoading && !hasProAccess) {
-      return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "3D Hover Card is available exclusively to MoonUI Pro subscribers." }),
-          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
             /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
             "Upgrade to Pro"
           ] }) })
@@ -2780,12 +2780,12 @@ var MagneticButton = React16__default.forwardRef(
   ({ className, ...props }, ref) => {
     const { hasProAccess, isLoading } = useSubscription();
     if (!isLoading && !hasProAccess) {
-      return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Magnetic Button is available exclusively to MoonUI Pro subscribers." }),
-          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
             /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
             "Upgrade to Pro"
           ] }) })
@@ -2901,12 +2901,12 @@ var PinchZoom = React16__default.forwardRef(
   ({ className, ...props }, ref) => {
     const { hasProAccess, isLoading } = useSubscription();
     if (!isLoading && !hasProAccess) {
-      return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Pinch Zoom is available exclusively to MoonUI Pro subscribers." }),
-          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
             /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
             "Upgrade to Pro"
           ] }) })
@@ -3050,12 +3050,12 @@ var SpotlightCard = React16__default.forwardRef(
   ({ className, ...props }, ref) => {
     const { hasProAccess, isLoading } = useSubscription();
     if (!isLoading && !hasProAccess) {
-      return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Spotlight Card is available exclusively to MoonUI Pro subscribers." }),
-          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+          /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
             /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
             "Upgrade to Pro"
           ] }) })
@@ -3066,7 +3066,7 @@ var SpotlightCard = React16__default.forwardRef(
   }
 );
 SpotlightCard.displayName = "SpotlightCard";
-var badgeVariants = cva(
+var moonUIBadgeVariantsPro = cva(
   [
     "inline-flex items-center gap-1.5",
     "font-medium transition-colors duration-200",
@@ -3152,7 +3152,7 @@ var badgeVariants = cva(
     }
   }
 );
-function Badge({
+function MoonUIBadgePro({
   className,
   variant,
   size,
@@ -3183,7 +3183,7 @@ function Badge({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(badgeVariants({ variant, size, radius }), className),
+      className: cn(moonUIBadgeVariantsPro({ variant, size, radius }), className),
       "data-removable": removable ? "" : void 0,
       ...props,
       children: [
@@ -3244,7 +3244,7 @@ var inputWrapperVariants = cva(
     }
   }
 );
-var inputVariants = cva(
+cva(
   [
     "w-full bg-background transition-all duration-200",
     "text-foreground placeholder:text-muted-foreground dark:placeholder:text-gray-500",
@@ -3302,7 +3302,7 @@ var inputVariants = cva(
     }
   }
 );
-var Input = React16.forwardRef(
+var MoonUIInputPro = React16.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -3372,11 +3372,11 @@ var Input = React16.forwardRef(
     ] });
   }
 );
-Input.displayName = "Input";
-var labelVariants = cva(
+MoonUIInputPro.displayName = "MoonUIInputPro";
+cva(
   "text-sm font-medium leading-none text-gray-900 dark:text-gray-200 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:peer-disabled:opacity-60 transition-colors duration-200"
 );
-var Label = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MoonUILabelPro2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -3385,7 +3385,7 @@ var Label = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
-var Textarea = React16__default.forwardRef(
+var MoonUITextareaPro = React16__default.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -3400,11 +3400,11 @@ var Textarea = React16__default.forwardRef(
     );
   }
 );
-Textarea.displayName = "Textarea";
-var Select = SelectPrimitive.Root;
-Select.displayName = "Select";
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React16.forwardRef(({ className, children, variant = "standard", size = "md", error, success, loading, leftIcon, rightIcon, ...props }, ref) => /* @__PURE__ */ jsxs(
+MoonUITextareaPro.displayName = "MoonUITextareaPro";
+var MoonUISelectPro = SelectPrimitive.Root;
+MoonUISelectPro.displayName = "MoonUISelectPro";
+var MoonUISelectValuePro = SelectPrimitive.Value;
+var MoonUISelectTriggerPro = React16.forwardRef(({ className, children, variant = "standard", size = "md", error, success, loading, leftIcon, rightIcon, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -3472,7 +3472,7 @@ var SelectScrollDownButton = React16.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React16.forwardRef(({ className, children, position = "item-aligned", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var MoonUISelectContentPro = React16.forwardRef(({ className, children, position = "item-aligned", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -3509,7 +3509,7 @@ var SelectContent = React16.forwardRef(({ className, children, position = "item-
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -3518,7 +3518,7 @@ var SelectLabel = React16.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React16.forwardRef(({ className, children, variant = "default", size = "md", rightIcon, customIndicator, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MoonUISelectItemPro = React16.forwardRef(({ className, children, variant = "default", size = "md", rightIcon, customIndicator, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -3545,7 +3545,7 @@ var SelectItem = React16.forwardRef(({ className, children, variant = "default",
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -3554,8 +3554,8 @@ var SelectSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-var Dialog = DialogPrimitive2.Root;
-var DialogTrigger = DialogPrimitive2.Trigger;
+var MoonUIDialogPro = DialogPrimitive2.Root;
+var MoonUIDialogTriggerPro = DialogPrimitive2.Trigger;
 var DialogPortal = DialogPrimitive2.Portal;
 var overlayVariants = cva(
   "fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -3638,7 +3638,7 @@ var dialogContentVariants = cva(
     }
   }
 );
-var DialogContent = React16.forwardRef(
+var MoonUIDialogContentPro = React16.forwardRef(
   ({
     className,
     children,
@@ -3723,7 +3723,7 @@ var DialogContent = React16.forwardRef(
   }
 );
 DialogContent.displayName = DialogPrimitive2.Content.displayName;
-var DialogHeader = ({
+var MoonUIDialogHeaderPro = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx(
@@ -3736,8 +3736,8 @@ var DialogHeader = ({
     ...props
   }
 );
-DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({
+MoonUIDialogHeaderPro.displayName = "MoonUIDialogHeaderPro";
+var MoonUIDialogFooterPro = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx(
@@ -3750,8 +3750,8 @@ var DialogFooter = ({
     ...props
   }
 );
-DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+MoonUIDialogFooterPro.displayName = "MoonUIDialogFooterPro";
+var MoonUIDialogTitlePro = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive2.Title,
   {
     ref,
@@ -3763,7 +3763,7 @@ var DialogTitle = React16.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive2.Title.displayName;
-var DialogDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MoonUIDialogDescriptionPro = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive2.Description,
   {
     ref,
@@ -3915,19 +3915,19 @@ function EventDialog({
       color: selectedType?.color || prev.color
     }));
   };
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[500px]", children: [
-    /* @__PURE__ */ jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsx(MoonUIDialogPro, { open, onOpenChange, children: /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: "sm:max-w-[500px]", children: [
+    /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
+      /* @__PURE__ */ jsxs(MoonUIDialogTitlePro, { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(Calendar, { className: "w-5 h-5" }),
         mode === "create" ? "Create Event" : "Edit Event"
       ] }),
-      /* @__PURE__ */ jsx(DialogDescription, { children: mode === "create" ? "Add a new event to your calendar." : "Edit the event details." })
+      /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: mode === "create" ? "Add a new event to your calendar." : "Edit the event details." })
     ] }),
     /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "title", children: "Title *" }),
+        /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "title", children: "Title *" }),
         /* @__PURE__ */ jsx(
-          Input,
+          MoonUIInputPro,
           {
             id: "title",
             value: formData.title,
@@ -3939,9 +3939,9 @@ function EventDialog({
         errors.title && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500", children: errors.title })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "description", children: "Description" }),
+        /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "description", children: "Description" }),
         /* @__PURE__ */ jsx(
-          Textarea,
+          MoonUITextareaPro,
           {
             id: "description",
             value: formData.description,
@@ -3953,9 +3953,9 @@ function EventDialog({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "date", children: "Date *" }),
+          /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "date", children: "Date *" }),
           /* @__PURE__ */ jsx(
-            Input,
+            MoonUIInputPro,
             {
               id: "date",
               type: "date",
@@ -3967,9 +3967,9 @@ function EventDialog({
           errors.date && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500", children: errors.date })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "startTime", children: "Start Time" }),
+          /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "startTime", children: "Start Time" }),
           /* @__PURE__ */ jsx(
-            Input,
+            MoonUIInputPro,
             {
               id: "startTime",
               type: "time",
@@ -3980,9 +3980,9 @@ function EventDialog({
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "endTime", children: "End Time" }),
+          /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "endTime", children: "End Time" }),
           /* @__PURE__ */ jsx(
-            Input,
+            MoonUIInputPro,
             {
               id: "endTime",
               type: "time",
@@ -3996,12 +3996,12 @@ function EventDialog({
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs(Label, { htmlFor: "location", className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(MoonUILabelPro2, { htmlFor: "location", className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(MapPin, { className: "w-4 h-4" }),
           "Location"
         ] }),
         /* @__PURE__ */ jsx(
-          Input,
+          MoonUIInputPro,
           {
             id: "location",
             value: formData.location,
@@ -4012,13 +4012,13 @@ function EventDialog({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs(Label, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(MoonUILabelPro2, { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(Type, { className: "w-4 h-4" }),
             "Type"
           ] }),
-          /* @__PURE__ */ jsxs(Select, { value: formData.type, onValueChange: handleTypeChange, children: [
-            /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: EVENT_TYPES.map((type) => /* @__PURE__ */ jsx(SelectItem, { value: type.value, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(MoonUISelectPro, { value: formData.type, onValueChange: handleTypeChange, children: [
+            /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
+            /* @__PURE__ */ jsx(MoonUISelectContentPro, { children: EVENT_TYPES.map((type) => /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: type.value, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -4031,7 +4031,7 @@ function EventDialog({
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs(Label, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(MoonUILabelPro2, { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(Palette, { className: "w-4 h-4" }),
             "Color"
           ] }),
@@ -4062,9 +4062,9 @@ function EventDialog({
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "attendees", children: "Attendees" }),
+        /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "attendees", children: "Attendees" }),
         /* @__PURE__ */ jsx(
-          Input,
+          MoonUIInputPro,
           {
             id: "attendees",
             value: formData.attendees,
@@ -4073,9 +4073,9 @@ function EventDialog({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
+      /* @__PURE__ */ jsxs(MoonUIDialogFooterPro, { className: "gap-2", children: [
         mode === "edit" && onDelete && /* @__PURE__ */ jsx(
-          Button,
+          MoonUIButtonPro2,
           {
             type: "button",
             variant: "destructive",
@@ -4085,7 +4085,7 @@ function EventDialog({
           }
         ),
         /* @__PURE__ */ jsx(
-          Button,
+          MoonUIButtonPro2,
           {
             type: "button",
             variant: "outline",
@@ -4094,7 +4094,7 @@ function EventDialog({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? mode === "create" ? "Creating..." : "Saving..." : mode === "create" ? "Create Event" : "Save Changes" })
+        /* @__PURE__ */ jsx(MoonUIButtonPro2, { type: "submit", disabled: isSubmitting, children: isSubmitting ? mode === "create" ? "Creating..." : "Saving..." : mode === "create" ? "Create Event" : "Save Changes" })
       ] })
     ] })
   ] }) });
@@ -4137,12 +4137,12 @@ function Calendar2({
   showProUpgrade = false
 }) {
   if (showProUpgrade) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Calendar is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) }) })
@@ -4286,23 +4286,23 @@ function Calendar2({
   });
   const visibleDaysOfWeek = showWeekends ? DAYS_OF_WEEK : DAYS_OF_WEEK.slice(1, 6);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Card, { className: cn("w-full max-w-full overflow-hidden", className), style: { height: height ? `${height}px` : void 0 }, children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full max-w-full overflow-hidden", className), style: { height: height ? `${height}px` : void 0 }, children: [
+      /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(Calendar, { className: "h-5 w-5" }),
             "Calendar"
           ] }),
-          /* @__PURE__ */ jsxs(CardDescription, { children: [
+          /* @__PURE__ */ jsxs(MoonUICardDescriptionPro, { children: [
             MONTHS[currentMonth],
             " ",
             currentYear
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: goToToday, children: "Today" }),
+          /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "outline", size: "sm", onClick: goToToday, children: "Today" }),
           /* @__PURE__ */ jsx(
-            Button,
+            MoonUIButtonPro2,
             {
               variant: "outline",
               size: "sm",
@@ -4312,7 +4312,7 @@ function Calendar2({
             }
           ),
           /* @__PURE__ */ jsx(
-            Button,
+            MoonUIButtonPro2,
             {
               variant: "outline",
               size: "sm",
@@ -4323,7 +4323,7 @@ function Calendar2({
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx(CardContent, { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-1 w-full", style: { minWidth: "500px" }, children: [
           visibleDaysOfWeek.map((day) => /* @__PURE__ */ jsx("div", { className: "p-1 text-center text-xs font-medium text-muted-foreground min-w-[70px]", children: day }, day)),
           filteredDays.map((date, index) => {
@@ -4352,7 +4352,7 @@ function Calendar2({
                       "text-sm font-medium",
                       isTodayDate && "text-primary font-bold"
                     ), children: date.getDate() }),
-                    dayEvents.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs px-1", children: dayEvents.length })
+                    dayEvents.length > 0 && /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "text-xs px-1", children: dayEvents.length })
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1 overflow-hidden", children: [
                     dayEvents.slice(0, 3).map((event) => /* @__PURE__ */ jsxs(
@@ -4374,7 +4374,7 @@ function Calendar2({
                             /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: event.title }),
                             showEventDetails && /* @__PURE__ */ jsxs("div", { className: "hidden group-hover:flex items-center gap-1 ml-1", children: [
                               /* @__PURE__ */ jsx(
-                                Button,
+                                MoonUIButtonPro2,
                                 {
                                   variant: "ghost",
                                   size: "sm",
@@ -4384,7 +4384,7 @@ function Calendar2({
                                 }
                               ),
                               /* @__PURE__ */ jsx(
-                                Button,
+                                MoonUIButtonPro2,
                                 {
                                   variant: "ghost",
                                   size: "sm",
@@ -4433,7 +4433,7 @@ function Calendar2({
                   /* @__PURE__ */ jsx("h5", { className: "font-medium", children: event.title }),
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                     /* @__PURE__ */ jsx(
-                      Button,
+                      MoonUIButtonPro2,
                       {
                         variant: "ghost",
                         size: "sm",
@@ -4442,7 +4442,7 @@ function Calendar2({
                       }
                     ),
                     /* @__PURE__ */ jsx(
-                      Button,
+                      MoonUIButtonPro2,
                       {
                         variant: "ghost",
                         size: "sm",
@@ -4479,7 +4479,7 @@ function Calendar2({
             getEventsForDate(selectedDate).length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-4", children: [
               /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "No events scheduled for this date" }),
               /* @__PURE__ */ jsxs(
-                Button,
+                MoonUIButtonPro2,
                 {
                   variant: "outline",
                   size: "sm",
@@ -4513,7 +4513,7 @@ function Calendar2({
     )
   ] });
 }
-var avatarVariants = cva(
+cva(
   "relative flex shrink-0 overflow-hidden",
   {
     variants: {
@@ -4547,7 +4547,7 @@ var avatarVariants = cva(
     }
   }
 );
-var Avatar = React16.forwardRef(({ className, size, radius, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+var MoonUIAvatarPro = React16.forwardRef(({ className, size, radius, variant, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     ref,
@@ -4556,7 +4556,7 @@ var Avatar = React16.forwardRef(({ className, size, radius, variant, ...props },
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MoonUIAvatarImagePro = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Image,
   {
     ref,
@@ -4565,7 +4565,7 @@ var AvatarImage = React16.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MoonUIAvatarFallbackPro = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -4638,12 +4638,12 @@ function Kanban({
 }) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Kanban Board is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) }) })
@@ -4754,8 +4754,8 @@ function Kanban({
           onDragEnter: (e) => handleDragEnter(e, column.id),
           onDragLeave: (e) => handleDragLeave(e, column.id),
           onDrop: (e) => handleDrop(e, column.id),
-          children: /* @__PURE__ */ jsxs(Card, { className: "h-full", children: [
-            /* @__PURE__ */ jsxs(CardHeader, { className: "pb-3", children: [
+          children: /* @__PURE__ */ jsxs(MoonUICardPro, { className: "h-full", children: [
+            /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "pb-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   column.color && /* @__PURE__ */ jsx(
@@ -4765,17 +4765,17 @@ function Kanban({
                       style: { backgroundColor: column.color }
                     }
                   ),
-                  /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: column.title }),
-                  /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: column.cards.length })
+                  /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-sm font-medium", children: column.title }),
+                  /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "text-xs", children: column.cards.length })
                 ] }),
-                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) })
+                /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) })
               ] }),
-              column.limit && /* @__PURE__ */ jsx(CardDescription, { className: cn(
+              column.limit && /* @__PURE__ */ jsx(MoonUICardDescriptionPro, { className: cn(
                 "text-xs",
                 isOverLimit && "text-destructive"
               ), children: isOverLimit ? "Over limit" : `${column.cards.length}/${column.limit} cards` })
             ] }),
-            /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "space-y-3", children: [
               column.cards.map((card) => /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -4797,7 +4797,7 @@ function Kanban({
                       ] }),
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
                         /* @__PURE__ */ jsx(
-                          Button,
+                          MoonUIButtonPro2,
                           {
                             variant: "ghost",
                             size: "sm",
@@ -4807,7 +4807,7 @@ function Kanban({
                           }
                         ),
                         /* @__PURE__ */ jsx(
-                          Button,
+                          MoonUIButtonPro2,
                           {
                             variant: "ghost",
                             size: "sm",
@@ -4819,7 +4819,7 @@ function Kanban({
                         /* @__PURE__ */ jsx("div", { className: "cursor-move", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3 w-3 text-muted-foreground" }) })
                       ] })
                     ] }),
-                    card.tags && card.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mb-2", children: card.tags.map((tag, index) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs px-1 py-0", children: tag }, index)) }),
+                    card.tags && card.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mb-2", children: card.tags.map((tag, index) => /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "outline", className: "text-xs px-1 py-0", children: tag }, index)) }),
                     showCardDetails && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                         card.priority && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -4843,9 +4843,9 @@ function Kanban({
                           /* @__PURE__ */ jsx(Paperclip, { className: "h-3 w-3" }),
                           /* @__PURE__ */ jsx("span", { children: card.attachments })
                         ] }),
-                        card.assignee && /* @__PURE__ */ jsxs(Avatar, { className: "h-5 w-5", children: [
-                          /* @__PURE__ */ jsx(AvatarImage, { src: card.assignee.avatar }),
-                          /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(card.assignee.name) })
+                        card.assignee && /* @__PURE__ */ jsxs(MoonUIAvatarPro, { className: "h-5 w-5", children: [
+                          /* @__PURE__ */ jsx(MoonUIAvatarImagePro, { src: card.assignee.avatar }),
+                          /* @__PURE__ */ jsx(MoonUIAvatarFallbackPro, { className: "text-xs", children: getInitials(card.assignee.name) })
                         ] })
                       ] })
                     ] })
@@ -4854,7 +4854,7 @@ function Kanban({
                 card.id
               )),
               onAddCard && /* @__PURE__ */ jsxs(
-                Button,
+                MoonUIButtonPro2,
                 {
                   variant: "ghost",
                   size: "sm",
@@ -4874,7 +4874,7 @@ function Kanban({
       );
     }),
     showAddColumn && onAddColumn && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-80", children: /* @__PURE__ */ jsxs(
-      Button,
+      MoonUIButtonPro2,
       {
         variant: "outline",
         onClick: onAddColumn,
@@ -43415,9 +43415,9 @@ var SlashCommandsExtension = Extension.create({
     ];
   }
 });
-var DropdownMenu = DropdownMenuPrimitive.Root;
-var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuSubTrigger = React16.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MoonUIDropdownMenuPro = DropdownMenuPrimitive.Root;
+var MoonUIDropdownMenuTriggerPro = DropdownMenuPrimitive.Trigger;
+React16.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -43434,7 +43434,7 @@ var DropdownMenuSubTrigger = React16.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -43446,7 +43446,7 @@ var DropdownMenuSubContent = React16.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React16.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var MoonUIDropdownMenuContentPro = React16.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -43459,7 +43459,7 @@ var DropdownMenuContent = React16.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var MoonUIDropdownMenuItemPro = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -43472,7 +43472,7 @@ var DropdownMenuItem = React16.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React16.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+React16.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -43489,7 +43489,7 @@ var DropdownMenuCheckboxItem = React16.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -43505,7 +43505,7 @@ var DropdownMenuRadioItem = React16.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+React16.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -43518,7 +43518,7 @@ var DropdownMenuLabel = React16.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MoonUIDropdownMenuSeparatorPro = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -43527,7 +43527,7 @@ var DropdownMenuSeparator = React16.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var TooltipProvider = TooltipPrimitive.Provider;
+var MoonUITooltipProviderPro = TooltipPrimitive.Provider;
 var tooltipVariants = cva(
   "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
   {
@@ -43552,8 +43552,8 @@ var tooltipVariants = cva(
     }
   }
 );
-var Tooltip = TooltipPrimitive.Root;
-var TooltipTrigger = TooltipPrimitive.Trigger;
+var MoonUITooltipPro = TooltipPrimitive.Root;
+var MoonUITooltipTriggerPro = TooltipPrimitive.Trigger;
 var TooltipArrow = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Arrow,
   {
@@ -43563,7 +43563,7 @@ var TooltipArrow = React16.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
-var TooltipContent = React16.forwardRef(({ className, variant, size, showArrow = false, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MoonUITooltipContentPro = React16.forwardRef(({ className, variant, size, showArrow = false, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxs(
   TooltipPrimitive.Content,
   {
     ref,
@@ -43675,9 +43675,9 @@ var popoverContentVariants = cva(
     }
   }
 );
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React16.forwardRef(({
+var MoonUIPopoverPro = PopoverPrimitive.Root;
+var MoonUIPopoverTriggerPro = PopoverPrimitive.Trigger;
+var MoonUIPopoverContentPro = React16.forwardRef(({
   className,
   variant,
   size,
@@ -43738,7 +43738,7 @@ var defaultColors = [
   "#EC4899",
   "#F43F5E"
 ];
-var ColorPicker = ({
+var MoonUIColorPickerPro = ({
   value = "#000000",
   onChange,
   className,
@@ -43803,7 +43803,7 @@ var ColorPicker = ({
     )) })
   ] });
 };
-var sliderVariants = cva(
+cva(
   "relative flex w-full touch-none select-none items-center",
   {
     variants: {
@@ -43883,7 +43883,7 @@ var sliderThumbVariants = cva(
     }
   }
 );
-var Slider = React16.forwardRef(({
+var MoonUISliderPro = React16.forwardRef(({
   className,
   size,
   trackVariant,
@@ -44037,7 +44037,7 @@ var Slider = React16.forwardRef(({
     )
   ] });
 });
-Slider.displayName = "Slider";
+MoonUISliderPro.displayName = "MoonUISliderPro";
 var ToastViewport = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Viewport,
   {
@@ -44050,7 +44050,7 @@ var ToastViewport = React16.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-var toastVariants = cva(
+cva(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-8 shadow-sm transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
@@ -44067,7 +44067,7 @@ var toastVariants = cva(
     }
   }
 );
-var Toast = React16.forwardRef(({ className, variant, ...props }, ref) => {
+React16.forwardRef(({ className, variant, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Root,
     {
@@ -44282,7 +44282,7 @@ var EditorColorPicker = ({
   currentColor = "#000000"
 }) => {
   return /* @__PURE__ */ jsx(
-    ColorPicker,
+    MoonUIColorPickerPro,
     {
       value: currentColor,
       onChange: onColorSelect,
@@ -44352,9 +44352,9 @@ var ToolbarButton = ({
   );
   if (!tooltip)
     return button;
-  return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+  return /* @__PURE__ */ jsxs(MoonUITooltipPro, { children: [
+    /* @__PURE__ */ jsx(MoonUITooltipTriggerPro, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx(MoonUITooltipContentPro, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
   ] });
 };
 function RichTextEditor({
@@ -44387,12 +44387,12 @@ function RichTextEditor({
 }) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Advanced Rich Text Editor is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) }) })
@@ -44762,7 +44762,7 @@ function RichTextEditor({
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: cn("border rounded-lg overflow-hidden bg-white dark:bg-gray-950", className), children: [
-    /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", { className: "border-b bg-gray-50 dark:bg-gray-900 p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-wrap gap-1", children: [
+    /* @__PURE__ */ jsx(MoonUITooltipProviderPro, { children: /* @__PURE__ */ jsx("div", { className: "border-b bg-gray-50 dark:bg-gray-900 p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-wrap gap-1", children: [
       (features.bold || features.italic || features.underline || features.strike || features.code) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
         features.bold && /* @__PURE__ */ jsx(
           ToolbarButton,
@@ -44817,22 +44817,22 @@ function RichTextEditor({
       ] }),
       (features.bold || features.italic || features.underline || features.strike || features.code) && (features.heading || features.align) && /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 shrink-0" }),
       (features.heading || features.align) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
-        features.heading && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 px-2", disabled: isSourceView, children: [
+        features.heading && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+          /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { variant: "ghost", size: "sm", className: "h-8 px-2", disabled: isSourceView, children: [
             /* @__PURE__ */ jsx(Type, { className: "w-4 h-4 mr-1" }),
             /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" })
           ] }) }),
-          /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => editor.chain().focus().setParagraph().run(), children: "Paragraph" }),
-            /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), children: [
+          /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { children: [
+            /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => editor.chain().focus().setParagraph().run(), children: "Paragraph" }),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), children: [
               /* @__PURE__ */ jsx(Heading1, { className: "w-4 h-4 mr-2" }),
               " Heading 1"
             ] }),
-            /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: [
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: [
               /* @__PURE__ */ jsx(Heading2, { className: "w-4 h-4 mr-2" }),
               " Heading 2"
             ] }),
-            /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), children: [
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), children: [
               /* @__PURE__ */ jsx(Heading3, { className: "w-4 h-4 mr-2" }),
               " Heading 3"
             ] })
@@ -44928,9 +44928,9 @@ function RichTextEditor({
       ] }),
       (features.lists || features.blockquote) && features.color && /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 shrink-0" }),
       features.color && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
-        /* @__PURE__ */ jsxs(Popover, { children: [
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            Button,
+        /* @__PURE__ */ jsxs(MoonUIPopoverPro, { children: [
+          /* @__PURE__ */ jsx(MoonUIPopoverTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
+            MoonUIButtonPro2,
             {
               variant: "ghost",
               size: "sm",
@@ -44940,7 +44940,7 @@ function RichTextEditor({
               children: /* @__PURE__ */ jsx(Palette, { className: "w-4 h-4" })
             }
           ) }),
-          /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(MoonUIPopoverContentPro, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(
             EditorColorPicker,
             {
               currentColor: currentTextColor,
@@ -44951,9 +44951,9 @@ function RichTextEditor({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs(Popover, { children: [
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            Button,
+        /* @__PURE__ */ jsxs(MoonUIPopoverPro, { children: [
+          /* @__PURE__ */ jsx(MoonUIPopoverTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
+            MoonUIButtonPro2,
             {
               variant: "ghost",
               size: "sm",
@@ -44963,7 +44963,7 @@ function RichTextEditor({
               children: /* @__PURE__ */ jsx(Highlighter, { className: "w-4 h-4" })
             }
           ) }),
-          /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(MoonUIPopoverContentPro, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(
             EditorColorPicker,
             {
               currentColor: currentBgColor,
@@ -44977,8 +44977,8 @@ function RichTextEditor({
       ] }),
       features.color && (features.link || features.image || features.table) && /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 shrink-0" }),
       (features.link || features.image || features.table) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
-        features.link && /* @__PURE__ */ jsxs(Dialog, { open: isLinkDialogOpen, onOpenChange: setIsLinkDialogOpen, children: [
-          /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        features.link && /* @__PURE__ */ jsxs(MoonUIDialogPro, { open: isLinkDialogOpen, onOpenChange: setIsLinkDialogOpen, children: [
+          /* @__PURE__ */ jsx(MoonUIDialogTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
             ToolbarButton,
             {
               active: editor.isActive("link"),
@@ -44998,15 +44998,15 @@ function RichTextEditor({
               children: /* @__PURE__ */ jsx(Link2, { className: "w-4 h-4" })
             }
           ) }),
-          /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
-            /* @__PURE__ */ jsxs(DialogHeader, { children: [
-              /* @__PURE__ */ jsx(DialogTitle, { children: "Add Link" }),
-              /* @__PURE__ */ jsx(DialogDescription, { children: "Enter the URL for the link." })
+          /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: "sm:max-w-[425px]", children: [
+            /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
+              /* @__PURE__ */ jsx(MoonUIDialogTitlePro, { children: "Add Link" }),
+              /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: "Enter the URL for the link." })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "grid gap-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-              /* @__PURE__ */ jsx(Label, { htmlFor: "url", children: "URL" }),
+              /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "url", children: "URL" }),
               /* @__PURE__ */ jsx(
-                Input,
+                MoonUIInputPro,
                 {
                   id: "url",
                   value: linkUrl,
@@ -45023,7 +45023,7 @@ function RichTextEditor({
             ] }) }),
             /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
               editor.isActive("link") && /* @__PURE__ */ jsx(
-                Button,
+                MoonUIButtonPro2,
                 {
                   variant: "destructive",
                   onClick: () => {
@@ -45034,14 +45034,14 @@ function RichTextEditor({
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "ml-auto flex gap-2", children: [
-                /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setIsLinkDialogOpen(false), children: "Cancel" }),
-                /* @__PURE__ */ jsx(Button, { onClick: addLink, children: "Add Link" })
+                /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "outline", onClick: () => setIsLinkDialogOpen(false), children: "Cancel" }),
+                /* @__PURE__ */ jsx(MoonUIButtonPro2, { onClick: addLink, children: "Add Link" })
               ] })
             ] })
           ] })
         ] }),
-        features.image && /* @__PURE__ */ jsxs(Dialog, { open: isImageDialogOpen, onOpenChange: setIsImageDialogOpen, children: [
-          /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        features.image && /* @__PURE__ */ jsxs(MoonUIDialogPro, { open: isImageDialogOpen, onOpenChange: setIsImageDialogOpen, children: [
+          /* @__PURE__ */ jsx(MoonUIDialogTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
             ToolbarButton,
             {
               onClick: () => {
@@ -45055,15 +45055,15 @@ function RichTextEditor({
               children: /* @__PURE__ */ jsx(Image$1, { className: "w-4 h-4" })
             }
           ) }),
-          /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
-            /* @__PURE__ */ jsxs(DialogHeader, { children: [
-              /* @__PURE__ */ jsx(DialogTitle, { children: "Add Image" }),
-              /* @__PURE__ */ jsx(DialogDescription, { children: "Enter the URL for the image." })
+          /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: "sm:max-w-[425px]", children: [
+            /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
+              /* @__PURE__ */ jsx(MoonUIDialogTitlePro, { children: "Add Image" }),
+              /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: "Enter the URL for the image." })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "grid gap-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-              /* @__PURE__ */ jsx(Label, { htmlFor: "image-url", children: "Image URL" }),
+              /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "image-url", children: "Image URL" }),
               /* @__PURE__ */ jsx(
-                Input,
+                MoonUIInputPro,
                 {
                   id: "image-url",
                   value: imageUrl,
@@ -45079,14 +45079,14 @@ function RichTextEditor({
               )
             ] }) }),
             /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-              /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setIsImageDialogOpen(false), children: "Cancel" }),
-              /* @__PURE__ */ jsx(Button, { onClick: addImage, children: "Add Image" })
+              /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "outline", onClick: () => setIsImageDialogOpen(false), children: "Cancel" }),
+              /* @__PURE__ */ jsx(MoonUIButtonPro2, { onClick: addImage, children: "Add Image" })
             ] })
           ] })
         ] }),
         features.table && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(Dialog, { open: isTableDialogOpen, onOpenChange: setIsTableDialogOpen, children: [
-            /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(MoonUIDialogPro, { open: isTableDialogOpen, onOpenChange: setIsTableDialogOpen, children: [
+            /* @__PURE__ */ jsx(MoonUIDialogTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
               ToolbarButton,
               {
                 onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
@@ -45095,17 +45095,17 @@ function RichTextEditor({
                 children: /* @__PURE__ */ jsx(Table$1, { className: "w-4 h-4" })
               }
             ) }),
-            /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
-              /* @__PURE__ */ jsxs(DialogHeader, { children: [
-                /* @__PURE__ */ jsx(DialogTitle, { children: "Create Table" }),
-                /* @__PURE__ */ jsx(DialogDescription, { children: "Choose the size for your new table." })
+            /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: "sm:max-w-[425px]", children: [
+              /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
+                /* @__PURE__ */ jsx(MoonUIDialogTitlePro, { children: "Create Table" }),
+                /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: "Choose the size for your new table." })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "grid gap-4 py-4", children: [
                 /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
                   /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "rows", children: "Rows" }),
+                    /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "rows", children: "Rows" }),
                     /* @__PURE__ */ jsx(
-                      Input,
+                      MoonUIInputPro,
                       {
                         id: "rows",
                         type: "number",
@@ -45117,9 +45117,9 @@ function RichTextEditor({
                     )
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "cols", children: "Columns" }),
+                    /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "cols", children: "Columns" }),
                     /* @__PURE__ */ jsx(
-                      Input,
+                      MoonUIInputPro,
                       {
                         id: "cols",
                         type: "number",
@@ -45141,32 +45141,32 @@ function RichTextEditor({
                       className: "rounded border-gray-300"
                     }
                   ),
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "headerRow", className: "text-sm font-normal", children: "Include header row" })
+                  /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "headerRow", className: "text-sm font-normal", children: "Include header row" })
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-                /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setIsTableDialogOpen(false), children: "Cancel" }),
-                /* @__PURE__ */ jsx(Button, { onClick: createTable2, children: "Create Table" })
+                /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "outline", onClick: () => setIsTableDialogOpen(false), children: "Cancel" }),
+                /* @__PURE__ */ jsx(MoonUIButtonPro2, { onClick: createTable2, children: "Create Table" })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-8 px-1", children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" }) }) }),
-            /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
-              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => editor.chain().focus().addColumnBefore().run(), children: "Add column before" }),
-              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => editor.chain().focus().addColumnAfter().run(), children: "Add column after" }),
-              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => editor.chain().focus().deleteColumn().run(), children: "Delete column" }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => editor.chain().focus().addRowBefore().run(), children: "Add row before" }),
-              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => editor.chain().focus().addRowAfter().run(), children: "Add row after" }),
-              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => editor.chain().focus().deleteRow().run(), children: "Delete row" }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setIsTableBorderDialogOpen(true), children: [
+          /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+            /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "ghost", size: "sm", className: "h-8 px-1", children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" }) }) }),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { children: [
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => editor.chain().focus().addColumnBefore().run(), children: "Add column before" }),
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => editor.chain().focus().addColumnAfter().run(), children: "Add column after" }),
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => editor.chain().focus().deleteColumn().run(), children: "Delete column" }),
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => editor.chain().focus().addRowBefore().run(), children: "Add row before" }),
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => editor.chain().focus().addRowAfter().run(), children: "Add row after" }),
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => editor.chain().focus().deleteRow().run(), children: "Delete row" }),
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setIsTableBorderDialogOpen(true), children: [
                 /* @__PURE__ */ jsx(Settings, { className: "w-4 h-4 mr-2" }),
                 "Table Borders"
               ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => editor.chain().focus().deleteTable().run(), children: "Delete table" })
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => editor.chain().focus().deleteTable().run(), children: "Delete table" })
             ] })
           ] })
         ] })
@@ -45208,9 +45208,9 @@ function RichTextEditor({
           }
         ),
         features.ai && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-              Button,
+          /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+            /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
+              MoonUIButtonPro2,
               {
                 variant: "ghost",
                 size: "sm",
@@ -45222,62 +45222,62 @@ function RichTextEditor({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56", children: [
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("rewrite"), children: [
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { className: "w-56", children: [
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("rewrite"), children: [
                 /* @__PURE__ */ jsx(RefreshCw, { className: "w-4 h-4 mr-2" }),
                 "Rewrite Selection"
               ] }),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("improve"), children: [
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("improve"), children: [
                 /* @__PURE__ */ jsx(Wand2, { className: "w-4 h-4 mr-2" }),
                 "Improve Writing"
               ] }),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("expand"), children: [
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("expand"), children: [
                 /* @__PURE__ */ jsx(Maximize, { className: "w-4 h-4 mr-2" }),
                 "Expand Text"
               ] }),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("summarize"), children: [
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("summarize"), children: [
                 /* @__PURE__ */ jsx(FileText, { className: "w-4 h-4 mr-2" }),
                 "Summarize"
               ] }),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("continue"), children: [
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("continue"), children: [
                 /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4 mr-2" }),
                 "Continue Writing"
               ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("fix"), children: [
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("fix"), children: [
                 /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 mr-2" }),
                 "Fix Grammar & Spelling"
               ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("tone_professional"), children: [
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("tone_professional"), children: [
                 /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4 mr-2" }),
                 "Make Professional"
               ] }),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("tone_casual"), children: [
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("tone_casual"), children: [
                 /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4 mr-2" }),
                 "Make Casual"
               ] }),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("tone_friendly"), children: [
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("tone_friendly"), children: [
                 /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4 mr-2" }),
                 "Make Friendly"
               ] }),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("tone_formal"), children: [
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("tone_formal"), children: [
                 /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4 mr-2" }),
                 "Make Formal"
               ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("translate"), children: [
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("translate"), children: [
                 /* @__PURE__ */ jsx(Languages, { className: "w-4 h-4 mr-2" }),
                 "Translate to Turkish"
               ] }),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleAIAction("ideas"), children: [
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleAIAction("ideas"), children: [
                 /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4 mr-2" }),
                 "Generate Ideas"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs(Dialog, { open: isAiSettingsOpen, onOpenChange: setIsAiSettingsOpen, children: [
-            /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(MoonUIDialogPro, { open: isAiSettingsOpen, onOpenChange: setIsAiSettingsOpen, children: [
+            /* @__PURE__ */ jsx(MoonUIDialogTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
               ToolbarButton,
               {
                 onClick: () => setIsAiSettingsOpen(true),
@@ -45286,35 +45286,35 @@ function RichTextEditor({
                 children: /* @__PURE__ */ jsx(Settings, { className: "w-4 h-4" })
               }
             ) }),
-            /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
-              /* @__PURE__ */ jsxs(DialogHeader, { children: [
-                /* @__PURE__ */ jsx(DialogTitle, { children: "AI Settings" }),
-                /* @__PURE__ */ jsx(DialogDescription, { children: "Configure your AI provider and API settings." })
+            /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: "sm:max-w-[425px]", children: [
+              /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
+                /* @__PURE__ */ jsx(MoonUIDialogTitlePro, { children: "AI Settings" }),
+                /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: "Configure your AI provider and API settings." })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "grid gap-4 py-4", children: [
                 /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "provider", children: "Provider" }),
+                  /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "provider", children: "Provider" }),
                   /* @__PURE__ */ jsxs(
-                    Select,
+                    MoonUISelectPro,
                     {
                       value: aiSettings.provider,
                       onValueChange: (value) => setAiSettings({ ...aiSettings, provider: value }),
                       children: [
-                        /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                        /* @__PURE__ */ jsxs(SelectContent, { children: [
-                          /* @__PURE__ */ jsx(SelectItem, { value: "openai", children: "OpenAI" }),
-                          /* @__PURE__ */ jsx(SelectItem, { value: "claude", children: "Claude (Anthropic)" }),
-                          /* @__PURE__ */ jsx(SelectItem, { value: "gemini", children: "Gemini (Google)" }),
-                          /* @__PURE__ */ jsx(SelectItem, { value: "cohere", children: "Cohere" })
+                        /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
+                        /* @__PURE__ */ jsxs(MoonUISelectContentPro, { children: [
+                          /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "openai", children: "OpenAI" }),
+                          /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "claude", children: "Claude (Anthropic)" }),
+                          /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "gemini", children: "Gemini (Google)" }),
+                          /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "cohere", children: "Cohere" })
                         ] })
                       ]
                     }
                   )
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "apiKey", children: "API Key" }),
+                  /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "apiKey", children: "API Key" }),
                   /* @__PURE__ */ jsx(
-                    Input,
+                    MoonUIInputPro,
                     {
                       id: "apiKey",
                       type: "password",
@@ -45325,31 +45325,31 @@ function RichTextEditor({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "model", children: "Model" }),
+                  /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "model", children: "Model" }),
                   /* @__PURE__ */ jsxs(
-                    Select,
+                    MoonUISelectPro,
                     {
                       value: aiSettings.model,
                       onValueChange: (value) => setAiSettings({ ...aiSettings, model: value }),
                       children: [
-                        /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                        /* @__PURE__ */ jsxs(SelectContent, { children: [
+                        /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
+                        /* @__PURE__ */ jsxs(MoonUISelectContentPro, { children: [
                           aiSettings.provider === "openai" && /* @__PURE__ */ jsxs(Fragment, { children: [
-                            /* @__PURE__ */ jsx(SelectItem, { value: "gpt-4", children: "GPT-4" }),
-                            /* @__PURE__ */ jsx(SelectItem, { value: "gpt-3.5-turbo", children: "GPT-3.5 Turbo" })
+                            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "gpt-4", children: "GPT-4" }),
+                            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "gpt-3.5-turbo", children: "GPT-3.5 Turbo" })
                           ] }),
                           aiSettings.provider === "claude" && /* @__PURE__ */ jsxs(Fragment, { children: [
-                            /* @__PURE__ */ jsx(SelectItem, { value: "claude-3-opus", children: "Claude 3 Opus" }),
-                            /* @__PURE__ */ jsx(SelectItem, { value: "claude-3-sonnet", children: "Claude 3 Sonnet" }),
-                            /* @__PURE__ */ jsx(SelectItem, { value: "claude-3-haiku", children: "Claude 3 Haiku" })
+                            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "claude-3-opus", children: "Claude 3 Opus" }),
+                            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "claude-3-sonnet", children: "Claude 3 Sonnet" }),
+                            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "claude-3-haiku", children: "Claude 3 Haiku" })
                           ] }),
                           aiSettings.provider === "gemini" && /* @__PURE__ */ jsxs(Fragment, { children: [
-                            /* @__PURE__ */ jsx(SelectItem, { value: "gemini-pro", children: "Gemini Pro" }),
-                            /* @__PURE__ */ jsx(SelectItem, { value: "gemini-pro-vision", children: "Gemini Pro Vision" })
+                            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "gemini-pro", children: "Gemini Pro" }),
+                            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "gemini-pro-vision", children: "Gemini Pro Vision" })
                           ] }),
                           aiSettings.provider === "cohere" && /* @__PURE__ */ jsxs(Fragment, { children: [
-                            /* @__PURE__ */ jsx(SelectItem, { value: "command", children: "Command" }),
-                            /* @__PURE__ */ jsx(SelectItem, { value: "command-light", children: "Command Light" })
+                            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "command", children: "Command" }),
+                            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "command-light", children: "Command Light" })
                           ] })
                         ] })
                       ]
@@ -45358,9 +45358,9 @@ function RichTextEditor({
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
                   /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "temperature", children: "Temperature" }),
+                    /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "temperature", children: "Temperature" }),
                     /* @__PURE__ */ jsx(
-                      Input,
+                      MoonUIInputPro,
                       {
                         id: "temperature",
                         type: "number",
@@ -45373,9 +45373,9 @@ function RichTextEditor({
                     )
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "maxTokens", children: "Max Tokens" }),
+                    /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "maxTokens", children: "Max Tokens" }),
                     /* @__PURE__ */ jsx(
-                      Input,
+                      MoonUIInputPro,
                       {
                         id: "maxTokens",
                         type: "number",
@@ -45388,7 +45388,7 @@ function RichTextEditor({
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { onClick: () => {
+              /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(MoonUIButtonPro2, { onClick: () => {
                 setIsAiSettingsOpen(false);
                 toast({
                   title: "Settings saved",
@@ -45400,17 +45400,17 @@ function RichTextEditor({
         ] })
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsx(Dialog, { open: isTableBorderDialogOpen, onOpenChange: setIsTableBorderDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { children: "Table Border Settings" }),
-        /* @__PURE__ */ jsx(DialogDescription, { children: "Customize the appearance of table borders." })
+    /* @__PURE__ */ jsx(MoonUIDialogPro, { open: isTableBorderDialogOpen, onOpenChange: setIsTableBorderDialogOpen, children: /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: "sm:max-w-[425px]", children: [
+      /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
+        /* @__PURE__ */ jsx(MoonUIDialogTitlePro, { children: "Table Border Settings" }),
+        /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: "Customize the appearance of table borders." })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "grid gap-6 py-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "border-width", children: "Border Width" }),
+          /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "border-width", children: "Border Width" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
             /* @__PURE__ */ jsx(
-              Slider,
+              MoonUISliderPro,
               {
                 id: "border-width",
                 min: 0,
@@ -45428,10 +45428,10 @@ function RichTextEditor({
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "border-color", children: "Border Color" }),
+          /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "border-color", children: "Border Color" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(
-              ColorPicker,
+              MoonUIColorPickerPro,
               {
                 value: tableBorderColor,
                 onChange: setTableBorderColor,
@@ -45444,23 +45444,23 @@ function RichTextEditor({
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "border-style", children: "Border Style" }),
-          /* @__PURE__ */ jsxs(Select, { value: tableBorderStyle, onValueChange: setTableBorderStyle, children: [
-            /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsxs(SelectContent, { children: [
-              /* @__PURE__ */ jsx(SelectItem, { value: "solid", children: "Solid" }),
-              /* @__PURE__ */ jsx(SelectItem, { value: "dashed", children: "Dashed" }),
-              /* @__PURE__ */ jsx(SelectItem, { value: "dotted", children: "Dotted" }),
-              /* @__PURE__ */ jsx(SelectItem, { value: "double", children: "Double" }),
-              /* @__PURE__ */ jsx(SelectItem, { value: "groove", children: "Groove" }),
-              /* @__PURE__ */ jsx(SelectItem, { value: "ridge", children: "Ridge" }),
-              /* @__PURE__ */ jsx(SelectItem, { value: "inset", children: "Inset" }),
-              /* @__PURE__ */ jsx(SelectItem, { value: "outset", children: "Outset" })
+          /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "border-style", children: "Border Style" }),
+          /* @__PURE__ */ jsxs(MoonUISelectPro, { value: tableBorderStyle, onValueChange: setTableBorderStyle, children: [
+            /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
+            /* @__PURE__ */ jsxs(MoonUISelectContentPro, { children: [
+              /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "solid", children: "Solid" }),
+              /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "dashed", children: "Dashed" }),
+              /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "dotted", children: "Dotted" }),
+              /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "double", children: "Double" }),
+              /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "groove", children: "Groove" }),
+              /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "ridge", children: "Ridge" }),
+              /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "inset", children: "Inset" }),
+              /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "outset", children: "Outset" })
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
-          /* @__PURE__ */ jsx(Label, { children: "Preview" }),
+          /* @__PURE__ */ jsx(MoonUILabelPro2, { children: "Preview" }),
           /* @__PURE__ */ jsx("div", { className: "p-4 bg-gray-50 dark:bg-gray-900 rounded-lg", children: /* @__PURE__ */ jsxs(
             "table",
             {
@@ -45522,8 +45522,8 @@ function RichTextEditor({
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setIsTableBorderDialogOpen(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { onClick: () => {
+        /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "outline", onClick: () => setIsTableBorderDialogOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx(MoonUIButtonPro2, { onClick: () => {
           applyTableBorders(tableBorderWidth, tableBorderColor, tableBorderStyle);
           setIsTableBorderDialogOpen(false);
           toast({
@@ -46239,13 +46239,13 @@ function Timeline({
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
                 showRelativeTime ? /* @__PURE__ */ jsx("span", { children: getRelativeTime(event.date) }) : /* @__PURE__ */ jsx("span", { children: formatTime(event.date) }),
-                /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn$1("text-xs", textColor), children: event.type })
+                /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "outline", className: cn$1("text-xs", textColor), children: event.type })
               ] })
             ] }),
             showUserInfo && event.user && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-              /* @__PURE__ */ jsxs(Avatar, { className: "h-6 w-6", children: [
-                /* @__PURE__ */ jsx(AvatarImage, { src: event.user.avatar }),
-                /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(event.user.name) })
+              /* @__PURE__ */ jsxs(MoonUIAvatarPro, { className: "h-6 w-6", children: [
+                /* @__PURE__ */ jsx(MoonUIAvatarImagePro, { src: event.user.avatar }),
+                /* @__PURE__ */ jsx(MoonUIAvatarFallbackPro, { className: "text-xs", children: getInitials(event.user.name) })
               ] }),
               /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: event.user.name })
             ] }),
@@ -46271,7 +46271,7 @@ function Timeline({
                 /* @__PURE__ */ jsx("span", { children: "View details" })
               ] })
             ] }),
-            event.metadata?.tags && event.metadata.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2", children: event.metadata.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tagIndex)) })
+            event.metadata?.tags && event.metadata.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2", children: event.metadata.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "text-xs", children: tag }, tagIndex)) })
           ] })
         ]
       },
@@ -46285,20 +46285,20 @@ function Timeline({
       events2.map((event, index) => renderEvent(event, index, index === events2.length - 1))
     ] }, date));
   };
-  return /* @__PURE__ */ jsxs(Card, { className: cn$1("w-full", className), children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn$1("w-full", className), children: [
+    /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { children: [
+      /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(Clock, { className: "h-5 w-5" }),
         "Timeline"
       ] }),
-      /* @__PURE__ */ jsxs(CardDescription, { children: [
+      /* @__PURE__ */ jsxs(MoonUICardDescriptionPro, { children: [
         sortedEvents.length,
         " event",
         sortedEvents.length !== 1 ? "s" : "",
         " tracked"
       ] })
     ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: sortedEvents.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn$1(
+    /* @__PURE__ */ jsx(MoonUICardContentPro, { children: sortedEvents.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn$1(
       "space-y-0",
       orientation === "horizontal" && "flex overflow-x-auto gap-6"
     ), children: groupByDate ? renderGroupedEvents() : sortedEvents.map(
@@ -46526,24 +46526,24 @@ function AdvancedChart({
     }
   };
   if (loading) {
-    return /* @__PURE__ */ jsx(Card, { className: cn$1("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "flex items-center justify-center", style: { height }, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn$1("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "flex items-center justify-center", style: { height }, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
       /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 animate-spin" }),
       /* @__PURE__ */ jsx("span", { children: "Loading chart..." })
     ] }) }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx(Card, { className: cn$1("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "flex items-center justify-center", style: { height }, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn$1("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "flex items-center justify-center", style: { height }, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx("p", { className: "text-destructive mb-2", children: error }),
-      onRefresh && /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onRefresh, children: [
+      onRefresh && /* @__PURE__ */ jsxs(MoonUIButtonPro2, { variant: "outline", onClick: onRefresh, children: [
         /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
         "Retry"
       ] })
     ] }) }) });
   }
-  return /* @__PURE__ */ jsxs(Card, { className: cn$1("w-full", className), ref: chartRef, children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+  return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn$1("w-full", className), ref: chartRef, children: [
+    /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxs(CardTitle, { className: "text-base font-medium", children: [
+        /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "text-base font-medium", children: [
           title,
           trend && /* @__PURE__ */ jsxs("span", { className: "ml-2 inline-flex items-center", children: [
             trend.direction === "up" && /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-green-500" }),
@@ -46563,13 +46563,13 @@ function AdvancedChart({
         subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtitle })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
-        onRefresh && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onRefresh, children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }) }),
-        onExport && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleExport("png"), children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsFullscreen(!isFullscreen), children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" }) })
+        onRefresh && /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "ghost", size: "sm", onClick: onRefresh, children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }) }),
+        onExport && /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "ghost", size: "sm", onClick: () => handleExport("png"), children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "ghost", size: "sm", onClick: () => setIsFullscreen(!isFullscreen), children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: responsive ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: renderChart() }) : /* @__PURE__ */ jsx("div", { style: { width: "100%", height: `${height}px` }, children: renderChart() }) })
+    /* @__PURE__ */ jsx(MoonUICardContentPro, { children: responsive ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: renderChart() }) : /* @__PURE__ */ jsx("div", { style: { width: "100%", height: `${height}px` }, children: renderChart() }) })
   ] });
 }
 var METRIC_COLORS = {
@@ -46643,7 +46643,7 @@ function Dashboard({
   const renderMetricCard = (metric) => {
     const colorClass = metric.color ? METRIC_COLORS[metric.color] : "text-foreground";
     return /* @__PURE__ */ jsxs(
-      Card,
+      MoonUICardPro,
       {
         className: cn$1(
           "cursor-pointer hover:shadow-md transition-shadow",
@@ -46651,11 +46651,11 @@ function Dashboard({
         ),
         onClick: () => onMetricClick?.(metric),
         children: [
-          /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-            /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: metric.title }),
+          /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+            /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-sm font-medium", children: metric.title }),
             /* @__PURE__ */ jsx("div", { className: cn$1("h-4 w-4", colorClass), children: metric.icon })
           ] }),
-          /* @__PURE__ */ jsxs(CardContent, { children: [
+          /* @__PURE__ */ jsxs(MoonUICardContentPro, { children: [
             /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: formatValue(metric.value) }),
             metric.change && /* @__PURE__ */ jsxs("div", { className: cn$1(
               "flex items-center text-xs mt-1",
@@ -46677,14 +46677,14 @@ function Dashboard({
   };
   const renderWidget = (widget) => {
     const sizeClass = WIDGET_SIZES[widget.size || "md"];
-    return /* @__PURE__ */ jsxs(Card, { className: cn$1("h-fit", sizeClass), children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn$1("h-fit", sizeClass), children: [
+      /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: widget.title }),
-          widget.description && /* @__PURE__ */ jsx(CardDescription, { className: "mt-1", children: widget.description })
+          /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base", children: widget.title }),
+          widget.description && /* @__PURE__ */ jsx(MoonUICardDescriptionPro, { className: "mt-1", children: widget.description })
         ] }),
         /* @__PURE__ */ jsx(
-          Button,
+          MoonUIButtonPro2,
           {
             variant: "ghost",
             size: "sm",
@@ -46693,7 +46693,7 @@ function Dashboard({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx(CardContent, { children: widget.loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary" }) }) : widget.error ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 text-destructive", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: widget.error }) }) : widget.content })
+      /* @__PURE__ */ jsx(MoonUICardContentPro, { children: widget.loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary" }) }) : widget.error ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 text-destructive", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: widget.error }) }) : widget.content })
     ] }, widget.id);
   };
   const defaultMetrics = [
@@ -46744,7 +46744,7 @@ function Dashboard({
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
       ] }),
       refreshable && /* @__PURE__ */ jsxs(
-        Button,
+        MoonUIButtonPro2,
         {
           variant: "outline",
           onClick: handleRefresh,
@@ -46759,15 +46759,15 @@ function Dashboard({
     /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: displayMetrics.map(renderMetricCard) }),
     widgets.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: widgets.map(renderWidget) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-4 border-t", children: [
-      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+      /* @__PURE__ */ jsxs(MoonUIButtonPro2, { variant: "outline", size: "sm", children: [
         /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-2" }),
         "Export Data"
       ] }),
-      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+      /* @__PURE__ */ jsxs(MoonUIButtonPro2, { variant: "outline", size: "sm", children: [
         /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4 mr-2" }),
         "Schedule Report"
       ] }),
-      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+      /* @__PURE__ */ jsxs(MoonUIButtonPro2, { variant: "outline", size: "sm", children: [
         /* @__PURE__ */ jsx(Star, { className: "h-4 w-4 mr-2" }),
         "Save View"
       ] })
@@ -46850,7 +46850,7 @@ function DraggableList({
     }
   ) });
 }
-var checkboxVariants = cva(
+cva(
   "peer shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary-foreground",
   {
     variants: {
@@ -46888,7 +46888,7 @@ var checkboxVariants = cva(
     }
   }
 );
-var Checkbox = React16.forwardRef(({
+var MoonUICheckboxPro2 = React16.forwardRef(({
   className,
   variant,
   size,
@@ -46999,7 +46999,7 @@ var CheckboxWithLabel = React16.forwardRef(({
   ] });
 });
 CheckboxWithLabel.displayName = "CheckboxWithLabel";
-var Switch = React16.forwardRef(({ className, size = "md", variant = "primary", loading, leftIcon, rightIcon, description, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
+var MoonUISwitchPro = React16.forwardRef(({ className, size = "md", variant = "primary", loading, leftIcon, rightIcon, description, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
   leftIcon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: leftIcon }),
   /* @__PURE__ */ jsxs(
     SwitchPrimitives.Root,
@@ -47124,7 +47124,7 @@ var AdvancedFormsInternal = ({
         transition: { delay: index * 0.1 },
         className: "space-y-2",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs(Label, { htmlFor: field.name, className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs(MoonUILabelPro2, { htmlFor: field.name, className: "flex items-center gap-2", children: [
             field.label,
             field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" }),
             isTouched && !error && /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-500" }),
@@ -47132,7 +47132,7 @@ var AdvancedFormsInternal = ({
           ] }) }),
           /* @__PURE__ */ jsxs("div", { className: "relative", children: [
             field.type === "text" || field.type === "email" || field.type === "number" || field.type === "url" || field.type === "tel" && /* @__PURE__ */ jsx(
-              Input,
+              MoonUIInputPro,
               {
                 id: field.name,
                 type: field.type,
@@ -47158,7 +47158,7 @@ var AdvancedFormsInternal = ({
             ),
             field.type === "password" && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsx(
-                Input,
+                MoonUIInputPro,
                 {
                   id: field.name,
                   type: showPasswords[field.name] ? "text" : "password",
@@ -47174,7 +47174,7 @@ var AdvancedFormsInternal = ({
                 }
               ),
               /* @__PURE__ */ jsx(
-                Button,
+                MoonUIButtonPro2,
                 {
                   type: "button",
                   variant: "ghost",
@@ -47186,7 +47186,7 @@ var AdvancedFormsInternal = ({
               )
             ] }),
             field.type === "textarea" && /* @__PURE__ */ jsx(
-              Textarea,
+              MoonUITextareaPro,
               {
                 id: field.name,
                 placeholder: field.placeholder,
@@ -47202,37 +47202,37 @@ var AdvancedFormsInternal = ({
               }
             ),
             field.type === "select" && /* @__PURE__ */ jsxs(
-              Select,
+              MoonUISelectPro,
               {
                 onValueChange: (value) => setValue(field.name, value),
                 defaultValue: field.defaultValue,
                 children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { className: cn(error && "border-destructive"), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: field.placeholder }) }),
-                  /* @__PURE__ */ jsx(SelectContent, { children: field.options?.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                  /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { className: cn(error && "border-destructive"), children: /* @__PURE__ */ jsx(MoonUISelectValuePro, { placeholder: field.placeholder }) }),
+                  /* @__PURE__ */ jsx(MoonUISelectContentPro, { children: field.options?.map((option) => /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: option.value, children: option.label }, option.value)) })
                 ]
               }
             ),
             field.type === "checkbox" && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
               /* @__PURE__ */ jsx(
-                Checkbox,
+                MoonUICheckboxPro2,
                 {
                   id: field.name,
                   ...register(field.name),
                   onCheckedChange: (checked) => setValue(field.name, checked)
                 }
               ),
-              /* @__PURE__ */ jsx(Label, { htmlFor: field.name, className: "text-sm", children: field.placeholder || "Check this option" })
+              /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: field.name, className: "text-sm", children: field.placeholder || "Check this option" })
             ] }),
             field.type === "switch" && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
               /* @__PURE__ */ jsx(
-                Switch,
+                MoonUISwitchPro,
                 {
                   id: field.name,
                   ...register(field.name),
                   onCheckedChange: (checked) => setValue(field.name, checked)
                 }
               ),
-              /* @__PURE__ */ jsx(Label, { htmlFor: field.name, className: "text-sm", children: field.placeholder || "Toggle this option" })
+              /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: field.name, className: "text-sm", children: field.placeholder || "Toggle this option" })
             ] }),
             field.type === "file" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
               /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ jsxs(
@@ -47264,7 +47264,7 @@ var AdvancedFormsInternal = ({
               uploadedFiles[field.name] && uploadedFiles[field.name].length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: uploadedFiles[field.name].map((file, index2) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-2 bg-muted rounded-md", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-sm truncate", children: file.name }),
                 /* @__PURE__ */ jsx(
-                  Button,
+                  MoonUIButtonPro2,
                   {
                     type: "button",
                     variant: "ghost",
@@ -47293,14 +47293,14 @@ var AdvancedFormsInternal = ({
     );
   };
   const gridClassName = layout === "grid" ? `grid grid-cols-1 md:grid-cols-${columns} gap-6` : "space-y-6";
-  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full max-w-4xl", className), children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
+  return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full max-w-4xl", className), children: [
+    /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(CardTitle, { children: title }),
-          description && /* @__PURE__ */ jsx(CardDescription, { children: description })
+          /* @__PURE__ */ jsx(MoonUICardTitlePro, { children: title }),
+          description && /* @__PURE__ */ jsx(MoonUICardDescriptionPro, { children: description })
         ] }),
-        /* @__PURE__ */ jsx(Badge, { variant: "pro", className: "ml-2", children: "PRO" })
+        /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "pro", className: "ml-2", children: "PRO" })
       ] }),
       showProgress && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
@@ -47321,7 +47321,7 @@ var AdvancedFormsInternal = ({
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(MoonUICardContentPro, { children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), className: "space-y-6", children: [
       /* @__PURE__ */ jsx("div", { className: gridClassName, children: fields.map((field, index) => renderField(field, index)) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-6", children: [
         /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
@@ -47331,7 +47331,7 @@ var AdvancedFormsInternal = ({
           " fields completed"
         ] }),
         /* @__PURE__ */ jsx(
-          Button,
+          MoonUIButtonPro2,
           {
             type: "submit",
             disabled: isSubmitting || !isValid,
@@ -47353,12 +47353,12 @@ var AdvancedFormsInternal = ({
 var AdvancedForms = ({ className, ...props }) => {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Advanced Forms is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) })
@@ -47547,9 +47547,9 @@ var ColorPickerInternal = ({
     setInputValue(value);
     onChange?.(value);
   };
-  return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      Button,
+  return /* @__PURE__ */ jsxs(MoonUIPopoverPro, { children: [
+    /* @__PURE__ */ jsx(MoonUIPopoverTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
+      MoonUIButtonPro2,
       {
         variant: "outline",
         className: cn(
@@ -47568,9 +47568,9 @@ var ColorPickerInternal = ({
         )
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-80 p-4", side: "bottom", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(MoonUIPopoverContentPro, { className: "w-80 p-4", side: "bottom", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Label, { children: "Color" }),
+        /* @__PURE__ */ jsx(MoonUILabelPro2, { children: "Color" }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -47599,7 +47599,7 @@ var ColorPickerInternal = ({
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Label, { children: "Hue" }),
+        /* @__PURE__ */ jsx(MoonUILabelPro2, { children: "Hue" }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -47624,7 +47624,7 @@ var ColorPickerInternal = ({
         )
       ] }),
       showAlpha && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Label, { children: "Opacity" }),
+        /* @__PURE__ */ jsx(MoonUILabelPro2, { children: "Opacity" }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -47651,9 +47651,9 @@ var ColorPickerInternal = ({
       ] }),
       showInput && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "color-input", children: "Hex" }),
+          /* @__PURE__ */ jsx(MoonUILabelPro2, { htmlFor: "color-input", children: "Hex" }),
           /* @__PURE__ */ jsx(
-            Input,
+            MoonUIInputPro,
             {
               id: "color-input",
               value: inputValue,
@@ -47664,9 +47664,9 @@ var ColorPickerInternal = ({
           )
         ] }),
         showCopy && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx(Label, { children: "\xA0" }),
+          /* @__PURE__ */ jsx(MoonUILabelPro2, { children: "\xA0" }),
           /* @__PURE__ */ jsx(
-            Button,
+            MoonUIButtonPro2,
             {
               variant: "outline",
               size: "sm",
@@ -47677,9 +47677,9 @@ var ColorPickerInternal = ({
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx(Label, { children: "\xA0" }),
+          /* @__PURE__ */ jsx(MoonUILabelPro2, { children: "\xA0" }),
           /* @__PURE__ */ jsx(
-            Button,
+            MoonUIButtonPro2,
             {
               variant: "outline",
               size: "sm",
@@ -47691,7 +47691,7 @@ var ColorPickerInternal = ({
         ] })
       ] }),
       showPresets && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Label, { children: "Presets" }),
+        /* @__PURE__ */ jsx(MoonUILabelPro2, { children: "Presets" }),
         /* @__PURE__ */ jsx("div", { className: "grid grid-cols-8 gap-2", children: presetColors.map((color, index) => /* @__PURE__ */ jsx(
           motion.button,
           {
@@ -47710,15 +47710,15 @@ var ColorPickerInternal = ({
     ] }) })
   ] });
 };
-var ColorPicker2 = ({ className, ...props }) => {
+var ColorPicker = ({ className, ...props }) => {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Color Picker is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) })
@@ -47842,14 +47842,14 @@ var GitHubStarsInternal = ({
     return colors[language || ""] || "#6b7280";
   };
   if (loading) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-48" }),
         /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: cn(
         layout === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" : "space-y-4"
-      ), children: Array.from({ length: maxItems || 6 }).map((_, index) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      ), children: Array.from({ length: maxItems || 6 }).map((_, index) => /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-3/4" }),
         /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
         /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }),
@@ -47862,19 +47862,19 @@ var GitHubStarsInternal = ({
     ] }) }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "p-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "text-destructive", children: [
         /* @__PURE__ */ jsx(Github, { className: "h-12 w-12 mx-auto mb-2" }),
         /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: "Failed to load repositories" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: error })
       ] }),
-      /* @__PURE__ */ jsxs(Button, { onClick: fetchRepositories, variant: "outline", children: [
+      /* @__PURE__ */ jsxs(MoonUIButtonPro2, { onClick: fetchRepositories, variant: "outline", children: [
         /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-2" }),
         "Try Again"
       ] })
     ] }) }) });
   }
-  return /* @__PURE__ */ jsx(Card, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+  return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx(Github, { className: "h-6 w-6" }),
@@ -47890,12 +47890,12 @@ var GitHubStarsInternal = ({
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+        /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "outline", children: [
           repos.length,
           " repos"
         ] }),
-        autoRefresh && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Auto-refresh" }),
-        /* @__PURE__ */ jsx(Button, { onClick: fetchRepositories, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) })
+        autoRefresh && /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", children: "Auto-refresh" }),
+        /* @__PURE__ */ jsx(MoonUIButtonPro2, { onClick: fetchRepositories, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) })
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: cn(
@@ -47908,18 +47908,18 @@ var GitHubStarsInternal = ({
         exit: { opacity: 0, y: -20 },
         transition: { delay: index * 0.1 },
         children: /* @__PURE__ */ jsx(
-          Card,
+          MoonUICardPro,
           {
             className: "h-full hover:shadow-md transition-shadow cursor-pointer group",
             onClick: () => onRepositoryClick?.(repo),
-            children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                   /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm group-hover:text-primary transition-colors", children: repo.name }),
                   showOwner && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: repo.owner.login })
                 ] }),
                 /* @__PURE__ */ jsx(
-                  Button,
+                  MoonUIButtonPro2,
                   {
                     variant: "ghost",
                     size: "sm",
@@ -47934,8 +47934,8 @@ var GitHubStarsInternal = ({
               ] }),
               showDescription && repo.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground line-clamp-2", children: repo.description }),
               showTopics && repo.topics.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
-                repo.topics.slice(0, 3).map((topic) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: topic }, topic)),
-                repo.topics.length > 3 && /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "text-xs", children: [
+                repo.topics.slice(0, 3).map((topic) => /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "text-xs", children: topic }, topic)),
+                repo.topics.length > 3 && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "outline", className: "text-xs", children: [
                   "+",
                   repo.topics.length - 3
                 ] })
@@ -47979,12 +47979,12 @@ var GitHubStarsInternal = ({
 var GitHubStars = ({ className, ...props }) => {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "GitHub Stars is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) })
@@ -48137,16 +48137,16 @@ var HealthCheckInternal = ({
   const overallStatus = getOverallStatus();
   const healthyCount = results.filter((r2) => r2.status === "healthy").length;
   const overallUptime = results.length > 0 ? results.reduce((acc, result) => acc + calculateUptime(result.id), 0) / results.length : 0;
-  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
+  return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(Activity, { className: "h-6 w-6" }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "flex items-center gap-2", children: [
               "System Health",
               /* @__PURE__ */ jsx(
-                Badge,
+                MoonUIBadgePro,
                 {
                   variant: overallStatus === "healthy" ? "secondary" : "destructive",
                   className: cn(
@@ -48159,7 +48159,7 @@ var HealthCheckInternal = ({
                 }
               )
             ] }),
-            lastCheck && /* @__PURE__ */ jsxs(CardDescription, { children: [
+            lastCheck && /* @__PURE__ */ jsxs(MoonUICardDescriptionPro, { children: [
               "Last checked: ",
               lastCheck.toLocaleTimeString()
             ] })
@@ -48174,7 +48174,7 @@ var HealthCheckInternal = ({
             /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Uptime" })
           ] }),
           /* @__PURE__ */ jsx(
-            Button,
+            MoonUIButtonPro2,
             {
               onClick: checkAllEndpoints,
               disabled: isChecking,
@@ -48206,7 +48206,7 @@ var HealthCheckInternal = ({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(MoonUICardContentPro, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx(AnimatePresence, { children: results.map((result, index) => /* @__PURE__ */ jsx(
         motion.div,
         {
@@ -48214,7 +48214,7 @@ var HealthCheckInternal = ({
           animate: { opacity: 1, x: 0 },
           exit: { opacity: 0, x: 20 },
           transition: { delay: index * 0.05 },
-          children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+          children: /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                 getStatusIcon(result.status),
@@ -48272,12 +48272,12 @@ var HealthCheckInternal = ({
 var HealthCheck = ({ className, ...props }) => {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Health Check is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) })
@@ -48493,12 +48493,12 @@ function LazyList({
 var LazyComponent = ({ className, ...props }) => {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Lazy Component is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) })
@@ -48665,7 +48665,7 @@ var OptimizedImageInternal = ({
           children: [
             /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: [
               showInfo && /* @__PURE__ */ jsx(
-                Button,
+                MoonUIButtonPro2,
                 {
                   size: "sm",
                   variant: "secondary",
@@ -48675,7 +48675,7 @@ var OptimizedImageInternal = ({
                 }
               ),
               showDownload && /* @__PURE__ */ jsx(
-                Button,
+                MoonUIButtonPro2,
                 {
                   size: "sm",
                   variant: "secondary",
@@ -48685,7 +48685,7 @@ var OptimizedImageInternal = ({
                 }
               ),
               showPreview && /* @__PURE__ */ jsx(
-                Button,
+                MoonUIButtonPro2,
                 {
                   size: "sm",
                   variant: "secondary",
@@ -48737,7 +48737,7 @@ var OptimizedImageInternal = ({
           /* @__PURE__ */ jsxs("div", { className: "absolute top-4 right-4 flex gap-2 z-10", children: [
             showZoom && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
-                Button,
+                MoonUIButtonPro2,
                 {
                   size: "sm",
                   variant: "secondary",
@@ -48746,12 +48746,12 @@ var OptimizedImageInternal = ({
                   children: /* @__PURE__ */ jsx(ZoomOut, { className: "h-4 w-4" })
                 }
               ),
-              /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "px-2", children: [
+              /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", className: "px-2", children: [
                 Math.round(currentZoom * 100),
                 "%"
               ] }),
               /* @__PURE__ */ jsx(
-                Button,
+                MoonUIButtonPro2,
                 {
                   size: "sm",
                   variant: "secondary",
@@ -48761,7 +48761,7 @@ var OptimizedImageInternal = ({
                 }
               ),
               /* @__PURE__ */ jsx(
-                Button,
+                MoonUIButtonPro2,
                 {
                   size: "sm",
                   variant: "secondary",
@@ -48771,7 +48771,7 @@ var OptimizedImageInternal = ({
               )
             ] }),
             /* @__PURE__ */ jsx(
-              Button,
+              MoonUIButtonPro2,
               {
                 size: "sm",
                 variant: "secondary",
@@ -48804,12 +48804,12 @@ var OptimizedImageInternal = ({
 var OptimizedImage = ({ className, ...props }) => {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Optimized Image is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) })
@@ -48914,7 +48914,7 @@ var PROGRESS_NAME = "Progress";
 var DEFAULT_MAX = 100;
 var [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);
 var [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
-var Progress = React16.forwardRef(
+var Progress2 = React16.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeProgress,
@@ -48949,7 +48949,7 @@ var Progress = React16.forwardRef(
     ) });
   }
 );
-Progress.displayName = PROGRESS_NAME;
+Progress2.displayName = PROGRESS_NAME;
 var INDICATOR_NAME = "ProgressIndicator";
 var ProgressIndicator = React16.forwardRef(
   (props, forwardedRef) => {
@@ -48994,9 +48994,9 @@ function getInvalidValueError(propValue, componentName) {
 
 Defaulting to \`null\`.`;
 }
-var Root11 = Progress;
+var Root11 = Progress2;
 var Indicator2 = ProgressIndicator;
-var Progress2 = React16.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
+var MoonUIProgressPro = React16.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
   Root11,
   {
     ref,
@@ -49014,8 +49014,8 @@ var Progress2 = React16.forwardRef(({ className, value, ...props }, ref) => /* @
     )
   }
 ));
-Progress2.displayName = Root11.displayName;
-var Tabs = React16.forwardRef(({ vertical = false, ...props }, ref) => /* @__PURE__ */ jsx(
+Progress.displayName = Root11.displayName;
+var MoonUITabsPro = React16.forwardRef(({ vertical = false, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Root,
   {
     ref,
@@ -49050,7 +49050,7 @@ var tabsListVariants = cva(
     }
   }
 );
-var TabsList = React16.forwardRef(({ className, variant, orientation, fullWidth, ...props }, ref) => /* @__PURE__ */ jsx(
+var MoonUITabsListPro = React16.forwardRef(({ className, variant, orientation, fullWidth, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
@@ -49091,7 +49091,7 @@ var tabsTriggerVariants = cva(
     }
   }
 );
-var TabsTrigger = React16.forwardRef(({
+var MoonUITabsTriggerPro = React16.forwardRef(({
   className,
   variant,
   size,
@@ -49122,7 +49122,7 @@ var TabsTrigger = React16.forwardRef(({
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React16.forwardRef(({ className, animated = false, ...props }, ref) => /* @__PURE__ */ jsx(
+var MoonUITabsContentPro = React16.forwardRef(({ className, animated = false, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -49377,7 +49377,7 @@ var PerformanceDebuggerInternal = ({
   };
   if (!isVisible) {
     return /* @__PURE__ */ jsxs(
-      Button,
+      MoonUIButtonPro2,
       {
         variant: "outline",
         size: "sm",
@@ -49390,22 +49390,22 @@ var PerformanceDebuggerInternal = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full max-w-4xl", className), children: [
-    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full max-w-4xl", className), children: [
+    /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(Zap, { className: "h-5 w-5" }),
           "Performance Debugger"
         ] }),
-        /* @__PURE__ */ jsx(CardDescription, { children: "Real-time performance monitoring and web vitals tracking" })
+        /* @__PURE__ */ jsx(MoonUICardDescriptionPro, { children: "Real-time performance monitoring and web vitals tracking" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(Badge, { variant: isCapturing ? "secondary" : "secondary", className: "gap-1", children: [
+        /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: isCapturing ? "secondary" : "secondary", className: "gap-1", children: [
           isCapturing ? /* @__PURE__ */ jsx(Activity, { className: "h-3 w-3 animate-pulse" }) : /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
           isCapturing ? "Live" : "Paused"
         ] }),
         /* @__PURE__ */ jsx(
-          Button,
+          MoonUIButtonPro2,
           {
             variant: "outline",
             size: "sm",
@@ -49414,7 +49414,7 @@ var PerformanceDebuggerInternal = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          Button,
+          MoonUIButtonPro2,
           {
             variant: "outline",
             size: "sm",
@@ -49423,7 +49423,7 @@ var PerformanceDebuggerInternal = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          Button,
+          MoonUIButtonPro2,
           {
             variant: "outline",
             size: "sm",
@@ -49432,7 +49432,7 @@ var PerformanceDebuggerInternal = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          Button,
+          MoonUIButtonPro2,
           {
             variant: "ghost",
             size: "sm",
@@ -49442,13 +49442,13 @@ var PerformanceDebuggerInternal = ({
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "current", className: "w-full", children: [
-      /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-3", children: [
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "current", children: "Current Metrics" }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "history", children: "History" }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "vitals", children: "Web Vitals" })
+    /* @__PURE__ */ jsx(MoonUICardContentPro, { children: /* @__PURE__ */ jsxs(MoonUITabsPro, { defaultValue: "current", className: "w-full", children: [
+      /* @__PURE__ */ jsxs(MoonUITabsListPro, { className: "grid w-full grid-cols-3", children: [
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "current", children: "Current Metrics" }),
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "history", children: "History" }),
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "vitals", children: "Web Vitals" })
       ] }),
-      /* @__PURE__ */ jsx(TabsContent, { value: "current", className: "space-y-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: /* @__PURE__ */ jsx(AnimatePresence, { children: currentMetrics.map((metric, index) => {
+      /* @__PURE__ */ jsx(MoonUITabsContentPro, { value: "current", className: "space-y-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: /* @__PURE__ */ jsx(AnimatePresence, { children: currentMetrics.map((metric, index) => {
         const status = getMetricStatus(metric);
         return /* @__PURE__ */ jsx(
           motion.div,
@@ -49457,7 +49457,7 @@ var PerformanceDebuggerInternal = ({
             animate: { opacity: 1, y: 0 },
             exit: { opacity: 0, y: -20 },
             transition: { delay: index * 0.05 },
-            children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+            children: /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "p-4", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   getStatusIcon(status),
@@ -49467,7 +49467,7 @@ var PerformanceDebuggerInternal = ({
               ] }),
               metric.threshold && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
                 /* @__PURE__ */ jsx(
-                  Progress2,
+                  MoonUIProgressPro,
                   {
                     value: Math.min(metric.value / (metric.threshold.needs_improvement * 2) * 100, 100),
                     className: "h-2"
@@ -49488,18 +49488,18 @@ var PerformanceDebuggerInternal = ({
           metric.name
         );
       }) }) }) }),
-      /* @__PURE__ */ jsxs(TabsContent, { value: "history", className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs(MoonUITabsContentPro, { value: "history", className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
             entries.length,
             " entries captured"
           ] }),
-          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: clearData, children: "Clear History" })
+          /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "outline", size: "sm", onClick: clearData, children: "Clear History" })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-96 overflow-y-auto", children: entries.map((entry, index) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-96 overflow-y-auto", children: entries.map((entry, index) => /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "p-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
             /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: new Date(entry.timestamp).toLocaleTimeString() }),
-            /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "text-xs", children: [
+            /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "outline", className: "text-xs", children: [
               entry.metrics.length,
               " metrics"
             ] })
@@ -49513,9 +49513,9 @@ var PerformanceDebuggerInternal = ({
           ] }, metric.name)) })
         ] }) }, entry.timestamp)) })
       ] }),
-      /* @__PURE__ */ jsx(TabsContent, { value: "vitals", className: "space-y-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: currentMetrics.filter((metric) => ["FCP", "LCP", "CLS", "FID", "INP", "TTFB"].includes(metric.name)).map((metric) => {
+      /* @__PURE__ */ jsx(MoonUITabsContentPro, { value: "vitals", className: "space-y-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: currentMetrics.filter((metric) => ["FCP", "LCP", "CLS", "FID", "INP", "TTFB"].includes(metric.name)).map((metric) => {
         const status = getMetricStatus(metric);
-        return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
+        return /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "p-6", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: metric.name }),
@@ -49526,7 +49526,7 @@ var PerformanceDebuggerInternal = ({
           /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold mb-2 text-center", children: /* @__PURE__ */ jsx("span", { className: getStatusColor(status), children: formatValue(metric.value, metric.unit) }) }),
           metric.threshold && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx(
-              Progress2,
+              MoonUIProgressPro,
               {
                 value: Math.min(metric.value / (metric.threshold.needs_improvement * 2) * 100, 100),
                 className: "h-3"
@@ -49553,12 +49553,12 @@ var PerformanceDebuggerInternal = ({
 var PerformanceDebugger = ({ className, ...props }) => {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Performance Debugger is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) })
@@ -49770,7 +49770,7 @@ var PerformanceMonitorInternal = ({
   };
   if (!isVisible) {
     return /* @__PURE__ */ jsxs(
-      Button,
+      MoonUIButtonPro2,
       {
         variant: "outline",
         size: "sm",
@@ -49784,31 +49784,31 @@ var PerformanceMonitorInternal = ({
     );
   }
   if (!metrics) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-full max-w-6xl", className), children: /* @__PURE__ */ jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full max-w-6xl", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx(Activity, { className: "h-12 w-12 animate-pulse mx-auto mb-4 text-muted-foreground" }),
       /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Loading performance metrics..." })
     ] }) }) });
   }
-  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full max-w-6xl", className), children: [
-    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full max-w-6xl", className), children: [
+    /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(Monitor, { className: "h-5 w-5" }),
           "Performance Monitor"
         ] }),
-        /* @__PURE__ */ jsx(CardDescription, { children: "Real-time system performance monitoring and alerts" })
+        /* @__PURE__ */ jsx(MoonUICardDescriptionPro, { children: "Real-time system performance monitoring and alerts" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(Badge, { variant: autoRefresh ? "outline" : "secondary", className: "gap-1", children: [
+        /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: autoRefresh ? "outline" : "secondary", className: "gap-1", children: [
           autoRefresh ? /* @__PURE__ */ jsx(Activity, { className: "h-3 w-3 animate-pulse" }) : /* @__PURE__ */ jsx(Timer, { className: "h-3 w-3" }),
           autoRefresh ? "Live" : "Paused"
         ] }),
-        showAlerts && alerts.length > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "destructive", className: "gap-1", children: [
+        showAlerts && alerts.length > 0 && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "destructive", className: "gap-1", children: [
           /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3" }),
           alerts.length
         ] }),
         /* @__PURE__ */ jsx(
-          Button,
+          MoonUIButtonPro2,
           {
             variant: "outline",
             size: "sm",
@@ -49818,7 +49818,7 @@ var PerformanceMonitorInternal = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          Button,
+          MoonUIButtonPro2,
           {
             variant: "outline",
             size: "sm",
@@ -49827,7 +49827,7 @@ var PerformanceMonitorInternal = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          Button,
+          MoonUIButtonPro2,
           {
             variant: "ghost",
             size: "sm",
@@ -49837,16 +49837,16 @@ var PerformanceMonitorInternal = ({
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "overview", className: "w-full", children: [
-      /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-4", children: [
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "overview", children: "Overview" }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "details", children: "Details" }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "alerts", children: "Alerts" }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "history", children: "History" })
+    /* @__PURE__ */ jsx(MoonUICardContentPro, { children: /* @__PURE__ */ jsxs(MoonUITabsPro, { defaultValue: "overview", className: "w-full", children: [
+      /* @__PURE__ */ jsxs(MoonUITabsListPro, { className: "grid w-full grid-cols-4", children: [
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "overview", children: "Overview" }),
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "details", children: "Details" }),
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "alerts", children: "Alerts" }),
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "history", children: "History" })
       ] }),
-      /* @__PURE__ */ jsxs(TabsContent, { value: "overview", className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs(MoonUITabsContentPro, { value: "overview", className: "space-y-6", children: [
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [
-          /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+          /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(Cpu, { className: "h-4 w-4 text-blue-500" }),
@@ -49870,7 +49870,7 @@ var PerformanceMonitorInternal = ({
               metrics.cpu.temperature && `\u2022 ${metrics.cpu.temperature.toFixed(0)}\xB0C`
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+          /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(MemoryStick, { className: "h-4 w-4 text-green-500" }),
@@ -49894,7 +49894,7 @@ var PerformanceMonitorInternal = ({
               formatBytes(metrics.memory.total * 1024 * 1024 * 1024)
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+          /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(HardDrive, { className: "h-4 w-4 text-purple-500" }),
@@ -49918,7 +49918,7 @@ var PerformanceMonitorInternal = ({
               formatBytes(metrics.disk.total * 1024 * 1024 * 1024)
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+          /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(Network, { className: "h-4 w-4 text-orange-500" }),
@@ -49939,9 +49939,9 @@ var PerformanceMonitorInternal = ({
           ] }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-          /* @__PURE__ */ jsxs(Card, { children: [
-            /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "System Information" }) }),
-            /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs(MoonUICardPro, { children: [
+            /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base", children: "System Information" }) }),
+            /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "space-y-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Uptime:" }),
                 /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatUptime(metrics.system.uptime) })
@@ -49956,9 +49956,9 @@ var PerformanceMonitorInternal = ({
               ] })
             ] })
           ] }),
-          metrics.browser && /* @__PURE__ */ jsxs(Card, { children: [
-            /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Browser Memory" }) }),
-            /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+          metrics.browser && /* @__PURE__ */ jsxs(MoonUICardPro, { children: [
+            /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base", children: "Browser Memory" }) }),
+            /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "space-y-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "JS Heap Used:" }),
                 /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatBytes(metrics.browser.jsHeapUsed * 1024 * 1024) })
@@ -49975,13 +49975,13 @@ var PerformanceMonitorInternal = ({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsx(TabsContent, { value: "details", className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-        /* @__PURE__ */ jsxs(Card, { children: [
-          /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(MoonUITabsContentPro, { value: "details", className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+        /* @__PURE__ */ jsxs(MoonUICardPro, { children: [
+          /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "text-base flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(Cpu, { className: "h-4 w-4" }),
             "CPU Details"
           ] }) }),
-          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "space-y-4", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-2", children: [
                 /* @__PURE__ */ jsx("span", { children: "Usage" }),
@@ -50013,12 +50013,12 @@ var PerformanceMonitorInternal = ({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(Card, { children: [
-          /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(MoonUICardPro, { children: [
+          /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "text-base flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(MemoryStick, { className: "h-4 w-4" }),
             "Memory Details"
           ] }) }),
-          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "space-y-4", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-2", children: [
                 /* @__PURE__ */ jsx("span", { children: "Usage" }),
@@ -50052,14 +50052,14 @@ var PerformanceMonitorInternal = ({
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs(TabsContent, { value: "alerts", className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs(MoonUITabsContentPro, { value: "alerts", className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
             alerts.length,
             " alerts"
           ] }),
           /* @__PURE__ */ jsx(
-            Button,
+            MoonUIButtonPro2,
             {
               variant: "outline",
               size: "sm",
@@ -50076,7 +50076,7 @@ var PerformanceMonitorInternal = ({
             animate: { opacity: 1, x: 0 },
             exit: { opacity: 0, x: 20 },
             transition: { delay: index * 0.05 },
-            children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            children: /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                 alert2.type === "critical" ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500" }) : alert2.type === "warning" ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-yellow-500" }) : /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-blue-500" }),
                 /* @__PURE__ */ jsxs("div", { children: [
@@ -50100,7 +50100,7 @@ var PerformanceMonitorInternal = ({
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No alerts - System is running smoothly" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs(TabsContent, { value: "history", className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs(MoonUITabsContentPro, { value: "history", className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
           "Last ",
           history2.length,
@@ -50109,9 +50109,9 @@ var PerformanceMonitorInternal = ({
           " minutes)"
         ] }),
         showCharts && history2.length > 1 && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-          /* @__PURE__ */ jsxs(Card, { children: [
-            /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "CPU Usage Trend" }) }),
-            /* @__PURE__ */ jsxs(CardContent, { children: [
+          /* @__PURE__ */ jsxs(MoonUICardPro, { children: [
+            /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base", children: "CPU Usage Trend" }) }),
+            /* @__PURE__ */ jsxs(MoonUICardContentPro, { children: [
               /* @__PURE__ */ jsx("div", { className: "h-32 flex items-end justify-between gap-1", children: history2.slice(-20).reverse().map((point, index) => /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -50123,9 +50123,9 @@ var PerformanceMonitorInternal = ({
               /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-2 text-center", children: "Last 20 readings" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs(Card, { children: [
-            /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Memory Usage Trend" }) }),
-            /* @__PURE__ */ jsxs(CardContent, { children: [
+          /* @__PURE__ */ jsxs(MoonUICardPro, { children: [
+            /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base", children: "Memory Usage Trend" }) }),
+            /* @__PURE__ */ jsxs(MoonUICardContentPro, { children: [
               /* @__PURE__ */ jsx("div", { className: "h-32 flex items-end justify-between gap-1", children: history2.slice(-20).reverse().map((point, index) => /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -50149,12 +50149,12 @@ var PerformanceMonitorInternal = ({
 var PerformanceMonitor = ({ className, ...props }) => {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-fit", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-4", children: "Performance Monitor is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) })
@@ -50199,12 +50199,12 @@ function FileUpload({
 }) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "File Upload is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) }) })
@@ -50306,20 +50306,20 @@ function FileUpload({
       fileInputRef.current?.click();
     }
   };
-  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { children: [
+      /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(Upload, { className: "h-5 w-5" }),
         "File Upload"
       ] }),
-      /* @__PURE__ */ jsxs(CardDescription, { children: [
+      /* @__PURE__ */ jsxs(MoonUICardDescriptionPro, { children: [
         multiple ? `Upload up to ${maxFiles} files` : "Upload a file",
         " (max ",
         maxSize,
         "MB each)"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "space-y-4", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -50362,7 +50362,7 @@ function FileUpload({
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: uploadedFile.file.name }),
-              /* @__PURE__ */ jsxs(Badge, { variant: uploadedFile.status === "success" ? "success" : uploadedFile.status === "error" ? "destructive" : "secondary", children: [
+              /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: uploadedFile.status === "success" ? "success" : uploadedFile.status === "error" ? "destructive" : "secondary", children: [
                 uploadedFile.status === "uploading" && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 mr-1 animate-spin" }),
                 uploadedFile.status === "success" && /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3 w-3 mr-1" }),
                 uploadedFile.status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 mr-1" }),
@@ -50386,9 +50386,9 @@ function FileUpload({
             uploadedFile.error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-1", children: uploadedFile.error })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            uploadedFile.status === "success" && showPreview && uploadedFile.file.type.startsWith("image/") && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }) }),
+            uploadedFile.status === "success" && showPreview && uploadedFile.file.type.startsWith("image/") && /* @__PURE__ */ jsx(MoonUIButtonPro2, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }) }),
             /* @__PURE__ */ jsx(
-              Button,
+              MoonUIButtonPro2,
               {
                 variant: "ghost",
                 size: "sm",
@@ -50425,12 +50425,12 @@ function DataTable({
 }) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Data Table is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro2, { size: "sm", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
           "Upgrade to Pro"
         ] }) }) })
@@ -50496,7 +50496,7 @@ function DataTable({
         searchable && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
           /* @__PURE__ */ jsx(
-            Input,
+            MoonUIInputPro,
             {
               placeholder: "Search all columns...",
               value: globalFilter,
@@ -50505,17 +50505,17 @@ function DataTable({
             }
           )
         ] }),
-        filterable && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+        filterable && /* @__PURE__ */ jsxs(MoonUIButtonPro2, { variant: "outline", size: "sm", children: [
           /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }),
           "Filters"
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-        exportable && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: handleExport, children: [
+        exportable && /* @__PURE__ */ jsxs(MoonUIButtonPro2, { variant: "outline", size: "sm", onClick: handleExport, children: [
           /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
           "Export"
         ] }),
-        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+        /* @__PURE__ */ jsxs(MoonUIButtonPro2, { variant: "outline", size: "sm", children: [
           /* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }),
           "Columns"
         ] })
@@ -50585,7 +50585,7 @@ function DataTable({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ jsx(
-            Button,
+            MoonUIButtonPro2,
             {
               variant: "outline",
               className: "hidden h-8 w-8 p-0 lg:flex",
@@ -50595,7 +50595,7 @@ function DataTable({
             }
           ),
           /* @__PURE__ */ jsx(
-            Button,
+            MoonUIButtonPro2,
             {
               variant: "outline",
               className: "h-8 w-8 p-0",
@@ -50605,7 +50605,7 @@ function DataTable({
             }
           ),
           /* @__PURE__ */ jsx(
-            Button,
+            MoonUIButtonPro2,
             {
               variant: "outline",
               className: "h-8 w-8 p-0",
@@ -50615,7 +50615,7 @@ function DataTable({
             }
           ),
           /* @__PURE__ */ jsx(
-            Button,
+            MoonUIButtonPro2,
             {
               variant: "outline",
               className: "hidden h-8 w-8 p-0 lg:flex",
@@ -50639,17 +50639,17 @@ __export(enhanced_exports, {
   CardProContent: () => CardProContent,
   CardProFooter: () => CardProFooter,
   CardProHeader: () => CardProHeader,
-  DialogPro: () => Dialog2,
+  DialogPro: () => Dialog,
   DialogProClose: () => DialogClose,
   DialogProContent: () => DialogProContent,
   DialogProDescription: () => DialogProDescription,
   DialogProFooter: () => DialogProFooter,
   DialogProHeader: () => DialogProHeader,
   DialogProTitle: () => DialogProTitle,
-  DialogProTrigger: () => DialogTrigger2,
+  DialogProTrigger: () => DialogTrigger,
   EnhancedCardDescription: () => EnhancedCardDescription,
   EnhancedCardTitle: () => EnhancedCardTitle,
-  badgeVariants: () => badgeVariants2,
+  badgeVariants: () => badgeVariants,
   enhancedButtonVariants: () => enhancedButtonVariants
 });
 var enhancedButtonVariants = cva(
@@ -51178,8 +51178,8 @@ var CardProFooter = React16__default.forwardRef(({ className, ...props }, ref) =
   }
 ));
 CardProFooter.displayName = "CardProFooter";
-var Dialog2 = DialogPrimitive2.Root;
-var DialogTrigger2 = DialogPrimitive2.Trigger;
+var Dialog = DialogPrimitive2.Root;
+var DialogTrigger = DialogPrimitive2.Trigger;
 var DialogPortal2 = DialogPrimitive2.Portal;
 var DialogClose = DialogPrimitive2.Close;
 var DialogProOverlay = React16.forwardRef(({ className, blur: blur2 = "md", variant = "default", ...props }, ref) => {
@@ -51372,7 +51372,7 @@ var DialogProDescription = React16.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DialogProDescription.displayName = DialogPrimitive2.Description.displayName;
-var badgeVariants2 = cva(
+var badgeVariants = cva(
   [
     "inline-flex items-center gap-1.5",
     "font-medium transition-all duration-200",
@@ -51466,7 +51466,7 @@ var BadgePro = React16__default.forwardRef(({
     {
       ref,
       className: cn(
-        badgeVariants2({ variant, size }),
+        badgeVariants({ variant, size }),
         enablePulse && "animate-pulse",
         enableGlow && "shadow-lg shadow-current/50",
         enableShimmer && "relative overflow-hidden",
@@ -51528,4 +51528,4 @@ var BadgePro = React16__default.forwardRef(({
 });
 BadgePro.displayName = "BadgePro";
 
-export { AdvancedChart, AdvancedForms, AnimatedButton, Calendar2 as Calendar, ColorPicker2 as ColorPicker, Dashboard, DataTable, DraggableList, enhanced_exports as Enhanced, ErrorBoundary, FileUpload, FloatingActionButton, GitHubStars, HealthCheck, HoverCard3D, Kanban, LazyComponent, LazyImage, LazyList, MagneticButton, MemoryAnalytics, MemoryEfficientData, OptimizedImage, PerformanceDebugger, PerformanceMonitor, PinchZoom, RichTextEditor, SelectableVirtualList, SpotlightCard, SwipeableCard, Timeline, VirtualList, animatedButtonVariants, useStreamingData, useVirtualList };
+export { AdvancedChart, AdvancedForms, AnimatedButton, Calendar2 as Calendar, ColorPicker, Dashboard, DataTable, DraggableList, enhanced_exports as Enhanced, ErrorBoundary, FileUpload, FloatingActionButton, GitHubStars, HealthCheck, HoverCard3D, Kanban, LazyComponent, LazyImage, LazyList, MagneticButton, MemoryAnalytics, MemoryEfficientData, OptimizedImage, PerformanceDebugger, PerformanceMonitor, PinchZoom, RichTextEditor, SelectableVirtualList, SpotlightCard, SwipeableCard, Timeline, VirtualList, animatedButtonVariants, useStreamingData, useVirtualList };