@dxos/react-ui 0.7.4 → 0.7.5-main.937ce75

package/dist/lib/browser/index.mjs

@@ -572,7 +572,7 @@ var ButtonGroup = /* @__PURE__ */ forwardRef7(({ children, elevation: propsEleva
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-import React10, { forwardRef as forwardRef9 } from "react";
+import React10, { forwardRef as forwardRef9, useState as useState3 } from "react";
 
 // packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
 import { Provider as TooltipProviderPrimitive, Root as TooltipRootPrimitive, TooltipContent as TooltipContentPrimitive, TooltipTrigger as TooltipTriggerPrimitive, TooltipPortal as TooltipPortalPrimitive, TooltipArrow as TooltipArrowPrimitive } from "@radix-ui/react-tooltip";
@@ -591,11 +591,14 @@ var TooltipArrow = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwar
 });
 var TooltipContent = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
+  const elevation = useElevationContext();
   return /* @__PURE__ */ React9.createElement(TooltipContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
-    className: tx("tooltip.content", "tooltip", {}, classNames),
+    className: tx("tooltip.content", "tooltip", {
+      elevation
+    }, classNames),
     ref: forwardedRef
   });
 });
@@ -609,20 +612,31 @@ var Tooltip = {
 };
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ tooltipPortal = true, tooltipZIndex: zIndex, ...props }, forwardedRef) => {
+var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ tooltipPortal = true, tooltipZIndex: zIndex, suppressNextTooltip, ...props }, forwardedRef) => {
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState3(false);
   const content = /* @__PURE__ */ React10.createElement(Tooltip.Content, zIndex && {
     style: {
       zIndex
     }
   }, props.label, /* @__PURE__ */ React10.createElement(Tooltip.Arrow, null));
-  return /* @__PURE__ */ React10.createElement(Tooltip.Root, null, /* @__PURE__ */ React10.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React10.createElement(Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip?.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React10.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React10.createElement(LabelledIconButton, {
     ...props,
     ref: forwardedRef
   })), tooltipPortal ? /* @__PURE__ */ React10.createElement(Tooltip.Portal, null, content) : content);
 });
-var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ icon, size, iconOnly, label, classNames, iconClassNames, ...props }, forwardedRef) => {
+var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React10.createElement(Button, {
     ...props,
@@ -634,7 +648,10 @@ var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ icon, size, iconOnly, la
     classNames: iconClassNames
   }), /* @__PURE__ */ React10.createElement("span", {
     className: iconOnly ? "sr-only" : void 0
-  }, label));
+  }, label), caretDown && /* @__PURE__ */ React10.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }));
 });
 var IconButton = /* @__PURE__ */ forwardRef9((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ React10.createElement(IconOnlyButton, {
   ...props,
@@ -687,7 +704,7 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef11(({ variant, elevation, densit
 });
 
 // packages/ui/react-ui/src/components/Clipboard/ClipboardProvider.tsx
-import React13, { createContext as createContext4, useCallback, useContext as useContext6, useState as useState3 } from "react";
+import React13, { createContext as createContext4, useCallback, useContext as useContext6, useState as useState4 } from "react";
 var ClipboardContext = /* @__PURE__ */ createContext4({
   textValue: "",
   setTextValue: async (_) => {
@@ -695,7 +712,7 @@ var ClipboardContext = /* @__PURE__ */ createContext4({
 });
 var useClipboard = () => useContext6(ClipboardContext);
 var ClipboardProvider = ({ children }) => {
-  const [textValue, setInternalTextValue] = useState3("");
+  const [textValue, setInternalTextValue] = useState4("");
   const setTextValue = useCallback(async (nextValue) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
@@ -709,7 +726,7 @@ var ClipboardProvider = ({ children }) => {
 };
 
 // packages/ui/react-ui/src/components/Clipboard/CopyButton.tsx
-import React17, { useState as useState4 } from "react";
+import React17, { useState as useState5 } from "react";
 import { mx } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
@@ -745,7 +762,7 @@ var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React15.cre
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 var ThemeContext = /* @__PURE__ */ createContext7(void 0);
-var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", rootElevation = "base", ...rest }) => {
+var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", ...rest }) => {
   useEffect3(() => {
     if (document.defaultView) {
       const kb = createKeyborg(document.defaultView);
@@ -765,7 +782,7 @@ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx
     resourceExtensions,
     appNs
   }, /* @__PURE__ */ React16.createElement(ElevationProvider, {
-    elevation: rootElevation
+    elevation: "base"
   }, /* @__PURE__ */ React16.createElement(DensityProvider, {
     density: rootDensity
   }, children))));
@@ -817,15 +834,14 @@ var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) =
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   const label = isCopied ? t("copy success label") : t("copy label");
-  const [open, setOpen] = useState4(false);
+  const [open, setOpen] = useState5(false);
   return /* @__PURE__ */ React17.createElement(Tooltip.Root, {
     delayDuration: 1500,
     open,
     onOpenChange: setOpen
   }, /* @__PURE__ */ React17.createElement(Tooltip.Portal, null, /* @__PURE__ */ React17.createElement(Tooltip.Content, {
     side: "bottom",
-    sideOffset: 12,
-    classNames: "z-30"
+    sideOffset: 12
   }, /* @__PURE__ */ React17.createElement("span", null, label), /* @__PURE__ */ React17.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React17.createElement(Tooltip.Trigger, {
     "aria-label": label,
     ...props,
@@ -856,7 +872,9 @@ var Clipboard = {
 import { createContext as createContext8 } from "@radix-ui/react-context";
 import { Root as DialogRootPrimitive, DialogTrigger as DialogTriggerPrimitive, DialogPortal as DialogPortalPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogTitle as DialogTitlePrimitive, DialogDescription as DialogDescriptionPrimitive, DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive } from "@radix-ui/react-dialog";
 import React18, { forwardRef as forwardRef12 } from "react";
-var DialogRoot = DialogRootPrimitive;
+var DialogRoot = (props) => /* @__PURE__ */ React18.createElement(ElevationProvider, {
+  elevation: "dialog"
+}, /* @__PURE__ */ React18.createElement(DialogRootPrimitive, props));
 var DialogTrigger = DialogTriggerPrimitive;
 var DialogPortal = DialogPortalPrimitive;
 var DialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
@@ -906,9 +924,7 @@ var DialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...pro
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React18.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
+  }, children);
 });
 DialogContent.displayName = DIALOG_CONTENT_NAME;
 var Dialog = {
@@ -926,7 +942,9 @@ var Dialog = {
 import { Root as AlertDialogRootPrimitive, AlertDialogTrigger as AlertDialogTriggerPrimitive, AlertDialogPortal as AlertDialogPortalPrimitive, AlertDialogOverlay as AlertDialogOverlayPrimitive, AlertDialogTitle as AlertDialogTitlePrimitive, AlertDialogDescription as AlertDialogDescriptionPrimitive, AlertDialogAction as AlertDialogActionPrimitive, AlertDialogCancel as AlertDialogCancelPrimitive, AlertDialogContent as AlertDialogContentPrimitive } from "@radix-ui/react-alert-dialog";
 import { createContext as createContext9 } from "@radix-ui/react-context";
 import React19, { forwardRef as forwardRef13 } from "react";
-var AlertDialogRoot = AlertDialogRootPrimitive;
+var AlertDialogRoot = (props) => /* @__PURE__ */ React19.createElement(ElevationProvider, {
+  elevation: "dialog"
+}, /* @__PURE__ */ React19.createElement(AlertDialogRootPrimitive, props));
 var AlertDialogTrigger = AlertDialogTriggerPrimitive;
 var AlertDialogPortal = AlertDialogPortalPrimitive;
 var AlertDialogCancel = AlertDialogCancelPrimitive;
@@ -977,9 +995,7 @@ var AlertDialogContent = /* @__PURE__ */ forwardRef13(({ classNames, children, .
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React19.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
+  }, children);
 });
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
 var AlertDialog = {
@@ -1004,14 +1020,15 @@ var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuContent = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
+  const elevation = useElevationContext();
   return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Content, {
     collisionPadding: 8,
     ...props,
-    className: tx("menu.content", "menu", {}, classNames),
+    className: tx("menu.content", "menu", {
+      elevation
+    }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React20.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
+  }, children);
 });
 var ContextMenuViewport = /* @__PURE__ */ forwardRef14(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
@@ -1216,6 +1233,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) =>
   const { __scopeDropdownMenu, classNames, ...contentProps } = props;
   const { tx } = useThemeContext();
   const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
+  const elevation = useElevationContext();
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const hasInteractedOutsideRef = useRef(false);
   return /* @__PURE__ */ React21.createElement(MenuPrimitive.Content, {
@@ -1239,7 +1257,9 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) =>
         hasInteractedOutsideRef.current = true;
       }
     }),
-    className: tx("menu.content", "menu", {}, classNames),
+    className: tx("menu.content", "menu", {
+      elevation
+    }, classNames),
     style: {
       ...props.style,
       // re-namespace exposed content custom properties
@@ -1433,11 +1453,9 @@ var DropdownMenu = {
 var useDropdownMenuMenuScope = useMenuScope;
 
 // packages/ui/react-ui/src/components/Input/Input.tsx
-import { Check, Minus } from "@phosphor-icons/react";
-import { Root as CheckboxPrimitive, Indicator as CheckboxIndicatorPrimitive } from "@radix-ui/react-checkbox";
-import { Root as SwitchPrimitive, Thumb as SwitchThumbPrimitive } from "@radix-ui/react-switch";
+import { Root as CheckboxPrimitive } from "@radix-ui/react-checkbox";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React22, { forwardRef as forwardRef16, Fragment, useCallback as useCallback3 } from "react";
+import React22, { forwardRef as forwardRef16, useCallback as useCallback3 } from "react";
 import { InputRoot, PinInput as PinInputPrimitive, TextInput as TextInputPrimitive, TextArea as TextAreaPrimitive, useInputContext, INPUT_NAME, Description as DescriptionPrimitive, DescriptionAndValidation as DescriptionAndValidationPrimitive, Label as LabelPrimitive, Validation as ValidationPrimitive } from "@dxos/react-input";
 var Label3 = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
@@ -1563,7 +1581,6 @@ var Checkbox = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsCheck
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = useThemeContext();
-  const Icon3 = checked === "indeterminate" ? Minus : checked ? Check : Fragment;
   return /* @__PURE__ */ React22.createElement(CheckboxPrimitive, {
     ...props,
     checked,
@@ -1578,42 +1595,37 @@ var Checkbox = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsCheck
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(CheckboxIndicatorPrimitive, {
-    asChild: true
-  }, /* @__PURE__ */ React22.createElement(Icon3, checked && {
-    weight,
-    className: tx("input.checkboxIndicator", "input--checkbox__indicator", {
-      size
+  }, /* @__PURE__ */ React22.createElement(Icon, {
+    icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
+    classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
+      size,
+      checked
     })
-  })));
+  }));
 });
-var Switch = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
+var Switch = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState2({
     prop: propsChecked,
-    defaultProp: propsDefaultChecked,
+    defaultProp: propsDefaultChecked ?? false,
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React22.createElement(SwitchPrimitive, {
-    ...props,
+  return /* @__PURE__ */ React22.createElement("input", {
+    type: "checkbox",
+    className: "ch-checkbox--switch ch-focus-ring",
     checked,
-    onCheckedChange,
+    onChange: (event) => {
+      onCheckedChange(event.target.checked);
+    },
     id,
     "aria-describedby": descriptionId,
+    ...props,
     ...validationValence === "error" && {
       "aria-invalid": "true",
       "aria-errormessage": errorMessageId
     },
-    className: tx("input.switch", "input--switch", {
-      size
-    }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(SwitchThumbPrimitive, {
-    className: tx("input.switchThumb", "input--switch__thumb", {
-      size
-    })
-  }));
+  });
 });
 var Input = {
   Root: InputRoot,
@@ -1631,14 +1643,54 @@ var Input = {
 // packages/ui/react-ui/src/components/Lists/List.tsx
 import { CaretDown, CaretRight } from "@phosphor-icons/react";
 import { Slot as Slot8 } from "@radix-ui/react-slot";
-import React23, { forwardRef as forwardRef17 } from "react";
+import React24, { forwardRef as forwardRef17 } from "react";
 import { List as ListPrimitive, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, ListItemCollapsibleContent, ListItem as ListPrimitiveItem, LIST_NAME, LIST_ITEM_NAME, useListContext, useListItemContext } from "@dxos/react-list";
+
+// packages/ui/react-ui/src/components/Lists/ListDropIndicator.tsx
+import React23 from "react";
+var edgeToOrientationMap = {
+  top: "horizontal",
+  bottom: "horizontal",
+  left: "vertical",
+  right: "vertical"
+};
+var orientationStyles = {
+  horizontal: "h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]",
+  vertical: "w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]"
+};
+var edgeStyles = {
+  top: "top-[--line-offset] before:top-[--offset-terminal]",
+  right: "right-[--line-offset] before:right-[--offset-terminal]",
+  bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
+  left: "left-[--line-offset] before:left-[--offset-terminal]"
+};
+var strokeSize = 2;
+var terminalSize = 8;
+var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+var ListDropIndicator = ({ edge, gap = 0 }) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
+  const orientation = edgeToOrientationMap[edge];
+  return /* @__PURE__ */ React23.createElement("div", {
+    role: "none",
+    style: {
+      "--line-thickness": `${strokeSize}px`,
+      "--line-offset": `${lineOffset}`,
+      "--terminal-size": `${terminalSize}px`,
+      "--terminal-radius": `${terminalSize / 2}px`,
+      "--negative-terminal-size": `-${terminalSize}px`,
+      "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
+    },
+    className: `absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
+  });
+};
+
+// packages/ui/react-ui/src/components/Lists/List.tsx
 var List = /* @__PURE__ */ forwardRef17(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
-  return /* @__PURE__ */ React23.createElement(DensityProvider, {
+  return /* @__PURE__ */ React24.createElement(DensityProvider, {
     density
-  }, /* @__PURE__ */ React23.createElement(ListPrimitive, {
+  }, /* @__PURE__ */ React24.createElement(ListPrimitive, {
     ...props,
     className: tx("list.root", "list", {}, classNames),
     ref: forwardedRef
@@ -1648,7 +1700,7 @@ var ListItemEndcap = /* @__PURE__ */ forwardRef17(({ children, classNames, asChi
   const Root5 = asChild ? Slot8 : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(Root5, {
+  return /* @__PURE__ */ React24.createElement(Root5, {
     ...!asChild && {
       role: "none"
     },
@@ -1662,7 +1714,7 @@ var ListItemEndcap = /* @__PURE__ */ forwardRef17(({ children, classNames, asChi
 var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     role: "none",
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
@@ -1673,7 +1725,7 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
 var ListItemHeading = /* @__PURE__ */ forwardRef17(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React23.createElement(ListPrimitiveItemHeading, {
+  return /* @__PURE__ */ React24.createElement(ListPrimitiveItemHeading, {
     ...props,
     className: tx("list.item.heading", "list__listItem__heading", {
       density
@@ -1686,13 +1738,13 @@ var ListItemOpenTrigger = /* @__PURE__ */ forwardRef17(({ __listItemScope, class
   const density = useDensityContext();
   const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
   const Icon3 = open ? CaretDown : CaretRight;
-  return /* @__PURE__ */ React23.createElement(ListPrimitiveItemOpenTrigger, {
+  return /* @__PURE__ */ React24.createElement(ListPrimitiveItemOpenTrigger, {
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ React23.createElement(Icon3, {
+  }, children || /* @__PURE__ */ React24.createElement(Icon3, {
     weight: "bold",
     className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
   }));
@@ -1700,7 +1752,7 @@ var ListItemOpenTrigger = /* @__PURE__ */ forwardRef17(({ __listItemScope, class
 var ListItemRoot = /* @__PURE__ */ forwardRef17(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React23.createElement(ListPrimitiveItem, {
+  return /* @__PURE__ */ React24.createElement(ListPrimitiveItem, {
     ...props,
     className: tx("list.item.root", "list__listItem", {
       density,
@@ -1715,27 +1767,75 @@ var ListItem = {
   Heading: ListItemHeading,
   OpenTrigger: ListItemOpenTrigger,
   CollapsibleContent: ListItemCollapsibleContent,
-  MockOpenTrigger: MockListItemOpenTrigger
+  MockOpenTrigger: MockListItemOpenTrigger,
+  DropIndicator: ListDropIndicator
+};
+
+// packages/ui/react-ui/src/components/Lists/Tree.tsx
+import React26, { forwardRef as forwardRef18 } from "react";
+
+// packages/ui/react-ui/src/components/Lists/TreeDropIndicator.tsx
+import React25 from "react";
+var edgeToOrientationMap2 = {
+  "reorder-above": "sibling",
+  "reorder-below": "sibling",
+  "make-child": "child",
+  reparent: "child"
+};
+var orientationStyles2 = {
+  // TODO(wittjosiah): Stop using left/right here.
+  sibling: "bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]",
+  child: "is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible"
+};
+var instructionStyles = {
+  "reorder-above": "block-start-[--line-offset] before:block-start-[--offset-terminal]",
+  "reorder-below": "block-end-[--line-offset] before:block-end-[--offset-terminal]",
+  "make-child": "border-accentSurface",
+  // TODO(wittjosiah): This is not occurring in the current implementation.
+  reparent: ""
+};
+var strokeSize2 = 2;
+var terminalSize2 = 8;
+var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
+var TreeDropIndicator = ({ instruction, gap = 0 }) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
+  const isBlocked = instruction.type === "instruction-blocked";
+  const desiredInstruction = isBlocked ? instruction.desired : instruction;
+  const orientation = edgeToOrientationMap2[desiredInstruction.type];
+  if (isBlocked) {
+    return null;
+  }
+  return /* @__PURE__ */ React25.createElement("div", {
+    style: {
+      "--line-thickness": `${strokeSize2}px`,
+      "--line-offset": `${lineOffset}`,
+      "--terminal-size": `${terminalSize2}px`,
+      "--terminal-radius": `${terminalSize2 / 2}px`,
+      "--negative-terminal-size": `-${terminalSize2}px`,
+      "--offset-terminal": `${offsetToAlignTerminalWithLine2}px`,
+      "--horizontal-indent": `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`
+    },
+    className: `absolute z-10 pointer-events-none before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles2[orientation]} ${instructionStyles[desiredInstruction.type]}`
+  });
 };
 
 // packages/ui/react-ui/src/components/Lists/Tree.tsx
-import React24, { forwardRef as forwardRef18 } from "react";
 var TreeRoot = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
-  return /* @__PURE__ */ React24.createElement(List, {
+  return /* @__PURE__ */ React26.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
 var TreeBranch = /* @__PURE__ */ forwardRef18(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ React24.createElement(List, {
+  return /* @__PURE__ */ React26.createElement(List, {
     ...props,
     "aria-labelledby": headingId,
     ref: forwardedRef
   });
 });
 var TreeItemRoot = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
-  return /* @__PURE__ */ React24.createElement(ListItem.Root, {
+  return /* @__PURE__ */ React26.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -1754,7 +1854,8 @@ var TreeItem = {
   Heading: TreeItemHeading,
   Body: TreeItemBody,
   OpenTrigger: TreeItemOpenTrigger,
-  MockOpenTrigger: MockTreeItemOpenTrigger
+  MockOpenTrigger: MockTreeItemOpenTrigger,
+  DropIndicator: TreeDropIndicator
 };
 
 // packages/ui/react-ui/src/components/Lists/Treegrid.tsx
@@ -1763,7 +1864,7 @@ import { createContextScope as createContextScope2 } from "@radix-ui/react-conte
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React25, { forwardRef as forwardRef19 } from "react";
+import React27, { forwardRef as forwardRef19 } from "react";
 var TREEGRID_ROW_NAME = "TreegridRow";
 var [createTreegridRowContext, createTreegridRowScope] = createContextScope2(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
@@ -1777,7 +1878,7 @@ var TreegridRoot = /* @__PURE__ */ forwardRef19(({ asChild, classNames, children
     tabbable: false,
     circular: true
   });
-  return /* @__PURE__ */ React25.createElement(Root5, {
+  return /* @__PURE__ */ React27.createElement(Root5, {
     role: "treegrid",
     ...arrowNavigationAttrs,
     ...props,
@@ -1808,11 +1909,11 @@ var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, c
     circular: false,
     memorizeCurrent: false
   });
-  return /* @__PURE__ */ React25.createElement(TreegridRowProvider, {
+  return /* @__PURE__ */ React27.createElement(TreegridRowProvider, {
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ React25.createElement(Root5, {
+  }, /* @__PURE__ */ React27.createElement(Root5, {
     role: "row",
     "aria-level": level,
     className: tx("treegrid.row", "treegrid__row", {
@@ -1827,7 +1928,7 @@ var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, c
     ...props,
     id,
     ref: forwardedRef
-  }, /* @__PURE__ */ React25.createElement("div", {
+  }, /* @__PURE__ */ React27.createElement("div", {
     role: "none",
     className: "contents",
     ...arrowGroupAttrs
@@ -1835,7 +1936,7 @@ var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, c
 });
 var TreegridCell = /* @__PURE__ */ forwardRef19(({ classNames, children, indent, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement("div", {
+  return /* @__PURE__ */ React27.createElement("div", {
     role: "gridcell",
     className: tx("treegrid.cell", "treegrid__cell", {
       indent
@@ -1862,12 +1963,12 @@ import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React26, { forwardRef as forwardRef20, useCallback as useCallback5, useEffect as useEffect6, useRef as useRef2, useState as useState6 } from "react";
+import React28, { forwardRef as forwardRef20, useCallback as useCallback5, useEffect as useEffect6, useRef as useRef2, useState as useState7 } from "react";
 import { log } from "@dxos/log";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Main/useSwipeToDismiss.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState6 } from "react";
 var MotionState;
 (function(MotionState2) {
   MotionState2[MotionState2["IDLE"] = 0] = "IDLE";
@@ -1882,8 +1983,8 @@ var useSwipeToDismiss = (ref, {
   /* side = 'inline-start' */
 }) => {
   const $root = ref.current;
-  const [motionState, setMotionState] = useState5(0);
-  const [gestureStartX, setGestureStartX] = useState5(0);
+  const [motionState, setMotionState] = useState6(0);
+  const [gestureStartX, setGestureStartX] = useState6(0);
   const setIdle = useCallback4(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
@@ -2005,7 +2106,7 @@ var [MainProvider, useMainContext] = createContext10(MAIN_NAME, {
   setNavigationSidebarOpen: (nextOpen) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 81,
+      L: 80,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -2014,7 +2115,7 @@ var [MainProvider, useMainContext] = createContext10(MAIN_NAME, {
   setComplementarySidebarOpen: (nextOpen) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 86,
+      L: 85,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -2064,7 +2165,7 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
     defaultProp: defaultComplementarySidebarOpen,
     onChange: onComplementarySidebarOpenChange
   });
-  const [resizing, setResizing] = useState6(false);
+  const [resizing, setResizing] = useState7(false);
   const resizeInterval = useRef2(null);
   const handleResize = useCallback5(() => {
     setResizing(true);
@@ -2082,7 +2183,7 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
   }, [
     handleResize
   ]);
-  return /* @__PURE__ */ React26.createElement(MainProvider, {
+  return /* @__PURE__ */ React28.createElement(MainProvider, {
     ...props,
     navigationSidebarOpen,
     setNavigationSidebarOpen,
@@ -2114,10 +2215,10 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
     props.onKeyDown
   ]);
   const Root5 = isLg ? Primitive9.div : DialogContent2;
-  return /* @__PURE__ */ React26.createElement(DialogRoot2, {
+  return /* @__PURE__ */ React28.createElement(DialogRoot2, {
     open,
     modal: false
-  }, /* @__PURE__ */ React26.createElement(Root5, {
+  }, /* @__PURE__ */ React28.createElement(Root5, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -2133,14 +2234,12 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
       inert: "true"
     },
     ref
-  }, /* @__PURE__ */ React26.createElement(ElevationProvider, {
-    elevation: "group"
-  }, children)));
+  }, children));
 });
 var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
   const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
-  return /* @__PURE__ */ React26.createElement(MainSidebar, {
+  return /* @__PURE__ */ React28.createElement(MainSidebar, {
     ...mover,
     ...props,
     open: navigationSidebarOpen,
@@ -2154,7 +2253,7 @@ MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
   const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
-  return /* @__PURE__ */ React26.createElement(MainSidebar, {
+  return /* @__PURE__ */ React28.createElement(MainSidebar, {
     ...mover,
     ...props,
     open: complementarySidebarOpen,
@@ -2170,7 +2269,7 @@ var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, h
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot10 : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ React26.createElement(Root5, {
+  return /* @__PURE__ */ React28.createElement(Root5, {
     role,
     ...handlesFocus && {
       ...mover
@@ -2192,7 +2291,7 @@ var MainOverlay = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwar
   });
   const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement("div", {
+  return /* @__PURE__ */ React28.createElement("div", {
     onClick: () => {
       setNavigationSidebarOpen(false);
       setComplementarySidebarOpen(false);
@@ -2223,7 +2322,7 @@ var MainNotch = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwarde
     props?.onKeyDown
   ]);
   const mover = useLandmarkMover(handleKeyDown, "3");
-  return /* @__PURE__ */ React26.createElement("div", {
+  return /* @__PURE__ */ React28.createElement("div", {
     role: "toolbar",
     ...mover,
     ...props,
@@ -2245,7 +2344,7 @@ var Main = {
 import { createContext as createContext11 } from "@radix-ui/react-context";
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot11 } from "@radix-ui/react-slot";
-import React27, { forwardRef as forwardRef21 } from "react";
+import React29, { forwardRef as forwardRef21 } from "react";
 import { useId as useId4 } from "@dxos/react-hooks";
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = createContext11(MESSAGE_NAME);
@@ -2255,10 +2354,10 @@ var MessageRoot = /* @__PURE__ */ forwardRef21(({ asChild, valence, elevation: p
   const descriptionId = useId4("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
   const Root5 = asChild ? Slot11 : Primitive10.div;
-  return /* @__PURE__ */ React27.createElement(MessageProvider, {
+  return /* @__PURE__ */ React29.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ React27.createElement(Root5, {
+  }, /* @__PURE__ */ React29.createElement(Root5, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -2275,7 +2374,7 @@ var MessageTitle = /* @__PURE__ */ forwardRef21(({ asChild, className, children,
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
   const Root5 = asChild ? Slot11 : Primitive10.h2;
-  return /* @__PURE__ */ React27.createElement(Root5, {
+  return /* @__PURE__ */ React29.createElement(Root5, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -2288,7 +2387,7 @@ var MessageBody = /* @__PURE__ */ forwardRef21(({ asChild, className, children,
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
   const Root5 = asChild ? Slot11 : Primitive10.p;
-  return /* @__PURE__ */ React27.createElement(Root5, {
+  return /* @__PURE__ */ React29.createElement(Root5, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -2318,7 +2417,7 @@ import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React28, { forwardRef as forwardRef22, useRef as useRef3, useCallback as useCallback6, useState as useState7, useEffect as useEffect7 } from "react";
+import React30, { forwardRef as forwardRef22, useRef as useRef3, useCallback as useCallback6, useState as useState8, useEffect as useEffect7 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
@@ -2330,13 +2429,13 @@ var PopoverRoot = (props) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
   const popperScope = usePopperScope(__scopePopover);
   const triggerRef = useRef3(null);
-  const [hasCustomAnchor, setHasCustomAnchor] = useState7(false);
+  const [hasCustomAnchor, setHasCustomAnchor] = useState8(false);
   const [open = false, setOpen] = useControllableState5({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React28.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React28.createElement(PopoverProvider, {
+  return /* @__PURE__ */ React30.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React30.createElement(PopoverProvider, {
     scope: __scopePopover,
     contentId: useId5(),
     triggerRef,
@@ -2365,7 +2464,7 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     onCustomAnchorAdd,
     onCustomAnchorRemove
   ]);
-  return /* @__PURE__ */ React28.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React30.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     ...anchorProps,
     ref: forwardedRef
@@ -2378,7 +2477,7 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
-  const trigger = /* @__PURE__ */ React28.createElement(Primitive11.button, {
+  const trigger = /* @__PURE__ */ React30.createElement(Primitive11.button, {
     type: "button",
     "aria-haspopup": "dialog",
     "aria-expanded": context.open,
@@ -2388,7 +2487,7 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     ref: composedTriggerRef,
     onClick: composeEventHandlers2(props.onClick, context.onOpenToggle)
   });
-  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React28.createElement(PopperPrimitive.Anchor, {
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React30.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope
   }, trigger);
@@ -2404,7 +2503,7 @@ var PopoverVirtualTrigger = (props) => {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React28.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React30.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     virtualRef
   });
@@ -2417,12 +2516,12 @@ var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME2, {
 var PopoverPortal = (props) => {
   const { __scopePopover, forceMount, children, container } = props;
   const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
-  return /* @__PURE__ */ React28.createElement(PortalProvider, {
+  return /* @__PURE__ */ React30.createElement(PortalProvider, {
     scope: __scopePopover,
     forceMount
-  }, /* @__PURE__ */ React28.createElement(Presence, {
+  }, /* @__PURE__ */ React30.createElement(Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ React28.createElement(PortalPrimitive, {
+  }, /* @__PURE__ */ React30.createElement(PortalPrimitive, {
     asChild: true,
     container
   }, children)));
@@ -2433,12 +2532,12 @@ var PopoverContent = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
   const { forceMount = portalContext.forceMount, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  return /* @__PURE__ */ React28.createElement(Presence, {
+  return /* @__PURE__ */ React30.createElement(Presence, {
     present: forceMount || context.open
-  }, context.modal ? /* @__PURE__ */ React28.createElement(PopoverContentModal, {
+  }, context.modal ? /* @__PURE__ */ React30.createElement(PopoverContentModal, {
     ...contentProps,
     ref: forwardedRef
-  }) : /* @__PURE__ */ React28.createElement(PopoverContentNonModal, {
+  }) : /* @__PURE__ */ React30.createElement(PopoverContentNonModal, {
     ...contentProps,
     ref: forwardedRef
   }));
@@ -2455,10 +2554,10 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) =>
       return hideOthers(content);
     }
   }, []);
-  return /* @__PURE__ */ React28.createElement(RemoveScroll, {
+  return /* @__PURE__ */ React30.createElement(RemoveScroll, {
     as: Slot12,
     allowPinchZoom: true
-  }, /* @__PURE__ */ React28.createElement(PopoverContentImpl, {
+  }, /* @__PURE__ */ React30.createElement(PopoverContentImpl, {
     ...props,
     ref: composedRefs,
     // we make sure we're not trapping once it's been closed
@@ -2490,7 +2589,7 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef22((props, forwardedRef)
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
   const hasInteractedOutsideRef = useRef3(false);
   const hasPointerDownOutsideRef = useRef3(false);
-  return /* @__PURE__ */ React28.createElement(PopoverContentImpl, {
+  return /* @__PURE__ */ React30.createElement(PopoverContentImpl, {
     ...props,
     ref: forwardedRef,
     trapFocus: false,
@@ -2530,14 +2629,15 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
+  const elevation = useElevationContext();
   useFocusGuards();
-  return /* @__PURE__ */ React28.createElement(FocusScope, {
+  return /* @__PURE__ */ React30.createElement(FocusScope, {
     asChild: true,
     loop: true,
     trapped: trapFocus,
     onMountAutoFocus: onOpenAutoFocus,
     onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React28.createElement(DismissableLayer, {
+  }, /* @__PURE__ */ React30.createElement(DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents,
     onInteractOutside,
@@ -2545,13 +2645,15 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     onPointerDownOutside,
     onFocusOutside,
     onDismiss: () => context.onOpenChange(false)
-  }, /* @__PURE__ */ React28.createElement(PopperPrimitive.Content, {
+  }, /* @__PURE__ */ React30.createElement(PopperPrimitive.Content, {
     "data-state": getState(context.open),
     role: "dialog",
     id: context.contentId,
     ...popperScope,
     ...contentProps,
-    className: tx("popover.content", "popover", {}, classNames),
+    className: tx("popover.content", "popover", {
+      elevation
+    }, classNames),
     ref: forwardedRef,
     style: {
       ...contentProps.style,
@@ -2570,7 +2672,7 @@ var CLOSE_NAME = "PopoverClose";
 var PopoverClose = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ React28.createElement(Primitive11.button, {
+  return /* @__PURE__ */ React30.createElement(Primitive11.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
@@ -2583,7 +2685,7 @@ var PopoverArrow = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, classNames, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(PopperPrimitive.Arrow, {
+  return /* @__PURE__ */ React30.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
     className: tx("popover.arrow", "popover__arrow", {}, classNames),
@@ -2594,7 +2696,7 @@ PopoverArrow.displayName = ARROW_NAME2;
 var PopoverViewport = /* @__PURE__ */ forwardRef22(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot12 : Primitive11.div;
-  return /* @__PURE__ */ React28.createElement(Root5, {
+  return /* @__PURE__ */ React30.createElement(Root5, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -2617,10 +2719,10 @@ var Popover = {
 };
 
 // packages/ui/react-ui/src/components/Status/Status.tsx
-import React29, { forwardRef as forwardRef23 } from "react";
+import React31, { forwardRef as forwardRef23 } from "react";
 var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React29.createElement("span", {
+  return /* @__PURE__ */ React31.createElement("span", {
     role: "status",
     ...props,
     className: tx("status.root", "status", {
@@ -2628,7 +2730,7 @@ var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0,
       variant
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React29.createElement("span", {
+  }, /* @__PURE__ */ React31.createElement("span", {
     role: "none",
     className: tx("status.bar", "status__bar", {
       indeterminate,
@@ -2644,10 +2746,10 @@ var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0,
 
 // packages/ui/react-ui/src/components/ScrollArea/ScrollArea.tsx
 import { Root as ScrollAreaPrimitiveRoot, Viewport as ScrollAreaPrimitiveViewport, Scrollbar as ScrollAreaPrimitiveScrollbar, Thumb as ScrollAreaPrimitiveThumb, Corner as ScrollAreaPrimitiveCorner } from "@radix-ui/react-scroll-area";
-import React30, { forwardRef as forwardRef24 } from "react";
+import React32, { forwardRef as forwardRef24 } from "react";
 var ScrollAreaRoot = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(ScrollAreaPrimitiveRoot, {
+  return /* @__PURE__ */ React32.createElement(ScrollAreaPrimitiveRoot, {
     ...props,
     className: tx("scrollArea.root", "scroll-area", {}, classNames),
     ref: forwardedRef
@@ -2655,7 +2757,7 @@ var ScrollAreaRoot = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, for
 });
 var ScrollAreaViewport = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(ScrollAreaPrimitiveViewport, {
+  return /* @__PURE__ */ React32.createElement(ScrollAreaPrimitiveViewport, {
     ...props,
     className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
     ref: forwardedRef
@@ -2663,7 +2765,7 @@ var ScrollAreaViewport = /* @__PURE__ */ forwardRef24(({ classNames, ...props },
 });
 var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef24(({ classNames, variant = "fine", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(ScrollAreaPrimitiveScrollbar, {
+  return /* @__PURE__ */ React32.createElement(ScrollAreaPrimitiveScrollbar, {
     "data-variant": variant,
     ...props,
     className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
@@ -2672,7 +2774,7 @@ var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef24(({ classNames, variant =
 });
 var ScrollAreaThumb = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(ScrollAreaPrimitiveThumb, {
+  return /* @__PURE__ */ React32.createElement(ScrollAreaPrimitiveThumb, {
     ...props,
     className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
     ref: forwardedRef
@@ -2680,7 +2782,7 @@ var ScrollAreaThumb = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, fo
 });
 var ScrollAreaCorner = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(ScrollAreaPrimitiveCorner, {
+  return /* @__PURE__ */ React32.createElement(ScrollAreaPrimitiveCorner, {
     ...props,
     className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
     ref: forwardedRef
@@ -2697,7 +2799,7 @@ var ScrollArea = {
 // packages/ui/react-ui/src/components/Select/Select.tsx
 import { CaretDown as CaretDown2, CaretUp } from "@phosphor-icons/react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React31, { forwardRef as forwardRef25 } from "react";
+import React33, { forwardRef as forwardRef25 } from "react";
 var SelectRoot = SelectPrimitive.Root;
 var SelectTrigger = SelectPrimitive.Trigger;
 var SelectValue = SelectPrimitive.Value;
@@ -2705,52 +2807,55 @@ var SelectIcon = SelectPrimitive.Icon;
 var SelectPortal = SelectPrimitive.Portal;
 var SelectTriggerButton = /* @__PURE__ */ forwardRef25(({ children, placeholder, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React31.createElement(Button, props, /* @__PURE__ */ React31.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React33.createElement(Button, props, /* @__PURE__ */ React33.createElement(SelectPrimitive.Value, {
     placeholder
-  }, children), /* @__PURE__ */ React31.createElement("span", {
+  }, children), /* @__PURE__ */ React33.createElement("span", {
     className: "w-1 flex-1"
-  }), /* @__PURE__ */ React31.createElement(SelectPrimitive.Icon, {
+  }), /* @__PURE__ */ React33.createElement(SelectPrimitive.Icon, {
     asChild: true
-  }, /* @__PURE__ */ React31.createElement(CaretDown2, {
+  }, /* @__PURE__ */ React33.createElement(CaretDown2, {
     className: tx("select.triggerIcon", "select__trigger__icon", {}),
     weight: "bold"
   }))));
 });
 var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Content, {
+  const elevation = useElevationContext();
+  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Content, {
     ...props,
-    className: tx("select.content", "select__content", {}, classNames),
+    className: tx("select.content", "select__content", {
+      elevation
+    }, classNames),
     position: "popper",
     ref: forwardedRef
   }, children);
 });
 var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React33.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React31.createElement(CaretUp, {
+  }, children ?? /* @__PURE__ */ React33.createElement(CaretUp, {
     weight: "bold"
   }));
 });
 var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React33.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React31.createElement(CaretDown2, {
+  }, children ?? /* @__PURE__ */ React33.createElement(CaretDown2, {
     weight: "bold"
   }));
 });
 var SelectViewport2 = /* @__PURE__ */ forwardRef25(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(SelectPrimitive.SelectViewport, {
+  return /* @__PURE__ */ React33.createElement(SelectPrimitive.SelectViewport, {
     ...props,
     className: tx("select.viewport", "select__viewport", {}, classNames),
     ref: forwardedRef
@@ -2758,7 +2863,7 @@ var SelectViewport2 = /* @__PURE__ */ forwardRef25(({ classNames, asChild, child
 });
 var SelectItem = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
@@ -2767,7 +2872,7 @@ var SelectItem = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forward
 var SelectItemText = SelectPrimitive.ItemText;
 var SelectItemIndicator = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React33.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", "option__indicator", {}, classNames),
     ref: forwardedRef
@@ -2775,13 +2880,13 @@ var SelectItemIndicator = /* @__PURE__ */ forwardRef25(({ classNames, children,
 });
 var SelectOption = /* @__PURE__ */ forwardRef25(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React31.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React31.createElement("span", {
+  }, /* @__PURE__ */ React33.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React33.createElement("span", {
     className: "grow w-1"
-  }), /* @__PURE__ */ React31.createElement(Icon, {
+  }), /* @__PURE__ */ React33.createElement(Icon, {
     icon: "ph--check--regular"
   }));
 });
@@ -2789,7 +2894,7 @@ var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
 var SelectSeparator = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", "select__separator", {}, classNames),
     ref: forwardedRef
@@ -2797,7 +2902,7 @@ var SelectSeparator = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, fo
 });
 var SelectArrow = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", "select__arrow", {}, classNames),
     ref: forwardedRef
@@ -2826,10 +2931,10 @@ var Select = {
 
 // packages/ui/react-ui/src/components/Separator/Separator.tsx
 import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
-import React32 from "react";
+import React34 from "react";
 var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React32.createElement(SeparatorPrimitive, {
+  return /* @__PURE__ */ React34.createElement(SeparatorPrimitive, {
     orientation,
     ...props,
     className: tx("separator.root", "separator", {
@@ -2841,11 +2946,11 @@ var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
 // packages/ui/react-ui/src/components/Tag/Tag.tsx
 import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot13 } from "@radix-ui/react-slot";
-import React33, { forwardRef as forwardRef26 } from "react";
+import React35, { forwardRef as forwardRef26 } from "react";
 var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot13 : Primitive12.span;
-  return /* @__PURE__ */ React33.createElement(Root5, {
+  return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
     className: tx("tag.root", "tag", {
       palette
@@ -2858,29 +2963,29 @@ var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette, classNames, ...props
 import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
 import { Slot as Slot14 } from "@radix-ui/react-slot";
 import { ToastProvider as ToastProviderPrimitive, ToastViewport as ToastViewportPrimitive, Root as ToastRootPrimitive, ToastTitle as ToastTitlePrimitive, ToastDescription as ToastDescriptionPrimitive, ToastAction as ToastActionPrimitive, ToastClose as ToastClosePrimitive } from "@radix-ui/react-toast";
-import React34, { forwardRef as forwardRef27 } from "react";
+import React36, { forwardRef as forwardRef27 } from "react";
 var ToastProvider = ToastProviderPrimitive;
 var ToastViewport = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React34.createElement(ToastViewportPrimitive, {
+  return /* @__PURE__ */ React36.createElement(ToastViewportPrimitive, {
     className: tx("toast.viewport", "toast-viewport", {}, classNames),
     ref: forwardedRef
   });
 });
 var ToastRoot = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React34.createElement(ToastRootPrimitive, {
+  return /* @__PURE__ */ React36.createElement(ToastRootPrimitive, {
     ...props,
     className: tx("toast.root", "toast", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React34.createElement(ElevationProvider, {
-    elevation: "chrome"
+  }, /* @__PURE__ */ React36.createElement(ElevationProvider, {
+    elevation: "toast"
   }, children));
 });
 var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React34.createElement(Root5, {
+  return /* @__PURE__ */ React36.createElement(Root5, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
@@ -2889,7 +2994,7 @@ var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props },
 var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React34.createElement(Root5, {
+  return /* @__PURE__ */ React36.createElement(Root5, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
@@ -2898,7 +3003,7 @@ var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }
 var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React34.createElement(Root5, {
+  return /* @__PURE__ */ React36.createElement(Root5, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
@@ -2907,7 +3012,7 @@ var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...p
 var ToastActions = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React34.createElement(Root5, {
+  return /* @__PURE__ */ React36.createElement(Root5, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -2929,44 +3034,52 @@ var Toast = {
 
 // packages/ui/react-ui/src/components/Toolbar/Toolbar.tsx
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React35, { forwardRef as forwardRef28 } from "react";
+import React37, { forwardRef as forwardRef28 } from "react";
 var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.Root, {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Root, {
     ...props,
     className: tx("toolbar.root", "toolbar", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 var ToolbarButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.Button, {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React37.createElement(Button, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarIconButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React35.createElement(Button, {
+  }, /* @__PURE__ */ React37.createElement(IconButton, {
     ...props,
     ref: forwardedRef
   }));
 });
 var ToolbarToggle = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.Button, {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React35.createElement(Toggle, {
+  }, /* @__PURE__ */ React37.createElement(Toggle, {
     ...props,
     ref: forwardedRef
   }));
 });
 var ToolbarLink = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.Link, {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ React35.createElement(Link, {
+  }, /* @__PURE__ */ React37.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
 var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children, elevation, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React35.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React37.createElement(ButtonGroup, {
     classNames,
     children,
     elevation,
@@ -2974,10 +3087,10 @@ var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children,
   }));
 });
 var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React35.createElement(Button, {
+  }, /* @__PURE__ */ React37.createElement(Button, {
     variant,
     density,
     elevation,
@@ -2986,26 +3099,38 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, e
     ref: forwardedRef
   }));
 });
-var ToolbarSeparator = (props) => {
-  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.Separator, {
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    ...props,
     asChild: true
-  }, /* @__PURE__ */ React35.createElement(Separator4, {
-    orientation: "vertical",
-    ...props
+  }, /* @__PURE__ */ React37.createElement(IconButton, {
+    variant,
+    density,
+    elevation,
+    classNames,
+    icon,
+    label,
+    iconOnly,
+    ref: forwardedRef
   }));
-};
-var ToolbarExpander = () => /* @__PURE__ */ React35.createElement("div", {
-  className: "grow"
 });
+var ToolbarSeparator = ({ variant = "line", ...props }) => {
+  return variant === "line" ? /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
+    asChild: true
+  }, /* @__PURE__ */ React37.createElement(Separator4, props)) : /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
+    className: "grow"
+  });
+};
 var Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarButton,
+  IconButton: ToolbarIconButton,
   Link: ToolbarLink,
   Toggle: ToolbarToggle,
   ToggleGroup: ToolbarToggleGroup2,
   ToggleGroupItem: ToolbarToggleGroupItem,
-  Separator: ToolbarSeparator,
-  Expander: ToolbarExpander
+  ToggleGroupIconItem: ToolbarToggleGroupIconItem,
+  Separator: ToolbarSeparator
 };
 export {
   AlertDialog,