@l3mpire/ui 2.25.2 → 2.26.0

package/dist/index.js

@@ -333,19 +333,19 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
       },
       size: {
         sm: [
-          "h-6 py-xs gap-xs",
+          "h-6 px-sm py-xs gap-none",
           "text-xs",
           "min-w-16 rounded-base"
         ],
         md: [
-          "h-8 px-base py-sm gap-sm",
+          "h-8 px-base py-sm gap-2xs",
           "text-sm",
           "min-w-20 rounded-md"
         ],
         lg: [
-          "h-10 px-md py-[10px] gap-sm",
+          "h-10 px-lg py-md gap-2xs",
           "text-sm",
-          "min-w-20 rounded-md"
+          "min-w-20 rounded-lg"
         ]
       },
       iconOnly: {
@@ -471,6 +471,25 @@ var iconSizeMap = {
   lg: "sm"
   // 14px
 };
+var textWrapperClass = (size) => cn(
+  "inline-flex items-center justify-center px-xs",
+  size === "lg" ? "gap-sm" : "gap-xs"
+);
+var ButtonBadge = ({ size, intent, children }) => {
+  const colors = intent === "alert" ? "bg-[var(--core-bg-functional-invert-critical)] text-[var(--core-text-functional-critical)]" : "bg-[var(--core-bg-functional-invert-info)] text-[var(--core-text-functional-info)]";
+  const shape = size === "lg" ? "gap-xs px-sm py-xs rounded-sm text-xs leading-xs" : "gap-2xs px-xs py-2xs rounded-xs text-xxs leading-2xs";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center font-medium whitespace-nowrap",
+        shape,
+        colors
+      ),
+      children
+    }
+  );
+};
 var Button = React2.forwardRef(
   ({
     className,
@@ -484,26 +503,28 @@ var Button = React2.forwardRef(
     leftIcon,
     rightIcon,
     disabled,
+    badge,
     children,
     ...props
   }, ref) => {
     const appearance = appearanceProp ?? "solid";
     const intent = intentProp ?? "brand";
+    const resolvedSize = size ?? "md";
     const isDisabled = disabled || loading;
     const isIconOnly = iconOnlyProp ?? !children;
-    const iconSize = iconSizeMap[size ?? "md"];
-    const smPadding = size === "sm" && !isIconOnly ? cn(
-      leftIcon || loading ? "pl-xs" : "pl-sm",
-      rightIcon ? "pr-xs" : "pr-sm"
-    ) : "";
+    const iconSize = iconSizeMap[resolvedSize];
     const variantClasses = buttonVariants({
       appearance,
       intent,
-      size,
+      size: resolvedSize,
       iconOnly: isIconOnly || void 0,
       fullWidth,
-      className: cn(smPadding, className)
+      className
     });
+    const labelNode = !isIconOnly ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: textWrapperClass(resolvedSize), children: [
+      children,
+      badge != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonBadge, { size: resolvedSize, intent, children: badge })
+    ] }) : null;
     if (asChild) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_slot.Slot, { ref, className: cn(variantClasses), ...props, children });
     }
@@ -517,7 +538,7 @@ var Button = React2.forwardRef(
         ...props,
         children: [
           loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.Icon, { icon: import_icons2.faSpinnerSolid, size: iconSize, className: "animate-spin" }) : leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.Icon, { icon: leftIcon, size: iconSize }) : null,
-          !isIconOnly && children,
+          labelNode,
           rightIcon && !loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.Icon, { icon: rightIcon, size: iconSize })
         ]
       }
@@ -747,7 +768,7 @@ var BrowserTab = React3.forwardRef(
       {
         ref,
         className: cn(
-          "flex items-end w-full h-[44px] border-b border-browser-tab-border pl-base pr-lg",
+          "flex items-end w-full h-[44px] border-b border-browser-tab-border pl-base pr-xl",
           className
         ),
         ...props,
@@ -795,7 +816,7 @@ var BrowserTab = React3.forwardRef(
                 align: "end",
                 className: cn(
                   "z-50 flex flex-col gap-base overflow-clip",
-                  "bg-dropdown-bg border border-dropdown-border rounded-md p-base shadow-lg",
+                  "bg-dropdown-bg border border-dropdown-border rounded-lg p-base shadow-lg",
                   "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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=top]:slide-in-from-bottom-2"
@@ -877,7 +898,7 @@ var containerStyle = [
   "flex flex-col gap-base overflow-clip",
   "bg-dropdown-bg",
   "border border-dropdown-border",
-  "rounded-md",
+  "rounded-lg",
   "p-xs",
   "shadow-lg"
 ];
@@ -1040,7 +1061,7 @@ DropdownMenuHeading.displayName = "DropdownMenuHeading";
 var clearStyle = [
   "sticky bottom-0 -mx-base -mb-base",
   "flex items-center justify-center",
-  "h-10 min-w-[80px] px-md py-[10px]",
+  "h-10 min-w-[80px] px-lg py-[10px]",
   "bg-gradient-to-t from-dropdown-bg from-[10%] to-dropdown-bg",
   "border border-dropdown-border",
   "shadow-sm",
@@ -1124,33 +1145,19 @@ var BulkAction = React5.forwardRef(
         role: "toolbar",
         "aria-label": "Bulk actions",
         className: cn(
-          "flex items-center gap-lg p-base w-full min-w-0",
+          "flex items-center gap-xl px-lg py-base w-full min-w-0",
           "bg-bulk-action-bg border-l border-r border-t border-bulk-action-border",
-          "rounded-tl-md rounded-tr-md",
+          "rounded-tl-lg rounded-tr-lg",
           "shadow-[0px_0px_6px_0px_rgba(0,0,0,0.02),0px_2px_4px_0px_rgba(0,0,0,0.08)]",
           sticky && "sticky bottom-0 z-10",
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-center gap-xs shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              Button,
-              {
-                type: "button",
-                appearance: "ghost",
-                intent: "alert",
-                size: "sm",
-                leftIcon: import_icons5.faXmarkOutline,
-                onClick: onClear,
-                children: clearLabel
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-sm font-regular leading-sm text-bulk-action-count whitespace-nowrap", children: [
-              count,
-              " ",
-              countLabel
-            ] })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-sm font-regular leading-sm text-bulk-action-count whitespace-nowrap shrink-0", children: [
+            count,
+            " ",
+            countLabel
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "div",
@@ -1203,6 +1210,20 @@ var BulkAction = React5.forwardRef(
                 )
               ]
             }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Button,
+            {
+              type: "button",
+              appearance: "ghost",
+              intent: "brand",
+              size: "md",
+              iconOnly: true,
+              leftIcon: import_icons5.faXmarkOutline,
+              onClick: onClear,
+              "aria-label": clearLabel,
+              className: "shrink-0"
+            }
           )
         ]
       }
@@ -1236,7 +1257,7 @@ var tooltipContentVariants = (0, import_class_variance_authority3.cva)(
     "inline-flex items-center z-50",
     "gap-xs",
     "px-base py-sm",
-    "rounded-md",
+    "rounded-lg",
     "shadow-lg",
     "text-sm",
     "font-regular",
@@ -1479,7 +1500,7 @@ var import_class_variance_authority5 = require("class-variance-authority");
 var import_icons8 = require("@l3mpire/icons");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var infoMessageVariants = (0, import_class_variance_authority5.cva)(
-  "flex items-start gap-md px-lg py-base rounded-md",
+  "flex items-start gap-lg px-xl py-base rounded-lg",
   {
     variants: {
       type: {
@@ -1559,8 +1580,8 @@ var import_icons9 = require("@l3mpire/icons");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var toastVariants = (0, import_class_variance_authority6.cva)(
   [
-    "flex flex-col items-end w-[308px] gap-md p-lg",
-    "rounded-md",
+    "flex flex-col items-end w-[308px] gap-lg p-xl",
+    "rounded-lg",
     "border border-toast-border",
     "bg-gradient-to-b to-background to-[60%]",
     "[background-size:100%_calc(100%+120px)] [background-position:0_-120px]",
@@ -1600,14 +1621,14 @@ var typeIconMap2 = {
 };
 var titleStyle2 = "text-sm font-medium leading-sm text-toast-title";
 var subtitleStyle = "text-sm font-regular leading-sm text-toast-subtitle";
-var closeButtonStyle2 = "inline-flex shrink-0 items-center justify-center self-start p-sm rounded-md text-toast-close hover:bg-black/5 transition-colors";
+var closeButtonStyle2 = "inline-flex shrink-0 items-center justify-center self-start p-sm rounded-lg text-toast-close hover:bg-black/5 transition-colors";
 var ToastProvider = ToastPrimitive.Provider;
 var ToastViewport = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   ToastPrimitive.Viewport,
   {
     ref,
     className: cn(
-      "fixed top-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse p-lg sm:flex-col md:max-w-[420px]",
+      "fixed top-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse p-xl sm:flex-col md:max-w-[420px]",
       className
     ),
     ...props
@@ -1629,7 +1650,7 @@ var Toast = React10.forwardRef(({ className, type = "info", title, subtitle, onC
       className: cn(toastVariants({ type }), !actions && "min-h-[80px]", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex w-full items-center gap-md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex w-full items-center gap-lg", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: iconContainerVariants({ type }), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.Icon, { icon, size: "lg", className: color }) }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToastPrimitive.Title, { className: titleStyle2, children: title }),
@@ -1718,7 +1739,7 @@ var import_icons10 = require("@l3mpire/icons");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var cardStyles = {
   base: [
-    "group relative flex w-full items-center gap-base rounded-md border border-solid p-md text-left transition-colors",
+    "group relative flex w-full items-center gap-base rounded-lg border border-solid p-lg text-left transition-colors",
     "border-switch-card-border",
     "focus-visible:outline-none focus-visible:shadow-focus-ring",
     "disabled:pointer-events-none disabled:opacity-60",
@@ -1989,7 +2010,7 @@ var SidebarHeader = React14.forwardRef(
         ref,
         className: cn(
           "flex items-center shrink-0 h-[44px] border-b border-sidebar-border",
-          isCollapsed ? "justify-center px-lg" : "justify-between px-lg",
+          isCollapsed ? "justify-center px-xl" : "justify-between px-xl",
           className
         ),
         ...props,
@@ -2061,7 +2082,7 @@ var Sidebar = React14.forwardRef(
               (child) => !(React14.isValidElement(child) && child.type?.displayName === "SidebarFooter")
             );
             return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col gap-lg p-lg flex-1 overflow-y-auto", children: rest }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col gap-xl p-xl flex-1 overflow-y-auto", children: rest }),
               footer
             ] });
           })()
@@ -2092,7 +2113,7 @@ var SidebarFooter = React14.forwardRef(
       {
         ref,
         className: cn(
-          "flex flex-col p-lg bg-sidebar-footer-bg border-t border-sidebar-border mt-auto w-full",
+          "flex flex-col p-xl bg-sidebar-footer-bg border-t border-sidebar-border mt-auto w-full",
           className
         ),
         ...props,
@@ -2121,7 +2142,7 @@ var searchBarVariants = (0, import_class_variance_authority8.cva)(
       },
       size: {
         sm: "gap-sm px-base py-sm",
-        md: "gap-base px-md py-base"
+        md: "gap-base px-lg py-base"
       }
     },
     defaultVariants: { variant: "white", size: "md" }
@@ -2462,7 +2483,7 @@ var import_icons14 = require("@l3mpire/icons");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var cardStyles2 = {
   base: [
-    "group relative flex w-full items-start gap-base rounded-md border border-solid p-md text-left transition-colors",
+    "group relative flex w-full items-start gap-base rounded-lg border border-solid p-lg text-left transition-colors",
     "focus-visible:outline-none focus-visible:shadow-focus-ring",
     "disabled:pointer-events-none disabled:opacity-60",
     "cursor-pointer"
@@ -2590,7 +2611,7 @@ var sidebarItemVariants = (0, import_class_variance_authority10.cva)(
         active: "bg-sidebar-item-active-bg"
       },
       type: {
-        default: "px-lg py-base",
+        default: "px-xl py-base",
         collapsed: "p-base justify-center"
       }
     },
@@ -2698,7 +2719,7 @@ var selectVariants = (0, import_class_variance_authority11.cva)(
     variants: {
       size: {
         sm: "px-base gap-base rounded-base min-w-[80px]",
-        md: "px-md gap-base rounded-md"
+        md: "px-lg gap-base rounded-md"
       }
     },
     defaultVariants: { size: "md" }
@@ -2845,7 +2866,7 @@ function SelectChips({ tags, onTagRemove, chipHeightPx }) {
           {
             sideOffset: 4,
             className: cn(
-              "z-50 px-base py-sm rounded-md shadow-lg",
+              "z-50 px-base py-sm rounded-lg shadow-lg",
               "bg-tooltip-default-bg text-tooltip-default-text",
               "text-xs font-regular leading-xs",
               "flex flex-col gap-xs",
@@ -2999,7 +3020,7 @@ var TabList = React23.forwardRef(({ className, hasOffset = false, ...props }, re
     ref,
     className: cn(
       "flex items-center gap-base pt-base border-b border-tab-border",
-      hasOffset && "px-lg",
+      hasOffset && "px-xl",
       className
     ),
     ...props
@@ -3120,7 +3141,7 @@ var Tag = React24.forwardRef(
                 "inline-flex shrink-0 items-center justify-center",
                 "rounded-base cursor-pointer",
                 "p-xs",
-                size === "md" && "p-sm rounded-md"
+                size === "md" && "p-sm rounded-lg"
               ),
               "aria-label": "Remove",
               children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons17.Icon, { icon: import_icons17.faXmarkSolid, size: iconSize })
@@ -3206,7 +3227,7 @@ var TextArea = React25.forwardRef(
           "aria-describedby": errorId,
           className: cn(
             "w-full min-h-[120px] resize-vertical",
-            "px-md py-base",
+            "px-lg py-base",
             "rounded-md border overflow-clip outline-none",
             "text-sm",
             "font-regular",
@@ -3245,7 +3266,7 @@ var textInputVariants = (0, import_class_variance_authority13.cva)(
     variants: {
       size: {
         sm: "px-base py-sm gap-base rounded-base",
-        md: "px-md py-[10px] gap-base rounded-md"
+        md: "px-lg py-[10px] gap-base rounded-md"
       }
     },
     defaultVariants: { size: "md" }
@@ -3396,7 +3417,7 @@ var TextInput = React26.forwardRef(
             onClick: onButtonClick,
             className: cn(
               "shrink-0 flex items-center justify-center border",
-              size === "sm" ? "px-base rounded-r-base" : "px-md rounded-r-md",
+              size === "sm" ? "px-base rounded-r-base" : "px-lg rounded-r-md",
               attachedButtonStyles[disabled ? "disabled" : "enabled"]
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons19.Icon, { icon: buttonIcon ?? import_icons19.faPlusSolid, size: "sm", className: icColor })
@@ -3429,7 +3450,7 @@ var chipInputVariants = (0, import_class_variance_authority14.cva)(
     variants: {
       size: {
         sm: "px-base py-sm rounded-base",
-        md: "px-md py-[10px] rounded-md"
+        md: "px-lg py-[10px] rounded-md"
       }
     },
     defaultVariants: { size: "md" }
@@ -3635,7 +3656,7 @@ var inputVariants = (0, import_class_variance_authority15.cva)(
     variants: {
       size: {
         sm: "px-base py-sm",
-        md: "px-md py-[10px]"
+        md: "px-lg py-[10px]"
       }
     },
     defaultVariants: { size: "md" }
@@ -3884,7 +3905,7 @@ var UserMenu = React30.forwardRef(
         "flex flex-col w-[260px] overflow-clip",
         "bg-user-menu-bg",
         "border border-user-menu-border",
-        "rounded-md",
+        "rounded-lg",
         "shadow-lg",
         "divide-y divide-user-menu-border",
         className
@@ -3900,7 +3921,7 @@ var UserMenuInfoRow = React30.forwardRef(
     "div",
     {
       ref,
-      className: cn("flex items-center gap-base p-lg", className),
+      className: cn("flex items-center gap-base p-xl", className),
       ...props,
       children: [
         avatar,
@@ -3937,7 +3958,7 @@ var modalVariants = (0, import_class_variance_authority17.cva)(
   [
     "fixed top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 z-50",
     "flex flex-col",
-    "bg-modal-bg border border-modal-border rounded-md shadow-sm overflow-clip",
+    "bg-modal-bg border border-modal-border rounded-lg shadow-sm overflow-clip",
     "outline-none",
     "data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out"
   ],
@@ -3988,7 +4009,7 @@ var ModalHeader = React31.forwardRef(
     {
       ref,
       className: cn(
-        "flex items-start gap-lg p-lg",
+        "flex items-start gap-xl p-xl",
         showBorder && "border-b border-modal-header-border",
         className
       ),
@@ -4032,7 +4053,7 @@ var ModalBody = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   "div",
   {
     ref,
-    className: cn("flex-1 overflow-y-auto p-lg", className),
+    className: cn("flex-1 overflow-y-auto p-xl", className),
     ...props
   }
 ));
@@ -4043,7 +4064,7 @@ var ModalFooter = React31.forwardRef(
     {
       ref,
       className: cn(
-        "flex items-center justify-between gap-md p-lg",
+        "flex items-center justify-between gap-lg p-xl",
         showBorder && "border-t border-modal-footer-border",
         className
       ),
@@ -4087,7 +4108,7 @@ var Dialog = React32.forwardRef(
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ModalFooter, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ModalClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { appearance: "ghost", intent: "brand", size: "md", onClick: handleCancel, children: cancelLabel }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-lg", children: [
           secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { appearance: "outlined", intent: "brand", size: "md", onClick: onSecondaryAction, children: secondaryLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             Button,
@@ -4117,8 +4138,8 @@ var emptyStateVariants = (0, import_class_variance_authority18.cva)(
   {
     variants: {
       size: {
-        md: "gap-lg",
-        sm: "gap-md"
+        md: "gap-xl",
+        sm: "gap-lg"
       }
     },
     defaultVariants: {
@@ -4198,7 +4219,7 @@ var EmptyState = React33.forwardRef(
             {
               className: cn(
                 "flex items-center",
-                isMd ? "gap-lg" : "gap-base"
+                isMd ? "gap-xl" : "gap-base"
               ),
               children: [
                 secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -4242,7 +4263,7 @@ var AvatarCell = ({
   subtitle,
   src,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("flex items-center gap-md", className), children: [
+}) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("flex items-center gap-lg", className), children: [
   /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Avatar, { initials: getInitials(name), src, alt: name, size: "lg", shape: "rounded" }),
   /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-sm font-medium text-table-cell-text-primary leading-sm", children: name }),
@@ -4509,7 +4530,7 @@ var TableHead = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "group/head h-10 px-md py-md text-left align-middle text-xs font-medium leading-xs",
+      "group/head h-10 px-lg py-lg text-left align-middle text-xs font-medium leading-xs",
       "text-table-head-text bg-table-head-bg-default",
       "hover:bg-table-head-bg-hover",
       "border-b border-r border-table-border last:border-r-0",
@@ -4525,7 +4546,7 @@ var TableCell = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "px-md py-md align-middle text-sm font-medium max-h-[52px]",
+      "px-lg py-lg align-middle text-sm font-medium max-h-[52px]",
       "text-table-cell-text-primary",
       "border-b border-r border-table-border last:border-r-0",
       "[&:has([role=checkbox])]:pr-0",
@@ -4539,7 +4560,7 @@ var TableCaption = React35.forwardRef(({ className, ...props }, ref) => /* @__PU
   "caption",
   {
     ref,
-    className: cn("mt-md text-sm text-table-cell-text-secondary", className),
+    className: cn("mt-lg text-sm text-table-cell-text-secondary", className),
     ...props
   }
 ));
@@ -4617,7 +4638,7 @@ function DataTableSettingsModal({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Modal, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ModalContent, { size: "sm", className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ModalHeader, { onClose: () => onOpenChange(false), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ModalTitle, { children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-lg", children: [
       /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between gap-base", children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "text-sm font-medium text-table-cell-text-secondary", children: [
           "Columns ",
@@ -4664,7 +4685,7 @@ function DataTableSettingsModal({
             "flex flex-col max-h-[360px] overflow-auto rounded-base",
             "border border-table-border"
           ),
-          children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "py-md text-center text-sm text-table-cell-text-secondary", children: "No columns found" }) : filtered.map((c) => {
+          children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "py-lg text-center text-sm text-table-cell-text-secondary", children: "No columns found" }) : filtered.map((c) => {
             const key = getColKey(c);
             const label = getColLabel(c);
             const checked = draft[key] !== false;
@@ -4787,7 +4808,7 @@ function ColumnFilterPopover({
         align: "start",
         sideOffset: 4,
         className: cn(
-          "z-50 w-[240px] rounded-md border border-table-border bg-table-bg p-md shadow-lg",
+          "z-50 w-[240px] rounded-lg border border-table-border bg-table-bg p-lg shadow-lg",
           "animate-in fade-in-0 zoom-in-95"
         ),
         onClick: (e) => e.stopPropagation(),
@@ -5379,7 +5400,7 @@ function DataTablePagination({
     "div",
     {
       className: cn(
-        "flex items-center justify-between px-lg py-md",
+        "flex items-center justify-between px-xl py-lg",
         className
       ),
       children: [
@@ -5389,7 +5410,7 @@ function DataTablePagination({
           totalCount,
           " row(s) selected"
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-xl", children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-sm", children: [
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: "Rows per page" }),
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -5531,7 +5552,7 @@ function TruncatedLabel({
       TooltipPrimitive3.Content,
       {
         sideOffset: 4,
-        className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm max-w-[320px] data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
+        className: "z-50 px-base py-sm rounded-lg shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm max-w-[320px] data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
         children: [
           label,
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
@@ -6018,7 +6039,7 @@ var SortButton = ({
           "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
           "cursor-pointer transition-colors",
           "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover",
-          iconOnly ? "size-8 justify-center p-0" : "px-md py-sm min-w-[80px]",
+          iconOnly ? "size-8 justify-center p-0" : "px-lg py-sm min-w-[80px]",
           className
         ),
         children: [
@@ -6047,7 +6068,7 @@ var SortButton = ({
         align: "start",
         className: cn(
           "z-50 flex flex-col gap-xs overflow-clip p-xs",
-          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-lg shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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",
@@ -6248,7 +6269,7 @@ var SaveViewButton = React44.forwardRef(
               ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-solid-brand-text-default", children: label }),
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "absolute inset-0 rounded-l-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "absolute inset-0 rounded-l-[9px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           ),
@@ -6271,7 +6292,7 @@ var SaveViewButton = React44.forwardRef(
                     className: "text-btn-solid-brand-text-default"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "absolute inset-0 rounded-r-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "absolute inset-0 rounded-r-[9px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           )
@@ -6303,7 +6324,7 @@ var OperatorSelector = ({
         align: "start",
         className: cn(
           "z-50 flex flex-col p-xs overflow-clip",
-          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-lg shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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",
@@ -6623,7 +6644,7 @@ var DatePicker = React45.forwardRef(
         ref,
         className: cn(
           "flex flex-col overflow-clip",
-          "bg-datepicker-bg border border-datepicker-border rounded-md shadow-lg",
+          "bg-datepicker-bg border border-datepicker-border rounded-lg shadow-lg",
           className
         ),
         ...props,
@@ -6648,7 +6669,7 @@ var DatePickerSelects = React45.forwardRef(({ className, formatDate = defaultFor
     "div",
     {
       ref,
-      className: cn("flex flex-col items-start pt-lg px-lg", className),
+      className: cn("flex flex-col items-start pt-xl px-xl", className),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-base w-full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
@@ -6760,7 +6781,7 @@ var DatePickerCalendar = React45.forwardRef(({ className, header, ...props }, re
       ...props,
       children: [
         header,
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-lg p-lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-xl p-xl", children: [
           /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
               MONTH_NAMES[month],
@@ -6849,7 +6870,7 @@ var DatePickerSuggestions = React45.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "pt-lg px-base", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "pt-xl px-base", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
             "button",
             {
@@ -6875,7 +6896,7 @@ var DatePickerFooter = React45.forwardRef(
     {
       ref,
       className: cn(
-        "flex items-center justify-between p-lg",
+        "flex items-center justify-between p-xl",
         "border-t border-datepicker-footer-border",
         "bg-datepicker-bg",
         className
@@ -7487,7 +7508,7 @@ var PropertySelector = ({
         onCloseAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col gap-xs overflow-hidden p-xs",
-          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-lg shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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",
@@ -7497,7 +7518,7 @@ var PropertySelector = ({
           activeGroup === null ? (
             /* ── Level 1: Search + (pinned props) + Categories ──────── */
             /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-lg py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   import_icons32.Icon,
                   {
@@ -7631,7 +7652,7 @@ var PropertySelector = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-lg py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   import_icons32.Icon,
                   {
@@ -7714,7 +7735,7 @@ var KebabMenu = ({
       align: "end",
       className: cn(
         "z-50 flex flex-col p-xs overflow-clip",
-        "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
+        "bg-dropdown-bg border border-dropdown-border rounded-lg shadow-lg",
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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",
@@ -7830,7 +7851,7 @@ var FilterEditor = ({
         align: "start",
         className: cn(
           "z-50 flex flex-col overflow-clip",
-          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-lg shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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",
@@ -7907,7 +7928,7 @@ var SegmentPopover = ({
       align,
       className: cn(
         "z-50 flex flex-col overflow-clip",
-        "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
+        "bg-dropdown-bg border border-dropdown-border rounded-lg shadow-lg",
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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"
@@ -7998,7 +8019,7 @@ var InteractiveFilterChip = ({
     {
       className: cn(
         "inline-flex items-center overflow-clip",
-        "bg-filter-chip-bg border border-filter-chip-border rounded-md shadow-sm",
+        "bg-filter-chip-bg border border-filter-chip-border rounded-lg shadow-sm",
         className
       ),
       children: [
@@ -8237,7 +8258,7 @@ var FilterNodeActions = ({
       "button",
       {
         type: "button",
-        className: "shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-accent",
+        className: "shrink-0 flex items-center justify-center p-sm rounded-lg cursor-pointer transition-colors hover:bg-accent",
         "aria-label": "More actions",
         children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           import_icons37.Icon,
@@ -8256,7 +8277,7 @@ var FilterNodeActions = ({
         align: "end",
         className: cn(
           "z-50 flex flex-col p-xs overflow-clip",
-          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-lg shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "min-w-[180px]"
@@ -8312,7 +8333,7 @@ var selectBtnStyle = [
   "flex items-center gap-base",
   "px-base py-sm",
   "bg-gradient-to-t from-btn-outlined-neutral-bg-default to-btn-outlined-neutral-bg-gradient-to-default",
-  "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
+  "border border-btn-outlined-neutral-border-default rounded-lg shadow-sm",
   "cursor-pointer transition-colors",
   "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
 ];
@@ -8377,7 +8398,7 @@ var AdvancedRow = ({
         TooltipPrimitive4.Content,
         {
           sideOffset: 4,
-          className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
+          className: "z-50 px-base py-sm rounded-lg shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
           children: [
             '"Or" operator coming soon',
             /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
@@ -8398,7 +8419,7 @@ var AdvancedRow = ({
           align: "start",
           className: cn(
             "z-50 flex flex-col p-xs overflow-clip max-h-[300px] overflow-y-auto",
-            "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
+            "bg-dropdown-bg border border-dropdown-border rounded-lg shadow-lg",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[200px]"
@@ -8461,7 +8482,7 @@ var AdvancedRow = ({
           align: "start",
           className: cn(
             "z-50 flex flex-col p-xs overflow-clip",
-            "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
+            "bg-dropdown-bg border border-dropdown-border rounded-lg shadow-lg",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[160px]"
@@ -8552,7 +8573,7 @@ var AdvancedRow = ({
             align: "start",
             className: cn(
               "z-50 flex flex-col overflow-clip",
-              "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
+              "bg-dropdown-bg border border-dropdown-border rounded-lg shadow-lg",
               "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
               "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
             ),
@@ -8651,7 +8672,7 @@ function ValueTagRow({ tags }) {
           TooltipPrimitive4.Content,
           {
             sideOffset: 4,
-            className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-xs font-regular leading-xs flex flex-col gap-xs data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
+            className: "z-50 px-base py-sm rounded-lg shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-xs font-regular leading-xs flex flex-col gap-xs data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
             children: [
               overflowTags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: t }, t)),
               /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
@@ -8686,7 +8707,7 @@ var AdvancedGroup = ({
         TooltipPrimitive5.Content,
         {
           sideOffset: 4,
-          className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
+          className: "z-50 px-base py-sm rounded-lg shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
           children: [
             '"Or" operator coming soon',
             /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive5.Arrow, { className: "fill-tooltip-default-bg" })
@@ -8694,7 +8715,7 @@ var AdvancedGroup = ({
         }
       ) })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-border rounded-md bg-secondary", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-border rounded-lg bg-secondary", children: [
       children,
       onAddFilter && properties && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         PropertySelector,
@@ -8710,7 +8731,7 @@ var AdvancedGroup = ({
             "button",
             {
               type: "button",
-              className: "flex items-center gap-sm px-base py-sm text-sm font-medium leading-sm text-muted-foreground cursor-pointer transition-colors rounded-md hover:bg-accent hover:text-foreground w-fit",
+              className: "flex items-center gap-sm px-base py-sm text-sm font-medium leading-sm text-muted-foreground cursor-pointer transition-colors rounded-lg hover:bg-accent hover:text-foreground w-fit",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons39.Icon, { icon: import_icons39.faPlusOutline, size: "sm" }),
                 "Add filter"
@@ -8903,7 +8924,7 @@ var AdvancedPopover = ({
         onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col",
-          "bg-background rounded-md shadow-lg",
+          "bg-background rounded-lg shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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",
@@ -9211,7 +9232,7 @@ var SummaryChip = ({
       TooltipPrimitive6.Content,
       {
         sideOffset: 4,
-        className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm max-w-[320px] data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
+        className: "z-50 px-base py-sm rounded-lg shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm max-w-[320px] data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
         children: [
           tooltipContent,
           /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TooltipPrimitive6.Arrow, { className: "fill-tooltip-default-bg" })
@@ -9228,7 +9249,7 @@ var SummaryChip = ({
         onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col overflow-clip",
-          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-lg shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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",