@refineui/react 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -280,9 +280,10 @@ __export(index_exports, {
   WebIcon: () => WebIcon,
   breadcrumbLinkClassName: () => breadcrumbLinkClassName,
   componentColorTokens: () => componentColorTokens,
-  componentSizeFoundationKeys: () => import_tokens2.componentSizeFoundationKeys,
-  componentSizes: () => import_tokens2.componentSizes,
+  componentSizeFoundationKeys: () => import_tokens3.componentSizeFoundationKeys,
+  componentSizes: () => import_tokens3.componentSizes,
   componentTextClass: () => componentTextClass,
+  componentTokens: () => componentTokens,
   componentTypographyTokens: () => componentTypographyTokens,
   defaultCommandFilter: () => defaultCommandFilter,
   dismissToast: () => dismissToast,
@@ -290,7 +291,7 @@ __export(index_exports, {
   footerLocaleLinkClassName: () => footerLocaleLinkClassName,
   footerLocaleTriggerClassName: () => footerLocaleTriggerClassName,
   footerSocialLinkClassName: () => footerSocialLinkClassName,
-  foundationSizes: () => import_tokens2.foundationSizes,
+  foundationSizes: () => import_tokens3.foundationSizes,
   semanticTextClass: () => semanticTextClass,
   sizedComponentTextClass: () => sizedComponentTextClass,
   toast: () => toast,
@@ -437,13 +438,16 @@ var componentColorTokens = {
   },
   tooltip: {
     default: {
-      background: semanticToken("surfacePopover"),
-      foreground: semanticToken("foregroundPrimary")
+      /** Menu / Select floating panel semantic */
+      background: semanticToken("backgroundPrimary"),
+      foreground: semanticToken("foregroundPrimary"),
+      border: semanticToken("borderDefault")
     }
   },
   popover: {
     default: {
-      background: semanticToken("surfacePopover"),
+      /** Menu / Select floating panel semantic */
+      background: semanticToken("backgroundPrimary"),
       foreground: semanticToken("foregroundPrimary"),
       border: semanticToken("borderDefault")
     },
@@ -587,20 +591,20 @@ var componentColorTokens = {
     border: semanticToken("borderDefault"),
     title: semanticToken("foregroundPrimary"),
     description: {
-      default: semanticToken("foregroundBrand"),
-      info: paletteToken("blue600"),
-      success: paletteToken("green600"),
-      warning: paletteToken("yellow600"),
-      danger: paletteToken("red600"),
-      custom: paletteToken("purple600")
+      default: semanticToken("foregroundSecondary"),
+      info: semanticToken("foregroundInfo"),
+      success: semanticToken("foregroundSuccess"),
+      warning: semanticToken("foregroundWarning"),
+      danger: semanticToken("foregroundError"),
+      custom: semanticToken("foregroundDiscovery")
     },
     accent: {
       default: semanticToken("foregroundPrimary"),
-      info: paletteToken("blue600"),
-      success: paletteToken("green600"),
-      warning: paletteToken("yellow600"),
-      danger: paletteToken("red600"),
-      custom: paletteToken("purple600")
+      info: semanticToken("foregroundInfo"),
+      success: semanticToken("foregroundSuccess"),
+      warning: semanticToken("foregroundWarning"),
+      danger: semanticToken("foregroundError"),
+      custom: semanticToken("foregroundDiscovery")
     }
   },
   badge: {
@@ -622,8 +626,8 @@ var componentColorTokens = {
       foreground: semanticToken("foregroundOnSuccess")
     },
     warning: {
-      background: paletteToken("orange500"),
-      foreground: paletteToken("neutralWhite")
+      background: semanticToken("backgroundWarning"),
+      foreground: semanticToken("foregroundOnWarning")
     },
     danger: {
       background: semanticToken("backgroundError"),
@@ -692,7 +696,7 @@ var componentColorTokens = {
     pointStroke: semanticToken("backgroundPrimary"),
     cursor: semanticToken("backgroundSurfaceHover"),
     tooltip: {
-      background: semanticToken("surfacePopover"),
+      background: semanticToken("backgroundPrimary"),
       foreground: semanticToken("foregroundPrimary"),
       muted: semanticToken("foregroundSecondary"),
       border: semanticToken("borderDefault")
@@ -745,8 +749,10 @@ var componentColorTokens = {
     }
   },
   toast: {
-    background: semanticToken("surfacePopover"),
+    /** Menu / Select panel semantic — solid, not frosted */
+    background: semanticToken("backgroundPrimary"),
     message: semanticToken("foregroundPrimary"),
+    border: semanticToken("borderDefault"),
     accent: {
       default: semanticToken("foregroundPrimary"),
       success: semanticToken("foregroundSuccess"),
@@ -814,14 +820,15 @@ var componentColorTokens = {
   },
   menu: {
     panel: {
-      background: semanticToken("backgroundSurface"),
+      /** Matches Menu.style panel classes */
+      background: semanticToken("backgroundPrimary"),
       border: semanticToken("borderDefault")
     },
     popover: {
       background: "transparent"
     },
     list: {
-      background: semanticToken("backgroundSurface"),
+      background: semanticToken("backgroundPrimary"),
       border: semanticToken("borderDefault")
     },
     section: semanticToken("foregroundPrimary"),
@@ -925,8 +932,8 @@ var componentColorTokens = {
   },
   divider: {
     line: semanticToken("borderDefault"),
-    label: paletteToken("primaryBlack"),
-    icon: paletteToken("primaryBlack")
+    label: semanticToken("foregroundPrimary"),
+    icon: semanticToken("foregroundPrimary")
   },
   avatar: {
     image: {
@@ -1210,11 +1217,134 @@ var componentTypographyTokens = {
   }
 };
 
-// src/typography.ts
+// src/tokens/componentTokens.ts
 var import_tokens = require("@refineui/tokens");
+var motion = {
+  fast: {
+    duration: import_tokens.semanticInteraction.duration.fast,
+    easing: import_tokens.semanticInteraction.easing.easeOut
+  },
+  indicator: {
+    duration: import_tokens.semanticInteraction.duration.medium,
+    easing: import_tokens.semanticInteraction.easing.emphasized
+  },
+  panel: {
+    duration: import_tokens.semanticInteraction.duration.panel,
+    easing: import_tokens.semanticInteraction.easing.panel
+  }
+};
+var componentTokens = {
+  color: componentColorTokens,
+  typography: componentTypographyTokens,
+  motion,
+  elevation: import_tokens.semanticElevations,
+  toast: {
+    color: componentColorTokens.toast,
+    typography: componentTypographyTokens.toast,
+    size: {
+      minWidth: import_tokens.componentSizes.toastMinWidth,
+      maxWidth: import_tokens.componentSizes.toastMaxWidth
+    },
+    elevation: {
+      role: "toast",
+      foundation: import_tokens.semanticElevations.toast
+    },
+    motion: {
+      enter: import_tokens.semanticInteraction.duration.toastEnter,
+      leave: import_tokens.semanticInteraction.duration.toastLeave,
+      easing: import_tokens.semanticInteraction.easing.emphasized
+    }
+  },
+  segmentedControl: {
+    color: componentColorTokens.segmentedControl,
+    typography: componentTypographyTokens.segmentedControl,
+    elevation: {
+      /** Selected thumb — recipe `shadow-refineui-2` / surface */
+      role: "surface",
+      foundation: import_tokens.semanticElevations.surface
+    },
+    motion: {
+      /** Indicator slide after first layout */
+      indicator: motion.indicator,
+      /** Item label color fade */
+      itemColor: motion.fast
+    }
+  },
+  button: {
+    color: componentColorTokens.button,
+    typography: componentTypographyTokens.button,
+    motion: {
+      pressScale: import_tokens.semanticInteraction.scale.press,
+      color: motion.fast
+    }
+  },
+  chip: {
+    color: componentColorTokens.chip,
+    typography: componentTypographyTokens.chip
+  },
+  badge: {
+    color: componentColorTokens.badge
+  },
+  alert: {
+    color: componentColorTokens.alert,
+    typography: componentTypographyTokens.alert
+  },
+  dialog: {
+    color: componentColorTokens.dialog,
+    typography: componentTypographyTokens.dialog,
+    elevation: {
+      role: "modal",
+      foundation: import_tokens.semanticElevations.modal
+    },
+    motion: {
+      enterScale: import_tokens.semanticInteraction.scale.dialogEnter,
+      panel: motion.panel
+    }
+  },
+  drawer: {
+    color: componentColorTokens.drawer,
+    typography: componentTypographyTokens.drawer,
+    motion: {
+      panel: motion.panel
+    }
+  },
+  accordion: {
+    color: componentColorTokens.accordion,
+    typography: componentTypographyTokens.accordion,
+    motion: {
+      panel: import_tokens.semanticInteraction.duration.accordionPanel,
+      content: import_tokens.semanticInteraction.duration.accordionContent
+    }
+  },
+  tabs: {
+    // underline indicator shares the same mount/slide motion contract
+    motion: {
+      indicator: motion.indicator
+    }
+  },
+  input: {
+    color: componentColorTokens.input,
+    typography: componentTypographyTokens.formControl
+  },
+  checkbox: {
+    color: componentColorTokens.checkbox
+  },
+  radio: {
+    color: componentColorTokens.radio
+  },
+  switch: {
+    color: componentColorTokens.switch
+  },
+  toggle: {
+    color: componentColorTokens.toggle
+  }
+};
+
+// src/typography.ts
+var import_tokens2 = require("@refineui/tokens");
 var import_utilities2 = require("@refineui/utilities");
 function semanticTextClass(name) {
-  return (0, import_utilities2.foundationTypographyUtilityClass)(import_tokens.SEMANTIC_TEXT[name]);
+  return (0, import_utilities2.foundationTypographyUtilityClass)(import_tokens2.SEMANTIC_TEXT[name]);
 }
 function componentTextClass(ref) {
   if (!(0, import_utilities2.isSemanticTextTokenRef)(ref)) {
@@ -1238,16 +1368,16 @@ function buildSemanticTextClassMap(map) {
 var import_tokens36 = require("@refineui/tokens");
 
 // src/componentSizes.ts
-var import_tokens2 = require("@refineui/tokens");
+var import_tokens3 = require("@refineui/tokens");
 
 // src/WebIcon.tsx
 var import_clsx = require("clsx");
-var import_tokens3 = require("@refineui/tokens");
+var import_tokens4 = require("@refineui/tokens");
 var import_web_icons = require("@refineui/web-icons");
 var import_jsx_runtime = require("react/jsx-runtime");
 function WebIcon({
   name,
-  size = import_tokens3.iconSizes.medium,
+  size = import_tokens4.iconSizes.medium,
   color,
   iconStyle = "regular",
   className,
@@ -1850,9 +1980,9 @@ var import_clsx6 = require("clsx");
 var import_react4 = require("react");
 
 // src/components/SearchField/style.ts
-var import_tokens4 = require("@refineui/tokens");
-var searchFieldLeadingIconSize = import_tokens4.iconSizes.medium;
-var searchFieldClearIconSize = import_tokens4.iconSizes.small;
+var import_tokens5 = require("@refineui/tokens");
+var searchFieldLeadingIconSize = import_tokens5.iconSizes.medium;
+var searchFieldClearIconSize = import_tokens5.iconSizes.small;
 var searchFieldStyles = {
   root: [
     "box-border flex w-full min-w-0 items-center gap-refineui-size-x-small overflow-hidden outline-none",
@@ -2321,7 +2451,7 @@ function CardFooter({ className, ...props }) {
 // src/components/Checkbox/Checkbox.tsx
 var import_clsx21 = require("clsx");
 var import_react5 = require("react");
-var import_tokens5 = require("@refineui/tokens");
+var import_tokens6 = require("@refineui/tokens");
 var import_color2 = require("@refineui/utilities/color");
 
 // src/components/Label/style.ts
@@ -2437,7 +2567,7 @@ function Checkbox({
                     WebIcon,
                     {
                       name: "checkmark",
-                      size: import_tokens5.iconSizes.small,
+                      size: import_tokens6.iconSizes.small,
                       color: checkColor,
                       iconStyle: "filled"
                     }
@@ -2598,7 +2728,7 @@ function Radio({
 var import_clsx28 = require("clsx");
 var import_react11 = require("react");
 var import_react_dom = require("react-dom");
-var import_tokens7 = require("@refineui/tokens");
+var import_tokens8 = require("@refineui/tokens");
 var import_react12 = require("@refineui/utilities/react");
 
 // src/components/ScrollArea/ScrollAreaRegion.tsx
@@ -2612,8 +2742,8 @@ var import_react9 = require("@refineui/utilities/react");
 
 // src/components/ScrollArea/style.ts
 var import_clsx24 = require("clsx");
-var import_tokens6 = require("@refineui/tokens");
-var SCROLL_AREA_THUMB_MIN_PX = Number.parseFloat(import_tokens6.spacings.sizeXLarge);
+var import_tokens7 = require("@refineui/tokens");
+var SCROLL_AREA_THUMB_MIN_PX = Number.parseFloat(import_tokens7.spacings.sizeXLarge);
 var scrollAreaStyles = {
   root: "box-border min-h-0 min-w-0 overflow-hidden outline-none",
   /**
@@ -3110,8 +3240,8 @@ function parsePx(px, fallback) {
   const n = Number.parseFloat(px);
   return Number.isFinite(n) ? n : fallback;
 }
-var SIDE_OFFSET = parsePx(import_tokens2.foundationSizes.foundationSize40, 4);
-var CONTENT_MARGIN = parsePx(import_tokens2.foundationSizes.foundationSize100, 10);
+var SIDE_OFFSET = parsePx(import_tokens3.foundationSizes.foundationSize40, 4);
+var CONTENT_MARGIN = parsePx(import_tokens3.foundationSizes.foundationSize100, 10);
 function clampNumber(value, [minB, maxB]) {
   return Math.min(Math.max(value, minB), maxB);
 }
@@ -3384,7 +3514,7 @@ var SelectTrigger = (0, import_react11.forwardRef)(function SelectTrigger2(props
           WebIcon,
           {
             name: "chevron-down",
-            size: import_tokens7.iconSizes.xsmall,
+            size: import_tokens8.iconSizes.xsmall,
             color: "currentColor",
             className: (0, import_clsx28.clsx)(selectStyles.chevron, open && selectStyles.chevronOpen),
             "aria-hidden": true
@@ -3401,7 +3531,7 @@ function SelectValue({ placeholder, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "data-refineui-select-value": "", className: (0, import_clsx28.clsx)(selectStyles.value, !label && "text-refineui-alias-foreground-placeholder", className), ...props, children: label || placeholder || rootPlaceholder || "Select..." });
 }
 function SelectIcon({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx28.clsx)(selectStyles.iconWrap, className), ...props, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WebIcon, { name: "chevron-down", size: import_tokens7.iconSizes.xsmall }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx28.clsx)(selectStyles.iconWrap, className), ...props, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WebIcon, { name: "chevron-down", size: import_tokens8.iconSizes.xsmall }) });
 }
 function SelectPortal({ children, container }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PortalContainerContext.Provider, { value: container ?? void 0, children });
@@ -3525,7 +3655,7 @@ var SelectContent = (0, import_react11.forwardRef)(function SelectContent2(props
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const vw = window.innerWidth;
     const vh = window.innerHeight;
-    const minW = parsePx(import_tokens2.componentSizes.dropdownMenuWidth, 180);
+    const minW = parsePx(import_tokens3.componentSizes.dropdownMenuWidth, 180);
     const width = Math.min(Math.max(triggerRect.width, minW), vw - 2 * CONTENT_MARGIN);
     const left = clampNumber(triggerRect.left, [CONTENT_MARGIN, Math.max(CONTENT_MARGIN, vw - width - CONTENT_MARGIN)]);
     const gap2 = SIDE_OFFSET;
@@ -3843,7 +3973,7 @@ function SelectItem({
           {
             className: (0, import_clsx28.clsx)(selectStyles.itemIndicator, disabled && "text-refineui-alias-foreground-disabled"),
             "aria-hidden": true,
-            children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WebIcon, { name: "checkmark", size: import_tokens7.iconSizes.xsmall }) : null
+            children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WebIcon, { name: "checkmark", size: import_tokens8.iconSizes.xsmall }) : null
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "data-refineui-select-item-text": true, className: selectStyles.itemText, children })
@@ -3925,7 +4055,7 @@ function Toggle({
 var import_clsx30 = require("clsx");
 
 // src/recipes/chip.recipe.ts
-var import_tokens8 = require("@refineui/tokens");
+var import_tokens9 = require("@refineui/tokens");
 var chipVariantClass = {
   default: "border-none bg-refineui-alias-background-surface text-refineui-alias-foreground-brand",
   outline: "border-refineui-thin border-refineui-alias-border-default box-border bg-transparent text-refineui-alias-foreground-brand",
@@ -3943,9 +4073,9 @@ var chipSizeClass = {
 };
 var chipSizeTypo = buildSemanticTextClassMap(componentTypographyTokens.chip);
 var chipSizeIcon = {
-  sm: import_tokens8.iconSizes.xxsmall,
-  md: import_tokens8.iconSizes.xsmall,
-  lg: import_tokens8.iconSizes.small
+  sm: import_tokens9.iconSizes.xxsmall,
+  md: import_tokens9.iconSizes.xsmall,
+  lg: import_tokens9.iconSizes.small
 };
 var chipRecipe = defineRecipe({
   name: "chip",
@@ -4026,13 +4156,13 @@ function Chip({
 // src/components/Command/Command.tsx
 var import_clsx34 = require("clsx");
 var import_react15 = require("react");
-var import_tokens11 = require("@refineui/tokens");
+var import_tokens12 = require("@refineui/tokens");
 
 // src/components/Dialog/Dialog.tsx
 var import_clsx32 = require("clsx");
 var import_react14 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_tokens9 = require("@refineui/tokens");
+var import_tokens10 = require("@refineui/tokens");
 var import_animation = require("@refineui/utilities/animation");
 var import_color3 = require("@refineui/utilities/color");
 
@@ -4130,9 +4260,9 @@ var dialogStyles = {
 
 // src/components/Dialog/Dialog.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var PANEL_MS = (0, import_animation.motionMsToNumber)(import_tokens9.semanticInteraction.duration.panel);
-var SCRIM_MS = (0, import_animation.motionMsToNumber)(import_tokens9.semanticInteraction.duration.overlay);
-var EASING = import_tokens9.semanticInteraction.easing.panel;
+var PANEL_MS = (0, import_animation.motionMsToNumber)(import_tokens10.semanticInteraction.duration.panel);
+var SCRIM_MS = (0, import_animation.motionMsToNumber)(import_tokens10.semanticInteraction.duration.overlay);
+var EASING = import_tokens10.semanticInteraction.easing.panel;
 var DialogContext = (0, import_react14.createContext)(null);
 function useDialogContext(component) {
   const ctx = (0, import_react14.useContext)(DialogContext);
@@ -4225,7 +4355,7 @@ function DialogContent({ className, style, container, scrollable = true, childre
     transform: entered ? "scale(1) translateY(0)" : "scale(var(--refineui-motion-scale-enter)) translateY(var(--refineui-spacing-size-small))",
     transition: `opacity ${PANEL_MS}ms ${EASING}, transform ${PANEL_MS}ms ${EASING}`,
     willChange: "opacity, transform",
-    maxWidth: size === "lg" ? import_tokens2.componentSizes.dialogMaxWidth : import_tokens2.componentSizes.dialogWidthSm
+    maxWidth: size === "lg" ? import_tokens3.componentSizes.dialogMaxWidth : import_tokens3.componentSizes.dialogWidthSm
   };
   const panelBody = scrollable ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     ScrollAreaRegion,
@@ -4343,15 +4473,15 @@ function DialogClose({ className, onClick, type = "button", ...props }) {
         onClick?.(e);
         if (!e.defaultPrevented) setOpen(false);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(WebIcon, { name: "dismiss", size: import_tokens9.iconSizes.small, color: "currentColor", iconStyle: "regular", "aria-hidden": true })
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(WebIcon, { name: "dismiss", size: import_tokens10.iconSizes.small, color: "currentColor", iconStyle: "regular", "aria-hidden": true })
     }
   );
 }
 
 // src/components/Command/style.ts
 var import_clsx33 = require("clsx");
-var import_tokens10 = require("@refineui/tokens");
-var COMMAND_LIST_MAX_HEIGHT = `min(60vh, ${import_tokens10.foundationSizes.foundationSize3200})`;
+var import_tokens11 = require("@refineui/tokens");
+var COMMAND_LIST_MAX_HEIGHT = `min(60vh, ${import_tokens11.foundationSizes.foundationSize3200})`;
 var commandStyles = {
   root: (0, import_clsx33.clsx)(
     "flex w-full flex-col overflow-hidden outline-none",
@@ -4900,9 +5030,9 @@ var CommandItem = (0, import_react15.forwardRef)(function CommandItem2({
           {
             className: commandStyles.iconWrap,
             style: {
-              width: import_tokens11.iconSizes.small,
-              minWidth: import_tokens11.iconSizes.small,
-              height: import_tokens11.iconSizes.small
+              width: import_tokens12.iconSizes.small,
+              minWidth: import_tokens12.iconSizes.small,
+              height: import_tokens12.iconSizes.small
             },
             children: startIcon
           }
@@ -4916,9 +5046,9 @@ var CommandItem = (0, import_react15.forwardRef)(function CommandItem2({
             {
               className: commandStyles.iconWrap,
               style: {
-                width: import_tokens11.iconSizes.small,
-                minWidth: import_tokens11.iconSizes.small,
-                height: import_tokens11.iconSizes.small
+                width: import_tokens12.iconSizes.small,
+                minWidth: import_tokens12.iconSizes.small,
+                height: import_tokens12.iconSizes.small
               },
               children: endIcon
             }
@@ -4938,7 +5068,7 @@ var import_react17 = require("react");
 var import_color6 = require("@refineui/utilities/color");
 
 // src/components/Avatar/avatarStyles.ts
-var import_tokens12 = require("@refineui/tokens");
+var import_tokens13 = require("@refineui/tokens");
 var import_color4 = require("@refineui/utilities/color");
 var avatarSizeAliasMap = {
   "3xs": "xxxsmall",
@@ -5003,15 +5133,15 @@ var avatarTypoNeutral = buildSemanticTextClassMap(
   componentTypographyTokens.avatar.initialsNeutral
 );
 var avatarIconSlotSize = {
-  xxxsmall: import_tokens12.iconSizes.xxsmall,
-  xxsmall: import_tokens12.iconSizes.xsmall,
-  xsmall: import_tokens12.iconSizes.small,
-  small: import_tokens12.iconSizes.small,
-  medium: import_tokens12.iconSizes.medium,
-  large: import_tokens12.iconSizes.medium,
-  xlarge: import_tokens12.iconSizes.large,
-  xxlarge: import_tokens12.iconSizes.xlarge,
-  xxxlarge: import_tokens12.iconSizes.xxlarge
+  xxxsmall: import_tokens13.iconSizes.xxsmall,
+  xxsmall: import_tokens13.iconSizes.xsmall,
+  xsmall: import_tokens13.iconSizes.small,
+  small: import_tokens13.iconSizes.small,
+  medium: import_tokens13.iconSizes.medium,
+  large: import_tokens13.iconSizes.medium,
+  xlarge: import_tokens13.iconSizes.large,
+  xxlarge: import_tokens13.iconSizes.xlarge,
+  xxxlarge: import_tokens13.iconSizes.xxlarge
 };
 var AVATAR_INNER_MASK = "relative flex size-full min-h-0 min-w-0 items-center justify-center overflow-hidden rounded-refineui-circle";
 function initialsAccentTypo(size) {
@@ -5076,15 +5206,15 @@ var defaultPersonIconColor = {
   yellow: (0, import_color4.resolveColorTokenValue)(componentColorTokens.avatar.icon.yellow)
 };
 var avatarOverflowIconSize = {
-  xxxsmall: import_tokens12.iconSizes.xsmall,
-  xxsmall: import_tokens12.iconSizes.xsmall,
-  xsmall: import_tokens12.iconSizes.small,
-  small: import_tokens12.iconSizes.small,
-  medium: import_tokens12.iconSizes.medium,
-  large: import_tokens12.iconSizes.medium,
-  xlarge: import_tokens12.iconSizes.large,
-  xxlarge: import_tokens12.iconSizes.xlarge,
-  xxxlarge: import_tokens12.iconSizes.xxlarge
+  xxxsmall: import_tokens13.iconSizes.xsmall,
+  xxsmall: import_tokens13.iconSizes.xsmall,
+  xsmall: import_tokens13.iconSizes.small,
+  small: import_tokens13.iconSizes.small,
+  medium: import_tokens13.iconSizes.medium,
+  large: import_tokens13.iconSizes.medium,
+  xlarge: import_tokens13.iconSizes.large,
+  xxlarge: import_tokens13.iconSizes.xlarge,
+  xxxlarge: import_tokens13.iconSizes.xxlarge
 };
 var avatarSpreadGap = {
   xxxsmall: "gap-refineui-size-xx-small",
@@ -5489,7 +5619,7 @@ function Avatars({
 
 // src/components/Alert/Alert.tsx
 var import_clsx38 = require("clsx");
-var import_tokens13 = require("@refineui/tokens");
+var import_tokens14 = require("@refineui/tokens");
 
 // src/components/Alert/context.ts
 var import_react18 = require("react");
@@ -5512,31 +5642,31 @@ var variantSlotClasses = {
     root: "bg-refineui-alias-background-primary",
     icon: "text-refineui-alias-foreground-info",
     title: "text-refineui-alias-foreground-info",
-    description: "text-refineui-alias-background-info"
+    description: "text-refineui-alias-foreground-info"
   },
   success: {
     root: "bg-refineui-alias-background-primary",
     icon: "text-refineui-alias-foreground-success",
     title: "text-refineui-alias-foreground-success",
-    description: "text-refineui-alias-background-success"
+    description: "text-refineui-alias-foreground-success"
   },
   warning: {
     root: "bg-refineui-alias-background-primary",
     icon: "text-refineui-alias-foreground-warning",
     title: "text-refineui-alias-foreground-warning",
-    description: "text-refineui-alias-background-warning"
+    description: "text-refineui-alias-foreground-warning"
   },
   danger: {
-    root: "bg-refineui-alias-background-error-subtle",
+    root: "bg-refineui-alias-background-primary",
     icon: "text-refineui-alias-foreground-error",
     title: "text-refineui-alias-foreground-error",
-    description: "text-refineui-alias-background-error"
+    description: "text-refineui-alias-foreground-error"
   },
   custom: {
     root: "bg-refineui-alias-background-primary",
     icon: "text-refineui-alias-foreground-discovery",
     title: "text-refineui-alias-foreground-discovery",
-    description: "text-refineui-alias-background-discovery"
+    description: "text-refineui-alias-foreground-discovery"
   }
 };
 var alertRecipe = defineSlotRecipe({
@@ -5614,7 +5744,7 @@ function AlertIcon({ className, name, children, ...props }) {
       "data-refineui": "alert-icon",
       className: (0, import_clsx38.clsx)(resolveAlertSlotClasses("icon", variant), className),
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(WebIcon, { name: iconName, size: import_tokens13.iconSizes.medium, color: "currentColor", fallback: "\u25CF", "aria-hidden": true })
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(WebIcon, { name: iconName, size: import_tokens14.iconSizes.medium, color: "currentColor", fallback: "\u25CF", "aria-hidden": true })
     }
   );
 }
@@ -5691,7 +5821,7 @@ function AlertClose({ className, type = "button", children, ...props }) {
         WebIcon,
         {
           name: "dismiss",
-          size: import_tokens13.iconSizes.small,
+          size: import_tokens14.iconSizes.small,
           color: "currentColor",
           iconStyle: "regular",
           fallback: "\xD7",
@@ -6242,11 +6372,15 @@ function TabsList({ className, children, ...props }) {
     width: 0,
     ready: false
   });
+  const [animate, setAnimate] = (0, import_react20.useState)(false);
+  const hasMeasuredRef = (0, import_react20.useRef)(false);
   const updateIndicator = (0, import_react20.useCallback)(() => {
     const list = tabListRef.current;
     if (!list) return;
     const selected = list.querySelector(`${TRIGGER_SELECTOR}[data-selected="true"]`);
     if (!selected) {
+      hasMeasuredRef.current = false;
+      setAnimate(false);
       setIndicator((prev) => ({ ...prev, width: 0, ready: false }));
       return;
     }
@@ -6259,6 +6393,18 @@ function TabsList({ className, children, ...props }) {
   (0, import_react20.useLayoutEffect)(() => {
     updateIndicator();
   }, [updateIndicator, selectedValue, children]);
+  (0, import_react20.useEffect)(() => {
+    if (!indicator.ready || hasMeasuredRef.current) return;
+    hasMeasuredRef.current = true;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [indicator.ready]);
   (0, import_react20.useEffect)(() => {
     const list = tabListRef.current;
     if (!list) return;
@@ -6294,6 +6440,7 @@ function TabsList({ className, children, ...props }) {
           {
             "data-refineui": "tabs-indicator",
             "data-ready": indicator.ready ? "true" : void 0,
+            "data-animate": animate ? "true" : void 0,
             "aria-hidden": true,
             className: tabsStyles.indicator,
             style: indicatorStyle
@@ -6501,6 +6648,8 @@ function SegmentedControl({
     width: 0,
     ready: false
   });
+  const [animate, setAnimate] = (0, import_react21.useState)(false);
+  const hasMeasuredRef = (0, import_react21.useRef)(false);
   const updateIndicator = (0, import_react21.useCallback)(() => {
     const group = groupRef.current;
     if (!group) return;
@@ -6508,6 +6657,8 @@ function SegmentedControl({
       `${ITEM_SELECTOR}[data-selected="true"]`
     );
     if (!selected) {
+      hasMeasuredRef.current = false;
+      setAnimate(false);
       setIndicator((prev) => ({ ...prev, width: 0, ready: false }));
       return;
     }
@@ -6520,6 +6671,18 @@ function SegmentedControl({
   (0, import_react21.useLayoutEffect)(() => {
     updateIndicator();
   }, [updateIndicator, selectedValue, children]);
+  (0, import_react21.useEffect)(() => {
+    if (!indicator.ready || hasMeasuredRef.current) return;
+    hasMeasuredRef.current = true;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [indicator.ready]);
   (0, import_react21.useEffect)(() => {
     const group = groupRef.current;
     if (!group) return;
@@ -6555,6 +6718,7 @@ function SegmentedControl({
           {
             "data-refineui": "segmented-control-indicator",
             "data-ready": indicator.ready ? "true" : void 0,
+            "data-animate": animate ? "true" : void 0,
             "aria-hidden": true,
             className: segmentedControlStyles.indicator,
             style: indicatorStyle
@@ -6726,14 +6890,14 @@ var import_clsx51 = require("clsx");
 
 // src/components/Accordion/context.ts
 var import_react23 = require("react");
-var import_tokens14 = require("@refineui/tokens");
+var import_tokens15 = require("@refineui/tokens");
 var import_animation2 = require("@refineui/utilities/animation");
 var AccordionContext = (0, import_react23.createContext)(null);
 var AccordionItemContext = (0, import_react23.createContext)(null);
-var PANEL_HEIGHT_MS = Number.parseFloat(import_tokens14.semanticInteraction.duration.accordionPanel) / 1e3;
-var PANEL_CONTENT_MS = Number.parseFloat(import_tokens14.semanticInteraction.duration.accordionContent) / 1e3;
-var PANEL_HEIGHT_EASE = import_tokens14.semanticInteraction.easing.panel;
-var PANEL_CONTENT_EASE = import_tokens14.semanticInteraction.easing.content;
+var PANEL_HEIGHT_MS = Number.parseFloat(import_tokens15.semanticInteraction.duration.accordionPanel) / 1e3;
+var PANEL_CONTENT_MS = Number.parseFloat(import_tokens15.semanticInteraction.duration.accordionContent) / 1e3;
+var PANEL_HEIGHT_EASE = import_tokens15.semanticInteraction.easing.panel;
+var PANEL_CONTENT_EASE = import_tokens15.semanticInteraction.easing.content;
 function usePrefersReducedMotion() {
   const [reduce, setReduce] = (0, import_react23.useState)(false);
   (0, import_react23.useEffect)(() => {
@@ -6752,7 +6916,7 @@ function toSet(value, type) {
 }
 
 // src/recipes/accordion.recipe.ts
-var import_tokens15 = require("@refineui/tokens");
+var import_tokens16 = require("@refineui/tokens");
 var accordionRecipe = defineSlotRecipe({
   name: "accordion",
   slots: ["root", "item", "trigger", "triggerRow", "chevron", "panel", "panelPad", "content"],
@@ -6791,9 +6955,9 @@ var accordionStyles = {
   panelBody: accordionRecipe.base.content
 };
 var accordionIconSize = {
-  sm: import_tokens15.iconSizes.xsmall,
-  md: import_tokens15.iconSizes.small,
-  lg: import_tokens15.iconSizes.medium
+  sm: import_tokens16.iconSizes.xsmall,
+  md: import_tokens16.iconSizes.small,
+  lg: import_tokens16.iconSizes.medium
 };
 var triggerTypo = {
   sm: sizedComponentTextClass(componentTypographyTokens.accordion.trigger, "sm"),
@@ -7027,7 +7191,7 @@ function AccordionContent({ className, children, ...props }) {
 // src/components/Breadcrumb/Breadcrumb.tsx
 var import_clsx55 = require("clsx");
 var import_react28 = require("react");
-var import_tokens16 = require("@refineui/tokens");
+var import_tokens17 = require("@refineui/tokens");
 
 // src/components/Breadcrumb/style.ts
 var breadcrumbStyles = {
@@ -7127,7 +7291,7 @@ function BreadcrumbEllipsis({ className, ...props }) {
         WebIcon,
         {
           name: "more-horizontal",
-          size: import_tokens16.iconSizes.small,
+          size: import_tokens17.iconSizes.small,
           color: "currentColor",
           fallback: "\u22EF",
           className: "items-center justify-center"
@@ -7153,7 +7317,7 @@ var BreadcrumbEllipsisTrigger = (0, import_react28.forwardRef)(
           WebIcon,
           {
             name: "more-horizontal",
-            size: import_tokens16.iconSizes.small,
+            size: import_tokens17.iconSizes.small,
             color: "currentColor",
             fallback: "\u22EF",
             className: "items-center justify-center"
@@ -7413,7 +7577,7 @@ function FooterSocial({ className, ...props }) {
 // src/components/Calendar/Calendar.tsx
 var import_clsx59 = require("clsx");
 var import_react30 = require("react");
-var import_tokens17 = require("@refineui/tokens");
+var import_tokens18 = require("@refineui/tokens");
 
 // src/components/Calendar/style.ts
 var import_clsx58 = require("clsx");
@@ -7742,7 +7906,7 @@ function Calendar({
               "aria-label": "Previous month",
               className: calendarStyles.navButton,
               onClick: () => setView(new Date(year, month - 1)),
-              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WebIcon, { name: "chevron-left", size: import_tokens17.iconSizes.small, color: "currentColor", fallback: "\u2039" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WebIcon, { name: "chevron-left", size: import_tokens18.iconSizes.small, color: "currentColor", fallback: "\u2039" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -7782,7 +7946,7 @@ function Calendar({
               "aria-label": "Next month",
               className: calendarStyles.navButton,
               onClick: () => setView(new Date(year, month + 1)),
-              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WebIcon, { name: "chevron-right", size: import_tokens17.iconSizes.small, color: "currentColor", fallback: "\u203A" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WebIcon, { name: "chevron-right", size: import_tokens18.iconSizes.small, color: "currentColor", fallback: "\u203A" })
             }
           )
         ] }),
@@ -7842,8 +8006,8 @@ function DividerCircleGlyph() {
       "aria-hidden": true,
       className: dividerStyles.iconCircle,
       style: {
-        width: import_tokens2.componentSizes.dividerIconCircleDiameter,
-        height: import_tokens2.componentSizes.dividerIconCircleDiameter
+        width: import_tokens3.componentSizes.dividerIconCircleDiameter,
+        height: import_tokens3.componentSizes.dividerIconCircleDiameter
       }
     }
   );
@@ -8216,7 +8380,7 @@ function Spacer({ className, ...props }) {
 var import_clsx68 = require("clsx");
 var import_react31 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_tokens18 = require("@refineui/tokens");
+var import_tokens19 = require("@refineui/tokens");
 var import_animation3 = require("@refineui/utilities/animation");
 var import_color7 = require("@refineui/utilities/color");
 var import_react32 = require("@refineui/utilities/react");
@@ -8257,9 +8421,9 @@ var drawerStyles = {
 
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var PANEL_MS2 = (0, import_animation3.motionMsToNumber)(import_tokens18.semanticInteraction.duration.panel);
-var SCRIM_MS2 = (0, import_animation3.motionMsToNumber)(import_tokens18.semanticInteraction.duration.overlay);
-var EASING2 = import_tokens18.semanticInteraction.easing.panel;
+var PANEL_MS2 = (0, import_animation3.motionMsToNumber)(import_tokens19.semanticInteraction.duration.panel);
+var SCRIM_MS2 = (0, import_animation3.motionMsToNumber)(import_tokens19.semanticInteraction.duration.overlay);
+var EASING2 = import_tokens19.semanticInteraction.easing.panel;
 var DrawerContext = (0, import_react31.createContext)(null);
 function useDrawerContext(component) {
   const ctx = (0, import_react31.useContext)(DrawerContext);
@@ -8282,11 +8446,11 @@ function useDrawerOpenState(openProp, defaultOpen, onOpenChange) {
 function widthToken(s) {
   switch (s) {
     case "md":
-      return import_tokens2.componentSizes.drawerWidthMd;
+      return import_tokens3.componentSizes.drawerWidthMd;
     case "lg":
-      return import_tokens2.componentSizes.drawerWidthLg;
+      return import_tokens3.componentSizes.drawerWidthLg;
     default:
-      return import_tokens2.componentSizes.drawerWidthSm;
+      return import_tokens3.componentSizes.drawerWidthSm;
   }
 }
 function Drawer({
@@ -8592,7 +8756,7 @@ function DrawerClose({
         onClick?.(e);
         if (!e.defaultPrevented) setOpen(false);
       },
-      children: iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(WebIcon, { name: "dismiss", size: import_tokens18.iconSizes.xlarge, color: "currentColor", iconStyle: "regular", "aria-hidden": true }) : children
+      children: iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(WebIcon, { name: "dismiss", size: import_tokens19.iconSizes.xlarge, color: "currentColor", iconStyle: "regular", "aria-hidden": true }) : children
     }
   );
 }
@@ -8601,7 +8765,7 @@ function DrawerClose({
 var import_clsx70 = require("clsx");
 var import_react34 = require("react");
 var import_react_dom4 = require("react-dom");
-var import_tokens19 = require("@refineui/tokens");
+var import_tokens20 = require("@refineui/tokens");
 var import_color8 = require("@refineui/utilities/color");
 
 // src/components/Dropdown/style.ts
@@ -8870,9 +9034,9 @@ function DropdownContent({
   const { open, setOpen, close, triggerRef, menuRef, menuId } = useDropdownRoot("DropdownContent");
   const [fixedStyle, setFixedStyle] = (0, import_react34.useState)(null);
   const [menuSide, setMenuSide] = (0, import_react34.useState)("bottom");
-  const gapPx = sideOffset ?? parseCssPxLen(import_tokens19.spacings.sizeXXSmall, 4);
-  const defaultMenuW = parseCssPxLen(import_tokens2.componentSizes.dropdownMenuWidth, 180);
-  const z = Number.parseInt(String(import_tokens19.zIndex.zIndexMessages), 10) || 1e4;
+  const gapPx = sideOffset ?? parseCssPxLen(import_tokens20.spacings.sizeXXSmall, 4);
+  const defaultMenuW = parseCssPxLen(import_tokens3.componentSizes.dropdownMenuWidth, 180);
+  const z = Number.parseInt(String(import_tokens20.zIndex.zIndexMessages), 10) || 1e4;
   useIsomorphicLayoutEffect3(() => {
     if (!open) {
       setFixedStyle(null);
@@ -8899,7 +9063,7 @@ function DropdownContent({
           position: "fixed",
           top: pos.top,
           left: pos.left,
-          minWidth: import_tokens2.componentSizes.dropdownMenuWidth,
+          minWidth: import_tokens3.componentSizes.dropdownMenuWidth,
           zIndex: z,
           maxHeight: "min(60vh, 20rem)"
         };
@@ -9220,7 +9384,7 @@ function DropdownSubTrigger({
           WebIcon,
           {
             name: "chevron-right",
-            size: import_tokens19.iconSizes.small,
+            size: import_tokens20.iconSizes.small,
             color: "currentColor",
             "aria-hidden": true,
             className: "ms-auto shrink-0"
@@ -9236,8 +9400,8 @@ function DropdownSubContent({ className, children, style, ...props }) {
   const panelRef = (0, import_react34.useRef)(null);
   const [fixedStyle, setFixedStyle] = (0, import_react34.useState)(null);
   const [side, setSide] = (0, import_react34.useState)("right");
-  const defaultMenuW = parseCssPxLen(import_tokens2.componentSizes.dropdownMenuWidth, 180);
-  const gapPx = parseCssPxLen(import_tokens19.spacings.sizeXXXSmall, 2);
+  const defaultMenuW = parseCssPxLen(import_tokens3.componentSizes.dropdownMenuWidth, 180);
+  const gapPx = parseCssPxLen(import_tokens20.spacings.sizeXXXSmall, 2);
   const setPanelEl = (0, import_react34.useCallback)(
     (el) => {
       panelRef.current = el;
@@ -9274,8 +9438,8 @@ function DropdownSubContent({ className, children, style, ...props }) {
         position: "fixed",
         top: pos.top,
         left: pos.left,
-        minWidth: import_tokens2.componentSizes.dropdownMenuWidth,
-        zIndex: (Number.parseInt(String(import_tokens19.zIndex.zIndexMessages), 10) || 1e4) + 100,
+        minWidth: import_tokens3.componentSizes.dropdownMenuWidth,
+        zIndex: (Number.parseInt(String(import_tokens20.zIndex.zIndexMessages), 10) || 1e4) + 100,
         maxHeight: "min(60vh, 20rem)"
       });
     };
@@ -9428,7 +9592,7 @@ function FieldError({ className, ...props }) {
 
 // src/components/Link/Link.tsx
 var import_clsx74 = require("clsx");
-var import_tokens20 = require("@refineui/tokens");
+var import_tokens21 = require("@refineui/tokens");
 
 // src/components/Link/style.ts
 var linkStyles = {
@@ -9466,7 +9630,7 @@ function Link({
       ...props,
       children: [
         children,
-        showOpen && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(WebIcon, { name: "open", size: import_tokens20.iconSizes.large, color: "currentColor" })
+        showOpen && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(WebIcon, { name: "open", size: import_tokens21.iconSizes.large, color: "currentColor" })
       ]
     }
   );
@@ -9476,7 +9640,7 @@ function Link({
 var import_clsx76 = require("clsx");
 var import_react36 = require("react");
 var import_react_dom5 = require("react-dom");
-var import_tokens21 = require("@refineui/tokens");
+var import_tokens22 = require("@refineui/tokens");
 var import_animation4 = require("@refineui/utilities/animation");
 var import_react37 = require("@refineui/utilities/react");
 
@@ -9605,8 +9769,8 @@ function MenuPopover({ className, children, style, ...props }) {
   const [shouldRender, setShouldRender] = (0, import_react36.useState)(open);
   const [isClosing, setIsClosing] = (0, import_react36.useState)(false);
   const [fixedStyle, setFixedStyle] = (0, import_react36.useState)(null);
-  const gapPx = parseCssPx(import_tokens21.spacings.sizeXXSmall, 4);
-  const z = Number.parseInt(String(import_tokens21.zIndex.zIndexMessages), 10) || 1e4;
+  const gapPx = parseCssPx(import_tokens22.spacings.sizeXXSmall, 4);
+  const z = Number.parseInt(String(import_tokens22.zIndex.zIndexMessages), 10) || 1e4;
   (0, import_react36.useEffect)(() => {
     if (open) {
       setShouldRender(true);
@@ -9621,7 +9785,7 @@ function MenuPopover({ className, children, style, ...props }) {
       setShouldRender(false);
       setIsClosing(false);
       setFixedStyle(null);
-    }, (0, import_animation4.motionMsToNumber)(import_tokens21.semanticInteraction.duration.normal));
+    }, (0, import_animation4.motionMsToNumber)(import_tokens22.semanticInteraction.duration.normal));
     return () => window.clearTimeout(timeout);
   }, [open, shouldRender]);
   useIsomorphicLayoutEffect4(() => {
@@ -9636,7 +9800,7 @@ function MenuPopover({ className, children, style, ...props }) {
         position: "fixed",
         top: rect.bottom + gapPx,
         left: rect.left,
-        minWidth: import_tokens2.componentSizes.menuPanelWidth,
+        minWidth: import_tokens3.componentSizes.menuPanelWidth,
         width: positioning?.autoSize ? "max-content" : void 0,
         maxWidth: "min(100vw - 16px, 24rem)",
         zIndex: z
@@ -9761,9 +9925,9 @@ function MenuItem({
           {
             className: menuStyles.iconWrap,
             style: {
-              width: import_tokens21.iconSizes.small,
-              minWidth: import_tokens21.iconSizes.small,
-              height: import_tokens21.iconSizes.small
+              width: import_tokens22.iconSizes.small,
+              minWidth: import_tokens22.iconSizes.small,
+              height: import_tokens22.iconSizes.small
             },
             children: startIcon
           }
@@ -9788,9 +9952,9 @@ function MenuItem({
             {
               className: menuStyles.iconWrap,
               style: {
-                width: import_tokens21.iconSizes.small,
-                minWidth: import_tokens21.iconSizes.small,
-                height: import_tokens21.iconSizes.small
+                width: import_tokens22.iconSizes.small,
+                minWidth: import_tokens22.iconSizes.small,
+                height: import_tokens22.iconSizes.small
               },
               children: endIcon
             }
@@ -9942,9 +10106,9 @@ function MenuSubTrigger({
           {
             className: menuStyles.iconWrap,
             style: {
-              width: import_tokens21.iconSizes.small,
-              minWidth: import_tokens21.iconSizes.small,
-              height: import_tokens21.iconSizes.small
+              width: import_tokens22.iconSizes.small,
+              minWidth: import_tokens22.iconSizes.small,
+              height: import_tokens22.iconSizes.small
             },
             children: startIcon
           }
@@ -9967,11 +10131,11 @@ function MenuSubTrigger({
           {
             className: menuStyles.iconWrap,
             style: {
-              width: import_tokens21.iconSizes.small,
-              minWidth: import_tokens21.iconSizes.small,
-              height: import_tokens21.iconSizes.small
+              width: import_tokens22.iconSizes.small,
+              minWidth: import_tokens22.iconSizes.small,
+              height: import_tokens22.iconSizes.small
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(WebIcon, { name: "chevron-right", size: import_tokens21.iconSizes.small, color: "currentColor", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(WebIcon, { name: "chevron-right", size: import_tokens22.iconSizes.small, color: "currentColor", "aria-hidden": true })
           }
         ) })
       ] })
@@ -9984,9 +10148,9 @@ function MenuSubContent({ className, children, style, ...props }) {
   const panelRef = (0, import_react36.useRef)(null);
   const [fixedStyle, setFixedStyle] = (0, import_react36.useState)(null);
   const [side, setSide] = (0, import_react36.useState)("right");
-  const gapPx = parseCssPx(import_tokens21.spacings.sizeXXXSmall, 2);
-  const z = (Number.parseInt(String(import_tokens21.zIndex.zIndexMessages), 10) || 1e4) + 100;
-  const defaultW = parseCssPx(import_tokens2.componentSizes.menuPanelWidth, 244);
+  const gapPx = parseCssPx(import_tokens22.spacings.sizeXXXSmall, 2);
+  const z = (Number.parseInt(String(import_tokens22.zIndex.zIndexMessages), 10) || 1e4) + 100;
+  const defaultW = parseCssPx(import_tokens3.componentSizes.menuPanelWidth, 244);
   const setPanelEl = (0, import_react36.useCallback)(
     (el) => {
       panelRef.current = el;
@@ -10025,7 +10189,7 @@ function MenuSubContent({ className, children, style, ...props }) {
         position: "fixed",
         top: pos.top,
         left: pos.left,
-        minWidth: import_tokens2.componentSizes.menuPanelWidth,
+        minWidth: import_tokens3.componentSizes.menuPanelWidth,
         zIndex: z,
         maxHeight: "min(60vh, 20rem)"
       });
@@ -10084,14 +10248,14 @@ function MenuSubContent({ className, children, style, ...props }) {
 // src/components/NavigationMenu/NavigationMenu.tsx
 var import_clsx78 = require("clsx");
 var import_react38 = require("react");
-var import_tokens22 = require("@refineui/tokens");
+var import_tokens23 = require("@refineui/tokens");
 var import_animation5 = require("@refineui/utilities/animation");
 
 // src/components/NavigationMenu/style.ts
 var import_clsx77 = require("clsx");
 var topLevelItem = (0, import_clsx77.clsx)(
   componentTextClass(componentTypographyTokens.navigationMenu.trigger),
-  "box-border inline-flex cursor-pointer items-center justify-center gap-refineui-size-x-small",
+  "box-border inline-flex h-refineui-button-min-height-md min-w-refineui-navigation-menu-item-min-width cursor-pointer items-center justify-center gap-refineui-size-x-small",
   "rounded-refineui-large border-none bg-transparent px-refineui-size-medium py-refineui-size-x-small",
   "text-refineui-alias-foreground-tertiary outline-none leading-none",
   "transition-[color,background-color] duration-[var(--refineui-motion-duration-fast)]"
@@ -10108,8 +10272,6 @@ var navigationMenuStyles = {
   triggerDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   chevron,
   chevronOpen: "rotate-180",
-  /** Matches trigger chevron box so direct top-level links align with dropdown triggers. */
-  linkChevronSpacer: (0, import_clsx77.clsx)(chevron, "inline-block size-refineui-icon-xsmall shrink-0 pointer-events-none invisible"),
   content: (0, import_clsx77.clsx)(
     /** Flush under trigger so pointer does not leave the item while moving into the panel. */
     "absolute start-0 top-full z-refineui-messages pt-refineui-size-xx-small",
@@ -10184,8 +10346,8 @@ function NavigationMenu({
   const openTimerRef = (0, import_react38.useRef)(null);
   const closeTimerRef = (0, import_react38.useRef)(null);
   const rootRef = (0, import_react38.useRef)(null);
-  const delayDuration = delayDurationProp ?? (0, import_animation5.motionMsToNumber)(import_tokens22.semanticInteraction.duration.normal);
-  const skipDelayDuration = skipDelayDurationProp ?? (0, import_animation5.motionMsToNumber)(import_tokens22.semanticInteraction.duration.fast);
+  const delayDuration = delayDurationProp ?? (0, import_animation5.motionMsToNumber)(import_tokens23.semanticInteraction.duration.normal);
+  const skipDelayDuration = skipDelayDurationProp ?? (0, import_animation5.motionMsToNumber)(import_tokens23.semanticInteraction.duration.fast);
   const clearTimers = (0, import_react38.useCallback)(() => {
     if (openTimerRef.current != null) {
       window.clearTimeout(openTimerRef.current);
@@ -10350,10 +10512,12 @@ function NavigationMenuItem({
       onPointerEnter: (event) => {
         onPointerEnter?.(event);
         if (event.defaultPrevented) return;
-        const hasTrigger = Boolean(
-          event.currentTarget.querySelector('[data-refineui="navigation-menu-trigger"]')
+        const hasEnabledTrigger = Boolean(
+          event.currentTarget.querySelector(
+            '[data-refineui="navigation-menu-trigger"]:not(:disabled)'
+          )
         );
-        if (hasTrigger) {
+        if (hasEnabledTrigger) {
           menu.openItem(value);
         }
       },
@@ -10432,7 +10596,7 @@ function NavigationMenuTrigger({
           WebIcon,
           {
             name: "chevron-down",
-            size: import_tokens22.iconSizes.xsmall,
+            size: import_tokens23.iconSizes.xsmall,
             color: "currentColor",
             className: (0, import_clsx78.clsx)(
               navigationMenuStyles.chevron,
@@ -10465,7 +10629,7 @@ function NavigationMenuContent({
     const timeout = window.setTimeout(() => {
       setShouldRender(false);
       setIsClosing(false);
-    }, (0, import_animation5.motionMsToNumber)(import_tokens22.semanticInteraction.duration.fast));
+    }, (0, import_animation5.motionMsToNumber)(import_tokens23.semanticInteraction.duration.fast));
     return () => window.clearTimeout(timeout);
   }, [item.open, shouldRender]);
   const contentCtx = (0, import_react38.useMemo)(
@@ -10507,7 +10671,7 @@ function NavigationMenuLink({
   const menu = (0, import_react38.useContext)(NavigationMenuContext);
   const inContent = menu?.isInsideContent ?? false;
   const disabled = ariaDisabled === true || ariaDisabled === "true";
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "a",
     {
       "data-refineui": "navigation-menu-link",
@@ -10523,7 +10687,11 @@ function NavigationMenuLink({
       ),
       onClick: (event) => {
         onClick?.(event);
-        if (event.defaultPrevented || disabled) return;
+        if (event.defaultPrevented) return;
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
         menu?.setValue("");
       },
       onFocus: (event) => {
@@ -10533,10 +10701,7 @@ function NavigationMenuLink({
         }
       },
       ...props,
-      children: [
-        children,
-        !inContent ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { "aria-hidden": true, className: navigationMenuStyles.linkChevronSpacer }) : null
-      ]
+      children
     }
   );
 }
@@ -10741,7 +10906,7 @@ function SidebarFooter({ className, ...props }) {
 // src/components/Sidebar/SidebarPeek.tsx
 var import_clsx82 = require("clsx");
 var import_react39 = require("react");
-var import_tokens23 = require("@refineui/tokens");
+var import_tokens24 = require("@refineui/tokens");
 var import_animation6 = require("@refineui/utilities/animation");
 
 // src/components/Sidebar/peekStyle.ts
@@ -10767,9 +10932,9 @@ var sidebarPeekStyles = {
 
 // src/components/Sidebar/SidebarPeek.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var PEEK_OPEN_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens23.semanticInteraction.duration.medium);
-var PEEK_CLOSE_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens23.semanticInteraction.duration.medium);
-var PEEK_BRIDGE_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens23.semanticInteraction.duration.slow);
+var PEEK_OPEN_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens24.semanticInteraction.duration.medium);
+var PEEK_CLOSE_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens24.semanticInteraction.duration.medium);
+var PEEK_BRIDGE_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens24.semanticInteraction.duration.slow);
 var SidebarPeekContext = (0, import_react39.createContext)(null);
 function useSidebarPeekContext(component) {
   const ctx = (0, import_react39.useContext)(SidebarPeekContext);
@@ -11021,7 +11186,7 @@ function useSidebarPeek() {
 
 // src/components/Pagination/Pagination.tsx
 var import_clsx84 = require("clsx");
-var import_tokens24 = require("@refineui/tokens");
+var import_tokens25 = require("@refineui/tokens");
 var import_color10 = require("@refineui/utilities/color");
 
 // src/components/Pagination/style.ts
@@ -11084,7 +11249,7 @@ function PaginationNavButton({
         WebIcon,
         {
           name: isPrev ? "chevron-left" : "chevron-right",
-          size: import_tokens24.iconSizes.medium,
+          size: import_tokens25.iconSizes.medium,
           color: iconColor,
           fallback: isPrev ? "\u2039" : "\u203A"
         }
@@ -11111,7 +11276,7 @@ function PaginationEllipsis({ className, ...props }) {
         WebIcon,
         {
           name: "more-horizontal",
-          size: import_tokens24.iconSizes.medium,
+          size: import_tokens25.iconSizes.medium,
           color: (0, import_color10.resolveColorTokenValue)(componentColorTokens.pagination.navIcon.default),
           fallback: "\u2026"
         }
@@ -11126,7 +11291,7 @@ function Pagination(props) {
 // src/components/PopOver/PopOver.tsx
 var import_clsx85 = require("clsx");
 var import_react40 = require("react");
-var import_tokens25 = require("@refineui/tokens");
+var import_tokens26 = require("@refineui/tokens");
 var import_color11 = require("@refineui/utilities/color");
 var import_react41 = require("@refineui/utilities/react");
 
@@ -11169,15 +11334,15 @@ function usePopoverContext(component) {
   if (!ctx) throw new Error(`${component} must be used within <Popover>`);
   return ctx;
 }
-var BEAK_W = import_tokens2.foundationSizes.foundationSize160;
-var BEAK_H = import_tokens2.foundationSizes.foundationSize80;
-var BEAK_OFFSET = import_tokens2.foundationSizes.foundationSize80;
-var BEAK_BORDER_OVERLAP = import_tokens25.strokeWidths.strokeWidthThin;
-var POPOVER_GAP = import_tokens25.spacings.sizeMedium;
+var BEAK_W = import_tokens3.foundationSizes.foundationSize160;
+var BEAK_H = import_tokens3.foundationSizes.foundationSize80;
+var BEAK_OFFSET = import_tokens3.foundationSizes.foundationSize80;
+var BEAK_BORDER_OVERLAP = import_tokens26.strokeWidths.strokeWidthThin;
+var POPOVER_GAP = import_tokens26.spacings.sizeMedium;
 function beakWrapperStyle(placement, align) {
-  const insetStart = import_tokens2.componentSizes.popoverBeakInsetFromStartEdge;
-  const insetEnd = import_tokens2.componentSizes.popoverBeakInsetFromEndEdge;
-  const edge = import_tokens25.spacings.sizeMedium;
+  const insetStart = import_tokens3.componentSizes.popoverBeakInsetFromStartEdge;
+  const insetEnd = import_tokens3.componentSizes.popoverBeakInsetFromEndEdge;
+  const edge = import_tokens26.spacings.sizeMedium;
   const overlapOffset = `calc(-1 * ${BEAK_OFFSET} + ${BEAK_BORDER_OVERLAP})`;
   switch (placement) {
     case "bottom":
@@ -11405,8 +11570,8 @@ function PopoverContent({
             ),
             style: {
               ...styleProp && typeof styleProp === "object" ? styleProp : {},
-              minWidth: import_tokens2.componentSizes.popoverPanelWidth,
-              padding: import_tokens25.spacings.sizeLarge,
+              minWidth: import_tokens3.componentSizes.popoverPanelWidth,
+              padding: import_tokens26.spacings.sizeLarge,
               backgroundColor: bg,
               color: (0, import_color11.resolveColorTokenValue)(palette.foreground),
               borderColor: borderCol
@@ -11562,7 +11727,7 @@ function Slider({
 
 // src/components/Carousel/Carousel.tsx
 var import_clsx89 = require("clsx");
-var import_tokens26 = require("@refineui/tokens");
+var import_tokens27 = require("@refineui/tokens");
 var import_react43 = require("react");
 
 // src/components/Carousel/style.ts
@@ -11913,7 +12078,7 @@ function CarouselPrevious({ className, disabled, onClick, ...props }) {
         WebIcon,
         {
           name: "chevron-left",
-          size: import_tokens26.iconSizes.small,
+          size: import_tokens27.iconSizes.small,
           color: "currentColor",
           iconStyle: "filled",
           fallback: "\u2039"
@@ -11945,7 +12110,7 @@ function CarouselNext({ className, disabled, onClick, ...props }) {
         WebIcon,
         {
           name: "chevron-right",
-          size: import_tokens26.iconSizes.small,
+          size: import_tokens27.iconSizes.small,
           color: "currentColor",
           iconStyle: "filled",
           fallback: "\u203A"
@@ -12210,7 +12375,7 @@ function BubbleReactions({
 
 // src/components/Stepper/Stepper.tsx
 var import_clsx93 = require("clsx");
-var import_tokens27 = require("@refineui/tokens");
+var import_tokens28 = require("@refineui/tokens");
 var import_react45 = require("react");
 
 // src/components/Stepper/style.ts
@@ -12472,7 +12637,7 @@ function StepperIndicator({ className, children, ...props }) {
     WebIcon,
     {
       name: "checkmark",
-      size: import_tokens27.iconSizes.xsmall,
+      size: import_tokens28.iconSizes.xsmall,
       color: "currentColor",
       iconStyle: "filled",
       fallback: "\u2713",
@@ -13083,7 +13248,7 @@ function ResizableHandle({
 // src/components/SpinButton/SpinButton.tsx
 var import_clsx96 = require("clsx");
 var import_react47 = require("react");
-var import_tokens28 = require("@refineui/tokens");
+var import_tokens29 = require("@refineui/tokens");
 
 // src/components/SpinButton/style.ts
 var spinButtonStyles = {
@@ -13292,7 +13457,7 @@ function SpinButton({
                     WebIcon,
                     {
                       name: "chevron-up",
-                      size: import_tokens28.iconSizes.xsmall,
+                      size: import_tokens29.iconSizes.xsmall,
                       color: "currentColor",
                       iconStyle: "filled",
                       fallback: "\u25B2"
@@ -13316,7 +13481,7 @@ function SpinButton({
                     WebIcon,
                     {
                       name: "chevron-down",
-                      size: import_tokens28.iconSizes.xsmall,
+                      size: import_tokens29.iconSizes.xsmall,
                       color: "currentColor",
                       iconStyle: "filled",
                       fallback: "\u25BC"
@@ -13336,14 +13501,15 @@ function SpinButton({
 var import_clsx98 = require("clsx");
 var import_react48 = require("react");
 var import_react_dom6 = require("react-dom");
-var import_tokens29 = require("@refineui/tokens");
+var import_tokens30 = require("@refineui/tokens");
 var import_animation7 = require("@refineui/utilities/animation");
+var import_color12 = require("@refineui/utilities/color");
 
 // src/recipes/toast.recipe.ts
 var import_clsx97 = require("clsx");
 var toastRecipe = defineRecipe({
   name: "toast",
-  base: "relative isolate box-border flex w-fit max-w-refineui-toast-max-width cursor-grab items-center gap-refineui-size-small rounded-refineui-circle border-none py-refineui-size-medium ps-refineui-size-medium pe-refineui-size-large select-none",
+  base: "relative isolate box-border flex w-fit min-w-refineui-toast-min-width max-w-refineui-toast-max-width cursor-grab items-center gap-refineui-size-small rounded-refineui-x-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary py-refineui-size-medium ps-refineui-size-medium pe-refineui-size-large select-none",
   variants: {
     variant: {
       default: "",
@@ -13373,7 +13539,7 @@ var toastStyles = {
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var useIsomorphicLayoutEffect6 = typeof document !== "undefined" ? import_react48.useLayoutEffect : import_react48.useEffect;
 var ENTER_MS = 20;
-var LEAVE_MS = (0, import_animation7.motionMsToNumber)(import_tokens29.semanticInteraction.duration.toastLeave) + 60;
+var LEAVE_MS = (0, import_animation7.motionMsToNumber)(componentTokens.toast.motion.leave) + 60;
 var DEFAULT_DURATION = 4200;
 var DEFAULT_MAX_TOASTS = 1;
 var STACK_Z_BASE = 100;
@@ -13394,10 +13560,10 @@ function gapPxFromSpacingToken(token) {
 var TOAST_NARROW_STACK_MQ = "(max-width: 480px), (hover: none)";
 function readToastStackGapPx() {
   if (typeof globalThis.matchMedia === "undefined") {
-    return gapPxFromSpacingToken(String(import_tokens29.spacings.sizeLarge));
+    return gapPxFromSpacingToken(String(import_tokens30.spacings.sizeLarge));
   }
   const mq = globalThis.matchMedia(TOAST_NARROW_STACK_MQ);
-  return gapPxFromSpacingToken(mq.matches ? String(import_tokens29.spacings.sizeMedium) : String(import_tokens29.spacings.sizeLarge));
+  return gapPxFromSpacingToken(mq.matches ? String(import_tokens30.spacings.sizeMedium) : String(import_tokens30.spacings.sizeLarge));
 }
 function subscribeToastStackGap(onChange) {
   if (typeof globalThis.matchMedia === "undefined") return () => {
@@ -13410,7 +13576,7 @@ function useToastStackGapPx() {
   return (0, import_react48.useSyncExternalStore)(
     subscribeToastStackGap,
     readToastStackGapPx,
-    () => gapPxFromSpacingToken(String(import_tokens29.spacings.sizeLarge))
+    () => gapPxFromSpacingToken(String(import_tokens30.spacings.sizeLarge))
   );
 }
 function readToastNaturalHeight(li) {
@@ -13562,7 +13728,7 @@ var Toast = (0, import_react48.forwardRef)(function Toast2(props, ref) {
     WebIcon,
     {
       name: resolvedIconName,
-      size: import_tokens29.iconSizes.medium,
+      size: import_tokens30.iconSizes.medium,
       color: "currentColor",
       iconStyle: "filled"
     }
@@ -13578,6 +13744,12 @@ var Toast = (0, import_react48.forwardRef)(function Toast2(props, ref) {
       children: action.label
     }
   ) : action;
+  const color = componentColorTokens.toast;
+  const tokenStyle = {
+    backgroundColor: (0, import_color12.resolveColorTokenValue)(color.background),
+    borderColor: (0, import_color12.resolveColorTokenValue)(color.border),
+    color: (0, import_color12.resolveColorTokenValue)(color.message)
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "div",
     {
@@ -13588,7 +13760,7 @@ var Toast = (0, import_react48.forwardRef)(function Toast2(props, ref) {
       role: liveRole,
       "aria-live": ariaLive,
       ...domProps,
-      style,
+      style: { ...tokenStyle, ...style },
       className: (0, import_clsx98.clsx)(toastStyles.card, className),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { "data-refineui": "toast-icon", className: toastStyles.iconWrap, children: iconContent }),
@@ -13871,12 +14043,12 @@ var import_react50 = require("react");
 
 // src/components/Tree/context.ts
 var import_react49 = require("react");
-var import_tokens30 = require("@refineui/tokens");
+var import_tokens31 = require("@refineui/tokens");
 var import_animation8 = require("@refineui/utilities/animation");
-var TREE_PANEL_MS = Number.parseFloat(import_tokens30.semanticInteraction.duration.accordionPanel) / 1e3;
-var TREE_CONTENT_MS = Number.parseFloat(import_tokens30.semanticInteraction.duration.accordionContent) / 1e3;
-var TREE_PANEL_EASE = import_tokens30.semanticInteraction.easing.panel;
-var TREE_CONTENT_EASE = import_tokens30.semanticInteraction.easing.content;
+var TREE_PANEL_MS = Number.parseFloat(import_tokens31.semanticInteraction.duration.accordionPanel) / 1e3;
+var TREE_CONTENT_MS = Number.parseFloat(import_tokens31.semanticInteraction.duration.accordionContent) / 1e3;
+var TREE_PANEL_EASE = import_tokens31.semanticInteraction.easing.panel;
+var TREE_CONTENT_EASE = import_tokens31.semanticInteraction.easing.content;
 var TreeContext = (0, import_react49.createContext)(null);
 var TreeItemContext = (0, import_react49.createContext)(null);
 function usePrefersReducedMotion2() {
@@ -13897,7 +14069,7 @@ function toExpandedSet(value) {
 
 // src/components/Tree/style.ts
 var import_clsx99 = require("clsx");
-var import_tokens31 = require("@refineui/tokens");
+var import_tokens32 = require("@refineui/tokens");
 var treeStyles = {
   root: "m-0 flex list-none flex-col gap-px p-0",
   item: "m-0 list-none p-0",
@@ -13925,9 +14097,9 @@ var treeStyles = {
   label: "min-w-0 flex-1 truncate text-start"
 };
 var treeIconSize = {
-  sm: import_tokens31.iconSizes.xxsmall,
-  md: import_tokens31.iconSizes.xsmall,
-  lg: import_tokens31.iconSizes.xsmall
+  sm: import_tokens32.iconSizes.xxsmall,
+  md: import_tokens32.iconSizes.xsmall,
+  lg: import_tokens32.iconSizes.xsmall
 };
 var treeItemTypo = {
   sm: sizedComponentTextClass(componentTypographyTokens.tree.item, "sm"),
@@ -14336,36 +14508,49 @@ function TreeItemContent({ className, children, ...props }) {
 // src/components/Tooltip/Tooltip.tsx
 var import_clsx105 = require("clsx");
 var import_react54 = require("react");
-var import_tokens33 = require("@refineui/tokens");
-var import_color12 = require("@refineui/utilities/color");
+var import_color13 = require("@refineui/utilities/color");
 var import_react55 = require("@refineui/utilities/react");
 
 // src/components/Tooltip/style.ts
-var import_tokens32 = require("@refineui/tokens");
+var import_tokens33 = require("@refineui/tokens");
 var import_clsx104 = require("clsx");
+var TOOLTIP_BEAK_W = import_tokens3.foundationSizes.foundationSize160;
+var TOOLTIP_BEAK_H = import_tokens3.foundationSizes.foundationSize80;
+var TOOLTIP_BEAK_OFFSET = import_tokens3.foundationSizes.foundationSize80;
+var BEAK_BORDER_OVERLAP2 = import_tokens33.strokeWidths.strokeWidthThin;
+var gap = import_tokens33.spacings.sizeXSmall;
+var edgeInset = import_tokens33.spacings.sizeMedium;
 var tooltipStyles = {
   root: "relative inline-block",
   fallbackTrigger: "inline-flex outline-none",
+  /** Positions the floating stack (beak + panel), like PopOver `floatingRoot`. */
+  floating: "pointer-events-none absolute z-refineui-popup",
+  panelWrap: "relative inline-block max-w-refineui-tooltip-max-width",
+  beakWrap: "pointer-events-none absolute z-[1]",
   panel: (0, import_clsx104.clsx)(
     componentTextClass(componentTypographyTokens.tooltip),
-    "pointer-events-none absolute z-refineui-popup max-w-refineui-tooltip-max-width whitespace-nowrap rounded-refineui-medium px-refineui-size-medium py-refineui-size-small"
+    "relative z-0 box-border max-w-refineui-tooltip-max-width whitespace-nowrap rounded-refineui-medium border-refineui-thin px-refineui-size-medium py-refineui-size-small shadow-refineui-8"
   )
 };
-var gap = import_tokens32.spacings.sizeXSmall;
-var edgeInset = import_tokens32.spacings.sizeMedium;
-var arrowPanelOverlap = import_tokens32.strokeWidths.strokeWidthThin;
-function arrowOutset(halfPx) {
-  return `calc(-1 * ${halfPx}px + ${arrowPanelOverlap})`;
-}
-function dropShadowFromLayer(layer) {
-  const [x, y, blur, , ...colorTokens] = layer.split(" ");
-  return `drop-shadow(${x} ${y} ${blur} ${colorTokens.join(" ")})`;
+function tooltipPlacement(position) {
+  switch (position) {
+    case "Top":
+      return "top";
+    case "Left":
+      return "left";
+    case "Right":
+      return "right";
+    case "Bottom":
+    default:
+      return "bottom";
+  }
 }
-function dropShadowFromLevel(level) {
-  return `${dropShadowFromLayer(level.key)} ${dropShadowFromLayer(level.ambient)}`;
+function tooltipAlignKey(align) {
+  if (align === "Start") return "start";
+  if (align === "End") return "end";
+  return "center";
 }
-var tooltipPanelDropShadow = dropShadowFromLevel(import_tokens32.shadows.shadow8Light);
-function tooltipPanelStyle(position, align) {
+function tooltipFloatingStyle(position, align) {
   switch (position) {
     case "Top":
       if (align === "Start") return { bottom: "100%", left: 0, marginBottom: gap };
@@ -14387,55 +14572,44 @@ function tooltipPanelStyle(position, align) {
       return {};
   }
 }
-function tooltipArrowStyle(position, align, bg, b) {
-  const baseBox = { position: "absolute", display: "block", width: 0, height: 0 };
-  const outset = arrowOutset(b);
-  if (position === "Top") {
-    const tri2 = {
-      ...baseBox,
-      bottom: outset,
-      borderLeft: `${b}px solid transparent`,
-      borderRight: `${b}px solid transparent`,
-      borderTop: `${b}px solid ${bg}`
-    };
-    if (align === "Start") return { ...tri2, left: edgeInset, marginLeft: 0 };
-    if (align === "End") return { ...tri2, right: edgeInset, left: "auto", marginLeft: 0 };
-    return { ...tri2, left: "50%", marginLeft: -b };
-  }
-  if (position === "Bottom") {
-    const tri2 = {
-      ...baseBox,
-      top: outset,
-      borderLeft: `${b}px solid transparent`,
-      borderRight: `${b}px solid transparent`,
-      borderBottom: `${b}px solid ${bg}`
-    };
-    if (align === "Start") return { ...tri2, left: edgeInset, marginLeft: 0 };
-    if (align === "End") return { ...tri2, right: edgeInset, left: "auto", marginLeft: 0 };
-    return { ...tri2, left: "50%", marginLeft: -b };
+function tooltipBeakWrapperStyle(position, align) {
+  const overlapOffset = `calc(-1 * ${TOOLTIP_BEAK_OFFSET} + ${BEAK_BORDER_OVERLAP2})`;
+  const placement = tooltipPlacement(position);
+  const a = tooltipAlignKey(align);
+  switch (placement) {
+    case "bottom":
+      if (a === "center") return { top: overlapOffset, left: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
+      if (a === "start") return { top: overlapOffset, left: edgeInset };
+      return { top: overlapOffset, right: edgeInset };
+    case "top":
+      if (a === "center") return { bottom: overlapOffset, left: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
+      if (a === "start") return { bottom: overlapOffset, left: edgeInset };
+      return { bottom: overlapOffset, right: edgeInset };
+    case "left":
+      if (a === "center") return { right: overlapOffset, top: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
+      if (a === "start") return { right: overlapOffset, top: edgeInset };
+      return { right: overlapOffset, bottom: edgeInset };
+    case "right":
+      if (a === "center") return { left: overlapOffset, top: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
+      if (a === "start") return { left: overlapOffset, top: edgeInset };
+      return { left: overlapOffset, bottom: edgeInset };
+    default:
+      return {};
   }
-  if (position === "Left") {
-    const tri2 = {
-      ...baseBox,
-      right: outset,
-      borderTop: `${b}px solid transparent`,
-      borderBottom: `${b}px solid transparent`,
-      borderLeft: `${b}px solid ${bg}`
-    };
-    if (align === "Start") return { ...tri2, top: edgeInset, marginTop: 0 };
-    if (align === "End") return { ...tri2, bottom: edgeInset, top: "auto", marginTop: 0 };
-    return { ...tri2, top: "50%", marginTop: -b };
+}
+function tooltipBeakRotateDeg(position) {
+  switch (tooltipPlacement(position)) {
+    case "bottom":
+      return 0;
+    case "top":
+      return 180;
+    case "left":
+      return -90;
+    case "right":
+      return 90;
+    default:
+      return 0;
   }
-  const tri = {
-    ...baseBox,
-    left: outset,
-    borderTop: `${b}px solid transparent`,
-    borderBottom: `${b}px solid transparent`,
-    borderRight: `${b}px solid ${bg}`
-  };
-  if (align === "Start") return { ...tri, top: edgeInset, marginTop: 0 };
-  if (align === "End") return { ...tri, bottom: edgeInset, top: "auto", marginTop: 0 };
-  return { ...tri, top: "50%", marginTop: -b };
 }
 
 // src/components/Tooltip/Tooltip.tsx
@@ -14460,8 +14634,10 @@ function Tooltip({
     if (ctrlOpen === void 0) setInnerOpen(next);
     onOpenChange?.(next);
   };
-  const bg = (0, import_color12.resolveColorTokenValue)(componentColorTokens.tooltip.default.background);
-  const fg = (0, import_color12.resolveColorTokenValue)(componentColorTokens.tooltip.default.foreground);
+  const tipColor = componentColorTokens.tooltip.default;
+  const bg = (0, import_color13.resolveColorTokenValue)(tipColor.background);
+  const fg = (0, import_color13.resolveColorTokenValue)(tipColor.foreground);
+  const borderCol = (0, import_color13.resolveColorTokenValue)(tipColor.border);
   const clearTimer = () => {
     if (showTimer.current != null) {
       clearTimeout(showTimer.current);
@@ -14476,9 +14652,9 @@ function Tooltip({
     clearTimer();
     setOpen(false);
   };
-  const arrowHalf = Number.parseInt(import_tokens33.spacings.sizeXSmall, 10) || 6;
-  const panelPos = tooltipPanelStyle(position, align);
-  const arrow = tooltipArrowStyle(position, align, bg, arrowHalf);
+  const floatingStyle = tooltipFloatingStyle(position, align);
+  const beakWrapStyle = tooltipBeakWrapperStyle(position, align);
+  const beakRot = tooltipBeakRotateDeg(position);
   const describedBy = open ? tooltipId : void 0;
   const mergeEl = (0, import_react55.getMergeableTriggerChild)(trigger);
   let triggerNode;
@@ -14528,26 +14704,59 @@ function Tooltip({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { "data-refineui": "tooltip", className: (0, import_clsx105.clsx)(tooltipStyles.root, className), ...props, children: [
     triggerNode,
-    open && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
-      "div",
-      {
-        id: tooltipId,
-        role: "tooltip",
-        "data-position": position,
-        "data-align": align,
-        className: tooltipStyles.panel,
-        style: {
-          ...panelPos,
-          backgroundColor: bg,
-          color: fg,
-          filter: tooltipPanelDropShadow
-        },
-        children: [
-          content,
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { "aria-hidden": true, style: arrow })
-        ]
-      }
-    )
+    open && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: tooltipStyles.floating, style: floatingStyle, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: tooltipStyles.panelWrap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        "div",
+        {
+          className: tooltipStyles.beakWrap,
+          style: { ...beakWrapStyle, width: TOOLTIP_BEAK_W, height: TOOLTIP_BEAK_H },
+          "aria-hidden": true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+            "div",
+            {
+              style: {
+                width: TOOLTIP_BEAK_W,
+                height: TOOLTIP_BEAK_H,
+                transform: `rotate(${beakRot}deg)`,
+                transformOrigin: "center center"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+                "svg",
+                {
+                  width: TOOLTIP_BEAK_W,
+                  height: TOOLTIP_BEAK_H,
+                  viewBox: "0 0 16 8",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  style: { display: "block" },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("polygon", { points: "8,0 0,8 16,8", fill: borderCol }),
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("polygon", { points: "8,2 2,8 14,8", fill: bg })
+                  ]
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        "div",
+        {
+          id: tooltipId,
+          role: "tooltip",
+          "data-refineui": "tooltip-panel",
+          "data-position": position,
+          "data-align": align,
+          className: tooltipStyles.panel,
+          style: {
+            backgroundColor: bg,
+            color: fg,
+            borderColor: borderCol
+          },
+          children: content
+        }
+      )
+    ] }) })
   ] });
 }
 
@@ -14555,7 +14764,7 @@ function Tooltip({
 var import_clsx107 = require("clsx");
 var import_react56 = require("react");
 var import_tokens35 = require("@refineui/tokens");
-var import_color13 = require("@refineui/utilities/color");
+var import_color14 = require("@refineui/utilities/color");
 
 // src/components/Chart/style.ts
 var import_clsx106 = require("clsx");
@@ -14788,19 +14997,19 @@ function useChartContext(component) {
   return value;
 }
 function seriesColorToken(color) {
-  return (0, import_color13.resolveColorTokenValue)(componentColorTokens.chart.series[color]);
+  return (0, import_color14.resolveColorTokenValue)(componentColorTokens.chart.series[color]);
 }
 function seriesSubtleToken(color) {
-  return (0, import_color13.resolveColorTokenValue)(componentColorTokens.chart.seriesSubtle[color]);
+  return (0, import_color14.resolveColorTokenValue)(componentColorTokens.chart.seriesSubtle[color]);
 }
 function gridStroke() {
-  return (0, import_color13.resolveColorTokenValue)(componentColorTokens.chart.grid);
+  return (0, import_color14.resolveColorTokenValue)(componentColorTokens.chart.grid);
 }
 function gridBaselineStroke() {
-  return (0, import_color13.resolveColorTokenValue)(componentColorTokens.chart.gridBaseline);
+  return (0, import_color14.resolveColorTokenValue)(componentColorTokens.chart.gridBaseline);
 }
 function pointStrokeColor() {
-  return (0, import_color13.resolveColorTokenValue)(componentColorTokens.chart.pointStroke);
+  return (0, import_color14.resolveColorTokenValue)(componentColorTokens.chart.pointStroke);
 }
 function resolveScale(values, max, fallbackMax = 100) {
   if (max !== void 0 && max > 0) return max;
@@ -15514,6 +15723,7 @@ function ChartLegendItem({
   componentSizeFoundationKeys,
   componentSizes,
   componentTextClass,
+  componentTokens,
   componentTypographyTokens,
   defaultCommandFilter,
   dismissToast,