@overmap-ai/blocks 1.0.36 → 1.0.37

package/dist/blocks.js

@@ -182,7 +182,7 @@ const AlertDialogContent = forwardRef((props, ref) => {
     /* @__PURE__ */ jsx(
       RadixAlertDialog.Content,
       {
-        className: cx(className, dialogContent({ size: size2 }), radiusCva({ radius, maxLarge: true })),
+        className: cx(dialogContent({ size: size2 }), radiusCva({ radius, maxLarge: true }), className),
         ref,
         "data-floating-content": "",
         ...rest
@@ -395,9 +395,9 @@ const Button = memo(
       "button",
       {
         className: cx(
-          className,
           buttonCva({ size: size2, icon: false, variant }),
-          radiusCva({ radius, maxLarge: false })
+          radiusCva({ radius, maxLarge: false }),
+          className
         ),
         ref,
         "data-accent-color": accentColor,
@@ -424,9 +424,9 @@ const IconButton = memo(
       "button",
       {
         className: cx(
-          className,
           buttonCva({ size: size2, icon: true, variant }),
-          radiusCva({ radius, maxLarge: false })
+          radiusCva({ radius, maxLarge: false }),
+          className
         ),
         ref,
         "data-accent-color": accentColor,
@@ -516,7 +516,7 @@ const avatarFallback = cva(["flex", "items-center", "justify-center", "size-full
 const AvatarFallback = forwardRef((props, ref) => {
   const { className, ...rest } = props;
   const { variant } = useContext(AvatarContext);
-  return /* @__PURE__ */ jsx(RadixAvatar.AvatarFallback, { className: cx(className, avatarFallback({ variant })), ref, ...rest });
+  return /* @__PURE__ */ jsx(RadixAvatar.AvatarFallback, { className: cx(avatarFallback({ variant }), className), ref, ...rest });
 });
 AvatarFallback.displayName = "AvatarFallback";
 const AvatarImage = forwardRef((props, ref) => {
@@ -524,7 +524,7 @@ const AvatarImage = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     RadixAvatar.Image,
     {
-      className: cx(className, "object-cover", "rounded-[inherit]", "w-full", "h-full"),
+      className: cx("object-cover", "rounded-[inherit]", "w-full", "h-full", className),
       ref,
       ...rest
     }
@@ -545,7 +545,7 @@ const AvatarRoot = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     RadixAvatar.Root,
     {
-      className: cx(className, avatar({ size: size2 }), radiusCva({ radius, maxLarge: false })),
+      className: cx(avatar({ size: size2 }), radiusCva({ radius, maxLarge: false }), className),
       ref,
       "data-accent-color": accentColor,
       ...rest,
@@ -653,7 +653,7 @@ const Badge = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cx(className, badge({ variant, size: size2, icon }), radiusCva({ radius, maxLarge: false })),
+      className: cx(badge({ variant, size: size2, icon }), radiusCva({ radius, maxLarge: false }), className),
       ref,
       "data-accent-color": accentColor,
       ...rest,
@@ -696,7 +696,7 @@ const Card = forwardRef((props, ref) => {
     "div",
     {
       ref,
-      className: cx(className, cardCva({ size: size2, variant }), radiusCva({ radius, maxLarge: true })),
+      className: cx(cardCva({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
       "data-accent-color": accentColor,
       ...rest
     }
@@ -708,7 +708,7 @@ const CheckboxIndicator = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     RadixCheckbox.CheckboxIndicator,
     {
-      className: cx(className, "flex items-center justify-center"),
+      className: cx("flex items-center justify-center", className),
       ref,
       ...rest
     }
@@ -771,7 +771,7 @@ const CheckboxRoot = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     RadixCheckbox.Root,
     {
-      className: cx(className, checkbox({ variant, size: size2 }), radiusCva({ radius, maxLarge: true })),
+      className: cx(checkbox({ variant, size: size2 }), radiusCva({ radius, maxLarge: true }), className),
       ref,
       "data-accent-color": accentColor,
       ...rest
@@ -1053,7 +1053,7 @@ const CheckboxGroupItem = memo((props) => {
     RadixCheckbox.Root,
     {
       ref,
-      className: cx(className, checkbox({ variant, size: size2 }), radiusCva({ radius, maxLarge: true })),
+      className: cx(checkbox({ variant, size: size2 }), radiusCva({ radius, maxLarge: true }), className),
       name: groupContext.name,
       required: groupContext.required,
       disabled: isDisabled,
@@ -1068,7 +1068,7 @@ const CheckboxGroupItem = memo((props) => {
 CheckboxGroupItem.displayName = "CheckboxGroupItem";
 const CheckboxGroupItemIndicator = memo((props) => {
   const { ref, className, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: cx(className, "flex items-center justify-center"), ref, ...rest });
+  return /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: cx("flex items-center justify-center", className), ref, ...rest });
 });
 CheckboxGroupItemIndicator.displayName = "CheckboxGroupItemIndicator";
 function getBooleanState$1(value) {
@@ -1143,7 +1143,7 @@ const CheckboxGroupSelectAllItem = memo((props) => {
     RadixCheckbox.Root,
     {
       ref,
-      className: cx(className, checkbox({ variant, size: size2 }), radiusCva({ radius, maxLarge: true })),
+      className: cx(checkbox({ variant, size: size2 }), radiusCva({ radius, maxLarge: true }), className),
       name: groupContext.name,
       required: groupContext.required,
       disabled: isDisabled,
@@ -1209,7 +1209,7 @@ const CollapsibleNode = genericMemo(function(props) {
       "div",
       {
         onClick: handleClick,
-        className: cx(nodeClassName, className, "flex w-full shrink-0 items-center"),
+        className: cx(nodeClassName, "flex w-full shrink-0 items-center", className),
         style: combinedStyles,
         "data-state": controlledOpenState ? "open" : "closed",
         "data-disabled": isDisabled,
@@ -1279,9 +1279,13 @@ const CommandMenuCheckboxIndicator = (props) => {
     {
       ref,
       "data-state": getCheckedState$1(checkedState),
-      className: cx(className, "inline-block size-max", {
-        invisible: checkedState === false
-      }),
+      className: cx(
+        "inline-block size-max",
+        {
+          invisible: checkedState === false
+        },
+        className
+      ),
       ...rest,
       children: computedChildren
     }
@@ -1508,7 +1512,7 @@ const CommandMenuItem = memo((props) => {
   return /* @__PURE__ */ jsx(
     CommandItem,
     {
-      className: cx(className, commandMenuItemCva({ size: size2, variant, radius })),
+      className: cx(commandMenuItemCva({ size: size2, variant, radius }), className),
       ref,
       onSelect: handleSelect,
       value: filterValue,
@@ -1566,7 +1570,7 @@ const CommandMenuContent = memo((props) => {
       children: /* @__PURE__ */ jsxs(
         CommandRoot,
         {
-          className: cx(className, commandMenuContentCva({ size: size2 }), radiusCva({ radius, maxLarge: true })),
+          className: cx(commandMenuContentCva({ size: size2 }), radiusCva({ radius, maxLarge: true }), className),
           ref,
           "data-accent-color": accentColor,
           ...rest,
@@ -1584,19 +1588,19 @@ CommandMenuContent.displayName = "CommandMenuContent";
 const CommandMenuEmpty = memo((props) => {
   const { className, ref, ...rest } = props;
   const { size: size2 } = use(CommandMenuContext);
-  return /* @__PURE__ */ jsx(CommandEmpty, { className: cx(className, commandMenuEmptyCva({ size: size2 })), ref, ...rest });
+  return /* @__PURE__ */ jsx(CommandEmpty, { className: cx(commandMenuEmptyCva({ size: size2 }), className), ref, ...rest });
 });
 CommandMenuEmpty.displayName = "CommandMenuEmpty";
 const CommandMenuGroup = memo((props) => {
   const { className, ref, ...rest } = props;
   const { size: size2 } = use(CommandMenuContext);
-  return /* @__PURE__ */ jsx(CommandGroup, { className: cx(className, commandMenuGroupCva({ size: size2 })), ref, ...rest });
+  return /* @__PURE__ */ jsx(CommandGroup, { className: cx(commandMenuGroupCva({ size: size2 }), className), ref, ...rest });
 });
 CommandMenuGroup.displayName = "CommandMenuGroup";
 const CommandMenuInput = memo((props) => {
   const { className, ref, ...rest } = props;
   const { size: size2 } = use(CommandMenuContext);
-  return /* @__PURE__ */ jsx(CommandInput, { className: cx(className, commandMenuInputCva({ size: size2 })), ref, ...rest });
+  return /* @__PURE__ */ jsx(CommandInput, { className: cx(commandMenuInputCva({ size: size2 }), className), ref, ...rest });
 });
 CommandMenuInput.displayName = "CommandMenuInput";
 const CommandMenuList = memo((props) => {
@@ -1606,7 +1610,7 @@ const CommandMenuList = memo((props) => {
   return /* @__PURE__ */ jsx(
     CommandList,
     {
-      className: cx(className, commandMenuListCva({ size: size2 })),
+      className: cx(commandMenuListCva({ size: size2 }), className),
       ref,
       hidden: filterCount === 0,
       ...rest
@@ -1648,7 +1652,7 @@ const CommandMenuMultiSelectItem = genericMemo(function(props) {
 });
 const CommandMenuOverlay = memo((props) => {
   const { container, className, ...rest } = props;
-  return /* @__PURE__ */ jsx(DialogPortal, { container, children: /* @__PURE__ */ jsx(DialogOverlay$1, { className: cx(className, commandMenuOverlayCva()), "data-floating-content": "", ...rest }) });
+  return /* @__PURE__ */ jsx(DialogPortal, { container, children: /* @__PURE__ */ jsx(DialogOverlay$1, { className: cx(commandMenuOverlayCva(), className), "data-floating-content": "", ...rest }) });
 });
 CommandMenuOverlay.displayName = "CommandMenuOverlay";
 const CommandMenuPage = (props) => {
@@ -1754,9 +1758,13 @@ const CommandMenuSelectedIndicator = (props) => {
     {
       ref,
       "data-state": getSelectedState$1(isSelected),
-      className: cx(className, "inline-block size-max", {
-        invisible: !isSelected
-      }),
+      className: cx(
+        "inline-block size-max",
+        {
+          invisible: !isSelected
+        },
+        className
+      ),
       ...rest,
       children: computedChildren
     }
@@ -1765,7 +1773,7 @@ const CommandMenuSelectedIndicator = (props) => {
 const CommandMenuSeparator = memo((props) => {
   const { className, ref, spacing = false, ...rest } = props;
   const { size: size2 } = use(CommandMenuContext);
-  return /* @__PURE__ */ jsx(CommandSeparator, { ref, className: cx(className, commandMenuSeparatorCva({ size: size2, spacing })), ...rest });
+  return /* @__PURE__ */ jsx(CommandSeparator, { ref, className: cx(commandMenuSeparatorCva({ size: size2, spacing }), className), ...rest });
 });
 CommandMenuSeparator.displayName = "CommandMenuSeparator";
 const CommandMenuTrigger = memo((props) => {
@@ -2027,7 +2035,7 @@ const DialogContent = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(RadixDialog.Portal, { container, children: /* @__PURE__ */ jsxs(
     RadixDialog.Content,
     {
-      className: cx(className, dialogContent({ size: size2 }), radiusCva({ radius, maxLarge: true })),
+      className: cx(dialogContent({ size: size2 }), radiusCva({ radius, maxLarge: true }), className),
       ref,
       "data-floating-content": "",
       ...rest,
@@ -2048,7 +2056,7 @@ const DialogOverlay = forwardRef((props, ref) => {
     RadixDialog.Overlay,
     {
       ref,
-      className: cx(className, dialogOverlay({})),
+      className: cx(dialogOverlay({}), className),
       "data-floating-content": "",
       ...rest
     }
@@ -2148,10 +2156,14 @@ const Heading = forwardRef((props, ref) => {
     Tag,
     {
       ref,
-      className: cx(className, headingCva({ size: size2, weight, align }), {
-        "text-(--accent-a11)": !!accentColor,
-        "text-(--accent-a12)": highContrast
-      }),
+      className: cx(
+        headingCva({ size: size2, weight, align }),
+        {
+          "text-(--accent-a11)": !!accentColor,
+          "text-(--accent-a12)": highContrast
+        },
+        className
+      ),
       "data-accent-color": accentColor,
       ...rest
     }
@@ -2160,7 +2172,7 @@ const Heading = forwardRef((props, ref) => {
 Heading.displayName = "Heading";
 const HoverCardArrow = forwardRef((props, ref) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixHoverCard.Arrow, { className: cx(className, "fill-(--base-6)"), ref, ...rest });
+  return /* @__PURE__ */ jsx(RadixHoverCard.Arrow, { className: cx("fill-(--base-6)", className), ref, ...rest });
 });
 HoverCardArrow.displayName = "HoverCardArrow";
 const hoverCardContent = cva(["bg-(--color-background)", "dark:bg-(--base-2)", "ring-1", "ring-(--base-6)"], {
@@ -2193,10 +2205,10 @@ const HoverCardContent = forwardRef((props, ref) => {
     RadixHoverCard.Content,
     {
       className: cx(
-        className,
         hoverCardContent({ size: size2 }),
         floating({ side, shadow: "3" }),
-        radiusCva({ radius, maxLarge: true })
+        radiusCva({ radius, maxLarge: true }),
+        className
       ),
       ref,
       side,
@@ -2309,7 +2321,7 @@ const InputField = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     "input",
     {
-      className: cx(className, inputField({ size: size2, variant }), "grow bg-transparent outline-0"),
+      className: cx(inputField({ size: size2, variant }), "grow bg-transparent outline-0", className),
       ref,
       ...rest
     }
@@ -2329,7 +2341,7 @@ const InputRoot = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(InputContext.Provider, { value: { size: size2, variant }, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx(className, inputRoot$1({ variant, size: size2 }), radiusCva({ radius, maxLarge: false })),
+      className: cx(inputRoot$1({ variant, size: size2 }), radiusCva({ radius, maxLarge: false }), className),
       ref,
       "data-accent-color": accentColor,
       ...rest
@@ -2340,7 +2352,7 @@ InputRoot.displayName = "InputRoot";
 const InputSlot = forwardRef((props, ref) => {
   const { className, ...rest } = props;
   const { size: size2, variant } = useContext(InputContext);
-  return /* @__PURE__ */ jsx("div", { className: cx(className, inputSlot({ size: size2, variant }), "flex items-center"), ref, ...rest });
+  return /* @__PURE__ */ jsx("div", { className: cx(inputSlot({ size: size2, variant }), "flex items-center", className), ref, ...rest });
 });
 InputSlot.displayName = "InputSlot";
 const Input = {
@@ -2354,7 +2366,7 @@ const Container = memo(
   forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { hideLayout = false } = useLayoutContext();
-    return !hideLayout && /* @__PURE__ */ jsx("div", { className: cx(className, "flex h-full grow"), ref, ...rest, children });
+    return !hideLayout && /* @__PURE__ */ jsx("div", { className: cx("flex h-full grow", className), ref, ...rest, children });
   })
 );
 const Root2 = memo((props) => {
@@ -2565,12 +2577,17 @@ const SlideOut = memo(
             children: /* @__PURE__ */ jsxs(
               "div",
               {
-                className: cx(className, "top-0", "bottom-0", {
-                  "left-0": isLeft,
-                  "right-0": !isLeft,
-                  absolute: position === "absolute",
-                  relative: position === "relative"
-                }),
+                className: cx(
+                  "top-0",
+                  "bottom-0",
+                  {
+                    "left-0": isLeft,
+                    "right-0": !isLeft,
+                    absolute: position === "absolute",
+                    relative: position === "relative"
+                  },
+                  className
+                ),
                 ref: mergedRefs,
                 onPointerDownCapture: handlePointerDownCapture,
                 "data-side": side,
@@ -2716,7 +2733,7 @@ const SlideOutOverlay = memo(
       if (smallModeOnly && !small) return false;
       return side === "left" ? showLeftSlideOut : showRightSlideOut;
     }, [active, hideLayout, showLeftSlideOut, showRightSlideOut, side, small, smallModeOnly]);
-    return showOverlay && /* @__PURE__ */ jsx("div", { className: cx("overmap-layout-overlay", className, "fixed inset-0"), ref, ...rest });
+    return showOverlay && /* @__PURE__ */ jsx("div", { className: cx("overmap-layout-overlay", "fixed inset-0", className), ref, ...rest });
   })
 );
 const MENU_OVERFLOW_PADDING = 20;
@@ -2834,10 +2851,14 @@ const Link = forwardRef((props, ref) => {
     "a",
     {
       ref,
-      className: cx(className, linkCva({ size: size2, weight, align }), {
-        "text-(--accent-a11)": !highContrast,
-        "text-(--accent-a12)": highContrast
-      }),
+      className: cx(
+        linkCva({ size: size2, weight, align }),
+        {
+          "text-(--accent-a11)": !highContrast,
+          "text-(--accent-a12)": highContrast
+        },
+        className
+      ),
       "data-accent-color": accentColor,
       ...rest
     }
@@ -2853,9 +2874,12 @@ const CheckedIndicator = (props) => {
     "span",
     {
       ref,
-      className: cx(className, {
-        invisible: checked === false
-      }),
+      className: cx(
+        {
+          invisible: checked === false
+        },
+        className
+      ),
       "data-state": getCheckedState$1(checked),
       ...rest,
       children: computedChildren
@@ -3178,11 +3202,11 @@ const MenuContent = memo((props) => {
                 "ul",
                 {
                   className: cx(
-                    className,
                     menuContent({ size: size2 }),
                     floating({ side, shadow: "3" }),
                     radiusCva({ radius, maxLarge: true }),
-                    "max-h-(--overmap-menu-available-height)"
+                    "max-h-(--overmap-menu-available-height)",
+                    className
                   ),
                   ref: forwardedRef,
                   "data-state": getOpenState(open),
@@ -3347,7 +3371,7 @@ const MenuItem = memo((props) => {
   return /* @__PURE__ */ jsx(
     "li",
     {
-      className: cx(className, menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true })),
+      className: cx(menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
       ref: mergeRefs2,
       role: "menuitem",
       "data-disabled": getBooleanState(disabled),
@@ -3479,7 +3503,7 @@ const MenuInputField = memo((props) => {
   return /* @__PURE__ */ jsx(
     "input",
     {
-      className: cx(className, "placeholder-(--base-a9)", "selection:bg-(--accent-a5)", "outline-none"),
+      className: cx("placeholder-(--base-a9)", "selection:bg-(--accent-a5)", "outline-none", className),
       ref: mergedRefs,
       disabled,
       "data-disabled": getBooleanState(disabled),
@@ -3495,18 +3519,18 @@ MenuInputField.displayName = "MenuInputField";
 const MenuInputRoot = memo((props) => {
   const { ref, className, ...rest } = props;
   const { size: size2 } = useMenuContentContext();
-  return /* @__PURE__ */ jsx("div", { className: cx(className, inputRoot({ size: size2 })), ref, ...rest });
+  return /* @__PURE__ */ jsx("div", { className: cx(inputRoot({ size: size2 }), className), ref, ...rest });
 });
 MenuInputRoot.displayName = "MenuInputRoot";
 const MenuInputSlot = memo((props) => {
   const { ref, className, ...rest } = props;
-  return /* @__PURE__ */ jsx("div", { className: cx(className, "flex", "items-center", "text-(--base-a11)"), ref, ...rest });
+  return /* @__PURE__ */ jsx("div", { className: cx("flex", "items-center", "text-(--base-a11)", className), ref, ...rest });
 });
 MenuInputSlot.displayName = "MenuInputSlot";
 const MenuLabel = memo((props) => {
   const { ref, className, ...rest } = props;
   const { size: size2 } = useMenuContentContext();
-  return /* @__PURE__ */ jsx("div", { ref, className: cx(className, menuLabelCva({ size: size2 })), ...rest });
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(menuLabelCva({ size: size2 }), className), ...rest });
 });
 MenuLabel.displayName = "MenuLabel";
 const MenuMultiSelectGroup = genericMemo(function MenuMultiSelectGroup2(props) {
@@ -3522,9 +3546,12 @@ const MenuSelectedIndicator = memo((props) => {
     "span",
     {
       ref,
-      className: cx(className, {
-        invisible: !isSelected
-      }),
+      className: cx(
+        {
+          invisible: !isSelected
+        },
+        className
+      ),
       "data-state": getSelectedState(isSelected),
       ...rest,
       children
@@ -3595,8 +3622,8 @@ const MenuScroll = memo((props) => {
     {
       ref,
       className: cx(
-        className,
-        "h-full overflow-x-hidden overflow-y-auto [scrollbar-color:var(--base-6)_transparent] [scrollbar-width:thin]"
+        "h-full overflow-x-hidden overflow-y-auto [scrollbar-color:var(--base-6)_transparent] [scrollbar-width:thin]",
+        className
       ),
       ...rest
     }
@@ -3665,7 +3692,7 @@ const MenuSelectItem = genericMemo(function(props) {
 const MenuSeparator = memo((props) => {
   const { ref, className, ...rest } = props;
   const { size: size2 } = useMenuContentContext();
-  return /* @__PURE__ */ jsx(RadixSeparator.Root, { className: cx(className, menuSeparator({ size: size2 })), ref, ...rest });
+  return /* @__PURE__ */ jsx(RadixSeparator.Root, { className: cx(menuSeparator({ size: size2 }), className), ref, ...rest });
 });
 MenuSeparator.displayName = "MenuSeparator";
 const MenuSubContent = memo((props) => {
@@ -3824,11 +3851,11 @@ const RiIcon = memo(
     return Icon ? (
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      /* @__PURE__ */ jsx(Icon, { className: cx(className, "shrink-0"), ref, title, size: size2, color, ...rest })
+      /* @__PURE__ */ jsx(Icon, { className: cx("shrink-0", className), ref, title, size: size2, color, ...rest })
     ) : /* @__PURE__ */ jsx(
       RiQuestionMark,
       {
-        className: cx(className, "shrink-0"),
+        className: cx("shrink-0", className),
         ref,
         title,
         size: size2,
@@ -3881,7 +3908,7 @@ const OvermapErrorBoundary = memo((props) => {
 OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
 const PopoverArrow = forwardRef((props, ref) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixPopover.Arrow, { className: cx(className, "fill-(--base-6)"), ref, ...rest });
+  return /* @__PURE__ */ jsx(RadixPopover.Arrow, { className: cx("fill-(--base-6)", className), ref, ...rest });
 });
 PopoverArrow.displayName = "PopoverArrow";
 const popoverContent = cva(["bg-(--color-background)", "dark:bg-(--base-2)", "ring-1", "ring-(--base-6)"], {
@@ -3913,10 +3940,10 @@ const PopoverContent = forwardRef((props, ref) => {
     RadixPopover.Content,
     {
       className: cx(
-        className,
         popoverContent({ size: size2 }),
         floating({ shadow: "3" }),
-        radiusCva({ radius, maxLarge: true })
+        radiusCva({ radius, maxLarge: true }),
+        className
       ),
       ref,
       sideOffset,
@@ -4069,7 +4096,7 @@ const RadioCardsItem = memo((props) => {
   return /* @__PURE__ */ jsx(
     RadixRadioGroup.Item,
     {
-      className: cx(className, radioCardsItemCva({ variant, size: size2 }), radiusCva({ radius, maxLarge: true })),
+      className: cx(radioCardsItemCva({ variant, size: size2 }), radiusCva({ radius, maxLarge: true }), className),
       "data-accent-color": accentColor,
       ...rest
     }
@@ -4098,7 +4125,7 @@ const RadioCardsRoot = memo((props) => {
   return /* @__PURE__ */ jsx(
     RadixRadioGroup.Root,
     {
-      className: cx(className, radioCardsRootCva({ size: size2, variant })),
+      className: cx(radioCardsRootCva({ size: size2, variant }), className),
       "data-accent-color": accentColor,
       ...rest,
       children: /* @__PURE__ */ jsx(RadioCardsContext, { value: contextValue, children })
@@ -4115,7 +4142,7 @@ const RadioGroupIndicator = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     RadixRadioGroup.Indicator,
     {
-      className: cx(className, "inline-flex items-center justify-center"),
+      className: cx("inline-flex items-center justify-center", className),
       ref,
       ...rest
     }
@@ -4170,7 +4197,7 @@ const RadioGroupItem = memo(
   forwardRef((props, ref) => {
     const radioGroupContext = useContext(RadioGroupContext);
     const { className, size: size2 = radioGroupContext.size, variant = radioGroupContext.variant, ...rest } = props;
-    return /* @__PURE__ */ jsx(RadixRadioGroup.Item, { className: cx(className, radioGroupItem({ size: size2, variant })), ref, ...rest });
+    return /* @__PURE__ */ jsx(RadixRadioGroup.Item, { className: cx(radioGroupItem({ size: size2, variant }), className), ref, ...rest });
   })
 );
 const RadioGroupRoot = memo(
@@ -4350,7 +4377,7 @@ const SegmentedControlItem = forwardRef((props, ref) => {
     RadixToggleGroup.Item,
     {
       ref,
-      className: cx(className, segmentedControlItemCva({ size: size2, variant, icon, radius })),
+      className: cx(segmentedControlItemCva({ size: size2, variant, icon, radius }), className),
       ...rest
     }
   );
@@ -4373,9 +4400,9 @@ const SegmentedControlRoot = forwardRef((props, ref) => {
     {
       ref,
       className: cx(
-        className,
         segmentedControlRootCva({ size: size2, variant }),
-        radiusCva({ radius, maxLarge: false })
+        radiusCva({ radius, maxLarge: false }),
+        className
       ),
       type: "single",
       "data-accent-color": accentColor,
@@ -4560,7 +4587,7 @@ const SegmentedTabsList = forwardRef((props, ref) => {
     RadixTabs.List,
     {
       ref,
-      className: cx(className, segmentedTabsListCva({ size: size2, variant }), radiusCva({ radius, maxLarge: false })),
+      className: cx(segmentedTabsListCva({ size: size2, variant }), radiusCva({ radius, maxLarge: false }), className),
       "data-accent-color": accentColor,
       ...rest,
       children: /* @__PURE__ */ jsx(SegmentedTabsListContext.Provider, { value: contextValue, children })
@@ -4570,7 +4597,7 @@ const SegmentedTabsList = forwardRef((props, ref) => {
 SegmentedTabsList.displayName = "TabsList";
 const SegmentedTabsRoot = forwardRef((props, ref) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cx(className, "flex flex-col"), ...rest });
+  return /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cx("flex flex-col", className), ...rest });
 });
 SegmentedTabsRoot.displayName = "TabsRoot";
 const SegmentedTabsTrigger = forwardRef((props, ref) => {
@@ -4580,7 +4607,7 @@ const SegmentedTabsTrigger = forwardRef((props, ref) => {
     RadixTabs.Trigger,
     {
       ref,
-      className: cx(className, segmentedTabsTriggerCva({ size: size2, radius, variant })),
+      className: cx(segmentedTabsTriggerCva({ size: size2, radius, variant }), className),
       ...rest,
       children
     }
@@ -4680,7 +4707,7 @@ const Separator = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     RadixSeparator.Root,
     {
-      className: cx(className, separator({ orientation, size: size2 })),
+      className: cx(separator({ orientation, size: size2 }), className),
       "data-accent-color": accentColor,
       ref,
       ...rest
@@ -4913,9 +4940,9 @@ const Slider = memo((props) => {
     RadixSlider.Root,
     {
       className: cx(
-        className,
         sliderRootCva({ size: size2, variant, orientation }),
-        radiusCva({ radius, maxLarge: false })
+        radiusCva({ radius, maxLarge: false }),
+        className
       ),
       orientation,
       "data-accent-color": accentColor,
@@ -5013,7 +5040,7 @@ const SwitchRoot = memo(
     return /* @__PURE__ */ jsx(
       RadixSwitch.Root,
       {
-        className: cx(className, switchRoot({ size: size2 }), radiusCva({ radius, maxLarge: false })),
+        className: cx(switchRoot({ size: size2 }), radiusCva({ radius, maxLarge: false }), className),
         ref,
         "data-accent-color": accentColor,
         ...rest,
@@ -5029,7 +5056,7 @@ const SwitchThumb = memo(
     return /* @__PURE__ */ jsx(
       RadixSwitch.Thumb,
       {
-        className: cx(className, switchThumb({ size: size2 }), radiusCva({ radius, maxLarge: false })),
+        className: cx(switchThumb({ size: size2 }), radiusCva({ radius, maxLarge: false }), className),
         ref,
         ...rest
       }
@@ -5089,14 +5116,14 @@ const tableCellCva = cva([], {
 const TableCell = forwardRef((props, ref) => {
   const { className, ...rest } = props;
   const { size: size2, border, variant } = useContext(TableContext);
-  return /* @__PURE__ */ jsx("td", { ref, className: cx(className, tableCellCva({ size: size2, border, cell: true, variant })), ...rest });
+  return /* @__PURE__ */ jsx("td", { ref, className: cx(tableCellCva({ size: size2, border, cell: true, variant }), className), ...rest });
 });
 TableCell.displayName = "TableCell";
 const TableColumnHeaderCell = forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
     const { size: size2, border, variant } = useContext(TableContext);
-    return /* @__PURE__ */ jsx("th", { ref, className: cx(className, tableCellCva({ size: size2, border, cell: false, variant })), ...rest });
+    return /* @__PURE__ */ jsx("th", { ref, className: cx(tableCellCva({ size: size2, border, cell: false, variant }), className), ...rest });
   }
 );
 TableColumnHeaderCell.displayName = "TableColumnHeaderCell";
@@ -5118,9 +5145,9 @@ const TableRoot = forwardRef((props, ref) => {
     {
       ref,
       className: cx(
-        className,
         tableRootCva({ size: size2, variant }),
-        radiusCva({ radius: providerContext.radius, maxLarge: true })
+        radiusCva({ radius: providerContext.radius, maxLarge: true }),
+        className
       ),
       "data-accent-color": accentColor,
       ...rest,
@@ -5137,7 +5164,7 @@ TableRow.displayName = "TableRow";
 const TableRowHeaderCell = forwardRef((props, ref) => {
   const { className, ...rest } = props;
   const { size: size2, border, variant } = useContext(TableContext);
-  return /* @__PURE__ */ jsx("th", { ref, className: cx(className, tableCellCva({ size: size2, border, cell: true, variant })), ...rest });
+  return /* @__PURE__ */ jsx("th", { ref, className: cx(tableCellCva({ size: size2, border, cell: true, variant }), className), ...rest });
 });
 TableRowHeaderCell.displayName = "TableRow";
 const Table = {
@@ -5207,7 +5234,7 @@ const TabsList = forwardRef((props, ref) => {
     RadixTabs.List,
     {
       ref,
-      className: cx(className, tabsListCva({ size: size2 })),
+      className: cx(tabsListCva({ size: size2 }), className),
       "data-accent-color": accentColor,
       ...rest,
       children: /* @__PURE__ */ jsx(TabsListContext.Provider, { value: { size: size2 }, children })
@@ -5217,7 +5244,7 @@ const TabsList = forwardRef((props, ref) => {
 TabsList.displayName = "TabsList";
 const TabsRoot = forwardRef((props, ref) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cx(className, "flex flex-col"), ...rest });
+  return /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cx("flex flex-col", className), ...rest });
 });
 TabsRoot.displayName = "TabsRoot";
 const useTabsList = () => {
@@ -5230,7 +5257,7 @@ const useTabsList = () => {
 const TabsTrigger = forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
   const { size: size2 } = useTabsList();
-  return /* @__PURE__ */ jsx(RadixTabs.Trigger, { ref, className: cx(className, tabsTriggerCva({ size: size2 })), ...rest, children });
+  return /* @__PURE__ */ jsx(RadixTabs.Trigger, { ref, className: cx(tabsTriggerCva({ size: size2 }), className), ...rest, children });
 });
 TabsTrigger.displayName = "TabsTrigger";
 const Tabs = {
@@ -5275,10 +5302,14 @@ const Text = forwardRef((props, ref) => {
     "span",
     {
       ref,
-      className: cx(className, textCva({ size: size2, weight, align }), {
-        "text-(--accent-a11)": !!accentColor,
-        "text-(--accent-a12)": highContrast
-      }),
+      className: cx(
+        textCva({ size: size2, weight, align }),
+        {
+          "text-(--accent-a11)": !!accentColor,
+          "text-(--accent-a12)": highContrast
+        },
+        className
+      ),
       "data-accent-color": accentColor,
       ...rest
     }
@@ -5326,11 +5357,11 @@ const textAreaCva = cva(
         ghost: ["placeholder-(--base-a9)", "selection:bg-(--accent-a5)", "bg-transparent", "text-(--base-12)"]
       },
       size: {
-        xs: ["p-2", "text-xs"],
-        sm: ["p-4", "text-sm"],
-        md: ["p-6", "text-base"],
-        lg: ["p-8", "text-lg"],
-        xl: ["p-10", "text-xl"]
+        xs: ["p-3", "text-xs"],
+        sm: ["p-3.5", "text-sm"],
+        md: ["p-4", "text-base"],
+        lg: ["p-4.5", "text-lg"],
+        xl: ["p-5", "text-xl"]
       },
       resize: {
         none: ["resize-none"],
@@ -5359,7 +5390,7 @@ const TextArea = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
-      className: cx(className, textAreaCva({ size: size2, variant }), radiusCva({ radius, maxLarge: true })),
+      className: cx(textAreaCva({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
       ref,
       "data-accent-color": accentColor,
       ...rest
@@ -5519,8 +5550,8 @@ const ToastProvider = memo(function ToastContextProvider({
       ToastViewport,
       {
         className: cx(
-          className,
-          "fixed top-0 right-0 z-[2147483647] flex w-full max-w-md list-none flex-col items-end gap-3 overflow-x-hidden overflow-y-auto p-5 outline-none"
+          "fixed top-0 right-0 z-[2147483647] flex w-full max-w-md list-none flex-col items-end gap-3 overflow-x-hidden overflow-y-auto p-5 outline-none",
+          className
         ),
         hotkey
       }
@@ -5663,7 +5694,7 @@ const BaseToggleButton = forwardRef((props, ref) => {
     Toggle.Root,
     {
       ref,
-      className: cx(className, toggleButtonCva({ size: size2, variant, icon }), radiusCva({ radius, maxLarge: false })),
+      className: cx(toggleButtonCva({ size: size2, variant, icon }), radiusCva({ radius, maxLarge: false }), className),
       "data-accent-color": accentColor,
       ...rest
     }
@@ -5859,7 +5890,7 @@ const ToggleGroup = {
 };
 const TooltipArrow = forwardRef((props, ref) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixTooltip.Arrow, { className: cx(className, "fill-(--base-6)"), ref, ...rest });
+  return /* @__PURE__ */ jsx(RadixTooltip.Arrow, { className: cx("fill-(--base-6)", className), ref, ...rest });
 });
 TooltipArrow.displayName = "TooltipArrow";
 const tooltipContent = cva(
@@ -5914,7 +5945,7 @@ const TooltipContent = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(RadixTooltip.Portal, { container, children: /* @__PURE__ */ jsx(
     RadixTooltip.Content,
     {
-      className: cx(className, tooltipContent({ size: size2, side }), radiusCva({ radius, maxLarge: false })),
+      className: cx(tooltipContent({ size: size2, side }), radiusCva({ radius, maxLarge: false }), className),
       ref,
       sideOffset,
       "data-floating-content": "",