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

package/dist/index.d.ts

@@ -180,6 +180,47 @@ declare const DENSITY: readonly ["compact", "regular", "loose"];
 /** @public */
 export declare type Density = (typeof DENSITY)[number];
 
+/**
+ * @beta
+ *
+ * Renders a modal dialog element — should not be used for nonmodal dialogs.
+ * Modal dialogs make their containing documents inert, and render on the topmost
+ * layer within that containing document; they must be dimissed before the containing
+ * document and its contents become unblocked. They also trap focus within the bounds
+ * of the dialog element and its descendants.
+ *
+ * For more on dialogs and modality, refer to the HTML specification for the dialog element:
+ * https://html.spec.whatwg.org/dev/interactive-elements.html#the-dialog-element
+ */
+export declare const Dialog: typeof DialogRoot;
+
+declare function DialogContent(props: ComponentProps<"div">): JSX.Element;
+
+declare function DialogFooter(props: ComponentProps<"div">): JSX.Element;
+
+/** @beta */
+export declare interface DialogProps extends Omit<
+  React.ComponentProps<"dialog">,
+  "open"
+> {
+  /** Text to be displayed as the dialog's heading; optional but recommended for optimal accessibility and presentation */
+  header?: string;
+  /** Used to set the value of open to false. Fires whenever the dialog is closed, either programmatically or by the user (via Esc key, clicking background, clicking the dialog's close button, or any other means.)  */
+  onClose: React.ReactEventHandler<HTMLDialogElement>;
+  /** Whether the dialog is open; defaults to false. */
+  open?: boolean;
+  /** Max width of the dialog */
+  size?: Responsive<ContainerSize>;
+}
+
+declare function DialogRoot({ open, size, ...props }: DialogProps): JSX.Element;
+
+declare namespace DialogRoot {
+  var displayName: string;
+  var Content: typeof DialogContent;
+  var Footer: typeof DialogFooter;
+}
+
 declare const DISPLAY_BLOCK: readonly ["block", "inline-block", "none"];
 
 declare const DISPLAY_FLEX: readonly ["flex", "inline-flex", "none"];
@@ -641,47 +682,6 @@ export declare type MarginProps = {
   marginLeft?: Responsive<SpaceAutoNegative>;
 };
 
-/**
- * @beta
- *
- * Renders a modal dialog element — should not be used for nonmodal dialogs.
- * Modal dialogs make their containing documents inert, and render on the topmost
- * layer within that containing document; they must be dimissed before the containing
- * document and its contents become unblocked. They also trap focus within the bounds
- * of the modal element and its descendants.
- *
- * For more on dialogs and modality, refer to the HTML specification for the dialog element:
- * https://html.spec.whatwg.org/dev/interactive-elements.html#the-dialog-element
- */
-export declare const Modal: typeof ModalRoot;
-
-declare function ModalContent(props: ComponentProps<"div">): JSX.Element;
-
-declare function ModalFooter(props: ComponentProps<"div">): JSX.Element;
-
-/** @beta */
-export declare interface ModalProps extends Omit<
-  React.ComponentProps<"dialog">,
-  "open"
-> {
-  /** Text to be displayed as the modal's heading; optional but recommended for optimal accessibility and presentation */
-  header?: string;
-  /** Used to set the value of open to false. Fires whenever the modal is closed, either programmatically or by the user (via Esc key, clicking background, clicking the modal's close button, or any other means.)  */
-  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({ open, size, ...props }: ModalProps): JSX.Element;
-
-declare namespace ModalRoot {
-  var displayName: string;
-  var Content: typeof ModalContent;
-  var Footer: typeof ModalFooter;
-}
-
 declare const OVERFLOW: readonly [
   "visible",
   "hidden",

package/dist/index.js

@@ -2,7 +2,7 @@
 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, useSyncExternalStore, useState, cloneElement, Activity } from "react";
+import { isValidElement, useRef, useEffect, lazy, Suspense, useId, Children, 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;
@@ -96,7 +96,7 @@ function getCompositeValue(propValue, propDef, key) {
     compositeValue = mapping?.[propValue];
   return compositeValue;
 }
-const HASH = "71d7e5";
+const HASH = "47d232";
 function suffixClassName(className) {
   return `${className}-${HASH}`;
 }
@@ -971,6 +971,176 @@ 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
+  }
+}, 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, "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 = 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");
@@ -1130,87 +1300,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, 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 indicatorProps = {
   as: {
     type: "string"
@@ -1648,95 +1737,6 @@ ListRoot.Item = ListItem;
 ListRoot.ButtonItem = ListButtonItem;
 ListRoot.ItemText = ListItemText;
 ListRoot.ItemImage = ListItemImage;
-const modalProps = {
-  header: {
-    type: "string"
-  },
-  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(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
-  }, 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();
-      };
-  }, 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
-  ] }), $[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);
-  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(modalContentClassName, 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": "ModalContent", flexGrow: 1, overflowY: "auto", children }), $[6] = T0, $[7] = children, $[8] = style, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
-}
-function ModalFooter(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(modalFooterClassName, 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": "ModalFooter", flexShrink: 0, children }), $[6] = T0, $[7] = children, $[8] = style, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
-}
-ModalRoot.displayName = "Modal";
-const Modal = ModalRoot;
-ModalRoot.Content = ModalContent;
-ModalRoot.Footer = ModalFooter;
 function useIsClient() {
   return useSyncExternalStore(_temp2, _temp3, _temp4);
 }
@@ -2049,6 +2049,7 @@ export {
   Checkbox,
   Code,
   Container,
+  Dialog,
   Divider,
   Eyebrow,
   Flex,
@@ -2063,7 +2064,6 @@ export {
   Label,
   Link,
   List,
-  Modal,
   Popover,
   PressArea,
   Radio,