@sanity/ui 5.0.0-alpha.1 → 5.0.0-alpha.10

package/dist/index.js

@@ -2,8 +2,12 @@
 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 { SpinnerIcon, RemoveIcon, CheckmarkIcon } from "@sanity/icons";
+import { isValidElement, useRef, useEffect, lazy, Suspense, useId, Children, useSyncExternalStore, useState, cloneElement, Activity } from "react";
+import { SpinnerIcon } from "@sanity/icons/Spinner";
+import { CheckmarkIcon } from "@sanity/icons/Checkmark";
+import { RemoveIcon } from "@sanity/icons/Remove";
+import { CloseIcon } from "@sanity/icons/Close";
+import { createPortal } from "react-dom";
 const PREFIX = "sui", BREAKPOINTS_LENGTH = 6;
 function getProps(componentProps, propDefs) {
   const {
@@ -95,7 +99,7 @@ function getCompositeValue(propValue, propDef, key) {
     compositeValue = mapping?.[propValue];
   return compositeValue;
 }
-const HASH = "162541";
+const HASH = "ad9fa1";
 function suffixClassName(className) {
   return `${className}-${HASH}`;
 }
@@ -376,18 +380,22 @@ function Box(t0) {
   if ($[0] !== t0) {
     const {
       display: t22,
+      minHeight: t3,
+      minWidth: t4,
       ...props
-    } = t0, display = t22 === void 0 ? "block" : t22, {
+    } = t0, display = t22 === void 0 ? "block" : t22, minHeight = t3 === void 0 ? "0" : t3, minWidth = t4 === void 0 ? "0" : t4, {
       as,
-      children: t3,
+      children: t5,
       className,
-      style: t4,
-      ...t5
+      style: t6,
+      ...t7
     } = getProps({
       display,
+      minHeight,
+      minWidth,
       ...props
     }, boxProps);
-    children = t3, style = t4, rest = t5, T0 = as || "div", t1 = clsx(boxClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
+    children = t5, style = t6, rest = t7, T0 = as || "div", t1 = clsx(boxClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
   } else
     T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
   let t2;
@@ -449,18 +457,22 @@ function Flex(t0) {
   if ($[0] !== t0) {
     const {
       display: t22,
+      minHeight: t3,
+      minWidth: t4,
       ...props
-    } = t0, display = t22 === void 0 ? "flex" : t22, {
+    } = t0, display = t22 === void 0 ? "flex" : t22, minHeight = t3 === void 0 ? "0" : t3, minWidth = t4 === void 0 ? "0" : t4, {
       as,
-      children: t3,
+      children: t5,
       className,
-      style: t4,
-      ...t5
+      style: t6,
+      ...t7
     } = getProps({
       display,
+      minHeight,
+      minWidth,
       ...props
     }, flexProps);
-    children = t3, style = t4, rest = t5, T0 = as || "div", t1 = clsx(flexClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
+    children = t5, style = t6, rest = t7, T0 = as || "div", t1 = clsx(flexClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
   } else
     T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
   let t2;
@@ -604,7 +616,7 @@ function Text(t0) {
         $[7] !== t8 ? (t9 = clsx("sui-overflow-hidden", t8), $[7] = t8, $[8] = t9) : t9 = $[8], t2 = /* @__PURE__ */ jsx(Component, { className: t7, style, "data-ui": "Text", ...rest, children: /* @__PURE__ */ jsx("span", { className: t9, children }) });
         break bb0;
       }
-      T0 = Component, t1 = clsx(textClassName, "sui-overflow-hidden", className);
+      T0 = Component, t1 = clsx(textClassName, props.truncate && "sui-overflow-hidden", className);
     }
     $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1, $[6] = t2;
   } else
@@ -858,7 +870,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;
@@ -962,6 +974,181 @@ function Container(t0) {
   let t2;
   return $[6] !== T0 || $[7] !== children || $[8] !== rest || $[9] !== style || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Container", ...rest, children }), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
 }
+const HEADING_TAG = ["h1", "h2", "h3", "h4", "h5", "h6"], HEADING_SIZE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], headingProps = {
+  as: {
+    type: "union",
+    values: HEADING_TAG
+  },
+  size: {
+    type: "union",
+    className: "text-heading",
+    values: HEADING_SIZE
+  },
+  ...typographyProps
+}, headingClassName = suffixClassName("sui-Heading");
+function Heading(t0) {
+  const $ = c(15);
+  let T0, children, rest, style, t1, t2;
+  if ($[0] !== t0) {
+    t2 = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const {
+        size: t32,
+        weight: t4,
+        ...props
+      } = t0, size = t32 === void 0 ? 2 : t32, weight = t4 === void 0 ? "bold" : t4, {
+        as,
+        children: t5,
+        className,
+        style: t6,
+        ...t7
+      } = getProps({
+        size,
+        weight,
+        ...props
+      }, headingProps);
+      children = t5, style = t6, rest = t7;
+      const Component = as || "h2";
+      if (props.truncate && props.trim) {
+        const t8 = clsx(headingClassName, className?.replace("sui-line-clamp", "").replace("sui-text-overflow", "")), t9 = props.truncate === 1 ? "sui-text-overflow" : "sui-line-clamp";
+        let t10;
+        $[7] !== t9 ? (t10 = clsx("sui-overflow-hidden", t9), $[7] = t9, $[8] = t10) : t10 = $[8], t2 = /* @__PURE__ */ jsx(Component, { className: t8, style, "data-ui": "Heading", ...rest, children: /* @__PURE__ */ jsx("span", { className: t10, children }) });
+        break bb0;
+      }
+      T0 = Component, t1 = clsx(headingClassName, props.truncate && "sui-overflow-hidden", className);
+    }
+    $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1, $[6] = t2;
+  } else
+    T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5], t2 = $[6];
+  if (t2 !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel"))
+    return t2;
+  let t3;
+  return $[9] !== T0 || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t1 ? (t3 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Heading", ...rest, children }), $[9] = T0, $[10] = children, $[11] = rest, $[12] = style, $[13] = t1, $[14] = t3) : t3 = $[14], t3;
+}
+const iconButtonProps = {
+  "aria-label": {
+    type: "string"
+  },
+  as: buttonProps.as,
+  icon: {
+    type: "string"
+  }
+}, iconButtonClassName = suffixClassName("sui-IconButton");
+function IconButton(props) {
+  const $ = c(16);
+  let IconProp, T0, rest, style, t0, t1;
+  if ($[0] !== props) {
+    const {
+      as,
+      className,
+      style: t22,
+      icon: t32,
+      ...t4
+    } = getProps(props, iconButtonProps);
+    style = t22, IconProp = t32, rest = t4;
+    const Component = as || "button";
+    T0 = Button, t0 = Component, t1 = clsx(iconButtonClassName, className), $[0] = props, $[1] = IconProp, $[2] = T0, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1;
+  } else
+    IconProp = $[1], T0 = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6];
+  let t2;
+  $[7] !== IconProp ? (t2 = /* @__PURE__ */ jsx(Icon, { icon: IconProp, margin: -2, size: 1 }), $[7] = IconProp, $[8] = t2) : t2 = $[8];
+  let t3;
+  return $[9] !== T0 || $[10] !== rest || $[11] !== style || $[12] !== t0 || $[13] !== t1 || $[14] !== t2 ? (t3 = /* @__PURE__ */ jsx(T0, { as: t0, className: t1, style, "data-ui": "IconButton", ...rest, children: t2 }), $[9] = T0, $[10] = rest, $[11] = style, $[12] = t0, $[13] = t1, $[14] = t2, $[15] = t3) : t3 = $[15], t3;
+}
+const dialogProps = {
+  header: {
+    type: "string"
+  },
+  open: {
+    type: "boolean"
+  },
+  size: {
+    type: "union",
+    className: "container",
+    values: CONTAINER_SIZE
+  },
+  topAnchor: {
+    type: "string",
+    className: "top-anchor",
+    variable: "--top-anchor"
+  }
+}, dialogClassName = suffixClassName("sui-Dialog"), dialogContentClassName = suffixClassName("sui-DialogContent"), dialogFooterClassName = suffixClassName("sui-DialogFooter");
+function DialogRoot(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,
+    onClose,
+    ...rest
+  } = getProps({
+    size,
+    ...props
+  }, dialogProps), dialogRef = useRef(null), headerId = useId(), dialogClasses = clsx(dialogClassName, `${props.topAnchor ? "sui-mx-auto" : "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 = dialogRef.current;
+    if (dialogElement)
+      return open ? dialogElement.open || dialogElement.showModal() : dialogElement.open && dialogElement.close(), () => {
+        dialogElement.close();
+      };
+  }, 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(dialogClasses, 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: () => dialogRef.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: dialogRef, closedby: t5, "aria-labelledby": t6, onClose, className: t7, style, "data-ui": "Dialog", children: [
+    t10,
+    children
+  ] }), $[9] = children, $[10] = onClose, $[11] = rest, $[12] = style, $[13] = t10, $[14] = t6, $[15] = t7, $[16] = t11) : t11 = $[16], t11;
+}
+function DialogContent(props) {
+  const $ = c(12);
+  let T0, children, style, t0, t1;
+  if ($[0] !== props) {
+    const {
+      children: t22,
+      className,
+      style: t3,
+      ...rest
+    } = getProps(props, {});
+    children = t22, style = t3, T0 = Box, t0 = rest, t1 = clsx(dialogContentClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = style, $[4] = t0, $[5] = t1;
+  } else
+    T0 = $[1], children = $[2], style = $[3], t0 = $[4], t1 = $[5];
+  let t2;
+  return $[6] !== T0 || $[7] !== children || $[8] !== style || $[9] !== t0 || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { ...t0, className: t1, style, "data-ui": "DialogContent", flexGrow: 1, overflowY: "auto", children }), $[6] = T0, $[7] = children, $[8] = style, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+}
+function DialogFooter(props) {
+  const $ = c(12);
+  let T0, children, style, t0, t1;
+  if ($[0] !== props) {
+    const {
+      children: t22,
+      className,
+      style: t3,
+      ...rest
+    } = getProps(props, {});
+    children = t22, style = t3, T0 = Box, t0 = rest, t1 = clsx(dialogFooterClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = style, $[4] = t0, $[5] = t1;
+  } else
+    T0 = $[1], children = $[2], style = $[3], t0 = $[4], t1 = $[5];
+  let t2;
+  return $[6] !== T0 || $[7] !== children || $[8] !== style || $[9] !== t0 || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { ...t0, className: t1, style, "data-ui": "DialogFooter", flexShrink: 0, children }), $[6] = T0, $[7] = children, $[8] = style, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+}
+DialogRoot.displayName = "Dialog";
+const Dialog = DialogRoot;
+DialogRoot.Content = DialogContent;
+DialogRoot.Footer = DialogFooter;
 const dividerProps = {
   ...marginProps
 }, dividerClassName = suffixClassName("sui-Divider");
@@ -1020,7 +1207,7 @@ function Eyebrow(t0) {
         $[7] !== t9 ? (t10 = clsx("sui-overflow-hidden", t9), $[7] = t9, $[8] = t10) : t10 = $[8], t2 = /* @__PURE__ */ jsx(Component, { className: t8, style, "data-ui": "Eyebrow", ...rest, children: /* @__PURE__ */ jsx("span", { className: t10, children }) });
         break bb0;
       }
-      T0 = Component, t1 = clsx(eyebrowClassName, "sui-overflow-hidden", className);
+      T0 = Component, t1 = clsx(eyebrowClassName, props.truncate && "sui-overflow-hidden", className);
     }
     $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1, $[6] = t2;
   } else
@@ -1075,18 +1262,22 @@ function Grid(t0) {
   if ($[0] !== t0) {
     const {
       display: t22,
+      minHeight: t3,
+      minWidth: t4,
       ...props
-    } = t0, display = t22 === void 0 ? "grid" : t22, {
+    } = t0, display = t22 === void 0 ? "grid" : t22, minHeight = t3 === void 0 ? "0" : t3, minWidth = t4 === void 0 ? "0" : t4, {
       as,
-      children: t3,
+      children: t5,
       className,
-      style: t4,
-      ...t5
+      style: t6,
+      ...t7
     } = getProps({
       display,
+      minHeight,
+      minWidth,
       ...props
     }, gridProps);
-    children = t3, style = t4, rest = t5, T0 = as || "div", t1 = clsx(gridClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
+    children = t5, style = t6, rest = t7, T0 = as || "div", t1 = clsx(gridClassName, className), $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1;
   } else
     T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5];
   let t2;
@@ -1117,87 +1308,6 @@ function HStack(props) {
   let t2;
   return $[7] !== T0 || $[8] !== children || $[9] !== rest || $[10] !== style || $[11] !== t0 || $[12] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { as: t0, className: t1, style, "data-ui": "HStack", display: "inline-flex", alignItems: "center", flexWrap: "wrap", ...rest, children }), $[7] = T0, $[8] = children, $[9] = rest, $[10] = style, $[11] = t0, $[12] = t1, $[13] = t2) : t2 = $[13], t2;
 }
-const HEADING_TAG = ["h1", "h2", "h3", "h4", "h5", "h6"], HEADING_SIZE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], headingProps = {
-  as: {
-    type: "union",
-    values: HEADING_TAG
-  },
-  size: {
-    type: "union",
-    className: "text-heading",
-    values: HEADING_SIZE
-  },
-  ...typographyProps
-}, headingClassName = suffixClassName("sui-Heading");
-function Heading(t0) {
-  const $ = c(15);
-  let T0, children, rest, style, t1, t2;
-  if ($[0] !== t0) {
-    t2 = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
-    bb0: {
-      const {
-        size: t32,
-        weight: t4,
-        ...props
-      } = t0, size = t32 === void 0 ? 2 : t32, weight = t4 === void 0 ? "bold" : t4, {
-        as,
-        children: t5,
-        className,
-        style: t6,
-        ...t7
-      } = getProps({
-        size,
-        weight,
-        ...props
-      }, headingProps);
-      children = t5, style = t6, rest = t7;
-      const Component = as || "h2";
-      if (props.truncate && props.trim) {
-        const t8 = clsx(headingClassName, className?.replace("sui-line-clamp", "").replace("sui-text-overflow", "")), t9 = props.truncate === 1 ? "sui-text-overflow" : "sui-line-clamp";
-        let t10;
-        $[7] !== t9 ? (t10 = clsx("sui-overflow-hidden", t9), $[7] = t9, $[8] = t10) : t10 = $[8], t2 = /* @__PURE__ */ jsx(Component, { className: t8, style, "data-ui": "Heading", ...rest, children: /* @__PURE__ */ jsx("span", { className: t10, children }) });
-        break bb0;
-      }
-      T0 = Component, t1 = clsx(headingClassName, "sui-overflow-hidden", className);
-    }
-    $[0] = t0, $[1] = T0, $[2] = children, $[3] = rest, $[4] = style, $[5] = t1, $[6] = t2;
-  } else
-    T0 = $[1], children = $[2], rest = $[3], style = $[4], t1 = $[5], t2 = $[6];
-  if (t2 !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel"))
-    return t2;
-  let t3;
-  return $[9] !== T0 || $[10] !== children || $[11] !== rest || $[12] !== style || $[13] !== t1 ? (t3 = /* @__PURE__ */ jsx(T0, { className: t1, style, "data-ui": "Heading", ...rest, children }), $[9] = T0, $[10] = children, $[11] = rest, $[12] = style, $[13] = t1, $[14] = t3) : t3 = $[14], t3;
-}
-const iconButtonProps = {
-  "aria-label": {
-    type: "string"
-  },
-  as: buttonProps.as,
-  icon: {
-    type: "string"
-  }
-}, iconButtonClassName = suffixClassName("sui-IconButton");
-function IconButton(props) {
-  const $ = c(16);
-  let IconProp, T0, rest, style, t0, t1;
-  if ($[0] !== props) {
-    const {
-      as,
-      className,
-      style: t22,
-      icon: t32,
-      ...t4
-    } = getProps(props, iconButtonProps);
-    style = t22, IconProp = t32, rest = t4;
-    const Component = as || "button";
-    T0 = Button, t0 = Component, t1 = clsx(iconButtonClassName, className), $[0] = props, $[1] = IconProp, $[2] = T0, $[3] = rest, $[4] = style, $[5] = t0, $[6] = t1;
-  } else
-    IconProp = $[1], T0 = $[2], rest = $[3], style = $[4], t0 = $[5], t1 = $[6];
-  let t2;
-  $[7] !== IconProp ? (t2 = /* @__PURE__ */ jsx(Icon, { icon: IconProp, margin: -2, size: 1 }), $[7] = IconProp, $[8] = t2) : t2 = $[8];
-  let t3;
-  return $[9] !== T0 || $[10] !== rest || $[11] !== style || $[12] !== t0 || $[13] !== t1 || $[14] !== t2 ? (t3 = /* @__PURE__ */ jsx(T0, { as: t0, className: t1, style, "data-ui": "IconButton", ...rest, children: t2 }), $[9] = T0, $[10] = rest, $[11] = style, $[12] = t0, $[13] = t1, $[14] = t2, $[15] = t3) : t3 = $[15], t3;
-}
 const indicatorProps = {
   as: {
     type: "string"
@@ -1635,7 +1745,116 @@ ListRoot.Item = ListItem;
 ListRoot.ButtonItem = ListButtonItem;
 ListRoot.ItemText = ListItemText;
 ListRoot.ItemImage = ListItemImage;
-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"
   },
@@ -1656,7 +1875,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;
@@ -1712,7 +1931,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;
@@ -1724,79 +1943,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"
   }
@@ -1812,7 +2025,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;
@@ -1827,7 +2040,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 = {
@@ -1837,13 +2050,60 @@ function TooltipGroup(props) {
   let t6;
   return $[8] !== Component || $[9] !== children || $[10] !== handleBlur || $[11] !== handleMouseLeave || $[12] !== handleTransitionEnd || $[13] !== rest || $[14] !== t3 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(Component, { className: t3, style: t5, "data-ui": "TooltipGroup", ref, onTransitionEnd: handleTransitionEnd, onMouseLeave: handleMouseLeave, onBlur: handleBlur, ...rest, children }), $[8] = Component, $[9] = children, $[10] = handleBlur, $[11] = handleMouseLeave, $[12] = handleTransitionEnd, $[13] = rest, $[14] = t3, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
 }
+const badgeProps = {
+  as: {
+    type: "string"
+  },
+  iconStart: {
+    type: "string"
+  },
+  text: {
+    type: "string"
+  },
+  ...toneProps
+}, badgeClassName = suffixClassName("sui-Badge");
+function Badge(t0) {
+  const $ = c(20);
+  let T0, children, t1, t2, t3, t4, t5, text;
+  if ($[0] !== t0) {
+    const {
+      tone: t62,
+      ...props
+    } = t0, tone = t62 === void 0 ? "neutral" : t62, {
+      as,
+      children: t72,
+      className,
+      style,
+      iconStart: IconStart,
+      text: t8,
+      ...rest
+    } = getProps({
+      tone,
+      ...props
+    }, badgeProps);
+    children = t72, text = t8;
+    const Component = as || "span", badgeClasses = clsx(badgeClassName, `${IconStart ? "sui-p1" : "sui-px2 sui-py1"} sui-radius-full sui-display-inline-flex sui-align-items-center sui-gap1`);
+    T0 = Component, t1 = clsx(badgeClasses, className), t2 = style, t3 = "Badge", t4 = rest, t5 = IconStart && (isValidElement(IconStart) ? IconStart : /* @__PURE__ */ jsx(Icon, { icon: IconStart, marginX: -1, marginY: -2, size: 0 })), $[0] = t0, $[1] = T0, $[2] = children, $[3] = t1, $[4] = t2, $[5] = t3, $[6] = t4, $[7] = t5, $[8] = text;
+  } else
+    T0 = $[1], children = $[2], t1 = $[3], t2 = $[4], t3 = $[5], t4 = $[6], t5 = $[7], text = $[8];
+  let t6;
+  $[9] !== text ? (t6 = text && /* @__PURE__ */ jsx(Text, { size: 1, trim: !0, children: text }), $[9] = text, $[10] = t6) : t6 = $[10];
+  let t7;
+  return $[11] !== T0 || $[12] !== children || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsxs(T0, { className: t1, style: t2, "data-ui": t3, ...t4, children: [
+    t5,
+    t6,
+    children
+  ] }), $[11] = T0, $[12] = children, $[13] = t1, $[14] = t2, $[15] = t3, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19], t7;
+}
 export {
+  Badge,
   Box,
   Button,
   Card,
   Checkbox,
   Code,
   Container,
+  Dialog,
   Divider,
   Eyebrow,
   Flex,
@@ -1858,6 +2118,7 @@ export {
   Label,
   Link,
   List,
+  Popover,
   PressArea,
   Radio,
   SkipToContent,
@@ -1867,6 +2128,7 @@ export {
   Tooltip,
   TooltipGroup,
   VStack,
-  VisuallyHidden
+  VisuallyHidden,
+  useIsClient
 };
 //# sourceMappingURL=index.js.map