@refineui/react 0.0.10 → 0.0.12

package/dist/index.cjs

@@ -209,7 +209,7 @@ __export(index_exports, {
   ResizableHandle: () => ResizableHandle,
   ResizablePanel: () => ResizablePanel,
   ResizablePanelGroup: () => ResizablePanelGroup,
-  SEMANTIC_TEXT: () => import_tokens38.SEMANTIC_TEXT,
+  SEMANTIC_TEXT: () => import_tokens39.SEMANTIC_TEXT,
   ScrollArea: () => ScrollArea,
   ScrollAreaScrollbar: () => ScrollAreaScrollbar,
   ScrollAreaThumb: () => ScrollAreaThumb,
@@ -456,16 +456,16 @@ var componentColorTokens = {
   },
   tooltip: {
     default: {
-      /** Menu / Select floating panel semantic */
-      background: semanticToken("backgroundPrimary"),
+      /** Frosted floating panel — blur is applied by refineui.css */
+      background: semanticToken("surfaceFrosted"),
       foreground: semanticToken("foregroundPrimary"),
       border: semanticToken("borderDefault")
     }
   },
   popover: {
     default: {
-      /** Menu / Select floating panel semantic */
-      background: semanticToken("backgroundPrimary"),
+      /** Frosted floating panel — blur is applied by refineui.css */
+      background: semanticToken("surfaceFrosted"),
       foreground: semanticToken("foregroundPrimary"),
       border: semanticToken("borderDefault")
     },
@@ -654,7 +654,7 @@ var componentColorTokens = {
   },
   chip: {
     default: {
-      background: semanticToken("backgroundSurface"),
+      background: semanticToken("backgroundSurfaceSelected"),
       foreground: semanticToken("foregroundBrand"),
       hoverBackground: semanticToken("backgroundPrimaryHover"),
       activeBackground: semanticToken("backgroundPrimaryActive"),
@@ -684,7 +684,7 @@ var componentColorTokens = {
   },
   tag: {
     default: {
-      background: semanticToken("backgroundSurface"),
+      background: semanticToken("backgroundSurfaceSelected"),
       foreground: semanticToken("foregroundBrand")
     },
     outline: {
@@ -982,6 +982,7 @@ var componentColorTokens = {
     },
     /** Cell fill only — Global tint per MCP `Color`. Glyph/initials ink: `avatar.icon`. */
     shell: {
+      border: semanticToken("borderSubtle"),
       background: {
         neutral: paletteToken("neutral300"),
         blue: paletteToken("blue100"),
@@ -1386,7 +1387,7 @@ function buildSemanticTextClassMap(map) {
 }
 
 // src/index.ts
-var import_tokens38 = require("@refineui/tokens");
+var import_tokens39 = require("@refineui/tokens");
 
 // src/componentSizes.ts
 var import_tokens3 = require("@refineui/tokens");
@@ -2317,7 +2318,7 @@ var import_clsx11 = require("clsx");
 var import_clsx10 = require("clsx");
 var badgeVariantClass = {
   default: "bg-refineui-alias-background-brand text-refineui-alias-foreground-inversed",
-  neutral: "bg-refineui-alias-background-primary text-refineui-alias-foreground-primary",
+  neutral: "bg-refineui-alias-background-brand-subtle text-refineui-alias-foreground-brand-strong",
   outline: "border-refineui-thin border-refineui-alias-border-default border bg-transparent text-refineui-alias-foreground-primary box-border",
   success: "bg-refineui-alias-background-success text-refineui-alias-foreground-inversed",
   warning: "bg-refineui-alias-background-warning text-refineui-alias-foreground-inversed",
@@ -4126,13 +4127,13 @@ var import_clsx30 = require("clsx");
 // src/recipes/chip.recipe.ts
 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",
+  default: "border-none bg-refineui-alias-background-surface-selected text-refineui-alias-foreground-brand",
+  outline: "border border-refineui-thin border-refineui-alias-border-default box-border bg-transparent text-refineui-alias-foreground-brand",
   filled: "border-none bg-refineui-alias-background-brand text-refineui-alias-foreground-inversed"
 };
 var chipDisabledVariantClass = {
   default: "border-none bg-refineui-alias-background-surface-disabled text-refineui-alias-foreground-disabled",
-  outline: "border-refineui-thin border-refineui-alias-border-disabled box-border bg-transparent text-refineui-alias-foreground-disabled",
+  outline: "border border-refineui-thin border-refineui-alias-border-disabled box-border bg-transparent text-refineui-alias-foreground-disabled",
   filled: "border-none bg-refineui-alias-background-surface-disabled text-refineui-alias-foreground-disabled"
 };
 var chipSizeClass = {
@@ -5245,15 +5246,18 @@ var avatarShellInitialsForegroundColor = {
   yellow: (0, import_color4.resolveColorTokenValue)(componentColorTokens.avatar.icon.yellow)
 };
 var avatarNeutralForegroundColor = (0, import_color4.resolveColorTokenValue)(componentColorTokens.avatar.icon.neutral);
+var avatarShellBorderColor = (0, import_color4.resolveColorTokenValue)(componentColorTokens.avatar.shell.border);
 function resolveAvatarShellStyle(color, layout) {
   if (layout === "initials") {
     return {
       backgroundColor: avatarShellBackgroundColor[color],
-      color: avatarShellInitialsForegroundColor[color]
+      color: avatarShellInitialsForegroundColor[color],
+      borderColor: avatarShellInitialsForegroundColor[color]
     };
   }
   return {
-    backgroundColor: avatarShellBackgroundColor[color]
+    backgroundColor: avatarShellBackgroundColor[color],
+    borderColor: avatarShellBorderColor
   };
 }
 function resolveAvatarShellColorLayer(_color, size, layout) {
@@ -5498,6 +5502,7 @@ function Avatar({
             className: (0, import_clsx36.clsx)(
               AVATAR_INNER_MASK,
               resolveAvatarShellColorLayer(effectiveColor, normalizedSize, resolvedLayout),
+              "box-border border border-refineui-thin",
               useNeutralShellTypo && avatarTypoNeutral[normalizedSize],
               innerClassName
             ),
@@ -9707,8 +9712,12 @@ var menuStyles = {
   row: "flex items-center gap-refineui-size-x-small",
   iconWrap: "inline-flex shrink-0 items-center justify-center text-current [&>span]:leading-none",
   textCol: "flex min-w-0 flex-1 flex-col gap-refineui-size-xxx-small px-refineui-size-xxx-small",
-  title: (0, import_clsx75.clsx)(componentTextClass(componentTypographyTokens.menu.item), "truncate"),
-  description: (0, import_clsx75.clsx)(componentTextClass(componentTypographyTokens.menu.description), "truncate"),
+  /** Preserve labels and supporting copy by wrapping within the shared panel width. */
+  title: (0, import_clsx75.clsx)(componentTextClass(componentTypographyTokens.menu.item), "break-words whitespace-normal"),
+  description: (0, import_clsx75.clsx)(
+    componentTextClass(componentTypographyTokens.menu.description),
+    "break-words whitespace-normal"
+  ),
   descriptionEnabled: "text-refineui-alias-foreground-tertiary",
   descriptionDisabled: "text-refineui-alias-foreground-disabled",
   rightWrap: "flex shrink-0 items-center gap-refineui-size-x-small",
@@ -10181,7 +10190,7 @@ function MenuSubContent({ className, children, style, ...props }) {
   const [side, setSide] = (0, import_react36.useState)("right");
   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 defaultW = parseCssPx(import_tokens3.componentSizes.menuPanelWidth, 200);
   const setPanelEl = (0, import_react36.useCallback)(
     (el) => {
       panelRef.current = el;
@@ -10279,6 +10288,7 @@ function MenuSubContent({ className, children, style, ...props }) {
 // src/components/NavigationMenu/NavigationMenu.tsx
 var import_clsx78 = require("clsx");
 var import_react38 = require("react");
+var import_react_dom6 = require("react-dom");
 var import_tokens23 = require("@refineui/tokens");
 var import_animation5 = require("@refineui/utilities/animation");
 
@@ -10287,34 +10297,34 @@ var import_clsx77 = require("clsx");
 var topLevelItem = (0, import_clsx77.clsx)(
   componentTextClass(componentTypographyTokens.navigationMenu.trigger),
   "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",
+  "rounded-refineui-x-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)]"
+  "transition-[color,background-color,box-shadow] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
 );
 var chevron = (0, import_clsx77.clsx)(
   "shrink-0 transition-transform duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
 );
 var navigationMenuStyles = {
   root: "relative isolate z-refineui-messages flex w-full max-w-max items-center",
-  list: "relative m-0 flex list-none flex-wrap items-center gap-refineui-size-xx-small p-0",
+  list: "relative m-0 flex list-none flex-wrap items-center gap-refineui-size-xxx-small p-0",
   item: "relative inline-flex items-center",
   trigger: (0, import_clsx77.clsx)(topLevelItem, "m-0 appearance-none font-inherit"),
-  triggerOpen: "text-refineui-alias-foreground-primary",
+  triggerOpen: "bg-refineui-alias-background-primary-hover text-refineui-alias-foreground-primary",
   triggerDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   chevron,
   chevronOpen: "rotate-180",
   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",
-    "box-border min-w-refineui-menu-panel-width",
+    "box-border min-w-refineui-navigation-menu-panel-width",
     "outline-none"
   ),
   contentPanel: (0, import_clsx77.clsx)(
-    "box-border overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default",
-    "bg-refineui-alias-background-primary p-refineui-size-xx-small shadow-refineui-2"
+    "box-border flex flex-col gap-px overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default",
+    "p-refineui-size-xx-small shadow-refineui-2"
   ),
   link: (0, import_clsx77.clsx)(topLevelItem, "no-underline"),
-  linkActive: "text-refineui-alias-foreground-primary",
+  linkActive: "bg-refineui-alias-background-primary-hover text-refineui-alias-foreground-primary",
   linkDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   /** Dense row inside a content panel — same density as Menu item. */
   linkInContent: (0, import_clsx77.clsx)(
@@ -10322,7 +10332,7 @@ var navigationMenuStyles = {
     "box-border flex w-full cursor-pointer items-center gap-refineui-size-x-small",
     "rounded-refineui-large border-none bg-transparent p-refineui-size-x-small text-start no-underline outline-none",
     "text-refineui-alias-foreground-primary",
-    "transition-[background-color,color] duration-[var(--refineui-motion-duration-fast)]"
+    "transition-[background-color,color] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
   ),
   /** Optional — prefer omitting; kept for API compatibility. */
   indicator: "hidden"
@@ -10374,6 +10384,7 @@ function NavigationMenu({
   const [value, setValue] = useControllableOpen(valueControlled, defaultValue, onValueChange);
   const listRef = (0, import_react38.useRef)(null);
   const triggerMapRef = (0, import_react38.useRef)(/* @__PURE__ */ new Map());
+  const contentMapRef = (0, import_react38.useRef)(/* @__PURE__ */ new Map());
   const openTimerRef = (0, import_react38.useRef)(null);
   const closeTimerRef = (0, import_react38.useRef)(null);
   const rootRef = (0, import_react38.useRef)(null);
@@ -10432,12 +10443,25 @@ function NavigationMenu({
       triggerMapRef.current.delete(itemValue);
     }
   }, []);
+  const registerContent = (0, import_react38.useCallback)((itemValue, el) => {
+    if (el) {
+      contentMapRef.current.set(itemValue, el);
+    } else {
+      contentMapRef.current.delete(itemValue);
+    }
+  }, []);
+  const isContentTarget = (0, import_react38.useCallback)((itemValue, target) => {
+    return target instanceof Node && contentMapRef.current.get(itemValue)?.contains(target) === true;
+  }, []);
+  const isMenuTarget = (0, import_react38.useCallback)((target) => {
+    if (!(target instanceof Node)) return false;
+    return rootRef.current?.contains(target) === true || Array.from(contentMapRef.current.values()).some((content) => content.contains(target));
+  }, []);
   (0, import_react38.useEffect)(() => () => clearTimers(), [clearTimers]);
   (0, import_react38.useEffect)(() => {
     if (!value) return;
     const onPointerDown = (event) => {
-      const target = event.target;
-      if (rootRef.current?.contains(target)) return;
+      if (isMenuTarget(event.target)) return;
       setValueSafe("");
     };
     const onKeyDown = (event) => {
@@ -10453,7 +10477,7 @@ function NavigationMenu({
       document.removeEventListener("pointerdown", onPointerDown);
       document.removeEventListener("keydown", onKeyDown);
     };
-  }, [setValueSafe, value]);
+  }, [isMenuTarget, setValueSafe, value]);
   const ctx = (0, import_react38.useMemo)(
     () => ({
       value,
@@ -10464,9 +10488,23 @@ function NavigationMenu({
       skipDelayDuration,
       listRef,
       registerTrigger,
+      registerContent,
+      isContentTarget,
+      isMenuTarget,
       isInsideContent: false
     }),
-    [close, delayDuration, openItem, registerTrigger, setValueSafe, skipDelayDuration, value]
+    [
+      close,
+      delayDuration,
+      isContentTarget,
+      isMenuTarget,
+      openItem,
+      registerContent,
+      registerTrigger,
+      setValueSafe,
+      skipDelayDuration,
+      value
+    ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(NavigationMenuContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "nav",
@@ -10555,6 +10593,7 @@ function NavigationMenuItem({
       onPointerLeave: (event) => {
         onPointerLeave?.(event);
         if (event.defaultPrevented) return;
+        if (menu.isContentTarget(value, event.relatedTarget)) return;
         menu.close();
       },
       ...props,
@@ -10643,12 +10682,22 @@ function NavigationMenuContent({
   children,
   className,
   onKeyDown,
+  style,
   ...props
 }) {
   const menu = useNavigationMenu("NavigationMenuContent");
   const item = useNavigationMenuItem("NavigationMenuContent");
   const [shouldRender, setShouldRender] = (0, import_react38.useState)(item.open);
   const [isClosing, setIsClosing] = (0, import_react38.useState)(false);
+  const contentRef = (0, import_react38.useRef)(null);
+  const [positionStyle, setPositionStyle] = (0, import_react38.useState)(null);
+  const setContentRef = (0, import_react38.useCallback)(
+    (el) => {
+      contentRef.current = el;
+      menu.registerContent(item.value, el);
+    },
+    [item.value, menu]
+  );
   (0, import_react38.useEffect)(() => {
     if (item.open) {
       setShouldRender(true);
@@ -10663,20 +10712,58 @@ function NavigationMenuContent({
     }, (0, import_animation5.motionMsToNumber)(import_tokens23.semanticInteraction.duration.fast));
     return () => window.clearTimeout(timeout);
   }, [item.open, shouldRender]);
+  useIsomorphicLayoutEffect5(() => {
+    if (!shouldRender || !item.open || typeof document === "undefined") return;
+    const trigger = document.getElementById(item.triggerId);
+    if (!trigger) return;
+    const updatePosition = () => {
+      const content2 = contentRef.current;
+      if (!content2) return;
+      const triggerRect = trigger.getBoundingClientRect();
+      const contentWidth = content2.offsetWidth;
+      const edge = Number.parseFloat(import_tokens23.spacings.sizeMedium) || 8;
+      const left = Math.max(
+        edge,
+        Math.min(triggerRect.left, window.innerWidth - contentWidth - edge)
+      );
+      setPositionStyle({
+        position: "fixed",
+        top: triggerRect.bottom,
+        left,
+        zIndex: Number.parseInt(String(import_tokens23.zIndex.zIndexMessages), 10) || 1e4
+      });
+    };
+    updatePosition();
+    const frame = requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    const unsubscribe = subscribeScrollAndScrollableAncestors2(trigger, updatePosition);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", updatePosition);
+      unsubscribe();
+    };
+  }, [item.open, item.triggerId, shouldRender]);
   const contentCtx = (0, import_react38.useMemo)(
     () => ({ ...menu, isInsideContent: true }),
     [menu]
   );
   if (!shouldRender) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(NavigationMenuContext.Provider, { value: contentCtx, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(NavigationMenuContext.Provider, { value: contentCtx, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
+      ref: setContentRef,
       id: item.contentId,
       role: "region",
       "aria-labelledby": item.triggerId,
       "data-refineui": "navigation-menu-content",
       "data-state": isClosing || !item.open ? "closed" : "open",
       className: (0, import_clsx78.clsx)(navigationMenuStyles.content, className),
+      style: { ...positionStyle, ...style },
+      onPointerEnter: () => menu.openItem(item.value, { immediate: true }),
+      onPointerLeave: (event) => {
+        if (menu.isMenuTarget(event.relatedTarget)) return;
+        menu.close();
+      },
       onKeyDown: (event) => {
         onKeyDown?.(event);
         if (event.defaultPrevented) return;
@@ -10689,6 +10776,7 @@ function NavigationMenuContent({
       children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { "data-refineui": "navigation-menu-content-panel", className: navigationMenuStyles.contentPanel, children })
     }
   ) });
+  return typeof document === "undefined" ? content : (0, import_react_dom6.createPortal)(content, document.body);
 }
 function NavigationMenuLink({
   children,
@@ -13606,7 +13694,7 @@ function SpinButton({
 // src/components/Toast/Toast.tsx
 var import_clsx98 = require("clsx");
 var import_react50 = require("react");
-var import_react_dom6 = require("react-dom");
+var import_react_dom7 = require("react-dom");
 var import_tokens30 = require("@refineui/tokens");
 var import_animation7 = require("@refineui/utilities/animation");
 var import_color12 = require("@refineui/utilities/color");
@@ -14098,7 +14186,7 @@ function Toaster({
   if (typeof document === "undefined" || !isPortalOwner) {
     return null;
   }
-  return (0, import_react_dom6.createPortal)(
+  return (0, import_react_dom7.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       "ol",
       {
@@ -14617,15 +14705,68 @@ var import_react56 = require("react");
 var import_color13 = require("@refineui/utilities/color");
 var import_react57 = require("@refineui/utilities/react");
 
-// src/components/Tooltip/style.ts
+// src/components/shared/FrostedBeak.tsx
 var import_tokens33 = require("@refineui/tokens");
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var triangleClipPath = "polygon(50% 0, 0 100%, 100% 100%)";
+function FrostedBeak({ width, height, rotateDeg, borderColor }) {
+  const surfaceStyle = {
+    position: "absolute",
+    inset: 0,
+    clipPath: triangleClipPath
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width,
+        height,
+        transform: `rotate(${rotateDeg}deg)`,
+        transformOrigin: "center center"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          "span",
+          {
+            "data-refineui": "floating-beak-surface",
+            style: surfaceStyle
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          "svg",
+          {
+            width,
+            height,
+            viewBox: "0 0 16 8",
+            fill: "none",
+            "aria-hidden": true,
+            style: { position: "absolute", inset: 0, overflow: "visible" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+              "path",
+              {
+                d: "M0 8L8 0L16 8",
+                stroke: borderColor,
+                strokeWidth: import_tokens33.strokeWidths.strokeWidthThin,
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Tooltip/style.ts
+var import_tokens34 = 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 BEAK_BORDER_OVERLAP2 = import_tokens34.strokeWidths.strokeWidthThin;
+var gap = import_tokens34.spacings.sizeXSmall;
+var edgeInset = import_tokens34.spacings.sizeMedium;
 var tooltipStyles = {
   root: "relative inline-block",
   fallbackTrigger: "inline-flex outline-none",
@@ -14719,7 +14860,7 @@ function tooltipBeakRotateDeg(position) {
 }
 
 // src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 function Tooltip({
   trigger,
   content,
@@ -14765,7 +14906,7 @@ function Tooltip({
   const mergeEl = (0, import_react57.getMergeableTriggerChild)(trigger);
   let triggerNode;
   if (mergeEl != null) {
-    triggerNode = /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    triggerNode = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       import_react57.Slot,
       {
         "aria-describedby": describedBy,
@@ -14782,7 +14923,7 @@ function Tooltip({
       }
     );
   } else {
-    triggerNode = /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    triggerNode = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       "span",
       {
         tabIndex: 0,
@@ -14799,44 +14940,27 @@ function Tooltip({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { "data-refineui": "tooltip", className: (0, import_clsx105.clsx)(tooltipStyles.root, className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { "data-refineui": "tooltip", className: (0, import_clsx105.clsx)(tooltipStyles.root, className), ...props, children: [
     triggerNode,
-    open && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: tooltipStyles.floating, style: floatingStyle, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: tooltipStyles.panelWrap, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: tooltipStyles.floating, style: floatingStyle, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: tooltipStyles.panelWrap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         "div",
         {
           className: tooltipStyles.beakWrap,
           style: { ...beakWrapStyle, width: TOOLTIP_BEAK_W, height: TOOLTIP_BEAK_H },
           "aria-hidden": true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-            "div",
+          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            FrostedBeak,
             {
-              style: {
-                width: TOOLTIP_BEAK_W,
-                height: TOOLTIP_BEAK_H,
-                transform: `rotate(${beakRot}deg)`,
-                transformOrigin: "center center"
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime77.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_runtime77.jsx)("polygon", { points: "8,0 0,8 16,8", fill: borderCol }),
-                    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("polygon", { points: "8,2 2,8 14,8", fill: bg })
-                  ]
-                }
-              )
+              width: TOOLTIP_BEAK_W,
+              height: TOOLTIP_BEAK_H,
+              rotateDeg: beakRot,
+              borderColor: borderCol
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         "div",
         {
           id: tooltipId,
@@ -14860,7 +14984,7 @@ function Tooltip({
 // src/components/Chart/Chart.tsx
 var import_clsx107 = require("clsx");
 var import_react58 = require("react");
-var import_tokens35 = require("@refineui/tokens");
+var import_tokens36 = require("@refineui/tokens");
 var import_color14 = require("@refineui/utilities/color");
 
 // src/components/Chart/style.ts
@@ -14905,16 +15029,16 @@ var chartStyles = {
 };
 
 // src/components/Chart/utils.ts
-var import_tokens34 = require("@refineui/tokens");
+var import_tokens35 = require("@refineui/tokens");
 var CHART_VIEWBOX_WIDTH = 800;
 var CHART_VIEWBOX_HEIGHT = 320;
-var CHART_PLOT_PADDING_TOP = parseFloat(import_tokens34.spacings.sizeMedium);
-var CHART_PLOT_PADDING_BOTTOM = parseFloat(import_tokens34.spacings.sizeXXSmall);
-var CHART_PLOT_PADDING_X = parseFloat(import_tokens34.spacings.sizeMedium);
-var CHART_BAR_RADIUS = parseFloat(import_tokens34.borderRadii.roundedXLarge);
+var CHART_PLOT_PADDING_TOP = parseFloat(import_tokens35.spacings.sizeMedium);
+var CHART_PLOT_PADDING_BOTTOM = parseFloat(import_tokens35.spacings.sizeXXSmall);
+var CHART_PLOT_PADDING_X = parseFloat(import_tokens35.spacings.sizeMedium);
+var CHART_BAR_RADIUS = parseFloat(import_tokens35.borderRadii.roundedXLarge);
 var CHART_BAR_BAND_FILL = 0.5;
-var CHART_POINT_RADIUS = parseFloat(import_tokens34.foundationSizes.foundationSize40);
-var CHART_POINT_STROKE = parseFloat(import_tokens34.foundationSizes.foundationSize20);
+var CHART_POINT_RADIUS = parseFloat(import_tokens35.foundationSizes.foundationSize40);
+var CHART_POINT_STROKE = parseFloat(import_tokens35.foundationSizes.foundationSize20);
 var CHART_TOOLTIP_FLIP_X = 0.75;
 var CHART_TOOLTIP_FLIP_Y = 0.25;
 function clampValue(n) {
@@ -15086,7 +15210,7 @@ function formatAxisTick(value) {
 }
 
 // src/components/Chart/Chart.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var ChartContext = (0, import_react58.createContext)(null);
 function useChartContext(component) {
   const value = (0, import_react58.useContext)(ChartContext);
@@ -15142,7 +15266,7 @@ function Chart({ className, children, ...props }) {
     }),
     [hoverIndex, selectedIndex, pointer, labels, series]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ChartContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ChartContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "div",
     {
       "data-refineui": "chart",
@@ -15153,7 +15277,7 @@ function Chart({ className, children, ...props }) {
   ) });
 }
 function ChartBody({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "div",
     {
       "data-refineui": "chart-body",
@@ -15163,7 +15287,7 @@ function ChartBody({ className, ...props }) {
   );
 }
 function ChartContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "div",
     {
       "data-refineui": "chart-content",
@@ -15188,7 +15312,7 @@ function ChartHitArea() {
     setHoverIndex(hoverIndexFromPlotX(next.x, count, series.align));
     return next;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "rect",
     {
       "data-refineui": "chart-hit-area",
@@ -15226,7 +15350,7 @@ function ChartPlot({
     if (isChartTooltipElement(child)) tooltipNodes.push(child);
     else svgChildren.push(child);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
     "div",
     {
       "data-refineui": "chart-plot-frame",
@@ -15235,7 +15359,7 @@ function ChartPlot({
       className: (0, import_clsx107.clsx)(chartStyles.plotFrame, className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
           "svg",
           {
             "data-refineui": "chart-plot",
@@ -15246,7 +15370,7 @@ function ChartPlot({
             className: chartStyles.plot,
             children: [
               svgChildren,
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ChartHitArea, {})
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ChartHitArea, {})
             ]
           }
         ),
@@ -15264,7 +15388,7 @@ function ChartTooltip({ className, children, style, ...props }) {
   const flipY = pointer.y < CHART_PLOT_PADDING_TOP + plotHeight() * CHART_TOOLTIP_FLIP_Y;
   const offsetX = flipX ? "calc(-100% - var(--refineui-spacing-size-small))" : "var(--refineui-spacing-size-small)";
   const offsetY = flipY ? "var(--refineui-spacing-size-small)" : "calc(-100% - var(--refineui-spacing-size-x-small))";
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "div",
     {
       "data-refineui": "chart-tooltip",
@@ -15277,9 +15401,9 @@ function ChartTooltip({ className, children, style, ...props }) {
         ...style
       },
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: chartStyles.tooltipLabel, children: label }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: chartStyles.tooltipValue, children: formatAxisTick(value) })
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: chartStyles.tooltipLabel, children: label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: chartStyles.tooltipValue, children: formatAxisTick(value) })
       ] })
     }
   );
@@ -15294,14 +15418,14 @@ function ChartYAxisLabels({
 }) {
   const scaleMax = resolveScale(values, max);
   const ticks = yAxisTicks(scaleMax, lines).slice().reverse();
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "div",
     {
       "data-refineui": "chart-y-axis",
       className: (0, import_clsx107.clsx)(chartStyles.yAxis, className),
       "aria-hidden": true,
       ...props,
-      children: ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      children: ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "span",
         {
           className: chartStyles.yAxisTick,
@@ -15324,12 +15448,12 @@ function ChartGrid({
   const ticks = yAxisTicks(scaleMax, lines);
   const gridColor = gridStroke();
   const baselineColor = gridBaselineStroke();
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("g", { "data-refineui": "chart-grid", className, ...props, children: ticks.map((tick, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("g", { "data-refineui": "chart-grid", className, ...props, children: ticks.map((tick, index) => {
     const y = gridLineY(scaleMax, tick);
     const isBaseline = index === 0;
     const isTop = index === ticks.length - 1;
     if (isTop) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       "line",
       {
         x1: CHART_PLOT_PADDING_X,
@@ -15338,7 +15462,7 @@ function ChartGrid({
         y2: y,
         stroke: isBaseline ? baselineColor : gridColor,
         strokeWidth: "var(--refineui-stroke-width-thin)",
-        strokeOpacity: isBaseline ? import_tokens35.opacities.opacityFull : import_tokens35.opacities.opacityDisabled,
+        strokeOpacity: isBaseline ? import_tokens36.opacities.opacityFull : import_tokens36.opacities.opacityDisabled,
         vectorEffect: "non-scaling-stroke"
       },
       tick
@@ -15364,10 +15488,10 @@ function ChartBars({
   (0, import_react58.useLayoutEffect)(() => {
     setSeries({ values, seriesColor, max, align: "bar" });
   }, [values, seriesColor, max, setSeries]);
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("g", { "data-refineui": "chart-bars", "data-series-color": seriesColor, className, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("g", { "data-refineui": "chart-bars", "data-series-color": seriesColor, className, ...props, children: [
     showTrack ? values.map((_, index) => {
       const x = barX(index, values.length);
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "path",
         {
           "data-refineui": "chart-bar-track",
@@ -15389,7 +15513,7 @@ function ChartBars({
       const height = baselineY - y;
       if (height <= 0) return null;
       const state = itemState(index, hoverIndex, selectedIndex);
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "path",
         {
           "data-refineui": "chart-bar",
@@ -15422,20 +15546,20 @@ function ChartLine({
   (0, import_react58.useLayoutEffect)(() => {
     setSeries({ values, seriesColor, max, align: "line" });
   }, [values, seriesColor, max, setSeries]);
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("g", { "data-refineui": "chart-line", "data-series-color": seriesColor, className, ...props, children: [
-    showArea && coords.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("g", { "data-refineui": "chart-line", "data-series-color": seriesColor, className, ...props, children: [
+    showArea && coords.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
           "stop",
           {
             offset: "0%",
             stopColor: stroke,
-            stopOpacity: import_tokens35.opacities.opacityDisabled
+            stopOpacity: import_tokens36.opacities.opacityDisabled
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("stop", { offset: "100%", stopColor: stroke, stopOpacity: "0" })
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("stop", { offset: "100%", stopColor: stroke, stopOpacity: "0" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "path",
         {
           "data-refineui": "chart-line-area",
@@ -15444,7 +15568,7 @@ function ChartLine({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       "path",
       {
         "data-refineui": "chart-line-stroke",
@@ -15462,7 +15586,7 @@ function ChartLine({
       const state = itemState(index, hoverIndex, selectedIndex);
       const visible = showPoints || state !== "default";
       if (!visible) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "circle",
         {
           "data-refineui": "chart-point",
@@ -15491,7 +15615,7 @@ function ChartAxisLabels({
   (0, import_react58.useLayoutEffect)(() => {
     setLabels(labels);
   }, [labels, setLabels]);
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "div",
     {
       "data-refineui": "chart-axis-labels",
@@ -15500,7 +15624,7 @@ function ChartAxisLabels({
       ...props,
       children: labels.map((label, index) => {
         const state = itemState(index, hoverIndex, selectedIndex);
-        return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
           "span",
           {
             "data-state": state,
@@ -15518,7 +15642,7 @@ function ChartAxisLabels({
   );
 }
 function ChartLegend({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "ul",
     {
       "data-refineui": "chart-legend",
@@ -15534,7 +15658,7 @@ function ChartLegendItem({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
     "li",
     {
       "data-refineui": "chart-legend-item",
@@ -15542,7 +15666,7 @@ function ChartLegendItem({
       className: (0, import_clsx107.clsx)(chartStyles.legendItem, className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -15566,7 +15690,7 @@ var import_react62 = require("@refineui/utilities/react");
 
 // src/components/Collapsible/context.ts
 var import_react60 = require("react");
-var import_tokens36 = require("@refineui/tokens");
+var import_tokens37 = require("@refineui/tokens");
 var import_animation9 = require("@refineui/utilities/animation");
 var CollapsibleContext = (0, import_react60.createContext)(null);
 function useCollapsibleContext(part) {
@@ -15585,10 +15709,10 @@ function usePrefersReducedMotion3() {
   }, []);
   return reduce;
 }
-var PANEL_HEIGHT_MS2 = Number.parseFloat(import_tokens36.semanticInteraction.duration.panel) / 1e3;
-var PANEL_CONTENT_MS2 = Number.parseFloat(import_tokens36.semanticInteraction.duration.normal) / 1e3;
-var PANEL_HEIGHT_EASE2 = import_tokens36.semanticInteraction.easing.panel;
-var PANEL_CONTENT_EASE2 = import_tokens36.semanticInteraction.easing.content;
+var PANEL_HEIGHT_MS2 = Number.parseFloat(import_tokens37.semanticInteraction.duration.panel) / 1e3;
+var PANEL_CONTENT_MS2 = Number.parseFloat(import_tokens37.semanticInteraction.duration.normal) / 1e3;
+var PANEL_HEIGHT_EASE2 = import_tokens37.semanticInteraction.easing.panel;
+var PANEL_CONTENT_EASE2 = import_tokens37.semanticInteraction.easing.content;
 
 // src/components/Collapsible/style.ts
 var collapsibleStyles = {
@@ -15596,7 +15720,7 @@ var collapsibleStyles = {
 };
 
 // src/components/Collapsible/Collapsible.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var Collapsible = (0, import_react61.forwardRef)(function Collapsible2({ open: openProp, defaultOpen = false, onOpenChange, asChild = false, className, children, ...props }, ref) {
   const [uncontrolled, setUncontrolled] = (0, import_react61.useState)(defaultOpen);
   const open = openProp ?? uncontrolled;
@@ -15624,7 +15748,7 @@ var Collapsible = (0, import_react61.forwardRef)(function Collapsible2({ open: o
     "data-refineui": "collapsible",
     className
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react62.Slot, { ...shared, children }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...shared, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react62.Slot, { ...shared, children }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...shared, children }) });
 });
 var CollapsibleTrigger = (0, import_react61.forwardRef)(
   function CollapsibleTrigger2({
@@ -15653,8 +15777,8 @@ var CollapsibleTrigger = (0, import_react61.forwardRef)(
         if (!event.defaultPrevented) toggle();
       }
     };
-    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react62.Slot, { ...shared, children });
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react62.Slot, { ...shared, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       Button,
       {
         ...shared,
@@ -15683,7 +15807,7 @@ var CollapsibleContent = (0, import_react61.forwardRef)(
       pointerEvents: open ? void 0 : "none",
       ...style
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       "div",
       {
         ...props,
@@ -15695,7 +15819,7 @@ var CollapsibleContent = (0, import_react61.forwardRef)(
         "data-state": open ? "open" : "closed",
         "data-refineui": "collapsible-content",
         style: gridStyle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: collapsibleStyles.panelOuter, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_clsx108.clsx)(className), style: innerMotionStyle, children }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: collapsibleStyles.panelOuter, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: (0, import_clsx108.clsx)(className), style: innerMotionStyle, children }) })
       }
     );
   }
@@ -15703,14 +15827,14 @@ var CollapsibleContent = (0, import_react61.forwardRef)(
 
 // src/components/ContextMenu/ContextMenu.tsx
 var import_react63 = require("react");
-var import_react_dom7 = require("react-dom");
+var import_react_dom8 = require("react-dom");
 var import_clsx109 = require("clsx");
-var import_tokens37 = require("@refineui/tokens");
+var import_tokens38 = require("@refineui/tokens");
 var import_animation10 = require("@refineui/utilities/animation");
 var import_react64 = require("@refineui/utilities/react");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var MENU_ATTR = "data-refineui-context-menu";
-var CLOSE_MS = (0, import_animation10.motionMsToNumber)(import_tokens37.semanticInteraction.duration.normal);
+var CLOSE_MS = (0, import_animation10.motionMsToNumber)(import_tokens38.semanticInteraction.duration.normal);
 var MenuContext2 = (0, import_react63.createContext)(null);
 var SubContext = (0, import_react63.createContext)(null);
 function useMenu() {
@@ -15751,7 +15875,7 @@ function ContextMenu({ modal = true, onOpenChange, children }) {
     if (!wasOpen) onOpenChangeRef.current?.(true);
   }, []);
   const value = (0, import_react63.useMemo)(() => ({ open, point, openAt, close }), [open, point, openAt, close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(MenuContext2.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(MenuContext2.Provider, { value, children });
 }
 var ContextMenuTrigger = (0, import_react63.forwardRef)(function ContextMenuTrigger2({ asChild = false, onContextMenu, children, ...props }, ref) {
   const { openAt } = useMenu();
@@ -15766,11 +15890,11 @@ var ContextMenuTrigger = (0, import_react63.forwardRef)(function ContextMenuTrig
       openAt(event.clientX, event.clientY);
     }
   };
-  if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react64.Slot, { ...shared, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { ...shared, className: (0, import_clsx109.clsx)(menuStyles.triggerFallback, props.className), children });
+  if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react64.Slot, { ...shared, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { ...shared, className: (0, import_clsx109.clsx)(menuStyles.triggerFallback, props.className), children });
 });
 function ContextMenuPortal({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_jsx_runtime81.Fragment, { children });
 }
 var ContextMenuContent = (0, import_react63.forwardRef)(function ContextMenuContent2({ className, style, onPointerDown, children, ...props }, ref) {
   const { open, point, close } = useMenu();
@@ -15813,8 +15937,8 @@ var ContextMenuContent = (0, import_react63.forwardRef)(function ContextMenuCont
     };
   }, [open, close]);
   if (!shouldRender || typeof document === "undefined") return null;
-  return (0, import_react_dom7.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return (0, import_react_dom8.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       "div",
       {
         ...props,
@@ -15831,8 +15955,8 @@ var ContextMenuContent = (0, import_react63.forwardRef)(function ContextMenuCont
           position: "fixed",
           top: point.y,
           left: point.x,
-          width: import_tokens37.componentSizes.menuPanelWidth,
-          minWidth: import_tokens37.componentSizes.menuPanelWidth,
+          width: import_tokens38.componentSizes.menuPanelWidth,
+          minWidth: import_tokens38.componentSizes.menuPanelWidth,
           zIndex: 9999,
           ...style
         },
@@ -15841,7 +15965,7 @@ var ContextMenuContent = (0, import_react63.forwardRef)(function ContextMenuCont
           onPointerDown?.(event);
         },
         onContextMenu: (event) => event.preventDefault(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { role: "menu", "data-refineui": "menu", className: (0, import_clsx109.clsx)(menuStyles.list, className), children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { role: "menu", "data-refineui": "menu", className: (0, import_clsx109.clsx)(menuStyles.list, className), children })
       }
     ),
     document.body
@@ -15862,7 +15986,7 @@ var ContextMenuItem = (0, import_react63.forwardRef)(function ContextMenuItem2({
   const { close } = useMenu();
   const isDisabled = disabled || state === "disabled";
   const slotted = startIcon != null || description != null || shortcut != null || endIcon != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "button",
     {
       ref,
@@ -15888,37 +16012,37 @@ var ContextMenuItem = (0, import_react63.forwardRef)(function ContextMenuItem2({
           runSelect(onSelect, close, isDisabled);
         }
       },
-      children: slotted ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: menuStyles.row, children: [
-        startIcon ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      children: slotted ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: menuStyles.row, children: [
+        startIcon ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           "span",
           {
             className: menuStyles.iconWrap,
-            style: { width: import_tokens37.iconSizes.small, minWidth: import_tokens37.iconSizes.small, height: import_tokens37.iconSizes.small },
+            style: { width: import_tokens38.iconSizes.small, minWidth: import_tokens38.iconSizes.small, height: import_tokens38.iconSizes.small },
             children: startIcon
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: menuStyles.textCol, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: menuStyles.title, children }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: (0, import_clsx109.clsx)(menuStyles.description, isDisabled ? menuStyles.descriptionDisabled : menuStyles.descriptionEnabled), children: description }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: menuStyles.textCol, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: menuStyles.title, children }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: (0, import_clsx109.clsx)(menuStyles.description, isDisabled ? menuStyles.descriptionDisabled : menuStyles.descriptionEnabled), children: description }) : null
         ] }),
-        (shortcut || endIcon) && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: menuStyles.rightWrap, children: [
-          shortcut ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: menuStyles.shortcut, children: shortcut }) : null,
-          endIcon ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        (shortcut || endIcon) && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: menuStyles.rightWrap, children: [
+          shortcut ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: menuStyles.shortcut, children: shortcut }) : null,
+          endIcon ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             "span",
             {
               className: menuStyles.iconWrap,
-              style: { width: import_tokens37.iconSizes.small, minWidth: import_tokens37.iconSizes.small, height: import_tokens37.iconSizes.small },
+              style: { width: import_tokens38.iconSizes.small, minWidth: import_tokens38.iconSizes.small, height: import_tokens38.iconSizes.small },
               children: endIcon
             }
           ) : null
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: menuStyles.row, children })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: menuStyles.row, children })
     }
   );
 });
 var ContextMenuSeparator = (0, import_react63.forwardRef)(
   function ContextMenuSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       "div",
       {
         ref,
@@ -15928,13 +16052,13 @@ var ContextMenuSeparator = (0, import_react63.forwardRef)(
         ...{ [MENU_ATTR]: "" },
         className: (0, import_clsx109.clsx)(menuStyles.dividerWrap, className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: menuStyles.dividerLine })
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: menuStyles.dividerLine })
       }
     );
   }
 );
 function ContextMenuLabel({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { "data-refineui": "menu-label", className: (0, import_clsx109.clsx)(menuStyles.section, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: menuStyles.sectionText, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { "data-refineui": "menu-label", className: (0, import_clsx109.clsx)(menuStyles.section, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: menuStyles.sectionText, children }) });
 }
 function ContextMenuSub({ children }) {
   const [open, setOpen] = (0, import_react63.useState)(false);
@@ -15960,7 +16084,7 @@ function ContextMenuSub({ children }) {
     }),
     [open]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SubContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SubContext.Provider, { value, children });
 }
 function useSub2() {
   const value = (0, import_react63.useContext)(SubContext);
@@ -16003,26 +16127,26 @@ var ContextMenuSubTrigger = (0, import_react63.forwardRef)(
         if (!event.defaultPrevented) sub.show();
       }
     };
-    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react64.Slot, { ...shared, children });
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("button", { ...shared, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: menuStyles.row, children: [
-      startIcon ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react64.Slot, { ...shared, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("button", { ...shared, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: menuStyles.row, children: [
+      startIcon ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "span",
         {
           className: menuStyles.iconWrap,
-          style: { width: import_tokens37.iconSizes.small, minWidth: import_tokens37.iconSizes.small, height: import_tokens37.iconSizes.small },
+          style: { width: import_tokens38.iconSizes.small, minWidth: import_tokens38.iconSizes.small, height: import_tokens38.iconSizes.small },
           children: startIcon
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: menuStyles.textCol, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: menuStyles.title, children }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: (0, import_clsx109.clsx)(menuStyles.description, menuStyles.descriptionEnabled), children: description }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: menuStyles.textCol, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: menuStyles.title, children }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: (0, import_clsx109.clsx)(menuStyles.description, menuStyles.descriptionEnabled), children: description }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: menuStyles.rightWrap, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: menuStyles.rightWrap, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "span",
         {
           className: menuStyles.iconWrap,
-          style: { width: import_tokens37.iconSizes.small, minWidth: import_tokens37.iconSizes.small, height: import_tokens37.iconSizes.small },
-          children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(WebIcon, { name: "chevron-right", size: import_tokens37.iconSizes.small, color: "currentColor", "aria-hidden": true })
+          style: { width: import_tokens38.iconSizes.small, minWidth: import_tokens38.iconSizes.small, height: import_tokens38.iconSizes.small },
+          children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WebIcon, { name: "chevron-right", size: import_tokens38.iconSizes.small, color: "currentColor", "aria-hidden": true })
         }
       ) })
     ] }) });
@@ -16050,8 +16174,8 @@ var ContextMenuSubContent = (0, import_react63.forwardRef)(
       placeInView(element, left, rect.top);
     }, [sub.open, sub.triggerRef]);
     if (!sub.open || typeof document === "undefined") return null;
-    return (0, import_react_dom7.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    return (0, import_react_dom8.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "div",
         {
           ...props,