@refineui/react 0.1.2 → 0.2.0

package/dist/index.js

@@ -787,7 +787,12 @@ var componentTypographyTokens = {
   /** Command palette — same scale as Menu (list / section / shortcut). */
   command: {
     group: role("captionLg"),
-    item: role("bodyMd"),
+    /** Row text follows the Command size, like Tree rows. */
+    item: {
+      sm: role("bodySm"),
+      md: role("bodyMd"),
+      lg: role("bodyLg")
+    },
     empty: role("bodyXs"),
     shortcut: role("bodyXs"),
     input: role("bodyMd")
@@ -1319,10 +1324,20 @@ var radius = {
   md: "rounded-refineui-x-large",
   lg: "rounded-refineui-xx-large"
 };
+var paddingInline = {
+  sm: "px-refineui-size-medium",
+  md: "px-refineui-size-large",
+  lg: "px-refineui-size-x-large"
+};
+var paddingBlock = {
+  sm: "py-refineui-size-x-small",
+  md: "py-refineui-size-medium",
+  lg: "py-refineui-size-large"
+};
 var padding = {
-  sm: "px-refineui-size-medium py-refineui-size-x-small",
-  md: "px-refineui-size-large py-refineui-size-medium",
-  lg: "px-refineui-size-x-large py-refineui-size-large"
+  sm: [paddingInline.sm, paddingBlock.sm].join(" "),
+  md: [paddingInline.md, paddingBlock.md].join(" "),
+  lg: [paddingInline.lg, paddingBlock.lg].join(" ")
 };
 var typography = {
   sm: sizedComponentTextClass(componentTypographyTokens.formControl, "sm"),
@@ -1340,6 +1355,11 @@ var formControlShellSizeClass = {
   md: [fixedHeight.md, radius.md, padding.md, typography.md].join(" "),
   lg: [fixedHeight.lg, radius.lg, padding.lg, typography.lg].join(" ")
 };
+var formControlRowShellSizeClass = {
+  sm: [fixedHeight.sm, radius.sm, paddingInline.sm].join(" "),
+  md: [fixedHeight.md, radius.md, paddingInline.md].join(" "),
+  lg: [fixedHeight.lg, radius.lg, paddingInline.lg].join(" ")
+};
 var formControlShellHeightClass = {
   sm: [fixedHeight.sm, radius.sm].join(" "),
   md: [fixedHeight.md, radius.md].join(" "),
@@ -1429,7 +1449,7 @@ var inputOtpStyles = {
     "inline-flex shrink-0 cursor-text items-center justify-center",
     "border-refineui-thin border-transparent",
     // Soft grey tile (not white) so cells read on light preview / page.
-    "bg-refineui-alias-background-surface-selected",
+    "bg-refineui-alias-background-surface-hover",
     "text-center tabular-nums",
     "text-refineui-alias-foreground-primary",
     "transition-[background-color,border-color]",
@@ -1719,22 +1739,27 @@ import {
 
 // src/components/SearchField/style.ts
 import { iconSizes as iconSizes2 } from "@refineui/tokens";
-var searchFieldLeadingIconSize = iconSizes2.medium;
-var searchFieldClearIconSize = iconSizes2.small;
+var searchFieldLeadingIconSize = {
+  sm: iconSizes2.small,
+  md: iconSizes2.medium,
+  lg: iconSizes2.large
+};
+var searchFieldClearIconSize = {
+  sm: iconSizes2.xsmall,
+  md: iconSizes2.small,
+  lg: iconSizes2.small
+};
 var searchFieldStyles = {
   root: [
     "box-border flex w-full min-w-0 items-center gap-refineui-size-x-small overflow-hidden outline-none",
-    formControlTypoClass.md,
     "transition-[background-color,border-color]",
     "duration-[var(--refineui-motion-duration-fast)]",
     "ease-[var(--refineui-motion-easing-emphasized)]"
   ].join(" "),
   rootFilled: [
-    "h-refineui-control-height-md min-h-refineui-control-height-md",
-    "rounded-refineui-x-large px-refineui-size-large",
     "border-refineui-thin border-transparent",
     /** Same soft plate as InputOTP slots */
-    "bg-refineui-alias-background-surface-selected"
+    "bg-refineui-alias-background-surface-hover"
   ].join(" "),
   rootPlain: [
     "h-auto min-h-0 rounded-none border-none bg-transparent px-0 py-0"
@@ -1747,6 +1772,8 @@ var searchFieldStyles = {
   clear: "inline-flex shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 leading-none text-refineui-alias-foreground-tertiary",
   clearDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled"
 };
+var searchFieldFilledSizeClass = formControlRowShellSizeClass;
+var searchFieldTypoClass = formControlTypoClass;
 
 // src/components/SearchField/SearchField.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
@@ -1777,6 +1804,7 @@ function SearchField({
   onValueChange,
   disabled = false,
   appearance = "filled",
+  size: sizeProp,
   className,
   children,
   id,
@@ -1784,6 +1812,8 @@ function SearchField({
   "aria-label": ariaLabel = "Search",
   ...props
 }) {
+  const fieldSize = useOptionalFieldSize();
+  const size = sizeProp ?? fieldSize ?? "md";
   const [query, setQuery] = useControllableString(value, defaultValue, onValueChange);
   const inputRef = useRef2(null);
   const reactId = useId2();
@@ -1798,11 +1828,12 @@ function SearchField({
       setValue: setQuery,
       clear,
       disabled,
+      size,
       inputId,
       inputLabel: ariaLabel,
       inputRef
     }),
-    [ariaLabel, clear, disabled, inputId, query, setQuery]
+    [ariaLabel, clear, disabled, size, inputId, query, setQuery]
   );
   const handlePointerDown = (event) => {
     onPointerDown?.(event);
@@ -1818,10 +1849,12 @@ function SearchField({
     {
       "data-refineui": "search-field",
       "data-appearance": appearance,
+      "data-size": size,
       "data-disabled": disabled || void 0,
       className: clsx6(
         searchFieldStyles.root,
-        appearance === "plain" ? searchFieldStyles.rootPlain : searchFieldStyles.rootFilled,
+        searchFieldTypoClass[size],
+        appearance === "plain" ? searchFieldStyles.rootPlain : [searchFieldStyles.rootFilled, searchFieldFilledSizeClass[size]],
         disabled && (appearance === "plain" ? searchFieldStyles.rootPlainDisabled : searchFieldStyles.rootDisabled),
         className
       ),
@@ -1832,7 +1865,7 @@ function SearchField({
   ) });
 }
 function SearchFieldIcon({ children, className, ...props }) {
-  const { disabled } = useSearchFieldContext("SearchFieldIcon");
+  const { disabled, size } = useSearchFieldContext("SearchFieldIcon");
   return /* @__PURE__ */ jsx5(
     "span",
     {
@@ -1848,7 +1881,7 @@ function SearchFieldIcon({ children, className, ...props }) {
         WebIcon,
         {
           name: "search",
-          size: searchFieldLeadingIconSize,
+          size: searchFieldLeadingIconSize[size],
           color: "currentColor",
           "aria-hidden": true
         }
@@ -1911,7 +1944,7 @@ function SearchFieldClear({
   "aria-label": ariaLabel = "Clear search",
   ...props
 }) {
-  const { value, clear, disabled } = useSearchFieldContext("SearchFieldClear");
+  const { value, clear, disabled, size } = useSearchFieldContext("SearchFieldClear");
   const isDisabled = disabledProp ?? disabled;
   if (value.length === 0) return null;
   return /* @__PURE__ */ jsx5(
@@ -1936,7 +1969,7 @@ function SearchFieldClear({
         WebIcon,
         {
           name: "dismiss",
-          size: searchFieldClearIconSize,
+          size: searchFieldClearIconSize[size],
           color: "currentColor",
           iconStyle: "filled",
           "aria-hidden": true
@@ -2504,6 +2537,7 @@ import { useComposedRefs } from "@refineui/utilities/react";
 import { clsx as clsx24 } from "clsx";
 import { spacings } from "@refineui/tokens";
 var SCROLL_AREA_THUMB_MIN_PX = Number.parseFloat(spacings.sizeXLarge);
+var SCROLL_EDGE_FALLOFF_RATIO = 0.25;
 var scrollAreaStyles = {
   root: "box-border min-h-0 min-w-0 overflow-hidden outline-none",
   /**
@@ -2579,6 +2613,15 @@ function readMetrics(viewport) {
 function isScrollable(metrics) {
   return metrics.scrollSize > metrics.clientSize + 1;
 }
+function resolveEdgeFactors(metrics) {
+  const zone = metrics.clientSize * SCROLL_EDGE_FALLOFF_RATIO;
+  if (!isScrollable(metrics) || zone <= 0) return { top: 0, bottom: 0 };
+  const hiddenBelow = metrics.scrollSize - metrics.clientSize - metrics.scrollOffset;
+  return {
+    top: Math.min(1, Math.max(0, metrics.scrollOffset / zone)),
+    bottom: Math.min(1, Math.max(0, hiddenBelow / zone))
+  };
+}
 function resolveThumbGeometry(metrics, trackSize, minThumb) {
   if (trackSize <= 0 || metrics.scrollSize <= 0) {
     return { thumbSize: 0, offset: 0 };
@@ -2599,6 +2642,8 @@ var ScrollArea = forwardRef4(function ScrollArea2({
   children,
   ...props
 }, ref) {
+  const rootRef = useRef4(null);
+  const composedRootRef = useComposedRefs(rootRef, ref);
   const viewportRef = useRef4(null);
   const [viewportEpoch, setViewportEpoch] = useState4(0);
   const [vertical, setVertical] = useState4(EMPTY_METRICS);
@@ -2626,6 +2671,12 @@ var ScrollArea = forwardRef4(function ScrollArea2({
     const next = readMetrics(viewport);
     setVertical(next.vertical);
     setHorizontal(next.horizontal);
+    const root = rootRef.current;
+    if (root) {
+      const edges = resolveEdgeFactors(next.vertical);
+      root.style.setProperty("--refineui-scroll-edge-top", String(edges.top));
+      root.style.setProperty("--refineui-scroll-edge-bottom", String(edges.bottom));
+    }
   }, []);
   const markScrolling = useCallback3(() => {
     setScrolling(true);
@@ -2692,7 +2743,7 @@ var ScrollArea = forwardRef4(function ScrollArea2({
   return /* @__PURE__ */ jsx20(ScrollAreaContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx20(
     "div",
     {
-      ref,
+      ref: composedRootRef,
       "data-refineui": "scroll-area",
       "data-type": type,
       "data-scrolling": scrolling || void 0,
@@ -3658,7 +3709,7 @@ function SelectGroup({ children, className, ...props }) {
   return /* @__PURE__ */ jsx22("div", { role: "group", className: clsx28(selectStyles.group, className), ...props, children });
 }
 function SelectLabel({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx22("div", { className: clsx28(selectStyles.label, className), ...props, children });
+  return /* @__PURE__ */ jsx22("div", { "data-scroll-edge-item": true, className: clsx28(selectStyles.label, className), ...props, children });
 }
 function SelectSeparator({ className, ...props }) {
   return /* @__PURE__ */ jsx22("div", { role: "separator", className: clsx28(selectStyles.separator, className), ...props });
@@ -3705,6 +3756,7 @@ function SelectItem({
       "aria-selected": isSelected,
       "aria-disabled": disabled,
       "data-refineui": "select-item",
+      "data-scroll-edge-item": true,
       "data-selected": isSelected ? true : void 0,
       "data-state": pressed ? "pressed" : isSelected ? "selected" : void 0,
       "data-highlighted": isHighlighted ? "" : void 0,
@@ -3968,7 +4020,6 @@ import {
   useRef as useRef8,
   useState as useState7
 } from "react";
-import { iconSizes as iconSizes7 } from "@refineui/tokens";
 
 // src/components/Dialog/Dialog.tsx
 import { clsx as clsx32 } from "clsx";
@@ -4302,37 +4353,45 @@ function DialogClose({ className, onClick, type = "button", ...props }) {
 
 // src/components/Command/style.ts
 import { clsx as clsx33 } from "clsx";
-import { foundationSizes as foundationSizes2 } from "@refineui/tokens";
+import { foundationSizes as foundationSizes2, iconSizes as iconSizes7 } from "@refineui/tokens";
 var COMMAND_LIST_MAX_HEIGHT = `min(60vh, ${foundationSizes2.foundationSize3200})`;
 var commandStyles = {
-  root: clsx33(
-    "flex w-full flex-col overflow-hidden outline-none",
-    "rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default",
-    "bg-refineui-alias-background-primary text-refineui-alias-foreground-primary",
-    "shadow-refineui-2"
-  ),
-  /** Nested inside Dialog panel — Dialog already supplies radius / elevation */
-  rootInDialog: "min-h-0 w-full flex-col overflow-hidden rounded-none border-none shadow-none",
+  /** Detached layout: the search field and the results panel are separate surfaces, so the root has none. */
+  root: "flex w-full flex-col gap-refineui-size-small text-refineui-alias-foreground-primary outline-none",
+  rootInDialog: "min-h-0 w-full",
+  /** Dialog panel stays transparent — the field and results panel float on the scrim themselves. */
   dialogContentPanel: {
     padding: 0,
-    overflow: "hidden"
+    overflow: "visible",
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    borderRadius: 0
   },
-  dialogBody: "flex min-h-0 w-full flex-col overflow-hidden",
-  inputWrap: "shrink-0 p-refineui-size-medium",
-  /** Fixed list height — command palettes need an explicit cap (not content-sized flex). */
-  listShell: "box-border w-full overflow-hidden",
+  dialogBody: "flex min-h-0 w-full flex-col",
+  inputWrap: "shrink-0",
+  /**
+   * Results surface. Height is measured from the results (animated in refineui.css), capped by `maxHeight`.
+   * Radius comes from `--refineui-command-list-radius` (per size, refineui.css) so the scrollbar inset can share it.
+   */
+  listShell: clsx33(
+    "box-border w-full overflow-hidden",
+    "border-refineui-hairline border-refineui-alias-border-default",
+    "bg-refineui-alias-background-primary shadow-refineui-2"
+  ),
   list: "h-full min-h-0 w-full",
-  listShellHeight: {
-    height: COMMAND_LIST_MAX_HEIGHT,
+  listShellMaxHeight: {
     maxHeight: COMMAND_LIST_MAX_HEIGHT
   },
   listViewport: "outline-none",
-  listInner: "flex flex-col gap-refineui-size-xxx-small px-refineui-size-medium py-refineui-size-small",
+  listInner: "relative flex flex-col gap-refineui-size-xxx-small px-refineui-size-medium py-refineui-size-small",
+  /** Sliding highlight behind the selected item; geometry is measured, so physical `left`/`top` (inline) are intentional. */
+  indicator: "pointer-events-none absolute rounded-refineui-large bg-refineui-alias-background-surface-hover",
   empty: clsx33(
     componentTextClass(componentTypographyTokens.command.empty),
     "px-refineui-size-medium py-refineui-size-xx-large text-center text-refineui-alias-foreground-tertiary"
   ),
-  group: "flex flex-col gap-refineui-size-xxx-small overflow-hidden",
+  /** `overflow-clip`, not hidden: a hidden group would become the scroll container the edge effect tracks. */
+  group: "flex flex-col gap-refineui-size-xxx-small overflow-clip",
   groupHeading: clsx33(
     componentTextClass(componentTypographyTokens.command.group),
     "flex w-full items-center overflow-hidden px-refineui-size-x-small py-refineui-size-xxx-small text-refineui-alias-foreground-tertiary"
@@ -4340,9 +4399,8 @@ var commandStyles = {
   separatorWrap: "flex w-full items-center px-refineui-size-x-small py-refineui-size-x-small",
   separatorLine: "h-px w-full shrink-0 bg-refineui-alias-border-default",
   itemBase: clsx33(
-    componentTextClass(componentTypographyTokens.command.item),
-    "flex w-full items-center gap-refineui-size-x-small rounded-refineui-large border-none bg-transparent",
-    "px-refineui-size-x-small py-refineui-size-small text-start outline-none"
+    "relative flex w-full items-center gap-refineui-size-x-small rounded-refineui-large border-none bg-transparent",
+    "px-refineui-size-x-small text-start outline-none"
   ),
   itemDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   itemEnabled: "cursor-pointer text-refineui-alias-foreground-primary",
@@ -4354,6 +4412,16 @@ var commandStyles = {
     "shrink-0 tracking-wide text-refineui-alias-foreground-tertiary"
   )
 };
+var commandItemSizeClass = {
+  sm: clsx33(sizedComponentTextClass(componentTypographyTokens.command.item, "sm"), "py-refineui-size-xx-small"),
+  md: clsx33(sizedComponentTextClass(componentTypographyTokens.command.item, "md"), "py-refineui-size-small"),
+  lg: clsx33(sizedComponentTextClass(componentTypographyTokens.command.item, "lg"), "py-refineui-size-medium")
+};
+var commandItemIconSize = {
+  sm: iconSizes7.xsmall,
+  md: iconSizes7.small,
+  lg: iconSizes7.medium
+};
 
 // src/components/Command/Command.tsx
 import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -4389,6 +4457,7 @@ function useControllableString2(controlled, defaultValue, onChange) {
 function Command({
   children,
   className,
+  size = "md",
   value,
   defaultValue,
   onValueChange,
@@ -4507,6 +4576,7 @@ function Command({
   );
   const ctx = useMemo6(
     () => ({
+      size,
       search,
       setSearch,
       shouldFilter,
@@ -4524,6 +4594,7 @@ function Command({
       groupHasVisibleItems
     }),
     [
+      size,
       search,
       setSearch,
       shouldFilter,
@@ -4545,6 +4616,7 @@ function Command({
     "div",
     {
       "data-refineui": "command",
+      "data-size": size,
       role: "presentation",
       className: clsx34(commandStyles.root, className),
       onKeyDown: (event) => {
@@ -4596,17 +4668,19 @@ function CommandDialog({
     Command,
     {
       ...commandProps,
+      size: commandProps?.size ?? "lg",
       className: clsx34(commandStyles.rootInDialog, commandProps?.className),
       children
     }
   ) }) }) });
 }
 var CommandInput = forwardRef8(function CommandInput2({ className, startIcon, placeholder = "Type a command or search\u2026", disabled, onKeyDown, ...props }, ref) {
-  const { search, setSearch, listId, label, selectedValue } = useCommandContext("CommandInput");
+  const { size, search, setSearch, listId, label, selectedValue } = useCommandContext("CommandInput");
   const activeDescendantId = selectedValue ? `${listId}-item-${cssEscape(selectedValue)}` : void 0;
   return /* @__PURE__ */ jsx26("div", { "data-refineui": "command-input", className: commandStyles.inputWrap, children: /* @__PURE__ */ jsxs7(
     SearchField,
     {
+      size,
       value: search,
       onValueChange: setSearch,
       disabled,
@@ -4635,14 +4709,90 @@ var CommandInput = forwardRef8(function CommandInput2({ className, startIcon, pl
     }
   ) });
 });
+var HIDDEN_INDICATOR = { top: 0, left: 0, width: 0, height: 0, ready: false };
+var SELECTED_ITEM_SELECTOR = '[data-refineui="command-item"][data-selected="true"]';
+function sameIndicatorBox(a, b) {
+  return a.ready === b.ready && a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;
+}
 function CommandList({ className, children, ...props }) {
-  const { listId } = useCommandContext("CommandList");
+  const { listId, selectedValue, search, visibleCount } = useCommandContext("CommandList");
+  const shellRef = useRef8(null);
+  const innerRef = useRef8(null);
+  const [contentHeight, setContentHeight] = useState7(null);
+  const [indicator, setIndicator] = useState7(HIDDEN_INDICATOR);
+  const [animate, setAnimate] = useState7(false);
+  const [snap, setSnap] = useState7(false);
+  const lastSearchRef = useRef8(search);
+  const measure = useCallback6(() => {
+    const inner = innerRef.current;
+    const shell = shellRef.current;
+    if (!inner || !shell) return;
+    const shellStyle = getComputedStyle(shell);
+    const height = inner.offsetHeight + parseFloat(shellStyle.borderTopWidth) + parseFloat(shellStyle.borderBottomWidth);
+    setContentHeight((prev) => prev === height ? prev : height);
+    const selected = inner.querySelector(SELECTED_ITEM_SELECTOR);
+    setIndicator((prev) => {
+      const next = selected ? {
+        top: selected.offsetTop,
+        left: selected.offsetLeft,
+        width: selected.offsetWidth,
+        height: selected.offsetHeight,
+        ready: true
+      } : { ...prev, ready: false };
+      return sameIndicatorBox(prev, next) ? prev : next;
+    });
+  }, []);
+  useIsomorphicLayoutEffect2(() => {
+    if (lastSearchRef.current !== search) {
+      lastSearchRef.current = search;
+      setSnap(true);
+    }
+    measure();
+  }, [measure, selectedValue, search, visibleCount, children]);
+  useEffect5(() => {
+    if (!snap) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setSnap(false));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [snap]);
+  useEffect5(() => {
+    const inner = innerRef.current;
+    if (!inner || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(inner);
+    return () => observer.disconnect();
+  }, [measure]);
+  const measured = contentHeight !== null;
+  useEffect5(() => {
+    if (!measured || animate) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [measured, animate]);
+  const indicatorStyle = {
+    top: indicator.top,
+    left: indicator.left,
+    width: indicator.width,
+    height: indicator.height
+  };
   return /* @__PURE__ */ jsx26(
     "div",
     {
+      ref: shellRef,
       "data-refineui": "command-list",
+      "data-animate": animate ? "true" : void 0,
       className: commandStyles.listShell,
-      style: commandStyles.listShellHeight,
+      style: { ...commandStyles.listShellMaxHeight, height: contentHeight ?? void 0 },
       children: /* @__PURE__ */ jsx26(
         ScrollAreaRegion,
         {
@@ -4650,7 +4800,21 @@ function CommandList({ className, children, ...props }) {
           className: clsx34(commandStyles.list, className),
           viewportClassName: commandStyles.listViewport,
           ...props,
-          children: /* @__PURE__ */ jsx26("div", { id: listId, role: "listbox", className: commandStyles.listInner, children })
+          children: /* @__PURE__ */ jsxs7("div", { ref: innerRef, id: listId, role: "listbox", className: commandStyles.listInner, children: [
+            /* @__PURE__ */ jsx26(
+              "div",
+              {
+                "data-refineui": "command-indicator",
+                "data-ready": indicator.ready ? "true" : void 0,
+                "data-animate": animate && !snap ? "true" : void 0,
+                "data-scroll-edge-item": true,
+                "aria-hidden": true,
+                className: commandStyles.indicator,
+                style: indicatorStyle
+              }
+            ),
+            children
+          ] })
         }
       )
     }
@@ -4695,6 +4859,7 @@ function CommandGroupHeading({ className, children, ...props }) {
     "div",
     {
       "data-refineui": "command-group-heading",
+      "data-scroll-edge-item": true,
       className: clsx34(commandStyles.groupHeading, className),
       ...props,
       children
@@ -4778,6 +4943,7 @@ var CommandItem = forwardRef8(function CommandItem2({
   ...props
 }, forwardedRef) {
   const {
+    size,
     selectedValue,
     setSelectedValue,
     listId,
@@ -4785,6 +4951,7 @@ var CommandItem = forwardRef8(function CommandItem2({
     isItemVisible,
     selectById
   } = useCommandContext("CommandItem");
+  const iconSize = commandItemIconSize[size];
   const group = useContext7(CommandGroupContext);
   const itemId = useId6();
   const nodeRef = useRef8(null);
@@ -4828,11 +4995,13 @@ var CommandItem = forwardRef8(function CommandItem2({
       "aria-selected": isSelected,
       disabled,
       "data-refineui": "command-item",
+      "data-scroll-edge-item": true,
       "data-state": disabled ? "disabled" : isSelected ? "active" : "default",
       "data-selected": isSelected || void 0,
       "data-disabled": disabled || void 0,
       className: clsx34(
         commandStyles.itemBase,
+        commandItemSizeClass[size],
         disabled ? commandStyles.itemDisabled : commandStyles.itemEnabled,
         className
       ),
@@ -4852,9 +5021,9 @@ var CommandItem = forwardRef8(function CommandItem2({
           {
             className: commandStyles.iconWrap,
             style: {
-              width: iconSizes7.small,
-              minWidth: iconSizes7.small,
-              height: iconSizes7.small
+              width: iconSize,
+              minWidth: iconSize,
+              height: iconSize
             },
             children: startIcon
           }
@@ -4868,9 +5037,9 @@ var CommandItem = forwardRef8(function CommandItem2({
             {
               className: commandStyles.iconWrap,
               style: {
-                width: iconSizes7.small,
-                minWidth: iconSizes7.small,
-                height: iconSizes7.small
+                width: iconSize,
+                minWidth: iconSize,
+                height: iconSize
               },
               children: endIcon
             }
@@ -8981,6 +9150,7 @@ function DropdownLabel({ className, ...props }) {
     {
       role: "presentation",
       "data-refineui": "dropdown-menu-label",
+      "data-scroll-edge-item": true,
       className: clsx70(dropdownStyles.label, className),
       ...props
     }
@@ -9010,6 +9180,7 @@ function DropdownItem({
       type: "button",
       role: "menuitem",
       "data-refineui": "dropdown-item",
+      "data-scroll-edge-item": true,
       "data-selected": selected || void 0,
       "data-state": pressed ? "pressed" : selected ? "selected" : void 0,
       disabled,
@@ -9187,6 +9358,7 @@ function DropdownSubTrigger({
       "aria-expanded": open,
       disabled: isDisabled,
       "data-refineui": "dropdown-item",
+      "data-scroll-edge-item": true,
       "data-slot": "dropdown-menu-sub-trigger",
       tabIndex: -1,
       className: clsx70(
@@ -10692,6 +10864,7 @@ function NavigationMenuIndicator({ className, style, ...props }) {
 
 // src/components/Sidebar/Sidebar.tsx
 import { clsx as clsx80 } from "clsx";
+import { createContext as createContext19, useContext as useContext21 } from "react";
 
 // src/components/Sidebar/style.ts
 import { clsx as clsx79 } from "clsx";
@@ -10710,7 +10883,9 @@ var sidebarStyles = {
     componentTextClass(componentTypographyTokens.sidebar.brand),
     "m-0 flex min-w-0 items-center gap-refineui-size-small text-refineui-alias-foreground-primary"
   ),
-  content: "flex min-h-0 flex-1 flex-col overflow-y-auto px-refineui-size-medium py-refineui-size-medium",
+  /** Scrolls through a built-in ScrollArea; padding sits inside the viewport so rows scroll under the edges. */
+  content: "flex min-h-0 flex-1 flex-col",
+  contentViewport: "box-border px-refineui-size-medium py-refineui-size-medium",
   nav: "flex min-h-0 flex-col gap-refineui-size-x-large",
   group: "flex min-w-0 flex-col gap-refineui-size-xx-small",
   groupLabel: clsx79(
@@ -10735,6 +10910,7 @@ var sidebarStyles = {
 
 // src/components/Sidebar/Sidebar.tsx
 import { jsx as jsx60 } from "react/jsx-runtime";
+var SidebarScrollContext = createContext19(false);
 function Sidebar({ className, ...props }) {
   return /* @__PURE__ */ jsx60(
     "aside",
@@ -10765,13 +10941,14 @@ function SidebarBrand({ className, ...props }) {
     }
   );
 }
-function SidebarContent({ className, ...props }) {
+function SidebarContent({ className, children, ...props }) {
   return /* @__PURE__ */ jsx60(
     "div",
     {
       "data-refineui": "sidebar-content",
       className: clsx80(sidebarStyles.content, className),
-      ...props
+      ...props,
+      children: /* @__PURE__ */ jsx60(ScrollAreaRegion, { type: "hover", viewportClassName: sidebarStyles.contentViewport, children: /* @__PURE__ */ jsx60(SidebarScrollContext.Provider, { value: true, children }) })
     }
   );
 }
@@ -10797,10 +10974,12 @@ function SidebarGroup({ className, ...props }) {
   );
 }
 function SidebarGroupLabel({ className, ...props }) {
+  const inScroll = useContext21(SidebarScrollContext);
   return /* @__PURE__ */ jsx60(
     "p",
     {
       "data-refineui": "sidebar-group-label",
+      "data-scroll-edge-item": inScroll || void 0,
       className: clsx80(sidebarStyles.groupLabel, className),
       ...props
     }
@@ -10813,10 +10992,12 @@ function SidebarLink({
   ...props
 }) {
   const disabled = ariaDisabled === true || ariaDisabled === "true";
+  const inScroll = useContext21(SidebarScrollContext);
   return /* @__PURE__ */ jsx60(
     "a",
     {
       "data-refineui": "sidebar-link",
+      "data-scroll-edge-item": inScroll || void 0,
       "data-active": active || void 0,
       "aria-current": active ? "page" : void 0,
       "aria-disabled": disabled || void 0,
@@ -10845,9 +11026,9 @@ function SidebarFooter({ className, ...props }) {
 // src/components/Sidebar/SidebarPeek.tsx
 import { clsx as clsx82 } from "clsx";
 import {
-  createContext as createContext19,
+  createContext as createContext20,
   useCallback as useCallback15,
-  useContext as useContext21,
+  useContext as useContext22,
   useEffect as useEffect14,
   useMemo as useMemo15,
   useRef as useRef16,
@@ -10882,9 +11063,9 @@ import { jsx as jsx61 } from "react/jsx-runtime";
 var PEEK_OPEN_DELAY_MS = motionMsToNumber5(semanticInteraction7.duration.medium);
 var PEEK_CLOSE_DELAY_MS = motionMsToNumber5(semanticInteraction7.duration.medium);
 var PEEK_BRIDGE_DELAY_MS = motionMsToNumber5(semanticInteraction7.duration.slow);
-var SidebarPeekContext = createContext19(null);
+var SidebarPeekContext = createContext20(null);
 function useSidebarPeekContext(component) {
-  const ctx = useContext21(SidebarPeekContext);
+  const ctx = useContext22(SidebarPeekContext);
   if (!ctx) throw new Error(`${component} must be used within <SidebarPeek>.`);
   return ctx;
 }
@@ -11133,19 +11314,19 @@ function useSidebarPeek() {
 
 // src/components/Sidebar/SidebarProvider.tsx
 import {
-  createContext as createContext20,
+  createContext as createContext21,
   forwardRef as forwardRef14,
   useCallback as useCallback16,
-  useContext as useContext22,
+  useContext as useContext23,
   useId as useId13,
   useMemo as useMemo16,
   useState as useState20
 } from "react";
 import { Slot as Slot3 } from "@refineui/utilities/react";
 import { jsx as jsx62 } from "react/jsx-runtime";
-var SidebarContext = createContext20(null);
+var SidebarContext = createContext21(null);
 function useSidebarContext(component) {
-  const value = useContext22(SidebarContext);
+  const value = useContext23(SidebarContext);
   if (!value) throw new Error(`${component} must be used within <SidebarProvider>.`);
   return value;
 }
@@ -11321,9 +11502,9 @@ function Pagination(props) {
 // src/components/PopOver/PopOver.tsx
 import { clsx as clsx85 } from "clsx";
 import {
-  createContext as createContext21,
+  createContext as createContext22,
   useCallback as useCallback17,
-  useContext as useContext23,
+  useContext as useContext24,
   useEffect as useEffect16,
   useId as useId14,
   useMemo as useMemo17,
@@ -11435,7 +11616,11 @@ function buildFloatingOutline({
 import { jsx as jsx64, jsxs as jsxs24 } from "react/jsx-runtime";
 var useIsomorphicLayoutEffect6 = typeof document !== "undefined" ? useLayoutEffect9 : useEffect15;
 var SHADOW_BLEED = parseFloat(spacings5.sizeXXXLarge);
-var STROKE = parseFloat(strokeWidths2.strokeWidthThin);
+var STROKE = parseFloat(strokeWidths2.strokeWidthHairline);
+function svgPathMask(shape, width, height, bleed) {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width + bleed * 2}" height="${height + bleed * 2}"><path transform="translate(${bleed} ${bleed})" d="${shape}"/></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
 function usePanelSize(panelRef) {
   const [size, setSize] = useState21(null);
   useIsomorphicLayoutEffect6(() => {
@@ -11494,8 +11679,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,
@@ -11513,10 +11698,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__ */ jsxs24("div", { "data-refineui": "floating-chrome", "aria-hidden": true, className: "pointer-events-none absolute -z-1", style: rootStyle, children: [
     /* @__PURE__ */ jsx64("div", { className: "absolute", style: shadowStyle, children: /* @__PURE__ */ jsx64("div", { "data-refineui": "floating-shadow", className: "absolute", style: { inset: SHADOW_BLEED }, children: /* @__PURE__ */ jsx64("div", { className: "absolute inset-0", style: { clipPath: clip, backgroundColor: borderColor } }) }) }),
-    /* @__PURE__ */ jsx64("div", { "data-refineui": "floating-surface", className: "absolute inset-0", style: { clipPath: clip, backgroundColor } }),
+    /* @__PURE__ */ jsx64("div", { "data-refineui": "floating-surface", className: "absolute inset-0", style: surfaceStyle }),
     /* @__PURE__ */ jsx64(
       "svg",
       {
@@ -11539,7 +11733,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") {
@@ -11564,9 +11758,9 @@ function popoverFloatingClasses(placement, align) {
 
 // src/components/PopOver/PopOver.tsx
 import { jsx as jsx65, jsxs as jsxs25 } from "react/jsx-runtime";
-var PopoverContext = createContext21(null);
+var PopoverContext = createContext22(null);
 function usePopoverContext(component) {
-  const ctx = useContext23(PopoverContext);
+  const ctx = useContext24(PopoverContext);
   if (!ctx) throw new Error(`${component} must be used within <Popover>`);
   return ctx;
 }
@@ -11914,11 +12108,11 @@ import { iconSizes as iconSizes18 } from "@refineui/tokens";
 import {
   Children as Children6,
   cloneElement as cloneElement2,
-  createContext as createContext22,
+  createContext as createContext23,
   forwardRef as forwardRef15,
   isValidElement as isValidElement5,
   useCallback as useCallback18,
-  useContext as useContext24,
+  useContext as useContext25,
   useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo18,
@@ -11948,8 +12142,8 @@ var carouselStyles = {
   ),
   indicatorThumb: clsx88(
     "pointer-events-none absolute top-refineui-size-xxx-small bottom-refineui-size-xxx-small start-refineui-size-xxx-small z-0",
-    "rounded-refineui-circle bg-refineui-alias-background-brand shadow-refineui-2",
-    "transition-transform duration-[var(--refineui-motion-duration-medium)] ease-[var(--refineui-motion-easing-emphasized)]"
+    /* Motion lives in refineui.css, gated by `data-animate`. */
+    "rounded-refineui-circle bg-refineui-alias-background-brand shadow-refineui-2"
   ),
   indicatorHitRow: "relative z-[1] flex h-full w-full",
   indicatorHit: "h-full min-w-0 flex-1 cursor-pointer border-none bg-transparent p-0 outline-none"
@@ -11958,9 +12152,9 @@ var carouselStyles = {
 // src/components/Carousel/Carousel.tsx
 import { jsx as jsx68, jsxs as jsxs26 } from "react/jsx-runtime";
 var DRAG_COMMIT_RATIO = 0.18;
-var CarouselContext = createContext22(null);
+var CarouselContext = createContext23(null);
 function useCarouselContext(component) {
-  const v = useContext24(CarouselContext);
+  const v = useContext25(CarouselContext);
   if (!v) throw new Error(`${component} must be used within Carousel.`);
   return v;
 }
@@ -11993,11 +12187,18 @@ function Carousel({
     },
     [count, isControlled, onIndexChange]
   );
+  const snapTrackTo = useCallback18((next) => {
+    setInstant(true);
+    setTrackIndex(next);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setInstant(false));
+    });
+  }, []);
   useLayoutEffect10(() => {
     if (count <= 0) return;
     const logical = clampIndex(index, count);
     if (logical !== index) commitLogical(logical);
-    setTrackIndex(loopActive ? logical + 1 : logical);
+    snapTrackTo(loopActive ? logical + 1 : logical);
   }, [count, loopActive]);
   useEffect17(() => {
     if (count <= 0) return;
@@ -12050,20 +12251,9 @@ function Carousel({
   }, [commitLogical, count, index, loopActive, trackIndex]);
   const onTrackSettled = useCallback18(() => {
     if (!loopActive) return;
-    if (trackIndex === 0) {
-      setInstant(true);
-      setTrackIndex(count);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => setInstant(false));
-      });
-    } else if (trackIndex === count + 1) {
-      setInstant(true);
-      setTrackIndex(1);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => setInstant(false));
-      });
-    }
-  }, [count, loopActive, trackIndex]);
+    if (trackIndex === 0) snapTrackTo(count);
+    else if (trackIndex === count + 1) snapTrackTo(1);
+  }, [count, loopActive, snapTrackTo, trackIndex]);
   const ctx = useMemo18(
     () => ({
       index,
@@ -12319,6 +12509,7 @@ function CarouselIndicators({ className, ...props }) {
   const { count, index, scrollTo } = useCarouselContext("CarouselIndicators");
   const trackRef = useRef18(null);
   const [thumb, setThumb] = useState24({ width: 0, x: 0, ready: false });
+  const [animate, setAnimate] = useState24(false);
   const updateThumb = useCallback18(() => {
     const el = trackRef.current;
     if (!el || count <= 0) {
@@ -12337,6 +12528,21 @@ function CarouselIndicators({ className, ...props }) {
   useLayoutEffect10(() => {
     updateThumb();
   }, [updateThumb]);
+  useEffect17(() => {
+    if (!thumb.ready) {
+      setAnimate(false);
+      return;
+    }
+    if (animate) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [thumb.ready, animate]);
   useEffect17(() => {
     const el = trackRef.current;
     if (!el) return;
@@ -12364,6 +12570,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
@@ -12392,9 +12599,9 @@ function CarouselIndicators({ className, ...props }) {
 import { clsx as clsx91 } from "clsx";
 import {
   Children as Children7,
-  createContext as createContext23,
+  createContext as createContext24,
   isValidElement as isValidElement6,
-  useContext as useContext25
+  useContext as useContext26
 } from "react";
 
 // src/components/Bubble/style.ts
@@ -12461,9 +12668,9 @@ var bubbleContentVariantClass = {
 
 // src/components/Bubble/Bubble.tsx
 import { jsx as jsx69, jsxs as jsxs27 } from "react/jsx-runtime";
-var BubbleContext = createContext23(null);
+var BubbleContext = createContext24(null);
 function useBubbleContext(component) {
-  const value = useContext25(BubbleContext);
+  const value = useContext26(BubbleContext);
   if (!value) throw new Error(`${component} must be used within Bubble.`);
   return value;
 }
@@ -12578,9 +12785,9 @@ function BubbleReactions({
 import { clsx as clsx93 } from "clsx";
 import { iconSizes as iconSizes19 } from "@refineui/tokens";
 import {
-  createContext as createContext24,
+  createContext as createContext25,
   useCallback as useCallback19,
-  useContext as useContext26,
+  useContext as useContext27,
   useMemo as useMemo19,
   useRef as useRef19,
   useState as useState25
@@ -12693,16 +12900,16 @@ var stepperConnectorVars = {
 
 // src/components/Stepper/Stepper.tsx
 import { jsx as jsx70, jsxs as jsxs28 } from "react/jsx-runtime";
-var StepperContext = createContext24(null);
-var StepperItemContext = createContext24(null);
-var StepperListRegistryContext = createContext24(null);
+var StepperContext = createContext25(null);
+var StepperItemContext = createContext25(null);
+var StepperListRegistryContext = createContext25(null);
 function useStepperContext(component) {
-  const v = useContext26(StepperContext);
+  const v = useContext27(StepperContext);
   if (!v) throw new Error(`${component} must be used within Stepper.`);
   return v;
 }
 function useStepperItemContext(component) {
-  const v = useContext26(StepperItemContext);
+  const v = useContext27(StepperItemContext);
   if (!v) throw new Error(`${component} must be used within StepperItem.`);
   return v;
 }
@@ -12793,7 +13000,7 @@ function StepperItem({
   ...props
 }) {
   const { value, setValue, orientation, interactive } = useStepperContext("StepperItem");
-  const registry = useContext26(StepperListRegistryContext);
+  const registry = useContext27(StepperListRegistryContext);
   registry?.noteItem(itemValue);
   const state = resolveState2(itemValue, value);
   const canActivate = interactive && !disabled;
@@ -12908,7 +13115,7 @@ function StepperDescription({ className, ...props }) {
 }
 function StepperSeparator({ className, ...props }) {
   const { orientation } = useStepperContext("StepperSeparator");
-  const registry = useContext26(StepperListRegistryContext);
+  const registry = useContext27(StepperListRegistryContext);
   const state = registry?.takeSeparatorState() ?? "upcoming";
   const vertical = orientation === "vertical";
   return /* @__PURE__ */ jsx70(
@@ -12970,9 +13177,9 @@ StepperSeparator.displayName = "StepperSeparator";
 // src/components/Resizable/Resizable.tsx
 import { clsx as clsx95 } from "clsx";
 import {
-  createContext as createContext25,
+  createContext as createContext26,
   useCallback as useCallback20,
-  useContext as useContext27,
+  useContext as useContext28,
   useId as useId15,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo20,
@@ -13019,9 +13226,9 @@ var KEYBOARD_STEP_LARGE = 10;
 var DEFAULT_SIZE = 50;
 var DEFAULT_MIN_SIZE = 10;
 var DEFAULT_MAX_SIZE = 100;
-var ResizableContext = createContext25(null);
+var ResizableContext = createContext26(null);
 function useResizableContext(component) {
-  const v = useContext27(ResizableContext);
+  const v = useContext28(ResizableContext);
   if (!v) throw new Error(`${component} must be used within ResizablePanelGroup.`);
   return v;
 }
@@ -14272,15 +14479,15 @@ import {
 } from "react";
 
 // src/components/Tree/context.ts
-import { createContext as createContext26, useEffect as useEffect20, useState as useState29 } from "react";
+import { createContext as createContext27, useEffect as useEffect20, useState as useState29 } from "react";
 import { semanticInteraction as semanticInteraction8 } from "@refineui/tokens";
 import { getReducedMotionQuery as getReducedMotionQuery2 } from "@refineui/utilities/animation";
 var TREE_PANEL_MS = Number.parseFloat(semanticInteraction8.duration.accordionPanel) / 1e3;
 var TREE_CONTENT_MS = Number.parseFloat(semanticInteraction8.duration.accordionContent) / 1e3;
 var TREE_PANEL_EASE = semanticInteraction8.easing.panel;
 var TREE_CONTENT_EASE = semanticInteraction8.easing.content;
-var TreeContext = createContext26(null);
-var TreeItemContext = createContext26(null);
+var TreeContext = createContext27(null);
+var TreeItemContext = createContext27(null);
 function usePrefersReducedMotion2() {
   const [reduce, setReduce] = useState29(false);
   useEffect20(() => {
@@ -14504,11 +14711,11 @@ function Tree({
 
 // src/components/Tree/TreeItem.tsx
 import { clsx as clsx101 } from "clsx";
-import { useContext as useContext28, useId as useId16, useMemo as useMemo22, useState as useState31 } from "react";
+import { useContext as useContext29, useId as useId16, useMemo as useMemo22, useState as useState31 } from "react";
 import { jsx as jsx75 } from "react/jsx-runtime";
 function TreeItem({ value, disabled = false, className, children, ...props }) {
-  const tree = useContext28(TreeContext);
-  const parent = useContext28(TreeItemContext);
+  const tree = useContext29(TreeContext);
+  const parent = useContext29(TreeItemContext);
   if (!tree) throw new Error("TreeItem must be used within Tree.");
   const [hasBranch, setHasBranch] = useState31(false);
   const uid = useId16().replace(/:/g, "");
@@ -14555,13 +14762,13 @@ function TreeItem({ value, disabled = false, className, children, ...props }) {
 // src/components/Tree/TreeItemTrigger.tsx
 import { clsx as clsx102 } from "clsx";
 import {
-  useContext as useContext29,
+  useContext as useContext30,
   useEffect as useEffect21
 } from "react";
 import { jsx as jsx76, jsxs as jsxs31 } from "react/jsx-runtime";
 function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props }) {
-  const tree = useContext29(TreeContext);
-  const item = useContext29(TreeItemContext);
+  const tree = useContext30(TreeContext);
+  const item = useContext30(TreeItemContext);
   if (!tree || !item) throw new Error("TreeItemTrigger must be used within TreeItem.");
   const iconSize = treeIconSize[tree.size];
   const depthIndent = "calc(var(--refineui-spacing-size-large) + var(--refineui-spacing-size-x-small))";
@@ -14689,11 +14896,11 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
 
 // src/components/Tree/TreeItemContent.tsx
 import { clsx as clsx103 } from "clsx";
-import { useContext as useContext30, useLayoutEffect as useLayoutEffect13 } from "react";
+import { useContext as useContext31, useLayoutEffect as useLayoutEffect13 } from "react";
 import { jsx as jsx77 } from "react/jsx-runtime";
 function TreeItemContent({ className, children, ...props }) {
-  const tree = useContext30(TreeContext);
-  const item = useContext30(TreeItemContext);
+  const tree = useContext31(TreeContext);
+  const item = useContext31(TreeItemContext);
   if (!tree || !item) throw new Error("TreeItemContent must be used within TreeItem.");
   const { setHasBranch, expanded, groupId, triggerId } = item;
   useLayoutEffect13(() => {
@@ -14759,7 +14966,7 @@ var tooltipStyles = {
   /** Fill, stroke, and shadow come from `FloatingSurface`; the transparent border keeps the box size. */
   panel: clsx104(
     componentTextClass(componentTypographyTokens.tooltip),
-    "relative z-0 box-border max-w-refineui-tooltip-max-width whitespace-nowrap rounded-refineui-medium border-refineui-thin 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) {
@@ -14933,9 +15140,9 @@ function Tooltip({
 import { clsx as clsx107 } from "clsx";
 import {
   Children as Children8,
-  createContext as createContext27,
+  createContext as createContext28,
   isValidElement as isValidElement7,
-  useContext as useContext31,
+  useContext as useContext32,
   useId as useId18,
   useLayoutEffect as useLayoutEffect14,
   useMemo as useMemo23,
@@ -15168,9 +15375,9 @@ function formatAxisTick(value) {
 
 // src/components/Chart/Chart.tsx
 import { Fragment as Fragment4, jsx as jsx79, jsxs as jsxs33 } from "react/jsx-runtime";
-var ChartContext = createContext27(null);
+var ChartContext = createContext28(null);
 function useChartContext(component) {
-  const value = useContext31(ChartContext);
+  const value = useContext32(ChartContext);
   if (!value) throw new Error(`${component} must be used within Chart.`);
   return value;
 }
@@ -15652,12 +15859,12 @@ import { clsx as clsx108 } from "clsx";
 import { Slot as Slot7 } from "@refineui/utilities/react";
 
 // src/components/Collapsible/context.ts
-import { createContext as createContext28, useContext as useContext32, useEffect as useEffect22, useState as useState34 } from "react";
+import { createContext as createContext29, useContext as useContext33, useEffect as useEffect22, useState as useState34 } from "react";
 import { semanticInteraction as semanticInteraction9 } from "@refineui/tokens";
 import { getReducedMotionQuery as getReducedMotionQuery3 } from "@refineui/utilities/animation";
-var CollapsibleContext = createContext28(null);
+var CollapsibleContext = createContext29(null);
 function useCollapsibleContext(part) {
-  const value = useContext32(CollapsibleContext);
+  const value = useContext33(CollapsibleContext);
   if (!value) throw new Error(`${part} must be used within Collapsible`);
   return value;
 }
@@ -15790,10 +15997,10 @@ var CollapsibleContent = forwardRef17(
 
 // src/components/ContextMenu/ContextMenu.tsx
 import {
-  createContext as createContext29,
+  createContext as createContext30,
   forwardRef as forwardRef18,
   useCallback as useCallback24,
-  useContext as useContext33,
+  useContext as useContext34,
   useEffect as useEffect23,
   useLayoutEffect as useLayoutEffect15,
   useMemo as useMemo25,
@@ -15808,10 +16015,10 @@ import { Slot as Slot8 } from "@refineui/utilities/react";
 import { Fragment as Fragment5, jsx as jsx81, jsxs as jsxs34 } from "react/jsx-runtime";
 var MENU_ATTR = "data-refineui-context-menu";
 var CLOSE_MS = motionMsToNumber7(semanticInteraction10.duration.normal);
-var MenuContext2 = createContext29(null);
-var SubContext = createContext29(null);
+var MenuContext2 = createContext30(null);
+var SubContext = createContext30(null);
 function useMenu() {
-  const value = useContext33(MenuContext2);
+  const value = useContext34(MenuContext2);
   if (!value) throw new Error("Context menu parts must be used within ContextMenu");
   return value;
 }
@@ -16060,7 +16267,7 @@ function ContextMenuSub({ children }) {
   return /* @__PURE__ */ jsx81(SubContext.Provider, { value, children });
 }
 function useSub2() {
-  const value = useContext33(SubContext);
+  const value = useContext34(SubContext);
   if (!value) throw new Error("ContextMenuSubTrigger must be used within ContextMenuSub");
   return value;
 }