@l3mpire/ui 2.25.2 → 2.26.0

package/dist/index.mjs

@@ -149,19 +149,19 @@ var buttonVariants = cva2(
       },
       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: {
@@ -287,6 +287,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__ */ jsx2(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center font-medium whitespace-nowrap",
+        shape,
+        colors
+      ),
+      children
+    }
+  );
+};
 var Button = React2.forwardRef(
   ({
     className,
@@ -300,26 +319,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__ */ jsxs2("span", { className: textWrapperClass(resolvedSize), children: [
+      children,
+      badge != null && /* @__PURE__ */ jsx2(ButtonBadge, { size: resolvedSize, intent, children: badge })
+    ] }) : null;
     if (asChild) {
       return /* @__PURE__ */ jsx2(Slot, { ref, className: cn(variantClasses), ...props, children });
     }
@@ -333,7 +354,7 @@ var Button = React2.forwardRef(
         ...props,
         children: [
           loading ? /* @__PURE__ */ jsx2(Icon2, { icon: faSpinnerSolid, size: iconSize, className: "animate-spin" }) : leftIcon ? /* @__PURE__ */ jsx2(Icon2, { icon: leftIcon, size: iconSize }) : null,
-          !isIconOnly && children,
+          labelNode,
           rightIcon && !loading && /* @__PURE__ */ jsx2(Icon2, { icon: rightIcon, size: iconSize })
         ]
       }
@@ -563,7 +584,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,
@@ -611,7 +632,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"
@@ -697,7 +718,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"
 ];
@@ -860,7 +881,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",
@@ -944,33 +965,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__ */ jsxs5("div", { className: "flex items-center justify-center gap-xs shrink-0", children: [
-            /* @__PURE__ */ jsx5(
-              Button,
-              {
-                type: "button",
-                appearance: "ghost",
-                intent: "alert",
-                size: "sm",
-                leftIcon: faXmarkOutline2,
-                onClick: onClear,
-                children: clearLabel
-              }
-            ),
-            /* @__PURE__ */ jsxs5("span", { className: "text-sm font-regular leading-sm text-bulk-action-count whitespace-nowrap", children: [
-              count,
-              " ",
-              countLabel
-            ] })
+          /* @__PURE__ */ jsxs5("span", { className: "text-sm font-regular leading-sm text-bulk-action-count whitespace-nowrap shrink-0", children: [
+            count,
+            " ",
+            countLabel
           ] }),
           /* @__PURE__ */ jsxs5(
             "div",
@@ -1023,6 +1030,20 @@ var BulkAction = React5.forwardRef(
                 )
               ]
             }
+          ),
+          /* @__PURE__ */ jsx5(
+            Button,
+            {
+              type: "button",
+              appearance: "ghost",
+              intent: "brand",
+              size: "md",
+              iconOnly: true,
+              leftIcon: faXmarkOutline2,
+              onClick: onClear,
+              "aria-label": clearLabel,
+              className: "shrink-0"
+            }
           )
         ]
       }
@@ -1056,7 +1077,7 @@ var tooltipContentVariants = cva3(
     "inline-flex items-center z-50",
     "gap-xs",
     "px-base py-sm",
-    "rounded-md",
+    "rounded-lg",
     "shadow-lg",
     "text-sm",
     "font-regular",
@@ -1306,7 +1327,7 @@ import {
 } from "@l3mpire/icons";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var infoMessageVariants = cva5(
-  "flex items-start gap-md px-lg py-base rounded-md",
+  "flex items-start gap-lg px-xl py-base rounded-lg",
   {
     variants: {
       type: {
@@ -1393,8 +1414,8 @@ import {
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var toastVariants = cva6(
   [
-    "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]",
@@ -1434,14 +1455,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__ */ jsx10(
   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
@@ -1463,7 +1484,7 @@ var Toast = React10.forwardRef(({ className, type = "info", title, subtitle, onC
       className: cn(toastVariants({ type }), !actions && "min-h-[80px]", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: "flex w-full items-center gap-md", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex w-full items-center gap-lg", children: [
           /* @__PURE__ */ jsx10("div", { className: iconContainerVariants({ type }), children: /* @__PURE__ */ jsx10(Icon9, { icon, size: "lg", className: color }) }),
           /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
             /* @__PURE__ */ jsx10(ToastPrimitive.Title, { className: titleStyle2, children: title }),
@@ -1552,7 +1573,7 @@ import { Icon as Icon10 } from "@l3mpire/icons";
 import { jsx as jsx12, jsxs as jsxs12 } from "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",
@@ -1823,7 +1844,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,
@@ -1895,7 +1916,7 @@ var Sidebar = React14.forwardRef(
               (child) => !(React14.isValidElement(child) && child.type?.displayName === "SidebarFooter")
             );
             return /* @__PURE__ */ jsxs13(Fragment2, { children: [
-              /* @__PURE__ */ jsx14("div", { className: "flex flex-col gap-lg p-lg flex-1 overflow-y-auto", children: rest }),
+              /* @__PURE__ */ jsx14("div", { className: "flex flex-col gap-xl p-xl flex-1 overflow-y-auto", children: rest }),
               footer
             ] });
           })()
@@ -1926,7 +1947,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,
@@ -1955,7 +1976,7 @@ var searchBarVariants = cva8(
       },
       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" }
@@ -2296,7 +2317,7 @@ import { Icon as Icon14 } from "@l3mpire/icons";
 import { jsx as jsx19, jsxs as jsxs18 } from "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"
@@ -2424,7 +2445,7 @@ var sidebarItemVariants = cva10(
         active: "bg-sidebar-item-active-bg"
       },
       type: {
-        default: "px-lg py-base",
+        default: "px-xl py-base",
         collapsed: "p-base justify-center"
       }
     },
@@ -2538,7 +2559,7 @@ var selectVariants = cva11(
     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" }
@@ -2685,7 +2706,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",
@@ -2839,7 +2860,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
@@ -2960,7 +2981,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__ */ jsx24(Icon17, { icon: faXmarkSolid5, size: iconSize })
@@ -3046,7 +3067,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",
@@ -3090,7 +3111,7 @@ var textInputVariants = cva13(
     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" }
@@ -3241,7 +3262,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__ */ jsx26(Icon19, { icon: buttonIcon ?? faPlusSolid2, size: "sm", className: icColor })
@@ -3278,7 +3299,7 @@ var chipInputVariants = cva14(
     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" }
@@ -3489,7 +3510,7 @@ var inputVariants = cva15(
     variants: {
       size: {
         sm: "px-base py-sm",
-        md: "px-md py-[10px]"
+        md: "px-lg py-[10px]"
       }
     },
     defaultVariants: { size: "md" }
@@ -3738,7 +3759,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
@@ -3754,7 +3775,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,
@@ -3791,7 +3812,7 @@ var modalVariants = cva17(
   [
     "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"
   ],
@@ -3842,7 +3863,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
       ),
@@ -3886,7 +3907,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
   }
 ));
@@ -3897,7 +3918,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
       ),
@@ -3941,7 +3962,7 @@ var Dialog = React32.forwardRef(
       ] }),
       /* @__PURE__ */ jsxs29(ModalFooter, { children: [
         /* @__PURE__ */ jsx32(ModalClose, { asChild: true, children: /* @__PURE__ */ jsx32(Button, { appearance: "ghost", intent: "brand", size: "md", onClick: handleCancel, children: cancelLabel }) }),
-        /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-md", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-lg", children: [
           secondaryLabel && /* @__PURE__ */ jsx32(Button, { appearance: "outlined", intent: "brand", size: "md", onClick: onSecondaryAction, children: secondaryLabel }),
           /* @__PURE__ */ jsx32(
             Button,
@@ -3971,8 +3992,8 @@ var emptyStateVariants = cva18(
   {
     variants: {
       size: {
-        md: "gap-lg",
-        sm: "gap-md"
+        md: "gap-xl",
+        sm: "gap-lg"
       }
     },
     defaultVariants: {
@@ -4052,7 +4073,7 @@ var EmptyState = React33.forwardRef(
             {
               className: cn(
                 "flex items-center",
-                isMd ? "gap-lg" : "gap-base"
+                isMd ? "gap-xl" : "gap-base"
               ),
               children: [
                 secondaryAction && /* @__PURE__ */ jsx33(
@@ -4096,7 +4117,7 @@ var AvatarCell = ({
   subtitle,
   src,
   className
-}) => /* @__PURE__ */ jsxs31("div", { className: cn("flex items-center gap-md", className), children: [
+}) => /* @__PURE__ */ jsxs31("div", { className: cn("flex items-center gap-lg", className), children: [
   /* @__PURE__ */ jsx34(Avatar, { initials: getInitials(name), src, alt: name, size: "lg", shape: "rounded" }),
   /* @__PURE__ */ jsxs31("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ jsx34("span", { className: "text-sm font-medium text-table-cell-text-primary leading-sm", children: name }),
@@ -4394,7 +4415,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",
@@ -4410,7 +4431,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",
@@ -4424,7 +4445,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
   }
 ));
@@ -4502,7 +4523,7 @@ function DataTableSettingsModal({
   };
   return /* @__PURE__ */ jsx36(Modal, { open, onOpenChange, children: /* @__PURE__ */ jsxs32(ModalContent, { size: "sm", className, children: [
     /* @__PURE__ */ jsx36(ModalHeader, { onClose: () => onOpenChange(false), children: /* @__PURE__ */ jsx36(ModalTitle, { children: title }) }),
-    /* @__PURE__ */ jsx36(ModalBody, { children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-md", children: [
+    /* @__PURE__ */ jsx36(ModalBody, { children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-lg", children: [
       /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between gap-base", children: [
         /* @__PURE__ */ jsxs32("span", { className: "text-sm font-medium text-table-cell-text-secondary", children: [
           "Columns ",
@@ -4549,7 +4570,7 @@ function DataTableSettingsModal({
             "flex flex-col max-h-[360px] overflow-auto rounded-base",
             "border border-table-border"
           ),
-          children: filtered.length === 0 ? /* @__PURE__ */ jsx36("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__ */ jsx36("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;
@@ -4672,7 +4693,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(),
@@ -5264,7 +5285,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: [
@@ -5274,7 +5295,7 @@ function DataTablePagination({
           totalCount,
           " row(s) selected"
         ] }) }),
-        /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-lg", children: [
+        /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-xl", children: [
           /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-sm", children: [
             /* @__PURE__ */ jsx37("span", { className: "text-xs text-table-cell-text-secondary whitespace-nowrap", children: "Rows per page" }),
             /* @__PURE__ */ jsx37(
@@ -5416,7 +5437,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__ */ jsx39(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
@@ -5906,7 +5927,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: [
@@ -5935,7 +5956,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",
@@ -6136,7 +6157,7 @@ var SaveViewButton = React44.forwardRef(
               ),
               children: [
                 /* @__PURE__ */ jsx44("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-solid-brand-text-default", children: label }),
-                /* @__PURE__ */ jsx44("span", { className: "absolute inset-0 rounded-l-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
+                /* @__PURE__ */ jsx44("span", { className: "absolute inset-0 rounded-l-[9px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           ),
@@ -6159,7 +6180,7 @@ var SaveViewButton = React44.forwardRef(
                     className: "text-btn-solid-brand-text-default"
                   }
                 ),
-                /* @__PURE__ */ jsx44("span", { className: "absolute inset-0 rounded-r-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
+                /* @__PURE__ */ jsx44("span", { className: "absolute inset-0 rounded-r-[9px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           )
@@ -6191,7 +6212,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",
@@ -6517,7 +6538,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,
@@ -6542,7 +6563,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__ */ jsxs43("div", { className: "flex items-center gap-base w-full", children: [
         /* @__PURE__ */ jsxs43("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: [
@@ -6654,7 +6675,7 @@ var DatePickerCalendar = React45.forwardRef(({ className, header, ...props }, re
       ...props,
       children: [
         header,
-        /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-lg p-lg", children: [
+        /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-xl p-xl", children: [
           /* @__PURE__ */ jsxs43("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxs43("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
               MONTH_NAMES[month],
@@ -6743,7 +6764,7 @@ var DatePickerSuggestions = React45.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx48("div", { className: "pt-lg px-base", children: /* @__PURE__ */ jsx48("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx48("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ jsx48("div", { className: "pt-xl px-base", children: /* @__PURE__ */ jsx48("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx48("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
           /* @__PURE__ */ jsx48("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs43(
             "button",
             {
@@ -6769,7 +6790,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
@@ -7387,7 +7408,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",
@@ -7397,7 +7418,7 @@ var PropertySelector = ({
           activeGroup === null ? (
             /* ── Level 1: Search + (pinned props) + Categories ──────── */
             /* @__PURE__ */ jsxs47("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
-              /* @__PURE__ */ jsxs47("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+              /* @__PURE__ */ jsxs47("div", { className: "shrink-0 flex items-center gap-base px-lg py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ jsx53(
                   Icon31,
                   {
@@ -7531,7 +7552,7 @@ var PropertySelector = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs47("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+              /* @__PURE__ */ jsxs47("div", { className: "shrink-0 flex items-center gap-base px-lg py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ jsx53(
                   Icon31,
                   {
@@ -7614,7 +7635,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",
@@ -7730,7 +7751,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",
@@ -7807,7 +7828,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"
@@ -7898,7 +7919,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: [
@@ -8144,7 +8165,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__ */ jsx58(
           Icon36,
@@ -8163,7 +8184,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]"
@@ -8219,7 +8240,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"
 ];
@@ -8284,7 +8305,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__ */ jsx59(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
@@ -8305,7 +8326,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]"
@@ -8368,7 +8389,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]"
@@ -8459,7 +8480,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"
             ),
@@ -8558,7 +8579,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__ */ jsx59("span", { children: t }, t)),
               /* @__PURE__ */ jsx59(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
@@ -8593,7 +8614,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__ */ jsx60(TooltipPrimitive5.Arrow, { className: "fill-tooltip-default-bg" })
@@ -8601,7 +8622,7 @@ var AdvancedGroup = ({
         }
       ) })
     ] }) }) }),
-    /* @__PURE__ */ jsxs54("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-border rounded-md bg-secondary", children: [
+    /* @__PURE__ */ jsxs54("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__ */ jsx60(
         PropertySelector,
@@ -8617,7 +8638,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__ */ jsx60(Icon38, { icon: faPlusOutline2, size: "sm" }),
                 "Add filter"
@@ -8810,7 +8831,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",
@@ -9118,7 +9139,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__ */ jsx62(TooltipPrimitive6.Arrow, { className: "fill-tooltip-default-bg" })
@@ -9135,7 +9156,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",