@dxos/react-ui 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/dist/lib/node/index.cjs

@@ -32,8 +32,6 @@ __export(node_exports, {
   AlertDialog: () => AlertDialog,
   AnchoredOverflow: () => AnchoredOverflow,
   Avatar: () => Avatar,
-  AvatarGroup: () => AvatarGroup,
-  AvatarGroupItem: () => AvatarGroupItem,
   BUTTON_GROUP_NAME: () => BUTTON_GROUP_NAME,
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
@@ -87,6 +85,7 @@ __export(node_exports, {
   useDropdownMenuContext: () => useDropdownMenuContext,
   useDropdownMenuMenuScope: () => useDropdownMenuMenuScope,
   useElevationContext: () => useElevationContext,
+  useIconHref: () => useIconHref,
   useLandmarkMover: () => useLandmarkMover,
   useListContext: () => import_react_list.useListContext,
   useListItemContext: () => import_react_list.useListItemContext,
@@ -108,35 +107,36 @@ var import_react = __toESM(require("react"));
 var import_react2 = require("react");
 var import_react3 = require("react");
 var import_react4 = require("react");
-var import_react_hooks = require("@dxos/react-hooks");
+var import_debug = require("@dxos/debug");
 var import_react5 = require("react");
+var import_react_hooks = require("@dxos/react-hooks");
+var import_react6 = require("react");
 var import_locale = require("date-fns/locale");
 var import_i18next = __toESM(require("i18next"));
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_react_i18next2 = require("react-i18next");
-var import_react7 = require("react");
-var import_debug = require("@dxos/debug");
 var import_react8 = require("react");
 var import_react_hooks2 = require("@dxos/react-hooks");
-var import_react_avatar = require("@radix-ui/react-avatar");
+var import_dx_avatar = require("@dxos/lit-ui/dx-avatar.pcss");
+var import_react9 = require("@lit/react");
 var import_react_context = require("@radix-ui/react-context");
 var import_react_primitive2 = require("@radix-ui/react-primitive");
 var import_react_slot2 = require("@radix-ui/react-slot");
-var import_react9 = __toESM(require("react"));
-var import_react_hooks3 = require("@dxos/react-hooks");
 var import_react10 = __toESM(require("react"));
-var import_react11 = __toESM(require("react"));
-var import_react_hooks4 = require("@dxos/react-hooks");
-var import_react12 = require("@phosphor-icons/react");
+var import_lit_ui = require("@dxos/lit-ui");
+var import_react_hooks3 = require("@dxos/react-hooks");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_react11 = require("@phosphor-icons/react");
 var import_react_primitive3 = require("@radix-ui/react-primitive");
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_react13 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_react_primitive4 = require("@radix-ui/react-primitive");
 var import_react_slot4 = require("@radix-ui/react-slot");
-var import_react14 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_react_context2 = require("@radix-ui/react-context");
 var import_react_primitive5 = require("@radix-ui/react-primitive");
 var import_react_slot5 = require("@radix-ui/react-slot");
+var import_react14 = __toESM(require("react"));
 var import_react15 = __toESM(require("react"));
 var import_react16 = __toESM(require("react"));
 var import_react_tooltip = require("@radix-ui/react-tooltip");
@@ -148,7 +148,7 @@ var import_react_toggle_group = require("@radix-ui/react-toggle-group");
 var import_react20 = __toESM(require("react"));
 var import_react21 = __toESM(require("react"));
 var import_react22 = __toESM(require("react"));
-var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_keyborg = require("keyborg");
 var import_react23 = __toESM(require("react"));
 var import_react24 = __toESM(require("react"));
@@ -177,6 +177,7 @@ var import_react_checkbox = require("@radix-ui/react-checkbox");
 var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
 var import_react30 = __toESM(require("react"));
 var import_react_input = require("@dxos/react-input");
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
 var import_react31 = require("@phosphor-icons/react");
 var import_react_slot8 = require("@radix-ui/react-slot");
 var import_react32 = __toESM(require("react"));
@@ -197,13 +198,13 @@ var import_react_slot10 = require("@radix-ui/react-slot");
 var import_react_use_controllable_state4 = require("@radix-ui/react-use-controllable-state");
 var import_react37 = __toESM(require("react"));
 var import_log = require("@dxos/log");
-var import_react_hooks5 = require("@dxos/react-hooks");
+var import_react_hooks4 = require("@dxos/react-hooks");
 var import_react38 = require("react");
 var import_react_context8 = require("@radix-ui/react-context");
 var import_react_primitive10 = require("@radix-ui/react-primitive");
 var import_react_slot11 = require("@radix-ui/react-slot");
 var import_react39 = __toESM(require("react"));
-var import_react_hooks6 = require("@dxos/react-hooks");
+var import_react_hooks5 = require("@dxos/react-hooks");
 var import_primitive2 = require("@radix-ui/primitive");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
 var import_react_context9 = require("@radix-ui/react-context");
@@ -246,6 +247,13 @@ var useElevationContext = (propsElevation) => {
   const { elevation } = (0, import_react3.useContext)(ElevationContext);
   return propsElevation ?? elevation;
 };
+var useThemeContext = () => (0, import_react4.useContext)(ThemeContext) ?? (0, import_debug.raise)(new Error("Missing ThemeContext"));
+var ICONS_URL = "/icons.svg";
+var useIconHref = (icon) => {
+  const { noCache } = useThemeContext();
+  const url = noCache ? `${ICONS_URL}?nocache=${(/* @__PURE__ */ new Date()).getMinutes()}` : ICONS_URL;
+  return icon ? `${url}#${icon}` : void 0;
+};
 var initialSafeArea = {
   top: NaN,
   right: NaN,
@@ -253,8 +261,8 @@ var initialSafeArea = {
   left: NaN
 };
 var useSafeArea = () => {
-  const [padding, setPadding] = (0, import_react4.useState)(initialSafeArea);
-  const handleResize = (0, import_react4.useCallback)(() => {
+  const [padding, setPadding] = (0, import_react5.useState)(initialSafeArea);
+  const handleResize = (0, import_react5.useCallback)(() => {
     setPadding({
       top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
       right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-right")),
@@ -285,21 +293,21 @@ void import_i18next.default.use(import_react_i18next2.initReactI18next).init({
     escapeValue: false
   }
 });
-var TranslationsContext = /* @__PURE__ */ (0, import_react6.createContext)({
+var TranslationsContext = /* @__PURE__ */ (0, import_react7.createContext)({
   appNs: initialNs,
   dtLocale: initialDtLocale
 });
 var useTranslation = (...args) => {
   const result = (0, import_react_i18next2.useTranslation)(...args);
-  const { dtLocale } = (0, import_react6.useContext)(TranslationsContext);
+  const { dtLocale } = (0, import_react7.useContext)(TranslationsContext);
   return {
     ...result,
     dtLocale
   };
 };
 var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
-  const [loaded, setLoaded] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     setLoaded(false);
     if (resourceExtensions && resourceExtensions.length) {
       resourceExtensions.forEach((resource) => {
@@ -314,17 +322,16 @@ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtL
   }, [
     resourceExtensions
   ]);
-  return /* @__PURE__ */ import_react6.default.createElement(TranslationsContext.Provider, {
+  return /* @__PURE__ */ import_react7.default.createElement(TranslationsContext.Provider, {
     value: {
       appNs: appNs ?? initialNs,
       dtLocale: dtLocale ?? initialDtLocale
     }
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react6.Suspense, {
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react7.Suspense, {
     fallback
   }, loaded ? children : fallback));
 };
-var useTranslationsContext = () => (0, import_react5.useContext)(TranslationsContext);
-var useThemeContext = () => (0, import_react7.useContext)(ThemeContext) ?? (0, import_debug.raise)(new Error("Missing ThemeContext"));
+var useTranslationsContext = () => (0, import_react6.useContext)(TranslationsContext);
 var useVisualViewport = (deps) => {
   const [width, setWidth] = (0, import_react8.useState)(null);
   const [height, setHeight] = (0, import_react8.useState)(null);
@@ -364,111 +371,37 @@ var AnchoredOverflow = {
   Root: AnchoredOverflowRoot,
   Anchor: AnchoredOverflowAnchor
 };
-var ICONS_URL = "/icons.svg";
-var Icon = /* @__PURE__ */ (0, import_react10.memo)(/* @__PURE__ */ (0, import_react10.forwardRef)(({ icon, classNames, size, ...props }, forwardedRef) => {
-  const { tx, noCache } = useThemeContext();
-  const url = noCache ? `${ICONS_URL}?nocache=${(/* @__PURE__ */ new Date()).getMinutes()}` : ICONS_URL;
-  return /* @__PURE__ */ import_react10.default.createElement("svg", {
-    ...props,
-    className: tx("icon.root", "icon", {
-      size
-    }, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ import_react10.default.createElement("use", {
-    href: `${url}#${icon}`
-  }));
-}));
 var AVATAR_NAME = "Avatar";
 var [AvatarProvider, useAvatarContext] = (0, import_react_context.createContext)(AVATAR_NAME);
-var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children, labelId: propsLabelId, descriptionId: propsDescriptionId, maskId: propsMaskId, inGroup, hue }) => {
+var AvatarRoot = ({ children, labelId: propsLabelId, descriptionId: propsDescriptionId }) => {
   const labelId = (0, import_react_hooks3.useId)("avatar__label", propsLabelId);
   const descriptionId = (0, import_react_hooks3.useId)("avatar__description", propsDescriptionId);
-  const maskId = (0, import_react_hooks3.useId)("avatar__mask", propsMaskId);
-  return /* @__PURE__ */ import_react9.default.createElement(AvatarProvider, {
+  return /* @__PURE__ */ import_react10.default.createElement(AvatarProvider, {
     labelId,
-    descriptionId,
-    maskId,
-    size,
-    variant,
-    status,
-    animation,
-    inGroup,
-    hue
+    descriptionId
   }, children);
 };
-var rx = "0.25rem";
-var AvatarFrame = /* @__PURE__ */ (0, import_react9.forwardRef)(({ 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__ */ import_react9.default.createElement(import_react_avatar.Root, {
-    role: "img",
-    ...props,
-    className: tx("avatar.root", "avatar", {
-      size,
-      variant,
-      inGroup
-    }, classNames),
-    ref: forwardedRef,
-    ...!inGroup && {
-      "aria-labelledby": labelId,
-      "aria-describedby": descriptionId
-    }
-  }, /* @__PURE__ */ import_react9.default.createElement("svg", {
-    viewBox: `0 0 ${sizePx} ${sizePx}`,
-    width: sizePx,
-    height: sizePx,
-    className: tx("avatar.frame", "avatar__frame", {
-      variant
-    })
-  }, /* @__PURE__ */ import_react9.default.createElement("defs", null, /* @__PURE__ */ import_react9.default.createElement("mask", {
-    id: maskId
-  }, variant === "circle" ? /* @__PURE__ */ import_react9.default.createElement("circle", {
-    fill: "white",
-    cx: "50%",
-    cy: "50%",
-    r
-  }) : /* @__PURE__ */ import_react9.default.createElement("rect", {
-    fill: "white",
-    width: 2 * r,
-    height: 2 * r,
-    x: ringGap + ringWidth,
-    y: ringGap + ringWidth,
-    rx
-  }))), variant === "circle" ? /* @__PURE__ */ import_react9.default.createElement("circle", {
-    cx: "50%",
-    cy: "50%",
-    r,
-    fill: hue ? `var(--dx-${hue}Fill)` : "var(--surface-bg)"
-  }) : /* @__PURE__ */ import_react9.default.createElement("rect", {
-    fill: hue ? `var(--dx-${hue}Fill)` : "var(--surface-bg)",
-    x: ringGap + ringWidth,
-    y: ringGap + ringWidth,
-    width: 2 * r,
-    height: 2 * r,
-    rx
-  }), children), /* @__PURE__ */ import_react9.default.createElement("span", {
-    role: "none",
-    className: tx("avatar.ring", "avatar__ring", {
-      size,
-      variant,
-      status,
-      animation
-    }),
-    style: {
-      borderWidth: ringWidth + "px"
-    }
-  }));
+var DxAvatar = (0, import_react9.createComponent)({
+  tagName: "dx-avatar",
+  elementClass: import_lit_ui.DxAvatar,
+  react: import_react10.default
 });
-var AvatarLabel = /* @__PURE__ */ (0, import_react9.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+var AvatarContent = ({ icon, classNames, ...props }) => {
+  const href = useIconHref(icon);
+  const { labelId, descriptionId } = useAvatarContext("AvatarContent");
+  return /* @__PURE__ */ import_react10.default.createElement(DxAvatar, {
+    ...props,
+    icon: href,
+    labelId,
+    "aria-describedby": descriptionId,
+    rootClassName: (0, import_react_ui_theme.mx)(classNames)
+  });
+};
+var AvatarLabel = /* @__PURE__ */ (0, import_react10.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
   const Root5 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
   const { tx } = useThemeContext();
   const { labelId } = useAvatarContext("AvatarLabel");
-  return /* @__PURE__ */ import_react9.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react10.default.createElement(Root5, {
     ...props,
     id: labelId,
     ref: forwardedRef,
@@ -477,11 +410,11 @@ var AvatarLabel = /* @__PURE__ */ (0, import_react9.forwardRef)(({ asChild, srOn
     }, classNames)
   });
 });
-var AvatarDescription = /* @__PURE__ */ (0, import_react9.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+var AvatarDescription = /* @__PURE__ */ (0, import_react10.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
   const Root5 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
   const { tx } = useThemeContext();
   const { descriptionId } = useAvatarContext("AvatarDescription");
-  return /* @__PURE__ */ import_react9.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react10.default.createElement(Root5, {
     ...props,
     id: descriptionId,
     ref: forwardedRef,
@@ -490,147 +423,16 @@ var AvatarDescription = /* @__PURE__ */ (0, import_react9.forwardRef)(({ asChild
     }, classNames)
   });
 });
-var AvatarMaskedImage = /* @__PURE__ */ (0, import_react9.forwardRef)((props, forwardedRef) => {
-  const { maskId } = useAvatarContext("AvatarFallback");
-  return /* @__PURE__ */ import_react9.default.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__ */ import_react9.default.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__ */ (0, import_react9.forwardRef)(({ onLoadingStatusChange, ...props }, forwardedRef) => {
-  const { size } = useAvatarContext("AvatarImage");
-  const pxSize = size === "px" ? 1 : size * 4;
-  if (pxSize <= 20) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_avatar.Fallback, {
-    asChild: true
-  }, /* @__PURE__ */ import_react9.default.createElement(AvatarMaskedImage, {
-    ...props,
-    ref: forwardedRef
-  }));
-});
-var AvatarIcon = /* @__PURE__ */ (0, import_react9.forwardRef)(({ onLoadingStatusChange, ...props }, forwardedRef) => {
-  const { size } = useAvatarContext("AvatarIcon");
-  const pxSize = size === "px" ? 1 : size * 4;
-  if (pxSize <= 20) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_avatar.Fallback, {
-    asChild: true
-  }, /* @__PURE__ */ import_react9.default.createElement(Icon, {
-    ...props,
-    ref: forwardedRef
-  }));
-});
-var AvatarFallback = /* @__PURE__ */ (0, import_react9.forwardRef)(({ 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__ */ import_react9.default.createElement(import_react_avatar.Fallback, {
-    delayMs,
-    asChild: true
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, numericSize >= 6 && /* @__PURE__ */ import_react9.default.createElement(AvatarMaskedImage, {
-    ...props,
-    ref: forwardedRef
-  }), text && /* @__PURE__ */ import_react9.default.createElement(AvatarMaskedText, {
-    large: !isTextOnly
-  }, text.toLocaleUpperCase())));
-});
 var Avatar = {
   Root: AvatarRoot,
-  Frame: AvatarFrame,
-  Image: AvatarImage,
-  Icon: AvatarIcon,
-  Fallback: AvatarFallback,
+  Content: AvatarContent,
   Label: AvatarLabel,
   Description: AvatarDescription
 };
-var AvatarGroupRoot = /* @__PURE__ */ (0, import_react11.forwardRef)(({ labelId: propsLabelId, descriptionId: propsDescriptionId, size, variant, children, classNames }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const labelId = (0, import_react_hooks4.useId)("avatar-group__label", propsLabelId);
-  const descriptionId = (0, import_react_hooks4.useId)("avatar-group__description", propsDescriptionId);
-  return /* @__PURE__ */ import_react11.default.createElement(Avatar.Root, {
-    labelId,
-    descriptionId,
-    size,
-    variant,
-    inGroup: true
-  }, /* @__PURE__ */ import_react11.default.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__ */ import_react11.default.createElement(Avatar.Root, {
-    labelId,
-    descriptionId,
-    maskId,
-    status,
-    size: size ?? contextSize,
-    variant: variant ?? contextVariant,
-    inGroup: true,
-    ...rest
-  }, children);
-};
-var AvatarGroupLabel = /* @__PURE__ */ (0, import_react11.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
-  const { labelId, size } = useAvatarContext("AvatarGroupLabel");
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react11.default.createElement("span", {
-    ...props,
-    id: labelId,
-    className: tx("avatar.groupLabel", "avatar-group__label", {
-      srOnly,
-      size
-    }, classNames)
-  }, children);
-});
-var AvatarGroupDescription = /* @__PURE__ */ (0, import_react11.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
-  const { descriptionId } = useAvatarContext("AvatarGroupDescription");
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react11.default.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
-};
-var Link = /* @__PURE__ */ (0, import_react14.forwardRef)(({ asChild, variant, classNames, ...props }, forwardedRef) => {
+var Link = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, variant, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot4.Slot : import_react_primitive4.Primitive.a;
-  return /* @__PURE__ */ import_react14.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
     ...props,
     className: tx("link.root", "link", {
       variant
@@ -638,47 +440,47 @@ var Link = /* @__PURE__ */ (0, import_react14.forwardRef)(({ asChild, variant, c
     ref: forwardedRef
   });
 });
-var BreadcrumbRoot = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbRoot = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.div;
-  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
     role: "navigation",
     ...props,
     className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbList = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbList = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.ol;
-  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
     role: "list",
     ...props,
     className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbListItem = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbListItem = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.li;
-  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
     role: "listitem",
     ...props,
     className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbLink = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, ...props }, forwardedRef) => {
+var BreadcrumbLink = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, ...props }, forwardedRef) => {
   const Root5 = asChild ? import_react_slot3.Slot : Link;
-  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
     ...props,
     ref: forwardedRef
   });
 });
-var BreadcrumbCurrent = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbCurrent = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot3.Slot : "h1";
-  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
     ...props,
     "aria-current": "page",
     className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -687,12 +489,12 @@ var BreadcrumbCurrent = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChil
 });
 var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_primitive3.Primitive.span, {
+  return /* @__PURE__ */ import_react12.default.createElement(import_react_primitive3.Primitive.span, {
     role: "separator",
     "aria-hidden": "true",
     ...props,
     className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
-  }, children ?? /* @__PURE__ */ import_react13.default.createElement(import_react12.Dot, {
+  }, children ?? /* @__PURE__ */ import_react12.default.createElement(import_react11.Dot, {
     weight: "bold"
   }));
 };
@@ -709,13 +511,13 @@ var BUTTON_NAME = "Button";
 var [ButtonGroupProvider, useButtonGroupContext] = (0, import_react_context2.createContext)(BUTTON_GROUP_NAME, {
   inGroup: false
 });
-var Button = /* @__PURE__ */ (0, import_react15.memo)(/* @__PURE__ */ (0, import_react15.forwardRef)(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
+var Button = /* @__PURE__ */ (0, import_react14.memo)(/* @__PURE__ */ (0, import_react14.forwardRef)(({ 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 Root5 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.button;
-  return /* @__PURE__ */ import_react15.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react14.default.createElement(Root5, {
     ref,
     ...props,
     "data-variant": variant,
@@ -734,22 +536,35 @@ var Button = /* @__PURE__ */ (0, import_react15.memo)(/* @__PURE__ */ (0, import
   }, children);
 }));
 Button.displayName = BUTTON_NAME;
-var ButtonGroup = /* @__PURE__ */ (0, import_react15.forwardRef)(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
+var ButtonGroup = /* @__PURE__ */ (0, import_react14.forwardRef)(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
   const Root5 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.div;
-  return /* @__PURE__ */ import_react15.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react14.default.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("button.group", "button-group", {
       elevation
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react15.default.createElement(ButtonGroupProvider, {
+  }, /* @__PURE__ */ import_react14.default.createElement(ButtonGroupProvider, {
     inGroup: true
   }, children));
 });
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
+var Icon = /* @__PURE__ */ (0, import_react16.memo)(/* @__PURE__ */ (0, import_react16.forwardRef)(({ icon, classNames, size, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const href = useIconHref(icon);
+  return /* @__PURE__ */ import_react16.default.createElement("svg", {
+    ...props,
+    className: tx("icon.root", "icon", {
+      size
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ import_react16.default.createElement("use", {
+    href
+  }));
+}));
 var propIsNumber = (prop) => Number.isFinite(prop);
 var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
 var safePadding = (propsPadding, safePadding2, side) => {
@@ -801,23 +616,23 @@ var Tooltip = {
   Arrow: TooltipArrow,
   Content: TooltipContent
 };
-var IconOnlyButton = /* @__PURE__ */ (0, import_react16.forwardRef)(({ noTooltip, tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react16.useState)(false);
+var IconOnlyButton = /* @__PURE__ */ (0, import_react15.forwardRef)(({ noTooltip, tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react15.useState)(false);
   if (noTooltip) {
-    return /* @__PURE__ */ import_react16.default.createElement(LabelledIconButton, {
+    return /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
       ...props,
       ref: forwardedRef
     });
   }
-  const content = /* @__PURE__ */ import_react16.default.createElement(Tooltip.Content, {
+  const content = /* @__PURE__ */ import_react15.default.createElement(Tooltip.Content, {
     ...zIndex && {
       style: {
         zIndex
       }
     },
     side: tooltipSide
-  }, props.label, /* @__PURE__ */ import_react16.default.createElement(Tooltip.Arrow, null));
-  return /* @__PURE__ */ import_react16.default.createElement(Tooltip.Root, {
+  }, props.label, /* @__PURE__ */ import_react15.default.createElement(Tooltip.Arrow, null));
+  return /* @__PURE__ */ import_react15.default.createElement(Tooltip.Root, {
     open: triggerTooltipOpen,
     onOpenChange: (nextOpen) => {
       if (suppressNextTooltip?.current) {
@@ -827,34 +642,34 @@ var IconOnlyButton = /* @__PURE__ */ (0, import_react16.forwardRef)(({ noTooltip
         setTriggerTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ import_react16.default.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ import_react15.default.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ import_react16.default.createElement(LabelledIconButton, {
+  }, /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
     ...props,
     ref: forwardedRef
-  })), tooltipPortal ? /* @__PURE__ */ import_react16.default.createElement(Tooltip.Portal, null, content) : content);
+  })), tooltipPortal ? /* @__PURE__ */ import_react15.default.createElement(Tooltip.Portal, null, content) : content);
 });
-var LabelledIconButton = /* @__PURE__ */ (0, import_react16.forwardRef)(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props }, forwardedRef) => {
+var LabelledIconButton = /* @__PURE__ */ (0, import_react15.forwardRef)(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react16.default.createElement(Button, {
+  return /* @__PURE__ */ import_react15.default.createElement(Button, {
     ...props,
     classNames: tx("iconButton.root", "iconButton", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react16.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react15.default.createElement(Icon, {
     icon,
     size,
     classNames: iconClassNames
-  }), /* @__PURE__ */ import_react16.default.createElement("span", {
+  }), /* @__PURE__ */ import_react15.default.createElement("span", {
     className: iconOnly ? "sr-only" : void 0
-  }, label), caretDown && /* @__PURE__ */ import_react16.default.createElement(Icon, {
+  }, label), caretDown && /* @__PURE__ */ import_react15.default.createElement(Icon, {
     size: 3,
     icon: "ph--caret-down--bold"
   }));
 });
-var IconButton = /* @__PURE__ */ (0, import_react16.forwardRef)((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ import_react16.default.createElement(IconOnlyButton, {
+var IconButton = /* @__PURE__ */ (0, import_react15.forwardRef)((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ import_react15.default.createElement(IconOnlyButton, {
   ...props,
   ref: forwardedRef
-}) : /* @__PURE__ */ import_react16.default.createElement(LabelledIconButton, {
+}) : /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
   ...props,
   ref: forwardedRef
 }));
@@ -986,7 +801,7 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
     "data-testid": "copy-invitation"
   }, /* @__PURE__ */ import_react22.default.createElement("div", {
     role: "none",
-    className: (0, import_react_ui_theme.mx)("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+    className: (0, import_react_ui_theme2.mx)("flex gap-1 items-center", isCopied && inactiveLabelStyles)
   }, /* @__PURE__ */ import_react22.default.createElement("span", {
     className: "pli-1"
   }, t("copy label")), /* @__PURE__ */ import_react22.default.createElement(Icon, {
@@ -995,7 +810,7 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
     ...iconProps
   })), /* @__PURE__ */ import_react22.default.createElement("div", {
     role: "none",
-    className: (0, import_react_ui_theme.mx)("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+    className: (0, import_react_ui_theme2.mx)("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
   }, /* @__PURE__ */ import_react22.default.createElement("span", {
     className: "pli-1"
   }, t("copy success label")), /* @__PURE__ */ import_react22.default.createElement(Icon, {
@@ -1754,7 +1569,7 @@ var Switch = /* @__PURE__ */ (0, import_react30.forwardRef)(({ __inputScope, che
   const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
   return /* @__PURE__ */ import_react30.default.createElement("input", {
     type: "checkbox",
-    className: "dx-checkbox--switch dx-focus-ring",
+    className: (0, import_react_ui_theme3.mx)("dx-checkbox--switch dx-focus-ring", classNames),
     checked,
     onChange: (event) => {
       onCheckedChange(event.target.checked);
@@ -2244,7 +2059,7 @@ var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
 };
 var resizeDebounce = 3e3;
 var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
-  const [isLg] = (0, import_react_hooks5.useMediaQuery)("lg", {
+  const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
     ssr: false
   });
   const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
@@ -2289,12 +2104,12 @@ var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
 var MainSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
-  const [isLg] = (0, import_react_hooks5.useMediaQuery)("lg", {
+  const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
     ssr: false
   });
   const { tx } = useThemeContext();
   const { t } = useTranslation();
-  const ref = (0, import_react_hooks5.useForwardedRef)(forwardedRef);
+  const ref = (0, import_react_hooks4.useForwardedRef)(forwardedRef);
   const noopRef = (0, import_react37.useRef)(null);
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => onStateChange?.("closed")
@@ -2382,7 +2197,7 @@ var MainContent = /* @__PURE__ */ (0, import_react37.forwardRef)(({ asChild, cla
 });
 MainContent.displayName = MAIN_NAME;
 var MainOverlay = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
-  const [isLg] = (0, import_react_hooks5.useMediaQuery)("lg", {
+  const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
     ssr: false
   });
   const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
@@ -2414,8 +2229,8 @@ var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = (0, import_react_context8.createContext)(MESSAGE_NAME);
 var MessageRoot = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const titleId = (0, import_react_hooks6.useId)("message__title", propsTitleId);
-  const descriptionId = (0, import_react_hooks6.useId)("message__description", propsDescriptionId);
+  const titleId = (0, import_react_hooks5.useId)("message__title", propsTitleId);
+  const descriptionId = (0, import_react_hooks5.useId)("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
   const Root5 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.div;
   return /* @__PURE__ */ import_react39.default.createElement(MessageProvider, {
@@ -3161,8 +2976,6 @@ var Toolbar = {
   AlertDialog,
   AnchoredOverflow,
   Avatar,
-  AvatarGroup,
-  AvatarGroupItem,
   BUTTON_GROUP_NAME,
   Breadcrumb,
   Button,
@@ -3216,6 +3029,7 @@ var Toolbar = {
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
   useElevationContext,
+  useIconHref,
   useLandmarkMover,
   useListContext,
   useListItemContext,