@refineui/react 0.1.2 → 0.2.1

package/dist/index.cjs

@@ -209,7 +209,7 @@ __export(src_exports, {
   ResizableHandle: () => ResizableHandle,
   ResizablePanel: () => ResizablePanel,
   ResizablePanelGroup: () => ResizablePanelGroup,
-  SEMANTIC_TEXT: () => import_tokens40.SEMANTIC_TEXT,
+  SEMANTIC_TEXT: () => import_tokens39.SEMANTIC_TEXT,
   ScrollArea: () => ScrollArea,
   ScrollAreaScrollbar: () => ScrollAreaScrollbar,
   ScrollAreaThumb: () => ScrollAreaThumb,
@@ -254,7 +254,7 @@ __export(src_exports, {
   SidebarTrigger: () => SidebarTrigger,
   Skeleton: () => Skeleton,
   Slider: () => Slider,
-  Slot: () => import_react60.Slot,
+  Slot: () => import_react61.Slot,
   Spacer: () => Spacer,
   SpinButton: () => SpinButton,
   Spinner: () => Spinner,
@@ -1103,7 +1103,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")
@@ -1386,7 +1391,7 @@ function buildSemanticTextClassMap(map) {
 }
 
 // src/index.ts
-var import_tokens40 = require("@refineui/tokens");
+var import_tokens39 = require("@refineui/tokens");
 
 // src/componentSizes.ts
 var import_tokens3 = require("@refineui/tokens");
@@ -1628,10 +1633,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"),
@@ -1649,6 +1664,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(" "),
@@ -1730,7 +1750,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]",
@@ -2011,22 +2031,27 @@ var import_react4 = require("react");
 
 // src/components/SearchField/style.ts
 var import_tokens5 = require("@refineui/tokens");
-var searchFieldLeadingIconSize = import_tokens5.iconSizes.medium;
-var searchFieldClearIconSize = import_tokens5.iconSizes.small;
+var searchFieldLeadingIconSize = {
+  sm: import_tokens5.iconSizes.small,
+  md: import_tokens5.iconSizes.medium,
+  lg: import_tokens5.iconSizes.large
+};
+var searchFieldClearIconSize = {
+  sm: import_tokens5.iconSizes.xsmall,
+  md: import_tokens5.iconSizes.small,
+  lg: import_tokens5.iconSizes.small
+};
 var searchFieldStyles = {
   root: [
     "box-border flex w-full min-w-0 items-center gap-refineui-size-x-small overflow-hidden outline-none",
-    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"
@@ -2039,6 +2064,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
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -2069,6 +2096,7 @@ function SearchField({
   onValueChange,
   disabled = false,
   appearance = "filled",
+  size: sizeProp,
   className,
   children,
   id,
@@ -2076,6 +2104,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 = (0, import_react4.useRef)(null);
   const reactId = (0, import_react4.useId)();
@@ -2090,11 +2120,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);
@@ -2110,10 +2141,12 @@ function SearchField({
     {
       "data-refineui": "search-field",
       "data-appearance": appearance,
+      "data-size": size,
       "data-disabled": disabled || void 0,
       className: (0, import_clsx6.clsx)(
         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
       ),
@@ -2124,7 +2157,7 @@ function SearchField({
   ) });
 }
 function SearchFieldIcon({ children, className, ...props }) {
-  const { disabled } = useSearchFieldContext("SearchFieldIcon");
+  const { disabled, size } = useSearchFieldContext("SearchFieldIcon");
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "span",
     {
@@ -2140,7 +2173,7 @@ function SearchFieldIcon({ children, className, ...props }) {
         WebIcon,
         {
           name: "search",
-          size: searchFieldLeadingIconSize,
+          size: searchFieldLeadingIconSize[size],
           color: "currentColor",
           "aria-hidden": true
         }
@@ -2203,7 +2236,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__ */ (0, import_jsx_runtime5.jsx)(
@@ -2228,7 +2261,7 @@ function SearchFieldClear({
         WebIcon,
         {
           name: "dismiss",
-          size: searchFieldClearIconSize,
+          size: searchFieldClearIconSize[size],
           color: "currentColor",
           iconStyle: "filled",
           "aria-hidden": true
@@ -2774,6 +2807,7 @@ var import_react9 = require("@refineui/utilities/react");
 var import_clsx24 = require("clsx");
 var import_tokens7 = require("@refineui/tokens");
 var SCROLL_AREA_THUMB_MIN_PX = Number.parseFloat(import_tokens7.spacings.sizeXLarge);
+var SCROLL_EDGE_FALLOFF_RATIO = 0.25;
 var scrollAreaStyles = {
   root: "box-border min-h-0 min-w-0 overflow-hidden outline-none",
   /**
@@ -2849,6 +2883,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 };
@@ -2869,6 +2912,8 @@ var ScrollArea = (0, import_react8.forwardRef)(function ScrollArea2({
   children,
   ...props
 }, ref) {
+  const rootRef = (0, import_react8.useRef)(null);
+  const composedRootRef = (0, import_react9.useComposedRefs)(rootRef, ref);
   const viewportRef = (0, import_react8.useRef)(null);
   const [viewportEpoch, setViewportEpoch] = (0, import_react8.useState)(0);
   const [vertical, setVertical] = (0, import_react8.useState)(EMPTY_METRICS);
@@ -2896,6 +2941,12 @@ var ScrollArea = (0, import_react8.forwardRef)(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 = (0, import_react8.useCallback)(() => {
     setScrolling(true);
@@ -2962,7 +3013,7 @@ var ScrollArea = (0, import_react8.forwardRef)(function ScrollArea2({
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ScrollAreaContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
-      ref,
+      ref: composedRootRef,
       "data-refineui": "scroll-area",
       "data-type": type,
       "data-scrolling": scrolling || void 0,
@@ -3928,7 +3979,7 @@ function SelectGroup({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "group", className: (0, import_clsx28.clsx)(selectStyles.group, className), ...props, children });
 }
 function SelectLabel({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx28.clsx)(selectStyles.label, className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-scroll-edge-item": true, className: (0, import_clsx28.clsx)(selectStyles.label, className), ...props, children });
 }
 function SelectSeparator({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "separator", className: (0, import_clsx28.clsx)(selectStyles.separator, className), ...props });
@@ -3975,6 +4026,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,
@@ -4225,7 +4277,6 @@ function Chip({
 // src/components/Command/Command.tsx
 var import_clsx34 = require("clsx");
 var import_react15 = require("react");
-var import_tokens12 = require("@refineui/tokens");
 
 // src/components/Dialog/Dialog.tsx
 var import_clsx32 = require("clsx");
@@ -4552,34 +4603,42 @@ var import_clsx33 = require("clsx");
 var import_tokens11 = require("@refineui/tokens");
 var COMMAND_LIST_MAX_HEIGHT = `min(60vh, ${import_tokens11.foundationSizes.foundationSize3200})`;
 var commandStyles = {
-  root: (0, import_clsx33.clsx)(
-    "flex w-full flex-col overflow-hidden outline-none",
-    "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: (0, import_clsx33.clsx)(
+    "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: (0, import_clsx33.clsx)(
     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: (0, import_clsx33.clsx)(
     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"
@@ -4587,9 +4646,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: (0, import_clsx33.clsx)(
-    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",
@@ -4601,6 +4659,16 @@ var commandStyles = {
     "shrink-0 tracking-wide text-refineui-alias-foreground-tertiary"
   )
 };
+var commandItemSizeClass = {
+  sm: (0, import_clsx33.clsx)(sizedComponentTextClass(componentTypographyTokens.command.item, "sm"), "py-refineui-size-xx-small"),
+  md: (0, import_clsx33.clsx)(sizedComponentTextClass(componentTypographyTokens.command.item, "md"), "py-refineui-size-small"),
+  lg: (0, import_clsx33.clsx)(sizedComponentTextClass(componentTypographyTokens.command.item, "lg"), "py-refineui-size-medium")
+};
+var commandItemIconSize = {
+  sm: import_tokens11.iconSizes.xsmall,
+  md: import_tokens11.iconSizes.small,
+  lg: import_tokens11.iconSizes.medium
+};
 
 // src/components/Command/Command.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -4636,6 +4704,7 @@ function useControllableString2(controlled, defaultValue, onChange) {
 function Command({
   children,
   className,
+  size = "md",
   value,
   defaultValue,
   onValueChange,
@@ -4754,6 +4823,7 @@ function Command({
   );
   const ctx = (0, import_react15.useMemo)(
     () => ({
+      size,
       search,
       setSearch,
       shouldFilter,
@@ -4771,6 +4841,7 @@ function Command({
       groupHasVisibleItems
     }),
     [
+      size,
       search,
       setSearch,
       shouldFilter,
@@ -4792,6 +4863,7 @@ function Command({
     "div",
     {
       "data-refineui": "command",
+      "data-size": size,
       role: "presentation",
       className: (0, import_clsx34.clsx)(commandStyles.root, className),
       onKeyDown: (event) => {
@@ -4843,17 +4915,19 @@ function CommandDialog({
     Command,
     {
       ...commandProps,
+      size: commandProps?.size ?? "lg",
       className: (0, import_clsx34.clsx)(commandStyles.rootInDialog, commandProps?.className),
       children
     }
   ) }) }) });
 }
 var CommandInput = (0, import_react15.forwardRef)(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__ */ (0, import_jsx_runtime26.jsx)("div", { "data-refineui": "command-input", className: commandStyles.inputWrap, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     SearchField,
     {
+      size,
       value: search,
       onValueChange: setSearch,
       disabled,
@@ -4882,14 +4956,90 @@ var CommandInput = (0, import_react15.forwardRef)(function CommandInput2({ class
     }
   ) });
 });
+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 = (0, import_react15.useRef)(null);
+  const innerRef = (0, import_react15.useRef)(null);
+  const [contentHeight, setContentHeight] = (0, import_react15.useState)(null);
+  const [indicator, setIndicator] = (0, import_react15.useState)(HIDDEN_INDICATOR);
+  const [animate, setAnimate] = (0, import_react15.useState)(false);
+  const [snap, setSnap] = (0, import_react15.useState)(false);
+  const lastSearchRef = (0, import_react15.useRef)(search);
+  const measure = (0, import_react15.useCallback)(() => {
+    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]);
+  (0, import_react15.useEffect)(() => {
+    if (!snap) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setSnap(false));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [snap]);
+  (0, import_react15.useEffect)(() => {
+    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;
+  (0, import_react15.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime26.jsx)(
     "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__ */ (0, import_jsx_runtime26.jsx)(
         ScrollAreaRegion,
         {
@@ -4897,7 +5047,21 @@ function CommandList({ className, children, ...props }) {
           className: (0, import_clsx34.clsx)(commandStyles.list, className),
           viewportClassName: commandStyles.listViewport,
           ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { id: listId, role: "listbox", className: commandStyles.listInner, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref: innerRef, id: listId, role: "listbox", className: commandStyles.listInner, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              "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
+          ] })
         }
       )
     }
@@ -4942,6 +5106,7 @@ function CommandGroupHeading({ className, children, ...props }) {
     "div",
     {
       "data-refineui": "command-group-heading",
+      "data-scroll-edge-item": true,
       className: (0, import_clsx34.clsx)(commandStyles.groupHeading, className),
       ...props,
       children
@@ -5025,6 +5190,7 @@ var CommandItem = (0, import_react15.forwardRef)(function CommandItem2({
   ...props
 }, forwardedRef) {
   const {
+    size,
     selectedValue,
     setSelectedValue,
     listId,
@@ -5032,6 +5198,7 @@ var CommandItem = (0, import_react15.forwardRef)(function CommandItem2({
     isItemVisible,
     selectById
   } = useCommandContext("CommandItem");
+  const iconSize = commandItemIconSize[size];
   const group = (0, import_react15.useContext)(CommandGroupContext);
   const itemId = (0, import_react15.useId)();
   const nodeRef = (0, import_react15.useRef)(null);
@@ -5075,11 +5242,13 @@ var CommandItem = (0, import_react15.forwardRef)(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: (0, import_clsx34.clsx)(
         commandStyles.itemBase,
+        commandItemSizeClass[size],
         disabled ? commandStyles.itemDisabled : commandStyles.itemEnabled,
         className
       ),
@@ -5099,9 +5268,9 @@ var CommandItem = (0, import_react15.forwardRef)(function CommandItem2({
           {
             className: commandStyles.iconWrap,
             style: {
-              width: import_tokens12.iconSizes.small,
-              minWidth: import_tokens12.iconSizes.small,
-              height: import_tokens12.iconSizes.small
+              width: iconSize,
+              minWidth: iconSize,
+              height: iconSize
             },
             children: startIcon
           }
@@ -5115,9 +5284,9 @@ var CommandItem = (0, import_react15.forwardRef)(function CommandItem2({
             {
               className: commandStyles.iconWrap,
               style: {
-                width: import_tokens12.iconSizes.small,
-                minWidth: import_tokens12.iconSizes.small,
-                height: import_tokens12.iconSizes.small
+                width: iconSize,
+                minWidth: iconSize,
+                height: iconSize
               },
               children: endIcon
             }
@@ -5137,7 +5306,7 @@ var import_react17 = require("react");
 var import_color6 = require("@refineui/utilities/color");
 
 // src/components/Avatar/avatarStyles.ts
-var import_tokens13 = require("@refineui/tokens");
+var import_tokens12 = require("@refineui/tokens");
 var import_color4 = require("@refineui/utilities/color");
 var avatarSizeAliasMap = {
   "3xs": "xxxsmall",
@@ -5202,15 +5371,15 @@ var avatarTypoNeutral = buildSemanticTextClassMap(
   componentTypographyTokens.avatar.initialsNeutral
 );
 var avatarIconSlotSize = {
-  xxxsmall: import_tokens13.iconSizes.xxsmall,
-  xxsmall: import_tokens13.iconSizes.xsmall,
-  xsmall: import_tokens13.iconSizes.small,
-  small: import_tokens13.iconSizes.small,
-  medium: import_tokens13.iconSizes.medium,
-  large: import_tokens13.iconSizes.medium,
-  xlarge: import_tokens13.iconSizes.large,
-  xxlarge: import_tokens13.iconSizes.xlarge,
-  xxxlarge: import_tokens13.iconSizes.xxlarge
+  xxxsmall: import_tokens12.iconSizes.xxsmall,
+  xxsmall: import_tokens12.iconSizes.xsmall,
+  xsmall: import_tokens12.iconSizes.small,
+  small: import_tokens12.iconSizes.small,
+  medium: import_tokens12.iconSizes.medium,
+  large: import_tokens12.iconSizes.medium,
+  xlarge: import_tokens12.iconSizes.large,
+  xxlarge: import_tokens12.iconSizes.xlarge,
+  xxxlarge: import_tokens12.iconSizes.xxlarge
 };
 var AVATAR_INNER_MASK = "relative flex size-full min-h-0 min-w-0 items-center justify-center overflow-hidden rounded-refineui-circle";
 function initialsAccentTypo(size) {
@@ -5278,15 +5447,15 @@ var defaultPersonIconColor = {
   yellow: (0, import_color4.resolveColorTokenValue)(componentColorTokens.avatar.icon.yellow)
 };
 var avatarOverflowIconSize = {
-  xxxsmall: import_tokens13.iconSizes.xsmall,
-  xxsmall: import_tokens13.iconSizes.xsmall,
-  xsmall: import_tokens13.iconSizes.small,
-  small: import_tokens13.iconSizes.small,
-  medium: import_tokens13.iconSizes.medium,
-  large: import_tokens13.iconSizes.medium,
-  xlarge: import_tokens13.iconSizes.large,
-  xxlarge: import_tokens13.iconSizes.xlarge,
-  xxxlarge: import_tokens13.iconSizes.xxlarge
+  xxxsmall: import_tokens12.iconSizes.xsmall,
+  xxsmall: import_tokens12.iconSizes.xsmall,
+  xsmall: import_tokens12.iconSizes.small,
+  small: import_tokens12.iconSizes.small,
+  medium: import_tokens12.iconSizes.medium,
+  large: import_tokens12.iconSizes.medium,
+  xlarge: import_tokens12.iconSizes.large,
+  xxlarge: import_tokens12.iconSizes.xlarge,
+  xxxlarge: import_tokens12.iconSizes.xxlarge
 };
 var avatarSpreadGap = {
   xxxsmall: "gap-refineui-size-xx-small",
@@ -5692,7 +5861,7 @@ function Avatars({
 
 // src/components/Alert/Alert.tsx
 var import_clsx38 = require("clsx");
-var import_tokens14 = require("@refineui/tokens");
+var import_tokens13 = require("@refineui/tokens");
 
 // src/components/Alert/context.ts
 var import_react18 = require("react");
@@ -5817,7 +5986,7 @@ function AlertIcon({ className, name, children, ...props }) {
       "data-refineui": "alert-icon",
       className: (0, import_clsx38.clsx)(resolveAlertSlotClasses("icon", variant), className),
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(WebIcon, { name: iconName, size: import_tokens14.iconSizes.medium, color: "currentColor", fallback: "\u25CF", "aria-hidden": true })
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(WebIcon, { name: iconName, size: import_tokens13.iconSizes.medium, color: "currentColor", fallback: "\u25CF", "aria-hidden": true })
     }
   );
 }
@@ -5894,7 +6063,7 @@ function AlertClose({ className, type = "button", children, ...props }) {
         WebIcon,
         {
           name: "dismiss",
-          size: import_tokens14.iconSizes.small,
+          size: import_tokens13.iconSizes.small,
           color: "currentColor",
           iconStyle: "regular",
           fallback: "\xD7",
@@ -6963,14 +7132,14 @@ var import_clsx51 = require("clsx");
 
 // src/components/Accordion/context.ts
 var import_react23 = require("react");
-var import_tokens15 = require("@refineui/tokens");
+var import_tokens14 = require("@refineui/tokens");
 var import_animation2 = require("@refineui/utilities/animation");
 var AccordionContext = (0, import_react23.createContext)(null);
 var AccordionItemContext = (0, import_react23.createContext)(null);
-var PANEL_HEIGHT_MS = Number.parseFloat(import_tokens15.semanticInteraction.duration.accordionPanel) / 1e3;
-var PANEL_CONTENT_MS = Number.parseFloat(import_tokens15.semanticInteraction.duration.accordionContent) / 1e3;
-var PANEL_HEIGHT_EASE = import_tokens15.semanticInteraction.easing.panel;
-var PANEL_CONTENT_EASE = import_tokens15.semanticInteraction.easing.content;
+var PANEL_HEIGHT_MS = Number.parseFloat(import_tokens14.semanticInteraction.duration.accordionPanel) / 1e3;
+var PANEL_CONTENT_MS = Number.parseFloat(import_tokens14.semanticInteraction.duration.accordionContent) / 1e3;
+var PANEL_HEIGHT_EASE = import_tokens14.semanticInteraction.easing.panel;
+var PANEL_CONTENT_EASE = import_tokens14.semanticInteraction.easing.content;
 function usePrefersReducedMotion() {
   const [reduce, setReduce] = (0, import_react23.useState)(false);
   (0, import_react23.useEffect)(() => {
@@ -6989,7 +7158,7 @@ function toSet(value, type) {
 }
 
 // src/recipes/accordion.recipe.ts
-var import_tokens16 = require("@refineui/tokens");
+var import_tokens15 = require("@refineui/tokens");
 var accordionRecipe = defineSlotRecipe({
   name: "accordion",
   slots: ["root", "item", "trigger", "triggerRow", "chevron", "panel", "panelPad", "content"],
@@ -7028,9 +7197,9 @@ var accordionStyles = {
   panelBody: accordionRecipe.base.content
 };
 var accordionIconSize = {
-  sm: import_tokens16.iconSizes.xsmall,
-  md: import_tokens16.iconSizes.small,
-  lg: import_tokens16.iconSizes.medium
+  sm: import_tokens15.iconSizes.xsmall,
+  md: import_tokens15.iconSizes.small,
+  lg: import_tokens15.iconSizes.medium
 };
 var triggerTypo = {
   sm: sizedComponentTextClass(componentTypographyTokens.accordion.trigger, "sm"),
@@ -7264,7 +7433,7 @@ function AccordionContent({ className, children, ...props }) {
 // src/components/Breadcrumb/Breadcrumb.tsx
 var import_clsx55 = require("clsx");
 var import_react28 = require("react");
-var import_tokens17 = require("@refineui/tokens");
+var import_tokens16 = require("@refineui/tokens");
 
 // src/components/Breadcrumb/style.ts
 var ellipsisChip = "box-border inline-flex min-h-refineui-button-min-height-sm min-w-refineui-button-min-height-sm shrink-0 items-center justify-center rounded-refineui-large p-refineui-size-xx-small leading-none";
@@ -7357,7 +7526,7 @@ function EllipsisIcon() {
     WebIcon,
     {
       name: "more-horizontal",
-      size: import_tokens17.iconSizes.small,
+      size: import_tokens16.iconSizes.small,
       color: "currentColor",
       fallback: "\u22EF",
       className: "items-center justify-center"
@@ -7643,7 +7812,7 @@ function FooterSocial({ className, ...props }) {
 // src/components/Calendar/Calendar.tsx
 var import_clsx59 = require("clsx");
 var import_react30 = require("react");
-var import_tokens18 = require("@refineui/tokens");
+var import_tokens17 = require("@refineui/tokens");
 
 // src/components/Calendar/style.ts
 var import_clsx58 = require("clsx");
@@ -7972,7 +8141,7 @@ function Calendar({
               "aria-label": "Previous month",
               className: calendarStyles.navButton,
               onClick: () => setView(new Date(year, month - 1)),
-              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WebIcon, { name: "chevron-left", size: import_tokens18.iconSizes.small, color: "currentColor", fallback: "\u2039" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WebIcon, { name: "chevron-left", size: import_tokens17.iconSizes.small, color: "currentColor", fallback: "\u2039" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -8012,7 +8181,7 @@ function Calendar({
               "aria-label": "Next month",
               className: calendarStyles.navButton,
               onClick: () => setView(new Date(year, month + 1)),
-              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WebIcon, { name: "chevron-right", size: import_tokens18.iconSizes.small, color: "currentColor", fallback: "\u203A" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WebIcon, { name: "chevron-right", size: import_tokens17.iconSizes.small, color: "currentColor", fallback: "\u203A" })
             }
           )
         ] }),
@@ -8446,7 +8615,7 @@ function Spacer({ className, ...props }) {
 var import_clsx68 = require("clsx");
 var import_react31 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_tokens19 = require("@refineui/tokens");
+var import_tokens18 = require("@refineui/tokens");
 var import_animation3 = require("@refineui/utilities/animation");
 var import_color7 = require("@refineui/utilities/color");
 var import_react32 = require("@refineui/utilities/react");
@@ -8487,9 +8656,9 @@ var drawerStyles = {
 
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var PANEL_MS2 = (0, import_animation3.motionMsToNumber)(import_tokens19.semanticInteraction.duration.panel);
-var SCRIM_MS2 = (0, import_animation3.motionMsToNumber)(import_tokens19.semanticInteraction.duration.overlay);
-var EASING2 = import_tokens19.semanticInteraction.easing.panel;
+var PANEL_MS2 = (0, import_animation3.motionMsToNumber)(import_tokens18.semanticInteraction.duration.panel);
+var SCRIM_MS2 = (0, import_animation3.motionMsToNumber)(import_tokens18.semanticInteraction.duration.overlay);
+var EASING2 = import_tokens18.semanticInteraction.easing.panel;
 var DrawerContext = (0, import_react31.createContext)(null);
 function useDrawerContext(component) {
   const ctx = (0, import_react31.useContext)(DrawerContext);
@@ -8799,7 +8968,7 @@ function DrawerFooter({ className, ...props }) {
 var import_clsx70 = require("clsx");
 var import_react34 = require("react");
 var import_react_dom4 = require("react-dom");
-var import_tokens20 = require("@refineui/tokens");
+var import_tokens19 = require("@refineui/tokens");
 var import_color8 = require("@refineui/utilities/color");
 
 // src/components/Dropdown/style.ts
@@ -9072,9 +9241,9 @@ function DropdownContent({
   const { open, setOpen, close, triggerRef, menuRef, menuId } = useDropdownRoot("DropdownContent");
   const [fixedStyle, setFixedStyle] = (0, import_react34.useState)(null);
   const [menuSide, setMenuSide] = (0, import_react34.useState)("bottom");
-  const gapPx = sideOffset ?? parseCssPxLen(import_tokens20.spacings.sizeXXSmall, 4);
+  const gapPx = sideOffset ?? parseCssPxLen(import_tokens19.spacings.sizeXXSmall, 4);
   const defaultMenuW = parseCssPxLen(import_tokens3.componentSizes.dropdownMenuWidth, 180);
-  const z = Number.parseInt(String(import_tokens20.zIndex.zIndexMessages), 10) || 1e4;
+  const z = Number.parseInt(String(import_tokens19.zIndex.zIndexMessages), 10) || 1e4;
   useIsomorphicLayoutEffect3(() => {
     if (!open) {
       setFixedStyle(null);
@@ -9179,6 +9348,7 @@ function DropdownLabel({ className, ...props }) {
     {
       role: "presentation",
       "data-refineui": "dropdown-menu-label",
+      "data-scroll-edge-item": true,
       className: (0, import_clsx70.clsx)(dropdownStyles.label, className),
       ...props
     }
@@ -9208,6 +9378,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,
@@ -9385,6 +9556,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: (0, import_clsx70.clsx)(
@@ -9422,7 +9594,7 @@ function DropdownSubTrigger({
           WebIcon,
           {
             name: "chevron-right",
-            size: import_tokens20.iconSizes.small,
+            size: import_tokens19.iconSizes.small,
             color: "currentColor",
             "aria-hidden": true,
             className: "ms-auto shrink-0"
@@ -9439,7 +9611,7 @@ function DropdownSubContent({ className, children, style, ...props }) {
   const [fixedStyle, setFixedStyle] = (0, import_react34.useState)(null);
   const [side, setSide] = (0, import_react34.useState)("right");
   const defaultMenuW = parseCssPxLen(import_tokens3.componentSizes.dropdownMenuWidth, 180);
-  const gapPx = parseCssPxLen(import_tokens20.spacings.sizeXXXSmall, 2);
+  const gapPx = parseCssPxLen(import_tokens19.spacings.sizeXXXSmall, 2);
   const setPanelEl = (0, import_react34.useCallback)(
     (el) => {
       panelRef.current = el;
@@ -9477,7 +9649,7 @@ function DropdownSubContent({ className, children, style, ...props }) {
         top: pos.top,
         left: pos.left,
         minWidth: import_tokens3.componentSizes.dropdownMenuWidth,
-        zIndex: (Number.parseInt(String(import_tokens20.zIndex.zIndexMessages), 10) || 1e4) + 100,
+        zIndex: (Number.parseInt(String(import_tokens19.zIndex.zIndexMessages), 10) || 1e4) + 100,
         maxHeight: "min(60vh, 20rem)"
       });
     };
@@ -9630,7 +9802,7 @@ function FieldError({ className, ...props }) {
 
 // src/components/Link/Link.tsx
 var import_clsx74 = require("clsx");
-var import_tokens21 = require("@refineui/tokens");
+var import_tokens20 = require("@refineui/tokens");
 
 // src/components/Link/style.ts
 var linkStyles = {
@@ -9668,7 +9840,7 @@ function Link({
       ...props,
       children: [
         children,
-        showOpen && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(WebIcon, { name: "open", size: import_tokens21.iconSizes.large, color: "currentColor" })
+        showOpen && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(WebIcon, { name: "open", size: import_tokens20.iconSizes.large, color: "currentColor" })
       ]
     }
   );
@@ -9678,7 +9850,7 @@ function Link({
 var import_clsx76 = require("clsx");
 var import_react36 = require("react");
 var import_react_dom5 = require("react-dom");
-var import_tokens22 = require("@refineui/tokens");
+var import_tokens21 = require("@refineui/tokens");
 var import_animation4 = require("@refineui/utilities/animation");
 var import_react37 = require("@refineui/utilities/react");
 
@@ -9808,8 +9980,8 @@ function MenuPopover({ className, children, style, ...props }) {
   const [shouldRender, setShouldRender] = (0, import_react36.useState)(open);
   const [isClosing, setIsClosing] = (0, import_react36.useState)(false);
   const [fixedStyle, setFixedStyle] = (0, import_react36.useState)(null);
-  const gapPx = parseCssPx(import_tokens22.spacings.sizeXXSmall, 4);
-  const z = Number.parseInt(String(import_tokens22.zIndex.zIndexMessages), 10) || 1e4;
+  const gapPx = parseCssPx(import_tokens21.spacings.sizeXXSmall, 4);
+  const z = Number.parseInt(String(import_tokens21.zIndex.zIndexMessages), 10) || 1e4;
   (0, import_react36.useEffect)(() => {
     if (open) {
       setShouldRender(true);
@@ -9824,7 +9996,7 @@ function MenuPopover({ className, children, style, ...props }) {
       setShouldRender(false);
       setIsClosing(false);
       setFixedStyle(null);
-    }, (0, import_animation4.motionMsToNumber)(import_tokens22.semanticInteraction.duration.normal));
+    }, (0, import_animation4.motionMsToNumber)(import_tokens21.semanticInteraction.duration.normal));
     return () => window.clearTimeout(timeout);
   }, [open, shouldRender]);
   useIsomorphicLayoutEffect4(() => {
@@ -9964,9 +10136,9 @@ function MenuItem({
           {
             className: menuStyles.iconWrap,
             style: {
-              width: import_tokens22.iconSizes.small,
-              minWidth: import_tokens22.iconSizes.small,
-              height: import_tokens22.iconSizes.small
+              width: import_tokens21.iconSizes.small,
+              minWidth: import_tokens21.iconSizes.small,
+              height: import_tokens21.iconSizes.small
             },
             children: startIcon
           }
@@ -9991,9 +10163,9 @@ function MenuItem({
             {
               className: menuStyles.iconWrap,
               style: {
-                width: import_tokens22.iconSizes.small,
-                minWidth: import_tokens22.iconSizes.small,
-                height: import_tokens22.iconSizes.small
+                width: import_tokens21.iconSizes.small,
+                minWidth: import_tokens21.iconSizes.small,
+                height: import_tokens21.iconSizes.small
               },
               children: endIcon
             }
@@ -10145,9 +10317,9 @@ function MenuSubTrigger({
           {
             className: menuStyles.iconWrap,
             style: {
-              width: import_tokens22.iconSizes.small,
-              minWidth: import_tokens22.iconSizes.small,
-              height: import_tokens22.iconSizes.small
+              width: import_tokens21.iconSizes.small,
+              minWidth: import_tokens21.iconSizes.small,
+              height: import_tokens21.iconSizes.small
             },
             children: startIcon
           }
@@ -10170,11 +10342,11 @@ function MenuSubTrigger({
           {
             className: menuStyles.iconWrap,
             style: {
-              width: import_tokens22.iconSizes.small,
-              minWidth: import_tokens22.iconSizes.small,
-              height: import_tokens22.iconSizes.small
+              width: import_tokens21.iconSizes.small,
+              minWidth: import_tokens21.iconSizes.small,
+              height: import_tokens21.iconSizes.small
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(WebIcon, { name: "chevron-right", size: import_tokens22.iconSizes.small, color: "currentColor", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(WebIcon, { name: "chevron-right", size: import_tokens21.iconSizes.small, color: "currentColor", "aria-hidden": true })
           }
         ) })
       ] })
@@ -10187,8 +10359,8 @@ function MenuSubContent({ className, children, style, ...props }) {
   const panelRef = (0, import_react36.useRef)(null);
   const [fixedStyle, setFixedStyle] = (0, import_react36.useState)(null);
   const [side, setSide] = (0, import_react36.useState)("right");
-  const gapPx = parseCssPx(import_tokens22.spacings.sizeXXXSmall, 2);
-  const z = (Number.parseInt(String(import_tokens22.zIndex.zIndexMessages), 10) || 1e4) + 100;
+  const gapPx = parseCssPx(import_tokens21.spacings.sizeXXXSmall, 2);
+  const z = (Number.parseInt(String(import_tokens21.zIndex.zIndexMessages), 10) || 1e4) + 100;
   const defaultW = parseCssPx(import_tokens3.componentSizes.menuPanelWidth, 200);
   const setPanelEl = (0, import_react36.useCallback)(
     (el) => {
@@ -10288,7 +10460,7 @@ function MenuSubContent({ className, children, style, ...props }) {
 var import_clsx78 = require("clsx");
 var import_react38 = require("react");
 var import_react_dom6 = require("react-dom");
-var import_tokens23 = require("@refineui/tokens");
+var import_tokens22 = require("@refineui/tokens");
 var import_animation5 = require("@refineui/utilities/animation");
 
 // src/components/NavigationMenu/style.ts
@@ -10387,8 +10559,8 @@ function NavigationMenu({
   const openTimerRef = (0, import_react38.useRef)(null);
   const closeTimerRef = (0, import_react38.useRef)(null);
   const rootRef = (0, import_react38.useRef)(null);
-  const delayDuration = delayDurationProp ?? (0, import_animation5.motionMsToNumber)(import_tokens23.semanticInteraction.duration.normal);
-  const skipDelayDuration = skipDelayDurationProp ?? (0, import_animation5.motionMsToNumber)(import_tokens23.semanticInteraction.duration.fast);
+  const delayDuration = delayDurationProp ?? (0, import_animation5.motionMsToNumber)(import_tokens22.semanticInteraction.duration.normal);
+  const skipDelayDuration = skipDelayDurationProp ?? (0, import_animation5.motionMsToNumber)(import_tokens22.semanticInteraction.duration.fast);
   const clearTimers = (0, import_react38.useCallback)(() => {
     if (openTimerRef.current != null) {
       window.clearTimeout(openTimerRef.current);
@@ -10665,7 +10837,7 @@ function NavigationMenuTrigger({
           WebIcon,
           {
             name: "chevron-down",
-            size: import_tokens23.iconSizes.xsmall,
+            size: import_tokens22.iconSizes.xsmall,
             color: "currentColor",
             className: (0, import_clsx78.clsx)(
               navigationMenuStyles.chevron,
@@ -10708,7 +10880,7 @@ function NavigationMenuContent({
     const timeout = window.setTimeout(() => {
       setShouldRender(false);
       setIsClosing(false);
-    }, (0, import_animation5.motionMsToNumber)(import_tokens23.semanticInteraction.duration.fast));
+    }, (0, import_animation5.motionMsToNumber)(import_tokens22.semanticInteraction.duration.fast));
     return () => window.clearTimeout(timeout);
   }, [item.open, shouldRender]);
   useIsomorphicLayoutEffect5(() => {
@@ -10720,7 +10892,7 @@ function NavigationMenuContent({
       if (!content2) return;
       const triggerRect = trigger.getBoundingClientRect();
       const contentWidth = content2.offsetWidth;
-      const edge = Number.parseFloat(import_tokens23.spacings.sizeMedium) || 8;
+      const edge = Number.parseFloat(import_tokens22.spacings.sizeMedium) || 8;
       const left = Math.max(
         edge,
         Math.min(triggerRect.left, window.innerWidth - contentWidth - edge)
@@ -10729,7 +10901,7 @@ function NavigationMenuContent({
         position: "fixed",
         top: triggerRect.bottom,
         left,
-        zIndex: Number.parseInt(String(import_tokens23.zIndex.zIndexMessages), 10) || 1e4
+        zIndex: Number.parseInt(String(import_tokens22.zIndex.zIndexMessages), 10) || 1e4
       });
     };
     updatePosition();
@@ -10871,6 +11043,7 @@ function NavigationMenuIndicator({ className, style, ...props }) {
 
 // src/components/Sidebar/Sidebar.tsx
 var import_clsx80 = require("clsx");
+var import_react39 = require("react");
 
 // src/components/Sidebar/style.ts
 var import_clsx79 = require("clsx");
@@ -10889,7 +11062,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: (0, import_clsx79.clsx)(
@@ -10914,6 +11089,7 @@ var sidebarStyles = {
 
 // src/components/Sidebar/Sidebar.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");
+var SidebarScrollContext = (0, import_react39.createContext)(false);
 function Sidebar({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "aside",
@@ -10944,13 +11120,14 @@ function SidebarBrand({ className, ...props }) {
     }
   );
 }
-function SidebarContent({ className, ...props }) {
+function SidebarContent({ className, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
       "data-refineui": "sidebar-content",
       className: (0, import_clsx80.clsx)(sidebarStyles.content, className),
-      ...props
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ScrollAreaRegion, { type: "hover", viewportClassName: sidebarStyles.contentViewport, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SidebarScrollContext.Provider, { value: true, children }) })
     }
   );
 }
@@ -10976,10 +11153,12 @@ function SidebarGroup({ className, ...props }) {
   );
 }
 function SidebarGroupLabel({ className, ...props }) {
+  const inScroll = (0, import_react39.useContext)(SidebarScrollContext);
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "p",
     {
       "data-refineui": "sidebar-group-label",
+      "data-scroll-edge-item": inScroll || void 0,
       className: (0, import_clsx80.clsx)(sidebarStyles.groupLabel, className),
       ...props
     }
@@ -10992,10 +11171,12 @@ function SidebarLink({
   ...props
 }) {
   const disabled = ariaDisabled === true || ariaDisabled === "true";
+  const inScroll = (0, import_react39.useContext)(SidebarScrollContext);
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "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,
@@ -11023,8 +11204,8 @@ function SidebarFooter({ className, ...props }) {
 
 // src/components/Sidebar/SidebarPeek.tsx
 var import_clsx82 = require("clsx");
-var import_react39 = require("react");
-var import_tokens24 = require("@refineui/tokens");
+var import_react40 = require("react");
+var import_tokens23 = require("@refineui/tokens");
 var import_animation6 = require("@refineui/utilities/animation");
 
 // src/components/Sidebar/peekStyle.ts
@@ -11050,12 +11231,12 @@ var sidebarPeekStyles = {
 
 // src/components/Sidebar/SidebarPeek.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var PEEK_OPEN_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens24.semanticInteraction.duration.medium);
-var PEEK_CLOSE_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens24.semanticInteraction.duration.medium);
-var PEEK_BRIDGE_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens24.semanticInteraction.duration.slow);
-var SidebarPeekContext = (0, import_react39.createContext)(null);
+var PEEK_OPEN_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens23.semanticInteraction.duration.medium);
+var PEEK_CLOSE_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens23.semanticInteraction.duration.medium);
+var PEEK_BRIDGE_DELAY_MS = (0, import_animation6.motionMsToNumber)(import_tokens23.semanticInteraction.duration.slow);
+var SidebarPeekContext = (0, import_react40.createContext)(null);
 function useSidebarPeekContext(component) {
-  const ctx = (0, import_react39.useContext)(SidebarPeekContext);
+  const ctx = (0, import_react40.useContext)(SidebarPeekContext);
   if (!ctx) throw new Error(`${component} must be used within <SidebarPeek>.`);
   return ctx;
 }
@@ -11069,38 +11250,38 @@ function SidebarPeek({
   children,
   ...props
 }) {
-  const rootRef = (0, import_react39.useRef)(null);
-  const widthPercentRef = (0, import_react39.useRef)(widthPercent);
+  const rootRef = (0, import_react40.useRef)(null);
+  const widthPercentRef = (0, import_react40.useRef)(widthPercent);
   widthPercentRef.current = widthPercent;
-  const [peekOpen, setPeekOpen] = (0, import_react39.useState)(false);
-  const [flyoutWidthPx, setFlyoutWidthPx] = (0, import_react39.useState)();
-  const peekOpenTimerRef = (0, import_react39.useRef)(null);
-  const peekCloseTimerRef = (0, import_react39.useRef)(null);
-  const clearPeekOpenTimer = (0, import_react39.useCallback)(() => {
+  const [peekOpen, setPeekOpen] = (0, import_react40.useState)(false);
+  const [flyoutWidthPx, setFlyoutWidthPx] = (0, import_react40.useState)();
+  const peekOpenTimerRef = (0, import_react40.useRef)(null);
+  const peekCloseTimerRef = (0, import_react40.useRef)(null);
+  const clearPeekOpenTimer = (0, import_react40.useCallback)(() => {
     if (peekOpenTimerRef.current != null) {
       window.clearTimeout(peekOpenTimerRef.current);
       peekOpenTimerRef.current = null;
     }
   }, []);
-  const clearPeekCloseTimer = (0, import_react39.useCallback)(() => {
+  const clearPeekCloseTimer = (0, import_react40.useCallback)(() => {
     if (peekCloseTimerRef.current != null) {
       window.clearTimeout(peekCloseTimerRef.current);
       peekCloseTimerRef.current = null;
     }
   }, []);
-  const closePeekImmediate = (0, import_react39.useCallback)(() => {
+  const closePeekImmediate = (0, import_react40.useCallback)(() => {
     clearPeekOpenTimer();
     clearPeekCloseTimer();
     setPeekOpen(false);
   }, [clearPeekCloseTimer, clearPeekOpenTimer]);
-  const closePeek = (0, import_react39.useCallback)(() => {
+  const closePeek = (0, import_react40.useCallback)(() => {
     closePeekImmediate();
   }, [closePeekImmediate]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (enabled) return;
     closePeek();
   }, [closePeek, enabled]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const el = rootRef.current;
     if (!el) return;
     const syncFlyoutWidth = () => {
@@ -11111,8 +11292,8 @@ function SidebarPeek({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  const pointerRef = (0, import_react39.useRef)({ x: 0, y: 0 });
-  (0, import_react39.useEffect)(() => {
+  const pointerRef = (0, import_react40.useRef)({ x: 0, y: 0 });
+  (0, import_react40.useEffect)(() => {
     if (!enabled) return;
     const onPointerMove = (event) => {
       pointerRef.current = { x: event.clientX, y: event.clientY };
@@ -11120,7 +11301,7 @@ function SidebarPeek({
     document.addEventListener("pointermove", onPointerMove, { passive: true });
     return () => document.removeEventListener("pointermove", onPointerMove);
   }, [enabled]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!peekOpen) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") closePeek();
@@ -11128,17 +11309,17 @@ function SidebarPeek({
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [closePeek, peekOpen]);
-  (0, import_react39.useEffect)(
+  (0, import_react40.useEffect)(
     () => () => {
       clearPeekOpenTimer();
       clearPeekCloseTimer();
     },
     [clearPeekCloseTimer, clearPeekOpenTimer]
   );
-  const cancelPeekOpen = (0, import_react39.useCallback)(() => {
+  const cancelPeekOpen = (0, import_react40.useCallback)(() => {
     clearPeekOpenTimer();
   }, [clearPeekOpenTimer]);
-  const schedulePeekOpen = (0, import_react39.useCallback)(() => {
+  const schedulePeekOpen = (0, import_react40.useCallback)(() => {
     if (!enabled || peekOpen) return;
     clearPeekCloseTimer();
     clearPeekOpenTimer();
@@ -11147,7 +11328,7 @@ function SidebarPeek({
       peekOpenTimerRef.current = null;
     }, PEEK_OPEN_DELAY_MS);
   }, [clearPeekCloseTimer, clearPeekOpenTimer, enabled, peekOpen]);
-  const schedulePeekClose = (0, import_react39.useCallback)(
+  const schedulePeekClose = (0, import_react40.useCallback)(
     (delay = PEEK_CLOSE_DELAY_MS) => {
       clearPeekOpenTimer();
       if (!peekOpen) return;
@@ -11159,10 +11340,10 @@ function SidebarPeek({
     },
     [clearPeekCloseTimer, clearPeekOpenTimer, closePeekImmediate, peekOpen]
   );
-  const cancelPeekClose = (0, import_react39.useCallback)(() => {
+  const cancelPeekClose = (0, import_react40.useCallback)(() => {
     clearPeekCloseTimer();
   }, [clearPeekCloseTimer]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!peekOpen || !enabled) return;
     const frame = requestAnimationFrame(() => {
       const root = rootRef.current;
@@ -11184,7 +11365,7 @@ function SidebarPeek({
     });
     return () => cancelAnimationFrame(frame);
   }, [cancelPeekClose, enabled, peekOpen]);
-  const contextValue = (0, import_react39.useMemo)(
+  const contextValue = (0, import_react40.useMemo)(
     () => ({
       enabled,
       mode,
@@ -11303,12 +11484,12 @@ function useSidebarPeek() {
 }
 
 // src/components/Sidebar/SidebarProvider.tsx
-var import_react40 = require("react");
-var import_react41 = require("@refineui/utilities/react");
+var import_react41 = require("react");
+var import_react42 = require("@refineui/utilities/react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
-var SidebarContext = (0, import_react40.createContext)(null);
+var SidebarContext = (0, import_react41.createContext)(null);
 function useSidebarContext(component) {
-  const value = (0, import_react40.useContext)(SidebarContext);
+  const value = (0, import_react41.useContext)(SidebarContext);
   if (!value) throw new Error(`${component} must be used within <SidebarProvider>.`);
   return value;
 }
@@ -11322,22 +11503,22 @@ function SidebarProvider({
   id,
   children
 }) {
-  const [uncontrolled, setUncontrolled] = (0, import_react40.useState)(defaultOpen);
+  const [uncontrolled, setUncontrolled] = (0, import_react41.useState)(defaultOpen);
   const open = openProp ?? uncontrolled;
-  const generatedId = (0, import_react40.useId)();
+  const generatedId = (0, import_react41.useId)();
   const sidebarId = id ?? generatedId;
-  const toggle = (0, import_react40.useCallback)(() => {
+  const toggle = (0, import_react41.useCallback)(() => {
     const next = !open;
     if (openProp === void 0) setUncontrolled(next);
     onOpenChange?.(next);
   }, [onOpenChange, open, openProp]);
-  const value = (0, import_react40.useMemo)(
+  const value = (0, import_react41.useMemo)(
     () => ({ open, sidebarId, toggle }),
     [open, sidebarId, toggle]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(SidebarContext.Provider, { value, children });
 }
-var SidebarTrigger = (0, import_react40.forwardRef)(function SidebarTrigger2({
+var SidebarTrigger = (0, import_react41.forwardRef)(function SidebarTrigger2({
   asChild = false,
   onClick,
   className,
@@ -11362,7 +11543,7 @@ var SidebarTrigger = (0, import_react40.forwardRef)(function SidebarTrigger2({
       if (!event.defaultPrevented) toggle();
     }
   };
-  if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react41.Slot, { ...shared, children });
+  if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react42.Slot, { ...shared, children });
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     Button,
     {
@@ -11379,7 +11560,7 @@ var SidebarTrigger = (0, import_react40.forwardRef)(function SidebarTrigger2({
 
 // src/components/Pagination/Pagination.tsx
 var import_clsx84 = require("clsx");
-var import_tokens25 = require("@refineui/tokens");
+var import_tokens24 = require("@refineui/tokens");
 var import_color10 = require("@refineui/utilities/color");
 
 // src/components/Pagination/style.ts
@@ -11442,7 +11623,7 @@ function PaginationNavButton({
         WebIcon,
         {
           name: isPrev ? "chevron-left" : "chevron-right",
-          size: import_tokens25.iconSizes.medium,
+          size: import_tokens24.iconSizes.medium,
           color: iconColor,
           fallback: isPrev ? "\u2039" : "\u203A"
         }
@@ -11469,7 +11650,7 @@ function PaginationEllipsis({ className, ...props }) {
         WebIcon,
         {
           name: "more-horizontal",
-          size: import_tokens25.iconSizes.medium,
+          size: import_tokens24.iconSizes.medium,
           color: (0, import_color10.resolveColorTokenValue)(componentColorTokens.pagination.navIcon.default),
           fallback: "\u2026"
         }
@@ -11483,14 +11664,14 @@ function Pagination(props) {
 
 // src/components/PopOver/PopOver.tsx
 var import_clsx85 = require("clsx");
-var import_react43 = require("react");
-var import_tokens27 = require("@refineui/tokens");
+var import_react44 = require("react");
+var import_tokens26 = require("@refineui/tokens");
 var import_color11 = require("@refineui/utilities/color");
-var import_react44 = require("@refineui/utilities/react");
+var import_react45 = require("@refineui/utilities/react");
 
 // src/components/shared/FloatingSurface.tsx
-var import_react42 = require("react");
-var import_tokens26 = require("@refineui/tokens");
+var import_react43 = require("react");
+var import_tokens25 = require("@refineui/tokens");
 
 // src/components/shared/floatingOutline.ts
 var PATH_PRECISION = 100;
@@ -11587,11 +11768,15 @@ function buildFloatingOutline({
 
 // src/components/shared/FloatingSurface.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var useIsomorphicLayoutEffect6 = typeof document !== "undefined" ? import_react42.useLayoutEffect : import_react42.useEffect;
-var SHADOW_BLEED = parseFloat(import_tokens26.spacings.sizeXXXLarge);
-var STROKE = parseFloat(import_tokens26.strokeWidths.strokeWidthThin);
+var useIsomorphicLayoutEffect6 = typeof document !== "undefined" ? import_react43.useLayoutEffect : import_react43.useEffect;
+var SHADOW_BLEED = parseFloat(import_tokens25.spacings.sizeXXXLarge);
+var STROKE = parseFloat(import_tokens25.strokeWidths.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] = (0, import_react42.useState)(null);
+  const [size, setSize] = (0, import_react43.useState)(null);
   useIsomorphicLayoutEffect6(() => {
     const panel = panelRef.current;
     if (!panel) return;
@@ -11648,8 +11833,8 @@ function FloatingSurface({
   const shape = buildFloatingOutline(geometry);
   const outline = buildFloatingOutline({ ...geometry, inset: STROKE / 2 });
   const box = floatingShapeSize(size.width, size.height, side, bh);
-  const holeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${box.width + SHADOW_BLEED * 2}" height="${box.height + SHADOW_BLEED * 2}"><path transform="translate(${SHADOW_BLEED} ${SHADOW_BLEED})" d="${shape}"/></svg>`;
-  const holeMask = `linear-gradient(#000 0 0), url("data:image/svg+xml,${encodeURIComponent(holeSvg)}")`;
+  const 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,
@@ -11667,10 +11852,19 @@ function FloatingSurface({
     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__ */ (0, import_jsx_runtime64.jsxs)("div", { "data-refineui": "floating-chrome", "aria-hidden": true, className: "pointer-events-none absolute -z-1", style: rootStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "absolute", style: shadowStyle, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { "data-refineui": "floating-shadow", className: "absolute", style: { inset: SHADOW_BLEED }, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "absolute inset-0", style: { clipPath: clip, backgroundColor: borderColor } }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { "data-refineui": "floating-surface", className: "absolute inset-0", style: { clipPath: clip, backgroundColor } }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { "data-refineui": "floating-surface", className: "absolute inset-0", style: surfaceStyle }),
     /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "svg",
       {
@@ -11693,7 +11887,7 @@ var popoverStyles = {
   floatingRoot: "absolute z-refineui-popup",
   panelWrap: "relative inline-block min-w-refineui-popover-panel-width",
   /** Fill, stroke, and shadow come from `FloatingSurface`; the transparent border keeps the box size. */
-  panel: "relative z-0 box-border min-w-refineui-popover-panel-width rounded-refineui-xx-large border-refineui-thin border-transparent outline-none"
+  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") {
@@ -11718,15 +11912,15 @@ function popoverFloatingClasses(placement, align) {
 
 // src/components/PopOver/PopOver.tsx
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var PopoverContext = (0, import_react43.createContext)(null);
+var PopoverContext = (0, import_react44.createContext)(null);
 function usePopoverContext(component) {
-  const ctx = (0, import_react43.useContext)(PopoverContext);
+  const ctx = (0, import_react44.useContext)(PopoverContext);
   if (!ctx) throw new Error(`${component} must be used within <Popover>`);
   return ctx;
 }
-var BEAK_TIP_GAP = import_tokens27.spacings.sizeXXSmall;
+var BEAK_TIP_GAP = import_tokens26.spacings.sizeXXSmall;
 var POPOVER_GAP = `calc(${import_tokens3.componentSizes.popoverBeakHeight} + ${BEAK_TIP_GAP})`;
-var SIDE_BEAK_INSET = import_tokens27.spacings.sizeMedium;
+var SIDE_BEAK_INSET = import_tokens26.spacings.sizeMedium;
 var beakSideByPlacement = {
   bottom: "top",
   top: "bottom",
@@ -11740,35 +11934,35 @@ function floatingGapStyle(placement) {
   return { marginLeft: POPOVER_GAP };
 }
 function Popover({ children, className, open: openProp, defaultOpen = false, onOpenChange, ...props }) {
-  const [internalOpen, setInternalOpen] = (0, import_react43.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react44.useState)(defaultOpen);
   const open = openProp ?? internalOpen;
-  const setOpen = (0, import_react43.useCallback)(
+  const setOpen = (0, import_react44.useCallback)(
     (next) => {
       if (openProp === void 0) setInternalOpen(next);
       onOpenChange?.(next);
     },
     [openProp, onOpenChange]
   );
-  const toggle = (0, import_react43.useCallback)(() => setOpen(!open), [open, setOpen]);
-  const containerRef = (0, import_react43.useRef)(null);
-  const contentRef = (0, import_react43.useRef)(null);
-  const triggerRef = (0, import_react43.useRef)(null);
-  const contentId = (0, import_react43.useId)();
-  (0, import_react43.useEffect)(() => {
+  const toggle = (0, import_react44.useCallback)(() => setOpen(!open), [open, setOpen]);
+  const containerRef = (0, import_react44.useRef)(null);
+  const contentRef = (0, import_react44.useRef)(null);
+  const triggerRef = (0, import_react44.useRef)(null);
+  const contentId = (0, import_react44.useId)();
+  (0, import_react44.useEffect)(() => {
     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]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     const onKey = (e) => {
       if (e instanceof KeyboardEvent && e.key === "Escape") setOpen(false);
     };
     if (open) document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, setOpen]);
-  const onTriggerKeyDown = (0, import_react43.useCallback)(
+  const onTriggerKeyDown = (0, import_react44.useCallback)(
     (e) => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
@@ -11777,7 +11971,7 @@ function Popover({ children, className, open: openProp, defaultOpen = false, onO
     },
     [toggle]
   );
-  const value = (0, import_react43.useMemo)(
+  const value = (0, import_react44.useMemo)(
     () => ({
       open,
       setOpen,
@@ -11803,11 +11997,11 @@ function Popover({ children, className, open: openProp, defaultOpen = false, onO
 }
 function PopoverTrigger({ children, className, ...props }) {
   const { open, toggle, triggerRef, contentId, onTriggerKeyDown } = usePopoverContext("PopoverTrigger");
-  const mergeEl = (0, import_react44.getMergeableTriggerChild)(children);
+  const mergeEl = (0, import_react45.getMergeableTriggerChild)(children);
   if (mergeEl) {
     const passthrough = props;
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-      import_react44.Slot,
+      import_react45.Slot,
       {
         ref: triggerRef,
         ...props,
@@ -11894,7 +12088,7 @@ function PopoverContent({
             style: {
               ...styleProp && typeof styleProp === "object" ? styleProp : {},
               minWidth: import_tokens3.componentSizes.popoverPanelWidth,
-              padding: import_tokens27.spacings.sizeLarge,
+              padding: import_tokens26.spacings.sizeLarge,
               color: (0, import_color11.resolveColorTokenValue)(palette.foreground)
             },
             ...props,
@@ -11907,7 +12101,7 @@ function PopoverContent({
             panelRef: contentRef,
             side: beakSideByPlacement[placement],
             align,
-            radius: import_tokens27.borderRadii.roundedXXLarge,
+            radius: import_tokens26.borderRadii.roundedXXLarge,
             beakWidth: import_tokens3.componentSizes.popoverBeakWidth,
             beakHeight: import_tokens3.componentSizes.popoverBeakHeight,
             tipRadius: import_tokens3.componentSizes.popoverBeakTipRadius,
@@ -11997,7 +12191,7 @@ function Skeleton({
 
 // src/components/Slider/Slider.tsx
 var import_clsx87 = require("clsx");
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/components/Slider/style.ts
 var sliderStyles = {
@@ -12023,7 +12217,7 @@ function Slider({
   style,
   ...props
 }) {
-  const [internalFillPct, setInternalFillPct] = (0, import_react45.useState)(() => {
+  const [internalFillPct, setInternalFillPct] = (0, import_react46.useState)(() => {
     const v = defaultValue !== void 0 ? Number(defaultValue) : (min + max) / 2;
     return clampPct((v - min) / (max - min) * 100);
   });
@@ -12064,8 +12258,8 @@ function Slider({
 
 // src/components/Carousel/Carousel.tsx
 var import_clsx89 = require("clsx");
-var import_tokens28 = require("@refineui/tokens");
-var import_react46 = require("react");
+var import_tokens27 = require("@refineui/tokens");
+var import_react47 = require("react");
 
 // src/components/Carousel/style.ts
 var import_clsx88 = require("clsx");
@@ -12089,8 +12283,8 @@ var carouselStyles = {
   ),
   indicatorThumb: (0, import_clsx88.clsx)(
     "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"
@@ -12099,9 +12293,9 @@ var carouselStyles = {
 // src/components/Carousel/Carousel.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var DRAG_COMMIT_RATIO = 0.18;
-var CarouselContext = (0, import_react46.createContext)(null);
+var CarouselContext = (0, import_react47.createContext)(null);
 function useCarouselContext(component) {
-  const v = (0, import_react46.useContext)(CarouselContext);
+  const v = (0, import_react47.useContext)(CarouselContext);
   if (!v) throw new Error(`${component} must be used within Carousel.`);
   return v;
 }
@@ -12120,13 +12314,13 @@ function Carousel({
   ...props
 }) {
   const isControlled = indexControlled !== void 0;
-  const [internalIndex, setInternalIndex] = (0, import_react46.useState)(defaultIndex);
-  const [count, setCount] = (0, import_react46.useState)(0);
-  const [trackIndex, setTrackIndex] = (0, import_react46.useState)(defaultIndex);
-  const [instant, setInstant] = (0, import_react46.useState)(false);
+  const [internalIndex, setInternalIndex] = (0, import_react47.useState)(defaultIndex);
+  const [count, setCount] = (0, import_react47.useState)(0);
+  const [trackIndex, setTrackIndex] = (0, import_react47.useState)(defaultIndex);
+  const [instant, setInstant] = (0, import_react47.useState)(false);
   const index = isControlled ? indexControlled : internalIndex;
   const loopActive = loop && count > 1;
-  const commitLogical = (0, import_react46.useCallback)(
+  const commitLogical = (0, import_react47.useCallback)(
     (next) => {
       const normalized = clampIndex(next, Math.max(count, 1));
       if (!isControlled) setInternalIndex(normalized);
@@ -12134,13 +12328,20 @@ function Carousel({
     },
     [count, isControlled, onIndexChange]
   );
-  (0, import_react46.useLayoutEffect)(() => {
+  const snapTrackTo = (0, import_react47.useCallback)((next) => {
+    setInstant(true);
+    setTrackIndex(next);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setInstant(false));
+    });
+  }, []);
+  (0, import_react47.useLayoutEffect)(() => {
     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]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (count <= 0) return;
     if (!loopActive) {
       setTrackIndex(clampIndex(index, count));
@@ -12154,7 +12355,7 @@ function Carousel({
   }, [index, count, loopActive]);
   const canScrollPrev = loopActive ? true : index > 0;
   const canScrollNext = loopActive ? true : index < count - 1;
-  const scrollTo = (0, import_react46.useCallback)(
+  const scrollTo = (0, import_react47.useCallback)(
     (i) => {
       if (count <= 0) return;
       const next = clampIndex(i, count);
@@ -12163,7 +12364,7 @@ function Carousel({
     },
     [commitLogical, count, loopActive]
   );
-  const scrollPrev = (0, import_react46.useCallback)(() => {
+  const scrollPrev = (0, import_react47.useCallback)(() => {
     if (count <= 0) return;
     if (loopActive) {
       if (trackIndex < 1 || trackIndex > count) return;
@@ -12176,7 +12377,7 @@ function Carousel({
       setTrackIndex(index - 1);
     }
   }, [commitLogical, count, index, loopActive, trackIndex]);
-  const scrollNext = (0, import_react46.useCallback)(() => {
+  const scrollNext = (0, import_react47.useCallback)(() => {
     if (count <= 0) return;
     if (loopActive) {
       if (trackIndex < 1 || trackIndex > count) return;
@@ -12189,23 +12390,12 @@ function Carousel({
       setTrackIndex(index + 1);
     }
   }, [commitLogical, count, index, loopActive, trackIndex]);
-  const onTrackSettled = (0, import_react46.useCallback)(() => {
+  const onTrackSettled = (0, import_react47.useCallback)(() => {
     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]);
-  const ctx = (0, import_react46.useMemo)(
+    if (trackIndex === 0) snapTrackTo(count);
+    else if (trackIndex === count + 1) snapTrackTo(1);
+  }, [count, loopActive, snapTrackTo, trackIndex]);
+  const ctx = (0, import_react47.useMemo)(
     () => ({
       index,
       count,
@@ -12284,21 +12474,21 @@ function CarouselContent({ className, children, ...props }) {
     instant,
     onTrackSettled
   } = useCarouselContext("CarouselContent");
-  const viewportRef = (0, import_react46.useRef)(null);
-  const dragStartX = (0, import_react46.useRef)(null);
-  const [dragPx, setDragPx] = (0, import_react46.useState)(0);
-  const [dragging, setDragging] = (0, import_react46.useState)(false);
-  const slides = import_react46.Children.toArray(children).filter(import_react46.isValidElement);
+  const viewportRef = (0, import_react47.useRef)(null);
+  const dragStartX = (0, import_react47.useRef)(null);
+  const [dragPx, setDragPx] = (0, import_react47.useState)(0);
+  const [dragging, setDragging] = (0, import_react47.useState)(false);
+  const slides = import_react47.Children.toArray(children).filter(import_react47.isValidElement);
   const slideCount = slides.length;
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     setCount(slideCount);
   }, [setCount, slideCount]);
   const trackSlides = loop && slides.length > 1 ? [
-    (0, import_react46.cloneElement)(slides[slides.length - 1], { key: "__carousel-clone-last" }),
+    (0, import_react47.cloneElement)(slides[slides.length - 1], { key: "__carousel-clone-last" }),
     ...slides,
-    (0, import_react46.cloneElement)(slides[0], { key: "__carousel-clone-first" })
+    (0, import_react47.cloneElement)(slides[0], { key: "__carousel-clone-first" })
   ] : slides;
-  const endDrag = (0, import_react46.useCallback)(
+  const endDrag = (0, import_react47.useCallback)(
     (clientX) => {
       if (dragStartX.current == null) return;
       const width = viewportRef.current?.offsetWidth ?? 1;
@@ -12373,7 +12563,7 @@ function CarouselContent({ className, children, ...props }) {
     }
   );
 }
-var CarouselItem = (0, import_react46.forwardRef)(function CarouselItem2({ className, children, ...props }, ref) {
+var CarouselItem = (0, import_react47.forwardRef)(function CarouselItem2({ className, children, ...props }, ref) {
   useCarouselContext("CarouselItem");
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "div",
@@ -12415,7 +12605,7 @@ function CarouselPrevious({ className, disabled, onClick, ...props }) {
         WebIcon,
         {
           name: "chevron-left",
-          size: import_tokens28.iconSizes.small,
+          size: import_tokens27.iconSizes.small,
           color: "currentColor",
           iconStyle: "filled",
           fallback: "\u2039"
@@ -12447,7 +12637,7 @@ function CarouselNext({ className, disabled, onClick, ...props }) {
         WebIcon,
         {
           name: "chevron-right",
-          size: import_tokens28.iconSizes.small,
+          size: import_tokens27.iconSizes.small,
           color: "currentColor",
           iconStyle: "filled",
           fallback: "\u203A"
@@ -12458,9 +12648,10 @@ function CarouselNext({ className, disabled, onClick, ...props }) {
 }
 function CarouselIndicators({ className, ...props }) {
   const { count, index, scrollTo } = useCarouselContext("CarouselIndicators");
-  const trackRef = (0, import_react46.useRef)(null);
-  const [thumb, setThumb] = (0, import_react46.useState)({ width: 0, x: 0, ready: false });
-  const updateThumb = (0, import_react46.useCallback)(() => {
+  const trackRef = (0, import_react47.useRef)(null);
+  const [thumb, setThumb] = (0, import_react47.useState)({ width: 0, x: 0, ready: false });
+  const [animate, setAnimate] = (0, import_react47.useState)(false);
+  const updateThumb = (0, import_react47.useCallback)(() => {
     const el = trackRef.current;
     if (!el || count <= 0) {
       setThumb({ width: 0, x: 0, ready: false });
@@ -12475,10 +12666,25 @@ function CarouselIndicators({ className, ...props }) {
       ready: true
     });
   }, [count, index]);
-  (0, import_react46.useLayoutEffect)(() => {
+  (0, import_react47.useLayoutEffect)(() => {
     updateThumb();
   }, [updateThumb]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
+    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]);
+  (0, import_react47.useEffect)(() => {
     const el = trackRef.current;
     if (!el) return;
     const ro = new ResizeObserver(() => updateThumb());
@@ -12505,6 +12711,7 @@ function CarouselIndicators({ className, ...props }) {
           {
             "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
@@ -12531,7 +12738,7 @@ function CarouselIndicators({ className, ...props }) {
 
 // src/components/Bubble/Bubble.tsx
 var import_clsx91 = require("clsx");
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/Bubble/style.ts
 var import_clsx90 = require("clsx");
@@ -12597,20 +12804,20 @@ var bubbleContentVariantClass = {
 
 // src/components/Bubble/Bubble.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
-var BubbleContext = (0, import_react47.createContext)(null);
+var BubbleContext = (0, import_react48.createContext)(null);
 function useBubbleContext(component) {
-  const value = (0, import_react47.useContext)(BubbleContext);
+  const value = (0, import_react48.useContext)(BubbleContext);
   if (!value) throw new Error(`${component} must be used within Bubble.`);
   return value;
 }
 function isBubbleReactionsElement(node) {
-  return (0, import_react47.isValidElement)(node) && node.type === BubbleReactions;
+  return (0, import_react48.isValidElement)(node) && node.type === BubbleReactions;
 }
 function partitionBubbleChildren(children) {
   const top = [];
   const middle = [];
   const bottom = [];
-  import_react47.Children.forEach(children, (child) => {
+  import_react48.Children.forEach(children, (child) => {
     if (!isBubbleReactionsElement(child)) {
       middle.push(child);
       return;
@@ -12712,8 +12919,8 @@ function BubbleReactions({
 
 // src/components/Stepper/Stepper.tsx
 var import_clsx93 = require("clsx");
-var import_tokens29 = require("@refineui/tokens");
-var import_react48 = require("react");
+var import_tokens28 = require("@refineui/tokens");
+var import_react49 = require("react");
 
 // src/components/Stepper/style.ts
 var import_clsx92 = require("clsx");
@@ -12822,16 +13029,16 @@ var stepperConnectorVars = {
 
 // src/components/Stepper/Stepper.tsx
 var import_jsx_runtime70 = require("react/jsx-runtime");
-var StepperContext = (0, import_react48.createContext)(null);
-var StepperItemContext = (0, import_react48.createContext)(null);
-var StepperListRegistryContext = (0, import_react48.createContext)(null);
+var StepperContext = (0, import_react49.createContext)(null);
+var StepperItemContext = (0, import_react49.createContext)(null);
+var StepperListRegistryContext = (0, import_react49.createContext)(null);
 function useStepperContext(component) {
-  const v = (0, import_react48.useContext)(StepperContext);
+  const v = (0, import_react49.useContext)(StepperContext);
   if (!v) throw new Error(`${component} must be used within Stepper.`);
   return v;
 }
 function useStepperItemContext(component) {
-  const v = (0, import_react48.useContext)(StepperItemContext);
+  const v = (0, import_react49.useContext)(StepperItemContext);
   if (!v) throw new Error(`${component} must be used within StepperItem.`);
   return v;
 }
@@ -12851,16 +13058,16 @@ function Stepper({
   ...props
 }) {
   const isControlled = valueControlled !== void 0;
-  const [internalValue, setInternalValue] = (0, import_react48.useState)(defaultValue);
+  const [internalValue, setInternalValue] = (0, import_react49.useState)(defaultValue);
   const value = isControlled ? valueControlled : internalValue;
-  const setValue = (0, import_react48.useCallback)(
+  const setValue = (0, import_react49.useCallback)(
     (next) => {
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const ctx = (0, import_react48.useMemo)(
+  const ctx = (0, import_react49.useMemo)(
     () => ({
       value,
       setValue,
@@ -12883,9 +13090,9 @@ function Stepper({
 }
 function StepperList({ className, children, ...props }) {
   const { orientation, value } = useStepperContext("StepperList");
-  const cursorRef = (0, import_react48.useRef)(null);
+  const cursorRef = (0, import_react49.useRef)(null);
   cursorRef.current = null;
-  const registry = (0, import_react48.useMemo)(
+  const registry = (0, import_react49.useMemo)(
     () => ({
       noteItem(itemValue) {
         cursorRef.current = itemValue;
@@ -12922,7 +13129,7 @@ function StepperItem({
   ...props
 }) {
   const { value, setValue, orientation, interactive } = useStepperContext("StepperItem");
-  const registry = (0, import_react48.useContext)(StepperListRegistryContext);
+  const registry = (0, import_react49.useContext)(StepperListRegistryContext);
   registry?.noteItem(itemValue);
   const state = resolveState2(itemValue, value);
   const canActivate = interactive && !disabled;
@@ -12938,7 +13145,7 @@ function StepperItem({
       activate();
     }
   };
-  const itemCtx = (0, import_react48.useMemo)(
+  const itemCtx = (0, import_react49.useMemo)(
     () => ({ state, disabled }),
     [state, disabled]
   );
@@ -12974,7 +13181,7 @@ function StepperIndicator({ className, children, ...props }) {
     WebIcon,
     {
       name: "checkmark",
-      size: import_tokens29.iconSizes.xsmall,
+      size: import_tokens28.iconSizes.xsmall,
       color: "currentColor",
       iconStyle: "filled",
       fallback: "\u2713",
@@ -13037,7 +13244,7 @@ function StepperDescription({ className, ...props }) {
 }
 function StepperSeparator({ className, ...props }) {
   const { orientation } = useStepperContext("StepperSeparator");
-  const registry = (0, import_react48.useContext)(StepperListRegistryContext);
+  const registry = (0, import_react49.useContext)(StepperListRegistryContext);
   const state = registry?.takeSeparatorState() ?? "upcoming";
   const vertical = orientation === "vertical";
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
@@ -13098,7 +13305,7 @@ StepperSeparator.displayName = "StepperSeparator";
 
 // src/components/Resizable/Resizable.tsx
 var import_clsx95 = require("clsx");
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/components/Resizable/style.ts
 var import_clsx94 = require("clsx");
@@ -13139,9 +13346,9 @@ var KEYBOARD_STEP_LARGE = 10;
 var DEFAULT_SIZE = 50;
 var DEFAULT_MIN_SIZE = 10;
 var DEFAULT_MAX_SIZE = 100;
-var ResizableContext = (0, import_react49.createContext)(null);
+var ResizableContext = (0, import_react50.createContext)(null);
 function useResizableContext(component) {
-  const v = (0, import_react49.useContext)(ResizableContext);
+  const v = (0, import_react50.useContext)(ResizableContext);
   if (!v) throw new Error(`${component} must be used within ResizablePanelGroup.`);
   return v;
 }
@@ -13200,13 +13407,13 @@ function ResizablePanelGroup({
   onLayout,
   ...props
 }) {
-  const groupRef = (0, import_react49.useRef)(null);
-  const panelsRef = (0, import_react49.useRef)(/* @__PURE__ */ new Map());
-  const orderCounterRef = (0, import_react49.useRef)(0);
-  const [sizes, setSizes] = (0, import_react49.useState)({});
-  const onLayoutRef = (0, import_react49.useRef)(onLayout);
+  const groupRef = (0, import_react50.useRef)(null);
+  const panelsRef = (0, import_react50.useRef)(/* @__PURE__ */ new Map());
+  const orderCounterRef = (0, import_react50.useRef)(0);
+  const [sizes, setSizes] = (0, import_react50.useState)({});
+  const onLayoutRef = (0, import_react50.useRef)(onLayout);
   onLayoutRef.current = onLayout;
-  const syncInitialSizes = (0, import_react49.useCallback)(() => {
+  const syncInitialSizes = (0, import_react50.useCallback)(() => {
     const panels = [...panelsRef.current.values()].sort((a, b) => a.order - b.order);
     if (panels.length === 0) return;
     setSizes((prev) => {
@@ -13241,7 +13448,7 @@ function ResizablePanelGroup({
       return base;
     });
   }, []);
-  const registerPanel = (0, import_react49.useCallback)(
+  const registerPanel = (0, import_react50.useCallback)(
     (panel) => {
       const existing = panelsRef.current.get(panel.id);
       const order = existing?.order ?? orderCounterRef.current++;
@@ -13250,7 +13457,7 @@ function ResizablePanelGroup({
     },
     [syncInitialSizes]
   );
-  const unregisterPanel = (0, import_react49.useCallback)((id) => {
+  const unregisterPanel = (0, import_react50.useCallback)((id) => {
     panelsRef.current.delete(id);
     setSizes((prev) => {
       if (!(id in prev)) return prev;
@@ -13259,13 +13466,13 @@ function ResizablePanelGroup({
       return next;
     });
   }, []);
-  const getPanel = (0, import_react49.useCallback)((id) => panelsRef.current.get(id), []);
-  const emitPanelResize = (0, import_react49.useCallback)((next) => {
+  const getPanel = (0, import_react50.useCallback)((id) => panelsRef.current.get(id), []);
+  const emitPanelResize = (0, import_react50.useCallback)((next) => {
     for (const [id, size] of Object.entries(next)) {
       panelsRef.current.get(id)?.onResize?.(size);
     }
   }, []);
-  const resizeBetween = (0, import_react49.useCallback)(
+  const resizeBetween = (0, import_react50.useCallback)(
     (leftId, rightId, deltaPct) => {
       setSizes((prev) => {
         const next = applyResize(
@@ -13282,7 +13489,7 @@ function ResizablePanelGroup({
     },
     [emitPanelResize]
   );
-  const setBetween = (0, import_react49.useCallback)(
+  const setBetween = (0, import_react50.useCallback)(
     (leftId, rightId, leftSize) => {
       setSizes((prev) => {
         const left = panelsRef.current.get(leftId);
@@ -13307,13 +13514,13 @@ function ResizablePanelGroup({
     },
     [emitPanelResize]
   );
-  (0, import_react49.useLayoutEffect)(() => {
+  (0, import_react50.useLayoutEffect)(() => {
     const ids = orderedPanelIds(panelsRef.current);
     if (ids.length === 0) return;
     if (ids.some((id) => sizes[id] === void 0)) return;
     onLayoutRef.current?.(ids.map((id) => sizes[id]));
   }, [sizes]);
-  const ctx = (0, import_react49.useMemo)(
+  const ctx = (0, import_react50.useMemo)(
     () => ({
       orientation,
       groupRef,
@@ -13362,11 +13569,11 @@ function ResizablePanel({
   onResize,
   ...props
 }) {
-  const id = (0, import_react49.useId)();
+  const id = (0, import_react50.useId)();
   const { orientation, sizes, registerPanel, unregisterPanel } = useResizableContext("ResizablePanel");
-  const onResizeRef = (0, import_react49.useRef)(onResize);
+  const onResizeRef = (0, import_react50.useRef)(onResize);
   onResizeRef.current = onResize;
-  (0, import_react49.useLayoutEffect)(() => {
+  (0, import_react50.useLayoutEffect)(() => {
     registerPanel({
       id,
       defaultSize,
@@ -13424,11 +13631,11 @@ function ResizableHandle({
     resizeBetween,
     setBetween
   } = useResizableContext("ResizableHandle");
-  const handleRef = (0, import_react49.useRef)(null);
-  const [active, setActive] = (0, import_react49.useState)(false);
-  const [, setAdjacentReady] = (0, import_react49.useState)(false);
-  const dragRef = (0, import_react49.useRef)(null);
-  (0, import_react49.useLayoutEffect)(() => {
+  const handleRef = (0, import_react50.useRef)(null);
+  const [active, setActive] = (0, import_react50.useState)(false);
+  const [, setAdjacentReady] = (0, import_react50.useState)(false);
+  const dragRef = (0, import_react50.useRef)(null);
+  (0, import_react50.useLayoutEffect)(() => {
     setAdjacentReady(true);
   }, []);
   const adjacent = handleRef.current ? findAdjacentPanelIds(handleRef.current) : { leftId: null, rightId: null };
@@ -13439,7 +13646,7 @@ function ResizableHandle({
   const ariaMin = leftPanel?.minSize ?? 0;
   const ariaMax = leftPanel?.maxSize ?? DEFAULT_MAX_SIZE;
   const defaultKeyshortcuts = orientation === "horizontal" ? "ArrowLeft ArrowRight Home End" : "ArrowUp ArrowDown Home End";
-  const keepFocus = (0, import_react49.useCallback)(() => {
+  const keepFocus = (0, import_react50.useCallback)(() => {
     const el = handleRef.current;
     if (el && document.activeElement !== el) {
       el.focus({ preventScroll: true });
@@ -13584,8 +13791,8 @@ function ResizableHandle({
 
 // src/components/SpinButton/SpinButton.tsx
 var import_clsx96 = require("clsx");
-var import_react50 = require("react");
-var import_tokens30 = require("@refineui/tokens");
+var import_react51 = require("react");
+var import_tokens29 = require("@refineui/tokens");
 
 // src/components/SpinButton/style.ts
 var spinButtonStyles = {
@@ -13622,8 +13829,8 @@ function SpinButton({
   onKeyDown,
   ...props
 }) {
-  const [draftValue, setDraftValue] = (0, import_react50.useState)(String(value));
-  (0, import_react50.useEffect)(() => {
+  const [draftValue, setDraftValue] = (0, import_react51.useState)(String(value));
+  (0, import_react51.useEffect)(() => {
     setDraftValue(String(value));
   }, [value]);
   const clampValue2 = (next) => {
@@ -13794,7 +14001,7 @@ function SpinButton({
                     WebIcon,
                     {
                       name: "chevron-up",
-                      size: import_tokens30.iconSizes.xsmall,
+                      size: import_tokens29.iconSizes.xsmall,
                       color: "currentColor",
                       iconStyle: "filled",
                       fallback: "\u25B2"
@@ -13818,7 +14025,7 @@ function SpinButton({
                     WebIcon,
                     {
                       name: "chevron-down",
-                      size: import_tokens30.iconSizes.xsmall,
+                      size: import_tokens29.iconSizes.xsmall,
                       color: "currentColor",
                       iconStyle: "filled",
                       fallback: "\u25BC"
@@ -13836,9 +14043,9 @@ function SpinButton({
 
 // src/components/Toast/Toast.tsx
 var import_clsx98 = require("clsx");
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_react_dom7 = require("react-dom");
-var import_tokens31 = require("@refineui/tokens");
+var import_tokens30 = require("@refineui/tokens");
 var import_animation7 = require("@refineui/utilities/animation");
 var import_color12 = require("@refineui/utilities/color");
 
@@ -13874,7 +14081,7 @@ var toastStyles = {
 
 // src/components/Toast/Toast.tsx
 var import_jsx_runtime73 = require("react/jsx-runtime");
-var useIsomorphicLayoutEffect7 = typeof document !== "undefined" ? import_react51.useLayoutEffect : import_react51.useEffect;
+var useIsomorphicLayoutEffect7 = typeof document !== "undefined" ? import_react52.useLayoutEffect : import_react52.useEffect;
 var ENTER_MS = 20;
 var LEAVE_MS = (0, import_animation7.motionMsToNumber)(componentTokens.toast.motion.leave) + 60;
 var DEFAULT_DURATION = 4200;
@@ -13897,10 +14104,10 @@ function gapPxFromSpacingToken(token) {
 var TOAST_NARROW_STACK_MQ = "(max-width: 480px), (hover: none)";
 function readToastStackGapPx() {
   if (typeof globalThis.matchMedia === "undefined") {
-    return gapPxFromSpacingToken(String(import_tokens31.spacings.sizeLarge));
+    return gapPxFromSpacingToken(String(import_tokens30.spacings.sizeLarge));
   }
   const mq = globalThis.matchMedia(TOAST_NARROW_STACK_MQ);
-  return gapPxFromSpacingToken(mq.matches ? String(import_tokens31.spacings.sizeMedium) : String(import_tokens31.spacings.sizeLarge));
+  return gapPxFromSpacingToken(mq.matches ? String(import_tokens30.spacings.sizeMedium) : String(import_tokens30.spacings.sizeLarge));
 }
 function subscribeToastStackGap(onChange) {
   if (typeof globalThis.matchMedia === "undefined") return () => {
@@ -13910,10 +14117,10 @@ function subscribeToastStackGap(onChange) {
   return () => mq.removeEventListener("change", onChange);
 }
 function useToastStackGapPx() {
-  return (0, import_react51.useSyncExternalStore)(
+  return (0, import_react52.useSyncExternalStore)(
     subscribeToastStackGap,
     readToastStackGapPx,
-    () => gapPxFromSpacingToken(String(import_tokens31.spacings.sizeLarge))
+    () => gapPxFromSpacingToken(String(import_tokens30.spacings.sizeLarge))
   );
 }
 function readToastNaturalHeight(li) {
@@ -14052,7 +14259,7 @@ var variantIconNames = {
   error: "error-circle",
   warning: "warning"
 };
-var Toast = (0, import_react51.forwardRef)(function Toast2(props, ref) {
+var Toast = (0, import_react52.forwardRef)(function Toast2(props, ref) {
   const { variant = "default", message, iconName, icon, action, className, stackState, style, ...rest } = props;
   const domProps = { ...rest };
   delete domProps.iconName;
@@ -14065,7 +14272,7 @@ var Toast = (0, import_react51.forwardRef)(function Toast2(props, ref) {
     WebIcon,
     {
       name: resolvedIconName,
-      size: import_tokens31.iconSizes.medium,
+      size: import_tokens30.iconSizes.medium,
       color: "currentColor",
       iconStyle: "filled"
     }
@@ -14108,12 +14315,12 @@ var Toast = (0, import_react51.forwardRef)(function Toast2(props, ref) {
   );
 });
 function SwipeableToast({ record, index, swipeDirections, onSwipeStart, onSwipeEnd }) {
-  const toastRef = (0, import_react51.useRef)(null);
-  const dragStartRef = (0, import_react51.useRef)(null);
-  const axisRef = (0, import_react51.useRef)(null);
-  const offsetRef = (0, import_react51.useRef)({ x: 0, y: 0 });
-  const [swiping, setSwiping] = (0, import_react51.useState)(false);
-  const clearSwipeOffset = (0, import_react51.useCallback)(() => {
+  const toastRef = (0, import_react52.useRef)(null);
+  const dragStartRef = (0, import_react52.useRef)(null);
+  const axisRef = (0, import_react52.useRef)(null);
+  const offsetRef = (0, import_react52.useRef)({ x: 0, y: 0 });
+  const [swiping, setSwiping] = (0, import_react52.useState)(false);
+  const clearSwipeOffset = (0, import_react52.useCallback)(() => {
     const el = toastRef.current;
     offsetRef.current = { x: 0, y: 0 };
     if (!el) return;
@@ -14214,8 +14421,8 @@ function Toaster({
   swipeDirections,
   className
 }) {
-  const toasterKeyRef = (0, import_react51.useRef)(/* @__PURE__ */ Symbol("refineui-toaster"));
-  const isPortalOwner = (0, import_react51.useSyncExternalStore)(
+  const toasterKeyRef = (0, import_react52.useRef)(/* @__PURE__ */ Symbol("refineui-toaster"));
+  const isPortalOwner = (0, import_react52.useSyncExternalStore)(
     (onStoreChange) => {
       toasterOwnerListeners.add(onStoreChange);
       return () => toasterOwnerListeners.delete(onStoreChange);
@@ -14223,12 +14430,12 @@ function Toaster({
     () => activeToasterKey === toasterKeyRef.current,
     () => false
   );
-  const [records, setRecords] = (0, import_react51.useState)([]);
-  const timerMapRef = (0, import_react51.useRef)({});
-  const pausedRef = (0, import_react51.useRef)(/* @__PURE__ */ new Set());
-  const rootRef = (0, import_react51.useRef)(null);
-  const itemRefs = (0, import_react51.useRef)({});
-  const [layoutTick, setLayoutTick] = (0, import_react51.useState)(0);
+  const [records, setRecords] = (0, import_react52.useState)([]);
+  const timerMapRef = (0, import_react52.useRef)({});
+  const pausedRef = (0, import_react52.useRef)(/* @__PURE__ */ new Set());
+  const rootRef = (0, import_react52.useRef)(null);
+  const itemRefs = (0, import_react52.useRef)({});
+  const [layoutTick, setLayoutTick] = (0, import_react52.useState)(0);
   const stackGapPx = useToastStackGapPx();
   const resolvedSwipe = swipeDirections ?? DEFAULT_SWIPE_DIRECTIONS;
   useIsomorphicLayoutEffect7(() => {
@@ -14242,13 +14449,13 @@ function Toaster({
       }
     };
   }, []);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!isPortalOwner) return;
     return subscribeToasts((next) => {
       setRecords(next.slice(0, Math.max(1, maxToasts)));
     });
   }, [isPortalOwner, maxToasts]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!isPortalOwner) return;
     for (const rec of records) {
       if (rec.phase === "leaving") continue;
@@ -14270,7 +14477,7 @@ function Toaster({
       }
     }
   }, [isPortalOwner, records]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     return () => {
       for (const handle of Object.values(timerMapRef.current)) {
         clearTimeout(handle);
@@ -14296,7 +14503,7 @@ function Toaster({
       li.style.height = `${slotHeight(idx)}px`;
     }
   }, [isPortalOwner, layoutTick, records, stackGapPx]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!isPortalOwner) return;
     const root = rootRef.current;
     if (!root) return;
@@ -14376,21 +14583,21 @@ function Toaster({
 
 // src/components/Tree/Tree.tsx
 var import_clsx100 = require("clsx");
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/components/Tree/context.ts
-var import_react52 = require("react");
-var import_tokens32 = require("@refineui/tokens");
+var import_react53 = require("react");
+var import_tokens31 = require("@refineui/tokens");
 var import_animation8 = require("@refineui/utilities/animation");
-var TREE_PANEL_MS = Number.parseFloat(import_tokens32.semanticInteraction.duration.accordionPanel) / 1e3;
-var TREE_CONTENT_MS = Number.parseFloat(import_tokens32.semanticInteraction.duration.accordionContent) / 1e3;
-var TREE_PANEL_EASE = import_tokens32.semanticInteraction.easing.panel;
-var TREE_CONTENT_EASE = import_tokens32.semanticInteraction.easing.content;
-var TreeContext = (0, import_react52.createContext)(null);
-var TreeItemContext = (0, import_react52.createContext)(null);
+var TREE_PANEL_MS = Number.parseFloat(import_tokens31.semanticInteraction.duration.accordionPanel) / 1e3;
+var TREE_CONTENT_MS = Number.parseFloat(import_tokens31.semanticInteraction.duration.accordionContent) / 1e3;
+var TREE_PANEL_EASE = import_tokens31.semanticInteraction.easing.panel;
+var TREE_CONTENT_EASE = import_tokens31.semanticInteraction.easing.content;
+var TreeContext = (0, import_react53.createContext)(null);
+var TreeItemContext = (0, import_react53.createContext)(null);
 function usePrefersReducedMotion2() {
-  const [reduce, setReduce] = (0, import_react52.useState)(false);
-  (0, import_react52.useEffect)(() => {
+  const [reduce, setReduce] = (0, import_react53.useState)(false);
+  (0, import_react53.useEffect)(() => {
     const mql = window.matchMedia((0, import_animation8.getReducedMotionQuery)().replace("@media ", ""));
     const sync = () => setReduce(mql.matches);
     sync();
@@ -14406,7 +14613,7 @@ function toExpandedSet(value) {
 
 // src/components/Tree/style.ts
 var import_clsx99 = require("clsx");
-var import_tokens33 = require("@refineui/tokens");
+var import_tokens32 = require("@refineui/tokens");
 var treeStyles = {
   root: "m-0 flex list-none flex-col gap-px p-0",
   item: "m-0 list-none p-0",
@@ -14434,9 +14641,9 @@ var treeStyles = {
   label: "min-w-0 flex-1 truncate text-start"
 };
 var treeIconSize = {
-  sm: import_tokens33.iconSizes.xxsmall,
-  md: import_tokens33.iconSizes.xsmall,
-  lg: import_tokens33.iconSizes.xsmall
+  sm: import_tokens32.iconSizes.xxsmall,
+  md: import_tokens32.iconSizes.xsmall,
+  lg: import_tokens32.iconSizes.xsmall
 };
 var treeItemTypo = {
   sm: sizedComponentTextClass(componentTypographyTokens.tree.item, "sm"),
@@ -14459,29 +14666,29 @@ function Tree({
   ...props
 }) {
   const reduceMotion = usePrefersReducedMotion2();
-  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react53.useState)(() => toExpandedSet(defaultExpanded));
-  const [uncontrolledSelected, setUncontrolledSelected] = (0, import_react53.useState)(defaultSelected ?? null);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react54.useState)(() => toExpandedSet(defaultExpanded));
+  const [uncontrolledSelected, setUncontrolledSelected] = (0, import_react54.useState)(defaultSelected ?? null);
   const expanded = expandedProp === void 0 ? uncontrolledExpanded : toExpandedSet(expandedProp);
   const selected = selectedProp === void 0 ? uncontrolledSelected : selectedProp;
-  const orderRef = (0, import_react53.useRef)([]);
-  const elMapRef = (0, import_react53.useRef)(/* @__PURE__ */ new Map());
-  const metaMapRef = (0, import_react53.useRef)(/* @__PURE__ */ new Map());
-  const emitExpanded = (0, import_react53.useCallback)(
+  const orderRef = (0, import_react54.useRef)([]);
+  const elMapRef = (0, import_react54.useRef)(/* @__PURE__ */ new Map());
+  const metaMapRef = (0, import_react54.useRef)(/* @__PURE__ */ new Map());
+  const emitExpanded = (0, import_react54.useCallback)(
     (next) => {
       if (expandedProp === void 0) setUncontrolledExpanded(next);
       onExpandedChange?.(Array.from(next));
     },
     [expandedProp, onExpandedChange]
   );
-  const emitSelected = (0, import_react53.useCallback)(
+  const emitSelected = (0, import_react54.useCallback)(
     (next) => {
       if (selectedProp === void 0) setUncontrolledSelected(next);
       onSelectedChange?.(next);
     },
     [onSelectedChange, selectedProp]
   );
-  const isExpanded = (0, import_react53.useCallback)((value) => expanded.has(value), [expanded]);
-  const toggleExpanded = (0, import_react53.useCallback)(
+  const isExpanded = (0, import_react54.useCallback)((value) => expanded.has(value), [expanded]);
+  const toggleExpanded = (0, import_react54.useCallback)(
     (value) => {
       const next = new Set(expanded);
       if (next.has(value)) next.delete(value);
@@ -14490,7 +14697,7 @@ function Tree({
     },
     [emitExpanded, expanded]
   );
-  const expand = (0, import_react53.useCallback)(
+  const expand = (0, import_react54.useCallback)(
     (value) => {
       if (expanded.has(value)) return;
       const next = new Set(expanded);
@@ -14499,7 +14706,7 @@ function Tree({
     },
     [emitExpanded, expanded]
   );
-  const collapse = (0, import_react53.useCallback)(
+  const collapse = (0, import_react54.useCallback)(
     (value) => {
       if (!expanded.has(value)) return;
       const next = new Set(expanded);
@@ -14508,13 +14715,13 @@ function Tree({
     },
     [emitExpanded, expanded]
   );
-  const select = (0, import_react53.useCallback)(
+  const select = (0, import_react54.useCallback)(
     (value) => {
       emitSelected(value);
     },
     [emitSelected]
   );
-  const registerItem = (0, import_react53.useCallback)((value, el, meta) => {
+  const registerItem = (0, import_react54.useCallback)((value, el, meta) => {
     metaMapRef.current.set(value, meta);
     if (!orderRef.current.includes(value)) {
       orderRef.current.push(value);
@@ -14526,10 +14733,10 @@ function Tree({
       orderRef.current = orderRef.current.filter((v) => v !== value);
     }
   }, []);
-  const focusItem = (0, import_react53.useCallback)((value) => {
+  const focusItem = (0, import_react54.useCallback)((value) => {
     elMapRef.current.get(value)?.focus();
   }, []);
-  const visibleValues = (0, import_react53.useCallback)(() => {
+  const visibleValues = (0, import_react54.useCallback)(() => {
     const result = [];
     const walk = (parent) => {
       for (const value of orderRef.current) {
@@ -14543,7 +14750,7 @@ function Tree({
     walk(null);
     return result;
   }, [expanded]);
-  const focusByDelta = (0, import_react53.useCallback)(
+  const focusByDelta = (0, import_react54.useCallback)(
     (currentValue, delta) => {
       const list = visibleValues();
       const idx = list.indexOf(currentValue);
@@ -14553,17 +14760,17 @@ function Tree({
     },
     [focusItem, visibleValues]
   );
-  const focusFirst = (0, import_react53.useCallback)(() => {
+  const focusFirst = (0, import_react54.useCallback)(() => {
     const list = visibleValues();
     if (list[0]) focusItem(list[0]);
   }, [focusItem, visibleValues]);
-  const focusLast = (0, import_react53.useCallback)(() => {
+  const focusLast = (0, import_react54.useCallback)(() => {
     const list = visibleValues();
     const last = list[list.length - 1];
     if (last) focusItem(last);
   }, [focusItem, visibleValues]);
-  const getParent = (0, import_react53.useCallback)((value) => metaMapRef.current.get(value)?.parentValue ?? null, []);
-  const contextValue = (0, import_react53.useMemo)(
+  const getParent = (0, import_react54.useCallback)((value) => metaMapRef.current.get(value)?.parentValue ?? null, []);
+  const contextValue = (0, import_react54.useMemo)(
     () => ({
       size,
       isExpanded,
@@ -14611,21 +14818,21 @@ function Tree({
 
 // src/components/Tree/TreeItem.tsx
 var import_clsx101 = require("clsx");
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 function TreeItem({ value, disabled = false, className, children, ...props }) {
-  const tree = (0, import_react54.useContext)(TreeContext);
-  const parent = (0, import_react54.useContext)(TreeItemContext);
+  const tree = (0, import_react55.useContext)(TreeContext);
+  const parent = (0, import_react55.useContext)(TreeItemContext);
   if (!tree) throw new Error("TreeItem must be used within Tree.");
-  const [hasBranch, setHasBranch] = (0, import_react54.useState)(false);
-  const uid = (0, import_react54.useId)().replace(/:/g, "");
+  const [hasBranch, setHasBranch] = (0, import_react55.useState)(false);
+  const uid = (0, import_react55.useId)().replace(/:/g, "");
   const depth = parent ? parent.depth + 1 : 0;
   const parentValue = parent?.value ?? null;
   const expanded = tree.isExpanded(value);
   const selected = tree.selected === value;
   const triggerId = `tree-trigger-${uid}-${value}`;
   const groupId = `tree-group-${uid}-${value}`;
-  const itemContext = (0, import_react54.useMemo)(
+  const itemContext = (0, import_react55.useMemo)(
     () => ({
       value,
       depth,
@@ -14661,18 +14868,18 @@ function TreeItem({ value, disabled = false, className, children, ...props }) {
 
 // src/components/Tree/TreeItemTrigger.tsx
 var import_clsx102 = require("clsx");
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props }) {
-  const tree = (0, import_react55.useContext)(TreeContext);
-  const item = (0, import_react55.useContext)(TreeItemContext);
+  const tree = (0, import_react56.useContext)(TreeContext);
+  const item = (0, import_react56.useContext)(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
   };
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     return () => {
       tree.registerItem(item.value, null, {
         parentValue: item.parentValue,
@@ -14793,14 +15000,14 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
 
 // src/components/Tree/TreeItemContent.tsx
 var import_clsx103 = require("clsx");
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 function TreeItemContent({ className, children, ...props }) {
-  const tree = (0, import_react56.useContext)(TreeContext);
-  const item = (0, import_react56.useContext)(TreeItemContext);
+  const tree = (0, import_react57.useContext)(TreeContext);
+  const item = (0, import_react57.useContext)(TreeItemContext);
   if (!tree || !item) throw new Error("TreeItemContent must be used within TreeItem.");
   const { setHasBranch, expanded, groupId, triggerId } = item;
-  (0, import_react56.useLayoutEffect)(() => {
+  (0, import_react57.useLayoutEffect)(() => {
     setHasBranch(true);
     return () => setHasBranch(false);
   }, [setHasBranch]);
@@ -14844,16 +15051,16 @@ function TreeItemContent({ className, children, ...props }) {
 
 // src/components/Tooltip/Tooltip.tsx
 var import_clsx105 = require("clsx");
-var import_react57 = require("react");
-var import_tokens35 = require("@refineui/tokens");
+var import_react58 = require("react");
+var import_tokens34 = require("@refineui/tokens");
 var import_color13 = require("@refineui/utilities/color");
-var import_react58 = require("@refineui/utilities/react");
+var import_react59 = require("@refineui/utilities/react");
 
 // src/components/Tooltip/style.ts
-var import_tokens34 = require("@refineui/tokens");
+var import_tokens33 = require("@refineui/tokens");
 var import_clsx104 = require("clsx");
-var gap = `calc(${import_tokens3.componentSizes.tooltipBeakHeight} + ${import_tokens34.spacings.sizeXXSmall})`;
-var TOOLTIP_BEAK_INSET = import_tokens34.spacings.sizeMedium;
+var gap = `calc(${import_tokens3.componentSizes.tooltipBeakHeight} + ${import_tokens33.spacings.sizeXXSmall})`;
+var TOOLTIP_BEAK_INSET = import_tokens33.spacings.sizeMedium;
 var tooltipStyles = {
   root: "relative inline-block",
   fallbackTrigger: "inline-flex outline-none",
@@ -14863,7 +15070,7 @@ var tooltipStyles = {
   /** Fill, stroke, and shadow come from `FloatingSurface`; the transparent border keeps the box size. */
   panel: (0, import_clsx104.clsx)(
     componentTextClass(componentTypographyTokens.tooltip),
-    "relative z-0 box-border max-w-refineui-tooltip-max-width whitespace-nowrap rounded-refineui-medium border-refineui-thin border-transparent px-refineui-size-medium py-refineui-size-small"
+    "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) {
@@ -14930,11 +15137,11 @@ function Tooltip({
   className,
   ...props
 }) {
-  const [innerOpen, setInnerOpen] = (0, import_react57.useState)(defaultOpen);
+  const [innerOpen, setInnerOpen] = (0, import_react58.useState)(defaultOpen);
   const open = ctrlOpen !== void 0 ? ctrlOpen : innerOpen;
-  const tooltipId = (0, import_react57.useId)();
-  const showTimer = (0, import_react57.useRef)(null);
-  const panelRef = (0, import_react57.useRef)(null);
+  const tooltipId = (0, import_react58.useId)();
+  const showTimer = (0, import_react58.useRef)(null);
+  const panelRef = (0, import_react58.useRef)(null);
   const setOpen = (next) => {
     if (ctrlOpen === void 0) setInnerOpen(next);
     onOpenChange?.(next);
@@ -14959,11 +15166,11 @@ function Tooltip({
   };
   const floatingStyle = tooltipFloatingStyle(position, align);
   const describedBy = open ? tooltipId : void 0;
-  const mergeEl = (0, import_react58.getMergeableTriggerChild)(trigger);
+  const mergeEl = (0, import_react59.getMergeableTriggerChild)(trigger);
   let triggerNode;
   if (mergeEl != null) {
     triggerNode = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-      import_react58.Slot,
+      import_react59.Slot,
       {
         "aria-describedby": describedBy,
         onMouseEnter: scheduleShow,
@@ -15019,7 +15226,7 @@ function Tooltip({
           panelRef,
           side: tooltipBeakSide(position),
           align: tooltipAlignKey(align),
-          radius: import_tokens35.borderRadii.roundedMedium,
+          radius: import_tokens34.borderRadii.roundedMedium,
           beakWidth: import_tokens3.componentSizes.tooltipBeakWidth,
           beakHeight: import_tokens3.componentSizes.tooltipBeakHeight,
           tipRadius: import_tokens3.componentSizes.tooltipBeakTipRadius,
@@ -15035,8 +15242,8 @@ function Tooltip({
 
 // src/components/Chart/Chart.tsx
 var import_clsx107 = require("clsx");
-var import_react59 = require("react");
-var import_tokens37 = require("@refineui/tokens");
+var import_react60 = require("react");
+var import_tokens36 = require("@refineui/tokens");
 var import_color14 = require("@refineui/utilities/color");
 
 // src/components/Chart/style.ts
@@ -15081,16 +15288,16 @@ var chartStyles = {
 };
 
 // src/components/Chart/utils.ts
-var import_tokens36 = require("@refineui/tokens");
+var import_tokens35 = require("@refineui/tokens");
 var CHART_VIEWBOX_WIDTH = 800;
 var CHART_VIEWBOX_HEIGHT = 320;
-var CHART_PLOT_PADDING_TOP = parseFloat(import_tokens36.spacings.sizeMedium);
-var CHART_PLOT_PADDING_BOTTOM = parseFloat(import_tokens36.spacings.sizeXXSmall);
-var CHART_PLOT_PADDING_X = parseFloat(import_tokens36.spacings.sizeMedium);
-var CHART_BAR_RADIUS = parseFloat(import_tokens36.borderRadii.roundedXLarge);
+var CHART_PLOT_PADDING_TOP = parseFloat(import_tokens35.spacings.sizeMedium);
+var CHART_PLOT_PADDING_BOTTOM = parseFloat(import_tokens35.spacings.sizeXXSmall);
+var CHART_PLOT_PADDING_X = parseFloat(import_tokens35.spacings.sizeMedium);
+var CHART_BAR_RADIUS = parseFloat(import_tokens35.borderRadii.roundedXLarge);
 var CHART_BAR_BAND_FILL = 0.5;
-var CHART_POINT_RADIUS = parseFloat(import_tokens36.foundationSizes.foundationSize40);
-var CHART_POINT_STROKE = parseFloat(import_tokens36.foundationSizes.foundationSize20);
+var CHART_POINT_RADIUS = parseFloat(import_tokens35.foundationSizes.foundationSize40);
+var CHART_POINT_STROKE = parseFloat(import_tokens35.foundationSizes.foundationSize20);
 var CHART_TOOLTIP_FLIP_X = 0.75;
 var CHART_TOOLTIP_FLIP_Y = 0.25;
 function clampValue(n) {
@@ -15263,9 +15470,9 @@ function formatAxisTick(value) {
 
 // src/components/Chart/Chart.tsx
 var import_jsx_runtime79 = require("react/jsx-runtime");
-var ChartContext = (0, import_react59.createContext)(null);
+var ChartContext = (0, import_react60.createContext)(null);
 function useChartContext(component) {
-  const value = (0, import_react59.useContext)(ChartContext);
+  const value = (0, import_react60.useContext)(ChartContext);
   if (!value) throw new Error(`${component} must be used within Chart.`);
   return value;
 }
@@ -15295,15 +15502,15 @@ function itemState(index, hoverIndex, selectedIndex) {
   return "default";
 }
 function isChartTooltipElement(node) {
-  return (0, import_react59.isValidElement)(node) && node.type === ChartTooltip;
+  return (0, import_react60.isValidElement)(node) && node.type === ChartTooltip;
 }
 function Chart({ className, children, ...props }) {
-  const [hoverIndex, setHoverIndex] = (0, import_react59.useState)(null);
-  const [selectedIndex, setSelectedIndex] = (0, import_react59.useState)(null);
-  const [pointer, setPointer] = (0, import_react59.useState)(null);
-  const [labels, setLabels] = (0, import_react59.useState)([]);
-  const [series, setSeries] = (0, import_react59.useState)(null);
-  const context = (0, import_react59.useMemo)(
+  const [hoverIndex, setHoverIndex] = (0, import_react60.useState)(null);
+  const [selectedIndex, setSelectedIndex] = (0, import_react60.useState)(null);
+  const [pointer, setPointer] = (0, import_react60.useState)(null);
+  const [labels, setLabels] = (0, import_react60.useState)([]);
+  const [series, setSeries] = (0, import_react60.useState)(null);
+  const context = (0, import_react60.useMemo)(
     () => ({
       hoverIndex,
       selectedIndex,
@@ -15398,7 +15605,7 @@ function ChartPlot({
   const { pointer, selectedIndex } = useChartContext("ChartPlot");
   const svgChildren = [];
   const tooltipNodes = [];
-  import_react59.Children.forEach(children, (child) => {
+  import_react60.Children.forEach(children, (child) => {
     if (isChartTooltipElement(child)) tooltipNodes.push(child);
     else svgChildren.push(child);
   });
@@ -15514,7 +15721,7 @@ function ChartGrid({
         y2: y,
         stroke: isBaseline ? baselineColor : gridColor,
         strokeWidth: "var(--refineui-stroke-width-thin)",
-        strokeOpacity: isBaseline ? import_tokens37.opacities.opacityFull : import_tokens37.opacities.opacityDisabled,
+        strokeOpacity: isBaseline ? import_tokens36.opacities.opacityFull : import_tokens36.opacities.opacityDisabled,
         vectorEffect: "non-scaling-stroke"
       },
       tick
@@ -15537,7 +15744,7 @@ function ChartBars({
   const barRadius = Math.min(CHART_BAR_RADIUS, barWidth / 2);
   const baselineY = plotBaselineY();
   const trackHeight = plotHeight();
-  (0, import_react59.useLayoutEffect)(() => {
+  (0, import_react60.useLayoutEffect)(() => {
     setSeries({ values, seriesColor, max, align: "bar" });
   }, [values, seriesColor, max, setSeries]);
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("g", { "data-refineui": "chart-bars", "data-series-color": seriesColor, className, ...props, children: [
@@ -15588,14 +15795,14 @@ function ChartLine({
   ...props
 }) {
   const { hoverIndex, selectedIndex, setSeries } = useChartContext("ChartLine");
-  const gradientId = (0, import_react59.useId)().replace(/:/g, "");
+  const gradientId = (0, import_react60.useId)().replace(/:/g, "");
   const scaleMax = resolveChartScale(values, max);
   const stroke = seriesColorToken(seriesColor);
   const coords = linePointCoords(values, scaleMax);
   const baselineY = plotBaselineY();
   const pointRing = pointStrokeColor();
   const linePath = monotoneLinePath(coords);
-  (0, import_react59.useLayoutEffect)(() => {
+  (0, import_react60.useLayoutEffect)(() => {
     setSeries({ values, seriesColor, max, align: "line" });
   }, [values, seriesColor, max, setSeries]);
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("g", { "data-refineui": "chart-line", "data-series-color": seriesColor, className, ...props, children: [
@@ -15606,7 +15813,7 @@ function ChartLine({
           {
             offset: "0%",
             stopColor: stroke,
-            stopOpacity: import_tokens37.opacities.opacityDisabled
+            stopOpacity: import_tokens36.opacities.opacityDisabled
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("stop", { offset: "100%", stopColor: stroke, stopOpacity: "0" })
@@ -15664,7 +15871,7 @@ function ChartAxisLabels({
   const { hoverIndex, selectedIndex, setLabels } = useChartContext("ChartAxisLabels");
   const count = labels.length;
   const centerAt = align === "line" ? linePointCenterRatio : barBandCenterRatio;
-  (0, import_react59.useLayoutEffect)(() => {
+  (0, import_react60.useLayoutEffect)(() => {
     setLabels(labels);
   }, [labels, setLabels]);
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
@@ -15733,26 +15940,26 @@ function ChartLegendItem({
 }
 
 // src/components/Slot/Slot.tsx
-var import_react60 = require("@refineui/utilities/react");
+var import_react61 = require("@refineui/utilities/react");
 
 // src/components/Collapsible/Collapsible.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_clsx108 = require("clsx");
-var import_react63 = require("@refineui/utilities/react");
+var import_react64 = require("@refineui/utilities/react");
 
 // src/components/Collapsible/context.ts
-var import_react61 = require("react");
-var import_tokens38 = require("@refineui/tokens");
+var import_react62 = require("react");
+var import_tokens37 = require("@refineui/tokens");
 var import_animation9 = require("@refineui/utilities/animation");
-var CollapsibleContext = (0, import_react61.createContext)(null);
+var CollapsibleContext = (0, import_react62.createContext)(null);
 function useCollapsibleContext(part) {
-  const value = (0, import_react61.useContext)(CollapsibleContext);
+  const value = (0, import_react62.useContext)(CollapsibleContext);
   if (!value) throw new Error(`${part} must be used within Collapsible`);
   return value;
 }
 function usePrefersReducedMotion3() {
-  const [reduce, setReduce] = (0, import_react61.useState)(false);
-  (0, import_react61.useEffect)(() => {
+  const [reduce, setReduce] = (0, import_react62.useState)(false);
+  (0, import_react62.useEffect)(() => {
     const mql = window.matchMedia((0, import_animation9.getReducedMotionQuery)().replace("@media ", ""));
     const sync = () => setReduce(mql.matches);
     sync();
@@ -15761,10 +15968,10 @@ function usePrefersReducedMotion3() {
   }, []);
   return reduce;
 }
-var PANEL_HEIGHT_MS2 = Number.parseFloat(import_tokens38.semanticInteraction.duration.panel) / 1e3;
-var PANEL_CONTENT_MS2 = Number.parseFloat(import_tokens38.semanticInteraction.duration.normal) / 1e3;
-var PANEL_HEIGHT_EASE2 = import_tokens38.semanticInteraction.easing.panel;
-var PANEL_CONTENT_EASE2 = import_tokens38.semanticInteraction.easing.content;
+var PANEL_HEIGHT_MS2 = Number.parseFloat(import_tokens37.semanticInteraction.duration.panel) / 1e3;
+var PANEL_CONTENT_MS2 = Number.parseFloat(import_tokens37.semanticInteraction.duration.normal) / 1e3;
+var PANEL_HEIGHT_EASE2 = import_tokens37.semanticInteraction.easing.panel;
+var PANEL_CONTENT_EASE2 = import_tokens37.semanticInteraction.easing.content;
 
 // src/components/Collapsible/style.ts
 var collapsibleStyles = {
@@ -15773,17 +15980,17 @@ var collapsibleStyles = {
 
 // src/components/Collapsible/Collapsible.tsx
 var import_jsx_runtime80 = require("react/jsx-runtime");
-var Collapsible = (0, import_react62.forwardRef)(function Collapsible2({ open: openProp, defaultOpen = false, onOpenChange, asChild = false, className, children, ...props }, ref) {
-  const [uncontrolled, setUncontrolled] = (0, import_react62.useState)(defaultOpen);
+var Collapsible = (0, import_react63.forwardRef)(function Collapsible2({ open: openProp, defaultOpen = false, onOpenChange, asChild = false, className, children, ...props }, ref) {
+  const [uncontrolled, setUncontrolled] = (0, import_react63.useState)(defaultOpen);
   const open = openProp ?? uncontrolled;
-  const reactId = (0, import_react62.useId)();
+  const reactId = (0, import_react63.useId)();
   const reduceMotion = usePrefersReducedMotion3();
-  const toggle = (0, import_react62.useCallback)(() => {
+  const toggle = (0, import_react63.useCallback)(() => {
     const next = !(openProp ?? uncontrolled);
     if (openProp === void 0) setUncontrolled(next);
     onOpenChange?.(next);
   }, [onOpenChange, openProp, uncontrolled]);
-  const contextValue = (0, import_react62.useMemo)(
+  const contextValue = (0, import_react63.useMemo)(
     () => ({
       open,
       toggle,
@@ -15800,9 +16007,9 @@ var Collapsible = (0, import_react62.forwardRef)(function Collapsible2({ open: o
     "data-refineui": "collapsible",
     className
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react63.Slot, { ...shared, children }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...shared, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react64.Slot, { ...shared, children }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...shared, children }) });
 });
-var CollapsibleTrigger = (0, import_react62.forwardRef)(
+var CollapsibleTrigger = (0, import_react63.forwardRef)(
   function CollapsibleTrigger2({
     asChild = false,
     onClick,
@@ -15829,7 +16036,7 @@ var CollapsibleTrigger = (0, import_react62.forwardRef)(
         if (!event.defaultPrevented) toggle();
       }
     };
-    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react63.Slot, { ...shared, children });
+    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react64.Slot, { ...shared, children });
     return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       Button,
       {
@@ -15844,7 +16051,7 @@ var CollapsibleTrigger = (0, import_react62.forwardRef)(
     );
   }
 );
-var CollapsibleContent = (0, import_react62.forwardRef)(
+var CollapsibleContent = (0, import_react63.forwardRef)(
   function CollapsibleContent2({ className, children, style, ...props }, ref) {
     const { open, contentId, triggerId, reduceMotion } = useCollapsibleContext("CollapsibleContent");
     const gridStyle = {
@@ -15878,19 +16085,19 @@ var CollapsibleContent = (0, import_react62.forwardRef)(
 );
 
 // src/components/ContextMenu/ContextMenu.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_react_dom8 = require("react-dom");
 var import_clsx109 = require("clsx");
-var import_tokens39 = require("@refineui/tokens");
+var import_tokens38 = require("@refineui/tokens");
 var import_animation10 = require("@refineui/utilities/animation");
-var import_react65 = require("@refineui/utilities/react");
+var import_react66 = require("@refineui/utilities/react");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var MENU_ATTR = "data-refineui-context-menu";
-var CLOSE_MS = (0, import_animation10.motionMsToNumber)(import_tokens39.semanticInteraction.duration.normal);
-var MenuContext2 = (0, import_react64.createContext)(null);
-var SubContext = (0, import_react64.createContext)(null);
+var CLOSE_MS = (0, import_animation10.motionMsToNumber)(import_tokens38.semanticInteraction.duration.normal);
+var MenuContext2 = (0, import_react65.createContext)(null);
+var SubContext = (0, import_react65.createContext)(null);
 function useMenu() {
-  const value = (0, import_react64.useContext)(MenuContext2);
+  const value = (0, import_react65.useContext)(MenuContext2);
   if (!value) throw new Error("Context menu parts must be used within ContextMenu");
   return value;
 }
@@ -15907,29 +16114,29 @@ function placeInView(element, x, y) {
 }
 function ContextMenu({ modal = true, onOpenChange, children }) {
   void modal;
-  const [open, setOpen] = (0, import_react64.useState)(false);
-  const [point, setPoint] = (0, import_react64.useState)({ x: 0, y: 0 });
-  const openRef = (0, import_react64.useRef)(false);
-  const onOpenChangeRef = (0, import_react64.useRef)(onOpenChange);
+  const [open, setOpen] = (0, import_react65.useState)(false);
+  const [point, setPoint] = (0, import_react65.useState)({ x: 0, y: 0 });
+  const openRef = (0, import_react65.useRef)(false);
+  const onOpenChangeRef = (0, import_react65.useRef)(onOpenChange);
   openRef.current = open;
   onOpenChangeRef.current = onOpenChange;
-  const close = (0, import_react64.useCallback)(() => {
+  const close = (0, import_react65.useCallback)(() => {
     if (!openRef.current) return;
     openRef.current = false;
     setOpen(false);
     onOpenChangeRef.current?.(false);
   }, []);
-  const openAt = (0, import_react64.useCallback)((x, y) => {
+  const openAt = (0, import_react65.useCallback)((x, y) => {
     setPoint({ x, y });
     const wasOpen = openRef.current;
     openRef.current = true;
     setOpen(true);
     if (!wasOpen) onOpenChangeRef.current?.(true);
   }, []);
-  const value = (0, import_react64.useMemo)(() => ({ open, point, openAt, close }), [open, point, openAt, close]);
+  const value = (0, import_react65.useMemo)(() => ({ open, point, openAt, close }), [open, point, openAt, close]);
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(MenuContext2.Provider, { value, children });
 }
-var ContextMenuTrigger = (0, import_react64.forwardRef)(function ContextMenuTrigger2({ asChild = false, onContextMenu, children, ...props }, ref) {
+var ContextMenuTrigger = (0, import_react65.forwardRef)(function ContextMenuTrigger2({ asChild = false, onContextMenu, children, ...props }, ref) {
   const { openAt } = useMenu();
   const shared = {
     ...props,
@@ -15942,18 +16149,18 @@ var ContextMenuTrigger = (0, import_react64.forwardRef)(function ContextMenuTrig
       openAt(event.clientX, event.clientY);
     }
   };
-  if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react65.Slot, { ...shared, children });
+  if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react66.Slot, { ...shared, children });
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { ...shared, className: (0, import_clsx109.clsx)(menuStyles.triggerFallback, props.className), children });
 });
 function ContextMenuPortal({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_jsx_runtime81.Fragment, { children });
 }
-var ContextMenuContent = (0, import_react64.forwardRef)(function ContextMenuContent2({ className, style, onPointerDown, children, ...props }, ref) {
+var ContextMenuContent = (0, import_react65.forwardRef)(function ContextMenuContent2({ className, style, onPointerDown, children, ...props }, ref) {
   const { open, point, close } = useMenu();
-  const localRef = (0, import_react64.useRef)(null);
-  const [shouldRender, setShouldRender] = (0, import_react64.useState)(open);
-  const [isClosing, setIsClosing] = (0, import_react64.useState)(false);
-  (0, import_react64.useEffect)(() => {
+  const localRef = (0, import_react65.useRef)(null);
+  const [shouldRender, setShouldRender] = (0, import_react65.useState)(open);
+  const [isClosing, setIsClosing] = (0, import_react65.useState)(false);
+  (0, import_react65.useEffect)(() => {
     if (open) {
       setShouldRender(true);
       setIsClosing(false);
@@ -15967,11 +16174,11 @@ var ContextMenuContent = (0, import_react64.forwardRef)(function ContextMenuCont
     }, CLOSE_MS);
     return () => window.clearTimeout(timeout);
   }, [open, shouldRender]);
-  (0, import_react64.useLayoutEffect)(() => {
+  (0, import_react65.useLayoutEffect)(() => {
     if (!shouldRender || !localRef.current) return;
     placeInView(localRef.current, point.x, point.y);
   }, [shouldRender, point.x, point.y]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!open) return;
     const onKey = (event) => {
       if (event.key === "Escape") close();
@@ -16007,8 +16214,8 @@ var ContextMenuContent = (0, import_react64.forwardRef)(function ContextMenuCont
           position: "fixed",
           top: point.y,
           left: point.x,
-          width: import_tokens39.componentSizes.menuPanelWidth,
-          minWidth: import_tokens39.componentSizes.menuPanelWidth,
+          width: import_tokens38.componentSizes.menuPanelWidth,
+          minWidth: import_tokens38.componentSizes.menuPanelWidth,
           zIndex: 9999,
           ...style
         },
@@ -16034,7 +16241,7 @@ function runSelect(onSelect, close, disabled) {
   onSelect?.(selectEvent);
   if (!selectEvent.defaultPrevented) close();
 }
-var ContextMenuItem = (0, import_react64.forwardRef)(function ContextMenuItem2({ disabled = false, description, shortcut, startIcon, endIcon, state = "default", onSelect, className, onClick, onKeyDown, children, ...props }, ref) {
+var ContextMenuItem = (0, import_react65.forwardRef)(function ContextMenuItem2({ disabled = false, description, shortcut, startIcon, endIcon, state = "default", onSelect, className, onClick, onKeyDown, children, ...props }, ref) {
   const { close } = useMenu();
   const isDisabled = disabled || state === "disabled";
   const slotted = startIcon != null || description != null || shortcut != null || endIcon != null;
@@ -16069,7 +16276,7 @@ var ContextMenuItem = (0, import_react64.forwardRef)(function ContextMenuItem2({
           "span",
           {
             className: menuStyles.iconWrap,
-            style: { width: import_tokens39.iconSizes.small, minWidth: import_tokens39.iconSizes.small, height: import_tokens39.iconSizes.small },
+            style: { width: import_tokens38.iconSizes.small, minWidth: import_tokens38.iconSizes.small, height: import_tokens38.iconSizes.small },
             children: startIcon
           }
         ) : null,
@@ -16083,7 +16290,7 @@ var ContextMenuItem = (0, import_react64.forwardRef)(function ContextMenuItem2({
             "span",
             {
               className: menuStyles.iconWrap,
-              style: { width: import_tokens39.iconSizes.small, minWidth: import_tokens39.iconSizes.small, height: import_tokens39.iconSizes.small },
+              style: { width: import_tokens38.iconSizes.small, minWidth: import_tokens38.iconSizes.small, height: import_tokens38.iconSizes.small },
               children: endIcon
             }
           ) : null
@@ -16092,7 +16299,7 @@ var ContextMenuItem = (0, import_react64.forwardRef)(function ContextMenuItem2({
     }
   );
 });
-var ContextMenuSeparator = (0, import_react64.forwardRef)(
+var ContextMenuSeparator = (0, import_react65.forwardRef)(
   function ContextMenuSeparator2({ className, ...props }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       "div",
@@ -16113,15 +16320,15 @@ function ContextMenuLabel({ className, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { "data-refineui": "menu-label", className: (0, import_clsx109.clsx)(menuStyles.section, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: menuStyles.sectionText, children }) });
 }
 function ContextMenuSub({ children }) {
-  const [open, setOpen] = (0, import_react64.useState)(false);
-  const triggerRef = (0, import_react64.useRef)(null);
-  const timer = (0, import_react64.useRef)(null);
+  const [open, setOpen] = (0, import_react65.useState)(false);
+  const triggerRef = (0, import_react65.useRef)(null);
+  const timer = (0, import_react65.useRef)(null);
   const clear = () => {
     if (timer.current != null) window.clearTimeout(timer.current);
     timer.current = null;
   };
-  (0, import_react64.useEffect)(() => clear, []);
-  const value = (0, import_react64.useMemo)(
+  (0, import_react65.useEffect)(() => clear, []);
+  const value = (0, import_react65.useMemo)(
     () => ({
       open,
       triggerRef,
@@ -16139,11 +16346,11 @@ function ContextMenuSub({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SubContext.Provider, { value, children });
 }
 function useSub2() {
-  const value = (0, import_react64.useContext)(SubContext);
+  const value = (0, import_react65.useContext)(SubContext);
   if (!value) throw new Error("ContextMenuSubTrigger must be used within ContextMenuSub");
   return value;
 }
-var ContextMenuSubTrigger = (0, import_react64.forwardRef)(
+var ContextMenuSubTrigger = (0, import_react65.forwardRef)(
   function ContextMenuSubTrigger2({ asChild = false, description, startIcon, onMouseEnter, onMouseLeave, onClick, className, children, ...props }, ref) {
     const sub = useSub2();
     const shared = {
@@ -16179,13 +16386,13 @@ var ContextMenuSubTrigger = (0, import_react64.forwardRef)(
         if (!event.defaultPrevented) sub.show();
       }
     };
-    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react65.Slot, { ...shared, children });
+    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react66.Slot, { ...shared, children });
     return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("button", { ...shared, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: menuStyles.row, children: [
       startIcon ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "span",
         {
           className: menuStyles.iconWrap,
-          style: { width: import_tokens39.iconSizes.small, minWidth: import_tokens39.iconSizes.small, height: import_tokens39.iconSizes.small },
+          style: { width: import_tokens38.iconSizes.small, minWidth: import_tokens38.iconSizes.small, height: import_tokens38.iconSizes.small },
           children: startIcon
         }
       ) : null,
@@ -16197,19 +16404,19 @@ var ContextMenuSubTrigger = (0, import_react64.forwardRef)(
         "span",
         {
           className: menuStyles.iconWrap,
-          style: { width: import_tokens39.iconSizes.small, minWidth: import_tokens39.iconSizes.small, height: import_tokens39.iconSizes.small },
-          children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WebIcon, { name: "chevron-right", size: import_tokens39.iconSizes.small, color: "currentColor", "aria-hidden": true })
+          style: { width: import_tokens38.iconSizes.small, minWidth: import_tokens38.iconSizes.small, height: import_tokens38.iconSizes.small },
+          children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WebIcon, { name: "chevron-right", size: import_tokens38.iconSizes.small, color: "currentColor", "aria-hidden": true })
         }
       ) })
     ] }) });
   }
 );
-var ContextMenuSubContent = (0, import_react64.forwardRef)(
+var ContextMenuSubContent = (0, import_react65.forwardRef)(
   function ContextMenuSubContent2({ className, style, onPointerDown, onMouseEnter, onMouseLeave, ...props }, ref) {
     const sub = useSub2();
-    const localRef = (0, import_react64.useRef)(null);
-    const [side, setSide] = (0, import_react64.useState)("right");
-    (0, import_react64.useLayoutEffect)(() => {
+    const localRef = (0, import_react65.useRef)(null);
+    const [side, setSide] = (0, import_react65.useState)("right");
+    (0, import_react65.useLayoutEffect)(() => {
       const trigger = sub.triggerRef.current;
       const element = localRef.current;
       if (!sub.open || !trigger || !element) return;