@refineui/react 0.0.10 → 0.0.11

package/dist/index.js

@@ -140,16 +140,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")
     },
@@ -9518,8 +9518,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: clsx75(componentTextClass(componentTypographyTokens.menu.item), "truncate"),
-  description: clsx75(componentTextClass(componentTypographyTokens.menu.description), "truncate"),
+  /** Preserve labels and supporting copy by wrapping within the shared panel width. */
+  title: clsx75(componentTextClass(componentTypographyTokens.menu.item), "break-words whitespace-normal"),
+  description: clsx75(
+    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",
@@ -9992,7 +9996,7 @@ function MenuSubContent({ className, children, style, ...props }) {
   const [side, setSide] = useState17("right");
   const gapPx = parseCssPx(spacings3.sizeXXXSmall, 2);
   const z = (Number.parseInt(String(zIndex2.zIndexMessages), 10) || 1e4) + 100;
-  const defaultW = parseCssPx(componentSizes2.menuPanelWidth, 244);
+  const defaultW = parseCssPx(componentSizes2.menuPanelWidth, 200);
   const setPanelEl = useCallback13(
     (el) => {
       panelRef.current = el;
@@ -10100,7 +10104,8 @@ import {
   useRef as useRef15,
   useState as useState18
 } from "react";
-import { iconSizes as iconSizes16, semanticInteraction as semanticInteraction6 } from "@refineui/tokens";
+import { createPortal as createPortal6 } from "react-dom";
+import { iconSizes as iconSizes16, semanticInteraction as semanticInteraction6, spacings as spacings4, zIndex as zIndex3 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber4 } from "@refineui/utilities/animation";
 
 // src/components/NavigationMenu/style.ts
@@ -10108,34 +10113,34 @@ import { clsx as clsx77 } from "clsx";
 var topLevelItem = clsx77(
   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 = clsx77(
   "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: clsx77(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: clsx77(
     /** 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: clsx77(
-    "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: clsx77(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: clsx77(
@@ -10143,7 +10148,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"
@@ -10195,6 +10200,7 @@ function NavigationMenu({
   const [value, setValue] = useControllableOpen(valueControlled, defaultValue, onValueChange);
   const listRef = useRef15(null);
   const triggerMapRef = useRef15(/* @__PURE__ */ new Map());
+  const contentMapRef = useRef15(/* @__PURE__ */ new Map());
   const openTimerRef = useRef15(null);
   const closeTimerRef = useRef15(null);
   const rootRef = useRef15(null);
@@ -10253,12 +10259,25 @@ function NavigationMenu({
       triggerMapRef.current.delete(itemValue);
     }
   }, []);
+  const registerContent = useCallback14((itemValue, el) => {
+    if (el) {
+      contentMapRef.current.set(itemValue, el);
+    } else {
+      contentMapRef.current.delete(itemValue);
+    }
+  }, []);
+  const isContentTarget = useCallback14((itemValue, target) => {
+    return target instanceof Node && contentMapRef.current.get(itemValue)?.contains(target) === true;
+  }, []);
+  const isMenuTarget = useCallback14((target) => {
+    if (!(target instanceof Node)) return false;
+    return rootRef.current?.contains(target) === true || Array.from(contentMapRef.current.values()).some((content) => content.contains(target));
+  }, []);
   useEffect13(() => () => clearTimers(), [clearTimers]);
   useEffect13(() => {
     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) => {
@@ -10274,7 +10293,7 @@ function NavigationMenu({
       document.removeEventListener("pointerdown", onPointerDown);
       document.removeEventListener("keydown", onKeyDown);
     };
-  }, [setValueSafe, value]);
+  }, [isMenuTarget, setValueSafe, value]);
   const ctx = useMemo14(
     () => ({
       value,
@@ -10285,9 +10304,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__ */ jsx59(NavigationMenuContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx59(
     "nav",
@@ -10376,6 +10409,7 @@ function NavigationMenuItem({
       onPointerLeave: (event) => {
         onPointerLeave?.(event);
         if (event.defaultPrevented) return;
+        if (menu.isContentTarget(value, event.relatedTarget)) return;
         menu.close();
       },
       ...props,
@@ -10464,12 +10498,22 @@ function NavigationMenuContent({
   children,
   className,
   onKeyDown,
+  style,
   ...props
 }) {
   const menu = useNavigationMenu("NavigationMenuContent");
   const item = useNavigationMenuItem("NavigationMenuContent");
   const [shouldRender, setShouldRender] = useState18(item.open);
   const [isClosing, setIsClosing] = useState18(false);
+  const contentRef = useRef15(null);
+  const [positionStyle, setPositionStyle] = useState18(null);
+  const setContentRef = useCallback14(
+    (el) => {
+      contentRef.current = el;
+      menu.registerContent(item.value, el);
+    },
+    [item.value, menu]
+  );
   useEffect13(() => {
     if (item.open) {
       setShouldRender(true);
@@ -10484,20 +10528,58 @@ function NavigationMenuContent({
     }, motionMsToNumber4(semanticInteraction6.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(spacings4.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(zIndex3.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 = useMemo14(
     () => ({ ...menu, isInsideContent: true }),
     [menu]
   );
   if (!shouldRender) return null;
-  return /* @__PURE__ */ jsx59(NavigationMenuContext.Provider, { value: contentCtx, children: /* @__PURE__ */ jsx59(
+  const content = /* @__PURE__ */ jsx59(NavigationMenuContext.Provider, { value: contentCtx, children: /* @__PURE__ */ jsx59(
     "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: clsx78(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;
@@ -10510,6 +10592,7 @@ function NavigationMenuContent({
       children: /* @__PURE__ */ jsx59("div", { "data-refineui": "navigation-menu-content-panel", className: navigationMenuStyles.contentPanel, children })
     }
   ) });
+  return typeof document === "undefined" ? content : createPortal6(content, document.body);
 }
 function NavigationMenuLink({
   children,
@@ -11243,7 +11326,7 @@ import {
   useRef as useRef17,
   useState as useState21
 } from "react";
-import { spacings as spacings4, strokeWidths as strokeWidths2 } from "@refineui/tokens";
+import { spacings as spacings5, strokeWidths as strokeWidths2 } from "@refineui/tokens";
 import { resolveColorTokenValue as resolveColorTokenValue10 } from "@refineui/utilities/color";
 import { Slot as Slot4, getMergeableTriggerChild as getMergeableTriggerChild3 } from "@refineui/utilities/react";
 
@@ -11290,11 +11373,11 @@ var BEAK_W = foundationSizes.foundationSize160;
 var BEAK_H = foundationSizes.foundationSize80;
 var BEAK_OFFSET = foundationSizes.foundationSize80;
 var BEAK_BORDER_OVERLAP = strokeWidths2.strokeWidthThin;
-var POPOVER_GAP = spacings4.sizeMedium;
+var POPOVER_GAP = spacings5.sizeMedium;
 function beakWrapperStyle(placement, align) {
   const insetStart = componentSizes2.popoverBeakInsetFromStartEdge;
   const insetEnd = componentSizes2.popoverBeakInsetFromEndEdge;
-  const edge = spacings4.sizeMedium;
+  const edge = spacings5.sizeMedium;
   const overlapOffset = `calc(-1 * ${BEAK_OFFSET} + ${BEAK_BORDER_OVERLAP})`;
   switch (placement) {
     case "bottom":
@@ -11523,7 +11606,7 @@ function PopoverContent({
             style: {
               ...styleProp && typeof styleProp === "object" ? styleProp : {},
               minWidth: componentSizes2.popoverPanelWidth,
-              padding: spacings4.sizeLarge,
+              padding: spacings5.sizeLarge,
               backgroundColor: bg,
               color: resolveColorTokenValue10(palette.foreground),
               borderColor: borderCol
@@ -13494,8 +13577,8 @@ import {
   useState as useState27,
   useSyncExternalStore
 } from "react";
-import { createPortal as createPortal6 } from "react-dom";
-import { iconSizes as iconSizes21, spacings as spacings5 } from "@refineui/tokens";
+import { createPortal as createPortal7 } from "react-dom";
+import { iconSizes as iconSizes21, spacings as spacings6 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber6 } from "@refineui/utilities/animation";
 import { resolveColorTokenValue as resolveColorTokenValue11 } from "@refineui/utilities/color";
 
@@ -13554,10 +13637,10 @@ function gapPxFromSpacingToken(token) {
 var TOAST_NARROW_STACK_MQ = "(max-width: 480px), (hover: none)";
 function readToastStackGapPx() {
   if (typeof globalThis.matchMedia === "undefined") {
-    return gapPxFromSpacingToken(String(spacings5.sizeLarge));
+    return gapPxFromSpacingToken(String(spacings6.sizeLarge));
   }
   const mq = globalThis.matchMedia(TOAST_NARROW_STACK_MQ);
-  return gapPxFromSpacingToken(mq.matches ? String(spacings5.sizeMedium) : String(spacings5.sizeLarge));
+  return gapPxFromSpacingToken(mq.matches ? String(spacings6.sizeMedium) : String(spacings6.sizeLarge));
 }
 function subscribeToastStackGap(onChange) {
   if (typeof globalThis.matchMedia === "undefined") return () => {
@@ -13570,7 +13653,7 @@ function useToastStackGapPx() {
   return useSyncExternalStore(
     subscribeToastStackGap,
     readToastStackGapPx,
-    () => gapPxFromSpacingToken(String(spacings5.sizeLarge))
+    () => gapPxFromSpacingToken(String(spacings6.sizeLarge))
   );
 }
 function readToastNaturalHeight(li) {
@@ -13986,7 +14069,7 @@ function Toaster({
   if (typeof document === "undefined" || !isPortalOwner) {
     return null;
   }
-  return createPortal6(
+  return createPortal7(
     /* @__PURE__ */ jsx72(
       "ol",
       {
@@ -14513,15 +14596,68 @@ import { useId as useId17, useRef as useRef23, useState as useState31 } from "re
 import { resolveColorTokenValue as resolveColorTokenValue12 } from "@refineui/utilities/color";
 import { Slot as Slot5, getMergeableTriggerChild as getMergeableTriggerChild4 } from "@refineui/utilities/react";
 
+// src/components/shared/FrostedBeak.tsx
+import { strokeWidths as strokeWidths3 } from "@refineui/tokens";
+import { jsx as jsx77, jsxs as jsxs31 } from "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__ */ jsxs31(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width,
+        height,
+        transform: `rotate(${rotateDeg}deg)`,
+        transformOrigin: "center center"
+      },
+      children: [
+        /* @__PURE__ */ jsx77(
+          "span",
+          {
+            "data-refineui": "floating-beak-surface",
+            style: surfaceStyle
+          }
+        ),
+        /* @__PURE__ */ jsx77(
+          "svg",
+          {
+            width,
+            height,
+            viewBox: "0 0 16 8",
+            fill: "none",
+            "aria-hidden": true,
+            style: { position: "absolute", inset: 0, overflow: "visible" },
+            children: /* @__PURE__ */ jsx77(
+              "path",
+              {
+                d: "M0 8L8 0L16 8",
+                stroke: borderColor,
+                strokeWidth: strokeWidths3.strokeWidthThin,
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/Tooltip/style.ts
-import { spacings as spacings6, strokeWidths as strokeWidths3 } from "@refineui/tokens";
+import { spacings as spacings7, strokeWidths as strokeWidths4 } from "@refineui/tokens";
 import { clsx as clsx104 } from "clsx";
 var TOOLTIP_BEAK_W = foundationSizes.foundationSize160;
 var TOOLTIP_BEAK_H = foundationSizes.foundationSize80;
 var TOOLTIP_BEAK_OFFSET = foundationSizes.foundationSize80;
-var BEAK_BORDER_OVERLAP2 = strokeWidths3.strokeWidthThin;
-var gap = spacings6.sizeXSmall;
-var edgeInset = spacings6.sizeMedium;
+var BEAK_BORDER_OVERLAP2 = strokeWidths4.strokeWidthThin;
+var gap = spacings7.sizeXSmall;
+var edgeInset = spacings7.sizeMedium;
 var tooltipStyles = {
   root: "relative inline-block",
   fallbackTrigger: "inline-flex outline-none",
@@ -14615,7 +14751,7 @@ function tooltipBeakRotateDeg(position) {
 }
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx77, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs32 } from "react/jsx-runtime";
 function Tooltip({
   trigger,
   content,
@@ -14661,7 +14797,7 @@ function Tooltip({
   const mergeEl = getMergeableTriggerChild4(trigger);
   let triggerNode;
   if (mergeEl != null) {
-    triggerNode = /* @__PURE__ */ jsx77(
+    triggerNode = /* @__PURE__ */ jsx78(
       Slot5,
       {
         "aria-describedby": describedBy,
@@ -14678,7 +14814,7 @@ function Tooltip({
       }
     );
   } else {
-    triggerNode = /* @__PURE__ */ jsx77(
+    triggerNode = /* @__PURE__ */ jsx78(
       "span",
       {
         tabIndex: 0,
@@ -14695,44 +14831,27 @@ function Tooltip({
       }
     );
   }
-  return /* @__PURE__ */ jsxs31("div", { "data-refineui": "tooltip", className: clsx105(tooltipStyles.root, className), ...props, children: [
+  return /* @__PURE__ */ jsxs32("div", { "data-refineui": "tooltip", className: clsx105(tooltipStyles.root, className), ...props, children: [
     triggerNode,
-    open && /* @__PURE__ */ jsx77("div", { className: tooltipStyles.floating, style: floatingStyle, children: /* @__PURE__ */ jsxs31("div", { className: tooltipStyles.panelWrap, children: [
-      /* @__PURE__ */ jsx77(
+    open && /* @__PURE__ */ jsx78("div", { className: tooltipStyles.floating, style: floatingStyle, children: /* @__PURE__ */ jsxs32("div", { className: tooltipStyles.panelWrap, children: [
+      /* @__PURE__ */ jsx78(
         "div",
         {
           className: tooltipStyles.beakWrap,
           style: { ...beakWrapStyle, width: TOOLTIP_BEAK_W, height: TOOLTIP_BEAK_H },
           "aria-hidden": true,
-          children: /* @__PURE__ */ jsx77(
-            "div",
+          children: /* @__PURE__ */ jsx78(
+            FrostedBeak,
             {
-              style: {
-                width: TOOLTIP_BEAK_W,
-                height: TOOLTIP_BEAK_H,
-                transform: `rotate(${beakRot}deg)`,
-                transformOrigin: "center center"
-              },
-              children: /* @__PURE__ */ jsxs31(
-                "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__ */ jsx77("polygon", { points: "8,0 0,8 16,8", fill: borderCol }),
-                    /* @__PURE__ */ jsx77("polygon", { points: "8,2 2,8 14,8", fill: bg })
-                  ]
-                }
-              )
+              width: TOOLTIP_BEAK_W,
+              height: TOOLTIP_BEAK_H,
+              rotateDeg: beakRot,
+              borderColor: borderCol
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx77(
+      /* @__PURE__ */ jsx78(
         "div",
         {
           id: tooltipId,
@@ -14810,12 +14929,12 @@ var chartStyles = {
 };
 
 // src/components/Chart/utils.ts
-import { borderRadii, foundationSizes as foundationSizes3, spacings as spacings7 } from "@refineui/tokens";
+import { borderRadii, foundationSizes as foundationSizes3, spacings as spacings8 } from "@refineui/tokens";
 var CHART_VIEWBOX_WIDTH = 800;
 var CHART_VIEWBOX_HEIGHT = 320;
-var CHART_PLOT_PADDING_TOP = parseFloat(spacings7.sizeMedium);
-var CHART_PLOT_PADDING_BOTTOM = parseFloat(spacings7.sizeXXSmall);
-var CHART_PLOT_PADDING_X = parseFloat(spacings7.sizeMedium);
+var CHART_PLOT_PADDING_TOP = parseFloat(spacings8.sizeMedium);
+var CHART_PLOT_PADDING_BOTTOM = parseFloat(spacings8.sizeXXSmall);
+var CHART_PLOT_PADDING_X = parseFloat(spacings8.sizeMedium);
 var CHART_BAR_RADIUS = parseFloat(borderRadii.roundedXLarge);
 var CHART_BAR_BAND_FILL = 0.5;
 var CHART_POINT_RADIUS = parseFloat(foundationSizes3.foundationSize40);
@@ -14991,7 +15110,7 @@ function formatAxisTick(value) {
 }
 
 // src/components/Chart/Chart.tsx
-import { Fragment as Fragment4, jsx as jsx78, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx79, jsxs as jsxs33 } from "react/jsx-runtime";
 var ChartContext = createContext27(null);
 function useChartContext(component) {
   const value = useContext31(ChartContext);
@@ -15047,7 +15166,7 @@ function Chart({ className, children, ...props }) {
     }),
     [hoverIndex, selectedIndex, pointer, labels, series]
   );
-  return /* @__PURE__ */ jsx78(ChartContext.Provider, { value: context, children: /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(ChartContext.Provider, { value: context, children: /* @__PURE__ */ jsx79(
     "div",
     {
       "data-refineui": "chart",
@@ -15058,7 +15177,7 @@ function Chart({ className, children, ...props }) {
   ) });
 }
 function ChartBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     "div",
     {
       "data-refineui": "chart-body",
@@ -15068,7 +15187,7 @@ function ChartBody({ className, ...props }) {
   );
 }
 function ChartContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     "div",
     {
       "data-refineui": "chart-content",
@@ -15093,7 +15212,7 @@ function ChartHitArea() {
     setHoverIndex(hoverIndexFromPlotX(next.x, count, series.align));
     return next;
   };
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     "rect",
     {
       "data-refineui": "chart-hit-area",
@@ -15131,7 +15250,7 @@ function ChartPlot({
     if (isChartTooltipElement(child)) tooltipNodes.push(child);
     else svgChildren.push(child);
   });
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       "data-refineui": "chart-plot-frame",
@@ -15140,7 +15259,7 @@ function ChartPlot({
       className: clsx107(chartStyles.plotFrame, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs32(
+        /* @__PURE__ */ jsxs33(
           "svg",
           {
             "data-refineui": "chart-plot",
@@ -15151,7 +15270,7 @@ function ChartPlot({
             className: chartStyles.plot,
             children: [
               svgChildren,
-              /* @__PURE__ */ jsx78(ChartHitArea, {})
+              /* @__PURE__ */ jsx79(ChartHitArea, {})
             ]
           }
         ),
@@ -15169,7 +15288,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__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     "div",
     {
       "data-refineui": "chart-tooltip",
@@ -15182,9 +15301,9 @@ function ChartTooltip({ className, children, style, ...props }) {
         ...style
       },
       ...props,
-      children: children ?? /* @__PURE__ */ jsxs32(Fragment4, { children: [
-        label ? /* @__PURE__ */ jsx78("span", { className: chartStyles.tooltipLabel, children: label }) : null,
-        /* @__PURE__ */ jsx78("span", { className: chartStyles.tooltipValue, children: formatAxisTick(value) })
+      children: children ?? /* @__PURE__ */ jsxs33(Fragment4, { children: [
+        label ? /* @__PURE__ */ jsx79("span", { className: chartStyles.tooltipLabel, children: label }) : null,
+        /* @__PURE__ */ jsx79("span", { className: chartStyles.tooltipValue, children: formatAxisTick(value) })
       ] })
     }
   );
@@ -15199,14 +15318,14 @@ function ChartYAxisLabels({
 }) {
   const scaleMax = resolveScale(values, max);
   const ticks = yAxisTicks(scaleMax, lines).slice().reverse();
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     "div",
     {
       "data-refineui": "chart-y-axis",
       className: clsx107(chartStyles.yAxis, className),
       "aria-hidden": true,
       ...props,
-      children: ticks.map((tick) => /* @__PURE__ */ jsx78(
+      children: ticks.map((tick) => /* @__PURE__ */ jsx79(
         "span",
         {
           className: chartStyles.yAxisTick,
@@ -15229,12 +15348,12 @@ function ChartGrid({
   const ticks = yAxisTicks(scaleMax, lines);
   const gridColor = gridStroke();
   const baselineColor = gridBaselineStroke();
-  return /* @__PURE__ */ jsx78("g", { "data-refineui": "chart-grid", className, ...props, children: ticks.map((tick, index) => {
+  return /* @__PURE__ */ jsx79("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__ */ jsx78(
+    return /* @__PURE__ */ jsx79(
       "line",
       {
         x1: CHART_PLOT_PADDING_X,
@@ -15269,10 +15388,10 @@ function ChartBars({
   useLayoutEffect13(() => {
     setSeries({ values, seriesColor, max, align: "bar" });
   }, [values, seriesColor, max, setSeries]);
-  return /* @__PURE__ */ jsxs32("g", { "data-refineui": "chart-bars", "data-series-color": seriesColor, className, ...props, children: [
+  return /* @__PURE__ */ jsxs33("g", { "data-refineui": "chart-bars", "data-series-color": seriesColor, className, ...props, children: [
     showTrack ? values.map((_, index) => {
       const x = barX(index, values.length);
-      return /* @__PURE__ */ jsx78(
+      return /* @__PURE__ */ jsx79(
         "path",
         {
           "data-refineui": "chart-bar-track",
@@ -15294,7 +15413,7 @@ function ChartBars({
       const height = baselineY - y;
       if (height <= 0) return null;
       const state = itemState(index, hoverIndex, selectedIndex);
-      return /* @__PURE__ */ jsx78(
+      return /* @__PURE__ */ jsx79(
         "path",
         {
           "data-refineui": "chart-bar",
@@ -15327,10 +15446,10 @@ function ChartLine({
   useLayoutEffect13(() => {
     setSeries({ values, seriesColor, max, align: "line" });
   }, [values, seriesColor, max, setSeries]);
-  return /* @__PURE__ */ jsxs32("g", { "data-refineui": "chart-line", "data-series-color": seriesColor, className, ...props, children: [
-    showArea && coords.length > 1 ? /* @__PURE__ */ jsxs32(Fragment4, { children: [
-      /* @__PURE__ */ jsx78("defs", { children: /* @__PURE__ */ jsxs32("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsxs33("g", { "data-refineui": "chart-line", "data-series-color": seriesColor, className, ...props, children: [
+    showArea && coords.length > 1 ? /* @__PURE__ */ jsxs33(Fragment4, { children: [
+      /* @__PURE__ */ jsx79("defs", { children: /* @__PURE__ */ jsxs33("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx79(
           "stop",
           {
             offset: "0%",
@@ -15338,9 +15457,9 @@ function ChartLine({
             stopOpacity: opacities.opacityDisabled
           }
         ),
-        /* @__PURE__ */ jsx78("stop", { offset: "100%", stopColor: stroke, stopOpacity: "0" })
+        /* @__PURE__ */ jsx79("stop", { offset: "100%", stopColor: stroke, stopOpacity: "0" })
       ] }) }),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79(
         "path",
         {
           "data-refineui": "chart-line-area",
@@ -15349,7 +15468,7 @@ function ChartLine({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsx78(
+    /* @__PURE__ */ jsx79(
       "path",
       {
         "data-refineui": "chart-line-stroke",
@@ -15367,7 +15486,7 @@ function ChartLine({
       const state = itemState(index, hoverIndex, selectedIndex);
       const visible = showPoints || state !== "default";
       if (!visible) return null;
-      return /* @__PURE__ */ jsx78(
+      return /* @__PURE__ */ jsx79(
         "circle",
         {
           "data-refineui": "chart-point",
@@ -15396,7 +15515,7 @@ function ChartAxisLabels({
   useLayoutEffect13(() => {
     setLabels(labels);
   }, [labels, setLabels]);
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     "div",
     {
       "data-refineui": "chart-axis-labels",
@@ -15405,7 +15524,7 @@ function ChartAxisLabels({
       ...props,
       children: labels.map((label, index) => {
         const state = itemState(index, hoverIndex, selectedIndex);
-        return /* @__PURE__ */ jsx78(
+        return /* @__PURE__ */ jsx79(
           "span",
           {
             "data-state": state,
@@ -15423,7 +15542,7 @@ function ChartAxisLabels({
   );
 }
 function ChartLegend({ className, ...props }) {
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     "ul",
     {
       "data-refineui": "chart-legend",
@@ -15439,7 +15558,7 @@ function ChartLegendItem({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "li",
     {
       "data-refineui": "chart-legend-item",
@@ -15447,7 +15566,7 @@ function ChartLegendItem({
       className: clsx107(chartStyles.legendItem, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx78(
+        /* @__PURE__ */ jsx79(
           "span",
           {
             "aria-hidden": true,
@@ -15507,7 +15626,7 @@ var collapsibleStyles = {
 };
 
 // src/components/Collapsible/Collapsible.tsx
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var Collapsible = forwardRef17(function Collapsible2({ open: openProp, defaultOpen = false, onOpenChange, asChild = false, className, children, ...props }, ref) {
   const [uncontrolled, setUncontrolled] = useState34(defaultOpen);
   const open = openProp ?? uncontrolled;
@@ -15535,7 +15654,7 @@ var Collapsible = forwardRef17(function Collapsible2({ open: openProp, defaultOp
     "data-refineui": "collapsible",
     className
   };
-  return /* @__PURE__ */ jsx79(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ jsx79(Slot7, { ...shared, children }) : /* @__PURE__ */ jsx79("div", { ...shared, children }) });
+  return /* @__PURE__ */ jsx80(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ jsx80(Slot7, { ...shared, children }) : /* @__PURE__ */ jsx80("div", { ...shared, children }) });
 });
 var CollapsibleTrigger = forwardRef17(
   function CollapsibleTrigger2({
@@ -15564,8 +15683,8 @@ var CollapsibleTrigger = forwardRef17(
         if (!event.defaultPrevented) toggle();
       }
     };
-    if (asChild) return /* @__PURE__ */ jsx79(Slot7, { ...shared, children });
-    return /* @__PURE__ */ jsx79(
+    if (asChild) return /* @__PURE__ */ jsx80(Slot7, { ...shared, children });
+    return /* @__PURE__ */ jsx80(
       Button,
       {
         ...shared,
@@ -15594,7 +15713,7 @@ var CollapsibleContent = forwardRef17(
       pointerEvents: open ? void 0 : "none",
       ...style
     };
-    return /* @__PURE__ */ jsx79(
+    return /* @__PURE__ */ jsx80(
       "div",
       {
         ...props,
@@ -15606,7 +15725,7 @@ var CollapsibleContent = forwardRef17(
         "data-state": open ? "open" : "closed",
         "data-refineui": "collapsible-content",
         style: gridStyle,
-        children: /* @__PURE__ */ jsx79("div", { className: collapsibleStyles.panelOuter, children: /* @__PURE__ */ jsx79("div", { className: clsx108(className), style: innerMotionStyle, children }) })
+        children: /* @__PURE__ */ jsx80("div", { className: collapsibleStyles.panelOuter, children: /* @__PURE__ */ jsx80("div", { className: clsx108(className), style: innerMotionStyle, children }) })
       }
     );
   }
@@ -15624,12 +15743,12 @@ import {
   useRef as useRef24,
   useState as useState35
 } from "react";
-import { createPortal as createPortal7 } from "react-dom";
+import { createPortal as createPortal8 } from "react-dom";
 import { clsx as clsx109 } from "clsx";
 import { componentSizes as componentSizes3, iconSizes as iconSizes23, semanticInteraction as semanticInteraction10 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber7 } from "@refineui/utilities/animation";
 import { Slot as Slot8 } from "@refineui/utilities/react";
-import { Fragment as Fragment5, jsx as jsx80, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx81, jsxs as jsxs34 } from "react/jsx-runtime";
 var MENU_ATTR = "data-refineui-context-menu";
 var CLOSE_MS = motionMsToNumber7(semanticInteraction10.duration.normal);
 var MenuContext2 = createContext29(null);
@@ -15672,7 +15791,7 @@ function ContextMenu({ modal = true, onOpenChange, children }) {
     if (!wasOpen) onOpenChangeRef.current?.(true);
   }, []);
   const value = useMemo25(() => ({ open, point, openAt, close }), [open, point, openAt, close]);
-  return /* @__PURE__ */ jsx80(MenuContext2.Provider, { value, children });
+  return /* @__PURE__ */ jsx81(MenuContext2.Provider, { value, children });
 }
 var ContextMenuTrigger = forwardRef18(function ContextMenuTrigger2({ asChild = false, onContextMenu, children, ...props }, ref) {
   const { openAt } = useMenu();
@@ -15687,11 +15806,11 @@ var ContextMenuTrigger = forwardRef18(function ContextMenuTrigger2({ asChild = f
       openAt(event.clientX, event.clientY);
     }
   };
-  if (asChild) return /* @__PURE__ */ jsx80(Slot8, { ...shared, children });
-  return /* @__PURE__ */ jsx80("span", { ...shared, className: clsx109(menuStyles.triggerFallback, props.className), children });
+  if (asChild) return /* @__PURE__ */ jsx81(Slot8, { ...shared, children });
+  return /* @__PURE__ */ jsx81("span", { ...shared, className: clsx109(menuStyles.triggerFallback, props.className), children });
 });
 function ContextMenuPortal({ children }) {
-  return /* @__PURE__ */ jsx80(Fragment5, { children });
+  return /* @__PURE__ */ jsx81(Fragment5, { children });
 }
 var ContextMenuContent = forwardRef18(function ContextMenuContent2({ className, style, onPointerDown, children, ...props }, ref) {
   const { open, point, close } = useMenu();
@@ -15734,8 +15853,8 @@ var ContextMenuContent = forwardRef18(function ContextMenuContent2({ className,
     };
   }, [open, close]);
   if (!shouldRender || typeof document === "undefined") return null;
-  return createPortal7(
-    /* @__PURE__ */ jsx80(
+  return createPortal8(
+    /* @__PURE__ */ jsx81(
       "div",
       {
         ...props,
@@ -15762,7 +15881,7 @@ var ContextMenuContent = forwardRef18(function ContextMenuContent2({ className,
           onPointerDown?.(event);
         },
         onContextMenu: (event) => event.preventDefault(),
-        children: /* @__PURE__ */ jsx80("div", { role: "menu", "data-refineui": "menu", className: clsx109(menuStyles.list, className), children })
+        children: /* @__PURE__ */ jsx81("div", { role: "menu", "data-refineui": "menu", className: clsx109(menuStyles.list, className), children })
       }
     ),
     document.body
@@ -15783,7 +15902,7 @@ var ContextMenuItem = forwardRef18(function ContextMenuItem2({ disabled = false,
   const { close } = useMenu();
   const isDisabled = disabled || state === "disabled";
   const slotted = startIcon != null || description != null || shortcut != null || endIcon != null;
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx81(
     "button",
     {
       ref,
@@ -15809,8 +15928,8 @@ var ContextMenuItem = forwardRef18(function ContextMenuItem2({ disabled = false,
           runSelect(onSelect, close, isDisabled);
         }
       },
-      children: slotted ? /* @__PURE__ */ jsxs33("span", { className: menuStyles.row, children: [
-        startIcon ? /* @__PURE__ */ jsx80(
+      children: slotted ? /* @__PURE__ */ jsxs34("span", { className: menuStyles.row, children: [
+        startIcon ? /* @__PURE__ */ jsx81(
           "span",
           {
             className: menuStyles.iconWrap,
@@ -15818,13 +15937,13 @@ var ContextMenuItem = forwardRef18(function ContextMenuItem2({ disabled = false,
             children: startIcon
           }
         ) : null,
-        /* @__PURE__ */ jsxs33("span", { className: menuStyles.textCol, children: [
-          /* @__PURE__ */ jsx80("span", { className: menuStyles.title, children }),
-          description ? /* @__PURE__ */ jsx80("span", { className: clsx109(menuStyles.description, isDisabled ? menuStyles.descriptionDisabled : menuStyles.descriptionEnabled), children: description }) : null
+        /* @__PURE__ */ jsxs34("span", { className: menuStyles.textCol, children: [
+          /* @__PURE__ */ jsx81("span", { className: menuStyles.title, children }),
+          description ? /* @__PURE__ */ jsx81("span", { className: clsx109(menuStyles.description, isDisabled ? menuStyles.descriptionDisabled : menuStyles.descriptionEnabled), children: description }) : null
         ] }),
-        (shortcut || endIcon) && /* @__PURE__ */ jsxs33("span", { className: menuStyles.rightWrap, children: [
-          shortcut ? /* @__PURE__ */ jsx80("span", { className: menuStyles.shortcut, children: shortcut }) : null,
-          endIcon ? /* @__PURE__ */ jsx80(
+        (shortcut || endIcon) && /* @__PURE__ */ jsxs34("span", { className: menuStyles.rightWrap, children: [
+          shortcut ? /* @__PURE__ */ jsx81("span", { className: menuStyles.shortcut, children: shortcut }) : null,
+          endIcon ? /* @__PURE__ */ jsx81(
             "span",
             {
               className: menuStyles.iconWrap,
@@ -15833,13 +15952,13 @@ var ContextMenuItem = forwardRef18(function ContextMenuItem2({ disabled = false,
             }
           ) : null
         ] })
-      ] }) : /* @__PURE__ */ jsx80("span", { className: menuStyles.row, children })
+      ] }) : /* @__PURE__ */ jsx81("span", { className: menuStyles.row, children })
     }
   );
 });
 var ContextMenuSeparator = forwardRef18(
   function ContextMenuSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx80(
+    return /* @__PURE__ */ jsx81(
       "div",
       {
         ref,
@@ -15849,13 +15968,13 @@ var ContextMenuSeparator = forwardRef18(
         ...{ [MENU_ATTR]: "" },
         className: clsx109(menuStyles.dividerWrap, className),
         ...props,
-        children: /* @__PURE__ */ jsx80("div", { className: menuStyles.dividerLine })
+        children: /* @__PURE__ */ jsx81("div", { className: menuStyles.dividerLine })
       }
     );
   }
 );
 function ContextMenuLabel({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx80("div", { "data-refineui": "menu-label", className: clsx109(menuStyles.section, className), ...props, children: /* @__PURE__ */ jsx80("span", { className: menuStyles.sectionText, children }) });
+  return /* @__PURE__ */ jsx81("div", { "data-refineui": "menu-label", className: clsx109(menuStyles.section, className), ...props, children: /* @__PURE__ */ jsx81("span", { className: menuStyles.sectionText, children }) });
 }
 function ContextMenuSub({ children }) {
   const [open, setOpen] = useState35(false);
@@ -15881,7 +16000,7 @@ function ContextMenuSub({ children }) {
     }),
     [open]
   );
-  return /* @__PURE__ */ jsx80(SubContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx81(SubContext.Provider, { value, children });
 }
 function useSub2() {
   const value = useContext33(SubContext);
@@ -15924,9 +16043,9 @@ var ContextMenuSubTrigger = forwardRef18(
         if (!event.defaultPrevented) sub.show();
       }
     };
-    if (asChild) return /* @__PURE__ */ jsx80(Slot8, { ...shared, children });
-    return /* @__PURE__ */ jsx80("button", { ...shared, children: /* @__PURE__ */ jsxs33("span", { className: menuStyles.row, children: [
-      startIcon ? /* @__PURE__ */ jsx80(
+    if (asChild) return /* @__PURE__ */ jsx81(Slot8, { ...shared, children });
+    return /* @__PURE__ */ jsx81("button", { ...shared, children: /* @__PURE__ */ jsxs34("span", { className: menuStyles.row, children: [
+      startIcon ? /* @__PURE__ */ jsx81(
         "span",
         {
           className: menuStyles.iconWrap,
@@ -15934,16 +16053,16 @@ var ContextMenuSubTrigger = forwardRef18(
           children: startIcon
         }
       ) : null,
-      /* @__PURE__ */ jsxs33("span", { className: menuStyles.textCol, children: [
-        /* @__PURE__ */ jsx80("span", { className: menuStyles.title, children }),
-        description ? /* @__PURE__ */ jsx80("span", { className: clsx109(menuStyles.description, menuStyles.descriptionEnabled), children: description }) : null
+      /* @__PURE__ */ jsxs34("span", { className: menuStyles.textCol, children: [
+        /* @__PURE__ */ jsx81("span", { className: menuStyles.title, children }),
+        description ? /* @__PURE__ */ jsx81("span", { className: clsx109(menuStyles.description, menuStyles.descriptionEnabled), children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx80("span", { className: menuStyles.rightWrap, children: /* @__PURE__ */ jsx80(
+      /* @__PURE__ */ jsx81("span", { className: menuStyles.rightWrap, children: /* @__PURE__ */ jsx81(
         "span",
         {
           className: menuStyles.iconWrap,
           style: { width: iconSizes23.small, minWidth: iconSizes23.small, height: iconSizes23.small },
-          children: /* @__PURE__ */ jsx80(WebIcon, { name: "chevron-right", size: iconSizes23.small, color: "currentColor", "aria-hidden": true })
+          children: /* @__PURE__ */ jsx81(WebIcon, { name: "chevron-right", size: iconSizes23.small, color: "currentColor", "aria-hidden": true })
         }
       ) })
     ] }) });
@@ -15971,8 +16090,8 @@ var ContextMenuSubContent = forwardRef18(
       placeInView(element, left, rect.top);
     }, [sub.open, sub.triggerRef]);
     if (!sub.open || typeof document === "undefined") return null;
-    return createPortal7(
-      /* @__PURE__ */ jsx80(
+    return createPortal8(
+      /* @__PURE__ */ jsx81(
         "div",
         {
           ...props,