@refineui/react 0.1.1 → 0.1.2

package/dist/index.js

@@ -11324,25 +11324,222 @@ import {
   createContext as createContext21,
   useCallback as useCallback17,
   useContext as useContext23,
-  useEffect as useEffect15,
+  useEffect as useEffect16,
   useId as useId14,
   useMemo as useMemo17,
   useRef as useRef17,
-  useState as useState21
+  useState as useState22
 } from "react";
-import { spacings as spacings5, strokeWidths as strokeWidths2 } from "@refineui/tokens";
+import { borderRadii, spacings as spacings6 } from "@refineui/tokens";
 import { resolveColorTokenValue as resolveColorTokenValue10 } from "@refineui/utilities/color";
 import { Slot as Slot4, getMergeableTriggerChild as getMergeableTriggerChild3 } from "@refineui/utilities/react";
 
+// src/components/shared/FloatingSurface.tsx
+import { useEffect as useEffect15, useLayoutEffect as useLayoutEffect9, useState as useState21 } from "react";
+import { spacings as spacings5, strokeWidths as strokeWidths2 } from "@refineui/tokens";
+
+// src/components/shared/floatingOutline.ts
+var PATH_PRECISION = 100;
+function fmt(n) {
+  return String(Math.round(n * PATH_PRECISION) / PATH_PRECISION);
+}
+function pt(p) {
+  return `${fmt(p.x)} ${fmt(p.y)}`;
+}
+function towards(from, to, distance) {
+  const length = Math.hypot(to.x - from.x, to.y - from.y);
+  if (length === 0) return from;
+  const t = distance / length;
+  return { x: from.x + (to.x - from.x) * t, y: from.y + (to.y - from.y) * t };
+}
+function floatingShapeSize(panelWidth, panelHeight, side, beakHeight) {
+  const vertical = side === "top" || side === "bottom";
+  return {
+    width: vertical ? panelWidth : panelWidth + beakHeight,
+    height: vertical ? panelHeight + beakHeight : panelHeight
+  };
+}
+function resolveBeakCenter(edgeLength, align, beakWidth, radius2, insetStart, insetEnd) {
+  const half = beakWidth / 2;
+  const min = radius2 + half;
+  const max = edgeLength - radius2 - half;
+  if (max < min) return edgeLength / 2;
+  const wanted = align === "center" ? edgeLength / 2 : align === "start" ? insetStart + half : edgeLength - insetEnd - half;
+  return Math.min(max, Math.max(min, wanted));
+}
+function buildFloatingOutline({
+  panelWidth,
+  panelHeight,
+  radius: radius2,
+  side,
+  beakCenter,
+  beakWidth,
+  beakHeight,
+  tipRadius,
+  inset = 0
+}) {
+  const offsetX = side === "left" ? beakHeight : 0;
+  const offsetY = side === "top" ? beakHeight : 0;
+  const x0 = offsetX + inset;
+  const y0 = offsetY + inset;
+  const x1 = offsetX + panelWidth - inset;
+  const y1 = offsetY + panelHeight - inset;
+  const r = Math.max(0, Math.min(radius2 - inset, (x1 - x0) / 2, (y1 - y0) / 2));
+  const half = beakWidth / 2;
+  const sinHalfAngle = half / Math.hypot(half, beakHeight);
+  const reach = beakHeight + inset - inset / sinHalfAngle;
+  const spread = half * reach / beakHeight;
+  const edgeCenter = (side === "top" || side === "bottom" ? offsetX : offsetY) + beakCenter;
+  const beak = (first, tip, second) => {
+    const before = towards(tip, first, tipRadius);
+    const after = towards(tip, second, tipRadius);
+    return ` L ${pt(first)} L ${pt(before)} Q ${pt(tip)} ${pt(after)} L ${pt(second)}`;
+  };
+  let d = `M ${pt({ x: x0 + r, y: y0 })}`;
+  if (side === "top") {
+    d += beak(
+      { x: edgeCenter - spread, y: y0 },
+      { x: edgeCenter, y: y0 - reach },
+      { x: edgeCenter + spread, y: y0 }
+    );
+  }
+  d += ` L ${pt({ x: x1 - r, y: y0 })} A ${fmt(r)} ${fmt(r)} 0 0 1 ${pt({ x: x1, y: y0 + r })}`;
+  if (side === "right") {
+    d += beak(
+      { x: x1, y: edgeCenter - spread },
+      { x: x1 + reach, y: edgeCenter },
+      { x: x1, y: edgeCenter + spread }
+    );
+  }
+  d += ` L ${pt({ x: x1, y: y1 - r })} A ${fmt(r)} ${fmt(r)} 0 0 1 ${pt({ x: x1 - r, y: y1 })}`;
+  if (side === "bottom") {
+    d += beak(
+      { x: edgeCenter + spread, y: y1 },
+      { x: edgeCenter, y: y1 + reach },
+      { x: edgeCenter - spread, y: y1 }
+    );
+  }
+  d += ` L ${pt({ x: x0 + r, y: y1 })} A ${fmt(r)} ${fmt(r)} 0 0 1 ${pt({ x: x0, y: y1 - r })}`;
+  if (side === "left") {
+    d += beak(
+      { x: x0, y: edgeCenter + spread },
+      { x: x0 - reach, y: edgeCenter },
+      { x: x0, y: edgeCenter - spread }
+    );
+  }
+  d += ` L ${pt({ x: x0, y: y0 + r })} A ${fmt(r)} ${fmt(r)} 0 0 1 ${pt({ x: x0 + r, y: y0 })} Z`;
+  return d;
+}
+
+// src/components/shared/FloatingSurface.tsx
+import { jsx as jsx64, jsxs as jsxs24 } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect6 = typeof document !== "undefined" ? useLayoutEffect9 : useEffect15;
+var SHADOW_BLEED = parseFloat(spacings5.sizeXXXLarge);
+var STROKE = parseFloat(strokeWidths2.strokeWidthThin);
+function usePanelSize(panelRef) {
+  const [size, setSize] = useState21(null);
+  useIsomorphicLayoutEffect6(() => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    const measure = () => {
+      const style = getComputedStyle(panel);
+      const next = { width: parseFloat(style.width), height: parseFloat(style.height) };
+      setSize((prev) => prev && prev.width === next.width && prev.height === next.height ? prev : next);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(panel);
+    return () => observer.disconnect();
+  }, [panelRef]);
+  return size;
+}
+function FloatingSurface({
+  panelRef,
+  side,
+  align,
+  radius: radius2,
+  beakWidth,
+  beakHeight,
+  tipRadius,
+  beakInsetStart,
+  beakInsetEnd,
+  backgroundColor,
+  borderColor
+}) {
+  const size = usePanelSize(panelRef);
+  if (!size) return null;
+  const r = parseFloat(radius2);
+  const bw = parseFloat(beakWidth);
+  const bh = parseFloat(beakHeight);
+  const vertical = side === "top" || side === "bottom";
+  const beakCenter = resolveBeakCenter(
+    vertical ? size.width : size.height,
+    align,
+    bw,
+    r,
+    parseFloat(beakInsetStart),
+    parseFloat(beakInsetEnd)
+  );
+  const geometry = {
+    panelWidth: size.width,
+    panelHeight: size.height,
+    radius: r,
+    side,
+    beakCenter,
+    beakWidth: bw,
+    beakHeight: bh,
+    tipRadius: parseFloat(tipRadius)
+  };
+  const shape = buildFloatingOutline(geometry);
+  const outline = buildFloatingOutline({ ...geometry, inset: STROKE / 2 });
+  const box = floatingShapeSize(size.width, size.height, side, bh);
+  const holeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${box.width + SHADOW_BLEED * 2}" height="${box.height + SHADOW_BLEED * 2}"><path transform="translate(${SHADOW_BLEED} ${SHADOW_BLEED})" d="${shape}"/></svg>`;
+  const holeMask = `linear-gradient(#000 0 0), url("data:image/svg+xml,${encodeURIComponent(holeSvg)}")`;
+  const rootStyle = {
+    width: box.width,
+    height: box.height,
+    top: side === "top" ? -bh : 0,
+    left: side === "left" ? -bh : 0
+  };
+  const shadowStyle = {
+    inset: -SHADOW_BLEED,
+    maskImage: holeMask,
+    WebkitMaskImage: holeMask,
+    maskComposite: "exclude",
+    WebkitMaskComposite: "xor",
+    maskSize: "100% 100%",
+    WebkitMaskSize: "100% 100%",
+    maskRepeat: "no-repeat",
+    WebkitMaskRepeat: "no-repeat"
+  };
+  const clip = `path("${shape}")`;
+  return /* @__PURE__ */ jsxs24("div", { "data-refineui": "floating-chrome", "aria-hidden": true, className: "pointer-events-none absolute -z-1", style: rootStyle, children: [
+    /* @__PURE__ */ jsx64("div", { className: "absolute", style: shadowStyle, children: /* @__PURE__ */ jsx64("div", { "data-refineui": "floating-shadow", className: "absolute", style: { inset: SHADOW_BLEED }, children: /* @__PURE__ */ jsx64("div", { className: "absolute inset-0", style: { clipPath: clip, backgroundColor: borderColor } }) }) }),
+    /* @__PURE__ */ jsx64("div", { "data-refineui": "floating-surface", className: "absolute inset-0", style: { clipPath: clip, backgroundColor } }),
+    /* @__PURE__ */ jsx64(
+      "svg",
+      {
+        "data-refineui": "floating-outline",
+        className: "absolute inset-0 overflow-visible",
+        width: box.width,
+        height: box.height,
+        viewBox: `0 0 ${box.width} ${box.height}`,
+        fill: "none",
+        children: /* @__PURE__ */ jsx64("path", { d: outline, stroke: borderColor, strokeWidth: STROKE, strokeLinejoin: "round" })
+      }
+    )
+  ] });
+}
+
 // src/components/PopOver/style.ts
 var popoverStyles = {
   root: "relative inline-block",
   fallbackTrigger: "cursor-pointer border-none bg-transparent p-0 font-inherit text-inherit",
   floatingRoot: "absolute z-refineui-popup",
   panelWrap: "relative inline-block min-w-refineui-popover-panel-width",
-  beakWrap: "pointer-events-none absolute z-[1]",
-  panel: "relative z-0 box-border min-w-refineui-popover-panel-width rounded-refineui-xx-large border-refineui-thin outline-none",
-  panelShadowDefault: "shadow-refineui-8"
+  /** Fill, stroke, and shadow come from `FloatingSurface`; the transparent border keeps the box size. */
+  panel: "relative z-0 box-border min-w-refineui-popover-panel-width rounded-refineui-xx-large border-refineui-thin border-transparent outline-none"
 };
 function popoverFloatingClasses(placement, align) {
   if (placement === "bottom") {
@@ -11366,58 +11563,22 @@ function popoverFloatingClasses(placement, align) {
 }
 
 // src/components/PopOver/PopOver.tsx
-import { jsx as jsx64, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs25 } from "react/jsx-runtime";
 var PopoverContext = createContext21(null);
 function usePopoverContext(component) {
   const ctx = useContext23(PopoverContext);
   if (!ctx) throw new Error(`${component} must be used within <Popover>`);
   return ctx;
 }
-var BEAK_W = foundationSizes.foundationSize160;
-var BEAK_H = foundationSizes.foundationSize80;
-var BEAK_OFFSET = foundationSizes.foundationSize80;
-var BEAK_BORDER_OVERLAP = strokeWidths2.strokeWidthThin;
-var POPOVER_GAP = spacings5.sizeMedium;
-function beakWrapperStyle(placement, align) {
-  const insetStart = componentSizes2.popoverBeakInsetFromStartEdge;
-  const insetEnd = componentSizes2.popoverBeakInsetFromEndEdge;
-  const edge = spacings5.sizeMedium;
-  const overlapOffset = `calc(-1 * ${BEAK_OFFSET} + ${BEAK_BORDER_OVERLAP})`;
-  switch (placement) {
-    case "bottom":
-      if (align === "center") return { top: overlapOffset, left: `calc(50% - ${BEAK_W} / 2)` };
-      if (align === "start") return { top: overlapOffset, left: insetStart };
-      return { top: overlapOffset, right: insetEnd };
-    case "top":
-      if (align === "center") return { bottom: overlapOffset, left: `calc(50% - ${BEAK_W} / 2)` };
-      if (align === "start") return { bottom: overlapOffset, left: insetStart };
-      return { bottom: overlapOffset, right: insetEnd };
-    case "left":
-      if (align === "center") return { right: overlapOffset, top: `calc(50% - ${BEAK_W} / 2)` };
-      if (align === "start") return { right: overlapOffset, top: edge };
-      return { right: overlapOffset, bottom: edge };
-    case "right":
-      if (align === "center") return { left: overlapOffset, top: `calc(50% - ${BEAK_W} / 2)` };
-      if (align === "start") return { left: overlapOffset, top: edge };
-      return { left: overlapOffset, bottom: edge };
-    default:
-      return {};
-  }
-}
-function beakRotateDeg(placement) {
-  switch (placement) {
-    case "bottom":
-      return 0;
-    case "top":
-      return 180;
-    case "left":
-      return -90;
-    case "right":
-      return 90;
-    default:
-      return 0;
-  }
-}
+var BEAK_TIP_GAP = spacings6.sizeXXSmall;
+var POPOVER_GAP = `calc(${componentSizes2.popoverBeakHeight} + ${BEAK_TIP_GAP})`;
+var SIDE_BEAK_INSET = spacings6.sizeMedium;
+var beakSideByPlacement = {
+  bottom: "top",
+  top: "bottom",
+  left: "right",
+  right: "left"
+};
 function floatingGapStyle(placement) {
   if (placement === "top") return { marginBottom: POPOVER_GAP };
   if (placement === "bottom") return { marginTop: POPOVER_GAP };
@@ -11425,7 +11586,7 @@ function floatingGapStyle(placement) {
   return { marginLeft: POPOVER_GAP };
 }
 function Popover({ children, className, open: openProp, defaultOpen = false, onOpenChange, ...props }) {
-  const [internalOpen, setInternalOpen] = useState21(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState22(defaultOpen);
   const open = openProp ?? internalOpen;
   const setOpen = useCallback17(
     (next) => {
@@ -11439,14 +11600,14 @@ function Popover({ children, className, open: openProp, defaultOpen = false, onO
   const contentRef = useRef17(null);
   const triggerRef = useRef17(null);
   const contentId = useId14();
-  useEffect15(() => {
+  useEffect16(() => {
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
     };
     if (open) document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open, setOpen]);
-  useEffect15(() => {
+  useEffect16(() => {
     const onKey = (e) => {
       if (e instanceof KeyboardEvent && e.key === "Escape") setOpen(false);
     };
@@ -11475,7 +11636,7 @@ function Popover({ children, className, open: openProp, defaultOpen = false, onO
     }),
     [open, setOpen, toggle, contentId, onTriggerKeyDown]
   );
-  return /* @__PURE__ */ jsx64(PopoverContext.Provider, { value, children: /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(PopoverContext.Provider, { value, children: /* @__PURE__ */ jsx65(
     "div",
     {
       ref: containerRef,
@@ -11491,7 +11652,7 @@ function PopoverTrigger({ children, className, ...props }) {
   const mergeEl = getMergeableTriggerChild3(children);
   if (mergeEl) {
     const passthrough = props;
-    return /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx65(
       Slot4,
       {
         ref: triggerRef,
@@ -11513,7 +11674,7 @@ function PopoverTrigger({ children, className, ...props }) {
     );
   }
   const passthroughBtn = props;
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     "button",
     {
       type: "button",
@@ -11552,11 +11713,10 @@ function PopoverContent({
   const palette = componentColorTokens.popover.default;
   const bg = resolveColorTokenValue10(palette.background);
   const borderCol = resolveColorTokenValue10(palette.border);
-  const bw = beakWrapperStyle(placement, align);
-  const rot = beakRotateDeg(placement);
   const gapStyle = floatingGapStyle(placement);
+  const vertical = placement === "top" || placement === "bottom";
   if (!open) return null;
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     "div",
     {
       className: clsx85(
@@ -11564,34 +11724,8 @@ function PopoverContent({
         popoverFloatingClasses(placement, align)
       ),
       style: gapStyle,
-      children: /* @__PURE__ */ jsxs24("div", { className: popoverStyles.panelWrap, children: [
-        /* @__PURE__ */ jsx64("div", { className: popoverStyles.beakWrap, style: { ...bw, width: BEAK_W, height: BEAK_H }, "aria-hidden": true, children: /* @__PURE__ */ jsx64(
-          "div",
-          {
-            style: {
-              width: BEAK_W,
-              height: BEAK_H,
-              transform: `rotate(${rot}deg)`,
-              transformOrigin: "center center"
-            },
-            children: /* @__PURE__ */ jsxs24(
-              "svg",
-              {
-                width: BEAK_W,
-                height: BEAK_H,
-                viewBox: "0 0 16 8",
-                fill: "none",
-                xmlns: "http://www.w3.org/2000/svg",
-                style: { display: "block" },
-                children: [
-                  /* @__PURE__ */ jsx64("polygon", { points: "8,0 0,8 16,8", fill: borderCol }),
-                  /* @__PURE__ */ jsx64("polygon", { points: "8,2 2,8 14,8", fill: bg })
-                ]
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx64(
+      children: /* @__PURE__ */ jsxs25("div", { className: popoverStyles.panelWrap, children: [
+        /* @__PURE__ */ jsx65(
           "div",
           {
             ref: contentRef,
@@ -11602,22 +11736,32 @@ function PopoverContent({
             "data-refineui": "popover",
             "data-placement": placement,
             "data-align": align,
-            className: clsx85(
-              popoverStyles.panel,
-              popoverStyles.panelShadowDefault,
-              className
-            ),
+            className: clsx85(popoverStyles.panel, className),
             style: {
               ...styleProp && typeof styleProp === "object" ? styleProp : {},
               minWidth: componentSizes2.popoverPanelWidth,
-              padding: spacings5.sizeLarge,
-              backgroundColor: bg,
-              color: resolveColorTokenValue10(palette.foreground),
-              borderColor: borderCol
+              padding: spacings6.sizeLarge,
+              color: resolveColorTokenValue10(palette.foreground)
             },
             ...props,
             children
           }
+        ),
+        /* @__PURE__ */ jsx65(
+          FloatingSurface,
+          {
+            panelRef: contentRef,
+            side: beakSideByPlacement[placement],
+            align,
+            radius: borderRadii.roundedXXLarge,
+            beakWidth: componentSizes2.popoverBeakWidth,
+            beakHeight: componentSizes2.popoverBeakHeight,
+            tipRadius: componentSizes2.popoverBeakTipRadius,
+            beakInsetStart: vertical ? componentSizes2.popoverBeakInsetFromStartEdge : SIDE_BEAK_INSET,
+            beakInsetEnd: vertical ? componentSizes2.popoverBeakInsetFromEndEdge : SIDE_BEAK_INSET,
+            backgroundColor: bg,
+            borderColor: borderCol
+          }
         )
       ] })
     }
@@ -11631,9 +11775,9 @@ function PopOver({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs24(Popover, { className, ...props, children: [
-    /* @__PURE__ */ jsx64(PopoverTrigger, { children: trigger }),
-    /* @__PURE__ */ jsx64(PopoverContent, { placement, align, children: content })
+  return /* @__PURE__ */ jsxs25(Popover, { className, ...props, children: [
+    /* @__PURE__ */ jsx65(PopoverTrigger, { children: trigger }),
+    /* @__PURE__ */ jsx65(PopoverContent, { placement, align, children: content })
   ] });
 }
 
@@ -11649,7 +11793,7 @@ var skeletonStyles = {
 };
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function Skeleton({
   width,
   height,
@@ -11681,7 +11825,7 @@ function Skeleton({
     w = width ?? "100%";
   }
   const dimStyle = { width: w, height: h };
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     "div",
     {
       "data-refineui": "skeleton",
@@ -11699,7 +11843,7 @@ function Skeleton({
 
 // src/components/Slider/Slider.tsx
 import { clsx as clsx87 } from "clsx";
-import { useState as useState22 } from "react";
+import { useState as useState23 } from "react";
 
 // src/components/Slider/style.ts
 var sliderStyles = {
@@ -11707,7 +11851,7 @@ var sliderStyles = {
 };
 
 // src/components/Slider/Slider.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 function clampPct(n) {
   if (Number.isNaN(n)) return 0;
   return Math.min(100, Math.max(0, n));
@@ -11725,12 +11869,12 @@ function Slider({
   style,
   ...props
 }) {
-  const [internalFillPct, setInternalFillPct] = useState22(() => {
+  const [internalFillPct, setInternalFillPct] = useState23(() => {
     const v = defaultValue !== void 0 ? Number(defaultValue) : (min + max) / 2;
     return clampPct((v - min) / (max - min) * 100);
   });
   const fillPct = value !== void 0 ? clampPct((Number(value) - min) / (max - min) * 100) : internalFillPct;
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     "input",
     {
       type: "range",
@@ -11775,11 +11919,11 @@ import {
   isValidElement as isValidElement5,
   useCallback as useCallback18,
   useContext as useContext24,
-  useEffect as useEffect16,
-  useLayoutEffect as useLayoutEffect9,
+  useEffect as useEffect17,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo18,
   useRef as useRef18,
-  useState as useState23
+  useState as useState24
 } from "react";
 
 // src/components/Carousel/style.ts
@@ -11812,7 +11956,7 @@ var carouselStyles = {
 };
 
 // src/components/Carousel/Carousel.tsx
-import { jsx as jsx67, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs26 } from "react/jsx-runtime";
 var DRAG_COMMIT_RATIO = 0.18;
 var CarouselContext = createContext22(null);
 function useCarouselContext(component) {
@@ -11835,10 +11979,10 @@ function Carousel({
   ...props
 }) {
   const isControlled = indexControlled !== void 0;
-  const [internalIndex, setInternalIndex] = useState23(defaultIndex);
-  const [count, setCount] = useState23(0);
-  const [trackIndex, setTrackIndex] = useState23(defaultIndex);
-  const [instant, setInstant] = useState23(false);
+  const [internalIndex, setInternalIndex] = useState24(defaultIndex);
+  const [count, setCount] = useState24(0);
+  const [trackIndex, setTrackIndex] = useState24(defaultIndex);
+  const [instant, setInstant] = useState24(false);
   const index = isControlled ? indexControlled : internalIndex;
   const loopActive = loop && count > 1;
   const commitLogical = useCallback18(
@@ -11849,13 +11993,13 @@ function Carousel({
     },
     [count, isControlled, onIndexChange]
   );
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (count <= 0) return;
     const logical = clampIndex(index, count);
     if (logical !== index) commitLogical(logical);
     setTrackIndex(loopActive ? logical + 1 : logical);
   }, [count, loopActive]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (count <= 0) return;
     if (!loopActive) {
       setTrackIndex(clampIndex(index, count));
@@ -11975,7 +12119,7 @@ function Carousel({
         break;
     }
   };
-  return /* @__PURE__ */ jsx67(CarouselContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(CarouselContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx68(
     "div",
     {
       "data-refineui": "carousel",
@@ -12001,11 +12145,11 @@ function CarouselContent({ className, children, ...props }) {
   } = useCarouselContext("CarouselContent");
   const viewportRef = useRef18(null);
   const dragStartX = useRef18(null);
-  const [dragPx, setDragPx] = useState23(0);
-  const [dragging, setDragging] = useState23(false);
+  const [dragPx, setDragPx] = useState24(0);
+  const [dragging, setDragging] = useState24(false);
   const slides = Children6.toArray(children).filter(isValidElement5);
   const slideCount = slides.length;
-  useEffect16(() => {
+  useEffect17(() => {
     setCount(slideCount);
   }, [setCount, slideCount]);
   const trackSlides = loop && slides.length > 1 ? [
@@ -12062,7 +12206,7 @@ function CarouselContent({ className, children, ...props }) {
   };
   const animated = !dragging && !instant;
   const transform = dragPx !== 0 ? `translate3d(calc(-${trackIndex * 100}% + ${dragPx}px), 0, 0)` : `translate3d(-${trackIndex * 100}%, 0, 0)`;
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     "div",
     {
       ref: viewportRef,
@@ -12073,7 +12217,7 @@ function CarouselContent({ className, children, ...props }) {
       onPointerMove,
       onPointerUp,
       onPointerCancel,
-      children: /* @__PURE__ */ jsx67(
+      children: /* @__PURE__ */ jsx68(
         "div",
         {
           "data-refineui": "carousel-track",
@@ -12090,7 +12234,7 @@ function CarouselContent({ className, children, ...props }) {
 }
 var CarouselItem = forwardRef15(function CarouselItem2({ className, children, ...props }, ref) {
   useCarouselContext("CarouselItem");
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     "div",
     {
       ref,
@@ -12105,12 +12249,12 @@ var CarouselItem = forwardRef15(function CarouselItem2({ className, children, ..
 });
 function CarouselControls({ className, children, ...props }) {
   useCarouselContext("CarouselControls");
-  return /* @__PURE__ */ jsx67("div", { "data-refineui": "carousel-controls", className: clsx89(carouselStyles.controls, className), ...props, children });
+  return /* @__PURE__ */ jsx68("div", { "data-refineui": "carousel-controls", className: clsx89(carouselStyles.controls, className), ...props, children });
 }
 function CarouselPrevious({ className, disabled, onClick, ...props }) {
   const { scrollPrev, canScrollPrev } = useCarouselContext("CarouselPrevious");
   const isDisabled = disabled || !canScrollPrev;
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     Button,
     {
       variant: "outline",
@@ -12126,7 +12270,7 @@ function CarouselPrevious({ className, disabled, onClick, ...props }) {
         onClick?.(e);
         if (!e.defaultPrevented && !isDisabled) scrollPrev();
       },
-      children: /* @__PURE__ */ jsx67(
+      children: /* @__PURE__ */ jsx68(
         WebIcon,
         {
           name: "chevron-left",
@@ -12142,7 +12286,7 @@ function CarouselPrevious({ className, disabled, onClick, ...props }) {
 function CarouselNext({ className, disabled, onClick, ...props }) {
   const { scrollNext, canScrollNext } = useCarouselContext("CarouselNext");
   const isDisabled = disabled || !canScrollNext;
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     Button,
     {
       variant: "outline",
@@ -12158,7 +12302,7 @@ function CarouselNext({ className, disabled, onClick, ...props }) {
         onClick?.(e);
         if (!e.defaultPrevented && !isDisabled) scrollNext();
       },
-      children: /* @__PURE__ */ jsx67(
+      children: /* @__PURE__ */ jsx68(
         WebIcon,
         {
           name: "chevron-right",
@@ -12174,7 +12318,7 @@ function CarouselNext({ className, disabled, onClick, ...props }) {
 function CarouselIndicators({ className, ...props }) {
   const { count, index, scrollTo } = useCarouselContext("CarouselIndicators");
   const trackRef = useRef18(null);
-  const [thumb, setThumb] = useState23({ width: 0, x: 0, ready: false });
+  const [thumb, setThumb] = useState24({ width: 0, x: 0, ready: false });
   const updateThumb = useCallback18(() => {
     const el = trackRef.current;
     if (!el || count <= 0) {
@@ -12190,10 +12334,10 @@ function CarouselIndicators({ className, ...props }) {
       ready: true
     });
   }, [count, index]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     updateThumb();
   }, [updateThumb]);
-  useEffect16(() => {
+  useEffect17(() => {
     const el = trackRef.current;
     if (!el) return;
     const ro = new ResizeObserver(() => updateThumb());
@@ -12205,7 +12349,7 @@ function CarouselIndicators({ className, ...props }) {
     width: thumb.width,
     transform: `translate3d(${thumb.x}px, 0, 0)`
   };
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       ref: trackRef,
@@ -12215,7 +12359,7 @@ function CarouselIndicators({ className, ...props }) {
       className: clsx89(carouselStyles.indicators, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx68(
           "span",
           {
             "data-refineui": "carousel-indicator-thumb",
@@ -12225,7 +12369,7 @@ function CarouselIndicators({ className, ...props }) {
             style: thumbStyle
           }
         ),
-        /* @__PURE__ */ jsx67("div", { "data-refineui": "carousel-indicator-hits", className: carouselStyles.indicatorHitRow, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx68("div", { "data-refineui": "carousel-indicator-hits", className: carouselStyles.indicatorHitRow, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx68(
           "button",
           {
             type: "button",
@@ -12316,7 +12460,7 @@ var bubbleContentVariantClass = {
 };
 
 // src/components/Bubble/Bubble.tsx
-import { jsx as jsx68, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs27 } from "react/jsx-runtime";
 var BubbleContext = createContext23(null);
 function useBubbleContext(component) {
   const value = useContext25(BubbleContext);
@@ -12348,7 +12492,7 @@ function partitionBubbleChildren(children) {
   };
 }
 function BubbleGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
       "data-refineui": "bubble-group",
@@ -12367,7 +12511,7 @@ function Bubble({
 }) {
   const rootStyle = variant === "ghost" ? style : { maxWidth: BUBBLE_MAX_WIDTH, ...style };
   const { top, middle, bottom, hasTop, hasBottom } = partitionBubbleChildren(children);
-  return /* @__PURE__ */ jsx68(BubbleContext.Provider, { value: { variant, align }, children: /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(BubbleContext.Provider, { value: { variant, align }, children: /* @__PURE__ */ jsx69(
     "div",
     {
       "data-refineui": "bubble",
@@ -12382,7 +12526,7 @@ function Bubble({
       ),
       style: rootStyle,
       ...props,
-      children: /* @__PURE__ */ jsxs26("div", { "data-refineui": "bubble-surface", className: bubbleStyles.surface, children: [
+      children: /* @__PURE__ */ jsxs27("div", { "data-refineui": "bubble-surface", className: bubbleStyles.surface, children: [
         middle,
         top,
         bottom
@@ -12392,7 +12536,7 @@ function Bubble({
 }
 function BubbleContent({ className, ...props }) {
   const { variant } = useBubbleContext("BubbleContent");
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
       "data-refineui": "bubble-content",
@@ -12413,7 +12557,7 @@ function BubbleReactions({
 }) {
   const { align: bubbleAlign } = useBubbleContext("BubbleReactions");
   const align = alignProp ?? (bubbleAlign === "start" ? "end" : "start");
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
       "data-refineui": "bubble-reactions",
@@ -12439,7 +12583,7 @@ import {
   useContext as useContext26,
   useMemo as useMemo19,
   useRef as useRef19,
-  useState as useState24
+  useState as useState25
 } from "react";
 
 // src/components/Stepper/style.ts
@@ -12548,7 +12692,7 @@ var stepperConnectorVars = {
 };
 
 // src/components/Stepper/Stepper.tsx
-import { jsx as jsx69, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs28 } from "react/jsx-runtime";
 var StepperContext = createContext24(null);
 var StepperItemContext = createContext24(null);
 var StepperListRegistryContext = createContext24(null);
@@ -12578,7 +12722,7 @@ function Stepper({
   ...props
 }) {
   const isControlled = valueControlled !== void 0;
-  const [internalValue, setInternalValue] = useState24(defaultValue);
+  const [internalValue, setInternalValue] = useState25(defaultValue);
   const value = isControlled ? valueControlled : internalValue;
   const setValue = useCallback19(
     (next) => {
@@ -12596,7 +12740,7 @@ function Stepper({
     }),
     [value, setValue, orientation, onValueChange, isControlled]
   );
-  return /* @__PURE__ */ jsx69(StepperContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(StepperContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx70(
     "div",
     {
       "data-refineui": "stepper",
@@ -12624,7 +12768,7 @@ function StepperList({ className, children, ...props }) {
     }),
     [value]
   );
-  return /* @__PURE__ */ jsx69(StepperListRegistryContext.Provider, { value: registry, children: /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(StepperListRegistryContext.Provider, { value: registry, children: /* @__PURE__ */ jsx70(
     "ol",
     {
       "data-refineui": "stepper-list",
@@ -12669,7 +12813,7 @@ function StepperItem({
     () => ({ state, disabled }),
     [state, disabled]
   );
-  return /* @__PURE__ */ jsx69(StepperItemContext.Provider, { value: itemCtx, children: /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(StepperItemContext.Provider, { value: itemCtx, children: /* @__PURE__ */ jsx70(
     "li",
     {
       "data-refineui": "stepper-item",
@@ -12697,7 +12841,7 @@ function StepperItem({
 function StepperIndicator({ className, children, ...props }) {
   const { state } = useStepperItemContext("StepperIndicator");
   const stateClass = state === "complete" ? stepperStyles.indicatorComplete : state === "current" ? stepperStyles.indicatorCurrent : stepperStyles.indicatorUpcoming;
-  const content = state === "upcoming" ? children : /* @__PURE__ */ jsx69(
+  const content = state === "upcoming" ? children : /* @__PURE__ */ jsx70(
     WebIcon,
     {
       name: "checkmark",
@@ -12708,7 +12852,7 @@ function StepperIndicator({ className, children, ...props }) {
       className: "items-center justify-center"
     }
   );
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     "span",
     {
       "data-refineui": "stepper-indicator",
@@ -12723,7 +12867,7 @@ function StepperIndicator({ className, children, ...props }) {
 function StepperContent({ className, ...props }) {
   const { orientation } = useStepperContext("StepperContent");
   useStepperItemContext("StepperContent");
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     "div",
     {
       "data-refineui": "stepper-content",
@@ -12739,7 +12883,7 @@ function StepperContent({ className, ...props }) {
 function StepperTitle({ className, ...props }) {
   const { state } = useStepperItemContext("StepperTitle");
   const stateClass = state === "complete" ? stepperStyles.titleComplete : state === "current" ? stepperStyles.titleCurrent : stepperStyles.titleUpcoming;
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     "span",
     {
       "data-refineui": "stepper-title",
@@ -12752,7 +12896,7 @@ function StepperTitle({ className, ...props }) {
 function StepperDescription({ className, ...props }) {
   const { state } = useStepperItemContext("StepperDescription");
   const stateClass = state === "complete" ? stepperStyles.descriptionComplete : state === "current" ? stepperStyles.descriptionCurrent : stepperStyles.descriptionUpcoming;
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     "span",
     {
       "data-refineui": "stepper-description",
@@ -12767,7 +12911,7 @@ function StepperSeparator({ className, ...props }) {
   const registry = useContext26(StepperListRegistryContext);
   const state = registry?.takeSeparatorState() ?? "upcoming";
   const vertical = orientation === "vertical";
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     "li",
     {
       "data-refineui": "stepper-separator",
@@ -12781,7 +12925,7 @@ function StepperSeparator({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs27(
+      children: /* @__PURE__ */ jsxs28(
         "span",
         {
           "data-refineui": "stepper-separator-rail",
@@ -12790,14 +12934,14 @@ function StepperSeparator({ className, ...props }) {
             vertical ? stepperStyles.separatorRailVertical : stepperStyles.separatorRailHorizontal
           ),
           children: [
-            /* @__PURE__ */ jsx69(
+            /* @__PURE__ */ jsx70(
               "span",
               {
                 "data-refineui": "stepper-separator-track",
                 className: stepperStyles.separatorTrack
               }
             ),
-            /* @__PURE__ */ jsx69(
+            /* @__PURE__ */ jsx70(
               "span",
               {
                 "data-refineui": "stepper-separator-fill",
@@ -12830,10 +12974,10 @@ import {
   useCallback as useCallback20,
   useContext as useContext27,
   useId as useId15,
-  useLayoutEffect as useLayoutEffect10,
+  useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo20,
   useRef as useRef20,
-  useState as useState25
+  useState as useState26
 } from "react";
 
 // src/components/Resizable/style.ts
@@ -12869,7 +13013,7 @@ var resizableStyles = {
 };
 
 // src/components/Resizable/Resizable.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var KEYBOARD_STEP = 2;
 var KEYBOARD_STEP_LARGE = 10;
 var DEFAULT_SIZE = 50;
@@ -12939,7 +13083,7 @@ function ResizablePanelGroup({
   const groupRef = useRef20(null);
   const panelsRef = useRef20(/* @__PURE__ */ new Map());
   const orderCounterRef = useRef20(0);
-  const [sizes, setSizes] = useState25({});
+  const [sizes, setSizes] = useState26({});
   const onLayoutRef = useRef20(onLayout);
   onLayoutRef.current = onLayout;
   const syncInitialSizes = useCallback20(() => {
@@ -13043,7 +13187,7 @@ function ResizablePanelGroup({
     },
     [emitPanelResize]
   );
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     const ids = orderedPanelIds(panelsRef.current);
     if (ids.length === 0) return;
     if (ids.some((id) => sizes[id] === void 0)) return;
@@ -13070,7 +13214,7 @@ function ResizablePanelGroup({
       setBetween
     ]
   );
-  return /* @__PURE__ */ jsx70(ResizableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(ResizableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx71(
     "div",
     {
       ref: groupRef,
@@ -13102,7 +13246,7 @@ function ResizablePanel({
   const { orientation, sizes, registerPanel, unregisterPanel } = useResizableContext("ResizablePanel");
   const onResizeRef = useRef20(onResize);
   onResizeRef.current = onResize;
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     registerPanel({
       id,
       defaultSize,
@@ -13129,7 +13273,7 @@ function ResizablePanel({
     flexBasis: 0,
     ...orientation === "horizontal" ? { minWidth: `${minSize}%` } : { minHeight: `${minSize}%` }
   };
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     "div",
     {
       "data-refineui": "resizable-panel",
@@ -13161,10 +13305,10 @@ function ResizableHandle({
     setBetween
   } = useResizableContext("ResizableHandle");
   const handleRef = useRef20(null);
-  const [active, setActive] = useState25(false);
-  const [, setAdjacentReady] = useState25(false);
+  const [active, setActive] = useState26(false);
+  const [, setAdjacentReady] = useState26(false);
   const dragRef = useRef20(null);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     setAdjacentReady(true);
   }, []);
   const adjacent = handleRef.current ? findAdjacentPanelIds(handleRef.current) : { leftId: null, rightId: null };
@@ -13274,7 +13418,7 @@ function ResizableHandle({
     resizeBetween(leftId, rightId, delta);
     queueMicrotask(keepFocus);
   };
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     "div",
     {
       ref: handleRef,
@@ -13304,7 +13448,7 @@ function ResizableHandle({
       onPointerUp: handlePointerUp,
       onPointerCancel: handlePointerUp,
       onKeyDown: handleKeyDown,
-      children: withHandle ? /* @__PURE__ */ jsx70(
+      children: withHandle ? /* @__PURE__ */ jsx71(
         "span",
         {
           "aria-hidden": true,
@@ -13320,7 +13464,7 @@ function ResizableHandle({
 
 // src/components/SpinButton/SpinButton.tsx
 import { clsx as clsx96 } from "clsx";
-import { useEffect as useEffect17, useState as useState26 } from "react";
+import { useEffect as useEffect18, useState as useState27 } from "react";
 import { iconSizes as iconSizes20 } from "@refineui/tokens";
 
 // src/components/SpinButton/style.ts
@@ -13344,7 +13488,7 @@ var spinButtonShellClass = formControlShellHeightClass;
 var spinButtonValueTypo = formControlTypoClass;
 
 // src/components/SpinButton/SpinButton.tsx
-import { jsx as jsx71, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs29 } from "react/jsx-runtime";
 function SpinButton({
   value,
   onChange,
@@ -13358,8 +13502,8 @@ function SpinButton({
   onKeyDown,
   ...props
 }) {
-  const [draftValue, setDraftValue] = useState26(String(value));
-  useEffect17(() => {
+  const [draftValue, setDraftValue] = useState27(String(value));
+  useEffect18(() => {
     setDraftValue(String(value));
   }, [value]);
   const clampValue2 = (next) => {
@@ -13447,7 +13591,7 @@ function SpinButton({
   const atMax = max !== void 0 && value >= max;
   const atMin = min !== void 0 && value <= min;
   const borderClass = disabled ? spinButtonStyles.borderDisabled : spinButtonStyles.borderDefault;
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       role: "spinbutton",
@@ -13470,7 +13614,7 @@ function SpinButton({
       ...props,
       onKeyDown: handleKeyDown,
       children: [
-        /* @__PURE__ */ jsx71(
+        /* @__PURE__ */ jsx72(
           "div",
           {
             "aria-live": "polite",
@@ -13481,7 +13625,7 @@ function SpinButton({
               disabled ? spinButtonStyles.valueTextDisabled : spinButtonStyles.valueTextDefault,
               disabled ? spinButtonStyles.bgDisabled : spinButtonStyles.bgDefault
             ),
-            children: /* @__PURE__ */ jsx71(
+            children: /* @__PURE__ */ jsx72(
               "input",
               {
                 type: "text",
@@ -13506,7 +13650,7 @@ function SpinButton({
             )
           }
         ),
-        /* @__PURE__ */ jsxs28(
+        /* @__PURE__ */ jsxs29(
           "div",
           {
             className: clsx96(
@@ -13514,7 +13658,7 @@ function SpinButton({
               disabled ? spinButtonStyles.bgDisabled : spinButtonStyles.bgDefault
             ),
             children: [
-              /* @__PURE__ */ jsx71(
+              /* @__PURE__ */ jsx72(
                 "button",
                 {
                   type: "button",
@@ -13526,7 +13670,7 @@ function SpinButton({
                     spinButtonStyles.stepButtonBase,
                     disabled || atMax ? spinButtonStyles.stepButtonDisabled : spinButtonStyles.stepButtonEnabled
                   ),
-                  children: /* @__PURE__ */ jsx71(
+                  children: /* @__PURE__ */ jsx72(
                     WebIcon,
                     {
                       name: "chevron-up",
@@ -13538,7 +13682,7 @@ function SpinButton({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx71(
+              /* @__PURE__ */ jsx72(
                 "button",
                 {
                   type: "button",
@@ -13550,7 +13694,7 @@ function SpinButton({
                     spinButtonStyles.stepButtonBase,
                     disabled || atMin ? spinButtonStyles.stepButtonDisabled : spinButtonStyles.stepButtonEnabled
                   ),
-                  children: /* @__PURE__ */ jsx71(
+                  children: /* @__PURE__ */ jsx72(
                     WebIcon,
                     {
                       name: "chevron-down",
@@ -13575,14 +13719,14 @@ import { clsx as clsx98 } from "clsx";
 import {
   forwardRef as forwardRef16,
   useCallback as useCallback21,
-  useEffect as useEffect18,
-  useLayoutEffect as useLayoutEffect11,
+  useEffect as useEffect19,
+  useLayoutEffect as useLayoutEffect12,
   useRef as useRef21,
-  useState as useState27,
+  useState as useState28,
   useSyncExternalStore
 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
-import { iconSizes as iconSizes21, spacings as spacings6 } from "@refineui/tokens";
+import { iconSizes as iconSizes21, spacings as spacings7 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber6 } from "@refineui/utilities/animation";
 import { resolveColorTokenValue as resolveColorTokenValue11 } from "@refineui/utilities/color";
 
@@ -13617,8 +13761,8 @@ var toastStyles = {
 };
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx72, jsxs as jsxs29 } from "react/jsx-runtime";
-var useIsomorphicLayoutEffect6 = typeof document !== "undefined" ? useLayoutEffect11 : useEffect18;
+import { jsx as jsx73, jsxs as jsxs30 } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect7 = typeof document !== "undefined" ? useLayoutEffect12 : useEffect19;
 var ENTER_MS = 20;
 var LEAVE_MS = motionMsToNumber6(componentTokens.toast.motion.leave) + 60;
 var DEFAULT_DURATION = 4200;
@@ -13641,10 +13785,10 @@ function gapPxFromSpacingToken(token) {
 var TOAST_NARROW_STACK_MQ = "(max-width: 480px), (hover: none)";
 function readToastStackGapPx() {
   if (typeof globalThis.matchMedia === "undefined") {
-    return gapPxFromSpacingToken(String(spacings6.sizeLarge));
+    return gapPxFromSpacingToken(String(spacings7.sizeLarge));
   }
   const mq = globalThis.matchMedia(TOAST_NARROW_STACK_MQ);
-  return gapPxFromSpacingToken(mq.matches ? String(spacings6.sizeMedium) : String(spacings6.sizeLarge));
+  return gapPxFromSpacingToken(mq.matches ? String(spacings7.sizeMedium) : String(spacings7.sizeLarge));
 }
 function subscribeToastStackGap(onChange) {
   if (typeof globalThis.matchMedia === "undefined") return () => {
@@ -13657,7 +13801,7 @@ function useToastStackGapPx() {
   return useSyncExternalStore(
     subscribeToastStackGap,
     readToastStackGapPx,
-    () => gapPxFromSpacingToken(String(spacings6.sizeLarge))
+    () => gapPxFromSpacingToken(String(spacings7.sizeLarge))
   );
 }
 function readToastNaturalHeight(li) {
@@ -13805,7 +13949,7 @@ var Toast = forwardRef16(function Toast2(props, ref) {
   const liveRole = variant === "error" ? "alert" : "status";
   const ariaLive = variant === "error" ? void 0 : variant === "warning" ? "assertive" : "polite";
   const resolvedIconName = iconName ?? variantIconNames[variant];
-  const iconContent = icon ?? /* @__PURE__ */ jsx72(
+  const iconContent = icon ?? /* @__PURE__ */ jsx73(
     WebIcon,
     {
       name: resolvedIconName,
@@ -13815,7 +13959,7 @@ var Toast = forwardRef16(function Toast2(props, ref) {
     }
   );
   const isPrimaryAction = !action || typeof action !== "object" || !("variant" in action) || action.variant === "primary";
-  const actionEl = typeof action === "object" && action !== null && "label" in action ? /* @__PURE__ */ jsx72(
+  const actionEl = typeof action === "object" && action !== null && "label" in action ? /* @__PURE__ */ jsx73(
     Button,
     {
       variant: isPrimaryAction ? "primary" : "outline",
@@ -13831,7 +13975,7 @@ var Toast = forwardRef16(function Toast2(props, ref) {
     borderColor: resolveColorTokenValue11(color.border),
     color: resolveColorTokenValue11(color.message)
   };
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       ref,
@@ -13844,8 +13988,8 @@ var Toast = forwardRef16(function Toast2(props, ref) {
       style: { ...tokenStyle, ...style },
       className: clsx98(toastStyles.card, className),
       children: [
-        /* @__PURE__ */ jsx72("div", { "data-refineui": "toast-icon", className: toastStyles.iconWrap, children: iconContent }),
-        /* @__PURE__ */ jsx72("div", { className: toastStyles.contentWrap, children: message != null && message !== "" ? /* @__PURE__ */ jsx72("div", { className: toastStyles.message, children: message }) : null }),
+        /* @__PURE__ */ jsx73("div", { "data-refineui": "toast-icon", className: toastStyles.iconWrap, children: iconContent }),
+        /* @__PURE__ */ jsx73("div", { className: toastStyles.contentWrap, children: message != null && message !== "" ? /* @__PURE__ */ jsx73("div", { className: toastStyles.message, children: message }) : null }),
         action != null && actionEl
       ]
     }
@@ -13856,7 +14000,7 @@ function SwipeableToast({ record, index, swipeDirections, onSwipeStart, onSwipeE
   const dragStartRef = useRef21(null);
   const axisRef = useRef21(null);
   const offsetRef = useRef21({ x: 0, y: 0 });
-  const [swiping, setSwiping] = useState27(false);
+  const [swiping, setSwiping] = useState28(false);
   const clearSwipeOffset = useCallback21(() => {
     const el = toastRef.current;
     offsetRef.current = { x: 0, y: 0 };
@@ -13932,7 +14076,7 @@ function SwipeableToast({ record, index, swipeDirections, onSwipeStart, onSwipeE
     clearSwipeOffset();
     onSwipeEnd();
   };
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(
     Toast,
     {
       ref: toastRef,
@@ -13967,15 +14111,15 @@ function Toaster({
     () => activeToasterKey === toasterKeyRef.current,
     () => false
   );
-  const [records, setRecords] = useState27([]);
+  const [records, setRecords] = useState28([]);
   const timerMapRef = useRef21({});
   const pausedRef = useRef21(/* @__PURE__ */ new Set());
   const rootRef = useRef21(null);
   const itemRefs = useRef21({});
-  const [layoutTick, setLayoutTick] = useState27(0);
+  const [layoutTick, setLayoutTick] = useState28(0);
   const stackGapPx = useToastStackGapPx();
   const resolvedSwipe = swipeDirections ?? DEFAULT_SWIPE_DIRECTIONS;
-  useIsomorphicLayoutEffect6(() => {
+  useIsomorphicLayoutEffect7(() => {
     const key = toasterKeyRef.current;
     activeToasterKey = key;
     notifyToasterOwners();
@@ -13986,13 +14130,13 @@ function Toaster({
       }
     };
   }, []);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!isPortalOwner) return;
     return subscribeToasts((next) => {
       setRecords(next.slice(0, Math.max(1, maxToasts)));
     });
   }, [isPortalOwner, maxToasts]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!isPortalOwner) return;
     for (const rec of records) {
       if (rec.phase === "leaving") continue;
@@ -14014,7 +14158,7 @@ function Toaster({
       }
     }
   }, [isPortalOwner, records]);
-  useEffect18(() => {
+  useEffect19(() => {
     return () => {
       for (const handle of Object.values(timerMapRef.current)) {
         clearTimeout(handle);
@@ -14022,7 +14166,7 @@ function Toaster({
       timerMapRef.current = {};
     };
   }, []);
-  useIsomorphicLayoutEffect6(() => {
+  useIsomorphicLayoutEffect7(() => {
     if (!isPortalOwner) return;
     const root = rootRef.current;
     if (!root) return;
@@ -14040,7 +14184,7 @@ function Toaster({
       li.style.height = `${slotHeight(idx)}px`;
     }
   }, [isPortalOwner, layoutTick, records, stackGapPx]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!isPortalOwner) return;
     const root = rootRef.current;
     if (!root) return;
@@ -14074,7 +14218,7 @@ function Toaster({
     return null;
   }
   return createPortal7(
-    /* @__PURE__ */ jsx72(
+    /* @__PURE__ */ jsx73(
       "ol",
       {
         ref: rootRef,
@@ -14085,7 +14229,7 @@ function Toaster({
         style: {
           ["--refineui-toast-gap"]: `${stackGapPx}px`
         },
-        children: records.map((rec, index) => /* @__PURE__ */ jsx72(
+        children: records.map((rec, index) => /* @__PURE__ */ jsx73(
           "li",
           {
             ref: (node) => {
@@ -14099,7 +14243,7 @@ function Toaster({
               ["--refineui-toast-z-index"]: String(STACK_Z_BASE - index),
               ["--refineui-toast-stack-index"]: String(index)
             },
-            children: /* @__PURE__ */ jsx72("div", { "data-refineui": "toast-scale-layer", children: /* @__PURE__ */ jsx72(
+            children: /* @__PURE__ */ jsx73("div", { "data-refineui": "toast-scale-layer", children: /* @__PURE__ */ jsx73(
               SwipeableToast,
               {
                 record: rec,
@@ -14124,11 +14268,11 @@ import {
   useCallback as useCallback22,
   useMemo as useMemo21,
   useRef as useRef22,
-  useState as useState29
+  useState as useState30
 } from "react";
 
 // src/components/Tree/context.ts
-import { createContext as createContext26, useEffect as useEffect19, useState as useState28 } from "react";
+import { createContext as createContext26, useEffect as useEffect20, useState as useState29 } from "react";
 import { semanticInteraction as semanticInteraction8 } from "@refineui/tokens";
 import { getReducedMotionQuery as getReducedMotionQuery2 } from "@refineui/utilities/animation";
 var TREE_PANEL_MS = Number.parseFloat(semanticInteraction8.duration.accordionPanel) / 1e3;
@@ -14138,8 +14282,8 @@ var TREE_CONTENT_EASE = semanticInteraction8.easing.content;
 var TreeContext = createContext26(null);
 var TreeItemContext = createContext26(null);
 function usePrefersReducedMotion2() {
-  const [reduce, setReduce] = useState28(false);
-  useEffect19(() => {
+  const [reduce, setReduce] = useState29(false);
+  useEffect20(() => {
     const mql = window.matchMedia(getReducedMotionQuery2().replace("@media ", ""));
     const sync = () => setReduce(mql.matches);
     sync();
@@ -14194,7 +14338,7 @@ var treeItemTypo = {
 };
 
 // src/components/Tree/Tree.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 function Tree({
   size = "md",
   defaultExpanded,
@@ -14208,8 +14352,8 @@ function Tree({
   ...props
 }) {
   const reduceMotion = usePrefersReducedMotion2();
-  const [uncontrolledExpanded, setUncontrolledExpanded] = useState29(() => toExpandedSet(defaultExpanded));
-  const [uncontrolledSelected, setUncontrolledSelected] = useState29(defaultSelected ?? null);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState30(() => toExpandedSet(defaultExpanded));
+  const [uncontrolledSelected, setUncontrolledSelected] = useState30(defaultSelected ?? null);
   const expanded = expandedProp === void 0 ? uncontrolledExpanded : toExpandedSet(expandedProp);
   const selected = selectedProp === void 0 ? uncontrolledSelected : selectedProp;
   const orderRef = useRef22([]);
@@ -14346,7 +14490,7 @@ function Tree({
       toggleExpanded
     ]
   );
-  return /* @__PURE__ */ jsx73(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx74(
     "ul",
     {
       "data-refineui": "tree",
@@ -14360,13 +14504,13 @@ function Tree({
 
 // src/components/Tree/TreeItem.tsx
 import { clsx as clsx101 } from "clsx";
-import { useContext as useContext28, useId as useId16, useMemo as useMemo22, useState as useState30 } from "react";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { useContext as useContext28, useId as useId16, useMemo as useMemo22, useState as useState31 } from "react";
+import { jsx as jsx75 } from "react/jsx-runtime";
 function TreeItem({ value, disabled = false, className, children, ...props }) {
   const tree = useContext28(TreeContext);
   const parent = useContext28(TreeItemContext);
   if (!tree) throw new Error("TreeItem must be used within Tree.");
-  const [hasBranch, setHasBranch] = useState30(false);
+  const [hasBranch, setHasBranch] = useState31(false);
   const uid = useId16().replace(/:/g, "");
   const depth = parent ? parent.depth + 1 : 0;
   const parentValue = parent?.value ?? null;
@@ -14389,7 +14533,7 @@ function TreeItem({ value, disabled = false, className, children, ...props }) {
     }),
     [value, depth, parentValue, expanded, selected, disabled, hasBranch, triggerId, groupId]
   );
-  return /* @__PURE__ */ jsx74(TreeItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(TreeItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx75(
     "li",
     {
       "data-refineui": "tree-item",
@@ -14412,9 +14556,9 @@ function TreeItem({ value, disabled = false, className, children, ...props }) {
 import { clsx as clsx102 } from "clsx";
 import {
   useContext as useContext29,
-  useEffect as useEffect20
+  useEffect as useEffect21
 } from "react";
-import { jsx as jsx75, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs31 } from "react/jsx-runtime";
 function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props }) {
   const tree = useContext29(TreeContext);
   const item = useContext29(TreeItemContext);
@@ -14424,7 +14568,7 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
   const mainStyle = {
     paddingInlineStart: item.depth > 0 ? `calc(${depthIndent} * ${item.depth})` : void 0
   };
-  useEffect20(() => {
+  useEffect21(() => {
     return () => {
       tree.registerItem(item.value, null, {
         parentValue: item.parentValue,
@@ -14500,7 +14644,7 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
         break;
     }
   };
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       ref: setRowRef,
@@ -14519,8 +14663,8 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs30("div", { "data-refineui": "tree-item-main", className: treeStyles.rowMain, style: mainStyle, children: [
-        item.hasBranch ? /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsxs31("div", { "data-refineui": "tree-item-main", className: treeStyles.rowMain, style: mainStyle, children: [
+        item.hasBranch ? /* @__PURE__ */ jsx76(
           "button",
           {
             type: "button",
@@ -14534,10 +14678,10 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
               item.expanded && treeStyles.chevronExpanded,
               tree.reduceMotion && "transition-none"
             ),
-            children: /* @__PURE__ */ jsx75(WebIcon, { name: "chevron-right", size: iconSize, color: "currentColor", fallback: "\u203A" })
+            children: /* @__PURE__ */ jsx76(WebIcon, { name: "chevron-right", size: iconSize, color: "currentColor", fallback: "\u203A" })
           }
-        ) : /* @__PURE__ */ jsx75("span", { className: treeStyles.chevronSpacer, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx75("span", { className: treeStyles.label, children })
+        ) : /* @__PURE__ */ jsx76("span", { className: treeStyles.chevronSpacer, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx76("span", { className: treeStyles.label, children })
       ] })
     }
   );
@@ -14545,14 +14689,14 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
 
 // src/components/Tree/TreeItemContent.tsx
 import { clsx as clsx103 } from "clsx";
-import { useContext as useContext30, useLayoutEffect as useLayoutEffect12 } from "react";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { useContext as useContext30, useLayoutEffect as useLayoutEffect13 } from "react";
+import { jsx as jsx77 } from "react/jsx-runtime";
 function TreeItemContent({ className, children, ...props }) {
   const tree = useContext30(TreeContext);
   const item = useContext30(TreeItemContext);
   if (!tree || !item) throw new Error("TreeItemContent must be used within TreeItem.");
   const { setHasBranch, expanded, groupId, triggerId } = item;
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     setHasBranch(true);
     return () => setHasBranch(false);
   }, [setHasBranch]);
@@ -14567,7 +14711,7 @@ function TreeItemContent({ className, children, ...props }) {
     transition: tree.reduceMotion ? void 0 : `opacity ${TREE_CONTENT_MS}s ${TREE_CONTENT_EASE}, transform ${TREE_CONTENT_MS}s ${TREE_CONTENT_EASE}`,
     pointerEvents: expanded ? void 0 : "none"
   };
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx77(
     "div",
     {
       ref: (el) => {
@@ -14578,7 +14722,7 @@ function TreeItemContent({ className, children, ...props }) {
       "data-refineui": "tree-item-panel",
       "aria-hidden": !expanded,
       style: gridStyle,
-      children: /* @__PURE__ */ jsx76("div", { className: treeStyles.panel, children: /* @__PURE__ */ jsx76("div", { className: treeStyles.panelInner, style: innerMotionStyle, children: /* @__PURE__ */ jsx76(
+      children: /* @__PURE__ */ jsx77("div", { className: treeStyles.panel, children: /* @__PURE__ */ jsx77("div", { className: treeStyles.panelInner, style: innerMotionStyle, children: /* @__PURE__ */ jsx77(
         "ul",
         {
           id: groupId,
@@ -14596,82 +14740,26 @@ function TreeItemContent({ className, children, ...props }) {
 
 // src/components/Tooltip/Tooltip.tsx
 import { clsx as clsx105 } from "clsx";
-import { useId as useId17, useRef as useRef23, useState as useState31 } from "react";
+import { useId as useId17, useRef as useRef23, useState as useState32 } from "react";
+import { borderRadii as borderRadii2 } from "@refineui/tokens";
 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 spacings7, strokeWidths as strokeWidths4 } from "@refineui/tokens";
+import { spacings as spacings8 } 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 = strokeWidths4.strokeWidthThin;
-var gap = spacings7.sizeXSmall;
-var edgeInset = spacings7.sizeMedium;
+var gap = `calc(${componentSizes2.tooltipBeakHeight} + ${spacings8.sizeXXSmall})`;
+var TOOLTIP_BEAK_INSET = spacings8.sizeMedium;
 var tooltipStyles = {
   root: "relative inline-block",
   fallbackTrigger: "inline-flex outline-none",
-  /** Positions the floating stack (beak + panel), like PopOver `floatingRoot`. */
+  /** Positions the floating stack (surface + panel), like PopOver `floatingRoot`. */
   floating: "pointer-events-none absolute z-refineui-popup",
   panelWrap: "relative inline-block max-w-refineui-tooltip-max-width",
-  beakWrap: "pointer-events-none absolute z-[1]",
+  /** Fill, stroke, and shadow come from `FloatingSurface`; the transparent border keeps the box size. */
   panel: clsx104(
     componentTextClass(componentTypographyTokens.tooltip),
-    "relative z-0 box-border max-w-refineui-tooltip-max-width whitespace-nowrap rounded-refineui-medium border-refineui-thin px-refineui-size-medium py-refineui-size-small shadow-refineui-8"
+    "relative z-0 box-border max-w-refineui-tooltip-max-width whitespace-nowrap rounded-refineui-medium border-refineui-thin border-transparent px-refineui-size-medium py-refineui-size-small"
   )
 };
 function tooltipPlacement(position) {
@@ -14692,6 +14780,15 @@ function tooltipAlignKey(align) {
   if (align === "End") return "end";
   return "center";
 }
+var beakSideByPlacement2 = {
+  bottom: "top",
+  top: "bottom",
+  left: "right",
+  right: "left"
+};
+function tooltipBeakSide(position) {
+  return beakSideByPlacement2[tooltipPlacement(position)];
+}
 function tooltipFloatingStyle(position, align) {
   switch (position) {
     case "Top":
@@ -14714,45 +14811,6 @@ function tooltipFloatingStyle(position, align) {
       return {};
   }
 }
-function tooltipBeakWrapperStyle(position, align) {
-  const overlapOffset = `calc(-1 * ${TOOLTIP_BEAK_OFFSET} + ${BEAK_BORDER_OVERLAP2})`;
-  const placement = tooltipPlacement(position);
-  const a = tooltipAlignKey(align);
-  switch (placement) {
-    case "bottom":
-      if (a === "center") return { top: overlapOffset, left: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
-      if (a === "start") return { top: overlapOffset, left: edgeInset };
-      return { top: overlapOffset, right: edgeInset };
-    case "top":
-      if (a === "center") return { bottom: overlapOffset, left: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
-      if (a === "start") return { bottom: overlapOffset, left: edgeInset };
-      return { bottom: overlapOffset, right: edgeInset };
-    case "left":
-      if (a === "center") return { right: overlapOffset, top: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
-      if (a === "start") return { right: overlapOffset, top: edgeInset };
-      return { right: overlapOffset, bottom: edgeInset };
-    case "right":
-      if (a === "center") return { left: overlapOffset, top: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
-      if (a === "start") return { left: overlapOffset, top: edgeInset };
-      return { left: overlapOffset, bottom: edgeInset };
-    default:
-      return {};
-  }
-}
-function tooltipBeakRotateDeg(position) {
-  switch (tooltipPlacement(position)) {
-    case "bottom":
-      return 0;
-    case "top":
-      return 180;
-    case "left":
-      return -90;
-    case "right":
-      return 90;
-    default:
-      return 0;
-  }
-}
 
 // src/components/Tooltip/Tooltip.tsx
 import { jsx as jsx78, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -14768,10 +14826,11 @@ function Tooltip({
   className,
   ...props
 }) {
-  const [innerOpen, setInnerOpen] = useState31(defaultOpen);
+  const [innerOpen, setInnerOpen] = useState32(defaultOpen);
   const open = ctrlOpen !== void 0 ? ctrlOpen : innerOpen;
   const tooltipId = useId17();
   const showTimer = useRef23(null);
+  const panelRef = useRef23(null);
   const setOpen = (next) => {
     if (ctrlOpen === void 0) setInnerOpen(next);
     onOpenChange?.(next);
@@ -14795,8 +14854,6 @@ function Tooltip({
     setOpen(false);
   };
   const floatingStyle = tooltipFloatingStyle(position, align);
-  const beakWrapStyle = tooltipBeakWrapperStyle(position, align);
-  const beakRot = tooltipBeakRotateDeg(position);
   const describedBy = open ? tooltipId : void 0;
   const mergeEl = getMergeableTriggerChild4(trigger);
   let triggerNode;
@@ -14841,36 +14898,32 @@ function Tooltip({
       /* @__PURE__ */ jsx78(
         "div",
         {
-          className: tooltipStyles.beakWrap,
-          style: { ...beakWrapStyle, width: TOOLTIP_BEAK_W, height: TOOLTIP_BEAK_H },
-          "aria-hidden": true,
-          children: /* @__PURE__ */ jsx78(
-            FrostedBeak,
-            {
-              width: TOOLTIP_BEAK_W,
-              height: TOOLTIP_BEAK_H,
-              rotateDeg: beakRot,
-              borderColor: borderCol
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx78(
-        "div",
-        {
+          ref: panelRef,
           id: tooltipId,
           role: "tooltip",
           "data-refineui": "tooltip-panel",
           "data-position": position,
           "data-align": align,
           className: tooltipStyles.panel,
-          style: {
-            backgroundColor: bg,
-            color: fg,
-            borderColor: borderCol
-          },
+          style: { color: fg },
           children: content
         }
+      ),
+      /* @__PURE__ */ jsx78(
+        FloatingSurface,
+        {
+          panelRef,
+          side: tooltipBeakSide(position),
+          align: tooltipAlignKey(align),
+          radius: borderRadii2.roundedMedium,
+          beakWidth: componentSizes2.tooltipBeakWidth,
+          beakHeight: componentSizes2.tooltipBeakHeight,
+          tipRadius: componentSizes2.tooltipBeakTipRadius,
+          beakInsetStart: TOOLTIP_BEAK_INSET,
+          beakInsetEnd: TOOLTIP_BEAK_INSET,
+          backgroundColor: bg,
+          borderColor: borderCol
+        }
       )
     ] }) })
   ] });
@@ -14884,9 +14937,9 @@ import {
   isValidElement as isValidElement7,
   useContext as useContext31,
   useId as useId18,
-  useLayoutEffect as useLayoutEffect13,
+  useLayoutEffect as useLayoutEffect14,
   useMemo as useMemo23,
-  useState as useState32
+  useState as useState33
 } from "react";
 import { opacities } from "@refineui/tokens";
 import { resolveColorTokenValue as resolveColorTokenValue13 } from "@refineui/utilities/color";
@@ -14933,13 +14986,13 @@ var chartStyles = {
 };
 
 // src/components/Chart/utils.ts
-import { borderRadii, foundationSizes as foundationSizes3, spacings as spacings8 } from "@refineui/tokens";
+import { borderRadii as borderRadii3, foundationSizes as foundationSizes3, spacings as spacings9 } from "@refineui/tokens";
 var CHART_VIEWBOX_WIDTH = 800;
 var CHART_VIEWBOX_HEIGHT = 320;
-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_PLOT_PADDING_TOP = parseFloat(spacings9.sizeMedium);
+var CHART_PLOT_PADDING_BOTTOM = parseFloat(spacings9.sizeXXSmall);
+var CHART_PLOT_PADDING_X = parseFloat(spacings9.sizeMedium);
+var CHART_BAR_RADIUS = parseFloat(borderRadii3.roundedXLarge);
 var CHART_BAR_BAND_FILL = 0.5;
 var CHART_POINT_RADIUS = parseFloat(foundationSizes3.foundationSize40);
 var CHART_POINT_STROKE = parseFloat(foundationSizes3.foundationSize20);
@@ -15150,11 +15203,11 @@ function isChartTooltipElement(node) {
   return isValidElement7(node) && node.type === ChartTooltip;
 }
 function Chart({ className, children, ...props }) {
-  const [hoverIndex, setHoverIndex] = useState32(null);
-  const [selectedIndex, setSelectedIndex] = useState32(null);
-  const [pointer, setPointer] = useState32(null);
-  const [labels, setLabels] = useState32([]);
-  const [series, setSeries] = useState32(null);
+  const [hoverIndex, setHoverIndex] = useState33(null);
+  const [selectedIndex, setSelectedIndex] = useState33(null);
+  const [pointer, setPointer] = useState33(null);
+  const [labels, setLabels] = useState33([]);
+  const [series, setSeries] = useState33(null);
   const context = useMemo23(
     () => ({
       hoverIndex,
@@ -15389,7 +15442,7 @@ function ChartBars({
   const barRadius = Math.min(CHART_BAR_RADIUS, barWidth / 2);
   const baselineY = plotBaselineY();
   const trackHeight = plotHeight();
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     setSeries({ values, seriesColor, max, align: "bar" });
   }, [values, seriesColor, max, setSeries]);
   return /* @__PURE__ */ jsxs33("g", { "data-refineui": "chart-bars", "data-series-color": seriesColor, className, ...props, children: [
@@ -15447,7 +15500,7 @@ function ChartLine({
   const baselineY = plotBaselineY();
   const pointRing = pointStrokeColor();
   const linePath = monotoneLinePath(coords);
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     setSeries({ values, seriesColor, max, align: "line" });
   }, [values, seriesColor, max, setSeries]);
   return /* @__PURE__ */ jsxs33("g", { "data-refineui": "chart-line", "data-series-color": seriesColor, className, ...props, children: [
@@ -15516,7 +15569,7 @@ function ChartAxisLabels({
   const { hoverIndex, selectedIndex, setLabels } = useChartContext("ChartAxisLabels");
   const count = labels.length;
   const centerAt = align === "line" ? linePointCenterRatio : barBandCenterRatio;
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     setLabels(labels);
   }, [labels, setLabels]);
   return /* @__PURE__ */ jsx79(
@@ -15593,13 +15646,13 @@ import {
   useCallback as useCallback23,
   useId as useId19,
   useMemo as useMemo24,
-  useState as useState34
+  useState as useState35
 } from "react";
 import { clsx as clsx108 } from "clsx";
 import { Slot as Slot7 } from "@refineui/utilities/react";
 
 // src/components/Collapsible/context.ts
-import { createContext as createContext28, useContext as useContext32, useEffect as useEffect21, useState as useState33 } from "react";
+import { createContext as createContext28, useContext as useContext32, useEffect as useEffect22, useState as useState34 } from "react";
 import { semanticInteraction as semanticInteraction9 } from "@refineui/tokens";
 import { getReducedMotionQuery as getReducedMotionQuery3 } from "@refineui/utilities/animation";
 var CollapsibleContext = createContext28(null);
@@ -15609,8 +15662,8 @@ function useCollapsibleContext(part) {
   return value;
 }
 function usePrefersReducedMotion3() {
-  const [reduce, setReduce] = useState33(false);
-  useEffect21(() => {
+  const [reduce, setReduce] = useState34(false);
+  useEffect22(() => {
     const mql = window.matchMedia(getReducedMotionQuery3().replace("@media ", ""));
     const sync = () => setReduce(mql.matches);
     sync();
@@ -15632,7 +15685,7 @@ var collapsibleStyles = {
 // src/components/Collapsible/Collapsible.tsx
 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 [uncontrolled, setUncontrolled] = useState35(defaultOpen);
   const open = openProp ?? uncontrolled;
   const reactId = useId19();
   const reduceMotion = usePrefersReducedMotion3();
@@ -15741,11 +15794,11 @@ import {
   forwardRef as forwardRef18,
   useCallback as useCallback24,
   useContext as useContext33,
-  useEffect as useEffect22,
-  useLayoutEffect as useLayoutEffect14,
+  useEffect as useEffect23,
+  useLayoutEffect as useLayoutEffect15,
   useMemo as useMemo25,
   useRef as useRef24,
-  useState as useState35
+  useState as useState36
 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { clsx as clsx109 } from "clsx";
@@ -15775,8 +15828,8 @@ function placeInView(element, x, y) {
 }
 function ContextMenu({ modal = true, onOpenChange, children }) {
   void modal;
-  const [open, setOpen] = useState35(false);
-  const [point, setPoint] = useState35({ x: 0, y: 0 });
+  const [open, setOpen] = useState36(false);
+  const [point, setPoint] = useState36({ x: 0, y: 0 });
   const openRef = useRef24(false);
   const onOpenChangeRef = useRef24(onOpenChange);
   openRef.current = open;
@@ -15819,9 +15872,9 @@ function ContextMenuPortal({ children }) {
 var ContextMenuContent = forwardRef18(function ContextMenuContent2({ className, style, onPointerDown, children, ...props }, ref) {
   const { open, point, close } = useMenu();
   const localRef = useRef24(null);
-  const [shouldRender, setShouldRender] = useState35(open);
-  const [isClosing, setIsClosing] = useState35(false);
-  useEffect22(() => {
+  const [shouldRender, setShouldRender] = useState36(open);
+  const [isClosing, setIsClosing] = useState36(false);
+  useEffect23(() => {
     if (open) {
       setShouldRender(true);
       setIsClosing(false);
@@ -15835,11 +15888,11 @@ var ContextMenuContent = forwardRef18(function ContextMenuContent2({ className,
     }, CLOSE_MS);
     return () => window.clearTimeout(timeout);
   }, [open, shouldRender]);
-  useLayoutEffect14(() => {
+  useLayoutEffect15(() => {
     if (!shouldRender || !localRef.current) return;
     placeInView(localRef.current, point.x, point.y);
   }, [shouldRender, point.x, point.y]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!open) return;
     const onKey = (event) => {
       if (event.key === "Escape") close();
@@ -15981,14 +16034,14 @@ function ContextMenuLabel({ className, children, ...props }) {
   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);
+  const [open, setOpen] = useState36(false);
   const triggerRef = useRef24(null);
   const timer = useRef24(null);
   const clear = () => {
     if (timer.current != null) window.clearTimeout(timer.current);
     timer.current = null;
   };
-  useEffect22(() => clear, []);
+  useEffect23(() => clear, []);
   const value = useMemo25(
     () => ({
       open,
@@ -16076,8 +16129,8 @@ var ContextMenuSubContent = forwardRef18(
   function ContextMenuSubContent2({ className, style, onPointerDown, onMouseEnter, onMouseLeave, ...props }, ref) {
     const sub = useSub2();
     const localRef = useRef24(null);
-    const [side, setSide] = useState35("right");
-    useLayoutEffect14(() => {
+    const [side, setSide] = useState36("right");
+    useLayoutEffect15(() => {
       const trigger = sub.triggerRef.current;
       const element = localRef.current;
       if (!sub.open || !trigger || !element) return;