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

package/dist/index.js

@@ -2,8 +2,11 @@
 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 { SpinnerIcon, RemoveIcon, CheckmarkIcon, CloseIcon } 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) {
@@ -96,7 +99,7 @@ function getCompositeValue(propValue, propDef, key) {
     compositeValue = mapping?.[propValue];
   return compositeValue;
 }
-const HASH = "71d7e5";
+const HASH = "ff7a34";
 function suffixClassName(className) {
   return `${className}-${HASH}`;
 }
@@ -971,6 +974,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 +1303,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 +1740,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 +2052,7 @@ export {
   Checkbox,
   Code,
   Container,
+  Dialog,
   Divider,
   Eyebrow,
   Flex,
@@ -2063,7 +2067,6 @@ export {
   Label,
   Link,
   List,
-  Modal,
   Popover,
   PressArea,
   Radio,