@sanity/ui 5.0.0-alpha.5 → 5.0.0-alpha.6

package/dist/index.d.ts

@@ -670,9 +670,11 @@ export declare interface ModalProps extends Omit<
   onClose: React.ReactEventHandler<HTMLDialogElement>;
   /** Whether the modal is open; defaults to false. */
   open?: boolean;
+  /** Max width of the modal */
+  size?: Responsive<ContainerSize>;
 }
 
-declare function ModalRoot(props: ModalProps): JSX.Element;
+declare function ModalRoot({ open, size, ...props }: ModalProps): JSX.Element;
 
 declare namespace ModalRoot {
   var displayName: string;
@@ -742,6 +744,33 @@ export declare type PlacementProps = {
   placement?: Placement;
 };
 
+/** @beta */
+export declare const Popover: typeof PopoverRoot & {
+  forwardsTriggerProps: boolean;
+};
+
+/** @beta */
+export declare interface PopoverProps
+  extends
+    Omit<React.ComponentProps<"div">, "children" | "content">,
+    PlacementProps {
+  /** Anchor name for positioning */
+  anchorName?: React.ReactNode;
+  /** Focusable trigger element */
+  children: React.ReactElement<Record<string, unknown>>;
+  /** Popover content */
+  content?: React.ReactNode;
+  /** Render tooltip in portal */
+  portal?: boolean;
+}
+
+declare function PopoverRoot({
+  placement,
+  ...props
+}: PopoverProps & {
+  triggerProps?: Record<string, unknown>;
+}): JSX.Element;
+
 declare const POSITION: readonly [
   "absolute",
   "fixed",
@@ -952,8 +981,8 @@ declare type ToneProps = {
   tone?: Tone;
 };
 
-/** @public */
-export declare function Tooltip({ placement, ...props }: TooltipProps): any;
+/** @beta */
+export declare const Tooltip: typeof TooltipRoot;
 
 /** @public */
 export declare function TooltipGroup<T extends ElementType = "div">(
@@ -969,15 +998,28 @@ export declare interface TooltipGroupProps<
   as?: T;
 }
 
-/** @public */
+/** @beta */
 export declare interface TooltipProps
-  extends React.ComponentProps<"div">, PlacementProps {
-  /** Tooltip text */
-  text?: React.ReactNode;
-  /** Disabled state */
-  disabled?: boolean;
+  extends
+    Omit<React.ComponentProps<"div">, "children" | "content">,
+    PlacementProps {
+  /** Anchor name for positioning */
+  anchorName?: React.ReactNode;
+  /** Focusable trigger element */
+  children: React.ReactElement<Record<string, unknown>>;
+  /** Tooltip content */
+  content?: React.ReactNode;
+  /** Render tooltip in portal */
+  portal?: boolean;
 }
 
+declare function TooltipRoot({
+  placement,
+  ...props
+}: TooltipProps & {
+  triggerProps?: Record<string, unknown>;
+}): JSX.Element;
+
 /** @public */
 export declare interface TypographyProps extends MarginProps, ToneProps {
   /** CSS **text-align** property */
@@ -992,6 +1034,9 @@ export declare interface TypographyProps extends MarginProps, ToneProps {
   weight?: FontWeight;
 }
 
+/** @public */
+export declare function useIsClient(): boolean;
+
 /** @public */
 export declare function VisuallyHidden<T extends ElementType = "span">(
   props: VisuallyHiddenProps<T> &

package/dist/index.js

@@ -2,8 +2,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import clsx from "clsx";
-import { isValidElement, useRef, useEffect, lazy, Suspense, Children, useId, useState, cloneElement } from "react";
+import { isValidElement, useRef, useEffect, lazy, Suspense, Children, useId, useSyncExternalStore, useState, cloneElement, Activity } from "react";
 import { SpinnerIcon, RemoveIcon, CheckmarkIcon, CloseIcon } from "@sanity/icons";
+import { createPortal } from "react-dom";
 const PREFIX = "sui", BREAKPOINTS_LENGTH = 6;
 function getProps(componentProps, propDefs) {
   const {
@@ -95,7 +96,7 @@ function getCompositeValue(propValue, propDef, key) {
     compositeValue = mapping?.[propValue];
   return compositeValue;
 }
-const HASH = "024922";
+const HASH = "71d7e5";
 function suffixClassName(className) {
   return `${className}-${HASH}`;
 }
@@ -866,7 +867,7 @@ function Checkbox(props) {
   useEffect(() => {
     inputRef.current && (inputRef.current.indeterminate = indeterminate);
   }, [indeterminate]);
-  const t0 = clsx(checkboxClassName, className), T0 = Box, t1 = "span", t2 = clsx(checkboxMarkClassName, error && "sui-error");
+  const t0 = clsx(checkboxClassName, "sui-position-relative", className), T0 = Box, t1 = "span", t2 = clsx(checkboxMarkClassName, error && "sui-error");
   let t3;
   $[0] !== indeterminate ? (t3 = indeterminate ? /* @__PURE__ */ jsx(RemoveIcon, {}) : /* @__PURE__ */ jsx(CheckmarkIcon, {}), $[0] = indeterminate, $[1] = t3) : t3 = $[1];
   let t4;
@@ -1653,40 +1654,52 @@ const modalProps = {
   },
   open: {
     type: "boolean"
+  },
+  size: {
+    type: "union",
+    className: "container",
+    values: CONTAINER_SIZE
   }
 }, modalClassName = suffixClassName("sui-Modal"), modalContentClassName = suffixClassName("sui-ModalContent"), modalFooterClassName = suffixClassName("sui-ModalFooter");
-function ModalRoot(props) {
-  const $ = c(14), {
+function ModalRoot(t0) {
+  const $ = c(17), {
+    open: t1,
+    size: t2,
+    ...props
+  } = t0, open = t1 === void 0 ? !1 : t1, size = t2 === void 0 ? 0 : t2, {
     children,
     className,
     style,
     header,
-    open: t0,
     onClose,
     ...rest
-  } = getProps(props, modalProps), open = t0 === void 0 ? !1 : t0, modalRef = useRef(null), headerId = useId(), modalClasses = clsx(modalClassName, "sui-inset0 sui-m-auto sui-radius5 sui-shadow3 sui-p4 sui-flex-direction-column sui-gap4 sui-overflow-y-auto");
-  useEffect(() => {
+  } = getProps({
+    size,
+    ...props
+  }, modalProps), modalRef = useRef(null), headerId = useId(), modalClasses = clsx(modalClassName, "sui-inset0 sui-m-auto sui-radius5 sui-shadow3 sui-p4 sui-flex-direction-column sui-gap4 sui-overflow-y-auto");
+  let t3, t4;
+  $[0] !== open ? (t3 = () => {
     const dialogElement = modalRef.current;
     if (dialogElement)
       return open ? dialogElement.open || dialogElement.showModal() : dialogElement.open && dialogElement.close(), () => {
         dialogElement.close();
       };
-  }, [open]);
-  const t1 = "any", t2 = header ? headerId : void 0, t3 = clsx(modalClasses, className);
-  let t4;
-  $[0] !== header || $[1] !== headerId ? (t4 = header ? /* @__PURE__ */ jsx(Heading, { trim: !0, size: 1, id: headerId, children: header }) : /* @__PURE__ */ jsx("div", {}), $[0] = header, $[1] = headerId, $[2] = t4) : t4 = $[2];
-  let t5;
-  $[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsx(IconButton, { "aria-label": "Close", level: "tertiary", icon: CloseIcon, onClick: () => modalRef.current?.close() }), $[3] = t5) : t5 = $[3];
-  let t6;
-  $[4] !== t4 ? (t6 = /* @__PURE__ */ jsxs(Flex, { flexShrink: 0, justifyContent: "space-between", alignItems: "center", children: [
-    t4,
-    t5
-  ] }), $[4] = t4, $[5] = t6) : t6 = $[5];
-  let t7;
-  return $[6] !== children || $[7] !== onClose || $[8] !== rest || $[9] !== style || $[10] !== t2 || $[11] !== t3 || $[12] !== t6 ? (t7 = /* @__PURE__ */ jsxs("dialog", { ...rest, ref: modalRef, closedby: t1, "aria-labelledby": t2, onClose, className: t3, style, "data-ui": "Modal", children: [
-    t6,
+  }, t4 = [open], $[0] = open, $[1] = t3, $[2] = t4) : (t3 = $[1], t4 = $[2]), useEffect(t3, t4);
+  const t5 = "any", t6 = header ? headerId : void 0, t7 = clsx(modalClasses, className);
+  let t8;
+  $[3] !== header || $[4] !== headerId ? (t8 = header ? /* @__PURE__ */ jsx(Heading, { trim: !0, size: 1, id: headerId, children: header }) : /* @__PURE__ */ jsx("div", {}), $[3] = header, $[4] = headerId, $[5] = t8) : t8 = $[5];
+  let t9;
+  $[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(IconButton, { "aria-label": "Close", level: "tertiary", icon: CloseIcon, onClick: () => modalRef.current?.close() }), $[6] = t9) : t9 = $[6];
+  let t10;
+  $[7] !== t8 ? (t10 = /* @__PURE__ */ jsxs(Flex, { flexShrink: 0, justifyContent: "space-between", alignItems: "center", children: [
+    t8,
+    t9
+  ] }), $[7] = t8, $[8] = t10) : t10 = $[8];
+  let t11;
+  return $[9] !== children || $[10] !== onClose || $[11] !== rest || $[12] !== style || $[13] !== t10 || $[14] !== t6 || $[15] !== t7 ? (t11 = /* @__PURE__ */ jsxs("dialog", { ...rest, ref: modalRef, closedby: t5, "aria-labelledby": t6, onClose, className: t7, style, "data-ui": "Modal", children: [
+    t10,
     children
-  ] }), $[6] = children, $[7] = onClose, $[8] = rest, $[9] = style, $[10] = t2, $[11] = t3, $[12] = t6, $[13] = t7) : t7 = $[13], t7;
+  ] }), $[9] = children, $[10] = onClose, $[11] = rest, $[12] = style, $[13] = t10, $[14] = t6, $[15] = t7, $[16] = t11) : t11 = $[16], t11;
 }
 function ModalContent(props) {
   const $ = c(12);
@@ -1724,7 +1737,116 @@ ModalRoot.displayName = "Modal";
 const Modal = ModalRoot;
 ModalRoot.Content = ModalContent;
 ModalRoot.Footer = ModalFooter;
-const radioProps = {
+function useIsClient() {
+  return useSyncExternalStore(_temp2, _temp3, _temp4);
+}
+function _temp4() {
+  return !1;
+}
+function _temp3() {
+  return !0;
+}
+function _temp2() {
+  return _temp;
+}
+function _temp() {
+}
+function isReactEventHandler(key, value) {
+  return /^on[A-Z]/.test(key) && typeof value == "function";
+}
+function chainEventHandlers(...handlers) {
+  const defined = handlers.filter(Boolean);
+  if (defined.length !== 0)
+    return defined.length === 1 ? defined[0] : (e) => {
+      for (const handler of defined)
+        handler(e);
+    };
+}
+function mergeTriggerProps(childProps, forwardedProps, ownProps) {
+  const result = {};
+  for (const source of [forwardedProps, ownProps])
+    if (source) {
+      for (const [key, value] of Object.entries(source))
+        if (key !== "style") {
+          if (isReactEventHandler(key, value)) {
+            result[key] = chainEventHandlers(result[key], value);
+            continue;
+          }
+          value !== void 0 && (result[key] = value);
+        }
+    }
+  result.style = {
+    ...childProps.style,
+    ...forwardedProps?.style,
+    ...ownProps?.style
+  };
+  for (const [key, value] of Object.entries(childProps))
+    isReactEventHandler(key, value) && (result[key] = chainEventHandlers(result[key], value));
+  return result;
+}
+function renderPortal(node, mounted, portal) {
+  return portal ? mounted ? createPortal(node, document.body) : null : node;
+}
+const PLACEMENT = ["top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"], placementProps = {
+  placement: {
+    type: "union",
+    className: "placement",
+    values: PLACEMENT
+  }
+}, popoverProps = {
+  anchorName: {
+    type: "string"
+  },
+  content: {
+    type: "string"
+  },
+  portal: {
+    type: "boolean"
+  },
+  ...placementProps
+}, popoverClassName = suffixClassName("sui-PopoverContent");
+function PopoverRoot(t0) {
+  const $ = c(4), {
+    placement: t1,
+    ...props
+  } = t0, placement = t1 === void 0 ? "bottom" : t1, {
+    children,
+    className,
+    style,
+    id: idProp,
+    anchorName,
+    content,
+    portal,
+    triggerProps: forwardedTriggerProps,
+    ...rest
+  } = getProps({
+    placement,
+    ...props
+  }, popoverProps), reactId = useId(), id = idProp || reactId, [open, setOpen] = useState(!1), isClient = useIsClient();
+  let t2;
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = (e) => {
+    setOpen(e.newState === "open");
+  }, $[0] = t2) : t2 = $[0];
+  const handleToggle = t2, triggerProps = {
+    popoverTarget: id,
+    style: {
+      anchorName: `--anchor-${anchorName || id}`
+    }
+  }, trigger = children.type.forwardsTriggerProps ? cloneElement(children, {
+    triggerProps
+  }) : cloneElement(children, mergeTriggerProps(children.props, forwardedTriggerProps, triggerProps)), t3 = renderPortal(/* @__PURE__ */ jsx(Activity, { mode: open ? "visible" : "hidden", children: /* @__PURE__ */ jsx("div", { className: clsx(popoverClassName, "sui-px2 sui-py1 sui-radius2 sui-position-fixed sui-shadow2", className), style: {
+    ...style,
+    positionAnchor: `--anchor-${anchorName || id}`
+  }, "data-ui": "Popover", popover: "auto", id, onToggle: handleToggle, ...rest, children: content }) }), isClient, portal);
+  let t4;
+  return $[1] !== t3 || $[2] !== trigger ? (t4 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    t3
+  ] }), $[1] = t3, $[2] = trigger, $[3] = t4) : t4 = $[3], t4;
+}
+const Popover = Object.assign(PopoverRoot, {
+  forwardsTriggerProps: !0
+}), radioProps = {
   error: {
     type: "boolean"
   },
@@ -1745,7 +1867,7 @@ function Radio(props) {
       error,
       ...rest
     } = getProps(props, radioProps);
-    label = t82, T1 = Label, t2 = clsx(radioClassName, className), t3 = style, t4 = "Radio", t5 = disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "radio", className: radioInputClassName, disabled, ...rest }), T0 = Box, t0 = "span", t1 = clsx(radioMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
+    label = t82, T1 = Label, t2 = clsx(radioClassName, "sui-position-relative", className), t3 = style, t4 = "Radio", t5 = disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "radio", className: radioInputClassName, disabled, ...rest }), T0 = Box, t0 = "span", t1 = clsx(radioMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
   } else
     T0 = $[1], T1 = $[2], label = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], t5 = $[9], t6 = $[10], t7 = $[11];
   let t8;
@@ -1801,7 +1923,7 @@ function Switch(props) {
       label: t82,
       ...rest
     } = getProps(props, switchProps);
-    label = t82, T1 = Label, t2 = clsx(switchClassName, className), t3 = style, t4 = "Switch", t5 = props.disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "checkbox", role: "switch", className: switchInputClassName, disabled, ...rest }), T0 = Flex, t0 = "span", t1 = clsx(switchMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
+    label = t82, T1 = Label, t2 = clsx(switchClassName, "sui-position-relative", className), t3 = style, t4 = "Switch", t5 = props.disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "checkbox", role: "switch", className: switchInputClassName, disabled, ...rest }), T0 = Flex, t0 = "span", t1 = clsx(switchMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
   } else
     T0 = $[1], T1 = $[2], label = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], t5 = $[9], t6 = $[10], t7 = $[11];
   let t8;
@@ -1813,79 +1935,73 @@ function Switch(props) {
     label
   ] }), $[16] = T1, $[17] = label, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
 }
-const PLACEMENT = ["top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"], placementProps = {
-  placement: {
-    type: "union",
-    className: "placement",
-    values: PLACEMENT
-  }
-}, tooltipProps = {
-  text: {
+const tooltipProps = {
+  anchorName: {
     type: "string"
   },
-  disabled: {
+  content: {
+    type: "string"
+  },
+  portal: {
     type: "boolean"
   },
   ...placementProps
-}, tooltipClassName = suffixClassName("sui-Tooltip"), tooltipDismissedClassName = suffixClassName("sui-Tooltip-Dismissed");
-function Tooltip(t0) {
-  const $ = c(16), {
+}, tooltipClassName = suffixClassName("sui-Tooltip");
+function TooltipRoot(t0) {
+  const $ = c(7), {
     placement: t1,
     ...props
   } = t0, placement = t1 === void 0 ? "bottom" : t1, {
     children,
     className,
     style,
-    disabled,
     id: idProp,
-    text,
+    anchorName,
+    content,
+    portal,
+    triggerProps: forwardedTriggerProps,
     ...rest
   } = getProps({
     placement,
     ...props
-  }, tooltipProps), reactId = useId(), id = idProp || reactId, [dismissed, setDismissed] = useState(!1);
+  }, tooltipProps), reactId = useId(), id = idProp || reactId, [dismissed, setDismissed] = useState(!1), isClient = useIsClient();
   let t2, t3;
-  $[0] !== dismissed ? (t2 = () => {
-    if (dismissed)
-      return;
-    const handleKeyDown = (e) => {
-      e.key === "Escape" && setDismissed(!0);
-    };
-    return window.addEventListener("keydown", handleKeyDown), () => window.removeEventListener("keydown", handleKeyDown);
-  }, t3 = [dismissed], $[0] = dismissed, $[1] = t2, $[2] = t3) : (t2 = $[1], t3 = $[2]), useEffect(t2, t3);
-  const trigger = cloneElement(children, {
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = () => {
+    setDismissed(!1);
+  }, t3 = () => {
+    setDismissed(!1);
+  }, $[0] = t2, $[1] = t3) : (t2 = $[0], t3 = $[1]);
+  const triggerProps = {
     "aria-describedby": id,
-    onMouseEnter: (e_0) => {
-      setDismissed(!1), children.props.onMouseEnter?.(e_0);
-    },
-    onFocus: (e_1) => {
-      setDismissed(!1), children.props.onFocus?.(e_1);
-    },
-    onClick: (e_2) => {
-      setDismissed(!0), children.props.onClick?.(e_2);
-    },
+    interestfor: id,
     style: {
-      ...children.props.style,
-      anchorName: `--tooltip-anchor-${id}`
+      anchorName: `--anchor-${anchorName || id}`
+    },
+    onMouseLeave: t2,
+    onBlur: t3,
+    onClick: () => {
+      setDismissed(!0), document.getElementById(id)?.hidePopover();
     }
-  });
-  if (disabled)
-    return children;
-  const T0 = Box, t4 = clsx(tooltipClassName, dismissed ? tooltipDismissedClassName : "", className), t5 = `--tooltip-anchor-${id}`;
-  let t6;
-  $[3] !== style || $[4] !== t5 ? (t6 = {
+  }, trigger = children.type.forwardsTriggerProps ? cloneElement(children, {
+    triggerProps
+  }) : cloneElement(children, mergeTriggerProps(children.props, forwardedTriggerProps, triggerProps));
+  let t4;
+  $[2] !== dismissed ? (t4 = (e) => {
+    e.newState === "open" && dismissed && e.preventDefault();
+  }, $[2] = dismissed, $[3] = t4) : t4 = $[3];
+  const handleBeforeToggle = t4, t5 = renderPortal(/* @__PURE__ */ jsx("div", { className: clsx(tooltipClassName, "sui-px2 sui-py1 sui-radius2 sui-position-fixed sui-shadow2", className), style: {
     ...style,
-    positionAnchor: t5
-  }, $[3] = style, $[4] = t5, $[5] = t6) : t6 = $[5];
-  let t7;
-  $[6] !== T0 || $[7] !== id || $[8] !== rest || $[9] !== t4 || $[10] !== t6 || $[11] !== text ? (t7 = /* @__PURE__ */ jsx(T0, { className: t4, role: "tooltip", style: t6, "data-ui": "Tooltip", id, paddingX: 2, paddingY: 1, radius: 2, position: "fixed", zIndex: 9999, shadow: 2, ...rest, children: text }), $[6] = T0, $[7] = id, $[8] = rest, $[9] = t4, $[10] = t6, $[11] = text, $[12] = t7) : t7 = $[12];
-  let t8;
-  return $[13] !== t7 || $[14] !== trigger ? (t8 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    positionAnchor: `--anchor-${anchorName || id}`
+  }, "data-ui": "Tooltip", role: "tooltip", popover: "hint", id, onBeforeToggle: handleBeforeToggle, ...rest, children: content }), isClient, portal);
+  let t6;
+  return $[4] !== t5 || $[5] !== trigger ? (t6 = /* @__PURE__ */ jsxs(Fragment, { children: [
     trigger,
-    t7
-  ] }), $[13] = t7, $[14] = trigger, $[15] = t8) : t8 = $[15], t8;
+    t5
+  ] }), $[4] = t5, $[5] = trigger, $[6] = t6) : t6 = $[6], t6;
 }
-const tooltipGroupProps = {
+const Tooltip = Object.assign(TooltipRoot, {
+  forwardsTriggerProps: !0
+}), tooltipGroupProps = {
   as: {
     type: "string"
   }
@@ -1901,7 +2017,7 @@ function TooltipGroup(props) {
   let t0;
   $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = (e) => {
     const tooltip = e.target.closest('[data-ui="Tooltip"]');
-    tooltip && e.propertyName === "visibility" && window.getComputedStyle(tooltip).visibility !== "hidden" && setIsActive(!0);
+    tooltip && e.propertyName === "opacity" && window.getComputedStyle(tooltip).opacity !== "0" && setIsActive(!0);
   }, $[0] = t0) : t0 = $[0];
   const handleTransitionEnd = t0;
   let t1;
@@ -1916,7 +2032,7 @@ function TooltipGroup(props) {
   const handleBlur = t2, t3 = clsx(tooltipGroupClassName, className);
   let t4;
   $[3] !== isActive ? (t4 = isActive && {
-    "--tooltip-delay-group": 0
+    "--tooltip-delay-group": "0ms"
   }, $[3] = isActive, $[4] = t4) : t4 = $[4];
   let t5;
   $[5] !== style || $[6] !== t4 ? (t5 = {
@@ -1948,6 +2064,7 @@ export {
   Link,
   List,
   Modal,
+  Popover,
   PressArea,
   Radio,
   SkipToContent,
@@ -1957,6 +2074,7 @@ export {
   Tooltip,
   TooltipGroup,
   VStack,
-  VisuallyHidden
+  VisuallyHidden,
+  useIsClient
 };
 //# sourceMappingURL=index.js.map