@refineui/react 0.0.6 → 0.0.7

package/dist/index.js

@@ -114,7 +114,7 @@ var componentColorTokens = {
       border: semanticToken("borderDefault")
     },
     menu: {
-      background: semanticToken("backgroundPrimary"),
+      background: semanticToken("surfaceFrosted"),
       border: semanticToken("borderDefault"),
       title: semanticToken("foregroundPrimary"),
       itemText: semanticToken("foregroundPrimary"),
@@ -128,6 +128,10 @@ var componentColorTokens = {
     placeholder: semanticToken("foregroundPlaceholder"),
     background: semanticToken("backgroundPrimary"),
     disabledBackground: semanticToken("backgroundSurfaceDisabled"),
+    menu: {
+      background: semanticToken("surfaceFrosted"),
+      border: semanticToken("borderDefault")
+    },
     border: {
       default: semanticToken("borderDefault"),
       disabled: semanticToken("borderDisabled"),
@@ -519,15 +523,15 @@ var componentColorTokens = {
   },
   menu: {
     panel: {
-      /** Matches Menu.style panel classes */
-      background: semanticToken("backgroundPrimary"),
+      /** Frosted glass — `surfaceFrosted` fill + `surfaceFrost` blur in refineui.css */
+      background: semanticToken("surfaceFrosted"),
       border: semanticToken("borderDefault")
     },
     popover: {
       background: "transparent"
     },
     list: {
-      background: semanticToken("backgroundPrimary"),
+      background: semanticToken("surfaceFrosted"),
       border: semanticToken("borderDefault")
     },
     section: semanticToken("foregroundPrimary"),
@@ -768,7 +772,7 @@ var componentTypographyTokens = {
     link: role("bodyMd"),
     copyright: role("bodyMd")
   },
-  /** App sidebar — group labels match menu sections; links match menu rows. */
+  /** App sidebar — group labels share `captionLg` + tight py with Menu/Dropdown/Select/Command. */
   sidebar: {
     brand: role("bodyMd"),
     groupLabel: role("captionLg"),
@@ -963,7 +967,10 @@ var componentTokens = {
       foundation: semanticElevations.surface
     },
     motion: {
-      /** Indicator slide after first layout */
+      /**
+       * Indicator slide after first layout.
+       * CSS applies transform=`medium` / width=`slow` so edges arrive apart.
+       */
       indicator: motion.indicator,
       /** Item label color fade */
       itemColor: motion.fast
@@ -1594,6 +1601,7 @@ function InputOTP({
 function InputOTPSlot({
   index,
   className,
+  style,
   onChange,
   onKeyDown,
   onPaste,
@@ -1680,6 +1688,10 @@ function InputOTPSlot({
       value: char,
       "aria-label": `Digit ${index + 1} of ${maxLength}`,
       className: clsx5(inputOtpStyles.slot, inputOtpSlotSizeClass[size], className),
+      style: {
+        ...style,
+        ["--refineui-input-otp-slot-index"]: index
+      },
       onChange: onSlotChange,
       onKeyDown: onSlotKeyDown,
       onPaste: onSlotPaste,
@@ -2937,8 +2949,9 @@ var selectStyles = {
   iconWrap: "inline-flex size-refineui-icon-xsmall shrink-0 items-center justify-center",
   chevron: "shrink-0 transition-transform duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]",
   chevronOpen: "rotate-180",
-  positioner: "z-refineui-popup flex flex-col overflow-hidden",
-  contentShell: "box-border flex w-full min-h-0 flex-col overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary p-refineui-size-xx-small shadow-refineui-2 outline-none",
+  /* No overflow-hidden — it isolates descendants and kills panel `backdrop-filter`. */
+  positioner: "z-refineui-popup flex flex-col",
+  contentShell: "box-border flex w-full min-h-0 flex-col overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default p-refineui-size-xx-small shadow-refineui-2 outline-none",
   contentPopper: "h-auto max-h-[var(--refineui-select-content-available-height,100dvh)]",
   contentItemAligned: "max-h-full",
   viewportPopper: "relative flex max-h-full min-h-0 min-w-full w-full flex-col",
@@ -2948,7 +2961,7 @@ var selectStyles = {
   group: "flex flex-col gap-px",
   label: clsx27(
     componentTextClass(componentTypographyTokens.select.label),
-    "px-refineui-size-x-small py-refineui-size-x-small text-refineui-alias-foreground-tertiary"
+    "px-refineui-size-x-small py-refineui-size-xxx-small text-refineui-alias-foreground-tertiary"
   ),
   separator: "my-refineui-size-x-small h-px bg-refineui-alias-border-default",
   item: clsx27(
@@ -3603,9 +3616,6 @@ function SelectGroup({ children, className, ...props }) {
 function SelectLabel({ children, className, ...props }) {
   return /* @__PURE__ */ jsx22("div", { className: clsx28(selectStyles.label, className), ...props, children });
 }
-function SelectSection({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx22("div", { className: clsx28(selectStyles.label, className), ...props, children });
-}
 function SelectSeparator({ className, ...props }) {
   return /* @__PURE__ */ jsx22("div", { role: "separator", className: clsx28(selectStyles.separator, className), ...props });
 }
@@ -4253,7 +4263,7 @@ var COMMAND_LIST_MAX_HEIGHT = `min(60vh, ${foundationSizes2.foundationSize3200})
 var commandStyles = {
   root: clsx33(
     "flex w-full flex-col overflow-hidden outline-none",
-    "rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default",
+    "rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default",
     "bg-refineui-alias-background-primary text-refineui-alias-foreground-primary",
     "shadow-refineui-2"
   ),
@@ -4281,7 +4291,7 @@ var commandStyles = {
   group: "flex flex-col gap-refineui-size-xxx-small overflow-hidden",
   groupHeading: clsx33(
     componentTextClass(componentTypographyTokens.command.group),
-    "flex w-full items-center overflow-hidden px-refineui-size-x-small pb-refineui-size-xxx-small pt-refineui-size-x-small text-refineui-alias-foreground-tertiary"
+    "flex w-full items-center overflow-hidden px-refineui-size-x-small py-refineui-size-xxx-small text-refineui-alias-foreground-tertiary"
   ),
   separatorWrap: "flex w-full items-center px-refineui-size-x-small py-refineui-size-x-small",
   separatorLine: "h-px w-full shrink-0 bg-refineui-alias-border-default",
@@ -6991,6 +7001,7 @@ import { forwardRef as forwardRef12 } from "react";
 import { iconSizes as iconSizes11 } from "@refineui/tokens";
 
 // src/components/Breadcrumb/style.ts
+var ellipsisChip = "box-border inline-flex min-h-refineui-button-min-height-sm min-w-refineui-button-min-height-sm shrink-0 items-center justify-center rounded-refineui-large p-refineui-size-xx-small leading-none";
 var breadcrumbStyles = {
   textRow: `${componentTextClass(componentTypographyTokens.breadcrumb.row)} whitespace-nowrap`,
   root: "py-refineui-size-x-small",
@@ -7000,8 +7011,9 @@ var breadcrumbStyles = {
   page: "inline-flex items-center px-refineui-size-medium py-refineui-size-x-small font-medium text-refineui-alias-foreground-primary",
   separator: "inline-flex shrink-0 items-center",
   separatorText: "inline-flex items-center text-refineui-alias-foreground-tertiary select-none",
-  ellipsis: "box-border inline-flex min-h-refineui-button-min-height-sm shrink-0 items-center justify-center rounded-refineui-large px-refineui-size-medium py-refineui-size-x-small text-refineui-alias-foreground-tertiary leading-none",
-  ellipsisTrigger: "box-border inline-flex min-h-refineui-button-min-height-sm shrink-0 cursor-pointer items-center justify-center rounded-refineui-large border-none bg-transparent px-refineui-size-medium py-refineui-size-x-small text-refineui-alias-foreground-tertiary leading-none outline-none transition-[color,background-color] duration-[var(--refineui-motion-duration-fast)]"
+  ellipsis: `${ellipsisChip} text-refineui-alias-foreground-tertiary`,
+  /** Color only — size/layout come from Button `layout="icon" size="sm"`. */
+  ellipsisTrigger: "text-refineui-alias-foreground-tertiary"
 };
 
 // src/components/Breadcrumb/Breadcrumb.tsx
@@ -7074,52 +7086,43 @@ function BreadcrumbSeparator({ children, className, ...props }) {
     }
   );
 }
+function EllipsisIcon() {
+  return /* @__PURE__ */ jsx43(
+    WebIcon,
+    {
+      name: "more-horizontal",
+      size: iconSizes11.small,
+      color: "currentColor",
+      fallback: "\u22EF",
+      className: "items-center justify-center"
+    }
+  );
+}
 function BreadcrumbEllipsis({ className, ...props }) {
   return /* @__PURE__ */ jsx43(
     "span",
     {
       "data-refineui": "breadcrumb-ellipsis",
-      className: clsx55(
-        breadcrumbStyles.ellipsis,
-        className
-      ),
+      className: clsx55(breadcrumbStyles.ellipsis, className),
       ...props,
-      children: /* @__PURE__ */ jsx43(
-        WebIcon,
-        {
-          name: "more-horizontal",
-          size: iconSizes11.small,
-          color: "currentColor",
-          fallback: "\u22EF",
-          className: "items-center justify-center"
-        }
-      )
+      children: /* @__PURE__ */ jsx43(EllipsisIcon, {})
     }
   );
 }
 var BreadcrumbEllipsisTrigger = forwardRef12(
   function BreadcrumbEllipsisTrigger2({ className, type = "button", children, ...props }, ref) {
     return /* @__PURE__ */ jsx43(
-      "button",
+      Button,
       {
         ref,
         type,
+        variant: "ghost",
+        size: "sm",
+        layout: "icon",
         "data-refineui": "breadcrumb-ellipsis",
-        className: clsx55(
-          breadcrumbStyles.ellipsisTrigger,
-          className
-        ),
+        className: clsx55(breadcrumbStyles.ellipsisTrigger, className),
         ...props,
-        children: children ?? /* @__PURE__ */ jsx43(
-          WebIcon,
-          {
-            name: "more-horizontal",
-            size: iconSizes11.small,
-            color: "currentColor",
-            fallback: "\u22EF",
-            className: "items-center justify-center"
-          }
-        )
+        children: children ?? /* @__PURE__ */ jsx43(EllipsisIcon, {})
       }
     );
   }
@@ -8587,13 +8590,17 @@ import { resolveColorTokenValue as resolveColorTokenValue7 } from "@refineui/uti
 
 // src/components/Dropdown/style.ts
 import { clsx as clsx69 } from "clsx";
+var dropdownPanelChrome = "box-border flex w-refineui-dropdown-menu-width min-w-refineui-dropdown-menu-width flex-col overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default shadow-refineui-2 outline-none";
 var dropdownStyles = {
-  menuShell: "box-border flex w-refineui-dropdown-menu-width min-w-refineui-dropdown-menu-width max-w-[min(100vw-16px,calc(100vw-2rem))] flex-col overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary shadow-refineui-2 outline-none",
-  submenuShell: "box-border flex w-refineui-dropdown-menu-width min-w-refineui-dropdown-menu-width flex-col overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary shadow-refineui-2 outline-none",
+  menuShell: clsx69(
+    dropdownPanelChrome,
+    "max-w-[min(100vw-16px,calc(100vw-2rem))]"
+  ),
+  submenuShell: dropdownPanelChrome,
   menuViewport: "box-border flex flex-col gap-px p-refineui-size-xx-small",
   label: clsx69(
     componentTextClass(componentTypographyTokens.dropdown.label),
-    "shrink-0 px-refineui-size-x-small py-refineui-size-x-small text-refineui-alias-foreground-tertiary"
+    "shrink-0 px-refineui-size-x-small py-refineui-size-xxx-small text-refineui-alias-foreground-tertiary"
   ),
   item: clsx69(
     componentTextClass(componentTypographyTokens.dropdown.item),
@@ -9472,16 +9479,21 @@ import { Slot as Slot2, getMergeableTriggerChild as getMergeableTriggerChild2 }
 
 // src/components/Menu/style.ts
 import { clsx as clsx75 } from "clsx";
+var menuPanelChrome = "box-border flex flex-col gap-px overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default p-refineui-size-xx-small shadow-refineui-2";
 var menuStyles = {
-  /** Panel chrome — Web Kit Menu `633:4268` (fill matches Dropdown elevated panel for contrast on docs) */
-  panel: "box-border flex w-refineui-menu-panel-width flex-col gap-px overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary p-refineui-size-xx-small shadow-refineui-2",
+  /** Panel chrome — Web Kit Menu `633:4268` (fill/blur: `surfaceFrosted` + `surfaceFrost`) */
+  panel: clsx75(menuPanelChrome, "w-refineui-menu-panel-width"),
   root: "relative inline-flex items-center leading-none",
   triggerFallback: "cursor-pointer border-none bg-transparent p-0 font-inherit text-inherit",
   /** Portal shell — position/z-index from `MenuPopover` fixed style */
   popover: "z-refineui-messages",
-  list: "box-border flex w-full min-w-refineui-menu-panel-width flex-col gap-px overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary p-refineui-size-xx-small shadow-refineui-2 outline-none",
-  subPanel: "box-border flex w-refineui-menu-panel-width min-w-refineui-menu-panel-width flex-col gap-px overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary p-refineui-size-xx-small shadow-refineui-2 outline-none",
-  section: "flex w-full items-center overflow-hidden px-refineui-size-x-small py-refineui-size-x-small",
+  list: clsx75(menuPanelChrome, "w-full min-w-refineui-menu-panel-width outline-none"),
+  subPanel: clsx75(
+    menuPanelChrome,
+    "w-refineui-menu-panel-width min-w-refineui-menu-panel-width outline-none"
+  ),
+  /** Vertical density matches Sidebar `groupLabel` (`py-xxx-small`). */
+  section: "flex w-full items-center overflow-hidden px-refineui-size-x-small py-refineui-size-xxx-small",
   sectionText: clsx75(
     componentTextClass(componentTypographyTokens.menu.section),
     "text-refineui-alias-foreground-tertiary"
@@ -9664,11 +9676,11 @@ function MenuList({ className, ...props }) {
     }
   );
 }
-function MenuSection({ className, children, ...props }) {
+function MenuLabel({ className, children, ...props }) {
   return /* @__PURE__ */ jsx58(
     "div",
     {
-      "data-refineui": "menu-section",
+      "data-refineui": "menu-label",
       className: clsx76(menuStyles.section, className),
       ...props,
       children: /* @__PURE__ */ jsx58("span", { className: menuStyles.sectionText, children })
@@ -14709,7 +14721,7 @@ var CHART_VIEWBOX_HEIGHT = 320;
 var CHART_PLOT_PADDING_TOP = parseFloat(spacings7.sizeMedium);
 var CHART_PLOT_PADDING_BOTTOM = parseFloat(spacings7.sizeXXSmall);
 var CHART_PLOT_PADDING_X = parseFloat(spacings7.sizeMedium);
-var CHART_BAR_RADIUS = parseFloat(borderRadii.roundedMedium);
+var CHART_BAR_RADIUS = parseFloat(borderRadii.roundedXLarge);
 var CHART_BAR_BAND_FILL = 0.5;
 var CHART_POINT_RADIUS = parseFloat(foundationSizes3.foundationSize40);
 var CHART_POINT_STROKE = parseFloat(foundationSizes3.foundationSize20);
@@ -15359,48 +15371,68 @@ import { Slot as Slot5 } from "@refineui/utilities/react";
 
 // src/components/Collapsible/Collapsible.tsx
 import {
-  createContext as createContext27,
   forwardRef as forwardRef16,
-  useContext as useContext31,
-  useEffect as useEffect21,
+  useCallback as useCallback22,
   useId as useId18,
-  useLayoutEffect as useLayoutEffect14,
-  useRef as useRef24,
-  useState as useState32
+  useMemo as useMemo23,
+  useState as useState33
 } from "react";
 import { clsx as clsx108 } from "clsx";
-import { semanticInteraction as semanticInteraction9 } from "@refineui/tokens";
 import { Slot as Slot6 } from "@refineui/utilities/react";
-import { jsx as jsx78 } from "react/jsx-runtime";
+
+// src/components/Collapsible/context.ts
+import { createContext as createContext27, useContext as useContext31, useEffect as useEffect21, useState as useState32 } from "react";
+import { semanticInteraction as semanticInteraction9 } from "@refineui/tokens";
+import { getReducedMotionQuery as getReducedMotionQuery3 } from "@refineui/utilities/animation";
 var CollapsibleContext = createContext27(null);
-function useCollapsible() {
+function useCollapsibleContext(part) {
   const value = useContext31(CollapsibleContext);
-  if (!value) throw new Error("Collapsible parts must be used inside Collapsible.Root");
+  if (!value) throw new Error(`${part} must be used within Collapsible`);
   return value;
 }
 function usePrefersReducedMotion3() {
   const [reduce, setReduce] = useState32(false);
   useEffect21(() => {
-    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const sync = () => setReduce(query.matches);
+    const mql = window.matchMedia(getReducedMotionQuery3().replace("@media ", ""));
+    const sync = () => setReduce(mql.matches);
     sync();
-    query.addEventListener("change", sync);
-    return () => query.removeEventListener("change", sync);
+    mql.addEventListener("change", sync);
+    return () => mql.removeEventListener("change", sync);
   }, []);
   return reduce;
 }
-var CollapsibleRoot = forwardRef16(function CollapsibleRoot2({ open: openProp, defaultOpen = false, onOpenChange, asChild = false, className, children, ...props }, ref) {
-  const [uncontrolled, setUncontrolled] = useState32(defaultOpen);
+var PANEL_HEIGHT_MS2 = Number.parseFloat(semanticInteraction9.duration.panel) / 1e3;
+var PANEL_CONTENT_MS2 = Number.parseFloat(semanticInteraction9.duration.normal) / 1e3;
+var PANEL_HEIGHT_EASE2 = semanticInteraction9.easing.panel;
+var PANEL_CONTENT_EASE2 = semanticInteraction9.easing.content;
+
+// src/components/Collapsible/style.ts
+var collapsibleStyles = {
+  panelOuter: "min-h-0 overflow-hidden"
+};
+
+// 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);
   const open = openProp ?? uncontrolled;
-  const openRef = useRef24(open);
-  openRef.current = open;
   const reactId = useId18();
   const reduceMotion = usePrefersReducedMotion3();
-  const toggle = () => {
-    const next = !openRef.current;
+  const toggle = useCallback22(() => {
+    const next = !(openProp ?? uncontrolled);
     if (openProp === void 0) setUncontrolled(next);
     onOpenChange?.(next);
-  };
+  }, [onOpenChange, openProp, uncontrolled]);
+  const contextValue = useMemo23(
+    () => ({
+      open,
+      toggle,
+      contentId: `${reactId}-content`,
+      triggerId: `${reactId}-trigger`,
+      reduceMotion
+    }),
+    [open, reactId, reduceMotion, toggle]
+  );
   const shared = {
     ...props,
     ref,
@@ -15408,94 +15440,73 @@ var CollapsibleRoot = forwardRef16(function CollapsibleRoot2({ open: openProp, d
     "data-refineui": "collapsible",
     className
   };
-  return /* @__PURE__ */ jsx78(
-    CollapsibleContext.Provider,
-    {
-      value: {
-        open,
-        toggle,
-        contentId: `${reactId}-content`,
-        triggerId: `${reactId}-trigger`,
-        reduceMotion
-      },
-      children: asChild ? /* @__PURE__ */ jsx78(Slot6, { ...shared, children }) : /* @__PURE__ */ jsx78("div", { ...shared, children })
-    }
-  );
-});
-var CollapsibleTrigger = forwardRef16(function CollapsibleTrigger2({ asChild = false, onClick, className, children, ...props }, ref) {
-  const { open, toggle, contentId, triggerId } = useCollapsible();
-  const shared = {
-    ...props,
-    ref,
-    id: triggerId,
-    "aria-expanded": open,
-    "aria-controls": contentId,
-    "data-state": open ? "open" : "closed",
-    "data-refineui": "collapsible-trigger",
-    className,
-    onClick: (event) => {
-      onClick?.(event);
-      if (!event.defaultPrevented) toggle();
-    }
-  };
-  if (asChild) return /* @__PURE__ */ jsx78(Slot6, { ...shared, children });
-  return /* @__PURE__ */ jsx78("button", { ...shared, type: "button", children });
+  return /* @__PURE__ */ jsx78(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ jsx78(Slot6, { ...shared, children }) : /* @__PURE__ */ jsx78("div", { ...shared, children }) });
 });
-var CollapsibleContent = forwardRef16(function CollapsibleContent2({ className, children, style, ...props }, ref) {
-  const { open, contentId, triggerId, reduceMotion } = useCollapsible();
-  const innerRef = useRef24(null);
-  const [size, setSize] = useState32({ height: 0, width: 0 });
-  useLayoutEffect14(() => {
-    const node = innerRef.current;
-    if (!node) return;
-    const measure = () => {
-      setSize({ height: node.scrollHeight, width: node.scrollWidth });
-    };
-    measure();
-    const observer = new ResizeObserver(measure);
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [children, open]);
-  const clipStyle = {
-    ["--refineui-collapsible-content-height"]: `${size.height}px`,
-    ["--refineui-collapsible-content-width"]: `${size.width}px`,
-    height: open ? size.height : 0,
-    overflow: "hidden",
-    transition: reduceMotion ? void 0 : `height ${semanticInteraction9.duration.panel} ${semanticInteraction9.easing.panel}`
-  };
-  return /* @__PURE__ */ jsx78(
-    "div",
-    {
+var CollapsibleTrigger = forwardRef16(
+  function CollapsibleTrigger2({ asChild = false, onClick, className, children, ...props }, ref) {
+    const { open, toggle, contentId, triggerId } = useCollapsibleContext("CollapsibleTrigger");
+    const shared = {
       ...props,
       ref,
-      id: contentId,
-      role: "region",
-      "aria-labelledby": triggerId,
-      "aria-hidden": !open,
+      id: triggerId,
+      "aria-expanded": open,
+      "aria-controls": contentId,
       "data-state": open ? "open" : "closed",
-      "data-refineui": "collapsible-content",
-      style: clipStyle,
-      children: /* @__PURE__ */ jsx78("div", { ref: innerRef, className: clsx108(className), style, children })
-    }
-  );
-});
-var Collapsible = Object.assign(CollapsibleRoot, {
-  Root: CollapsibleRoot,
-  Trigger: CollapsibleTrigger,
-  Content: CollapsibleContent
-});
+      "data-refineui": "collapsible-trigger",
+      className,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) toggle();
+      }
+    };
+    if (asChild) return /* @__PURE__ */ jsx78(Slot6, { ...shared, children });
+    return /* @__PURE__ */ jsx78("button", { ...shared, type: "button", children });
+  }
+);
+var CollapsibleContent = forwardRef16(
+  function CollapsibleContent2({ className, children, style, ...props }, ref) {
+    const { open, contentId, triggerId, reduceMotion } = useCollapsibleContext("CollapsibleContent");
+    const gridStyle = {
+      display: "grid",
+      gridTemplateRows: open ? "1fr" : "0fr",
+      transition: reduceMotion ? void 0 : `grid-template-rows ${PANEL_HEIGHT_MS2}s ${PANEL_HEIGHT_EASE2}`
+    };
+    const innerMotionStyle = {
+      opacity: open ? 1 : 0,
+      transform: open ? "translate3d(0, 0, 0)" : "translate3d(0, calc(-1 * var(--refineui-spacing-size-x-small)), 0)",
+      transition: reduceMotion ? void 0 : `opacity ${PANEL_CONTENT_MS2}s ${PANEL_CONTENT_EASE2}, transform ${PANEL_CONTENT_MS2}s ${PANEL_CONTENT_EASE2}`,
+      pointerEvents: open ? void 0 : "none",
+      ...style
+    };
+    return /* @__PURE__ */ jsx78(
+      "div",
+      {
+        ...props,
+        ref,
+        id: contentId,
+        role: "region",
+        "aria-labelledby": triggerId,
+        "aria-hidden": !open,
+        "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 }) })
+      }
+    );
+  }
+);
 
 // src/components/ContextMenu/ContextMenu.tsx
 import {
   createContext as createContext28,
   forwardRef as forwardRef17,
-  useCallback as useCallback22,
+  useCallback as useCallback23,
   useContext as useContext32,
   useEffect as useEffect22,
-  useLayoutEffect as useLayoutEffect15,
-  useMemo as useMemo23,
-  useRef as useRef25,
-  useState as useState33
+  useLayoutEffect as useLayoutEffect14,
+  useMemo as useMemo24,
+  useRef as useRef24,
+  useState as useState34
 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { clsx as clsx109 } from "clsx";
@@ -15509,7 +15520,7 @@ var MenuContext2 = createContext28(null);
 var SubContext = createContext28(null);
 function useMenu() {
   const value = useContext32(MenuContext2);
-  if (!value) throw new Error("Context menu parts must be used inside ContextMenu.Root");
+  if (!value) throw new Error("Context menu parts must be used within ContextMenu");
   return value;
 }
 function placeInView(element, x, y) {
@@ -15523,28 +15534,28 @@ function placeInView(element, x, y) {
   element.style.left = `${left}px`;
   element.style.top = `${top}px`;
 }
-function ContextMenuRoot({ modal = true, onOpenChange, children }) {
+function ContextMenu({ modal = true, onOpenChange, children }) {
   void modal;
-  const [open, setOpen] = useState33(false);
-  const [point, setPoint] = useState33({ x: 0, y: 0 });
-  const openRef = useRef25(false);
-  const onOpenChangeRef = useRef25(onOpenChange);
+  const [open, setOpen] = useState34(false);
+  const [point, setPoint] = useState34({ x: 0, y: 0 });
+  const openRef = useRef24(false);
+  const onOpenChangeRef = useRef24(onOpenChange);
   openRef.current = open;
   onOpenChangeRef.current = onOpenChange;
-  const close = useCallback22(() => {
+  const close = useCallback23(() => {
     if (!openRef.current) return;
     openRef.current = false;
     setOpen(false);
     onOpenChangeRef.current?.(false);
   }, []);
-  const openAt = useCallback22((x, y) => {
+  const openAt = useCallback23((x, y) => {
     setPoint({ x, y });
     const wasOpen = openRef.current;
     openRef.current = true;
     setOpen(true);
     if (!wasOpen) onOpenChangeRef.current?.(true);
   }, []);
-  const value = useMemo23(() => ({ open, point, openAt, close }), [open, point, openAt, close]);
+  const value = useMemo24(() => ({ open, point, openAt, close }), [open, point, openAt, close]);
   return /* @__PURE__ */ jsx79(MenuContext2.Provider, { value, children });
 }
 var ContextMenuTrigger = forwardRef17(function ContextMenuTrigger2({ asChild = false, onContextMenu, children, ...props }, ref) {
@@ -15568,9 +15579,9 @@ function ContextMenuPortal({ children }) {
 }
 var ContextMenuContent = forwardRef17(function ContextMenuContent2({ className, style, onPointerDown, children, ...props }, ref) {
   const { open, point, close } = useMenu();
-  const localRef = useRef25(null);
-  const [shouldRender, setShouldRender] = useState33(open);
-  const [isClosing, setIsClosing] = useState33(false);
+  const localRef = useRef24(null);
+  const [shouldRender, setShouldRender] = useState34(open);
+  const [isClosing, setIsClosing] = useState34(false);
   useEffect22(() => {
     if (open) {
       setShouldRender(true);
@@ -15585,7 +15596,7 @@ var ContextMenuContent = forwardRef17(function ContextMenuContent2({ className,
     }, CLOSE_MS);
     return () => window.clearTimeout(timeout);
   }, [open, shouldRender]);
-  useLayoutEffect15(() => {
+  useLayoutEffect14(() => {
     if (!shouldRender || !localRef.current) return;
     placeInView(localRef.current, point.x, point.y);
   }, [shouldRender, point.x, point.y]);
@@ -15727,19 +15738,19 @@ var ContextMenuSeparator = forwardRef17(
     );
   }
 );
-function ContextMenuSection({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx79("div", { "data-refineui": "menu-section", className: clsx109(menuStyles.section, className), ...props, children: /* @__PURE__ */ jsx79("span", { className: menuStyles.sectionText, children }) });
+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 }) });
 }
 function ContextMenuSub({ children }) {
-  const [open, setOpen] = useState33(false);
-  const triggerRef = useRef25(null);
-  const timer = useRef25(null);
+  const [open, setOpen] = useState34(false);
+  const triggerRef = useRef24(null);
+  const timer = useRef24(null);
   const clear = () => {
     if (timer.current != null) window.clearTimeout(timer.current);
     timer.current = null;
   };
   useEffect22(() => clear, []);
-  const value = useMemo23(
+  const value = useMemo24(
     () => ({
       open,
       triggerRef,
@@ -15758,7 +15769,7 @@ function ContextMenuSub({ children }) {
 }
 function useSub2() {
   const value = useContext32(SubContext);
-  if (!value) throw new Error("ContextMenu.SubTrigger must be used inside ContextMenu.Sub");
+  if (!value) throw new Error("ContextMenuSubTrigger must be used within ContextMenuSub");
   return value;
 }
 var ContextMenuSubTrigger = forwardRef17(
@@ -15825,9 +15836,9 @@ var ContextMenuSubTrigger = forwardRef17(
 var ContextMenuSubContent = forwardRef17(
   function ContextMenuSubContent2({ className, style, onPointerDown, onMouseEnter, onMouseLeave, ...props }, ref) {
     const sub = useSub2();
-    const localRef = useRef25(null);
-    const [side, setSide] = useState33("right");
-    useLayoutEffect15(() => {
+    const localRef = useRef24(null);
+    const [side, setSide] = useState34("right");
+    useLayoutEffect14(() => {
       const trigger = sub.triggerRef.current;
       const element = localRef.current;
       if (!sub.open || !trigger || !element) return;
@@ -15881,18 +15892,6 @@ var ContextMenuSubContent = forwardRef17(
     );
   }
 );
-var ContextMenu = Object.assign(ContextMenuRoot, {
-  Root: ContextMenuRoot,
-  Trigger: ContextMenuTrigger,
-  Portal: ContextMenuPortal,
-  Content: ContextMenuContent,
-  Item: ContextMenuItem,
-  Section: ContextMenuSection,
-  Separator: ContextMenuSeparator,
-  Sub: ContextMenuSub,
-  SubTrigger: ContextMenuSubTrigger,
-  SubContent: ContextMenuSubContent
-});
 export {
   Accordion,
   AccordionContent,
@@ -15964,7 +15963,6 @@ export {
   Chip,
   Collapsible,
   CollapsibleContent,
-  CollapsibleRoot,
   CollapsibleTrigger,
   Command,
   CommandDialog,
@@ -15980,9 +15978,8 @@ export {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuLabel,
   ContextMenuPortal,
-  ContextMenuRoot,
-  ContextMenuSection,
   ContextMenuSeparator,
   ContextMenuSub,
   ContextMenuSubContent,
@@ -16050,9 +16047,9 @@ export {
   Menu,
   MenuDivider,
   MenuItem,
+  MenuLabel,
   MenuList,
   MenuPopover,
-  MenuSection,
   MenuSub,
   MenuSubContent,
   MenuSubTrigger,
@@ -16109,7 +16106,6 @@ export {
   SelectPortal,
   SelectScrollDownButton,
   SelectScrollUpButton,
-  SelectSection,
   SelectSeparator,
   SelectTrigger,
   SelectValue,