@refineui/react 0.0.8 → 0.0.10

package/dist/index.js

@@ -35,14 +35,13 @@ var componentColorTokens = {
       states: buttonPrimaryColorTokens.states
     },
     secondary: {
-      background: semanticToken("backgroundPrimary"),
+      background: semanticToken("backgroundSurfaceHover"),
       foreground: semanticToken("foregroundPrimary"),
-      border: semanticToken("borderDefault"),
-      hoverBackground: semanticToken("backgroundSurfaceHover"),
-      hoverBorder: semanticToken("borderStrong"),
+      hoverBackground: semanticToken("backgroundSurfaceActive"),
+      hoverForeground: semanticToken("foregroundPrimaryHover"),
       activeBackground: semanticToken("backgroundSurfaceActive"),
+      activeForeground: semanticToken("foregroundPrimary"),
       disabledBackground: semanticToken("backgroundSurfaceDisabled"),
-      disabledBorder: semanticToken("borderDisabled"),
       disabledForeground: semanticToken("foregroundDisabled")
     },
     outline: {
@@ -1198,7 +1197,7 @@ function resolveSlotClasses(recipe, slot, variants = {}) {
 // src/recipes/button.recipe.ts
 var buttonVariantClass = {
   primary: "border-refineui-none border border-transparent bg-refineui-alias-background-brand text-refineui-alias-foreground-inversed",
-  secondary: "border-refineui-thin border-refineui-alias-border-default bg-refineui-alias-background-surface text-refineui-alias-foreground-primary",
+  secondary: "border-refineui-none border border-transparent bg-refineui-alias-background-surface-hover text-refineui-alias-foreground-primary",
   outline: "border-refineui-thin border-refineui-alias-border-default bg-transparent text-refineui-alias-foreground-primary",
   ghost: "border-refineui-none border border-transparent bg-transparent text-refineui-alias-foreground-primary"
 };
@@ -1236,6 +1235,10 @@ var buttonRecipe = defineRecipe({
       match: { layout: "icon", variant: "primary" },
       className: "border-0"
     },
+    {
+      match: { layout: "icon", variant: "secondary" },
+      className: "border-0"
+    },
     {
       match: { layout: "icon", variant: "ghost" },
       className: "border-0"
@@ -1270,7 +1273,7 @@ var Button = forwardRef(function Button2({
   const inactive = Boolean(disabled) || ariaDisabledProp === true || ariaDisabledProp === "true";
   const variantStyles = variant === "ghost" && layout === "icon" ? buttonStyles.iconGhost : buttonVariantClass[variant];
   const sizeStyles = layout === "icon" ? buttonIconSizeClass[size] : buttonLabelSizeClass[size];
-  const iconNoStroke = layout === "icon" && (variant === "primary" || variant === "ghost") ? "border-0" : null;
+  const iconNoStroke = layout === "icon" && (variant === "primary" || variant === "secondary" || variant === "ghost") ? "border-0" : null;
   return /* @__PURE__ */ jsx2(
     "button",
     {
@@ -2937,13 +2940,26 @@ var selectStyles = {
     "border-refineui-hairline border-refineui-alias-border-default",
     "bg-refineui-alias-background-primary px-refineui-size-medium py-refineui-size-x-small",
     "text-refineui-alias-foreground-primary outline-none",
-    "transition-[color,background-color,border-color] duration-[var(--refineui-motion-duration-fast)]"
+    "transition-[color,background-color,border-color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+  ),
+  /** Ghost plate — same gap/radius as filled, no field border (Button ghost-like). */
+  triggerGhost: clsx27(
+    "box-border inline-flex cursor-pointer items-center justify-between",
+    "gap-refineui-size-x-small rounded-refineui-large",
+    "border-refineui-none border-transparent bg-transparent",
+    "px-refineui-size-x-small py-refineui-size-xx-small",
+    "text-refineui-alias-foreground-primary outline-none",
+    "transition-[color,background-color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
   ),
   /** Flush shell — consumer / parent owns padding, radius, surface. */
-  triggerPlain: "box-border inline-flex cursor-pointer items-center outline-none",
+  triggerPlain: clsx27(
+    "box-border inline-flex cursor-pointer items-center outline-none",
+    "transition-[transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+  ),
   triggerInner: "min-w-0 flex-1 overflow-hidden text-start",
   triggerOpen: "text-refineui-alias-foreground-primary",
   triggerDisabled: "cursor-not-allowed border-refineui-alias-border-disabled bg-refineui-alias-background-surface-disabled text-refineui-alias-foreground-disabled",
+  triggerGhostDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   triggerPlainDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   value: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-start",
   iconWrap: "inline-flex size-refineui-icon-xsmall shrink-0 items-center justify-center",
@@ -3224,9 +3240,12 @@ function Select({
 }
 var SelectTrigger = forwardRef6(function SelectTrigger2(props, forwardedRef) {
   const { className, children, style, appearance = "filled", ...triggerRest } = props;
-  const { open, setOpen, triggerRef, onKeyDown, size, fullWidth, disabled, value, getLabelByValue } = useSelectCtx();
-  const hasLabel = Boolean(getLabelByValue(value));
+  const { open, setOpen, triggerRef, onKeyDown, size, fullWidth, disabled, value } = useSelectCtx();
+  const isPlaceholder = value === "";
   const isPlain = appearance === "plain";
+  const isGhost = appearance === "ghost";
+  const isFilled = appearance === "filled";
+  const [pressed, setPressed] = useState5(false);
   const setRefs = useCallback4(
     (node) => {
       triggerRef.current = node;
@@ -3235,6 +3254,7 @@ var SelectTrigger = forwardRef6(function SelectTrigger2(props, forwardedRef) {
     },
     [forwardedRef, triggerRef]
   );
+  const clearPressed = useCallback4(() => setPressed(false), []);
   return /* @__PURE__ */ jsxs4(
     "button",
     {
@@ -3247,20 +3267,31 @@ var SelectTrigger = forwardRef6(function SelectTrigger2(props, forwardedRef) {
       "data-appearance": appearance,
       "data-size": size,
       "data-state": open ? "open" : "closed",
-      "data-placeholder": hasLabel ? void 0 : "",
+      "data-pressed": pressed ? "" : void 0,
+      "data-placeholder": isPlaceholder ? "" : void 0,
       disabled,
+      onPointerDown: (event) => {
+        if (disabled || event.button !== 0) return;
+        setPressed(true);
+      },
+      onPointerUp: clearPressed,
+      onPointerLeave: clearPressed,
+      onPointerCancel: clearPressed,
       onMouseDown: (event) => {
         event.preventDefault();
+        if (disabled) return;
         setOpen(!open);
         triggerRef.current?.focus();
       },
       onKeyDown,
       className: clsx28(
         "data-[placeholder]:[&_[data-refineui-select-value]]:text-refineui-alias-foreground-placeholder",
-        isPlain ? selectStyles.triggerPlain : selectStyles.trigger,
-        !isPlain && selectTriggerSizeClass[size],
-        !isPlain && open && selectStyles.triggerOpen,
-        disabled && (isPlain ? selectStyles.triggerPlainDisabled : selectStyles.triggerDisabled),
+        isPlain && selectStyles.triggerPlain,
+        isGhost && selectStyles.triggerGhost,
+        isFilled && selectStyles.trigger,
+        (isFilled || isGhost) && selectTriggerSizeClass[size],
+        isFilled && open && selectStyles.triggerOpen,
+        disabled && (isPlain ? selectStyles.triggerPlainDisabled : isGhost ? selectStyles.triggerGhostDisabled : selectStyles.triggerDisabled),
         fullWidth && "w-full",
         className
       ),
@@ -3286,7 +3317,20 @@ SelectTrigger.displayName = "SelectTrigger";
 function SelectValue({ placeholder, className, ...props }) {
   const { value, getLabelByValue, placeholder: rootPlaceholder } = useSelectCtx();
   const label = getLabelByValue(value);
-  return /* @__PURE__ */ jsx22("span", { "data-refineui-select-value": "", className: clsx28(selectStyles.value, !label && "text-refineui-alias-foreground-placeholder", className), ...props, children: label || placeholder || rootPlaceholder || "Select..." });
+  const isPlaceholder = value === "";
+  return /* @__PURE__ */ jsx22(
+    "span",
+    {
+      "data-refineui-select-value": "",
+      className: clsx28(
+        selectStyles.value,
+        isPlaceholder && "text-refineui-alias-foreground-placeholder",
+        className
+      ),
+      ...props,
+      children: label || placeholder || rootPlaceholder || "Select..."
+    }
+  );
 }
 function SelectIcon({ children, className, ...props }) {
   return /* @__PURE__ */ jsx22("span", { className: clsx28(selectStyles.iconWrap, className), ...props, children: children ?? /* @__PURE__ */ jsx22(WebIcon, { name: "chevron-down", size: iconSizes4.xsmall }) });
@@ -7394,15 +7438,10 @@ var calendarStyles = {
   dayWrapEndpoint: "box-border flex size-refineui-calendar-day-size items-center justify-center bg-refineui-alias-background-primary-hover",
   dayWrapEndpointStart: "rounded-s-refineui-large",
   dayWrapEndpointEnd: "rounded-e-refineui-large",
-  root: "box-border flex w-fit min-w-refineui-calendar-min-width flex-col gap-refineui-size-none rounded-refineui-large bg-refineui-alias-background-primary p-refineui-size-x-large",
+  root: "box-border flex w-fit min-w-refineui-calendar-min-width flex-col gap-refineui-size-none rounded-refineui-xx-large border-refineui-thin border-refineui-alias-border-default bg-refineui-alias-background-primary p-refineui-size-x-large",
   header: "flex w-full min-w-0 items-center justify-between pb-refineui-size-large",
   navButton: "shrink-0 text-refineui-alias-foreground-primary",
-  captionButton: clsx58(
-    "shrink-0",
-    "border-refineui-none border-transparent bg-transparent",
-    "px-refineui-size-x-small py-refineui-size-xx-small",
-    "text-refineui-alias-foreground-primary"
-  ),
+  captionButton: "shrink-0",
   body: "flex flex-col gap-refineui-size-small",
   weekday: clsx58(
     componentTextClass(componentTypographyTokens.calendar.weekday),
@@ -7431,12 +7470,15 @@ function normalizeRange(start, end) {
 function getWeekdayLabels(weekStartsOn) {
   return [...WEEKDAYS.slice(weekStartsOn), ...WEEKDAYS.slice(0, weekStartsOn)];
 }
-function formatMonthName(year, month) {
+function formatMonthLabel(year, month) {
+  return new Intl.DateTimeFormat("en-US", { month: "short" }).format(new Date(year, month, 1));
+}
+function formatMonthNameLong(year, month) {
   return new Intl.DateTimeFormat("en-US", { month: "long" }).format(new Date(year, month, 1));
 }
 var MONTH_LABELS = Array.from(
   { length: MONTH_COUNT },
-  (_, monthIndex) => formatMonthName(2e3, monthIndex)
+  (_, monthIndex) => formatMonthLabel(2e3, monthIndex)
 );
 function yearOptionsForView(viewYear) {
   const referenceYear = (/* @__PURE__ */ new Date()).getFullYear();
@@ -7457,16 +7499,16 @@ function CalendarCaptionSelect({
   children
 }) {
   return /* @__PURE__ */ jsxs16(Select, { value, onValueChange, "aria-label": ariaLabel, size: "sm", children: [
-    /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsx45(
       SelectTrigger,
       {
-        appearance: "plain",
+        appearance: "ghost",
         "data-calendar-header": header,
-        className: calendarStyles.captionButton,
-        children: [
-          "                ",
-          /* @__PURE__ */ jsx45(SelectValue, { placeholder })
-        ]
+        className: clsx59(
+          calendarStyles.captionButton,
+          header === "caption-year" && "tabular-nums"
+        ),
+        children: /* @__PURE__ */ jsx45(SelectValue, { placeholder })
       }
     ),
     /* @__PURE__ */ jsx45(SelectPortal, { children: /* @__PURE__ */ jsx45(SelectContent, { children: /* @__PURE__ */ jsx45(SelectGroup, { children }) }) })
@@ -7522,7 +7564,9 @@ function Calendar({
   const cells = getMonthGrid(year, month, weekStartsOn);
   const weeks = chunkWeeks(cells);
   const weekdayLabels = getWeekdayLabels(weekStartsOn);
-  const monthName = formatMonthName(year, month);
+  const monthLabel = formatMonthLabel(year, month);
+  const monthNameLong = formatMonthNameLong(year, month);
+  const yearOptions = yearOptionsForView(year);
   const getDateFromCell = (d, monthOffset) => new Date(year, month + monthOffset, d);
   const setRange = (start, end) => {
     if (onRangeChange) onRangeChange(start, end);
@@ -7713,8 +7757,8 @@ function Calendar({
             CalendarCaptionSelect,
             {
               value: String(month),
-              placeholder: monthName,
-              ariaLabel: `Month: ${monthName}`,
+              placeholder: monthLabel,
+              ariaLabel: `Month: ${monthNameLong}`,
               header: "caption-month",
               onValueChange: (nextMonth) => {
                 setView(new Date(year, Number.parseInt(nextMonth, 10), 1));
@@ -7732,7 +7776,7 @@ function Calendar({
               onValueChange: (nextYear) => {
                 setView(new Date(Number.parseInt(nextYear, 10), month, 1));
               },
-              children: yearOptionsForView(year).map((yearOption) => /* @__PURE__ */ jsx45(SelectItem, { value: String(yearOption), children: String(yearOption) }, yearOption))
+              children: yearOptions.map((yearOption) => /* @__PURE__ */ jsx45(SelectItem, { value: String(yearOption), children: String(yearOption) }, yearOption))
             }
           ),
           /* @__PURE__ */ jsx45(
@@ -11000,6 +11044,89 @@ function useSidebarPeek() {
   return useSidebarPeekContext("useSidebarPeek");
 }
 
+// src/components/Sidebar/SidebarProvider.tsx
+import {
+  createContext as createContext20,
+  forwardRef as forwardRef14,
+  useCallback as useCallback16,
+  useContext as useContext22,
+  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);
+function useSidebarContext(component) {
+  const value = useContext22(SidebarContext);
+  if (!value) throw new Error(`${component} must be used within <SidebarProvider>.`);
+  return value;
+}
+function useSidebar() {
+  return useSidebarContext("useSidebar");
+}
+function SidebarProvider({
+  open: openProp,
+  defaultOpen = true,
+  onOpenChange,
+  id,
+  children
+}) {
+  const [uncontrolled, setUncontrolled] = useState20(defaultOpen);
+  const open = openProp ?? uncontrolled;
+  const generatedId = useId13();
+  const sidebarId = id ?? generatedId;
+  const toggle = useCallback16(() => {
+    const next = !open;
+    if (openProp === void 0) setUncontrolled(next);
+    onOpenChange?.(next);
+  }, [onOpenChange, open, openProp]);
+  const value = useMemo16(
+    () => ({ open, sidebarId, toggle }),
+    [open, sidebarId, toggle]
+  );
+  return /* @__PURE__ */ jsx62(SidebarContext.Provider, { value, children });
+}
+var SidebarTrigger = forwardRef14(function SidebarTrigger2({
+  asChild = false,
+  onClick,
+  className,
+  children,
+  variant = "secondary",
+  size,
+  layout,
+  fullWidth,
+  type = "button",
+  ...props
+}, ref) {
+  const { open, toggle, sidebarId } = useSidebarContext("SidebarTrigger");
+  const shared = {
+    ...props,
+    ref,
+    "aria-expanded": open,
+    "aria-controls": sidebarId,
+    "data-state": open ? "open" : "closed",
+    className,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) toggle();
+    }
+  };
+  if (asChild) return /* @__PURE__ */ jsx62(Slot3, { ...shared, children });
+  return /* @__PURE__ */ jsx62(
+    Button,
+    {
+      ...shared,
+      type,
+      variant,
+      size,
+      layout,
+      fullWidth,
+      children
+    }
+  );
+});
+
 // src/components/Pagination/Pagination.tsx
 import { clsx as clsx84 } from "clsx";
 import { iconSizes as iconSizes17 } from "@refineui/tokens";
@@ -11020,18 +11147,18 @@ var paginationStyles = {
 };
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 function PaginationRoot({ className, ...props }) {
-  return /* @__PURE__ */ jsx62("nav", { "aria-label": "Pagination", className: clsx84(paginationStyles.root, className), ...props });
+  return /* @__PURE__ */ jsx63("nav", { "aria-label": "Pagination", className: clsx84(paginationStyles.root, className), ...props });
 }
 function PaginationContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx62("ul", { className: clsx84(paginationStyles.listWrap, className), ...props });
+  return /* @__PURE__ */ jsx63("ul", { className: clsx84(paginationStyles.listWrap, className), ...props });
 }
 function PaginationItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx62("li", { className, ...props });
+  return /* @__PURE__ */ jsx63("li", { className, ...props });
 }
 function PaginationLink({ className, isActive, ...props }) {
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     "a",
     {
       "data-refineui": "pagination",
@@ -11051,7 +11178,7 @@ function PaginationNavButton({
 }) {
   const isPrev = direction === "prev";
   const iconColor = disabled ? resolveColorTokenValue9(componentColorTokens.pagination.navIcon.disabled) : resolveColorTokenValue9(componentColorTokens.pagination.navIcon.default);
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     "button",
     {
       type: "button",
@@ -11061,7 +11188,7 @@ function PaginationNavButton({
       "aria-label": isPrev ? "Previous page" : "Next page",
       className: clsx84(paginationStyles.itemShell, paginationStyles.nav, className),
       ...props,
-      children: /* @__PURE__ */ jsx62(
+      children: /* @__PURE__ */ jsx63(
         WebIcon,
         {
           name: isPrev ? "chevron-left" : "chevron-right",
@@ -11074,13 +11201,13 @@ function PaginationNavButton({
   );
 }
 function PaginationPrevious(props) {
-  return /* @__PURE__ */ jsx62(PaginationNavButton, { direction: "prev", ...props });
+  return /* @__PURE__ */ jsx63(PaginationNavButton, { direction: "prev", ...props });
 }
 function PaginationNext(props) {
-  return /* @__PURE__ */ jsx62(PaginationNavButton, { direction: "next", ...props });
+  return /* @__PURE__ */ jsx63(PaginationNavButton, { direction: "next", ...props });
 }
 function PaginationEllipsis({ className, ...props }) {
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     "span",
     {
       "aria-hidden": true,
@@ -11088,7 +11215,7 @@ function PaginationEllipsis({ className, ...props }) {
       "data-ellipsis": "true",
       className: clsx84(paginationStyles.itemShell, paginationStyles.ellipsis, className),
       ...props,
-      children: /* @__PURE__ */ jsx62(
+      children: /* @__PURE__ */ jsx63(
         WebIcon,
         {
           name: "more-horizontal",
@@ -11101,24 +11228,24 @@ function PaginationEllipsis({ className, ...props }) {
   );
 }
 function Pagination(props) {
-  return /* @__PURE__ */ jsx62(PaginationRoot, { ...props });
+  return /* @__PURE__ */ jsx63(PaginationRoot, { ...props });
 }
 
 // src/components/PopOver/PopOver.tsx
 import { clsx as clsx85 } from "clsx";
 import {
-  createContext as createContext20,
-  useCallback as useCallback16,
-  useContext as useContext22,
+  createContext as createContext21,
+  useCallback as useCallback17,
+  useContext as useContext23,
   useEffect as useEffect15,
-  useId as useId13,
-  useMemo as useMemo16,
+  useId as useId14,
+  useMemo as useMemo17,
   useRef as useRef17,
-  useState as useState20
+  useState as useState21
 } from "react";
 import { spacings as spacings4, strokeWidths as strokeWidths2 } from "@refineui/tokens";
 import { resolveColorTokenValue as resolveColorTokenValue10 } from "@refineui/utilities/color";
-import { Slot as Slot3, getMergeableTriggerChild as getMergeableTriggerChild3 } from "@refineui/utilities/react";
+import { Slot as Slot4, getMergeableTriggerChild as getMergeableTriggerChild3 } from "@refineui/utilities/react";
 
 // src/components/PopOver/style.ts
 var popoverStyles = {
@@ -11152,10 +11279,10 @@ function popoverFloatingClasses(placement, align) {
 }
 
 // src/components/PopOver/PopOver.tsx
-import { jsx as jsx63, jsxs as jsxs24 } from "react/jsx-runtime";
-var PopoverContext = createContext20(null);
+import { jsx as jsx64, jsxs as jsxs24 } from "react/jsx-runtime";
+var PopoverContext = createContext21(null);
 function usePopoverContext(component) {
-  const ctx = useContext22(PopoverContext);
+  const ctx = useContext23(PopoverContext);
   if (!ctx) throw new Error(`${component} must be used within <Popover>`);
   return ctx;
 }
@@ -11211,20 +11338,20 @@ function floatingGapStyle(placement) {
   return { marginLeft: POPOVER_GAP };
 }
 function Popover({ children, className, open: openProp, defaultOpen = false, onOpenChange, ...props }) {
-  const [internalOpen, setInternalOpen] = useState20(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState21(defaultOpen);
   const open = openProp ?? internalOpen;
-  const setOpen = useCallback16(
+  const setOpen = useCallback17(
     (next) => {
       if (openProp === void 0) setInternalOpen(next);
       onOpenChange?.(next);
     },
     [openProp, onOpenChange]
   );
-  const toggle = useCallback16(() => setOpen(!open), [open, setOpen]);
+  const toggle = useCallback17(() => setOpen(!open), [open, setOpen]);
   const containerRef = useRef17(null);
   const contentRef = useRef17(null);
   const triggerRef = useRef17(null);
-  const contentId = useId13();
+  const contentId = useId14();
   useEffect15(() => {
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
@@ -11239,7 +11366,7 @@ function Popover({ children, className, open: openProp, defaultOpen = false, onO
     if (open) document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, setOpen]);
-  const onTriggerKeyDown = useCallback16(
+  const onTriggerKeyDown = useCallback17(
     (e) => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
@@ -11248,7 +11375,7 @@ function Popover({ children, className, open: openProp, defaultOpen = false, onO
     },
     [toggle]
   );
-  const value = useMemo16(
+  const value = useMemo17(
     () => ({
       open,
       setOpen,
@@ -11261,7 +11388,7 @@ function Popover({ children, className, open: openProp, defaultOpen = false, onO
     }),
     [open, setOpen, toggle, contentId, onTriggerKeyDown]
   );
-  return /* @__PURE__ */ jsx63(PopoverContext.Provider, { value, children: /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(PopoverContext.Provider, { value, children: /* @__PURE__ */ jsx64(
     "div",
     {
       ref: containerRef,
@@ -11277,8 +11404,8 @@ function PopoverTrigger({ children, className, ...props }) {
   const mergeEl = getMergeableTriggerChild3(children);
   if (mergeEl) {
     const passthrough = props;
-    return /* @__PURE__ */ jsx63(
-      Slot3,
+    return /* @__PURE__ */ jsx64(
+      Slot4,
       {
         ref: triggerRef,
         ...props,
@@ -11299,7 +11426,7 @@ function PopoverTrigger({ children, className, ...props }) {
     );
   }
   const passthroughBtn = props;
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     "button",
     {
       type: "button",
@@ -11342,7 +11469,7 @@ function PopoverContent({
   const rot = beakRotateDeg(placement);
   const gapStyle = floatingGapStyle(placement);
   if (!open) return null;
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     "div",
     {
       className: clsx85(
@@ -11351,7 +11478,7 @@ function PopoverContent({
       ),
       style: gapStyle,
       children: /* @__PURE__ */ jsxs24("div", { className: popoverStyles.panelWrap, children: [
-        /* @__PURE__ */ jsx63("div", { className: popoverStyles.beakWrap, style: { ...bw, width: BEAK_W, height: BEAK_H }, "aria-hidden": true, children: /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx64("div", { className: popoverStyles.beakWrap, style: { ...bw, width: BEAK_W, height: BEAK_H }, "aria-hidden": true, children: /* @__PURE__ */ jsx64(
           "div",
           {
             style: {
@@ -11370,14 +11497,14 @@ function PopoverContent({
                 xmlns: "http://www.w3.org/2000/svg",
                 style: { display: "block" },
                 children: [
-                  /* @__PURE__ */ jsx63("polygon", { points: "8,0 0,8 16,8", fill: borderCol }),
-                  /* @__PURE__ */ jsx63("polygon", { points: "8,2 2,8 14,8", fill: bg })
+                  /* @__PURE__ */ jsx64("polygon", { points: "8,0 0,8 16,8", fill: borderCol }),
+                  /* @__PURE__ */ jsx64("polygon", { points: "8,2 2,8 14,8", fill: bg })
                 ]
               }
             )
           }
         ) }),
-        /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx64(
           "div",
           {
             ref: contentRef,
@@ -11418,8 +11545,8 @@ function PopOver({
   ...props
 }) {
   return /* @__PURE__ */ jsxs24(Popover, { className, ...props, children: [
-    /* @__PURE__ */ jsx63(PopoverTrigger, { children: trigger }),
-    /* @__PURE__ */ jsx63(PopoverContent, { placement, align, children: content })
+    /* @__PURE__ */ jsx64(PopoverTrigger, { children: trigger }),
+    /* @__PURE__ */ jsx64(PopoverContent, { placement, align, children: content })
   ] });
 }
 
@@ -11435,7 +11562,7 @@ var skeletonStyles = {
 };
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function Skeleton({
   width,
   height,
@@ -11467,7 +11594,7 @@ function Skeleton({
     w = width ?? "100%";
   }
   const dimStyle = { width: w, height: h };
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     "div",
     {
       "data-refineui": "skeleton",
@@ -11485,7 +11612,7 @@ function Skeleton({
 
 // src/components/Slider/Slider.tsx
 import { clsx as clsx87 } from "clsx";
-import { useState as useState21 } from "react";
+import { useState as useState22 } from "react";
 
 // src/components/Slider/style.ts
 var sliderStyles = {
@@ -11493,7 +11620,7 @@ var sliderStyles = {
 };
 
 // src/components/Slider/Slider.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function clampPct(n) {
   if (Number.isNaN(n)) return 0;
   return Math.min(100, Math.max(0, n));
@@ -11511,12 +11638,12 @@ function Slider({
   style,
   ...props
 }) {
-  const [internalFillPct, setInternalFillPct] = useState21(() => {
+  const [internalFillPct, setInternalFillPct] = useState22(() => {
     const v = defaultValue !== void 0 ? Number(defaultValue) : (min + max) / 2;
     return clampPct((v - min) / (max - min) * 100);
   });
   const fillPct = value !== void 0 ? clampPct((Number(value) - min) / (max - min) * 100) : internalFillPct;
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     "input",
     {
       type: "range",
@@ -11556,16 +11683,16 @@ import { iconSizes as iconSizes18 } from "@refineui/tokens";
 import {
   Children as Children6,
   cloneElement as cloneElement2,
-  createContext as createContext21,
-  forwardRef as forwardRef14,
+  createContext as createContext22,
+  forwardRef as forwardRef15,
   isValidElement as isValidElement5,
-  useCallback as useCallback17,
-  useContext as useContext23,
+  useCallback as useCallback18,
+  useContext as useContext24,
   useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo17,
+  useMemo as useMemo18,
   useRef as useRef18,
-  useState as useState22
+  useState as useState23
 } from "react";
 
 // src/components/Carousel/style.ts
@@ -11598,11 +11725,11 @@ var carouselStyles = {
 };
 
 // src/components/Carousel/Carousel.tsx
-import { jsx as jsx66, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs25 } from "react/jsx-runtime";
 var DRAG_COMMIT_RATIO = 0.18;
-var CarouselContext = createContext21(null);
+var CarouselContext = createContext22(null);
 function useCarouselContext(component) {
-  const v = useContext23(CarouselContext);
+  const v = useContext24(CarouselContext);
   if (!v) throw new Error(`${component} must be used within Carousel.`);
   return v;
 }
@@ -11621,13 +11748,13 @@ function Carousel({
   ...props
 }) {
   const isControlled = indexControlled !== void 0;
-  const [internalIndex, setInternalIndex] = useState22(defaultIndex);
-  const [count, setCount] = useState22(0);
-  const [trackIndex, setTrackIndex] = useState22(defaultIndex);
-  const [instant, setInstant] = useState22(false);
+  const [internalIndex, setInternalIndex] = useState23(defaultIndex);
+  const [count, setCount] = useState23(0);
+  const [trackIndex, setTrackIndex] = useState23(defaultIndex);
+  const [instant, setInstant] = useState23(false);
   const index = isControlled ? indexControlled : internalIndex;
   const loopActive = loop && count > 1;
-  const commitLogical = useCallback17(
+  const commitLogical = useCallback18(
     (next) => {
       const normalized = clampIndex(next, Math.max(count, 1));
       if (!isControlled) setInternalIndex(normalized);
@@ -11655,7 +11782,7 @@ function Carousel({
   }, [index, count, loopActive]);
   const canScrollPrev = loopActive ? true : index > 0;
   const canScrollNext = loopActive ? true : index < count - 1;
-  const scrollTo = useCallback17(
+  const scrollTo = useCallback18(
     (i) => {
       if (count <= 0) return;
       const next = clampIndex(i, count);
@@ -11664,7 +11791,7 @@ function Carousel({
     },
     [commitLogical, count, loopActive]
   );
-  const scrollPrev = useCallback17(() => {
+  const scrollPrev = useCallback18(() => {
     if (count <= 0) return;
     if (loopActive) {
       if (trackIndex < 1 || trackIndex > count) return;
@@ -11677,7 +11804,7 @@ function Carousel({
       setTrackIndex(index - 1);
     }
   }, [commitLogical, count, index, loopActive, trackIndex]);
-  const scrollNext = useCallback17(() => {
+  const scrollNext = useCallback18(() => {
     if (count <= 0) return;
     if (loopActive) {
       if (trackIndex < 1 || trackIndex > count) return;
@@ -11690,7 +11817,7 @@ function Carousel({
       setTrackIndex(index + 1);
     }
   }, [commitLogical, count, index, loopActive, trackIndex]);
-  const onTrackSettled = useCallback17(() => {
+  const onTrackSettled = useCallback18(() => {
     if (!loopActive) return;
     if (trackIndex === 0) {
       setInstant(true);
@@ -11706,7 +11833,7 @@ function Carousel({
       });
     }
   }, [count, loopActive, trackIndex]);
-  const ctx = useMemo17(
+  const ctx = useMemo18(
     () => ({
       index,
       count,
@@ -11761,7 +11888,7 @@ function Carousel({
         break;
     }
   };
-  return /* @__PURE__ */ jsx66(CarouselContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(CarouselContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx67(
     "div",
     {
       "data-refineui": "carousel",
@@ -11787,8 +11914,8 @@ function CarouselContent({ className, children, ...props }) {
   } = useCarouselContext("CarouselContent");
   const viewportRef = useRef18(null);
   const dragStartX = useRef18(null);
-  const [dragPx, setDragPx] = useState22(0);
-  const [dragging, setDragging] = useState22(false);
+  const [dragPx, setDragPx] = useState23(0);
+  const [dragging, setDragging] = useState23(false);
   const slides = Children6.toArray(children).filter(isValidElement5);
   const slideCount = slides.length;
   useEffect16(() => {
@@ -11799,7 +11926,7 @@ function CarouselContent({ className, children, ...props }) {
     ...slides,
     cloneElement2(slides[0], { key: "__carousel-clone-first" })
   ] : slides;
-  const endDrag = useCallback17(
+  const endDrag = useCallback18(
     (clientX) => {
       if (dragStartX.current == null) return;
       const width = viewportRef.current?.offsetWidth ?? 1;
@@ -11848,7 +11975,7 @@ function CarouselContent({ className, children, ...props }) {
   };
   const animated = !dragging && !instant;
   const transform = dragPx !== 0 ? `translate3d(calc(-${trackIndex * 100}% + ${dragPx}px), 0, 0)` : `translate3d(-${trackIndex * 100}%, 0, 0)`;
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     "div",
     {
       ref: viewportRef,
@@ -11859,7 +11986,7 @@ function CarouselContent({ className, children, ...props }) {
       onPointerMove,
       onPointerUp,
       onPointerCancel,
-      children: /* @__PURE__ */ jsx66(
+      children: /* @__PURE__ */ jsx67(
         "div",
         {
           "data-refineui": "carousel-track",
@@ -11874,9 +12001,9 @@ function CarouselContent({ className, children, ...props }) {
     }
   );
 }
-var CarouselItem = forwardRef14(function CarouselItem2({ className, children, ...props }, ref) {
+var CarouselItem = forwardRef15(function CarouselItem2({ className, children, ...props }, ref) {
   useCarouselContext("CarouselItem");
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     "div",
     {
       ref,
@@ -11891,12 +12018,12 @@ var CarouselItem = forwardRef14(function CarouselItem2({ className, children, ..
 });
 function CarouselControls({ className, children, ...props }) {
   useCarouselContext("CarouselControls");
-  return /* @__PURE__ */ jsx66("div", { "data-refineui": "carousel-controls", className: clsx89(carouselStyles.controls, className), ...props, children });
+  return /* @__PURE__ */ jsx67("div", { "data-refineui": "carousel-controls", className: clsx89(carouselStyles.controls, className), ...props, children });
 }
 function CarouselPrevious({ className, disabled, onClick, ...props }) {
   const { scrollPrev, canScrollPrev } = useCarouselContext("CarouselPrevious");
   const isDisabled = disabled || !canScrollPrev;
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     Button,
     {
       variant: "outline",
@@ -11912,7 +12039,7 @@ function CarouselPrevious({ className, disabled, onClick, ...props }) {
         onClick?.(e);
         if (!e.defaultPrevented && !isDisabled) scrollPrev();
       },
-      children: /* @__PURE__ */ jsx66(
+      children: /* @__PURE__ */ jsx67(
         WebIcon,
         {
           name: "chevron-left",
@@ -11928,7 +12055,7 @@ function CarouselPrevious({ className, disabled, onClick, ...props }) {
 function CarouselNext({ className, disabled, onClick, ...props }) {
   const { scrollNext, canScrollNext } = useCarouselContext("CarouselNext");
   const isDisabled = disabled || !canScrollNext;
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     Button,
     {
       variant: "outline",
@@ -11944,7 +12071,7 @@ function CarouselNext({ className, disabled, onClick, ...props }) {
         onClick?.(e);
         if (!e.defaultPrevented && !isDisabled) scrollNext();
       },
-      children: /* @__PURE__ */ jsx66(
+      children: /* @__PURE__ */ jsx67(
         WebIcon,
         {
           name: "chevron-right",
@@ -11960,8 +12087,8 @@ function CarouselNext({ className, disabled, onClick, ...props }) {
 function CarouselIndicators({ className, ...props }) {
   const { count, index, scrollTo } = useCarouselContext("CarouselIndicators");
   const trackRef = useRef18(null);
-  const [thumb, setThumb] = useState22({ width: 0, x: 0, ready: false });
-  const updateThumb = useCallback17(() => {
+  const [thumb, setThumb] = useState23({ width: 0, x: 0, ready: false });
+  const updateThumb = useCallback18(() => {
     const el = trackRef.current;
     if (!el || count <= 0) {
       setThumb({ width: 0, x: 0, ready: false });
@@ -12001,7 +12128,7 @@ function CarouselIndicators({ className, ...props }) {
       className: clsx89(carouselStyles.indicators, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx67(
           "span",
           {
             "data-refineui": "carousel-indicator-thumb",
@@ -12011,7 +12138,7 @@ function CarouselIndicators({ className, ...props }) {
             style: thumbStyle
           }
         ),
-        /* @__PURE__ */ jsx66("div", { "data-refineui": "carousel-indicator-hits", className: carouselStyles.indicatorHitRow, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx67("div", { "data-refineui": "carousel-indicator-hits", className: carouselStyles.indicatorHitRow, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx67(
           "button",
           {
             type: "button",
@@ -12034,9 +12161,9 @@ function CarouselIndicators({ className, ...props }) {
 import { clsx as clsx91 } from "clsx";
 import {
   Children as Children7,
-  createContext as createContext22,
+  createContext as createContext23,
   isValidElement as isValidElement6,
-  useContext as useContext24
+  useContext as useContext25
 } from "react";
 
 // src/components/Bubble/style.ts
@@ -12102,10 +12229,10 @@ var bubbleContentVariantClass = {
 };
 
 // src/components/Bubble/Bubble.tsx
-import { jsx as jsx67, jsxs as jsxs26 } from "react/jsx-runtime";
-var BubbleContext = createContext22(null);
+import { jsx as jsx68, jsxs as jsxs26 } from "react/jsx-runtime";
+var BubbleContext = createContext23(null);
 function useBubbleContext(component) {
-  const value = useContext24(BubbleContext);
+  const value = useContext25(BubbleContext);
   if (!value) throw new Error(`${component} must be used within Bubble.`);
   return value;
 }
@@ -12134,7 +12261,7 @@ function partitionBubbleChildren(children) {
   };
 }
 function BubbleGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     "div",
     {
       "data-refineui": "bubble-group",
@@ -12153,7 +12280,7 @@ function Bubble({
 }) {
   const rootStyle = variant === "ghost" ? style : { maxWidth: BUBBLE_MAX_WIDTH, ...style };
   const { top, middle, bottom, hasTop, hasBottom } = partitionBubbleChildren(children);
-  return /* @__PURE__ */ jsx67(BubbleContext.Provider, { value: { variant, align }, children: /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(BubbleContext.Provider, { value: { variant, align }, children: /* @__PURE__ */ jsx68(
     "div",
     {
       "data-refineui": "bubble",
@@ -12178,7 +12305,7 @@ function Bubble({
 }
 function BubbleContent({ className, ...props }) {
   const { variant } = useBubbleContext("BubbleContent");
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     "div",
     {
       "data-refineui": "bubble-content",
@@ -12199,7 +12326,7 @@ function BubbleReactions({
 }) {
   const { align: bubbleAlign } = useBubbleContext("BubbleReactions");
   const align = alignProp ?? (bubbleAlign === "start" ? "end" : "start");
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     "div",
     {
       "data-refineui": "bubble-reactions",
@@ -12220,12 +12347,12 @@ function BubbleReactions({
 import { clsx as clsx93 } from "clsx";
 import { iconSizes as iconSizes19 } from "@refineui/tokens";
 import {
-  createContext as createContext23,
-  useCallback as useCallback18,
-  useContext as useContext25,
-  useMemo as useMemo18,
+  createContext as createContext24,
+  useCallback as useCallback19,
+  useContext as useContext26,
+  useMemo as useMemo19,
   useRef as useRef19,
-  useState as useState23
+  useState as useState24
 } from "react";
 
 // src/components/Stepper/style.ts
@@ -12334,17 +12461,17 @@ var stepperConnectorVars = {
 };
 
 // src/components/Stepper/Stepper.tsx
-import { jsx as jsx68, jsxs as jsxs27 } from "react/jsx-runtime";
-var StepperContext = createContext23(null);
-var StepperItemContext = createContext23(null);
-var StepperListRegistryContext = createContext23(null);
+import { jsx as jsx69, jsxs as jsxs27 } from "react/jsx-runtime";
+var StepperContext = createContext24(null);
+var StepperItemContext = createContext24(null);
+var StepperListRegistryContext = createContext24(null);
 function useStepperContext(component) {
-  const v = useContext25(StepperContext);
+  const v = useContext26(StepperContext);
   if (!v) throw new Error(`${component} must be used within Stepper.`);
   return v;
 }
 function useStepperItemContext(component) {
-  const v = useContext25(StepperItemContext);
+  const v = useContext26(StepperItemContext);
   if (!v) throw new Error(`${component} must be used within StepperItem.`);
   return v;
 }
@@ -12364,16 +12491,16 @@ function Stepper({
   ...props
 }) {
   const isControlled = valueControlled !== void 0;
-  const [internalValue, setInternalValue] = useState23(defaultValue);
+  const [internalValue, setInternalValue] = useState24(defaultValue);
   const value = isControlled ? valueControlled : internalValue;
-  const setValue = useCallback18(
+  const setValue = useCallback19(
     (next) => {
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const ctx = useMemo18(
+  const ctx = useMemo19(
     () => ({
       value,
       setValue,
@@ -12382,7 +12509,7 @@ function Stepper({
     }),
     [value, setValue, orientation, onValueChange, isControlled]
   );
-  return /* @__PURE__ */ jsx68(StepperContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(StepperContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx69(
     "div",
     {
       "data-refineui": "stepper",
@@ -12398,7 +12525,7 @@ function StepperList({ className, children, ...props }) {
   const { orientation, value } = useStepperContext("StepperList");
   const cursorRef = useRef19(null);
   cursorRef.current = null;
-  const registry = useMemo18(
+  const registry = useMemo19(
     () => ({
       noteItem(itemValue) {
         cursorRef.current = itemValue;
@@ -12410,7 +12537,7 @@ function StepperList({ className, children, ...props }) {
     }),
     [value]
   );
-  return /* @__PURE__ */ jsx68(StepperListRegistryContext.Provider, { value: registry, children: /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(StepperListRegistryContext.Provider, { value: registry, children: /* @__PURE__ */ jsx69(
     "ol",
     {
       "data-refineui": "stepper-list",
@@ -12435,7 +12562,7 @@ function StepperItem({
   ...props
 }) {
   const { value, setValue, orientation, interactive } = useStepperContext("StepperItem");
-  const registry = useContext25(StepperListRegistryContext);
+  const registry = useContext26(StepperListRegistryContext);
   registry?.noteItem(itemValue);
   const state = resolveState2(itemValue, value);
   const canActivate = interactive && !disabled;
@@ -12451,11 +12578,11 @@ function StepperItem({
       activate();
     }
   };
-  const itemCtx = useMemo18(
+  const itemCtx = useMemo19(
     () => ({ state, disabled }),
     [state, disabled]
   );
-  return /* @__PURE__ */ jsx68(StepperItemContext.Provider, { value: itemCtx, children: /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(StepperItemContext.Provider, { value: itemCtx, children: /* @__PURE__ */ jsx69(
     "li",
     {
       "data-refineui": "stepper-item",
@@ -12483,7 +12610,7 @@ function StepperItem({
 function StepperIndicator({ className, children, ...props }) {
   const { state } = useStepperItemContext("StepperIndicator");
   const stateClass = state === "complete" ? stepperStyles.indicatorComplete : state === "current" ? stepperStyles.indicatorCurrent : stepperStyles.indicatorUpcoming;
-  const content = state === "upcoming" ? children : /* @__PURE__ */ jsx68(
+  const content = state === "upcoming" ? children : /* @__PURE__ */ jsx69(
     WebIcon,
     {
       name: "checkmark",
@@ -12494,7 +12621,7 @@ function StepperIndicator({ className, children, ...props }) {
       className: "items-center justify-center"
     }
   );
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "span",
     {
       "data-refineui": "stepper-indicator",
@@ -12509,7 +12636,7 @@ function StepperIndicator({ className, children, ...props }) {
 function StepperContent({ className, ...props }) {
   const { orientation } = useStepperContext("StepperContent");
   useStepperItemContext("StepperContent");
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
       "data-refineui": "stepper-content",
@@ -12525,7 +12652,7 @@ function StepperContent({ className, ...props }) {
 function StepperTitle({ className, ...props }) {
   const { state } = useStepperItemContext("StepperTitle");
   const stateClass = state === "complete" ? stepperStyles.titleComplete : state === "current" ? stepperStyles.titleCurrent : stepperStyles.titleUpcoming;
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "span",
     {
       "data-refineui": "stepper-title",
@@ -12538,7 +12665,7 @@ function StepperTitle({ className, ...props }) {
 function StepperDescription({ className, ...props }) {
   const { state } = useStepperItemContext("StepperDescription");
   const stateClass = state === "complete" ? stepperStyles.descriptionComplete : state === "current" ? stepperStyles.descriptionCurrent : stepperStyles.descriptionUpcoming;
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "span",
     {
       "data-refineui": "stepper-description",
@@ -12550,10 +12677,10 @@ function StepperDescription({ className, ...props }) {
 }
 function StepperSeparator({ className, ...props }) {
   const { orientation } = useStepperContext("StepperSeparator");
-  const registry = useContext25(StepperListRegistryContext);
+  const registry = useContext26(StepperListRegistryContext);
   const state = registry?.takeSeparatorState() ?? "upcoming";
   const vertical = orientation === "vertical";
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "li",
     {
       "data-refineui": "stepper-separator",
@@ -12576,14 +12703,14 @@ function StepperSeparator({ className, ...props }) {
             vertical ? stepperStyles.separatorRailVertical : stepperStyles.separatorRailHorizontal
           ),
           children: [
-            /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx69(
               "span",
               {
                 "data-refineui": "stepper-separator-track",
                 className: stepperStyles.separatorTrack
               }
             ),
-            /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx69(
               "span",
               {
                 "data-refineui": "stepper-separator-fill",
@@ -12612,14 +12739,14 @@ StepperSeparator.displayName = "StepperSeparator";
 // src/components/Resizable/Resizable.tsx
 import { clsx as clsx95 } from "clsx";
 import {
-  createContext as createContext24,
-  useCallback as useCallback19,
-  useContext as useContext26,
-  useId as useId14,
+  createContext as createContext25,
+  useCallback as useCallback20,
+  useContext as useContext27,
+  useId as useId15,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo19,
+  useMemo as useMemo20,
   useRef as useRef20,
-  useState as useState24
+  useState as useState25
 } from "react";
 
 // src/components/Resizable/style.ts
@@ -12655,15 +12782,15 @@ var resizableStyles = {
 };
 
 // src/components/Resizable/Resizable.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var KEYBOARD_STEP = 2;
 var KEYBOARD_STEP_LARGE = 10;
 var DEFAULT_SIZE = 50;
 var DEFAULT_MIN_SIZE = 10;
 var DEFAULT_MAX_SIZE = 100;
-var ResizableContext = createContext24(null);
+var ResizableContext = createContext25(null);
 function useResizableContext(component) {
-  const v = useContext26(ResizableContext);
+  const v = useContext27(ResizableContext);
   if (!v) throw new Error(`${component} must be used within ResizablePanelGroup.`);
   return v;
 }
@@ -12725,10 +12852,10 @@ function ResizablePanelGroup({
   const groupRef = useRef20(null);
   const panelsRef = useRef20(/* @__PURE__ */ new Map());
   const orderCounterRef = useRef20(0);
-  const [sizes, setSizes] = useState24({});
+  const [sizes, setSizes] = useState25({});
   const onLayoutRef = useRef20(onLayout);
   onLayoutRef.current = onLayout;
-  const syncInitialSizes = useCallback19(() => {
+  const syncInitialSizes = useCallback20(() => {
     const panels = [...panelsRef.current.values()].sort((a, b) => a.order - b.order);
     if (panels.length === 0) return;
     setSizes((prev) => {
@@ -12763,7 +12890,7 @@ function ResizablePanelGroup({
       return base;
     });
   }, []);
-  const registerPanel = useCallback19(
+  const registerPanel = useCallback20(
     (panel) => {
       const existing = panelsRef.current.get(panel.id);
       const order = existing?.order ?? orderCounterRef.current++;
@@ -12772,7 +12899,7 @@ function ResizablePanelGroup({
     },
     [syncInitialSizes]
   );
-  const unregisterPanel = useCallback19((id) => {
+  const unregisterPanel = useCallback20((id) => {
     panelsRef.current.delete(id);
     setSizes((prev) => {
       if (!(id in prev)) return prev;
@@ -12781,13 +12908,13 @@ function ResizablePanelGroup({
       return next;
     });
   }, []);
-  const getPanel = useCallback19((id) => panelsRef.current.get(id), []);
-  const emitPanelResize = useCallback19((next) => {
+  const getPanel = useCallback20((id) => panelsRef.current.get(id), []);
+  const emitPanelResize = useCallback20((next) => {
     for (const [id, size] of Object.entries(next)) {
       panelsRef.current.get(id)?.onResize?.(size);
     }
   }, []);
-  const resizeBetween = useCallback19(
+  const resizeBetween = useCallback20(
     (leftId, rightId, deltaPct) => {
       setSizes((prev) => {
         const next = applyResize(
@@ -12804,7 +12931,7 @@ function ResizablePanelGroup({
     },
     [emitPanelResize]
   );
-  const setBetween = useCallback19(
+  const setBetween = useCallback20(
     (leftId, rightId, leftSize) => {
       setSizes((prev) => {
         const left = panelsRef.current.get(leftId);
@@ -12835,7 +12962,7 @@ function ResizablePanelGroup({
     if (ids.some((id) => sizes[id] === void 0)) return;
     onLayoutRef.current?.(ids.map((id) => sizes[id]));
   }, [sizes]);
-  const ctx = useMemo19(
+  const ctx = useMemo20(
     () => ({
       orientation,
       groupRef,
@@ -12856,7 +12983,7 @@ function ResizablePanelGroup({
       setBetween
     ]
   );
-  return /* @__PURE__ */ jsx69(ResizableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(ResizableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx70(
     "div",
     {
       ref: groupRef,
@@ -12884,7 +13011,7 @@ function ResizablePanel({
   onResize,
   ...props
 }) {
-  const id = useId14();
+  const id = useId15();
   const { orientation, sizes, registerPanel, unregisterPanel } = useResizableContext("ResizablePanel");
   const onResizeRef = useRef20(onResize);
   onResizeRef.current = onResize;
@@ -12915,7 +13042,7 @@ function ResizablePanel({
     flexBasis: 0,
     ...orientation === "horizontal" ? { minWidth: `${minSize}%` } : { minHeight: `${minSize}%` }
   };
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     "div",
     {
       "data-refineui": "resizable-panel",
@@ -12947,8 +13074,8 @@ function ResizableHandle({
     setBetween
   } = useResizableContext("ResizableHandle");
   const handleRef = useRef20(null);
-  const [active, setActive] = useState24(false);
-  const [, setAdjacentReady] = useState24(false);
+  const [active, setActive] = useState25(false);
+  const [, setAdjacentReady] = useState25(false);
   const dragRef = useRef20(null);
   useLayoutEffect10(() => {
     setAdjacentReady(true);
@@ -12961,7 +13088,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 = useCallback19(() => {
+  const keepFocus = useCallback20(() => {
     const el = handleRef.current;
     if (el && document.activeElement !== el) {
       el.focus({ preventScroll: true });
@@ -13060,7 +13187,7 @@ function ResizableHandle({
     resizeBetween(leftId, rightId, delta);
     queueMicrotask(keepFocus);
   };
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     "div",
     {
       ref: handleRef,
@@ -13090,7 +13217,7 @@ function ResizableHandle({
       onPointerUp: handlePointerUp,
       onPointerCancel: handlePointerUp,
       onKeyDown: handleKeyDown,
-      children: withHandle ? /* @__PURE__ */ jsx69(
+      children: withHandle ? /* @__PURE__ */ jsx70(
         "span",
         {
           "aria-hidden": true,
@@ -13106,7 +13233,7 @@ function ResizableHandle({
 
 // src/components/SpinButton/SpinButton.tsx
 import { clsx as clsx96 } from "clsx";
-import { useEffect as useEffect17, useState as useState25 } from "react";
+import { useEffect as useEffect17, useState as useState26 } from "react";
 import { iconSizes as iconSizes20 } from "@refineui/tokens";
 
 // src/components/SpinButton/style.ts
@@ -13130,7 +13257,7 @@ var spinButtonShellClass = formControlShellHeightClass;
 var spinButtonValueTypo = formControlTypoClass;
 
 // src/components/SpinButton/SpinButton.tsx
-import { jsx as jsx70, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs28 } from "react/jsx-runtime";
 function SpinButton({
   value,
   onChange,
@@ -13144,7 +13271,7 @@ function SpinButton({
   onKeyDown,
   ...props
 }) {
-  const [draftValue, setDraftValue] = useState25(String(value));
+  const [draftValue, setDraftValue] = useState26(String(value));
   useEffect17(() => {
     setDraftValue(String(value));
   }, [value]);
@@ -13256,7 +13383,7 @@ function SpinButton({
       ...props,
       onKeyDown: handleKeyDown,
       children: [
-        /* @__PURE__ */ jsx70(
+        /* @__PURE__ */ jsx71(
           "div",
           {
             "aria-live": "polite",
@@ -13267,7 +13394,7 @@ function SpinButton({
               disabled ? spinButtonStyles.valueTextDisabled : spinButtonStyles.valueTextDefault,
               disabled ? spinButtonStyles.bgDisabled : spinButtonStyles.bgDefault
             ),
-            children: /* @__PURE__ */ jsx70(
+            children: /* @__PURE__ */ jsx71(
               "input",
               {
                 type: "text",
@@ -13300,7 +13427,7 @@ function SpinButton({
               disabled ? spinButtonStyles.bgDisabled : spinButtonStyles.bgDefault
             ),
             children: [
-              /* @__PURE__ */ jsx70(
+              /* @__PURE__ */ jsx71(
                 "button",
                 {
                   type: "button",
@@ -13312,7 +13439,7 @@ function SpinButton({
                     spinButtonStyles.stepButtonBase,
                     disabled || atMax ? spinButtonStyles.stepButtonDisabled : spinButtonStyles.stepButtonEnabled
                   ),
-                  children: /* @__PURE__ */ jsx70(
+                  children: /* @__PURE__ */ jsx71(
                     WebIcon,
                     {
                       name: "chevron-up",
@@ -13324,7 +13451,7 @@ function SpinButton({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx70(
+              /* @__PURE__ */ jsx71(
                 "button",
                 {
                   type: "button",
@@ -13336,7 +13463,7 @@ function SpinButton({
                     spinButtonStyles.stepButtonBase,
                     disabled || atMin ? spinButtonStyles.stepButtonDisabled : spinButtonStyles.stepButtonEnabled
                   ),
-                  children: /* @__PURE__ */ jsx70(
+                  children: /* @__PURE__ */ jsx71(
                     WebIcon,
                     {
                       name: "chevron-down",
@@ -13359,12 +13486,12 @@ function SpinButton({
 // src/components/Toast/Toast.tsx
 import { clsx as clsx98 } from "clsx";
 import {
-  forwardRef as forwardRef15,
-  useCallback as useCallback20,
+  forwardRef as forwardRef16,
+  useCallback as useCallback21,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect11,
   useRef as useRef21,
-  useState as useState26,
+  useState as useState27,
   useSyncExternalStore
 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
@@ -13403,7 +13530,7 @@ var toastStyles = {
 };
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx71, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs29 } from "react/jsx-runtime";
 var useIsomorphicLayoutEffect6 = typeof document !== "undefined" ? useLayoutEffect11 : useEffect18;
 var ENTER_MS = 20;
 var LEAVE_MS = motionMsToNumber6(componentTokens.toast.motion.leave) + 60;
@@ -13582,7 +13709,7 @@ var variantIconNames = {
   error: "error-circle",
   warning: "warning"
 };
-var Toast = forwardRef15(function Toast2(props, ref) {
+var Toast = forwardRef16(function Toast2(props, ref) {
   const { variant = "default", message, iconName, icon, action, className, stackState, style, ...rest } = props;
   const domProps = { ...rest };
   delete domProps.iconName;
@@ -13591,7 +13718,7 @@ var Toast = forwardRef15(function Toast2(props, ref) {
   const liveRole = variant === "error" ? "alert" : "status";
   const ariaLive = variant === "error" ? void 0 : variant === "warning" ? "assertive" : "polite";
   const resolvedIconName = iconName ?? variantIconNames[variant];
-  const iconContent = icon ?? /* @__PURE__ */ jsx71(
+  const iconContent = icon ?? /* @__PURE__ */ jsx72(
     WebIcon,
     {
       name: resolvedIconName,
@@ -13601,7 +13728,7 @@ var Toast = forwardRef15(function Toast2(props, ref) {
     }
   );
   const isPrimaryAction = !action || typeof action !== "object" || !("variant" in action) || action.variant === "primary";
-  const actionEl = typeof action === "object" && action !== null && "label" in action ? /* @__PURE__ */ jsx71(
+  const actionEl = typeof action === "object" && action !== null && "label" in action ? /* @__PURE__ */ jsx72(
     Button,
     {
       variant: isPrimaryAction ? "primary" : "outline",
@@ -13630,8 +13757,8 @@ var Toast = forwardRef15(function Toast2(props, ref) {
       style: { ...tokenStyle, ...style },
       className: clsx98(toastStyles.card, className),
       children: [
-        /* @__PURE__ */ jsx71("div", { "data-refineui": "toast-icon", className: toastStyles.iconWrap, children: iconContent }),
-        /* @__PURE__ */ jsx71("div", { className: toastStyles.contentWrap, children: message != null && message !== "" ? /* @__PURE__ */ jsx71("div", { className: toastStyles.message, children: message }) : null }),
+        /* @__PURE__ */ jsx72("div", { "data-refineui": "toast-icon", className: toastStyles.iconWrap, children: iconContent }),
+        /* @__PURE__ */ jsx72("div", { className: toastStyles.contentWrap, children: message != null && message !== "" ? /* @__PURE__ */ jsx72("div", { className: toastStyles.message, children: message }) : null }),
         action != null && actionEl
       ]
     }
@@ -13642,8 +13769,8 @@ function SwipeableToast({ record, index, swipeDirections, onSwipeStart, onSwipeE
   const dragStartRef = useRef21(null);
   const axisRef = useRef21(null);
   const offsetRef = useRef21({ x: 0, y: 0 });
-  const [swiping, setSwiping] = useState26(false);
-  const clearSwipeOffset = useCallback20(() => {
+  const [swiping, setSwiping] = useState27(false);
+  const clearSwipeOffset = useCallback21(() => {
     const el = toastRef.current;
     offsetRef.current = { x: 0, y: 0 };
     if (!el) return;
@@ -13718,7 +13845,7 @@ function SwipeableToast({ record, index, swipeDirections, onSwipeStart, onSwipeE
     clearSwipeOffset();
     onSwipeEnd();
   };
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     Toast,
     {
       ref: toastRef,
@@ -13753,12 +13880,12 @@ function Toaster({
     () => activeToasterKey === toasterKeyRef.current,
     () => false
   );
-  const [records, setRecords] = useState26([]);
+  const [records, setRecords] = useState27([]);
   const timerMapRef = useRef21({});
   const pausedRef = useRef21(/* @__PURE__ */ new Set());
   const rootRef = useRef21(null);
   const itemRefs = useRef21({});
-  const [layoutTick, setLayoutTick] = useState26(0);
+  const [layoutTick, setLayoutTick] = useState27(0);
   const stackGapPx = useToastStackGapPx();
   const resolvedSwipe = swipeDirections ?? DEFAULT_SWIPE_DIRECTIONS;
   useIsomorphicLayoutEffect6(() => {
@@ -13860,7 +13987,7 @@ function Toaster({
     return null;
   }
   return createPortal6(
-    /* @__PURE__ */ jsx71(
+    /* @__PURE__ */ jsx72(
       "ol",
       {
         ref: rootRef,
@@ -13871,7 +13998,7 @@ function Toaster({
         style: {
           ["--refineui-toast-gap"]: `${stackGapPx}px`
         },
-        children: records.map((rec, index) => /* @__PURE__ */ jsx71(
+        children: records.map((rec, index) => /* @__PURE__ */ jsx72(
           "li",
           {
             ref: (node) => {
@@ -13885,7 +14012,7 @@ function Toaster({
               ["--refineui-toast-z-index"]: String(STACK_Z_BASE - index),
               ["--refineui-toast-stack-index"]: String(index)
             },
-            children: /* @__PURE__ */ jsx71("div", { "data-refineui": "toast-scale-layer", children: /* @__PURE__ */ jsx71(
+            children: /* @__PURE__ */ jsx72("div", { "data-refineui": "toast-scale-layer", children: /* @__PURE__ */ jsx72(
               SwipeableToast,
               {
                 record: rec,
@@ -13907,24 +14034,24 @@ function Toaster({
 // src/components/Tree/Tree.tsx
 import { clsx as clsx100 } from "clsx";
 import {
-  useCallback as useCallback21,
-  useMemo as useMemo20,
+  useCallback as useCallback22,
+  useMemo as useMemo21,
   useRef as useRef22,
-  useState as useState28
+  useState as useState29
 } from "react";
 
 // src/components/Tree/context.ts
-import { createContext as createContext25, useEffect as useEffect19, useState as useState27 } from "react";
+import { createContext as createContext26, useEffect as useEffect19, useState as useState28 } 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 = createContext25(null);
-var TreeItemContext = createContext25(null);
+var TreeContext = createContext26(null);
+var TreeItemContext = createContext26(null);
 function usePrefersReducedMotion2() {
-  const [reduce, setReduce] = useState27(false);
+  const [reduce, setReduce] = useState28(false);
   useEffect19(() => {
     const mql = window.matchMedia(getReducedMotionQuery2().replace("@media ", ""));
     const sync = () => setReduce(mql.matches);
@@ -13980,7 +14107,7 @@ var treeItemTypo = {
 };
 
 // src/components/Tree/Tree.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 function Tree({
   size = "md",
   defaultExpanded,
@@ -13994,29 +14121,29 @@ function Tree({
   ...props
 }) {
   const reduceMotion = usePrefersReducedMotion2();
-  const [uncontrolledExpanded, setUncontrolledExpanded] = useState28(() => toExpandedSet(defaultExpanded));
-  const [uncontrolledSelected, setUncontrolledSelected] = useState28(defaultSelected ?? null);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState29(() => toExpandedSet(defaultExpanded));
+  const [uncontrolledSelected, setUncontrolledSelected] = useState29(defaultSelected ?? null);
   const expanded = expandedProp === void 0 ? uncontrolledExpanded : toExpandedSet(expandedProp);
   const selected = selectedProp === void 0 ? uncontrolledSelected : selectedProp;
   const orderRef = useRef22([]);
   const elMapRef = useRef22(/* @__PURE__ */ new Map());
   const metaMapRef = useRef22(/* @__PURE__ */ new Map());
-  const emitExpanded = useCallback21(
+  const emitExpanded = useCallback22(
     (next) => {
       if (expandedProp === void 0) setUncontrolledExpanded(next);
       onExpandedChange?.(Array.from(next));
     },
     [expandedProp, onExpandedChange]
   );
-  const emitSelected = useCallback21(
+  const emitSelected = useCallback22(
     (next) => {
       if (selectedProp === void 0) setUncontrolledSelected(next);
       onSelectedChange?.(next);
     },
     [onSelectedChange, selectedProp]
   );
-  const isExpanded = useCallback21((value) => expanded.has(value), [expanded]);
-  const toggleExpanded = useCallback21(
+  const isExpanded = useCallback22((value) => expanded.has(value), [expanded]);
+  const toggleExpanded = useCallback22(
     (value) => {
       const next = new Set(expanded);
       if (next.has(value)) next.delete(value);
@@ -14025,7 +14152,7 @@ function Tree({
     },
     [emitExpanded, expanded]
   );
-  const expand = useCallback21(
+  const expand = useCallback22(
     (value) => {
       if (expanded.has(value)) return;
       const next = new Set(expanded);
@@ -14034,7 +14161,7 @@ function Tree({
     },
     [emitExpanded, expanded]
   );
-  const collapse = useCallback21(
+  const collapse = useCallback22(
     (value) => {
       if (!expanded.has(value)) return;
       const next = new Set(expanded);
@@ -14043,13 +14170,13 @@ function Tree({
     },
     [emitExpanded, expanded]
   );
-  const select = useCallback21(
+  const select = useCallback22(
     (value) => {
       emitSelected(value);
     },
     [emitSelected]
   );
-  const registerItem = useCallback21((value, el, meta) => {
+  const registerItem = useCallback22((value, el, meta) => {
     metaMapRef.current.set(value, meta);
     if (!orderRef.current.includes(value)) {
       orderRef.current.push(value);
@@ -14061,10 +14188,10 @@ function Tree({
       orderRef.current = orderRef.current.filter((v) => v !== value);
     }
   }, []);
-  const focusItem = useCallback21((value) => {
+  const focusItem = useCallback22((value) => {
     elMapRef.current.get(value)?.focus();
   }, []);
-  const visibleValues = useCallback21(() => {
+  const visibleValues = useCallback22(() => {
     const result = [];
     const walk = (parent) => {
       for (const value of orderRef.current) {
@@ -14078,7 +14205,7 @@ function Tree({
     walk(null);
     return result;
   }, [expanded]);
-  const focusByDelta = useCallback21(
+  const focusByDelta = useCallback22(
     (currentValue, delta) => {
       const list = visibleValues();
       const idx = list.indexOf(currentValue);
@@ -14088,17 +14215,17 @@ function Tree({
     },
     [focusItem, visibleValues]
   );
-  const focusFirst = useCallback21(() => {
+  const focusFirst = useCallback22(() => {
     const list = visibleValues();
     if (list[0]) focusItem(list[0]);
   }, [focusItem, visibleValues]);
-  const focusLast = useCallback21(() => {
+  const focusLast = useCallback22(() => {
     const list = visibleValues();
     const last = list[list.length - 1];
     if (last) focusItem(last);
   }, [focusItem, visibleValues]);
-  const getParent = useCallback21((value) => metaMapRef.current.get(value)?.parentValue ?? null, []);
-  const contextValue = useMemo20(
+  const getParent = useCallback22((value) => metaMapRef.current.get(value)?.parentValue ?? null, []);
+  const contextValue = useMemo21(
     () => ({
       size,
       isExpanded,
@@ -14132,7 +14259,7 @@ function Tree({
       toggleExpanded
     ]
   );
-  return /* @__PURE__ */ jsx72(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx73(
     "ul",
     {
       "data-refineui": "tree",
@@ -14146,21 +14273,21 @@ function Tree({
 
 // src/components/Tree/TreeItem.tsx
 import { clsx as clsx101 } from "clsx";
-import { useContext as useContext27, useId as useId15, useMemo as useMemo21, useState as useState29 } from "react";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { useContext as useContext28, useId as useId16, useMemo as useMemo22, useState as useState30 } from "react";
+import { jsx as jsx74 } from "react/jsx-runtime";
 function TreeItem({ value, disabled = false, className, children, ...props }) {
-  const tree = useContext27(TreeContext);
-  const parent = useContext27(TreeItemContext);
+  const tree = useContext28(TreeContext);
+  const parent = useContext28(TreeItemContext);
   if (!tree) throw new Error("TreeItem must be used within Tree.");
-  const [hasBranch, setHasBranch] = useState29(false);
-  const uid = useId15().replace(/:/g, "");
+  const [hasBranch, setHasBranch] = useState30(false);
+  const uid = useId16().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 = useMemo21(
+  const itemContext = useMemo22(
     () => ({
       value,
       depth,
@@ -14175,7 +14302,7 @@ function TreeItem({ value, disabled = false, className, children, ...props }) {
     }),
     [value, depth, parentValue, expanded, selected, disabled, hasBranch, triggerId, groupId]
   );
-  return /* @__PURE__ */ jsx73(TreeItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(TreeItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx74(
     "li",
     {
       "data-refineui": "tree-item",
@@ -14197,13 +14324,13 @@ function TreeItem({ value, disabled = false, className, children, ...props }) {
 // src/components/Tree/TreeItemTrigger.tsx
 import { clsx as clsx102 } from "clsx";
 import {
-  useContext as useContext28,
+  useContext as useContext29,
   useEffect as useEffect20
 } from "react";
-import { jsx as jsx74, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs30 } from "react/jsx-runtime";
 function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props }) {
-  const tree = useContext28(TreeContext);
-  const item = useContext28(TreeItemContext);
+  const tree = useContext29(TreeContext);
+  const item = useContext29(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))";
@@ -14286,7 +14413,7 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
         break;
     }
   };
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       ref: setRowRef,
@@ -14306,7 +14433,7 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
       ),
       ...props,
       children: /* @__PURE__ */ jsxs30("div", { "data-refineui": "tree-item-main", className: treeStyles.rowMain, style: mainStyle, children: [
-        item.hasBranch ? /* @__PURE__ */ jsx74(
+        item.hasBranch ? /* @__PURE__ */ jsx75(
           "button",
           {
             type: "button",
@@ -14320,10 +14447,10 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
               item.expanded && treeStyles.chevronExpanded,
               tree.reduceMotion && "transition-none"
             ),
-            children: /* @__PURE__ */ jsx74(WebIcon, { name: "chevron-right", size: iconSize, color: "currentColor", fallback: "\u203A" })
+            children: /* @__PURE__ */ jsx75(WebIcon, { name: "chevron-right", size: iconSize, color: "currentColor", fallback: "\u203A" })
           }
-        ) : /* @__PURE__ */ jsx74("span", { className: treeStyles.chevronSpacer, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx74("span", { className: treeStyles.label, children })
+        ) : /* @__PURE__ */ jsx75("span", { className: treeStyles.chevronSpacer, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx75("span", { className: treeStyles.label, children })
       ] })
     }
   );
@@ -14331,11 +14458,11 @@ function TreeItemTrigger({ className, children, onClick, onKeyDown, ...props })
 
 // src/components/Tree/TreeItemContent.tsx
 import { clsx as clsx103 } from "clsx";
-import { useContext as useContext29, useLayoutEffect as useLayoutEffect12 } from "react";
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { useContext as useContext30, useLayoutEffect as useLayoutEffect12 } from "react";
+import { jsx as jsx76 } from "react/jsx-runtime";
 function TreeItemContent({ className, children, ...props }) {
-  const tree = useContext29(TreeContext);
-  const item = useContext29(TreeItemContext);
+  const tree = useContext30(TreeContext);
+  const item = useContext30(TreeItemContext);
   if (!tree || !item) throw new Error("TreeItemContent must be used within TreeItem.");
   const { setHasBranch, expanded, groupId, triggerId } = item;
   useLayoutEffect12(() => {
@@ -14353,7 +14480,7 @@ function TreeItemContent({ className, children, ...props }) {
     transition: tree.reduceMotion ? void 0 : `opacity ${TREE_CONTENT_MS}s ${TREE_CONTENT_EASE}, transform ${TREE_CONTENT_MS}s ${TREE_CONTENT_EASE}`,
     pointerEvents: expanded ? void 0 : "none"
   };
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       ref: (el) => {
@@ -14364,7 +14491,7 @@ function TreeItemContent({ className, children, ...props }) {
       "data-refineui": "tree-item-panel",
       "aria-hidden": !expanded,
       style: gridStyle,
-      children: /* @__PURE__ */ jsx75("div", { className: treeStyles.panel, children: /* @__PURE__ */ jsx75("div", { className: treeStyles.panelInner, style: innerMotionStyle, children: /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsx76("div", { className: treeStyles.panel, children: /* @__PURE__ */ jsx76("div", { className: treeStyles.panelInner, style: innerMotionStyle, children: /* @__PURE__ */ jsx76(
         "ul",
         {
           id: groupId,
@@ -14382,9 +14509,9 @@ function TreeItemContent({ className, children, ...props }) {
 
 // src/components/Tooltip/Tooltip.tsx
 import { clsx as clsx105 } from "clsx";
-import { useId as useId16, useRef as useRef23, useState as useState30 } from "react";
+import { useId as useId17, useRef as useRef23, useState as useState31 } from "react";
 import { resolveColorTokenValue as resolveColorTokenValue12 } from "@refineui/utilities/color";
-import { Slot as Slot4, getMergeableTriggerChild as getMergeableTriggerChild4 } from "@refineui/utilities/react";
+import { Slot as Slot5, getMergeableTriggerChild as getMergeableTriggerChild4 } from "@refineui/utilities/react";
 
 // src/components/Tooltip/style.ts
 import { spacings as spacings6, strokeWidths as strokeWidths3 } from "@refineui/tokens";
@@ -14488,7 +14615,7 @@ function tooltipBeakRotateDeg(position) {
 }
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx76, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs31 } from "react/jsx-runtime";
 function Tooltip({
   trigger,
   content,
@@ -14501,9 +14628,9 @@ function Tooltip({
   className,
   ...props
 }) {
-  const [innerOpen, setInnerOpen] = useState30(defaultOpen);
+  const [innerOpen, setInnerOpen] = useState31(defaultOpen);
   const open = ctrlOpen !== void 0 ? ctrlOpen : innerOpen;
-  const tooltipId = useId16();
+  const tooltipId = useId17();
   const showTimer = useRef23(null);
   const setOpen = (next) => {
     if (ctrlOpen === void 0) setInnerOpen(next);
@@ -14534,8 +14661,8 @@ function Tooltip({
   const mergeEl = getMergeableTriggerChild4(trigger);
   let triggerNode;
   if (mergeEl != null) {
-    triggerNode = /* @__PURE__ */ jsx76(
-      Slot4,
+    triggerNode = /* @__PURE__ */ jsx77(
+      Slot5,
       {
         "aria-describedby": describedBy,
         onMouseEnter: scheduleShow,
@@ -14551,7 +14678,7 @@ function Tooltip({
       }
     );
   } else {
-    triggerNode = /* @__PURE__ */ jsx76(
+    triggerNode = /* @__PURE__ */ jsx77(
       "span",
       {
         tabIndex: 0,
@@ -14570,14 +14697,14 @@ function Tooltip({
   }
   return /* @__PURE__ */ jsxs31("div", { "data-refineui": "tooltip", className: clsx105(tooltipStyles.root, className), ...props, children: [
     triggerNode,
-    open && /* @__PURE__ */ jsx76("div", { className: tooltipStyles.floating, style: floatingStyle, children: /* @__PURE__ */ jsxs31("div", { className: tooltipStyles.panelWrap, children: [
-      /* @__PURE__ */ jsx76(
+    open && /* @__PURE__ */ jsx77("div", { className: tooltipStyles.floating, style: floatingStyle, children: /* @__PURE__ */ jsxs31("div", { className: tooltipStyles.panelWrap, children: [
+      /* @__PURE__ */ jsx77(
         "div",
         {
           className: tooltipStyles.beakWrap,
           style: { ...beakWrapStyle, width: TOOLTIP_BEAK_W, height: TOOLTIP_BEAK_H },
           "aria-hidden": true,
-          children: /* @__PURE__ */ jsx76(
+          children: /* @__PURE__ */ jsx77(
             "div",
             {
               style: {
@@ -14596,8 +14723,8 @@ function Tooltip({
                   xmlns: "http://www.w3.org/2000/svg",
                   style: { display: "block" },
                   children: [
-                    /* @__PURE__ */ jsx76("polygon", { points: "8,0 0,8 16,8", fill: borderCol }),
-                    /* @__PURE__ */ jsx76("polygon", { points: "8,2 2,8 14,8", fill: bg })
+                    /* @__PURE__ */ jsx77("polygon", { points: "8,0 0,8 16,8", fill: borderCol }),
+                    /* @__PURE__ */ jsx77("polygon", { points: "8,2 2,8 14,8", fill: bg })
                   ]
                 }
               )
@@ -14605,7 +14732,7 @@ function Tooltip({
           )
         }
       ),
-      /* @__PURE__ */ jsx76(
+      /* @__PURE__ */ jsx77(
         "div",
         {
           id: tooltipId,
@@ -14630,13 +14757,13 @@ function Tooltip({
 import { clsx as clsx107 } from "clsx";
 import {
   Children as Children8,
-  createContext as createContext26,
+  createContext as createContext27,
   isValidElement as isValidElement7,
-  useContext as useContext30,
-  useId as useId17,
+  useContext as useContext31,
+  useId as useId18,
   useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo22,
-  useState as useState31
+  useMemo as useMemo23,
+  useState as useState32
 } from "react";
 import { opacities } from "@refineui/tokens";
 import { resolveColorTokenValue as resolveColorTokenValue13 } from "@refineui/utilities/color";
@@ -14864,10 +14991,10 @@ function formatAxisTick(value) {
 }
 
 // src/components/Chart/Chart.tsx
-import { Fragment as Fragment4, jsx as jsx77, jsxs as jsxs32 } from "react/jsx-runtime";
-var ChartContext = createContext26(null);
+import { Fragment as Fragment4, jsx as jsx78, jsxs as jsxs32 } from "react/jsx-runtime";
+var ChartContext = createContext27(null);
 function useChartContext(component) {
-  const value = useContext30(ChartContext);
+  const value = useContext31(ChartContext);
   if (!value) throw new Error(`${component} must be used within Chart.`);
   return value;
 }
@@ -14900,12 +15027,12 @@ function isChartTooltipElement(node) {
   return isValidElement7(node) && node.type === ChartTooltip;
 }
 function Chart({ className, children, ...props }) {
-  const [hoverIndex, setHoverIndex] = useState31(null);
-  const [selectedIndex, setSelectedIndex] = useState31(null);
-  const [pointer, setPointer] = useState31(null);
-  const [labels, setLabels] = useState31([]);
-  const [series, setSeries] = useState31(null);
-  const context = useMemo22(
+  const [hoverIndex, setHoverIndex] = useState32(null);
+  const [selectedIndex, setSelectedIndex] = useState32(null);
+  const [pointer, setPointer] = useState32(null);
+  const [labels, setLabels] = useState32([]);
+  const [series, setSeries] = useState32(null);
+  const context = useMemo23(
     () => ({
       hoverIndex,
       selectedIndex,
@@ -14920,7 +15047,7 @@ function Chart({ className, children, ...props }) {
     }),
     [hoverIndex, selectedIndex, pointer, labels, series]
   );
-  return /* @__PURE__ */ jsx77(ChartContext.Provider, { value: context, children: /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(ChartContext.Provider, { value: context, children: /* @__PURE__ */ jsx78(
     "div",
     {
       "data-refineui": "chart",
@@ -14931,7 +15058,7 @@ function Chart({ className, children, ...props }) {
   ) });
 }
 function ChartBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       "data-refineui": "chart-body",
@@ -14941,7 +15068,7 @@ function ChartBody({ className, ...props }) {
   );
 }
 function ChartContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       "data-refineui": "chart-content",
@@ -14966,7 +15093,7 @@ function ChartHitArea() {
     setHoverIndex(hoverIndexFromPlotX(next.x, count, series.align));
     return next;
   };
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "rect",
     {
       "data-refineui": "chart-hit-area",
@@ -15024,7 +15151,7 @@ function ChartPlot({
             className: chartStyles.plot,
             children: [
               svgChildren,
-              /* @__PURE__ */ jsx77(ChartHitArea, {})
+              /* @__PURE__ */ jsx78(ChartHitArea, {})
             ]
           }
         ),
@@ -15042,7 +15169,7 @@ function ChartTooltip({ className, children, style, ...props }) {
   const flipY = pointer.y < CHART_PLOT_PADDING_TOP + plotHeight() * CHART_TOOLTIP_FLIP_Y;
   const offsetX = flipX ? "calc(-100% - var(--refineui-spacing-size-small))" : "var(--refineui-spacing-size-small)";
   const offsetY = flipY ? "var(--refineui-spacing-size-small)" : "calc(-100% - var(--refineui-spacing-size-x-small))";
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       "data-refineui": "chart-tooltip",
@@ -15056,8 +15183,8 @@ function ChartTooltip({ className, children, style, ...props }) {
       },
       ...props,
       children: children ?? /* @__PURE__ */ jsxs32(Fragment4, { children: [
-        label ? /* @__PURE__ */ jsx77("span", { className: chartStyles.tooltipLabel, children: label }) : null,
-        /* @__PURE__ */ jsx77("span", { className: chartStyles.tooltipValue, children: formatAxisTick(value) })
+        label ? /* @__PURE__ */ jsx78("span", { className: chartStyles.tooltipLabel, children: label }) : null,
+        /* @__PURE__ */ jsx78("span", { className: chartStyles.tooltipValue, children: formatAxisTick(value) })
       ] })
     }
   );
@@ -15072,14 +15199,14 @@ function ChartYAxisLabels({
 }) {
   const scaleMax = resolveScale(values, max);
   const ticks = yAxisTicks(scaleMax, lines).slice().reverse();
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       "data-refineui": "chart-y-axis",
       className: clsx107(chartStyles.yAxis, className),
       "aria-hidden": true,
       ...props,
-      children: ticks.map((tick) => /* @__PURE__ */ jsx77(
+      children: ticks.map((tick) => /* @__PURE__ */ jsx78(
         "span",
         {
           className: chartStyles.yAxisTick,
@@ -15102,12 +15229,12 @@ function ChartGrid({
   const ticks = yAxisTicks(scaleMax, lines);
   const gridColor = gridStroke();
   const baselineColor = gridBaselineStroke();
-  return /* @__PURE__ */ jsx77("g", { "data-refineui": "chart-grid", className, ...props, children: ticks.map((tick, index) => {
+  return /* @__PURE__ */ jsx78("g", { "data-refineui": "chart-grid", className, ...props, children: ticks.map((tick, index) => {
     const y = gridLineY(scaleMax, tick);
     const isBaseline = index === 0;
     const isTop = index === ticks.length - 1;
     if (isTop) return null;
-    return /* @__PURE__ */ jsx77(
+    return /* @__PURE__ */ jsx78(
       "line",
       {
         x1: CHART_PLOT_PADDING_X,
@@ -15145,7 +15272,7 @@ function ChartBars({
   return /* @__PURE__ */ jsxs32("g", { "data-refineui": "chart-bars", "data-series-color": seriesColor, className, ...props, children: [
     showTrack ? values.map((_, index) => {
       const x = barX(index, values.length);
-      return /* @__PURE__ */ jsx77(
+      return /* @__PURE__ */ jsx78(
         "path",
         {
           "data-refineui": "chart-bar-track",
@@ -15167,7 +15294,7 @@ function ChartBars({
       const height = baselineY - y;
       if (height <= 0) return null;
       const state = itemState(index, hoverIndex, selectedIndex);
-      return /* @__PURE__ */ jsx77(
+      return /* @__PURE__ */ jsx78(
         "path",
         {
           "data-refineui": "chart-bar",
@@ -15190,7 +15317,7 @@ function ChartLine({
   ...props
 }) {
   const { hoverIndex, selectedIndex, setSeries } = useChartContext("ChartLine");
-  const gradientId = useId17().replace(/:/g, "");
+  const gradientId = useId18().replace(/:/g, "");
   const scaleMax = resolveChartScale(values, max);
   const stroke = seriesColorToken(seriesColor);
   const coords = linePointCoords(values, scaleMax);
@@ -15202,8 +15329,8 @@ function ChartLine({
   }, [values, seriesColor, max, setSeries]);
   return /* @__PURE__ */ jsxs32("g", { "data-refineui": "chart-line", "data-series-color": seriesColor, className, ...props, children: [
     showArea && coords.length > 1 ? /* @__PURE__ */ jsxs32(Fragment4, { children: [
-      /* @__PURE__ */ jsx77("defs", { children: /* @__PURE__ */ jsxs32("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ jsx77(
+      /* @__PURE__ */ jsx78("defs", { children: /* @__PURE__ */ jsxs32("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx78(
           "stop",
           {
             offset: "0%",
@@ -15211,9 +15338,9 @@ function ChartLine({
             stopOpacity: opacities.opacityDisabled
           }
         ),
-        /* @__PURE__ */ jsx77("stop", { offset: "100%", stopColor: stroke, stopOpacity: "0" })
+        /* @__PURE__ */ jsx78("stop", { offset: "100%", stopColor: stroke, stopOpacity: "0" })
       ] }) }),
-      /* @__PURE__ */ jsx77(
+      /* @__PURE__ */ jsx78(
         "path",
         {
           "data-refineui": "chart-line-area",
@@ -15222,7 +15349,7 @@ function ChartLine({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsx77(
+    /* @__PURE__ */ jsx78(
       "path",
       {
         "data-refineui": "chart-line-stroke",
@@ -15240,7 +15367,7 @@ function ChartLine({
       const state = itemState(index, hoverIndex, selectedIndex);
       const visible = showPoints || state !== "default";
       if (!visible) return null;
-      return /* @__PURE__ */ jsx77(
+      return /* @__PURE__ */ jsx78(
         "circle",
         {
           "data-refineui": "chart-point",
@@ -15269,7 +15396,7 @@ function ChartAxisLabels({
   useLayoutEffect13(() => {
     setLabels(labels);
   }, [labels, setLabels]);
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       "data-refineui": "chart-axis-labels",
@@ -15278,7 +15405,7 @@ function ChartAxisLabels({
       ...props,
       children: labels.map((label, index) => {
         const state = itemState(index, hoverIndex, selectedIndex);
-        return /* @__PURE__ */ jsx77(
+        return /* @__PURE__ */ jsx78(
           "span",
           {
             "data-state": state,
@@ -15296,7 +15423,7 @@ function ChartAxisLabels({
   );
 }
 function ChartLegend({ className, ...props }) {
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "ul",
     {
       "data-refineui": "chart-legend",
@@ -15320,7 +15447,7 @@ function ChartLegendItem({
       className: clsx107(chartStyles.legendItem, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx78(
           "span",
           {
             "aria-hidden": true,
@@ -15335,31 +15462,31 @@ function ChartLegendItem({
 }
 
 // src/components/Slot/Slot.tsx
-import { Slot as Slot5 } from "@refineui/utilities/react";
+import { Slot as Slot6 } from "@refineui/utilities/react";
 
 // src/components/Collapsible/Collapsible.tsx
 import {
-  forwardRef as forwardRef16,
-  useCallback as useCallback22,
-  useId as useId18,
-  useMemo as useMemo23,
-  useState as useState33
+  forwardRef as forwardRef17,
+  useCallback as useCallback23,
+  useId as useId19,
+  useMemo as useMemo24,
+  useState as useState34
 } from "react";
 import { clsx as clsx108 } from "clsx";
-import { Slot as Slot6 } from "@refineui/utilities/react";
+import { Slot as Slot7 } from "@refineui/utilities/react";
 
 // src/components/Collapsible/context.ts
-import { createContext as createContext27, useContext as useContext31, useEffect as useEffect21, useState as useState32 } from "react";
+import { createContext as createContext28, useContext as useContext32, useEffect as useEffect21, useState as useState33 } from "react";
 import { semanticInteraction as semanticInteraction9 } from "@refineui/tokens";
 import { getReducedMotionQuery as getReducedMotionQuery3 } from "@refineui/utilities/animation";
-var CollapsibleContext = createContext27(null);
+var CollapsibleContext = createContext28(null);
 function useCollapsibleContext(part) {
-  const value = useContext31(CollapsibleContext);
+  const value = useContext32(CollapsibleContext);
   if (!value) throw new Error(`${part} must be used within Collapsible`);
   return value;
 }
 function usePrefersReducedMotion3() {
-  const [reduce, setReduce] = useState32(false);
+  const [reduce, setReduce] = useState33(false);
   useEffect21(() => {
     const mql = window.matchMedia(getReducedMotionQuery3().replace("@media ", ""));
     const sync = () => setReduce(mql.matches);
@@ -15380,18 +15507,18 @@ var collapsibleStyles = {
 };
 
 // src/components/Collapsible/Collapsible.tsx
-import { jsx as jsx78 } from "react/jsx-runtime";
-var Collapsible = forwardRef16(function Collapsible2({ open: openProp, defaultOpen = false, onOpenChange, asChild = false, className, children, ...props }, ref) {
-  const [uncontrolled, setUncontrolled] = useState33(defaultOpen);
+import { jsx as jsx79 } from "react/jsx-runtime";
+var Collapsible = forwardRef17(function Collapsible2({ open: openProp, defaultOpen = false, onOpenChange, asChild = false, className, children, ...props }, ref) {
+  const [uncontrolled, setUncontrolled] = useState34(defaultOpen);
   const open = openProp ?? uncontrolled;
-  const reactId = useId18();
+  const reactId = useId19();
   const reduceMotion = usePrefersReducedMotion3();
-  const toggle = useCallback22(() => {
+  const toggle = useCallback23(() => {
     const next = !(openProp ?? uncontrolled);
     if (openProp === void 0) setUncontrolled(next);
     onOpenChange?.(next);
   }, [onOpenChange, openProp, uncontrolled]);
-  const contextValue = useMemo23(
+  const contextValue = useMemo24(
     () => ({
       open,
       toggle,
@@ -15408,9 +15535,9 @@ var Collapsible = forwardRef16(function Collapsible2({ open: openProp, defaultOp
     "data-refineui": "collapsible",
     className
   };
-  return /* @__PURE__ */ jsx78(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ jsx78(Slot6, { ...shared, children }) : /* @__PURE__ */ jsx78("div", { ...shared, children }) });
+  return /* @__PURE__ */ jsx79(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ jsx79(Slot7, { ...shared, children }) : /* @__PURE__ */ jsx79("div", { ...shared, children }) });
 });
-var CollapsibleTrigger = forwardRef16(
+var CollapsibleTrigger = forwardRef17(
   function CollapsibleTrigger2({
     asChild = false,
     onClick,
@@ -15437,8 +15564,8 @@ var CollapsibleTrigger = forwardRef16(
         if (!event.defaultPrevented) toggle();
       }
     };
-    if (asChild) return /* @__PURE__ */ jsx78(Slot6, { ...shared, children });
-    return /* @__PURE__ */ jsx78(
+    if (asChild) return /* @__PURE__ */ jsx79(Slot7, { ...shared, children });
+    return /* @__PURE__ */ jsx79(
       Button,
       {
         ...shared,
@@ -15452,7 +15579,7 @@ var CollapsibleTrigger = forwardRef16(
     );
   }
 );
-var CollapsibleContent = forwardRef16(
+var CollapsibleContent = forwardRef17(
   function CollapsibleContent2({ className, children, style, ...props }, ref) {
     const { open, contentId, triggerId, reduceMotion } = useCollapsibleContext("CollapsibleContent");
     const gridStyle = {
@@ -15467,7 +15594,7 @@ var CollapsibleContent = forwardRef16(
       pointerEvents: open ? void 0 : "none",
       ...style
     };
-    return /* @__PURE__ */ jsx78(
+    return /* @__PURE__ */ jsx79(
       "div",
       {
         ...props,
@@ -15479,7 +15606,7 @@ var CollapsibleContent = forwardRef16(
         "data-state": open ? "open" : "closed",
         "data-refineui": "collapsible-content",
         style: gridStyle,
-        children: /* @__PURE__ */ jsx78("div", { className: collapsibleStyles.panelOuter, children: /* @__PURE__ */ jsx78("div", { className: clsx108(className), style: innerMotionStyle, children }) })
+        children: /* @__PURE__ */ jsx79("div", { className: collapsibleStyles.panelOuter, children: /* @__PURE__ */ jsx79("div", { className: clsx108(className), style: innerMotionStyle, children }) })
       }
     );
   }
@@ -15487,28 +15614,28 @@ var CollapsibleContent = forwardRef16(
 
 // src/components/ContextMenu/ContextMenu.tsx
 import {
-  createContext as createContext28,
-  forwardRef as forwardRef17,
-  useCallback as useCallback23,
-  useContext as useContext32,
+  createContext as createContext29,
+  forwardRef as forwardRef18,
+  useCallback as useCallback24,
+  useContext as useContext33,
   useEffect as useEffect22,
   useLayoutEffect as useLayoutEffect14,
-  useMemo as useMemo24,
+  useMemo as useMemo25,
   useRef as useRef24,
-  useState as useState34
+  useState as useState35
 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { clsx as clsx109 } from "clsx";
 import { componentSizes as componentSizes3, iconSizes as iconSizes23, semanticInteraction as semanticInteraction10 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber7 } from "@refineui/utilities/animation";
-import { Slot as Slot7 } from "@refineui/utilities/react";
-import { Fragment as Fragment5, jsx as jsx79, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Slot as Slot8 } from "@refineui/utilities/react";
+import { Fragment as Fragment5, jsx as jsx80, jsxs as jsxs33 } from "react/jsx-runtime";
 var MENU_ATTR = "data-refineui-context-menu";
 var CLOSE_MS = motionMsToNumber7(semanticInteraction10.duration.normal);
-var MenuContext2 = createContext28(null);
-var SubContext = createContext28(null);
+var MenuContext2 = createContext29(null);
+var SubContext = createContext29(null);
 function useMenu() {
-  const value = useContext32(MenuContext2);
+  const value = useContext33(MenuContext2);
   if (!value) throw new Error("Context menu parts must be used within ContextMenu");
   return value;
 }
@@ -15525,29 +15652,29 @@ function placeInView(element, x, y) {
 }
 function ContextMenu({ modal = true, onOpenChange, children }) {
   void modal;
-  const [open, setOpen] = useState34(false);
-  const [point, setPoint] = useState34({ x: 0, y: 0 });
+  const [open, setOpen] = useState35(false);
+  const [point, setPoint] = useState35({ x: 0, y: 0 });
   const openRef = useRef24(false);
   const onOpenChangeRef = useRef24(onOpenChange);
   openRef.current = open;
   onOpenChangeRef.current = onOpenChange;
-  const close = useCallback23(() => {
+  const close = useCallback24(() => {
     if (!openRef.current) return;
     openRef.current = false;
     setOpen(false);
     onOpenChangeRef.current?.(false);
   }, []);
-  const openAt = useCallback23((x, y) => {
+  const openAt = useCallback24((x, y) => {
     setPoint({ x, y });
     const wasOpen = openRef.current;
     openRef.current = true;
     setOpen(true);
     if (!wasOpen) onOpenChangeRef.current?.(true);
   }, []);
-  const value = useMemo24(() => ({ open, point, openAt, close }), [open, point, openAt, close]);
-  return /* @__PURE__ */ jsx79(MenuContext2.Provider, { value, children });
+  const value = useMemo25(() => ({ open, point, openAt, close }), [open, point, openAt, close]);
+  return /* @__PURE__ */ jsx80(MenuContext2.Provider, { value, children });
 }
-var ContextMenuTrigger = forwardRef17(function ContextMenuTrigger2({ asChild = false, onContextMenu, children, ...props }, ref) {
+var ContextMenuTrigger = forwardRef18(function ContextMenuTrigger2({ asChild = false, onContextMenu, children, ...props }, ref) {
   const { openAt } = useMenu();
   const shared = {
     ...props,
@@ -15560,17 +15687,17 @@ var ContextMenuTrigger = forwardRef17(function ContextMenuTrigger2({ asChild = f
       openAt(event.clientX, event.clientY);
     }
   };
-  if (asChild) return /* @__PURE__ */ jsx79(Slot7, { ...shared, children });
-  return /* @__PURE__ */ jsx79("span", { ...shared, className: clsx109(menuStyles.triggerFallback, props.className), children });
+  if (asChild) return /* @__PURE__ */ jsx80(Slot8, { ...shared, children });
+  return /* @__PURE__ */ jsx80("span", { ...shared, className: clsx109(menuStyles.triggerFallback, props.className), children });
 });
 function ContextMenuPortal({ children }) {
-  return /* @__PURE__ */ jsx79(Fragment5, { children });
+  return /* @__PURE__ */ jsx80(Fragment5, { children });
 }
-var ContextMenuContent = forwardRef17(function ContextMenuContent2({ className, style, onPointerDown, children, ...props }, ref) {
+var ContextMenuContent = forwardRef18(function ContextMenuContent2({ className, style, onPointerDown, children, ...props }, ref) {
   const { open, point, close } = useMenu();
   const localRef = useRef24(null);
-  const [shouldRender, setShouldRender] = useState34(open);
-  const [isClosing, setIsClosing] = useState34(false);
+  const [shouldRender, setShouldRender] = useState35(open);
+  const [isClosing, setIsClosing] = useState35(false);
   useEffect22(() => {
     if (open) {
       setShouldRender(true);
@@ -15608,7 +15735,7 @@ var ContextMenuContent = forwardRef17(function ContextMenuContent2({ className,
   }, [open, close]);
   if (!shouldRender || typeof document === "undefined") return null;
   return createPortal7(
-    /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx80(
       "div",
       {
         ...props,
@@ -15635,7 +15762,7 @@ var ContextMenuContent = forwardRef17(function ContextMenuContent2({ className,
           onPointerDown?.(event);
         },
         onContextMenu: (event) => event.preventDefault(),
-        children: /* @__PURE__ */ jsx79("div", { role: "menu", "data-refineui": "menu", className: clsx109(menuStyles.list, className), children })
+        children: /* @__PURE__ */ jsx80("div", { role: "menu", "data-refineui": "menu", className: clsx109(menuStyles.list, className), children })
       }
     ),
     document.body
@@ -15652,11 +15779,11 @@ function runSelect(onSelect, close, disabled) {
   onSelect?.(selectEvent);
   if (!selectEvent.defaultPrevented) close();
 }
-var ContextMenuItem = forwardRef17(function ContextMenuItem2({ disabled = false, description, shortcut, startIcon, endIcon, state = "default", onSelect, className, onClick, onKeyDown, children, ...props }, ref) {
+var ContextMenuItem = forwardRef18(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;
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx80(
     "button",
     {
       ref,
@@ -15683,7 +15810,7 @@ var ContextMenuItem = forwardRef17(function ContextMenuItem2({ disabled = false,
         }
       },
       children: slotted ? /* @__PURE__ */ jsxs33("span", { className: menuStyles.row, children: [
-        startIcon ? /* @__PURE__ */ jsx79(
+        startIcon ? /* @__PURE__ */ jsx80(
           "span",
           {
             className: menuStyles.iconWrap,
@@ -15692,12 +15819,12 @@ var ContextMenuItem = forwardRef17(function ContextMenuItem2({ disabled = false,
           }
         ) : null,
         /* @__PURE__ */ jsxs33("span", { className: menuStyles.textCol, children: [
-          /* @__PURE__ */ jsx79("span", { className: menuStyles.title, children }),
-          description ? /* @__PURE__ */ jsx79("span", { className: clsx109(menuStyles.description, isDisabled ? menuStyles.descriptionDisabled : menuStyles.descriptionEnabled), children: description }) : null
+          /* @__PURE__ */ jsx80("span", { className: menuStyles.title, children }),
+          description ? /* @__PURE__ */ jsx80("span", { className: clsx109(menuStyles.description, isDisabled ? menuStyles.descriptionDisabled : menuStyles.descriptionEnabled), children: description }) : null
         ] }),
         (shortcut || endIcon) && /* @__PURE__ */ jsxs33("span", { className: menuStyles.rightWrap, children: [
-          shortcut ? /* @__PURE__ */ jsx79("span", { className: menuStyles.shortcut, children: shortcut }) : null,
-          endIcon ? /* @__PURE__ */ jsx79(
+          shortcut ? /* @__PURE__ */ jsx80("span", { className: menuStyles.shortcut, children: shortcut }) : null,
+          endIcon ? /* @__PURE__ */ jsx80(
             "span",
             {
               className: menuStyles.iconWrap,
@@ -15706,13 +15833,13 @@ var ContextMenuItem = forwardRef17(function ContextMenuItem2({ disabled = false,
             }
           ) : null
         ] })
-      ] }) : /* @__PURE__ */ jsx79("span", { className: menuStyles.row, children })
+      ] }) : /* @__PURE__ */ jsx80("span", { className: menuStyles.row, children })
     }
   );
 });
-var ContextMenuSeparator = forwardRef17(
+var ContextMenuSeparator = forwardRef18(
   function ContextMenuSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx79(
+    return /* @__PURE__ */ jsx80(
       "div",
       {
         ref,
@@ -15722,16 +15849,16 @@ var ContextMenuSeparator = forwardRef17(
         ...{ [MENU_ATTR]: "" },
         className: clsx109(menuStyles.dividerWrap, className),
         ...props,
-        children: /* @__PURE__ */ jsx79("div", { className: menuStyles.dividerLine })
+        children: /* @__PURE__ */ jsx80("div", { className: menuStyles.dividerLine })
       }
     );
   }
 );
 function ContextMenuLabel({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx79("div", { "data-refineui": "menu-label", className: clsx109(menuStyles.section, className), ...props, children: /* @__PURE__ */ jsx79("span", { className: menuStyles.sectionText, children }) });
+  return /* @__PURE__ */ jsx80("div", { "data-refineui": "menu-label", className: clsx109(menuStyles.section, className), ...props, children: /* @__PURE__ */ jsx80("span", { className: menuStyles.sectionText, children }) });
 }
 function ContextMenuSub({ children }) {
-  const [open, setOpen] = useState34(false);
+  const [open, setOpen] = useState35(false);
   const triggerRef = useRef24(null);
   const timer = useRef24(null);
   const clear = () => {
@@ -15739,7 +15866,7 @@ function ContextMenuSub({ children }) {
     timer.current = null;
   };
   useEffect22(() => clear, []);
-  const value = useMemo24(
+  const value = useMemo25(
     () => ({
       open,
       triggerRef,
@@ -15754,14 +15881,14 @@ function ContextMenuSub({ children }) {
     }),
     [open]
   );
-  return /* @__PURE__ */ jsx79(SubContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx80(SubContext.Provider, { value, children });
 }
 function useSub2() {
-  const value = useContext32(SubContext);
+  const value = useContext33(SubContext);
   if (!value) throw new Error("ContextMenuSubTrigger must be used within ContextMenuSub");
   return value;
 }
-var ContextMenuSubTrigger = forwardRef17(
+var ContextMenuSubTrigger = forwardRef18(
   function ContextMenuSubTrigger2({ asChild = false, description, startIcon, onMouseEnter, onMouseLeave, onClick, className, children, ...props }, ref) {
     const sub = useSub2();
     const shared = {
@@ -15797,9 +15924,9 @@ var ContextMenuSubTrigger = forwardRef17(
         if (!event.defaultPrevented) sub.show();
       }
     };
-    if (asChild) return /* @__PURE__ */ jsx79(Slot7, { ...shared, children });
-    return /* @__PURE__ */ jsx79("button", { ...shared, children: /* @__PURE__ */ jsxs33("span", { className: menuStyles.row, children: [
-      startIcon ? /* @__PURE__ */ jsx79(
+    if (asChild) return /* @__PURE__ */ jsx80(Slot8, { ...shared, children });
+    return /* @__PURE__ */ jsx80("button", { ...shared, children: /* @__PURE__ */ jsxs33("span", { className: menuStyles.row, children: [
+      startIcon ? /* @__PURE__ */ jsx80(
         "span",
         {
           className: menuStyles.iconWrap,
@@ -15808,25 +15935,25 @@ var ContextMenuSubTrigger = forwardRef17(
         }
       ) : null,
       /* @__PURE__ */ jsxs33("span", { className: menuStyles.textCol, children: [
-        /* @__PURE__ */ jsx79("span", { className: menuStyles.title, children }),
-        description ? /* @__PURE__ */ jsx79("span", { className: clsx109(menuStyles.description, menuStyles.descriptionEnabled), children: description }) : null
+        /* @__PURE__ */ jsx80("span", { className: menuStyles.title, children }),
+        description ? /* @__PURE__ */ jsx80("span", { className: clsx109(menuStyles.description, menuStyles.descriptionEnabled), children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx79("span", { className: menuStyles.rightWrap, children: /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80("span", { className: menuStyles.rightWrap, children: /* @__PURE__ */ jsx80(
         "span",
         {
           className: menuStyles.iconWrap,
           style: { width: iconSizes23.small, minWidth: iconSizes23.small, height: iconSizes23.small },
-          children: /* @__PURE__ */ jsx79(WebIcon, { name: "chevron-right", size: iconSizes23.small, color: "currentColor", "aria-hidden": true })
+          children: /* @__PURE__ */ jsx80(WebIcon, { name: "chevron-right", size: iconSizes23.small, color: "currentColor", "aria-hidden": true })
         }
       ) })
     ] }) });
   }
 );
-var ContextMenuSubContent = forwardRef17(
+var ContextMenuSubContent = forwardRef18(
   function ContextMenuSubContent2({ className, style, onPointerDown, onMouseEnter, onMouseLeave, ...props }, ref) {
     const sub = useSub2();
     const localRef = useRef24(null);
-    const [side, setSide] = useState34("right");
+    const [side, setSide] = useState35("right");
     useLayoutEffect14(() => {
       const trigger = sub.triggerRef.current;
       const element = localRef.current;
@@ -15845,7 +15972,7 @@ var ContextMenuSubContent = forwardRef17(
     }, [sub.open, sub.triggerRef]);
     if (!sub.open || typeof document === "undefined") return null;
     return createPortal7(
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "div",
         {
           ...props,
@@ -16112,9 +16239,11 @@ export {
   SidebarPeekInset,
   SidebarPeekPanel,
   SidebarPeekPin,
+  SidebarProvider,
+  SidebarTrigger,
   Skeleton,
   Slider,
-  Slot5 as Slot,
+  Slot6 as Slot,
   Spacer,
   SpinButton,
   Spinner,
@@ -16169,6 +16298,7 @@ export {
   semanticTextClass,
   sizedComponentTextClass,
   toast,
+  useSidebar,
   useSidebarPeek
 };
 //# sourceMappingURL=index.js.map