@dxos/react-ui 0.3.3-main.5b114d4 → 0.3.3-main.9766dd8

package/dist/lib/browser/index.mjs

@@ -554,10 +554,100 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef7(({ variant, elevation, density
 
 // packages/ui/react-ui/src/components/Card/Card.tsx
 import { DotsSixVertical, DotsThreeVertical } from "@phosphor-icons/react";
-import React9, { forwardRef as forwardRef8 } from "react";
-var CardRoot = /* @__PURE__ */ forwardRef8(({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {
+import React11, { forwardRef as forwardRef9 } from "react";
+
+// packages/ui/react-ui/src/components/DropdownMenu/DropdownMenu.tsx
+import { Root as DropdownMenuRootPrimitive, DropdownMenuTrigger as DropdownMenuTriggerPrimitive, DropdownMenuPortal as DropdownMenuPortalPrimitive, DropdownMenuContent as DropdownMenuContentPrimitive, DropdownMenuArrow as DropdownMenuArrowPrimitive, DropdownMenuGroup as DropdownMenuGroupPrimitive, DropdownMenuItem as DropdownMenuItemPrimitive, DropdownMenuSeparator as DropdownMenuSeparatorPrimitive, DropdownMenuLabel as DropdownMenuLabelPrimitive } from "@radix-ui/react-dropdown-menu";
+import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import React10, { forwardRef as forwardRef8 } from "react";
+
+// packages/ui/react-ui/src/components/ElevationProvider/ElevationProvider.tsx
+import React9, { createContext as createContext4 } from "react";
+var ElevationContext = /* @__PURE__ */ createContext4({
+  elevation: "base"
+});
+var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React9.createElement(ElevationContext.Provider, {
+  value: {
+    elevation
+  }
+}, children);
+
+// packages/ui/react-ui/src/components/DropdownMenu/DropdownMenu.tsx
+var DropdownMenuRoot = DropdownMenuRootPrimitive;
+var DropdownMenuTrigger = DropdownMenuTriggerPrimitive;
+var DropdownMenuPortal = DropdownMenuPortalPrimitive;
+var DropdownMenuContent = /* @__PURE__ */ forwardRef8(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React10.createElement(DropdownMenuContentPrimitive, {
+    sideOffset: 4,
+    collisionPadding: 8,
+    ...props,
+    className: tx("dropdownMenu.content", "dropdown-menu", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React10.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, children));
+});
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef8(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root4 = asChild ? Slot5 : Primitive5.div;
+  return /* @__PURE__ */ React10.createElement(Root4, {
+    ...props,
+    className: tx("dropdownMenu.viewport", "dropdown-menu__viewport", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React10.createElement(DropdownMenuArrowPrimitive, {
+    ...props,
+    className: tx("dropdownMenu.arrow", "dropdown-menu__arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenuGroup = DropdownMenuGroupPrimitive;
+var DropdownMenuItem = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React10.createElement(DropdownMenuItemPrimitive, {
+    ...props,
+    className: tx("dropdownMenu.item", "dropdown-menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React10.createElement(DropdownMenuSeparatorPrimitive, {
+    ...props,
+    className: tx("dropdownMenu.separator", "dropdown-menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React10.createElement(DropdownMenuLabelPrimitive, {
+    ...props,
+    className: tx("dropdownMenu.groupLabel", "dropdown-menu__group__label", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  Portal: DropdownMenuPortal,
+  Content: DropdownMenuContent,
+  Viewport: DropdownMenuViewport,
+  Arrow: DropdownMenuArrow,
+  Group: DropdownMenuGroup,
+  Item: DropdownMenuItem,
+  Separator: DropdownMenuSeparator,
+  GroupLabel: DropdownMenuGroupLabel
+};
+
+// packages/ui/react-ui/src/components/Card/Card.tsx
+var CardRoot = /* @__PURE__ */ forwardRef9(({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React11.createElement("div", {
     ...props,
     ref: forwardedRef,
     className: tx("card.root", "card", {
@@ -569,7 +659,7 @@ var CardRoot = /* @__PURE__ */ forwardRef8(({ grow, square, noPadding, className
 });
 var CardHeader = ({ floating, classNames, children, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React11.createElement("div", {
     ...props,
     className: tx("card.header", "card", {
       floating
@@ -578,7 +668,7 @@ var CardHeader = ({ floating, classNames, children, ...props }) => {
 };
 var CardTitle = ({ center, title, classNames, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React11.createElement("div", {
     ...props,
     className: tx("card.title", "card", {
       center
@@ -588,34 +678,36 @@ var CardTitle = ({ center, title, classNames, ...props }) => {
 var CardDragHandle = ({ position, classNames, ...props }) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React11.createElement("div", {
     ...props,
     className: tx("card.dragHandle", "card", {
       density,
       position
     }, classNames)
-  }, /* @__PURE__ */ React9.createElement(DotsSixVertical, {
+  }, /* @__PURE__ */ React11.createElement(DotsSixVertical, {
     className: tx("card.dragHandleIcon", "card")
   }));
 };
-var CardMenu = /* @__PURE__ */ forwardRef8(({ position, classNames, ...props }, forwardRef1) => {
+var CardMenu = /* @__PURE__ */ forwardRef9(({ children, position, classNames, ...props }, forwardRef1) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React11.createElement("div", {
     ...props,
     className: tx("card.menu", "card", {
       density,
       position
     }, classNames),
     ref: forwardRef1
-  }, /* @__PURE__ */ React9.createElement(DotsThreeVertical, {
+  }, /* @__PURE__ */ React11.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React11.createElement(DotsThreeVertical, {
     className: tx("card.menuIcon", "card", {})
-  }));
+  })), /* @__PURE__ */ React11.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Viewport, null, children))));
 });
 var CardBody = ({ gutter, classNames, children, ...props }) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React11.createElement("div", {
     ...props,
     className: tx("card.body", "card", {
       density,
@@ -625,9 +717,9 @@ var CardBody = ({ gutter, classNames, children, ...props }) => {
 };
 var CardMedia = ({ src, contain, classNames, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React11.createElement("div", {
     className: "flex grow overflow-hidden"
-  }, /* @__PURE__ */ React9.createElement("img", {
+  }, /* @__PURE__ */ React11.createElement("img", {
     ...props,
     className: tx("card.media", "card", {
       contain
@@ -646,10 +738,10 @@ var Card = {
 };
 
 // packages/ui/react-ui/src/components/Center/Center.tsx
-import React10 from "react";
+import React12 from "react";
 var Center = (props) => {
   const { children, className, ...rest } = props;
-  return /* @__PURE__ */ React10.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     className: "h-full flex items-center justify-center " + className,
     ...rest
   }, children);
@@ -661,18 +753,18 @@ import { createContextScope } from "@radix-ui/react-context";
 import { createPopperScope } from "@radix-ui/react-popper";
 import * as PopperPrimitive from "@radix-ui/react-popper";
 import { useCombobox } from "downshift";
-import React12, { forwardRef as forwardRef10 } from "react";
+import React14, { forwardRef as forwardRef11 } from "react";
 
 // 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 { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React11, { forwardRef as forwardRef9, Fragment, useCallback } from "react";
+import React13, { forwardRef as forwardRef10, Fragment, useCallback } 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 Label = /* @__PURE__ */ forwardRef9(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Label = /* @__PURE__ */ forwardRef10(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(LabelPrimitive, {
+  return /* @__PURE__ */ React13.createElement(LabelPrimitive, {
     ...props,
     className: tx("input.label", "input__label", {
       srOnly
@@ -680,9 +772,9 @@ var Label = /* @__PURE__ */ forwardRef9(({ srOnly, classNames, children, ...prop
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ forwardRef9(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ forwardRef10(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(DescriptionPrimitive, {
+  return /* @__PURE__ */ React13.createElement(DescriptionPrimitive, {
     ...props,
     className: tx("input.description", "input__description", {
       srOnly
@@ -690,10 +782,10 @@ var Description = /* @__PURE__ */ forwardRef9(({ srOnly, classNames, children, .
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ forwardRef9(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ forwardRef10(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React11.createElement(ValidationPrimitive, {
+  return /* @__PURE__ */ React13.createElement(ValidationPrimitive, {
     ...props,
     className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
       srOnly,
@@ -702,9 +794,9 @@ var Validation = /* @__PURE__ */ forwardRef9(({ __inputScope, srOnly, classNames
     ref: forwardedRef
   }, children);
 });
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef9(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef10(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(DescriptionAndValidationPrimitive, {
+  return /* @__PURE__ */ React13.createElement(DescriptionAndValidationPrimitive, {
     ...props,
     className: tx("input.descriptionAndValidation", "input__description-and-validation", {
       srOnly
@@ -712,7 +804,7 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef9(({ srOnly, classNames
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ forwardRef9(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef10(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
@@ -731,7 +823,7 @@ var PinInput = /* @__PURE__ */ forwardRef9(({ density: propsDensity, elevation:
     propsElevation,
     density
   ]);
-  return /* @__PURE__ */ React11.createElement(PinInputPrimitive, {
+  return /* @__PURE__ */ React13.createElement(PinInputPrimitive, {
     ...props,
     segmentClassName,
     ...props.autoFocus && !hasIosKeyboard2 && {
@@ -743,13 +835,13 @@ var PinInput = /* @__PURE__ */ forwardRef9(({ density: propsDensity, elevation:
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ forwardRef9(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ forwardRef10(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React11.createElement(TextInputPrimitive, {
+  return /* @__PURE__ */ React13.createElement(TextInputPrimitive, {
     ...props,
     className: tx("input.input", "input", {
       variant,
@@ -764,13 +856,13 @@ var TextInput = /* @__PURE__ */ forwardRef9(({ __inputScope, classNames, density
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ forwardRef9(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ forwardRef10(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React11.createElement(TextAreaPrimitive, {
+  return /* @__PURE__ */ React13.createElement(TextAreaPrimitive, {
     ...props,
     className: tx("input.input", "input--text-area", {
       variant,
@@ -785,7 +877,7 @@ var TextArea = /* @__PURE__ */ forwardRef9(({ __inputScope, classNames, density:
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ forwardRef9(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ forwardRef10(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
@@ -794,7 +886,7 @@ var Checkbox = /* @__PURE__ */ forwardRef9(({ __inputScope, checked: propsChecke
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = useThemeContext();
   const Icon2 = checked === "indeterminate" ? Minus : checked ? Check : Fragment;
-  return /* @__PURE__ */ React11.createElement(CheckboxPrimitive, {
+  return /* @__PURE__ */ React13.createElement(CheckboxPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -808,23 +900,23 @@ var Checkbox = /* @__PURE__ */ forwardRef9(({ __inputScope, checked: propsChecke
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React11.createElement(CheckboxIndicatorPrimitive, {
+  }, /* @__PURE__ */ React13.createElement(CheckboxIndicatorPrimitive, {
     asChild: true
-  }, /* @__PURE__ */ React11.createElement(Icon2, checked && {
+  }, /* @__PURE__ */ React13.createElement(Icon2, checked && {
     weight,
     className: tx("input.checkboxIndicator", "input--checkbox__indicator", {
       size
     })
   })));
 });
-var Switch = /* @__PURE__ */ forwardRef9(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, classNames, ...props }, forwardedRef) => {
+var Switch = /* @__PURE__ */ forwardRef10(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, classNames, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React11.createElement(SwitchPrimitive, {
+  return /* @__PURE__ */ React13.createElement(SwitchPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -837,7 +929,7 @@ var Switch = /* @__PURE__ */ forwardRef9(({ __inputScope, checked: propsChecked,
     // className: tx('input.checkbox', 'input--checkbox', { size }, 'shrink-0', classNames),
     className: "w-[56px] h-[32px] bg-transparent rounded-full px-[4px] border-2 border-neutral-500 relative data-[state=checked]:border-primary-500 data-[state=checked]:bg-primary-500 outline-none cursor-default",
     ref: forwardedRef
-  }, /* @__PURE__ */ React11.createElement(SwitchThumbPrimitive, {
+  }, /* @__PURE__ */ React13.createElement(SwitchThumbPrimitive, {
     className: "block w-[22px] h-[22px] bg-neutral-500 rounded-full border-neutral-100 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[22px] data-[state=checked]:bg-white"
   }));
 });
@@ -871,44 +963,44 @@ var ComboBoxRoot = ({ __scopeComboBox, children, classNames, items = [], value,
     selectedItem: value ?? null,
     onSelectedItemChange: ({ selectedItem }) => onChange?.(selectedItem === null ? void 0 : selectedItem)
   });
-  return /* @__PURE__ */ React12.createElement(ComboBoxProvider, {
+  return /* @__PURE__ */ React14.createElement(ComboBoxProvider, {
     scope: __scopeComboBox,
     items,
     ...comboProps
-  }, /* @__PURE__ */ React12.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React12.createElement("div", {
+  }, /* @__PURE__ */ React14.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React14.createElement("div", {
     className: tx("combobox.root", "combobox__root", {}, classNames)
   }, children)));
 };
 var INPUT_NAME2 = "ComboBoxInput";
-var ComboBoxInput = /* @__PURE__ */ forwardRef10(({ __scopeComboBox, classNames, placeholder }, forwardedRef) => {
+var ComboBoxInput = /* @__PURE__ */ forwardRef11(({ __scopeComboBox, classNames, placeholder }, forwardedRef) => {
   const { tx } = useThemeContext();
   const popperScope = usePopperScope(__scopeComboBox);
   const { getInputProps, getToggleButtonProps, isOpen } = useComboBoxContext(INPUT_NAME2, __scopeComboBox);
-  return /* @__PURE__ */ React12.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React14.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope,
     ref: forwardedRef
-  }, /* @__PURE__ */ React12.createElement("div", {
+  }, /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: "flex items-center gap-1"
-  }, /* @__PURE__ */ React12.createElement(Input.Root, null, /* @__PURE__ */ React12.createElement(Input.TextInput, {
+  }, /* @__PURE__ */ React14.createElement(Input.Root, null, /* @__PURE__ */ React14.createElement(Input.TextInput, {
     ...getInputProps(),
     placeholder,
     variant: "subdued",
     classNames: tx("combobox.input", "combobox__input", {}, classNames)
-  })), /* @__PURE__ */ React12.createElement(Button, {
+  })), /* @__PURE__ */ React14.createElement(Button, {
     ...getToggleButtonProps(),
     "aria-label": "toggle menu",
     variant: "ghost",
     classNames: tx("combobox.button", "combobox__button")
-  }, isOpen && /* @__PURE__ */ React12.createElement(CaretUp, null) || /* @__PURE__ */ React12.createElement(CaretDown, null))));
+  }, isOpen && /* @__PURE__ */ React14.createElement(CaretUp, null) || /* @__PURE__ */ React14.createElement(CaretDown, null))));
 });
 var CONTENT_NAME = "ComboBoxContent";
-var ComboBoxContent = /* @__PURE__ */ forwardRef10(({ __scopeComboBox, classNames, children }, forwardedRef) => {
+var ComboBoxContent = /* @__PURE__ */ forwardRef11(({ __scopeComboBox, classNames, children }, forwardedRef) => {
   const { tx } = useThemeContext();
   const popperScope = usePopperScope(__scopeComboBox);
   const { getMenuProps, isOpen } = useComboBoxContext(CONTENT_NAME, __scopeComboBox);
-  return /* @__PURE__ */ React12.createElement(PopperPrimitive.Content, {
+  return /* @__PURE__ */ React14.createElement(PopperPrimitive.Content, {
     "data-state": isOpen,
     role: "dialog",
     ...popperScope,
@@ -923,16 +1015,16 @@ var ComboBoxContent = /* @__PURE__ */ forwardRef10(({ __scopeComboBox, className
         "--radix-combobox-trigger-height": "var(--radix-popper-anchor-height)"
       }
     }
-  }, /* @__PURE__ */ React12.createElement("ul", {
+  }, /* @__PURE__ */ React14.createElement("ul", {
     ...getMenuProps(),
     className: tx("combobox.content", "combobox__content", {}, classNames)
   }, isOpen && children));
 });
 var ITEM_NAME = "ComboBoxItem";
-var ComboBoxItem = /* @__PURE__ */ forwardRef10(({ __scopeComboBox, classNames, children, item }, forwardedRef) => {
+var ComboBoxItem = /* @__PURE__ */ forwardRef11(({ __scopeComboBox, classNames, children, item }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { getItemProps, items, selectedItem, highlightedIndex } = useComboBoxContext(ITEM_NAME, __scopeComboBox);
-  return /* @__PURE__ */ React12.createElement("li", {
+  return /* @__PURE__ */ React14.createElement("li", {
     ref: forwardedRef,
     "data-selected": selectedItem?.id === item.id ? "true" : void 0,
     "data-highlighted": highlightedIndex !== void 0 && items[highlightedIndex]?.id === item.id ? "true" : void 0,
@@ -952,26 +1044,13 @@ var ComboBox = {
 // packages/ui/react-ui/src/components/Dialogs/Dialog.tsx
 import { createContext as createContext5 } 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 React14, { forwardRef as forwardRef11 } from "react";
-
-// packages/ui/react-ui/src/components/ElevationProvider/ElevationProvider.tsx
-import React13, { createContext as createContext4 } from "react";
-var ElevationContext = /* @__PURE__ */ createContext4({
-  elevation: "base"
-});
-var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React13.createElement(ElevationContext.Provider, {
-  value: {
-    elevation
-  }
-}, children);
-
-// packages/ui/react-ui/src/components/Dialogs/Dialog.tsx
+import React15, { forwardRef as forwardRef12 } from "react";
 var DialogRoot = DialogRootPrimitive;
 var DialogTrigger = DialogTriggerPrimitive;
 var DialogPortal = DialogPortalPrimitive;
-var DialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DialogTitlePrimitive, {
+  return /* @__PURE__ */ React15.createElement(DialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", "dialog__title", {
       srOnly
@@ -979,9 +1058,9 @@ var DialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }
     ref: forwardedRef
   });
 });
-var DialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogDescription = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React15.createElement(DialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", "dialog__description", {
       srOnly
@@ -995,27 +1074,27 @@ var DIALOG_CONTENT_NAME = "DialogContent";
 var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext5(DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var DialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+var DialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DialogOverlayPrimitive, {
+  return /* @__PURE__ */ React15.createElement(DialogOverlayPrimitive, {
     ...props,
     className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React14.createElement(OverlayLayoutProvider, {
+  }, /* @__PURE__ */ React15.createElement(OverlayLayoutProvider, {
     inOverlayLayout: true
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-var DialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React14.createElement(DialogContentPrimitive, {
+  return /* @__PURE__ */ React15.createElement(DialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog", {
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React14.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React15.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
@@ -1034,15 +1113,15 @@ var Dialog = {
 // packages/ui/react-ui/src/components/Dialogs/AlertDialog.tsx
 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 createContext6 } from "@radix-ui/react-context";
-import React15, { forwardRef as forwardRef12 } from "react";
+import React16, { forwardRef as forwardRef13 } from "react";
 var AlertDialogRoot = AlertDialogRootPrimitive;
 var AlertDialogTrigger = AlertDialogTriggerPrimitive;
 var AlertDialogPortal = AlertDialogPortalPrimitive;
 var AlertDialogCancel = AlertDialogCancelPrimitive;
 var AlertDialogAction = AlertDialogActionPrimitive;
-var AlertDialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogTitle = /* @__PURE__ */ forwardRef13(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(AlertDialogTitlePrimitive, {
+  return /* @__PURE__ */ React16.createElement(AlertDialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", "dialog--alert__title", {
       srOnly
@@ -1050,9 +1129,9 @@ var AlertDialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...pr
     ref: forwardedRef
   });
 });
-var AlertDialogDescription = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogDescription = /* @__PURE__ */ forwardRef13(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(AlertDialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React16.createElement(AlertDialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", "dialog--alert__description", {
       srOnly
@@ -1065,27 +1144,27 @@ var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
 var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext6(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(AlertDialogOverlayPrimitive, {
+  return /* @__PURE__ */ React16.createElement(AlertDialogOverlayPrimitive, {
     ...props,
     className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(OverlayLayoutProvider2, {
+  }, /* @__PURE__ */ React16.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogContent = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React15.createElement(AlertDialogContentPrimitive, {
+  return /* @__PURE__ */ React16.createElement(AlertDialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog--alert", {
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React16.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
@@ -1102,81 +1181,6 @@ var AlertDialog = {
   Action: AlertDialogAction
 };
 
-// packages/ui/react-ui/src/components/DropdownMenu/DropdownMenu.tsx
-import { Root as DropdownMenuRootPrimitive, DropdownMenuTrigger as DropdownMenuTriggerPrimitive, DropdownMenuPortal as DropdownMenuPortalPrimitive, DropdownMenuContent as DropdownMenuContentPrimitive, DropdownMenuArrow as DropdownMenuArrowPrimitive, DropdownMenuGroup as DropdownMenuGroupPrimitive, DropdownMenuItem as DropdownMenuItemPrimitive, DropdownMenuSeparator as DropdownMenuSeparatorPrimitive, DropdownMenuLabel as DropdownMenuLabelPrimitive } from "@radix-ui/react-dropdown-menu";
-import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
-import { Slot as Slot5 } from "@radix-ui/react-slot";
-import React16, { forwardRef as forwardRef13 } from "react";
-var DropdownMenuRoot = DropdownMenuRootPrimitive;
-var DropdownMenuTrigger = DropdownMenuTriggerPrimitive;
-var DropdownMenuPortal = DropdownMenuPortalPrimitive;
-var DropdownMenuContent = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(DropdownMenuContentPrimitive, {
-    sideOffset: 4,
-    collisionPadding: 8,
-    ...props,
-    className: tx("dropdownMenu.content", "dropdown-menu", {}, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React16.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
-});
-var DropdownMenuViewport = /* @__PURE__ */ forwardRef13(({ classNames, asChild, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot5 : Primitive5.div;
-  return /* @__PURE__ */ React16.createElement(Root4, {
-    ...props,
-    className: tx("dropdownMenu.viewport", "dropdown-menu__viewport", {}, classNames),
-    ref: forwardedRef
-  }, children);
-});
-var DropdownMenuArrow = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(DropdownMenuArrowPrimitive, {
-    ...props,
-    className: tx("dropdownMenu.arrow", "dropdown-menu__arrow", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var DropdownMenuGroup = DropdownMenuGroupPrimitive;
-var DropdownMenuItem = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(DropdownMenuItemPrimitive, {
-    ...props,
-    className: tx("dropdownMenu.item", "dropdown-menu__item", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(DropdownMenuSeparatorPrimitive, {
-    ...props,
-    className: tx("dropdownMenu.separator", "dropdown-menu__item", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(DropdownMenuLabelPrimitive, {
-    ...props,
-    className: tx("dropdownMenu.groupLabel", "dropdown-menu__group__label", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var DropdownMenu = {
-  Root: DropdownMenuRoot,
-  Trigger: DropdownMenuTrigger,
-  Portal: DropdownMenuPortal,
-  Content: DropdownMenuContent,
-  Viewport: DropdownMenuViewport,
-  Arrow: DropdownMenuArrow,
-  Group: DropdownMenuGroup,
-  Item: DropdownMenuItem,
-  Separator: DropdownMenuSeparator,
-  GroupLabel: DropdownMenuGroupLabel
-};
-
 // packages/ui/react-ui/src/components/List/List.tsx
 import { CaretDown as CaretDown2, CaretRight } from "@phosphor-icons/react";
 import { Slot as Slot6 } from "@radix-ui/react-slot";