@dxos/react-ui 0.6.13 → 0.6.14-main.2b6a0f3

package/dist/lib/node-esm/index.mjs

@@ -0,0 +1,2396 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// packages/ui/react-ui/src/index.ts
+import { Trans } from "react-i18next";
+export * from "@dxos/react-hooks";
+export * from "@dxos/react-ui-types";
+
+// packages/ui/react-ui/src/components/AnchoredOverflow/AnchoredOverflow.tsx
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import React2, { forwardRef } from "react";
+
+// packages/ui/react-ui/src/hooks/useDensityContext.ts
+import { useContext } from "react";
+var useDensityContext = (propsDensity) => {
+  const { density } = useContext(DensityContext);
+  return propsDensity ?? density;
+};
+
+// packages/ui/react-ui/src/hooks/useElevationContext.ts
+import { useContext as useContext2 } from "react";
+var useElevationContext = (propsElevation) => {
+  const { elevation } = useContext2(ElevationContext);
+  return propsElevation ?? elevation;
+};
+
+// packages/ui/react-ui/src/hooks/useTranslationsContext.ts
+import { useContext as useContext4 } from "react";
+
+// packages/ui/react-ui/src/components/ThemeProvider/TranslationsProvider.tsx
+import { enUS as dtLocaleEnUs } from "date-fns/locale";
+import i18Next from "i18next";
+import React, { useEffect, createContext, useState, Suspense, useContext as useContext3 } from "react";
+import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
+var initialLng = "en-US";
+var initialNs = "dxos-common";
+var initialDtLocale = dtLocaleEnUs;
+var isLabel = (o) => typeof o === "string" || Array.isArray(o) && o.length === 2 && typeof o[0] === "string" && !!o[1] && typeof o[1] === "object" && "ns" in o[1] && typeof o[1].ns === "string";
+var toLocalizedString = (label, t) => Array.isArray(label) ? t(...label) : label;
+var resources = {
+  [initialLng]: {
+    [initialNs]: {
+      "loading translations": "Loading translations\u2026"
+    }
+  }
+};
+void i18Next.use(initReactI18next).init({
+  resources,
+  lng: initialLng,
+  defaultNS: initialNs,
+  interpolation: {
+    escapeValue: false
+  }
+});
+var TranslationsContext = /* @__PURE__ */ createContext({
+  appNs: initialNs,
+  dtLocale: initialDtLocale
+});
+var useTranslation = (...args) => {
+  const result = useI18NextTranslation(...args);
+  const { dtLocale } = useContext3(TranslationsContext);
+  return {
+    ...result,
+    dtLocale
+  };
+};
+var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    setLoaded(false);
+    if (resourceExtensions && resourceExtensions.length) {
+      resourceExtensions.forEach((resource) => {
+        Object.keys(resource).forEach((language) => {
+          Object.keys(resource[language]).forEach((ns) => {
+            i18Next.addResourceBundle(language, ns, resource[language][ns]);
+          });
+        });
+      });
+    }
+    setLoaded(true);
+  }, [
+    resourceExtensions
+  ]);
+  return /* @__PURE__ */ React.createElement(TranslationsContext.Provider, {
+    value: {
+      appNs: appNs ?? initialNs,
+      dtLocale: dtLocale ?? initialDtLocale
+    }
+  }, /* @__PURE__ */ React.createElement(Suspense, {
+    fallback
+  }, loaded ? children : fallback));
+};
+
+// packages/ui/react-ui/src/hooks/useTranslationsContext.ts
+var useTranslationsContext = () => useContext4(TranslationsContext);
+
+// packages/ui/react-ui/src/hooks/useThemeContext.ts
+import { useContext as useContext5 } from "react";
+import { raise } from "@dxos/debug";
+var useThemeContext = () => useContext5(ThemeContext) ?? raise(new Error("Missing ThemeContext"));
+
+// packages/ui/react-ui/src/hooks/useVisualViewport.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var useVisualViewport = (deps) => {
+  const [width, setWidth] = useState2(null);
+  const [height, setHeight] = useState2(null);
+  useEffect2(() => {
+    const handleResize = () => {
+      if (window.visualViewport) {
+        setWidth(window.visualViewport.width);
+        setHeight(window.visualViewport.height);
+      }
+    };
+    window.visualViewport?.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.visualViewport?.removeEventListener("resize", handleResize);
+  }, deps ?? []);
+  return {
+    width,
+    height
+  };
+};
+
+// packages/ui/react-ui/src/components/AnchoredOverflow/AnchoredOverflow.tsx
+var AnchoredOverflowRoot = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React2.createElement(Root3, {
+    role: "none",
+    ...props,
+    className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var AnchoredOverflowAnchor = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React2.createElement(Root3, {
+    role: "none",
+    ...props,
+    className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var AnchoredOverflow = {
+  Root: AnchoredOverflowRoot,
+  Anchor: AnchoredOverflowAnchor
+};
+
+// packages/ui/react-ui/src/components/Avatars/Avatar.tsx
+import { Root as AvatarRootPrimitive, Fallback as AvatarFallbackPrimitive } from "@radix-ui/react-avatar";
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import React4, { forwardRef as forwardRef3 } from "react";
+import { useId } from "@dxos/react-hooks";
+
+// packages/ui/react-ui/src/components/Icon/Icon.tsx
+import React3, { forwardRef as forwardRef2 } from "react";
+var Icon = /* @__PURE__ */ forwardRef2(({ icon, classNames, size, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React3.createElement("svg", {
+    ...props,
+    className: tx("icon.root", "icon", {
+      size
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement("use", {
+    href: `/icons.svg#${icon}`
+  }));
+});
+
+// packages/ui/react-ui/src/components/Avatars/Avatar.tsx
+var AVATAR_NAME = "Avatar";
+var [AvatarProvider, useAvatarContext] = createContext2(AVATAR_NAME);
+var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children, labelId: propsLabelId, descriptionId: propsDescriptionId, maskId: propsMaskId, inGroup, hue }) => {
+  const labelId = useId("avatar__label", propsLabelId);
+  const descriptionId = useId("avatar__description", propsDescriptionId);
+  const maskId = useId("avatar__mask", propsMaskId);
+  return /* @__PURE__ */ React4.createElement(AvatarProvider, {
+    labelId,
+    descriptionId,
+    maskId,
+    size,
+    variant,
+    status,
+    animation,
+    inGroup,
+    hue
+  }, children);
+};
+var rx = "0.25rem";
+var AvatarFrame = /* @__PURE__ */ forwardRef3(({ classNames, children, ...props }, forwardedRef) => {
+  const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation, hue } = useAvatarContext("AvatarFrame");
+  const { tx } = useThemeContext();
+  const numericSize = size === "px" ? 1 : Number(size);
+  const sizePx = numericSize * 4;
+  const ringWidth = status ? numericSize > 4 ? 2 : numericSize > 3 ? 1 : 1 : 0;
+  const ringGap = status ? numericSize > 12 ? 3 : numericSize > 4 ? 2 : numericSize > 3 ? 1 : 0 : 0;
+  const r = sizePx / 2 - ringGap - ringWidth;
+  return /* @__PURE__ */ React4.createElement(AvatarRootPrimitive, {
+    role: "img",
+    ...props,
+    className: tx("avatar.root", "avatar", {
+      size,
+      variant,
+      inGroup
+    }, classNames),
+    ref: forwardedRef,
+    ...!inGroup && {
+      "aria-labelledby": labelId,
+      "aria-describedby": descriptionId
+    }
+  }, /* @__PURE__ */ React4.createElement("svg", {
+    viewBox: `0 0 ${sizePx} ${sizePx}`,
+    width: sizePx,
+    height: sizePx,
+    className: tx("avatar.frame", "avatar__frame", {
+      variant
+    })
+  }, /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("mask", {
+    id: maskId
+  }, variant === "circle" ? /* @__PURE__ */ React4.createElement("circle", {
+    fill: "white",
+    cx: "50%",
+    cy: "50%",
+    r
+  }) : /* @__PURE__ */ React4.createElement("rect", {
+    fill: "white",
+    width: 2 * r,
+    height: 2 * r,
+    x: ringGap + ringWidth,
+    y: ringGap + ringWidth,
+    rx
+  }))), variant === "circle" ? /* @__PURE__ */ React4.createElement("circle", {
+    className: hue ? tx("hue.fill", "avatar__frame__circle", {
+      hue
+    }) : "fill-[var(--surface-bg)]",
+    cx: "50%",
+    cy: "50%",
+    r
+  }) : /* @__PURE__ */ React4.createElement("rect", {
+    className: hue ? tx("hue.fill", "avatar__frame__rect", {
+      hue
+    }) : "fill-[var(--surface-bg)]",
+    x: ringGap + ringWidth,
+    y: ringGap + ringWidth,
+    width: 2 * r,
+    height: 2 * r,
+    rx
+  }), children), /* @__PURE__ */ React4.createElement("span", {
+    role: "none",
+    className: tx("avatar.ring", "avatar__ring", {
+      size,
+      variant,
+      status,
+      animation
+    }),
+    style: {
+      borderWidth: ringWidth + "px"
+    }
+  }));
+});
+var AvatarLabel = /* @__PURE__ */ forwardRef3(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+  const Root3 = asChild ? Slot2 : Primitive2.span;
+  const { tx } = useThemeContext();
+  const { labelId } = useAvatarContext("AvatarLabel");
+  return /* @__PURE__ */ React4.createElement(Root3, {
+    ...props,
+    id: labelId,
+    ref: forwardedRef,
+    className: tx("avatar.label", "avatar__label", {
+      srOnly
+    }, classNames)
+  });
+});
+var AvatarDescription = /* @__PURE__ */ forwardRef3(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+  const Root3 = asChild ? Slot2 : Primitive2.span;
+  const { tx } = useThemeContext();
+  const { descriptionId } = useAvatarContext("AvatarDescription");
+  return /* @__PURE__ */ React4.createElement(Root3, {
+    ...props,
+    id: descriptionId,
+    ref: forwardedRef,
+    className: tx("avatar.description", "avatar__description", {
+      srOnly
+    }, classNames)
+  });
+});
+var AvatarMaskedImage = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
+  const { maskId } = useAvatarContext("AvatarFallback");
+  return /* @__PURE__ */ React4.createElement("image", {
+    width: "100%",
+    height: "100%",
+    ...props,
+    mask: `url(#${maskId})`,
+    ref: forwardedRef,
+    preserveAspectRatio: "xMidYMid slice"
+  });
+});
+var AvatarMaskedText = (props) => {
+  const { maskId, size } = useAvatarContext("AvatarFallback");
+  const { large } = props;
+  const fontScale = (large ? 4 : 3) * (1 / 1.612);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React4.createElement("text", {
+    x: "50%",
+    y: "50%",
+    className: tx("avatar.fallbackText", "avatar__fallback-text"),
+    textAnchor: "middle",
+    alignmentBaseline: "central",
+    fontSize: size === "px" ? "200%" : size * fontScale,
+    mask: `url(#${maskId})`
+  }, props.children);
+};
+var AvatarImage = /* @__PURE__ */ forwardRef3(({ onLoadingStatusChange, ...props }, forwardedRef) => {
+  const { size } = useAvatarContext("AvatarImage");
+  const pxSize = size === "px" ? 1 : size * 4;
+  if (pxSize <= 20) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement(AvatarFallbackPrimitive, {
+    asChild: true
+  }, /* @__PURE__ */ React4.createElement(AvatarMaskedImage, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var AvatarIcon = /* @__PURE__ */ forwardRef3(({ onLoadingStatusChange, ...props }, forwardedRef) => {
+  const { size } = useAvatarContext("AvatarIcon");
+  const pxSize = size === "px" ? 1 : size * 4;
+  if (pxSize <= 20) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement(AvatarFallbackPrimitive, {
+    asChild: true
+  }, /* @__PURE__ */ React4.createElement(Icon, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var AvatarFallback = /* @__PURE__ */ forwardRef3(({ delayMs, text, ...props }, forwardedRef) => {
+  const isTextOnly = Boolean(text && /[0-9a-zA-Z]+/.test(text));
+  const { size } = useAvatarContext("AvatarFallback");
+  const numericSize = size === "px" ? 1 : Number(size);
+  return /* @__PURE__ */ React4.createElement(AvatarFallbackPrimitive, {
+    delayMs,
+    asChild: true
+  }, /* @__PURE__ */ React4.createElement(React4.Fragment, null, numericSize >= 6 && /* @__PURE__ */ React4.createElement(AvatarMaskedImage, {
+    ...props,
+    ref: forwardedRef
+  }), text && /* @__PURE__ */ React4.createElement(AvatarMaskedText, {
+    large: !isTextOnly
+  }, text.toLocaleUpperCase())));
+});
+var Avatar = {
+  Root: AvatarRoot,
+  Frame: AvatarFrame,
+  Image: AvatarImage,
+  Icon: AvatarIcon,
+  Fallback: AvatarFallback,
+  Label: AvatarLabel,
+  Description: AvatarDescription
+};
+
+// packages/ui/react-ui/src/components/Avatars/AvatarGroup.tsx
+import React5, { forwardRef as forwardRef4 } from "react";
+import { useId as useId2 } from "@dxos/react-hooks";
+var AvatarGroupRoot = /* @__PURE__ */ forwardRef4(({ labelId: propsLabelId, descriptionId: propsDescriptionId, size, variant, children, classNames }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const labelId = useId2("avatar-group__label", propsLabelId);
+  const descriptionId = useId2("avatar-group__description", propsDescriptionId);
+  return /* @__PURE__ */ React5.createElement(Avatar.Root, {
+    labelId,
+    descriptionId,
+    size,
+    variant,
+    inGroup: true
+  }, /* @__PURE__ */ React5.createElement("div", {
+    role: "group",
+    className: tx("avatar.group", "avatar-group", {}, classNames),
+    "aria-labelledby": labelId,
+    "aria-describedby": descriptionId,
+    ref: forwardedRef
+  }, children));
+});
+var AvatarGroupItemRoot = ({ maskId, size, variant, status, children, ...rest }) => {
+  const { labelId, descriptionId, size: contextSize, variant: contextVariant } = useAvatarContext("AvatarGroupItemRoot");
+  return /* @__PURE__ */ React5.createElement(Avatar.Root, {
+    labelId,
+    descriptionId,
+    maskId,
+    status,
+    size: size ?? contextSize,
+    variant: variant ?? contextVariant,
+    inGroup: true,
+    ...rest
+  }, children);
+};
+var AvatarGroupLabel = /* @__PURE__ */ forwardRef4(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  const { labelId, size } = useAvatarContext("AvatarGroupLabel");
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React5.createElement("span", {
+    ...props,
+    id: labelId,
+    className: tx("avatar.groupLabel", "avatar-group__label", {
+      srOnly,
+      size
+    }, classNames)
+  }, children);
+});
+var AvatarGroupDescription = /* @__PURE__ */ forwardRef4(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  const { descriptionId } = useAvatarContext("AvatarGroupDescription");
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React5.createElement("span", {
+    ...props,
+    id: descriptionId,
+    className: tx("avatar.groupDescription", "avatar-group__description", {
+      srOnly
+    }, classNames)
+  }, children);
+});
+var AvatarGroup = {
+  Root: AvatarGroupRoot,
+  Label: AvatarGroupLabel,
+  Description: AvatarGroupDescription
+};
+var AvatarGroupItem = {
+  Root: AvatarGroupItemRoot
+};
+
+// packages/ui/react-ui/src/components/Breadcrumb/Breadcrumb.tsx
+import { Dot } from "@phosphor-icons/react";
+import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import React7, { forwardRef as forwardRef6 } from "react";
+
+// packages/ui/react-ui/src/components/Link/Link.tsx
+import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import React6, { forwardRef as forwardRef5 } from "react";
+var Link = /* @__PURE__ */ forwardRef5(({ asChild, variant, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot3 : Primitive3.a;
+  return /* @__PURE__ */ React6.createElement(Root3, {
+    ...props,
+    className: tx("link.root", "link", {
+      variant
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+
+// packages/ui/react-ui/src/components/Breadcrumb/Breadcrumb.tsx
+var BreadcrumbRoot = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot4 : Primitive4.div;
+  return /* @__PURE__ */ React7.createElement(Root3, {
+    role: "navigation",
+    ...props,
+    className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbList = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot4 : Primitive4.ol;
+  return /* @__PURE__ */ React7.createElement(Root3, {
+    role: "list",
+    ...props,
+    className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbListItem = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot4 : Primitive4.li;
+  return /* @__PURE__ */ React7.createElement(Root3, {
+    role: "listitem",
+    ...props,
+    className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbLink = /* @__PURE__ */ forwardRef6(({ asChild, ...props }, forwardedRef) => {
+  const Root3 = asChild ? Slot4 : Link;
+  return /* @__PURE__ */ React7.createElement(Root3, {
+    ...props,
+    ref: forwardedRef
+  });
+});
+var BreadcrumbCurrent = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot4 : "h1";
+  return /* @__PURE__ */ React7.createElement(Root3, {
+    ...props,
+    "aria-current": "page",
+    className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React7.createElement(Primitive4.span, {
+    role: "separator",
+    "aria-hidden": "true",
+    ...props,
+    className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
+  }, children ?? /* @__PURE__ */ React7.createElement(Dot, {
+    weight: "bold"
+  }));
+};
+var Breadcrumb = {
+  Root: BreadcrumbRoot,
+  List: BreadcrumbList,
+  ListItem: BreadcrumbListItem,
+  Link: BreadcrumbLink,
+  Current: BreadcrumbCurrent,
+  Separator: BreadcrumbSeparator
+};
+
+// packages/ui/react-ui/src/components/Buttons/Button.tsx
+import { createContext as createContext3 } from "@radix-ui/react-context";
+import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import React8, { forwardRef as forwardRef7 } from "react";
+var BUTTON_GROUP_NAME = "ButtonGroup";
+var BUTTON_NAME = "Button";
+var [ButtonGroupProvider, useButtonGroupContext] = createContext3(BUTTON_GROUP_NAME, {
+  inGroup: false
+});
+var Button = /* @__PURE__ */ forwardRef7(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
+  const { inGroup } = useButtonGroupContext(BUTTON_NAME);
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext(propsElevation);
+  const density = useDensityContext(propsDensity);
+  const Root3 = asChild ? Slot5 : Primitive5.button;
+  return /* @__PURE__ */ React8.createElement(Root3, {
+    ref,
+    ...props,
+    "data-variant": variant,
+    "data-density": density,
+    "data-props": inGroup ? "grouped" : "",
+    className: tx("button.root", "button", {
+      variant,
+      inGroup,
+      disabled: props.disabled,
+      density,
+      elevation
+    }, classNames),
+    ...props.disabled && {
+      disabled: true
+    }
+  }, children);
+});
+Button.displayName = BUTTON_NAME;
+var ButtonGroup = /* @__PURE__ */ forwardRef7(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext(propsElevation);
+  const Root3 = asChild ? Slot5 : Primitive5.div;
+  return /* @__PURE__ */ React8.createElement(Root3, {
+    role: "none",
+    ...props,
+    className: tx("button.group", "button-group", {
+      elevation
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React8.createElement(ButtonGroupProvider, {
+    inGroup: true
+  }, children));
+});
+ButtonGroup.displayName = BUTTON_GROUP_NAME;
+
+// packages/ui/react-ui/src/components/Buttons/Toggle.tsx
+import { Toggle as TogglePrimitive } from "@radix-ui/react-toggle";
+import React9, { forwardRef as forwardRef8 } from "react";
+var Toggle = /* @__PURE__ */ forwardRef8(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React9.createElement(TogglePrimitive, {
+    defaultPressed,
+    pressed,
+    onPressedChange,
+    asChild: true
+  }, /* @__PURE__ */ React9.createElement(Button, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+
+// packages/ui/react-ui/src/components/Buttons/ToggleGroup.tsx
+import { ToggleGroup as ToggleGroupPrimitive, ToggleGroupItem as ToggleGroupItemPrimitive } from "@radix-ui/react-toggle-group";
+import React10, { forwardRef as forwardRef9 } from "react";
+var ToggleGroup = /* @__PURE__ */ forwardRef9(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React10.createElement(ToggleGroupPrimitive, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React10.createElement(ButtonGroup, {
+    classNames,
+    children,
+    ref: forwardedRef
+  }));
+});
+var ToggleGroupItem = /* @__PURE__ */ forwardRef9(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React10.createElement(ToggleGroupItemPrimitive, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React10.createElement(Button, {
+    variant,
+    elevation,
+    density,
+    classNames,
+    children,
+    ref: forwardedRef
+  }));
+});
+
+// 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 React12, { forwardRef as forwardRef10 } from "react";
+
+// packages/ui/react-ui/src/components/ElevationProvider/ElevationProvider.tsx
+import React11, { createContext as createContext4 } from "react";
+var ElevationContext = /* @__PURE__ */ createContext4({
+  elevation: "base"
+});
+var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React11.createElement(ElevationContext.Provider, {
+  value: {
+    elevation
+  }
+}, children);
+
+// packages/ui/react-ui/src/components/Dialogs/Dialog.tsx
+var DialogRoot = DialogRootPrimitive;
+var DialogTrigger = DialogTriggerPrimitive;
+var DialogPortal = DialogPortalPrimitive;
+var DialogTitle = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React12.createElement(DialogTitlePrimitive, {
+    ...props,
+    className: tx("dialog.title", "dialog__title", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var DialogDescription = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React12.createElement(DialogDescriptionPrimitive, {
+    ...props,
+    className: tx("dialog.description", "dialog__description", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var DialogClose = DialogClosePrimitive;
+var DIALOG_OVERLAY_NAME = "DialogOverlay";
+var DIALOG_CONTENT_NAME = "DialogContent";
+var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext5(DIALOG_OVERLAY_NAME, {
+  inOverlayLayout: false
+});
+var DialogOverlay = /* @__PURE__ */ forwardRef10(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React12.createElement(DialogOverlayPrimitive, {
+    ...props,
+    className: tx("dialog.overlay", "dialog__overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
+    ref: forwardedRef,
+    "data-block-align": blockAlign
+  }, /* @__PURE__ */ React12.createElement(OverlayLayoutProvider, {
+    inOverlayLayout: true
+  }, children));
+});
+DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
+var DialogContent = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
+  return /* @__PURE__ */ React12.createElement(DialogContentPrimitive, {
+    ...props,
+    className: tx("dialog.content", "dialog", {
+      inOverlayLayout
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React12.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, children));
+});
+DialogContent.displayName = DIALOG_CONTENT_NAME;
+var Dialog = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose
+};
+
+// 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 React13, { forwardRef as forwardRef11 } from "react";
+var AlertDialogRoot = AlertDialogRootPrimitive;
+var AlertDialogTrigger = AlertDialogTriggerPrimitive;
+var AlertDialogPortal = AlertDialogPortalPrimitive;
+var AlertDialogCancel = AlertDialogCancelPrimitive;
+var AlertDialogAction = AlertDialogActionPrimitive;
+var AlertDialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(AlertDialogTitlePrimitive, {
+    ...props,
+    className: tx("dialog.title", "dialog--alert__title", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var AlertDialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(AlertDialogDescriptionPrimitive, {
+    ...props,
+    className: tx("dialog.description", "dialog--alert__description", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
+var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
+var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext6(ALERT_DIALOG_OVERLAY_NAME, {
+  inOverlayLayout: false
+});
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(AlertDialogOverlayPrimitive, {
+    ...props,
+    className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React13.createElement(OverlayLayoutProvider2, {
+    inOverlayLayout: true
+  }, children));
+});
+AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
+var AlertDialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
+  return /* @__PURE__ */ React13.createElement(AlertDialogContentPrimitive, {
+    ...props,
+    className: tx("dialog.content", "dialog--alert", {
+      inOverlayLayout
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React13.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, children));
+});
+AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
+var AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Portal: AlertDialogPortal,
+  Overlay: AlertDialogOverlay,
+  Content: AlertDialogContent,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Cancel: AlertDialogCancel,
+  Action: AlertDialogAction
+};
+
+// packages/ui/react-ui/src/components/Menus/ContextMenu.tsx
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import React14, { forwardRef as forwardRef12 } from "react";
+var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuPortal = ContextMenuPrimitive.Portal;
+var ContextMenuContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Content, {
+    collisionPadding: 8,
+    ...props,
+    className: tx("menu.content", "menu", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React14.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, children));
+});
+var ContextMenuViewport = /* @__PURE__ */ forwardRef12(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot6 : Primitive6.div;
+  return /* @__PURE__ */ React14.createElement(Root3, {
+    ...props,
+    className: tx("menu.viewport", "menu__viewport", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ContextMenuArrow = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Arrow, {
+    ...props,
+    className: tx("menu.arrow", "menu__arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
+var ContextMenuItem = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Item, {
+    ...props,
+    className: tx("menu.item", "menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.CheckboxItem, {
+    ...props,
+    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Separator, {
+    ...props,
+    className: tx("menu.separator", "menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Label, {
+    ...props,
+    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenu2 = {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Portal: ContextMenuPortal,
+  Content: ContextMenuContent,
+  Viewport: ContextMenuViewport,
+  Arrow: ContextMenuArrow,
+  Group: ContextMenuGroup,
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  ItemIndicator: ContextMenuItemIndicator,
+  Separator: ContextMenuSeparator,
+  GroupLabel: ContextMenuGroupLabel
+};
+
+// packages/ui/react-ui/src/components/Menus/DropdownMenu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import React15, { forwardRef as forwardRef13 } from "react";
+var DropdownMenuRoot = DropdownMenuPrimitive.DropdownMenu;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var useDropdownMenuContext2 = DropdownMenuPrimitive.useDropdownMenuContext;
+var useDropdownMenuMenuScope2 = DropdownMenuPrimitive.useDropdownMenuMenuScope;
+var DropdownMenuContent = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Content, {
+    sideOffset: 4,
+    collisionPadding: 8,
+    ...props,
+    className: tx("menu.content", "menu", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React15.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, children));
+});
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef13(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot7 : Primitive7.div;
+  return /* @__PURE__ */ React15.createElement(Root3, {
+    ...props,
+    className: tx("menu.viewport", "menu__viewport", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Arrow, {
+    ...props,
+    className: tx("menu.arrow", "menu__arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuItemIndicator = DropdownMenuPrimitive.ItemIndicator;
+var DropdownMenuItem = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Item, {
+    ...props,
+    className: tx("menu.item", "menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.CheckboxItem, {
+    ...props,
+    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Separator, {
+    ...props,
+    className: tx("menu.separator", "menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Label, {
+    ...props,
+    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenu2 = {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  Portal: DropdownMenuPortal,
+  Content: DropdownMenuContent,
+  Viewport: DropdownMenuViewport,
+  Arrow: DropdownMenuArrow,
+  Group: DropdownMenuGroup,
+  Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  ItemIndicator: DropdownMenuItemIndicator,
+  Separator: DropdownMenuSeparator,
+  GroupLabel: DropdownMenuGroupLabel
+};
+
+// 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 React16, { forwardRef as forwardRef14, 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 Label3 = /* @__PURE__ */ forwardRef14(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React16.createElement(LabelPrimitive, {
+    ...props,
+    className: tx("input.label", "input__label", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var Description = /* @__PURE__ */ forwardRef14(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React16.createElement(DescriptionPrimitive, {
+    ...props,
+    className: tx("input.description", "input__description", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var Validation = /* @__PURE__ */ forwardRef14(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React16.createElement(ValidationPrimitive, {
+    ...props,
+    className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
+      srOnly,
+      validationValence
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef14(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React16.createElement(DescriptionAndValidationPrimitive, {
+    ...props,
+    className: tx("input.descriptionAndValidation", "input__description-and-validation", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var PinInput = /* @__PURE__ */ forwardRef14(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+  const { tx } = useThemeContext();
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  const segmentClassName = useCallback(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
+    variant: "static",
+    focused,
+    disabled: props.disabled,
+    density,
+    elevation,
+    validationValence
+  }, propsSegmentClassName), [
+    tx,
+    props.disabled,
+    elevation,
+    propsElevation,
+    density
+  ]);
+  return /* @__PURE__ */ React16.createElement(PinInputPrimitive, {
+    ...props,
+    segmentClassName,
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    inputClassName: tx("input.inputWithSegments", "input input--pin", {
+      disabled: props.disabled
+    }, inputClassName),
+    ref: forwardedRef
+  });
+});
+var TextInput = /* @__PURE__ */ forwardRef14(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+  const themeContextValue = useThemeContext();
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+  const { tx } = themeContextValue;
+  return /* @__PURE__ */ React16.createElement(TextInputPrimitive, {
+    ...props,
+    className: tx("input.input", "input", {
+      variant,
+      disabled: props.disabled,
+      density,
+      elevation,
+      validationValence
+    }, classNames),
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    ref: forwardedRef
+  });
+});
+var TextArea = /* @__PURE__ */ forwardRef14(({ __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__ */ React16.createElement(TextAreaPrimitive, {
+    ...props,
+    className: tx("input.input", "input--text-area", {
+      variant,
+      disabled: props.disabled,
+      density,
+      elevation,
+      validationValence
+    }, classNames),
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    ref: forwardedRef
+  });
+});
+var Checkbox = /* @__PURE__ */ forwardRef14(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+  const [checked, onCheckedChange] = useControllableState({
+    prop: propsChecked,
+    defaultProp: propsDefaultChecked,
+    onChange: propsOnCheckedChange
+  });
+  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+  const { tx } = useThemeContext();
+  const Icon3 = checked === "indeterminate" ? Minus : checked ? Check : Fragment;
+  return /* @__PURE__ */ React16.createElement(CheckboxPrimitive, {
+    ...props,
+    checked,
+    onCheckedChange,
+    id,
+    "aria-describedby": descriptionId,
+    ...validationValence === "error" && {
+      "aria-invalid": "true",
+      "aria-errormessage": errorMessageId
+    },
+    className: tx("input.checkbox", "input--checkbox", {
+      size
+    }, "shrink-0", classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React16.createElement(CheckboxIndicatorPrimitive, {
+    asChild: true
+  }, /* @__PURE__ */ React16.createElement(Icon3, checked && {
+    weight,
+    className: tx("input.checkboxIndicator", "input--checkbox__indicator", {
+      size
+    })
+  })));
+});
+var Switch = /* @__PURE__ */ forwardRef14(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const [checked, onCheckedChange] = useControllableState({
+    prop: propsChecked,
+    defaultProp: propsDefaultChecked,
+    onChange: propsOnCheckedChange
+  });
+  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React16.createElement(SwitchPrimitive, {
+    ...props,
+    checked,
+    onCheckedChange,
+    id,
+    "aria-describedby": descriptionId,
+    ...validationValence === "error" && {
+      "aria-invalid": "true",
+      "aria-errormessage": errorMessageId
+    },
+    className: tx("input.switch", "input--switch", {
+      size
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React16.createElement(SwitchThumbPrimitive, {
+    className: tx("input.switchThumb", "input--switch__thumb", {
+      size
+    })
+  }));
+});
+var Input = {
+  Root: InputRoot,
+  PinInput,
+  TextInput,
+  TextArea,
+  Checkbox,
+  Switch,
+  Label: Label3,
+  Description,
+  Validation,
+  DescriptionAndValidation
+};
+
+// 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 React18, { forwardRef as forwardRef15 } 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/DensityProvider/DensityProvider.tsx
+import React17, { createContext as createContext7 } from "react";
+var DensityContext = /* @__PURE__ */ createContext7({
+  density: "fine"
+});
+var DensityProvider = ({ density, children }) => /* @__PURE__ */ React17.createElement(DensityContext.Provider, {
+  value: {
+    density
+  }
+}, children);
+
+// packages/ui/react-ui/src/components/Lists/List.tsx
+var List = /* @__PURE__ */ forwardRef15(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext(props.density);
+  return /* @__PURE__ */ React18.createElement(DensityProvider, {
+    density
+  }, /* @__PURE__ */ React18.createElement(ListPrimitive, {
+    ...props,
+    className: tx("list.root", "list", {}, classNames),
+    ref: forwardedRef
+  }, children));
+});
+var ListItemEndcap = /* @__PURE__ */ forwardRef15(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Root3 = asChild ? Slot8 : "div";
+  const density = useDensityContext();
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React18.createElement(Root3, {
+    ...!asChild && {
+      role: "none"
+    },
+    ...props,
+    className: tx("list.item.endcap", "list__listItem__endcap", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var MockListItemOpenTrigger = ({ classNames, ...props }) => {
+  const density = useDensityContext();
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React18.createElement("div", {
+    role: "none",
+    ...props,
+    className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
+      density
+    }, classNames)
+  });
+};
+var ListItemHeading = /* @__PURE__ */ forwardRef15(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return /* @__PURE__ */ React18.createElement(ListPrimitiveItemHeading, {
+    ...props,
+    className: tx("list.item.heading", "list__listItem__heading", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef15(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
+  const Icon3 = open ? CaretDown : CaretRight;
+  return /* @__PURE__ */ React18.createElement(ListPrimitiveItemOpenTrigger, {
+    ...props,
+    className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, children || /* @__PURE__ */ React18.createElement(Icon3, {
+    weight: "bold",
+    className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
+  }));
+});
+var ListItemRoot = /* @__PURE__ */ forwardRef15(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return /* @__PURE__ */ React18.createElement(ListPrimitiveItem, {
+    ...props,
+    className: tx("list.item.root", "list__listItem", {
+      density,
+      collapsible: props.collapsible
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ListItem = {
+  Root: ListItemRoot,
+  Endcap: ListItemEndcap,
+  Heading: ListItemHeading,
+  OpenTrigger: ListItemOpenTrigger,
+  CollapsibleContent: ListItemCollapsibleContent,
+  MockOpenTrigger: MockListItemOpenTrigger
+};
+
+// packages/ui/react-ui/src/components/Lists/Tree.tsx
+import React19, { forwardRef as forwardRef16 } from "react";
+var TreeRoot = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+  return /* @__PURE__ */ React19.createElement(List, {
+    ...props,
+    ref: forwardedRef
+  });
+});
+var TreeBranch = /* @__PURE__ */ forwardRef16(({ __listScope, ...props }, forwardedRef) => {
+  const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
+  return /* @__PURE__ */ React19.createElement(List, {
+    ...props,
+    "aria-labelledby": headingId,
+    ref: forwardedRef
+  });
+});
+var TreeItemRoot = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+  return /* @__PURE__ */ React19.createElement(ListItem.Root, {
+    role: "treeitem",
+    ...props,
+    ref: forwardedRef
+  });
+});
+var TreeItemHeading = ListItem.Heading;
+var TreeItemOpenTrigger = ListItem.OpenTrigger;
+var MockTreeItemOpenTrigger = ListItem.MockOpenTrigger;
+var TreeItemBody = ListItem.CollapsibleContent;
+var Tree = {
+  Root: TreeRoot,
+  Branch: TreeBranch
+};
+var TreeItem = {
+  Root: TreeItemRoot,
+  Heading: TreeItemHeading,
+  Body: TreeItemBody,
+  OpenTrigger: TreeItemOpenTrigger,
+  MockOpenTrigger: MockTreeItemOpenTrigger
+};
+
+// packages/ui/react-ui/src/components/Lists/Treegrid.tsx
+import { useFocusableGroup, useArrowNavigationGroup } from "@fluentui/react-tabster";
+import { createContextScope } from "@radix-ui/react-context";
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
+import { Slot as Slot9 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React20, { forwardRef as forwardRef17 } from "react";
+var TREEGRID_ROW_NAME = "TreegridRow";
+var [createTreegridRowContext, createTreegridRowScope] = createContextScope(TREEGRID_ROW_NAME, []);
+var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
+var PATH_SEPARATOR = "~";
+var PARENT_OF_SEPARATOR = " ";
+var TreegridRoot = /* @__PURE__ */ forwardRef17(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot9 : Primitive8.div;
+  const arrowNavigationAttrs = useArrowNavigationGroup({
+    axis: "vertical",
+    tabbable: false,
+    circular: true
+  });
+  return /* @__PURE__ */ React20.createElement(Root3, {
+    role: "treegrid",
+    ...arrowNavigationAttrs,
+    ...props,
+    className: tx("treegrid.root", "treegrid", {}, classNames),
+    style: {
+      ...style,
+      gridTemplateColumns
+    },
+    ref: forwardedRef
+  }, children);
+});
+var TreegridRow = /* @__PURE__ */ forwardRef17(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot9 : Primitive8.div;
+  const pathParts = id.split(PATH_SEPARATOR);
+  const level = pathParts.length - 1;
+  const [open, onOpenChange] = useControllableState2({
+    prop: propsOpen,
+    onChange: propsOnOpenChange,
+    defaultProp: defaultOpen
+  });
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited"
+  });
+  const arrowGroupAttrs = useArrowNavigationGroup({
+    axis: "horizontal",
+    tabbable: false,
+    circular: false,
+    memorizeCurrent: false
+  });
+  return /* @__PURE__ */ React20.createElement(TreegridRowProvider, {
+    open,
+    onOpenChange,
+    scope: __treegridRowScope
+  }, /* @__PURE__ */ React20.createElement(Root3, {
+    role: "row",
+    "aria-level": level,
+    className: tx("treegrid.row", "treegrid__row", {
+      level
+    }, classNames),
+    ...parentOf && {
+      "aria-expanded": open,
+      "aria-owns": parentOf
+    },
+    tabIndex: 0,
+    ...focusableGroupAttrs,
+    ...props,
+    id,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React20.createElement("div", {
+    role: "none",
+    className: "contents",
+    ...arrowGroupAttrs
+  }, children)));
+});
+var TreegridCell = /* @__PURE__ */ forwardRef17(({ classNames, children, indent, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React20.createElement("div", {
+    role: "gridcell",
+    className: tx("treegrid.cell", "treegrid__cell", {
+      indent
+    }, classNames),
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+var Treegrid = {
+  Root: TreegridRoot,
+  Row: TreegridRow,
+  Cell: TreegridCell,
+  PARENT_OF_SEPARATOR,
+  PATH_SEPARATOR,
+  createTreegridRowScope,
+  useTreegridRowContext
+};
+
+// packages/ui/react-ui/src/components/Main/Main.tsx
+import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { createContext as createContext8 } from "@radix-ui/react-context";
+import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/react-dialog";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
+import React21, { forwardRef as forwardRef18, useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState4 } 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 useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
+var MotionState;
+(function(MotionState2) {
+  MotionState2[MotionState2["IDLE"] = 0] = "IDLE";
+  MotionState2[MotionState2["DEBOUNCING"] = 1] = "DEBOUNCING";
+  MotionState2[MotionState2["FOLLOWING"] = 2] = "FOLLOWING";
+})(MotionState || (MotionState = {}));
+var useSwipeToDismiss = (ref, {
+  onDismiss,
+  dismissThreshold = 64,
+  debounceThreshold = 8,
+  offset = 0
+  /* side = 'inline-start' */
+}) => {
+  const $root = ref.current;
+  const [motionState, setMotionState] = useState3(0);
+  const [gestureStartX, setGestureStartX] = useState3(0);
+  const setIdle = useCallback2(() => {
+    setMotionState(0);
+    $root?.style.removeProperty("inset-inline-start");
+    $root?.style.setProperty("transition-duration", "200ms");
+  }, [
+    $root
+  ]);
+  const setFollowing = useCallback2(() => {
+    setMotionState(2);
+    $root?.style.setProperty("transition-duration", "0ms");
+  }, [
+    $root
+  ]);
+  const handlePointerDown = useCallback2(({ screenX }) => {
+    if (motionState === 0) {
+      setMotionState(1);
+      setGestureStartX(screenX);
+    }
+  }, [
+    motionState
+  ]);
+  const handlePointerMove = useCallback2(({ screenX }) => {
+    if ($root) {
+      const delta = Math.min(screenX - gestureStartX, 0);
+      switch (motionState) {
+        case 2:
+          if (Math.abs(delta) > dismissThreshold) {
+            setIdle();
+            onDismiss?.();
+          } else {
+            $root.style.setProperty("inset-inline-start", `${offset + delta}px`);
+          }
+          break;
+        case 1:
+          if (Math.abs(delta) > debounceThreshold) {
+            setFollowing();
+          }
+          break;
+      }
+    }
+  }, [
+    $root,
+    motionState,
+    gestureStartX
+  ]);
+  const handlePointerUp = useCallback2(() => {
+    setIdle();
+  }, [
+    setIdle
+  ]);
+  useEffect3(() => {
+    $root?.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      $root?.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [
+    $root,
+    handlePointerDown
+  ]);
+  useEffect3(() => {
+    $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
+    return () => {
+      document.documentElement.removeEventListener("pointermove", handlePointerMove);
+    };
+  }, [
+    $root,
+    handlePointerMove
+  ]);
+  useEffect3(() => {
+    $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      document.documentElement.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [
+    $root,
+    handlePointerUp
+  ]);
+};
+
+// packages/ui/react-ui/src/components/Main/Main.tsx
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui/src/components/Main/Main.tsx";
+var MAIN_ROOT_NAME = "MainRoot";
+var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
+var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
+var MAIN_NAME = "Main";
+var GENERIC_CONSUMER_NAME = "GenericConsumer";
+var landmarkAttr = "data-main-landmark";
+var useLandmarkMover = (propsOnKeyDown, landmark) => {
+  const handleKeyDown = useCallback3((event) => {
+    const target = event.target;
+    if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
+      event.preventDefault();
+      const landmarks = Array.from(document.querySelectorAll(`[${landmarkAttr}]:not([inert])`)).map((el) => el.hasAttribute(landmarkAttr) ? parseInt(el.getAttribute(landmarkAttr)) : NaN).sort();
+      const l = landmarks.length;
+      const cursor = landmarks.indexOf(parseInt(target.getAttribute(landmarkAttr)));
+      const nextLandmark = landmarks[(cursor + l + (event.getModifierState("Shift") ? -1 : 1)) % l];
+      document.querySelector(`[${landmarkAttr}="${nextLandmark}"]`)?.focus();
+    }
+    propsOnKeyDown?.(event);
+  }, [
+    propsOnKeyDown
+  ]);
+  const focusableAttrs = useFocusableGroup2({
+    tabBehavior: "limited",
+    ignoreDefaultKeydown: {
+      Tab: true
+    }
+  });
+  return {
+    onKeyDown: handleKeyDown,
+    [landmarkAttr]: landmark,
+    tabIndex: 0,
+    ...focusableAttrs
+  };
+};
+var [MainProvider, useMainContext] = createContext8(MAIN_NAME, {
+  resizing: false,
+  navigationSidebarOpen: false,
+  setNavigationSidebarOpen: (nextOpen) => {
+    log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
+      F: __dxlog_file,
+      L: 81,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  },
+  complementarySidebarOpen: false,
+  setComplementarySidebarOpen: (nextOpen) => {
+    log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
+      F: __dxlog_file,
+      L: 86,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+});
+var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
+  const { setNavigationSidebarOpen, navigationSidebarOpen, setComplementarySidebarOpen, complementarySidebarOpen } = useMainContext(consumerName);
+  return {
+    navigationSidebarOpen,
+    setNavigationSidebarOpen,
+    toggleNavigationSidebar: useCallback3(() => setNavigationSidebarOpen(!navigationSidebarOpen), [
+      navigationSidebarOpen,
+      setNavigationSidebarOpen
+    ]),
+    openNavigationSidebar: useCallback3(() => setNavigationSidebarOpen(true), [
+      setNavigationSidebarOpen
+    ]),
+    closeNavigationSidebar: useCallback3(() => setNavigationSidebarOpen(false), [
+      setNavigationSidebarOpen
+    ]),
+    complementarySidebarOpen,
+    setComplementarySidebarOpen,
+    toggleComplementarySidebar: useCallback3(() => setComplementarySidebarOpen(!complementarySidebarOpen), [
+      complementarySidebarOpen,
+      setComplementarySidebarOpen
+    ]),
+    openComplementarySidebar: useCallback3(() => setComplementarySidebarOpen(true), [
+      setComplementarySidebarOpen
+    ]),
+    closeComplementarySidebar: useCallback3(() => setComplementarySidebarOpen(false), [
+      setComplementarySidebarOpen
+    ])
+  };
+};
+var resizeDebounce = 3e3;
+var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavigationSidebarOpen, onNavigationSidebarOpenChange, complementarySidebarOpen: propsComplementarySidebarOpen, defaultComplementarySidebarOpen, onComplementarySidebarOpenChange, children, ...props }) => {
+  const [isLg] = useMediaQuery("lg", {
+    ssr: false
+  });
+  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = useControllableState3({
+    prop: propsNavigationSidebarOpen,
+    defaultProp: defaultNavigationSidebarOpen,
+    onChange: onNavigationSidebarOpenChange
+  });
+  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = useControllableState3({
+    prop: propsComplementarySidebarOpen,
+    defaultProp: defaultComplementarySidebarOpen,
+    onChange: onComplementarySidebarOpenChange
+  });
+  const [resizing, setResizing] = useState4(false);
+  const resizeInterval = useRef(null);
+  const handleResize = useCallback3(() => {
+    setResizing(true);
+    if (resizeInterval.current) {
+      clearTimeout(resizeInterval.current);
+    }
+    resizeInterval.current = setTimeout(() => {
+      setResizing(false);
+      resizeInterval.current = null;
+    }, resizeDebounce);
+  }, []);
+  useEffect4(() => {
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [
+    handleResize
+  ]);
+  return /* @__PURE__ */ React21.createElement(MainProvider, {
+    ...props,
+    navigationSidebarOpen,
+    setNavigationSidebarOpen,
+    complementarySidebarOpen,
+    setComplementarySidebarOpen,
+    resizing
+  }, children);
+};
+MainRoot.displayName = MAIN_ROOT_NAME;
+var handleOpenAutoFocus = (event) => {
+  !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
+};
+var MainSidebar = /* @__PURE__ */ forwardRef18(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery("lg", {
+    ssr: false
+  });
+  const { tx } = useThemeContext();
+  const ref = useForwardedRef(forwardedRef);
+  const noopRef = useRef(null);
+  useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
+    onDismiss: () => setOpen(false)
+  });
+  const handleKeyDown = useCallback3((event) => {
+    if (event.key === "Escape") {
+      event.target.closest("[data-tabster]")?.focus();
+    }
+    props.onKeyDown?.(event);
+  }, [
+    props.onKeyDown
+  ]);
+  const Root3 = isLg ? Primitive9.div : DialogContent2;
+  return /* @__PURE__ */ React21.createElement(DialogRoot2, {
+    open,
+    modal: false
+  }, /* @__PURE__ */ React21.createElement(Root3, {
+    ...!isLg && {
+      forceMount: true,
+      tabIndex: -1,
+      onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
+    },
+    ...props,
+    "data-side": side === "inline-end" ? "ie" : "is",
+    "data-state": open ? "open" : "closed",
+    "data-resizing": resizing ? "true" : "false",
+    className: tx("main.sidebar", "main__sidebar", {}, classNames),
+    onKeyDown: handleKeyDown,
+    ...!open && {
+      inert: "true"
+    },
+    ref
+  }, /* @__PURE__ */ React21.createElement(ElevationProvider, {
+    elevation: "group"
+  }, children)));
+});
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "0");
+  return /* @__PURE__ */ React21.createElement(MainSidebar, {
+    ...mover,
+    ...props,
+    open: navigationSidebarOpen,
+    setOpen: setNavigationSidebarOpen,
+    resizing,
+    side: "inline-start",
+    ref: forwardedRef
+  });
+});
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+  const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "2");
+  return /* @__PURE__ */ React21.createElement(MainSidebar, {
+    ...mover,
+    ...props,
+    open: complementarySidebarOpen,
+    setOpen: setComplementarySidebarOpen,
+    resizing,
+    side: "inline-end",
+    ref: forwardedRef
+  });
+});
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+var MainContent = /* @__PURE__ */ forwardRef18(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+  const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot10 : role ? "div" : "main";
+  const mover = useLandmarkMover(props.onKeyDown, "1");
+  return /* @__PURE__ */ React21.createElement(Root3, {
+    role,
+    ...handlesFocus && {
+      ...mover
+    },
+    ...props,
+    "data-sidebar-inline-start-state": navigationSidebarOpen ? "open" : "closed",
+    "data-sidebar-inline-end-state": complementarySidebarOpen ? "open" : "closed",
+    className: tx("main.content", "main", {
+      bounce,
+      handlesFocus
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+MainContent.displayName = MAIN_NAME;
+var MainOverlay = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery("lg", {
+    ssr: false
+  });
+  const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React21.createElement("div", {
+    onClick: () => {
+      setNavigationSidebarOpen(false);
+      setComplementarySidebarOpen(false);
+    },
+    ...props,
+    className: tx("main.overlay", "main__overlay", {
+      isLg,
+      inlineStartSidebarOpen: navigationSidebarOpen,
+      inlineEndSidebarOpen: complementarySidebarOpen
+    }, classNames),
+    "data-state": navigationSidebarOpen || complementarySidebarOpen ? "open" : "closed",
+    "aria-hidden": "true",
+    ref: forwardedRef
+  });
+});
+var MainNotch = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
+  const notchElement = useRef(null);
+  const ref = useComposedRefs(forwardedRef, notchElement);
+  const handleKeyDown = useCallback3((event) => {
+    switch (event.key) {
+      case "Escape":
+        props?.onKeyDown?.(event);
+        notchElement.current?.focus();
+    }
+  }, [
+    props?.onKeyDown
+  ]);
+  const mover = useLandmarkMover(handleKeyDown, "3");
+  return /* @__PURE__ */ React21.createElement("div", {
+    role: "toolbar",
+    ...mover,
+    ...props,
+    "data-nav-sidebar-state": navigationSidebarOpen ? "open" : "closed",
+    className: tx("main.notch", "main__notch", {}, classNames),
+    ref
+  });
+});
+var Main = {
+  Root: MainRoot,
+  Content: MainContent,
+  Overlay: MainOverlay,
+  NavigationSidebar: MainNavigationSidebar,
+  ComplementarySidebar: MainComplementarySidebar,
+  Notch: MainNotch
+};
+
+// packages/ui/react-ui/src/components/Message/Message.tsx
+import { createContext as createContext9 } from "@radix-ui/react-context";
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { Slot as Slot11 } from "@radix-ui/react-slot";
+import React22, { forwardRef as forwardRef19 } from "react";
+import { useId as useId3 } from "@dxos/react-hooks";
+var MESSAGE_NAME = "Message";
+var [MessageProvider, useMessageContext] = createContext9(MESSAGE_NAME);
+var MessageRoot = /* @__PURE__ */ forwardRef19(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const titleId = useId3("message__title", propsTitleId);
+  const descriptionId = useId3("message__description", propsDescriptionId);
+  const elevation = useElevationContext(propsElevation);
+  const Root3 = asChild ? Slot11 : Primitive10.div;
+  return /* @__PURE__ */ React22.createElement(MessageProvider, {
+    titleId,
+    descriptionId
+  }, /* @__PURE__ */ React22.createElement(Root3, {
+    ...props,
+    className: tx("message.root", "message", {
+      valence,
+      elevation
+    }, className),
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId,
+    ref: forwardedRef
+  }, children));
+});
+MessageRoot.displayName = MESSAGE_NAME;
+var MESSAGE_TITLE_NAME = "MessageTitle";
+var MessageTitle = /* @__PURE__ */ forwardRef19(({ asChild, className, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
+  const Root3 = asChild ? Slot11 : Primitive10.h2;
+  return /* @__PURE__ */ React22.createElement(Root3, {
+    ...props,
+    className: tx("message.title", "message__title", {}, className),
+    id: titleId,
+    ref: forwardedRef
+  }, children);
+});
+MessageTitle.displayName = MESSAGE_TITLE_NAME;
+var MESSAGE_BODY_NAME = "MessageBody";
+var MessageBody = /* @__PURE__ */ forwardRef19(({ asChild, className, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
+  const Root3 = asChild ? Slot11 : Primitive10.p;
+  return /* @__PURE__ */ React22.createElement(Root3, {
+    ...props,
+    className: tx("message.body", "message__body", {}, className),
+    id: descriptionId,
+    ref: forwardedRef
+  }, children);
+});
+MessageBody.displayName = MESSAGE_BODY_NAME;
+var Message = {
+  Root: MessageRoot,
+  Title: MessageTitle,
+  Body: MessageBody
+};
+
+// packages/ui/react-ui/src/components/Popover/Popover.tsx
+import { Root as PopoverRootPrimitive, PopoverContent as PopoverContentPrimitive, PopoverTrigger as PopoverTriggerPrimitive, PopoverAnchor as PopoverAnchorPrimitive, PopoverPortal as PopoverPortalPrimitive, PopoverArrow as PopoverArrowPrimitive, PopoverClose as PopoverClosePrimitive } from "@radix-ui/react-popover";
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { Slot as Slot12 } from "@radix-ui/react-slot";
+import React23, { forwardRef as forwardRef20 } from "react";
+var PopoverRoot = PopoverRootPrimitive;
+var PopoverPortal = PopoverPortalPrimitive;
+var PopoverTrigger = PopoverTriggerPrimitive;
+var PopoverAnchor = PopoverAnchorPrimitive;
+var PopoverClose = PopoverClosePrimitive;
+var PopoverArrow = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React23.createElement(PopoverArrowPrimitive, {
+    ...props,
+    className: tx("popover.arrow", "popover__arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var PopoverContent = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React23.createElement(PopoverContentPrimitive, {
+    sideOffset: 4,
+    collisionPadding: 8,
+    ...props,
+    className: tx("popover.content", "popover", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React23.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, children));
+});
+var PopoverViewport = /* @__PURE__ */ forwardRef20(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot12 : Primitive11.div;
+  return /* @__PURE__ */ React23.createElement(Root3, {
+    ...props,
+    className: tx("popover.viewport", "popover__viewport", {
+      constrainInline,
+      constrainBlock
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var Popover = {
+  Root: PopoverRoot,
+  Portal: PopoverPortal,
+  Trigger: PopoverTrigger,
+  Anchor: PopoverAnchor,
+  Arrow: PopoverArrow,
+  Close: PopoverClose,
+  Content: PopoverContent,
+  Viewport: PopoverViewport
+};
+
+// packages/ui/react-ui/src/components/Status/Status.tsx
+import React24, { forwardRef as forwardRef21 } from "react";
+var Status = /* @__PURE__ */ forwardRef21(({ classNames, children, progress = 0, indeterminate, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React24.createElement("span", {
+    role: "status",
+    ...props,
+    className: tx("status.root", "status", {
+      indeterminate
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React24.createElement("span", {
+    role: "none",
+    className: tx("status.bar", "status__bar", {
+      indeterminate
+    }, classNames),
+    ...!indeterminate && {
+      style: {
+        width: `${Math.round(progress * 100)}%`
+      }
+    }
+  }), children);
+});
+
+// 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 React25, { forwardRef as forwardRef22 } from "react";
+var ScrollAreaRoot = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitiveRoot, {
+    ...props,
+    className: tx("scrollArea.root", "scroll-area", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ScrollAreaViewport = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitiveViewport, {
+    ...props,
+    className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef22(({ classNames, variant = "fine", ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitiveScrollbar, {
+    "data-variant": variant,
+    ...props,
+    className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ScrollAreaThumb = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitiveThumb, {
+    ...props,
+    className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ScrollAreaCorner = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitiveCorner, {
+    ...props,
+    className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ScrollArea = {
+  Root: ScrollAreaRoot,
+  Viewport: ScrollAreaViewport,
+  Scrollbar: ScrollAreaScrollbar,
+  Thumb: ScrollAreaThumb,
+  Corner: ScrollAreaCorner
+};
+
+// 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 React26, { forwardRef as forwardRef23 } from "react";
+var SelectRoot = SelectPrimitive.Root;
+var SelectTrigger = SelectPrimitive.Trigger;
+var SelectValue = SelectPrimitive.Value;
+var SelectIcon = SelectPrimitive.Icon;
+var SelectPortal = SelectPrimitive.Portal;
+var SelectTriggerButton = /* @__PURE__ */ forwardRef23(({ children, placeholder, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Trigger, {
+    asChild: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React26.createElement(Button, props, /* @__PURE__ */ React26.createElement(SelectPrimitive.Value, {
+    placeholder
+  }, children), /* @__PURE__ */ React26.createElement("span", {
+    className: "w-1 flex-1"
+  }), /* @__PURE__ */ React26.createElement(SelectPrimitive.Icon, {
+    asChild: true
+  }, /* @__PURE__ */ React26.createElement(CaretDown2, {
+    className: tx("select.triggerIcon", "select__trigger__icon", {}),
+    weight: "bold"
+  }))));
+});
+var SelectContent = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Content, {
+    ...props,
+    className: tx("select.content", "select__content", {}, classNames),
+    position: "popper",
+    ref: forwardedRef
+  }, children);
+});
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.SelectScrollUpButton, {
+    ...props,
+    className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
+    ref: forwardedRef
+  }, children ?? /* @__PURE__ */ React26.createElement(CaretUp, {
+    weight: "bold"
+  }));
+});
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.SelectScrollDownButton, {
+    ...props,
+    className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
+    ref: forwardedRef
+  }, children ?? /* @__PURE__ */ React26.createElement(CaretDown2, {
+    weight: "bold"
+  }));
+});
+var SelectViewport = SelectPrimitive.Viewport;
+var SelectItem = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Item, {
+    ...props,
+    className: tx("select.item", "option", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var SelectItemText = SelectPrimitive.ItemText;
+var SelectItemIndicator = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.ItemIndicator, {
+    ...props,
+    className: tx("select.itemIndicator", "option__indicator", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var SelectOption = /* @__PURE__ */ forwardRef23(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Item, {
+    ...props,
+    className: tx("select.item", "option", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React26.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React26.createElement("span", {
+    className: "grow w-1"
+  }), /* @__PURE__ */ React26.createElement(Icon, {
+    icon: "ph--check--regular"
+  }));
+});
+var SelectGroup = SelectPrimitive.Group;
+var SelectLabel = SelectPrimitive.Label;
+var SelectSeparator = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Separator, {
+    ...props,
+    className: tx("select.separator", "select__separator", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var SelectArrow = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Arrow, {
+    ...props,
+    className: tx("select.arrow", "select__arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  TriggerButton: SelectTriggerButton,
+  Value: SelectValue,
+  Icon: SelectIcon,
+  Portal: SelectPortal,
+  Content: SelectContent,
+  ScrollUpButton: SelectScrollUpButton2,
+  ScrollDownButton: SelectScrollDownButton2,
+  Viewport: SelectViewport,
+  Item: SelectItem,
+  ItemText: SelectItemText,
+  ItemIndicator: SelectItemIndicator,
+  Option: SelectOption,
+  Group: SelectGroup,
+  Label: SelectLabel,
+  Separator: SelectSeparator,
+  Arrow: SelectArrow
+};
+
+// packages/ui/react-ui/src/components/Separator/Separator.tsx
+import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
+import React27 from "react";
+var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React27.createElement(SeparatorPrimitive, {
+    orientation,
+    ...props,
+    className: tx("separator.root", "separator", {
+      orientation
+    }, classNames)
+  });
+};
+
+// 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 React28, { forwardRef as forwardRef24 } from "react";
+var Tag = /* @__PURE__ */ forwardRef24(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot13 : Primitive12.span;
+  return /* @__PURE__ */ React28.createElement(Root3, {
+    ...props,
+    className: tx("tag.root", "tag", {
+      palette
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+
+// packages/ui/react-ui/src/components/Toast/Toast.tsx
+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 React29, { forwardRef as forwardRef25 } from "react";
+var ToastProvider = ToastProviderPrimitive;
+var ToastViewport = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React29.createElement(ToastViewportPrimitive, {
+    className: tx("toast.viewport", "toast-viewport", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastRoot = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React29.createElement(ToastRootPrimitive, {
+    ...props,
+    className: tx("toast.root", "toast", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React29.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, children));
+});
+var ToastBody = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React29.createElement(Root3, {
+    ...props,
+    className: tx("toast.body", "toast__body", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastTitle = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot14 : ToastTitlePrimitive;
+  return /* @__PURE__ */ React29.createElement(Root3, {
+    ...props,
+    className: tx("toast.title", "toast__title", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastDescription = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot14 : ToastDescriptionPrimitive;
+  return /* @__PURE__ */ React29.createElement(Root3, {
+    ...props,
+    className: tx("toast.description", "toast__description", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastActions = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React29.createElement(Root3, {
+    ...props,
+    className: tx("toast.actions", "toast__actions", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ToastAction = ToastActionPrimitive;
+var ToastClose = ToastClosePrimitive;
+var Toast = {
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  Root: ToastRoot,
+  Body: ToastBody,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Actions: ToastActions,
+  Action: ToastAction,
+  Close: ToastClose
+};
+
+// packages/ui/react-ui/src/components/Toolbar/Toolbar.tsx
+import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
+import React30, { forwardRef as forwardRef26 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef26(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.Root, {
+    ...props,
+    className: tx("toolbar.root", "toolbar", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ToolbarButton = /* @__PURE__ */ forwardRef26((props, forwardedRef) => {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React30.createElement(Button, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggle = /* @__PURE__ */ forwardRef26((props, forwardedRef) => {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React30.createElement(Toggle, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarLink = /* @__PURE__ */ forwardRef26((props, forwardedRef) => {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.Link, {
+    asChild: true
+  }, /* @__PURE__ */ React30.createElement(Link, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef26(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React30.createElement(ButtonGroup, {
+    classNames,
+    children,
+    elevation,
+    ref: forwardedRef
+  }));
+});
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef26(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    ...props,
+    asChild: true
+  }, /* @__PURE__ */ React30.createElement(Button, {
+    variant,
+    density,
+    elevation,
+    classNames,
+    children,
+    ref: forwardedRef
+  }));
+});
+var ToolbarSeparator = (props) => {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.Separator, {
+    asChild: true
+  }, /* @__PURE__ */ React30.createElement(Separator4, {
+    orientation: "vertical",
+    ...props
+  }));
+};
+var Toolbar = {
+  Root: ToolbarRoot,
+  Button: ToolbarButton,
+  Link: ToolbarLink,
+  Toggle: ToolbarToggle,
+  ToggleGroup: ToolbarToggleGroup2,
+  ToggleGroupItem: ToolbarToggleGroupItem,
+  Separator: ToolbarSeparator
+};
+
+// 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";
+import React31, { forwardRef as forwardRef27 } from "react";
+var TooltipProvider = TooltipProviderPrimitive;
+var TooltipRoot = TooltipRootPrimitive;
+var TooltipPortal = TooltipPortalPrimitive;
+var TooltipTrigger = TooltipTriggerPrimitive;
+var TooltipArrow = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React31.createElement(TooltipArrowPrimitive, {
+    ...props,
+    className: tx("tooltip.arrow", "tooltip__arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var TooltipContent = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React31.createElement(TooltipContentPrimitive, {
+    sideOffset: 4,
+    collisionPadding: 8,
+    ...props,
+    className: tx("tooltip.content", "tooltip", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var Tooltip = {
+  Provider: TooltipProvider,
+  Root: TooltipRoot,
+  Portal: TooltipPortal,
+  Trigger: TooltipTrigger,
+  Arrow: TooltipArrow,
+  Content: TooltipContent
+};
+
+// packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
+import { createKeyborg } from "keyborg";
+import React32, { createContext as createContext10, useEffect as useEffect5 } from "react";
+
+// packages/ui/react-ui/src/util/hasIosKeyboard.ts
+var hasIosKeyboard = () => {
+  return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
+};
+
+// packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
+var ThemeContext = /* @__PURE__ */ createContext10(void 0);
+var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", rootElevation = "base" }) => {
+  useEffect5(() => {
+    if (document.defaultView) {
+      const kb = createKeyborg(document.defaultView);
+      kb.subscribe(handleInputModalityChange);
+      return () => kb.unsubscribe(handleInputModalityChange);
+    }
+  }, []);
+  return /* @__PURE__ */ React32.createElement(ThemeContext.Provider, {
+    value: {
+      tx,
+      themeMode,
+      hasIosKeyboard: hasIosKeyboard()
+    }
+  }, /* @__PURE__ */ React32.createElement(TranslationsProvider, {
+    fallback,
+    resourceExtensions,
+    appNs
+  }, /* @__PURE__ */ React32.createElement(ElevationProvider, {
+    elevation: rootElevation
+  }, /* @__PURE__ */ React32.createElement(DensityProvider, {
+    density: rootDensity
+  }, children))));
+};
+var handleInputModalityChange = (isUsingKeyboard) => {
+  if (isUsingKeyboard) {
+    document.body.setAttribute("data-is-keyboard", "true");
+  } else {
+    document.body.removeAttribute("data-is-keyboard");
+  }
+};
+export {
+  AlertDialog,
+  AnchoredOverflow,
+  Avatar,
+  AvatarGroup,
+  AvatarGroupItem,
+  BUTTON_GROUP_NAME,
+  Breadcrumb,
+  Button,
+  ButtonGroup,
+  ContextMenu2 as ContextMenu,
+  DensityContext,
+  DensityProvider,
+  Dialog,
+  DropdownMenu2 as DropdownMenu,
+  ElevationContext,
+  ElevationProvider,
+  Icon,
+  Input,
+  LIST_ITEM_NAME,
+  LIST_NAME,
+  Link,
+  List,
+  ListItem,
+  Main,
+  Message,
+  Popover,
+  ScrollArea,
+  Select,
+  Separator4 as Separator,
+  Status,
+  Tag,
+  ThemeContext,
+  ThemeProvider,
+  Toast,
+  Toggle,
+  ToggleGroup,
+  ToggleGroupItem,
+  Toolbar,
+  Tooltip,
+  Trans,
+  Tree,
+  TreeItem,
+  Treegrid,
+  hasIosKeyboard,
+  isLabel,
+  toLocalizedString,
+  useAvatarContext,
+  useButtonGroupContext,
+  useDensityContext,
+  useDropdownMenuContext2 as useDropdownMenuContext,
+  useDropdownMenuMenuScope2 as useDropdownMenuMenuScope,
+  useElevationContext,
+  useListContext,
+  useListItemContext,
+  useMainContext,
+  useSidebars,
+  useThemeContext,
+  useTranslation,
+  useTranslationsContext,
+  useVisualViewport
+};
+//# sourceMappingURL=index.mjs.map