@sanity/ui 2.0.0-beta.9 → 2.0.0

package/dist/index.js

@@ -33,17 +33,23 @@ const screen = theme.screen;
 const studioTheme = theme.buildTheme();
 const EMPTY_ARRAY = [];
 const EMPTY_RECORD = {};
+const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity";
 const POPOVER_MOTION_PROPS = {
   initial: {
     opacity: 0.5,
-    scale: 0.97
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
+    scale: 0.97,
+    willChange: "transform"
   },
   animate: {
-    opacity: 1,
+    opacity: [null, 1, 1],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [null, null, 1],
     scale: 1
   },
   exit: {
-    opacity: 0,
+    // @ts-expect-error -- passing null a second time is valid: https://github.com/framer/motion/blob/b9ce4c42914c3916ea523609c5b032dfc72718bb/packages/framer-motion/src/animation/utils/keyframes.ts#L34C22-L34C22
+    opacity: [null, null, 0],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [null, 0, 0],
     scale: 0.97
   },
   transition: {
@@ -1556,7 +1562,7 @@ function textInputRepresentationStyle(props) {
     color,
     input
   } = theme.getTheme_v2(props.theme);
-  return styled.css(_c$c || (_c$c = __template$F(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
+  return styled.css(_c$c || (_c$c = __template$F(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:not(:invalid):disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --card-icon-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      *:invalid:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --card-icon-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:not(:invalid):read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      *:invalid:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:invalid:not(:disabled):not(:read-only):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
   }), color.input.invalid.enabled.bg, color.input.invalid.enabled.fg, focusRingBorderStyle({
@@ -1570,12 +1576,18 @@ function textInputRepresentationStyle(props) {
     focusRing: input.text.focusRing
   }), $unstableDisableFocusRing ? void 0 : focusRingStyle({
     focusRing: input.text.focusRing
-  }), color.input.default.disabled.bg, color.input.default.disabled.fg, focusRingBorderStyle({
+  }), color.input.default.disabled.bg, color.input.default.disabled.fg, color.input.default.disabled.fg, focusRingBorderStyle({
     color: color.input.default.disabled.border,
     width: input.border.width
-  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.default.hovered.bg, color.input.default.hovered.fg, focusRingBorderStyle({
+  }), color.input.invalid.disabled.bg, color.input.invalid.disabled.fg, color.input.invalid.disabled.fg, focusRingBorderStyle({
+    color: color.input.invalid.disabled.border,
+    width: input.border.width
+  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.invalid.readOnly.bg, color.input.invalid.readOnly.fg, color.input.default.hovered.bg, color.input.default.hovered.fg, color.input.invalid.hovered.bg, color.input.invalid.hovered.fg, focusRingBorderStyle({
     color: color.input.default.hovered.border,
     width: input.border.width
+  }), focusRingBorderStyle({
+    color: color.input.invalid.hovered.border,
+    width: input.border.width
   }));
 }
 function responsiveMarginStyle(props) {
@@ -2433,7 +2445,7 @@ const Button = react.forwardRef(function Button2(props, ref) {
     iconRight,
     justify: justifyProp = "center",
     loading,
-    mode = "ghost",
+    mode = "default",
     padding: paddingProp = 3,
     paddingX: paddingXProp,
     paddingY: paddingYProp,
@@ -2499,16 +2511,13 @@ const Button = react.forwardRef(function Button2(props, ref) {
         children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
           size: fontSize,
           children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
-        }), text && /* @__PURE__ */jsxRuntime.jsx(Box, {
-          flex: iconRight ? 1 : void 0,
-          children: /* @__PURE__ */jsxRuntime.jsx(Text, {
-            muted,
-            align: textAlign,
-            size: fontSize,
-            textOverflow: "ellipsis",
-            weight: button.textWeight,
-            children: text
-          })
+        }), text && /* @__PURE__ */jsxRuntime.jsx(Text, {
+          muted,
+          align: textAlign,
+          size: fontSize,
+          textOverflow: "ellipsis",
+          weight: button.textWeight,
+          children: text
         }), iconRight && /* @__PURE__ */jsxRuntime.jsxs(Text, {
           size: fontSize,
           children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
@@ -2935,7 +2944,7 @@ function headingBaseStyle(props) {
   const {
     font
   } = theme.getTheme_v2(props.theme);
-  return styled.css(_c$8 || (_c$8 = __template$s(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_a$s || (_a$s = __template$s(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$g || (_b$g = __template$s(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family);
+  return styled.css(_c$8 || (_c$8 = __template$s(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_a$s || (_a$s = __template$s(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$g || (_b$g = __template$s(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.heading.weights.bold);
 }
 var __freeze$r = Object.freeze;
 var __defProp$s = Object.defineProperty;
@@ -3952,7 +3961,7 @@ var __template$m = (cooked, raw) => __freeze$m(__defProp$m(cooked, "raw", {
   value: __freeze$m(raw || cooked.slice())
 }));
 var _a$m;
-const MotionCard$1 = styled__default.default(framerMotion.motion(Card))(_a$m || (_a$m = __template$m(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  flex-direction: column;\n  width: max-content;\n  min-width: min-content;\n"])));
+const MotionCard$1 = styled__default.default(framerMotion.motion(Card))(_a$m || (_a$m = __template$m(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  flex-direction: column;\n  width: max-content;\n  min-width: min-content;\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref) {
   const {
     __unstable_margins: marginsProp,
@@ -3992,8 +4001,9 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
     top: y,
     width,
     zIndex,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }), [originX, originY, strategy, style, width, x, y, zIndex]);
+  }), [animate, originX, originY, strategy, style, width, x, y, zIndex]);
   const arrowStyle = react.useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
@@ -4505,9 +4515,9 @@ function switchRepresentationStyles(props) {
     color,
     input
   } = theme.getTheme_v2(props.theme);
-  return styled.css(_c$5 || (_c$5 = __template$j(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.input.default.enabled.border, color.input.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+  return styled.css(_c$5 || (_c$5 = __template$j(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input:checked[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.input.default.enabled.border, color.input.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
     focusRing: input.switch.focusRing
-  }), color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.hovered.border, color.input.default.hovered.bg, color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.disabled.border, color.input.default.disabled.bg, color.input.default.readOnly.border, color.input.default.readOnly.bg);
+  }), color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.hovered.border, color.input.default.hovered.bg, color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.disabled.border, color.input.default.disabled.bg, color.input.default.readOnly.border, color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.default.readOnly.bg);
 }
 function switchTrackStyles(props) {
   const {
@@ -4840,7 +4850,7 @@ var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", {
   value: __freeze$g(raw || cooked.slice())
 }));
 var _a$g;
-const MotionCard = styled__default.default(framerMotion.motion(Card))(_a$g || (_a$g = __template$g([""])));
+const MotionCard = styled__default.default(framerMotion.motion(Card))(_a$g || (_a$g = __template$g(["\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const TooltipCard = react.memo(react.forwardRef(function TooltipCard2(props, ref) {
   const {
     animate,
@@ -4862,8 +4872,9 @@ const TooltipCard = react.memo(react.forwardRef(function TooltipCard2(props, ref
   const rootStyle = react.useMemo(() => ({
     originX,
     originY,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }), [originX, originY, style]);
+  }), [animate, originX, originY, style]);
   const arrowStyle = react.useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
@@ -5821,7 +5832,7 @@ function responsiveDialogPositionStyle(props) {
   }));
 }
 function animationDialogStyle(props) {
-  if (!props.animate) return styled.css(_a$c || (_a$c = __template$c([""])));
+  if (!props.$animate) return styled.css(_a$c || (_a$c = __template$c([""])));
   return styled.css(_b$7 || (_b$7 = __template$c(["\n    @keyframes zoomIn {\n      from {\n        opacity: 0;\n        transform: scale(0.95);\n      }\n      to {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n    @keyframes fadeIn {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    animation: fadeIn 200ms ease-out;\n    // Animates the dialog card.\n    & > [data-ui='DialogCard'] {\n      animation: zoomIn 200ms ease-out;\n    }\n  "])));
 }
 const key$3 = Symbol.for("@sanity/ui/context/dialog");
@@ -6044,6 +6055,7 @@ const Dialog = react.forwardRef(function Dialog2(props, ref) {
     __unstable_name: portalProp,
     children: /* @__PURE__ */jsxRuntime.jsxs(Root$7, {
       ...restProps,
+      $animate: animate,
       $padding: padding,
       $position: position,
       "aria-labelledby": labelId,
@@ -6056,7 +6068,6 @@ const Dialog = react.forwardRef(function Dialog2(props, ref) {
       ref,
       role: "dialog",
       zOffset,
-      animate,
       children: [/* @__PURE__ */jsxRuntime.jsx("div", {
         ref: preDivRef,
         tabIndex: 0
@@ -7106,13 +7117,19 @@ const STATUS_CARD_TONE = {
   success: "positive",
   info: "primary"
 };
+const BUTTON_TONE = {
+  error: "critical",
+  warning: "caution",
+  success: "positive",
+  info: "primary"
+};
 const ROLES = {
   error: "alert",
   warning: "alert",
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled__default.default(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n"])));
+const Root$2 = styled__default.default(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const TextBox = styled__default.default(Flex)(_b$2 || (_b$2 = __template$3(["\n  overflow-x: auto;\n"])));
 function Toast(props) {
   const {
@@ -7125,6 +7142,7 @@ function Toast(props) {
     ...restProps
   } = props;
   const cardTone = status ? STATUS_CARD_TONE[status] : "default";
+  const buttonTone = status ? BUTTON_TONE[status] : "default";
   const role = status ? ROLES[status] : "status";
   return /* @__PURE__ */jsxRuntime.jsx(Root$2, {
     "data-ui": "Toast",
@@ -7158,6 +7176,7 @@ function Toast(props) {
           icon: icons.CloseIcon,
           mode: "bleed",
           padding: 2,
+          tone: buttonTone,
           onClick: onClose,
           style: {
             verticalAlign: "top"
@@ -7267,12 +7286,14 @@ function ToastProvider(props) {
               } = _ref12;
               return /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
                 animate: {
-                  opacity: 1,
+                  opacity: [0, 1, 1],
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
                   y: 0,
                   scale: 1
                 },
                 exit: {
-                  opacity: 0,
+                  opacity: [1, 1, 0],
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
                   scale: 0.5,
                   transition: {
                     duration: 0.2
@@ -7280,8 +7301,10 @@ function ToastProvider(props) {
                 },
                 initial: {
                   opacity: 0,
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
                   y: 32,
-                  scale: 0.25
+                  scale: 0.25,
+                  willChange: "transform"
                 },
                 layout: "position",
                 transition: {