@refineui/react 0.1.1 → 0.2.0

package/dist/index.js

@@ -787,7 +787,12 @@ var componentTypographyTokens = {
   /** Command palette — same scale as Menu (list / section / shortcut). */
   command: {
     group: role("captionLg"),
-    item: role("bodyMd"),
+    /** Row text follows the Command size, like Tree rows. */
+    item: {
+      sm: role("bodySm"),
+      md: role("bodyMd"),
+      lg: role("bodyLg")
+    },
     empty: role("bodyXs"),
     shortcut: role("bodyXs"),
     input: role("bodyMd")
@@ -1319,10 +1324,20 @@ var radius = {
   md: "rounded-refineui-x-large",
   lg: "rounded-refineui-xx-large"
 };
+var paddingInline = {
+  sm: "px-refineui-size-medium",
+  md: "px-refineui-size-large",
+  lg: "px-refineui-size-x-large"
+};
+var paddingBlock = {
+  sm: "py-refineui-size-x-small",
+  md: "py-refineui-size-medium",
+  lg: "py-refineui-size-large"
+};
 var padding = {
-  sm: "px-refineui-size-medium py-refineui-size-x-small",
-  md: "px-refineui-size-large py-refineui-size-medium",
-  lg: "px-refineui-size-x-large py-refineui-size-large"
+  sm: [paddingInline.sm, paddingBlock.sm].join(" "),
+  md: [paddingInline.md, paddingBlock.md].join(" "),
+  lg: [paddingInline.lg, paddingBlock.lg].join(" ")
 };
 var typography = {
   sm: sizedComponentTextClass(componentTypographyTokens.formControl, "sm"),
@@ -1340,6 +1355,11 @@ var formControlShellSizeClass = {
   md: [fixedHeight.md, radius.md, padding.md, typography.md].join(" "),
   lg: [fixedHeight.lg, radius.lg, padding.lg, typography.lg].join(" ")
 };
+var formControlRowShellSizeClass = {
+  sm: [fixedHeight.sm, radius.sm, paddingInline.sm].join(" "),
+  md: [fixedHeight.md, radius.md, paddingInline.md].join(" "),
+  lg: [fixedHeight.lg, radius.lg, paddingInline.lg].join(" ")
+};
 var formControlShellHeightClass = {
   sm: [fixedHeight.sm, radius.sm].join(" "),
   md: [fixedHeight.md, radius.md].join(" "),
@@ -1429,7 +1449,7 @@ var inputOtpStyles = {
     "inline-flex shrink-0 cursor-text items-center justify-center",
     "border-refineui-thin border-transparent",
     // Soft grey tile (not white) so cells read on light preview / page.
-    "bg-refineui-alias-background-surface-selected",
+    "bg-refineui-alias-background-surface-hover",
     "text-center tabular-nums",
     "text-refineui-alias-foreground-primary",
     "transition-[background-color,border-color]",
@@ -1719,22 +1739,27 @@ import {
 
 // src/components/SearchField/style.ts
 import { iconSizes as iconSizes2 } from "@refineui/tokens";
-var searchFieldLeadingIconSize = iconSizes2.medium;
-var searchFieldClearIconSize = iconSizes2.small;
+var searchFieldLeadingIconSize = {
+  sm: iconSizes2.small,
+  md: iconSizes2.medium,
+  lg: iconSizes2.large
+};
+var searchFieldClearIconSize = {
+  sm: iconSizes2.xsmall,
+  md: iconSizes2.small,
+  lg: iconSizes2.small
+};
 var searchFieldStyles = {
   root: [
     "box-border flex w-full min-w-0 items-center gap-refineui-size-x-small overflow-hidden outline-none",
-    formControlTypoClass.md,
     "transition-[background-color,border-color]",
     "duration-[var(--refineui-motion-duration-fast)]",
     "ease-[var(--refineui-motion-easing-emphasized)]"
   ].join(" "),
   rootFilled: [
-    "h-refineui-control-height-md min-h-refineui-control-height-md",
-    "rounded-refineui-x-large px-refineui-size-large",
     "border-refineui-thin border-transparent",
     /** Same soft plate as InputOTP slots */
-    "bg-refineui-alias-background-surface-selected"
+    "bg-refineui-alias-background-surface-hover"
   ].join(" "),
   rootPlain: [
     "h-auto min-h-0 rounded-none border-none bg-transparent px-0 py-0"
@@ -1747,6 +1772,8 @@ var searchFieldStyles = {
   clear: "inline-flex shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 leading-none text-refineui-alias-foreground-tertiary",
   clearDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled"
 };
+var searchFieldFilledSizeClass = formControlRowShellSizeClass;
+var searchFieldTypoClass = formControlTypoClass;
 
 // src/components/SearchField/SearchField.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
@@ -1777,6 +1804,7 @@ function SearchField({
   onValueChange,
   disabled = false,
   appearance = "filled",
+  size: sizeProp,
   className,
   children,
   id,
@@ -1784,6 +1812,8 @@ function SearchField({
   "aria-label": ariaLabel = "Search",
   ...props
 }) {
+  const fieldSize = useOptionalFieldSize();
+  const size = sizeProp ?? fieldSize ?? "md";
   const [query, setQuery] = useControllableString(value, defaultValue, onValueChange);
   const inputRef = useRef2(null);
   const reactId = useId2();
@@ -1798,11 +1828,12 @@ function SearchField({
       setValue: setQuery,
       clear,
       disabled,
+      size,
       inputId,
       inputLabel: ariaLabel,
       inputRef
     }),
-    [ariaLabel, clear, disabled, inputId, query, setQuery]
+    [ariaLabel, clear, disabled, size, inputId, query, setQuery]
   );
   const handlePointerDown = (event) => {
     onPointerDown?.(event);
@@ -1818,10 +1849,12 @@ function SearchField({
     {
       "data-refineui": "search-field",
       "data-appearance": appearance,
+      "data-size": size,
       "data-disabled": disabled || void 0,
       className: clsx6(
         searchFieldStyles.root,
-        appearance === "plain" ? searchFieldStyles.rootPlain : searchFieldStyles.rootFilled,
+        searchFieldTypoClass[size],
+        appearance === "plain" ? searchFieldStyles.rootPlain : [searchFieldStyles.rootFilled, searchFieldFilledSizeClass[size]],
         disabled && (appearance === "plain" ? searchFieldStyles.rootPlainDisabled : searchFieldStyles.rootDisabled),
         className
       ),
@@ -1832,7 +1865,7 @@ function SearchField({
   ) });
 }
 function SearchFieldIcon({ children, className, ...props }) {
-  const { disabled } = useSearchFieldContext("SearchFieldIcon");
+  const { disabled, size } = useSearchFieldContext("SearchFieldIcon");
   return /* @__PURE__ */ jsx5(
     "span",
     {
@@ -1848,7 +1881,7 @@ function SearchFieldIcon({ children, className, ...props }) {
         WebIcon,
         {
           name: "search",
-          size: searchFieldLeadingIconSize,
+          size: searchFieldLeadingIconSize[size],
           color: "currentColor",
           "aria-hidden": true
         }
@@ -1911,7 +1944,7 @@ function SearchFieldClear({
   "aria-label": ariaLabel = "Clear search",
   ...props
 }) {
-  const { value, clear, disabled } = useSearchFieldContext("SearchFieldClear");
+  const { value, clear, disabled, size } = useSearchFieldContext("SearchFieldClear");
   const isDisabled = disabledProp ?? disabled;
   if (value.length === 0) return null;
   return /* @__PURE__ */ jsx5(
@@ -1936,7 +1969,7 @@ function SearchFieldClear({
         WebIcon,
         {
           name: "dismiss",
-          size: searchFieldClearIconSize,
+          size: searchFieldClearIconSize[size],
           color: "currentColor",
           iconStyle: "filled",
           "aria-hidden": true
@@ -2504,6 +2537,7 @@ import { useComposedRefs } from "@refineui/utilities/react";
 import { clsx as clsx24 } from "clsx";
 import { spacings } from "@refineui/tokens";
 var SCROLL_AREA_THUMB_MIN_PX = Number.parseFloat(spacings.sizeXLarge);
+var SCROLL_EDGE_FALLOFF_RATIO = 0.25;
 var scrollAreaStyles = {
   root: "box-border min-h-0 min-w-0 overflow-hidden outline-none",
   /**
@@ -2579,6 +2613,15 @@ function readMetrics(viewport) {
 function isScrollable(metrics) {
   return metrics.scrollSize > metrics.clientSize + 1;
 }
+function resolveEdgeFactors(metrics) {
+  const zone = metrics.clientSize * SCROLL_EDGE_FALLOFF_RATIO;
+  if (!isScrollable(metrics) || zone <= 0) return { top: 0, bottom: 0 };
+  const hiddenBelow = metrics.scrollSize - metrics.clientSize - metrics.scrollOffset;
+  return {
+    top: Math.min(1, Math.max(0, metrics.scrollOffset / zone)),
+    bottom: Math.min(1, Math.max(0, hiddenBelow / zone))
+  };
+}
 function resolveThumbGeometry(metrics, trackSize, minThumb) {
   if (trackSize <= 0 || metrics.scrollSize <= 0) {
     return { thumbSize: 0, offset: 0 };
@@ -2599,6 +2642,8 @@ var ScrollArea = forwardRef4(function ScrollArea2({
   children,
   ...props
 }, ref) {
+  const rootRef = useRef4(null);
+  const composedRootRef = useComposedRefs(rootRef, ref);
   const viewportRef = useRef4(null);
   const [viewportEpoch, setViewportEpoch] = useState4(0);
   const [vertical, setVertical] = useState4(EMPTY_METRICS);
@@ -2626,6 +2671,12 @@ var ScrollArea = forwardRef4(function ScrollArea2({
     const next = readMetrics(viewport);
     setVertical(next.vertical);
     setHorizontal(next.horizontal);
+    const root = rootRef.current;
+    if (root) {
+      const edges = resolveEdgeFactors(next.vertical);
+      root.style.setProperty("--refineui-scroll-edge-top", String(edges.top));
+      root.style.setProperty("--refineui-scroll-edge-bottom", String(edges.bottom));
+    }
   }, []);
   const markScrolling = useCallback3(() => {
     setScrolling(true);
@@ -2692,7 +2743,7 @@ var ScrollArea = forwardRef4(function ScrollArea2({
   return /* @__PURE__ */ jsx20(ScrollAreaContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx20(
     "div",
     {
-      ref,
+      ref: composedRootRef,
       "data-refineui": "scroll-area",
       "data-type": type,
       "data-scrolling": scrolling || void 0,
@@ -3658,7 +3709,7 @@ function SelectGroup({ children, className, ...props }) {
   return /* @__PURE__ */ jsx22("div", { role: "group", className: clsx28(selectStyles.group, className), ...props, children });
 }
 function SelectLabel({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx22("div", { className: clsx28(selectStyles.label, className), ...props, children });
+  return /* @__PURE__ */ jsx22("div", { "data-scroll-edge-item": true, className: clsx28(selectStyles.label, className), ...props, children });
 }
 function SelectSeparator({ className, ...props }) {
   return /* @__PURE__ */ jsx22("div", { role: "separator", className: clsx28(selectStyles.separator, className), ...props });
@@ -3705,6 +3756,7 @@ function SelectItem({
       "aria-selected": isSelected,
       "aria-disabled": disabled,
       "data-refineui": "select-item",
+      "data-scroll-edge-item": true,
       "data-selected": isSelected ? true : void 0,
       "data-state": pressed ? "pressed" : isSelected ? "selected" : void 0,
       "data-highlighted": isHighlighted ? "" : void 0,
@@ -3968,7 +4020,6 @@ import {
   useRef as useRef8,
   useState as useState7
 } from "react";
-import { iconSizes as iconSizes7 } from "@refineui/tokens";
 
 // src/components/Dialog/Dialog.tsx
 import { clsx as clsx32 } from "clsx";
@@ -4302,37 +4353,45 @@ function DialogClose({ className, onClick, type = "button", ...props }) {
 
 // src/components/Command/style.ts
 import { clsx as clsx33 } from "clsx";
-import { foundationSizes as foundationSizes2 } from "@refineui/tokens";
+import { foundationSizes as foundationSizes2, iconSizes as iconSizes7 } from "@refineui/tokens";
 var COMMAND_LIST_MAX_HEIGHT = `min(60vh, ${foundationSizes2.foundationSize3200})`;
 var commandStyles = {
-  root: clsx33(
-    "flex w-full flex-col overflow-hidden outline-none",
-    "rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default",
-    "bg-refineui-alias-background-primary text-refineui-alias-foreground-primary",
-    "shadow-refineui-2"
-  ),
-  /** Nested inside Dialog panel — Dialog already supplies radius / elevation */
-  rootInDialog: "min-h-0 w-full flex-col overflow-hidden rounded-none border-none shadow-none",
+  /** Detached layout: the search field and the results panel are separate surfaces, so the root has none. */
+  root: "flex w-full flex-col gap-refineui-size-small text-refineui-alias-foreground-primary outline-none",
+  rootInDialog: "min-h-0 w-full",
+  /** Dialog panel stays transparent — the field and results panel float on the scrim themselves. */
   dialogContentPanel: {
     padding: 0,
-    overflow: "hidden"
+    overflow: "visible",
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    borderRadius: 0
   },
-  dialogBody: "flex min-h-0 w-full flex-col overflow-hidden",
-  inputWrap: "shrink-0 p-refineui-size-medium",
-  /** Fixed list height — command palettes need an explicit cap (not content-sized flex). */
-  listShell: "box-border w-full overflow-hidden",
+  dialogBody: "flex min-h-0 w-full flex-col",
+  inputWrap: "shrink-0",
+  /**
+   * Results surface. Height is measured from the results (animated in refineui.css), capped by `maxHeight`.
+   * Radius comes from `--refineui-command-list-radius` (per size, refineui.css) so the scrollbar inset can share it.
+   */
+  listShell: clsx33(
+    "box-border w-full overflow-hidden",
+    "border-refineui-hairline border-refineui-alias-border-default",
+    "bg-refineui-alias-background-primary shadow-refineui-2"
+  ),
   list: "h-full min-h-0 w-full",
-  listShellHeight: {
-    height: COMMAND_LIST_MAX_HEIGHT,
+  listShellMaxHeight: {
     maxHeight: COMMAND_LIST_MAX_HEIGHT
   },
   listViewport: "outline-none",
-  listInner: "flex flex-col gap-refineui-size-xxx-small px-refineui-size-medium py-refineui-size-small",
+  listInner: "relative flex flex-col gap-refineui-size-xxx-small px-refineui-size-medium py-refineui-size-small",
+  /** Sliding highlight behind the selected item; geometry is measured, so physical `left`/`top` (inline) are intentional. */
+  indicator: "pointer-events-none absolute rounded-refineui-large bg-refineui-alias-background-surface-hover",
   empty: clsx33(
     componentTextClass(componentTypographyTokens.command.empty),
     "px-refineui-size-medium py-refineui-size-xx-large text-center text-refineui-alias-foreground-tertiary"
   ),
-  group: "flex flex-col gap-refineui-size-xxx-small overflow-hidden",
+  /** `overflow-clip`, not hidden: a hidden group would become the scroll container the edge effect tracks. */
+  group: "flex flex-col gap-refineui-size-xxx-small overflow-clip",
   groupHeading: clsx33(
     componentTextClass(componentTypographyTokens.command.group),
     "flex w-full items-center overflow-hidden px-refineui-size-x-small py-refineui-size-xxx-small text-refineui-alias-foreground-tertiary"
@@ -4340,9 +4399,8 @@ var commandStyles = {
   separatorWrap: "flex w-full items-center px-refineui-size-x-small py-refineui-size-x-small",
   separatorLine: "h-px w-full shrink-0 bg-refineui-alias-border-default",
   itemBase: clsx33(
-    componentTextClass(componentTypographyTokens.command.item),
-    "flex w-full items-center gap-refineui-size-x-small rounded-refineui-large border-none bg-transparent",
-    "px-refineui-size-x-small py-refineui-size-small text-start outline-none"
+    "relative flex w-full items-center gap-refineui-size-x-small rounded-refineui-large border-none bg-transparent",
+    "px-refineui-size-x-small text-start outline-none"
   ),
   itemDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   itemEnabled: "cursor-pointer text-refineui-alias-foreground-primary",
@@ -4354,6 +4412,16 @@ var commandStyles = {
     "shrink-0 tracking-wide text-refineui-alias-foreground-tertiary"
   )
 };
+var commandItemSizeClass = {
+  sm: clsx33(sizedComponentTextClass(componentTypographyTokens.command.item, "sm"), "py-refineui-size-xx-small"),
+  md: clsx33(sizedComponentTextClass(componentTypographyTokens.command.item, "md"), "py-refineui-size-small"),
+  lg: clsx33(sizedComponentTextClass(componentTypographyTokens.command.item, "lg"), "py-refineui-size-medium")
+};
+var commandItemIconSize = {
+  sm: iconSizes7.xsmall,
+  md: iconSizes7.small,
+  lg: iconSizes7.medium
+};
 
 // src/components/Command/Command.tsx
 import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -4389,6 +4457,7 @@ function useControllableString2(controlled, defaultValue, onChange) {
 function Command({
   children,
   className,
+  size = "md",
   value,
   defaultValue,
   onValueChange,
@@ -4507,6 +4576,7 @@ function Command({
   );
   const ctx = useMemo6(
     () => ({
+      size,
       search,
       setSearch,
       shouldFilter,
@@ -4524,6 +4594,7 @@ function Command({
       groupHasVisibleItems
     }),
     [
+      size,
       search,
       setSearch,
       shouldFilter,
@@ -4545,6 +4616,7 @@ function Command({
     "div",
     {
       "data-refineui": "command",
+      "data-size": size,
       role: "presentation",
       className: clsx34(commandStyles.root, className),
       onKeyDown: (event) => {
@@ -4596,17 +4668,19 @@ function CommandDialog({
     Command,
     {
       ...commandProps,
+      size: commandProps?.size ?? "lg",
       className: clsx34(commandStyles.rootInDialog, commandProps?.className),
       children
     }
   ) }) }) });
 }
 var CommandInput = forwardRef8(function CommandInput2({ className, startIcon, placeholder = "Type a command or search\u2026", disabled, onKeyDown, ...props }, ref) {
-  const { search, setSearch, listId, label, selectedValue } = useCommandContext("CommandInput");
+  const { size, search, setSearch, listId, label, selectedValue } = useCommandContext("CommandInput");
   const activeDescendantId = selectedValue ? `${listId}-item-${cssEscape(selectedValue)}` : void 0;
   return /* @__PURE__ */ jsx26("div", { "data-refineui": "command-input", className: commandStyles.inputWrap, children: /* @__PURE__ */ jsxs7(
     SearchField,
     {
+      size,
       value: search,
       onValueChange: setSearch,
       disabled,
@@ -4635,14 +4709,90 @@ var CommandInput = forwardRef8(function CommandInput2({ className, startIcon, pl
     }
   ) });
 });
+var HIDDEN_INDICATOR = { top: 0, left: 0, width: 0, height: 0, ready: false };
+var SELECTED_ITEM_SELECTOR = '[data-refineui="command-item"][data-selected="true"]';
+function sameIndicatorBox(a, b) {
+  return a.ready === b.ready && a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;
+}
 function CommandList({ className, children, ...props }) {
-  const { listId } = useCommandContext("CommandList");
+  const { listId, selectedValue, search, visibleCount } = useCommandContext("CommandList");
+  const shellRef = useRef8(null);
+  const innerRef = useRef8(null);
+  const [contentHeight, setContentHeight] = useState7(null);
+  const [indicator, setIndicator] = useState7(HIDDEN_INDICATOR);
+  const [animate, setAnimate] = useState7(false);
+  const [snap, setSnap] = useState7(false);
+  const lastSearchRef = useRef8(search);
+  const measure = useCallback6(() => {
+    const inner = innerRef.current;
+    const shell = shellRef.current;
+    if (!inner || !shell) return;
+    const shellStyle = getComputedStyle(shell);
+    const height = inner.offsetHeight + parseFloat(shellStyle.borderTopWidth) + parseFloat(shellStyle.borderBottomWidth);
+    setContentHeight((prev) => prev === height ? prev : height);
+    const selected = inner.querySelector(SELECTED_ITEM_SELECTOR);
+    setIndicator((prev) => {
+      const next = selected ? {
+        top: selected.offsetTop,
+        left: selected.offsetLeft,
+        width: selected.offsetWidth,
+        height: selected.offsetHeight,
+        ready: true
+      } : { ...prev, ready: false };
+      return sameIndicatorBox(prev, next) ? prev : next;
+    });
+  }, []);
+  useIsomorphicLayoutEffect2(() => {
+    if (lastSearchRef.current !== search) {
+      lastSearchRef.current = search;
+      setSnap(true);
+    }
+    measure();
+  }, [measure, selectedValue, search, visibleCount, children]);
+  useEffect5(() => {
+    if (!snap) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setSnap(false));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [snap]);
+  useEffect5(() => {
+    const inner = innerRef.current;
+    if (!inner || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(inner);
+    return () => observer.disconnect();
+  }, [measure]);
+  const measured = contentHeight !== null;
+  useEffect5(() => {
+    if (!measured || animate) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [measured, animate]);
+  const indicatorStyle = {
+    top: indicator.top,
+    left: indicator.left,
+    width: indicator.width,
+    height: indicator.height
+  };
   return /* @__PURE__ */ jsx26(
     "div",
     {
+      ref: shellRef,
       "data-refineui": "command-list",
+      "data-animate": animate ? "true" : void 0,
       className: commandStyles.listShell,
-      style: commandStyles.listShellHeight,
+      style: { ...commandStyles.listShellMaxHeight, height: contentHeight ?? void 0 },
       children: /* @__PURE__ */ jsx26(
         ScrollAreaRegion,
         {
@@ -4650,7 +4800,21 @@ function CommandList({ className, children, ...props }) {
           className: clsx34(commandStyles.list, className),
           viewportClassName: commandStyles.listViewport,
           ...props,
-          children: /* @__PURE__ */ jsx26("div", { id: listId, role: "listbox", className: commandStyles.listInner, children })
+          children: /* @__PURE__ */ jsxs7("div", { ref: innerRef, id: listId, role: "listbox", className: commandStyles.listInner, children: [
+            /* @__PURE__ */ jsx26(
+              "div",
+              {
+                "data-refineui": "command-indicator",
+                "data-ready": indicator.ready ? "true" : void 0,
+                "data-animate": animate && !snap ? "true" : void 0,
+                "data-scroll-edge-item": true,
+                "aria-hidden": true,
+                className: commandStyles.indicator,
+                style: indicatorStyle
+              }
+            ),
+            children
+          ] })
         }
       )
     }
@@ -4695,6 +4859,7 @@ function CommandGroupHeading({ className, children, ...props }) {
     "div",
     {
       "data-refineui": "command-group-heading",
+      "data-scroll-edge-item": true,
       className: clsx34(commandStyles.groupHeading, className),
       ...props,
       children
@@ -4778,6 +4943,7 @@ var CommandItem = forwardRef8(function CommandItem2({
   ...props
 }, forwardedRef) {
   const {
+    size,
     selectedValue,
     setSelectedValue,
     listId,
@@ -4785,6 +4951,7 @@ var CommandItem = forwardRef8(function CommandItem2({
     isItemVisible,
     selectById
   } = useCommandContext("CommandItem");
+  const iconSize = commandItemIconSize[size];
   const group = useContext7(CommandGroupContext);
   const itemId = useId6();
   const nodeRef = useRef8(null);
@@ -4828,11 +4995,13 @@ var CommandItem = forwardRef8(function CommandItem2({
       "aria-selected": isSelected,
       disabled,
       "data-refineui": "command-item",
+      "data-scroll-edge-item": true,
       "data-state": disabled ? "disabled" : isSelected ? "active" : "default",
       "data-selected": isSelected || void 0,
       "data-disabled": disabled || void 0,
       className: clsx34(
         commandStyles.itemBase,
+        commandItemSizeClass[size],
         disabled ? commandStyles.itemDisabled : commandStyles.itemEnabled,
         className
       ),
@@ -4852,9 +5021,9 @@ var CommandItem = forwardRef8(function CommandItem2({
           {
             className: commandStyles.iconWrap,
             style: {
-              width: iconSizes7.small,
-              minWidth: iconSizes7.small,
-              height: iconSizes7.small
+              width: iconSize,
+              minWidth: iconSize,
+              height: iconSize
             },
             children: startIcon
           }
@@ -4868,9 +5037,9 @@ var CommandItem = forwardRef8(function CommandItem2({
             {
               className: commandStyles.iconWrap,
               style: {
-                width: iconSizes7.small,
-                minWidth: iconSizes7.small,
-                height: iconSizes7.small
+                width: iconSize,
+                minWidth: iconSize,
+                height: iconSize
               },
               children: endIcon
             }
@@ -8981,6 +9150,7 @@ function DropdownLabel({ className, ...props }) {
     {
       role: "presentation",
       "data-refineui": "dropdown-menu-label",
+      "data-scroll-edge-item": true,
       className: clsx70(dropdownStyles.label, className),
       ...props
     }
@@ -9010,6 +9180,7 @@ function DropdownItem({
       type: "button",
       role: "menuitem",
       "data-refineui": "dropdown-item",
+      "data-scroll-edge-item": true,
       "data-selected": selected || void 0,
       "data-state": pressed ? "pressed" : selected ? "selected" : void 0,
       disabled,
@@ -9187,6 +9358,7 @@ function DropdownSubTrigger({
       "aria-expanded": open,
       disabled: isDisabled,
       "data-refineui": "dropdown-item",
+      "data-scroll-edge-item": true,
       "data-slot": "dropdown-menu-sub-trigger",
       tabIndex: -1,
       className: clsx70(
@@ -10692,6 +10864,7 @@ function NavigationMenuIndicator({ className, style, ...props }) {
 
 // src/components/Sidebar/Sidebar.tsx
 import { clsx as clsx80 } from "clsx";
+import { createContext as createContext19, useContext as useContext21 } from "react";
 
 // src/components/Sidebar/style.ts
 import { clsx as clsx79 } from "clsx";
@@ -10710,7 +10883,9 @@ var sidebarStyles = {
     componentTextClass(componentTypographyTokens.sidebar.brand),
     "m-0 flex min-w-0 items-center gap-refineui-size-small text-refineui-alias-foreground-primary"
   ),
-  content: "flex min-h-0 flex-1 flex-col overflow-y-auto px-refineui-size-medium py-refineui-size-medium",
+  /** Scrolls through a built-in ScrollArea; padding sits inside the viewport so rows scroll under the edges. */
+  content: "flex min-h-0 flex-1 flex-col",
+  contentViewport: "box-border px-refineui-size-medium py-refineui-size-medium",
   nav: "flex min-h-0 flex-col gap-refineui-size-x-large",
   group: "flex min-w-0 flex-col gap-refineui-size-xx-small",
   groupLabel: clsx79(
@@ -10735,6 +10910,7 @@ var sidebarStyles = {
 
 // src/components/Sidebar/Sidebar.tsx
 import { jsx as jsx60 } from "react/jsx-runtime";
+var SidebarScrollContext = createContext19(false);
 function Sidebar({ className, ...props }) {
   return /* @__PURE__ */ jsx60(
     "aside",
@@ -10765,13 +10941,14 @@ function SidebarBrand({ className, ...props }) {
     }
   );
 }
-function SidebarContent({ className, ...props }) {
+function SidebarContent({ className, children, ...props }) {
   return /* @__PURE__ */ jsx60(
     "div",
     {
       "data-refineui": "sidebar-content",
       className: clsx80(sidebarStyles.content, className),
-      ...props
+      ...props,
+      children: /* @__PURE__ */ jsx60(ScrollAreaRegion, { type: "hover", viewportClassName: sidebarStyles.contentViewport, children: /* @__PURE__ */ jsx60(SidebarScrollContext.Provider, { value: true, children }) })
     }
   );
 }
@@ -10797,10 +10974,12 @@ function SidebarGroup({ className, ...props }) {
   );
 }
 function SidebarGroupLabel({ className, ...props }) {
+  const inScroll = useContext21(SidebarScrollContext);
   return /* @__PURE__ */ jsx60(
     "p",
     {
       "data-refineui": "sidebar-group-label",
+      "data-scroll-edge-item": inScroll || void 0,
       className: clsx80(sidebarStyles.groupLabel, className),
       ...props
     }
@@ -10813,10 +10992,12 @@ function SidebarLink({
   ...props
 }) {
   const disabled = ariaDisabled === true || ariaDisabled === "true";
+  const inScroll = useContext21(SidebarScrollContext);
   return /* @__PURE__ */ jsx60(
     "a",
     {
       "data-refineui": "sidebar-link",
+      "data-scroll-edge-item": inScroll || void 0,
       "data-active": active || void 0,
       "aria-current": active ? "page" : void 0,
       "aria-disabled": disabled || void 0,
@@ -10845,9 +11026,9 @@ function SidebarFooter({ className, ...props }) {
 // src/components/Sidebar/SidebarPeek.tsx
 import { clsx as clsx82 } from "clsx";
 import {
-  createContext as createContext19,
+  createContext as createContext20,
   useCallback as useCallback15,
-  useContext as useContext21,
+  useContext as useContext22,
   useEffect as useEffect14,
   useMemo as useMemo15,
   useRef as useRef16,
@@ -10882,9 +11063,9 @@ import { jsx as jsx61 } from "react/jsx-runtime";
 var PEEK_OPEN_DELAY_MS = motionMsToNumber5(semanticInteraction7.duration.medium);
 var PEEK_CLOSE_DELAY_MS = motionMsToNumber5(semanticInteraction7.duration.medium);
 var PEEK_BRIDGE_DELAY_MS = motionMsToNumber5(semanticInteraction7.duration.slow);
-var SidebarPeekContext = createContext19(null);
+var SidebarPeekContext = createContext20(null);
 function useSidebarPeekContext(component) {
-  const ctx = useContext21(SidebarPeekContext);
+  const ctx = useContext22(SidebarPeekContext);
   if (!ctx) throw new Error(`${component} must be used within <SidebarPeek>.`);
   return ctx;
 }
@@ -11133,19 +11314,19 @@ function useSidebarPeek() {
 
 // src/components/Sidebar/SidebarProvider.tsx
 import {
-  createContext as createContext20,
+  createContext as createContext21,
   forwardRef as forwardRef14,
   useCallback as useCallback16,
-  useContext as useContext22,
+  useContext as useContext23,
   useId as useId13,
   useMemo as useMemo16,
   useState as useState20
 } from "react";
 import { Slot as Slot3 } from "@refineui/utilities/react";
 import { jsx as jsx62 } from "react/jsx-runtime";
-var SidebarContext = createContext20(null);
+var SidebarContext = createContext21(null);
 function useSidebarContext(component) {
-  const value = useContext22(SidebarContext);
+  const value = useContext23(SidebarContext);
   if (!value) throw new Error(`${component} must be used within <SidebarProvider>.`);
   return value;
 }
@@ -11321,28 +11502,238 @@ function Pagination(props) {
 // src/components/PopOver/PopOver.tsx
 import { clsx as clsx85 } from "clsx";
 import {
-  createContext as createContext21,
+  createContext as createContext22,
   useCallback as useCallback17,
-  useContext as useContext23,
-  useEffect as useEffect15,
+  useContext as useContext24,
+  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.strokeWidthHairline);
+function svgPathMask(shape, width, height, bleed) {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width + bleed * 2}" height="${height + bleed * 2}"><path transform="translate(${bleed} ${bleed})" d="${shape}"/></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+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 holeMask = `linear-gradient(black 0 0), ${svgPathMask(shape, box.width, box.height, SHADOW_BLEED)}`;
+  const surfaceMask = svgPathMask(shape, box.width, box.height, 0);
+  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 surfaceStyle = {
+    backgroundColor,
+    maskImage: surfaceMask,
+    WebkitMaskImage: surfaceMask,
+    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: surfaceStyle }),
+    /* @__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-hairline border-transparent outline-none"
 };
 function popoverFloatingClasses(placement, align) {
   if (placement === "bottom") {
@@ -11366,58 +11757,22 @@ function popoverFloatingClasses(placement, align) {
 }
 
 // src/components/PopOver/PopOver.tsx
-import { jsx as jsx64, jsxs as jsxs24 } from "react/jsx-runtime";
-var PopoverContext = createContext21(null);
+import { jsx as jsx65, jsxs as jsxs25 } from "react/jsx-runtime";
+var PopoverContext = createContext22(null);
 function usePopoverContext(component) {
-  const ctx = useContext23(PopoverContext);
+  const ctx = useContext24(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 +11780,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 +11794,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 +11830,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 +11846,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 +11868,7 @@ function PopoverTrigger({ children, className, ...props }) {
     );
   }
   const passthroughBtn = props;
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     "button",
     {
       type: "button",
@@ -11552,11 +11907,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 +11918,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 +11930,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 +11969,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 +11987,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 +12019,7 @@ function Skeleton({
     w = width ?? "100%";
   }
   const dimStyle = { width: w, height: h };
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     "div",
     {
       "data-refineui": "skeleton",
@@ -11699,7 +12037,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 +12045,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 +12063,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",
@@ -11770,16 +12108,16 @@ import { iconSizes as iconSizes18 } from "@refineui/tokens";
 import {
   Children as Children6,
   cloneElement as cloneElement2,
-  createContext as createContext22,
+  createContext as createContext23,
   forwardRef as forwardRef15,
   isValidElement as isValidElement5,
   useCallback as useCallback18,
-  useContext as useContext24,
-  useEffect as useEffect16,
-  useLayoutEffect as useLayoutEffect9,
+  useContext as useContext25,
+  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
@@ -11804,19 +12142,19 @@ var carouselStyles = {
   ),
   indicatorThumb: clsx88(
     "pointer-events-none absolute top-refineui-size-xxx-small bottom-refineui-size-xxx-small start-refineui-size-xxx-small z-0",
-    "rounded-refineui-circle bg-refineui-alias-background-brand shadow-refineui-2",
-    "transition-transform duration-[var(--refineui-motion-duration-medium)] ease-[var(--refineui-motion-easing-emphasized)]"
+    /* Motion lives in refineui.css, gated by `data-animate`. */
+    "rounded-refineui-circle bg-refineui-alias-background-brand shadow-refineui-2"
   ),
   indicatorHitRow: "relative z-[1] flex h-full w-full",
   indicatorHit: "h-full min-w-0 flex-1 cursor-pointer border-none bg-transparent p-0 outline-none"
 };
 
 // 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);
+var CarouselContext = createContext23(null);
 function useCarouselContext(component) {
-  const v = useContext24(CarouselContext);
+  const v = useContext25(CarouselContext);
   if (!v) throw new Error(`${component} must be used within Carousel.`);
   return v;
 }
@@ -11835,10 +12173,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 +12187,20 @@ function Carousel({
     },
     [count, isControlled, onIndexChange]
   );
-  useLayoutEffect9(() => {
+  const snapTrackTo = useCallback18((next) => {
+    setInstant(true);
+    setTrackIndex(next);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setInstant(false));
+    });
+  }, []);
+  useLayoutEffect10(() => {
     if (count <= 0) return;
     const logical = clampIndex(index, count);
     if (logical !== index) commitLogical(logical);
-    setTrackIndex(loopActive ? logical + 1 : logical);
+    snapTrackTo(loopActive ? logical + 1 : logical);
   }, [count, loopActive]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (count <= 0) return;
     if (!loopActive) {
       setTrackIndex(clampIndex(index, count));
@@ -11906,20 +12251,9 @@ function Carousel({
   }, [commitLogical, count, index, loopActive, trackIndex]);
   const onTrackSettled = useCallback18(() => {
     if (!loopActive) return;
-    if (trackIndex === 0) {
-      setInstant(true);
-      setTrackIndex(count);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => setInstant(false));
-      });
-    } else if (trackIndex === count + 1) {
-      setInstant(true);
-      setTrackIndex(1);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => setInstant(false));
-      });
-    }
-  }, [count, loopActive, trackIndex]);
+    if (trackIndex === 0) snapTrackTo(count);
+    else if (trackIndex === count + 1) snapTrackTo(1);
+  }, [count, loopActive, snapTrackTo, trackIndex]);
   const ctx = useMemo18(
     () => ({
       index,
@@ -11975,7 +12309,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 +12335,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 +12396,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 +12407,7 @@ function CarouselContent({ className, children, ...props }) {
       onPointerMove,
       onPointerUp,
       onPointerCancel,
-      children: /* @__PURE__ */ jsx67(
+      children: /* @__PURE__ */ jsx68(
         "div",
         {
           "data-refineui": "carousel-track",
@@ -12090,7 +12424,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 +12439,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 +12460,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 +12476,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 +12492,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 +12508,8 @@ 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 [animate, setAnimate] = useState24(false);
   const updateThumb = useCallback18(() => {
     const el = trackRef.current;
     if (!el || count <= 0) {
@@ -12190,10 +12525,25 @@ function CarouselIndicators({ className, ...props }) {
       ready: true
     });
   }, [count, index]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     updateThumb();
   }, [updateThumb]);
-  useEffect16(() => {
+  useEffect17(() => {
+    if (!thumb.ready) {
+      setAnimate(false);
+      return;
+    }
+    if (animate) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [thumb.ready, animate]);
+  useEffect17(() => {
     const el = trackRef.current;
     if (!el) return;
     const ro = new ResizeObserver(() => updateThumb());
@@ -12205,7 +12555,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,17 +12565,18 @@ function CarouselIndicators({ className, ...props }) {
       className: clsx89(carouselStyles.indicators, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx68(
           "span",
           {
             "data-refineui": "carousel-indicator-thumb",
             "data-ready": thumb.ready ? "true" : void 0,
+            "data-animate": animate ? "true" : void 0,
             "aria-hidden": true,
             className: carouselStyles.indicatorThumb,
             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",
@@ -12248,9 +12599,9 @@ function CarouselIndicators({ className, ...props }) {
 import { clsx as clsx91 } from "clsx";
 import {
   Children as Children7,
-  createContext as createContext23,
+  createContext as createContext24,
   isValidElement as isValidElement6,
-  useContext as useContext25
+  useContext as useContext26
 } from "react";
 
 // src/components/Bubble/style.ts
@@ -12316,10 +12667,10 @@ var bubbleContentVariantClass = {
 };
 
 // src/components/Bubble/Bubble.tsx
-import { jsx as jsx68, jsxs as jsxs26 } from "react/jsx-runtime";
-var BubbleContext = createContext23(null);
+import { jsx as jsx69, jsxs as jsxs27 } from "react/jsx-runtime";
+var BubbleContext = createContext24(null);
 function useBubbleContext(component) {
-  const value = useContext25(BubbleContext);
+  const value = useContext26(BubbleContext);
   if (!value) throw new Error(`${component} must be used within Bubble.`);
   return value;
 }
@@ -12348,7 +12699,7 @@ function partitionBubbleChildren(children) {
   };
 }
 function BubbleGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
       "data-refineui": "bubble-group",
@@ -12367,7 +12718,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 +12733,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 +12743,7 @@ function Bubble({
 }
 function BubbleContent({ className, ...props }) {
   const { variant } = useBubbleContext("BubbleContent");
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
       "data-refineui": "bubble-content",
@@ -12413,7 +12764,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",
@@ -12434,12 +12785,12 @@ function BubbleReactions({
 import { clsx as clsx93 } from "clsx";
 import { iconSizes as iconSizes19 } from "@refineui/tokens";
 import {
-  createContext as createContext24,
+  createContext as createContext25,
   useCallback as useCallback19,
-  useContext as useContext26,
+  useContext as useContext27,
   useMemo as useMemo19,
   useRef as useRef19,
-  useState as useState24
+  useState as useState25
 } from "react";
 
 // src/components/Stepper/style.ts
@@ -12548,17 +12899,17 @@ var stepperConnectorVars = {
 };
 
 // src/components/Stepper/Stepper.tsx
-import { jsx as jsx69, jsxs as jsxs27 } from "react/jsx-runtime";
-var StepperContext = createContext24(null);
-var StepperItemContext = createContext24(null);
-var StepperListRegistryContext = createContext24(null);
+import { jsx as jsx70, jsxs as jsxs28 } from "react/jsx-runtime";
+var StepperContext = createContext25(null);
+var StepperItemContext = createContext25(null);
+var StepperListRegistryContext = createContext25(null);
 function useStepperContext(component) {
-  const v = useContext26(StepperContext);
+  const v = useContext27(StepperContext);
   if (!v) throw new Error(`${component} must be used within Stepper.`);
   return v;
 }
 function useStepperItemContext(component) {
-  const v = useContext26(StepperItemContext);
+  const v = useContext27(StepperItemContext);
   if (!v) throw new Error(`${component} must be used within StepperItem.`);
   return v;
 }
@@ -12578,7 +12929,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 +12947,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 +12975,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",
@@ -12649,7 +13000,7 @@ function StepperItem({
   ...props
 }) {
   const { value, setValue, orientation, interactive } = useStepperContext("StepperItem");
-  const registry = useContext26(StepperListRegistryContext);
+  const registry = useContext27(StepperListRegistryContext);
   registry?.noteItem(itemValue);
   const state = resolveState2(itemValue, value);
   const canActivate = interactive && !disabled;
@@ -12669,7 +13020,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 +13048,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 +13059,7 @@ function StepperIndicator({ className, children, ...props }) {
       className: "items-center justify-center"
     }
   );
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     "span",
     {
       "data-refineui": "stepper-indicator",
@@ -12723,7 +13074,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 +13090,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 +13103,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",
@@ -12764,10 +13115,10 @@ function StepperDescription({ className, ...props }) {
 }
 function StepperSeparator({ className, ...props }) {
   const { orientation } = useStepperContext("StepperSeparator");
-  const registry = useContext26(StepperListRegistryContext);
+  const registry = useContext27(StepperListRegistryContext);
   const state = registry?.takeSeparatorState() ?? "upcoming";
   const vertical = orientation === "vertical";
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     "li",
     {
       "data-refineui": "stepper-separator",
@@ -12781,7 +13132,7 @@ function StepperSeparator({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs27(
+      children: /* @__PURE__ */ jsxs28(
         "span",
         {
           "data-refineui": "stepper-separator-rail",
@@ -12790,14 +13141,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",
@@ -12826,14 +13177,14 @@ StepperSeparator.displayName = "StepperSeparator";
 // src/components/Resizable/Resizable.tsx
 import { clsx as clsx95 } from "clsx";
 import {
-  createContext as createContext25,
+  createContext as createContext26,
   useCallback as useCallback20,
-  useContext as useContext27,
+  useContext as useContext28,
   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,15 +13220,15 @@ 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;
 var DEFAULT_MIN_SIZE = 10;
 var DEFAULT_MAX_SIZE = 100;
-var ResizableContext = createContext25(null);
+var ResizableContext = createContext26(null);
 function useResizableContext(component) {
-  const v = useContext27(ResizableContext);
+  const v = useContext28(ResizableContext);
   if (!v) throw new Error(`${component} must be used within ResizablePanelGroup.`);
   return v;
 }
@@ -12939,7 +13290,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 +13394,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 +13421,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 +13453,7 @@ function ResizablePanel({
   const { orientation, sizes, registerPanel, unregisterPanel } = useResizableContext("ResizablePanel");
   const onResizeRef = useRef20(onResize);
   onResizeRef.current = onResize;
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     registerPanel({
       id,
       defaultSize,
@@ -13129,7 +13480,7 @@ function ResizablePanel({
     flexBasis: 0,
     ...orientation === "horizontal" ? { minWidth: `${minSize}%` } : { minHeight: `${minSize}%` }
   };
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     "div",
     {
       "data-refineui": "resizable-panel",
@@ -13161,10 +13512,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 +13625,7 @@ function ResizableHandle({
     resizeBetween(leftId, rightId, delta);
     queueMicrotask(keepFocus);
   };
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     "div",
     {
       ref: handleRef,
@@ -13304,7 +13655,7 @@ function ResizableHandle({
       onPointerUp: handlePointerUp,
       onPointerCancel: handlePointerUp,
       onKeyDown: handleKeyDown,
-      children: withHandle ? /* @__PURE__ */ jsx70(
+      children: withHandle ? /* @__PURE__ */ jsx71(
         "span",
         {
           "aria-hidden": true,
@@ -13320,7 +13671,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 +13695,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 +13709,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 +13798,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 +13821,7 @@ function SpinButton({
       ...props,
       onKeyDown: handleKeyDown,
       children: [
-        /* @__PURE__ */ jsx71(
+        /* @__PURE__ */ jsx72(
           "div",
           {
             "aria-live": "polite",
@@ -13481,7 +13832,7 @@ function SpinButton({
               disabled ? spinButtonStyles.valueTextDisabled : spinButtonStyles.valueTextDefault,
               disabled ? spinButtonStyles.bgDisabled : spinButtonStyles.bgDefault
             ),
-            children: /* @__PURE__ */ jsx71(
+            children: /* @__PURE__ */ jsx72(
               "input",
               {
                 type: "text",
@@ -13506,7 +13857,7 @@ function SpinButton({
             )
           }
         ),
-        /* @__PURE__ */ jsxs28(
+        /* @__PURE__ */ jsxs29(
           "div",
           {
             className: clsx96(
@@ -13514,7 +13865,7 @@ function SpinButton({
               disabled ? spinButtonStyles.bgDisabled : spinButtonStyles.bgDefault
             ),
             children: [
-              /* @__PURE__ */ jsx71(
+              /* @__PURE__ */ jsx72(
                 "button",
                 {
                   type: "button",
@@ -13526,7 +13877,7 @@ function SpinButton({
                     spinButtonStyles.stepButtonBase,
                     disabled || atMax ? spinButtonStyles.stepButtonDisabled : spinButtonStyles.stepButtonEnabled
                   ),
-                  children: /* @__PURE__ */ jsx71(
+                  children: /* @__PURE__ */ jsx72(
                     WebIcon,
                     {
                       name: "chevron-up",
@@ -13538,7 +13889,7 @@ function SpinButton({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx71(
+              /* @__PURE__ */ jsx72(
                 "button",
                 {
                   type: "button",
@@ -13550,7 +13901,7 @@ function SpinButton({
                     spinButtonStyles.stepButtonBase,
                     disabled || atMin ? spinButtonStyles.stepButtonDisabled : spinButtonStyles.stepButtonEnabled
                   ),
-                  children: /* @__PURE__ */ jsx71(
+                  children: /* @__PURE__ */ jsx72(
                     WebIcon,
                     {
                       name: "chevron-down",
@@ -13575,14 +13926,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 +13968,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 +13992,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 +14008,7 @@ function useToastStackGapPx() {
   return useSyncExternalStore(
     subscribeToastStackGap,
     readToastStackGapPx,
-    () => gapPxFromSpacingToken(String(spacings6.sizeLarge))
+    () => gapPxFromSpacingToken(String(spacings7.sizeLarge))
   );
 }
 function readToastNaturalHeight(li) {
@@ -13805,7 +14156,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 +14166,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 +14182,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 +14195,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 +14207,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 +14283,7 @@ function SwipeableToast({ record, index, swipeDirections, onSwipeStart, onSwipeE
     clearSwipeOffset();
     onSwipeEnd();
   };
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(
     Toast,
     {
       ref: toastRef,
@@ -13967,15 +14318,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 +14337,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 +14365,7 @@ function Toaster({
       }
     }
   }, [isPortalOwner, records]);
-  useEffect18(() => {
+  useEffect19(() => {
     return () => {
       for (const handle of Object.values(timerMapRef.current)) {
         clearTimeout(handle);
@@ -14022,7 +14373,7 @@ function Toaster({
       timerMapRef.current = {};
     };
   }, []);
-  useIsomorphicLayoutEffect6(() => {
+  useIsomorphicLayoutEffect7(() => {
     if (!isPortalOwner) return;
     const root = rootRef.current;
     if (!root) return;
@@ -14040,7 +14391,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 +14425,7 @@ function Toaster({
     return null;
   }
   return createPortal7(
-    /* @__PURE__ */ jsx72(
+    /* @__PURE__ */ jsx73(
       "ol",
       {
         ref: rootRef,
@@ -14085,7 +14436,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 +14450,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,22 +14475,22 @@ 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 createContext27, 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;
 var TREE_CONTENT_MS = Number.parseFloat(semanticInteraction8.duration.accordionContent) / 1e3;
 var TREE_PANEL_EASE = semanticInteraction8.easing.panel;
 var TREE_CONTENT_EASE = semanticInteraction8.easing.content;
-var TreeContext = createContext26(null);
-var TreeItemContext = createContext26(null);
+var TreeContext = createContext27(null);
+var TreeItemContext = createContext27(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 +14545,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 +14559,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 +14697,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 +14711,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 useContext29, 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);
+  const tree = useContext29(TreeContext);
+  const parent = useContext29(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 +14740,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",
@@ -14411,20 +14762,20 @@ function TreeItem({ value, disabled = false, className, children, ...props }) {
 // src/components/Tree/TreeItemTrigger.tsx
 import { clsx as clsx102 } from "clsx";
 import {
-  useContext as useContext29,
-  useEffect as useEffect20
+  useContext as useContext30,
+  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);
+  const tree = useContext30(TreeContext);
+  const item = useContext30(TreeItemContext);
   if (!tree || !item) throw new Error("TreeItemTrigger must be used within TreeItem.");
   const iconSize = treeIconSize[tree.size];
   const depthIndent = "calc(var(--refineui-spacing-size-large) + var(--refineui-spacing-size-x-small))";
   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 +14851,7 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
         break;
     }
   };
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       ref: setRowRef,
@@ -14519,8 +14870,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 +14885,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 +14896,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 useContext31, 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);
+  const tree = useContext31(TreeContext);
+  const item = useContext31(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 +14918,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 +14929,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 +14947,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-hairline border-transparent px-refineui-size-medium py-refineui-size-small"
   )
 };
 function tooltipPlacement(position) {
@@ -14692,6 +14987,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 +15018,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 +15033,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 +15061,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 +15105,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
+        }
       )
     ] }) })
   ] });
@@ -14880,13 +15140,13 @@ function Tooltip({
 import { clsx as clsx107 } from "clsx";
 import {
   Children as Children8,
-  createContext as createContext27,
+  createContext as createContext28,
   isValidElement as isValidElement7,
-  useContext as useContext31,
+  useContext as useContext32,
   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 +15193,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);
@@ -15115,9 +15375,9 @@ function formatAxisTick(value) {
 
 // src/components/Chart/Chart.tsx
 import { Fragment as Fragment4, jsx as jsx79, jsxs as jsxs33 } from "react/jsx-runtime";
-var ChartContext = createContext27(null);
+var ChartContext = createContext28(null);
 function useChartContext(component) {
-  const value = useContext31(ChartContext);
+  const value = useContext32(ChartContext);
   if (!value) throw new Error(`${component} must be used within Chart.`);
   return value;
 }
@@ -15150,11 +15410,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 +15649,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 +15707,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 +15776,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,24 +15853,24 @@ 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 createContext29, useContext as useContext33, 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);
+var CollapsibleContext = createContext29(null);
 function useCollapsibleContext(part) {
-  const value = useContext32(CollapsibleContext);
+  const value = useContext33(CollapsibleContext);
   if (!value) throw new Error(`${part} must be used within Collapsible`);
   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 +15892,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();
@@ -15737,15 +15997,15 @@ var CollapsibleContent = forwardRef17(
 
 // src/components/ContextMenu/ContextMenu.tsx
 import {
-  createContext as createContext29,
+  createContext as createContext30,
   forwardRef as forwardRef18,
   useCallback as useCallback24,
-  useContext as useContext33,
-  useEffect as useEffect22,
-  useLayoutEffect as useLayoutEffect14,
+  useContext as useContext34,
+  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";
@@ -15755,10 +16015,10 @@ import { Slot as Slot8 } from "@refineui/utilities/react";
 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);
-var SubContext = createContext29(null);
+var MenuContext2 = createContext30(null);
+var SubContext = createContext30(null);
 function useMenu() {
-  const value = useContext33(MenuContext2);
+  const value = useContext34(MenuContext2);
   if (!value) throw new Error("Context menu parts must be used within ContextMenu");
   return value;
 }
@@ -15775,8 +16035,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 +16079,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 +16095,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 +16241,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,
@@ -16007,7 +16267,7 @@ function ContextMenuSub({ children }) {
   return /* @__PURE__ */ jsx81(SubContext.Provider, { value, children });
 }
 function useSub2() {
-  const value = useContext33(SubContext);
+  const value = useContext34(SubContext);
   if (!value) throw new Error("ContextMenuSubTrigger must be used within ContextMenuSub");
   return value;
 }
@@ -16076,8 +16336,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;