@sanity/ui 2.0.0-alpha.11 → 2.0.0-alpha.13

package/dist/index.js

@@ -3896,7 +3896,7 @@ var __defProp$E = Object.defineProperty;
 var __template$D = (cooked, raw) => __freeze$D(__defProp$E(cooked, "raw", {
   value: __freeze$D(raw || cooked.slice())
 }));
-var _a$D, _b$m, _c$d;
+var _a$D, _b$n, _c$d;
 const ROOT_STYLE = styled.css(_a$D || (_a$D = __template$D(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
 function textInputRootStyle() {
   return ROOT_STYLE;
@@ -3910,7 +3910,7 @@ function textInputBaseStyle(props) {
   } = props;
   const font = theme.sanity.fonts.text;
   const color = theme.sanity.color.input;
-  return styled.css(_b$m || (_b$m = __template$D(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
+  return styled.css(_b$n || (_b$n = __template$D(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
 }
 function textInputFontSizeStyle(props) {
   const {
@@ -4026,7 +4026,7 @@ var __defProp$D = Object.defineProperty;
 var __template$C = (cooked, raw) => __freeze$C(__defProp$D(cooked, "raw", {
   value: __freeze$C(raw || cooked.slice())
 }));
-var _a$C, _b$l, _c$c;
+var _a$C, _b$m, _c$c;
 function textBaseStyle(props) {
   const {
     $accent,
@@ -4036,7 +4036,7 @@ function textBaseStyle(props) {
   const {
     weights
   } = theme.sanity.fonts.text;
-  return styled.css(_c$c || (_c$c = __template$C(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\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      color: var(--card-icon-color);\n    }\n  "])), $accent && styled.css(_a$C || (_a$C = __template$C(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$l || (_b$l = __template$C(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
+  return styled.css(_c$c || (_c$c = __template$C(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\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      color: var(--card-icon-color);\n    }\n  "])), $accent && styled.css(_a$C || (_a$C = __template$C(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$m || (_b$m = __template$C(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
 }
 var __freeze$B = Object.freeze;
 var __defProp$C = Object.defineProperty;
@@ -4601,9 +4601,9 @@ var __defProp$z = Object.defineProperty;
 var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
   value: __freeze$y(raw || cooked.slice())
 }));
-var _a$y, _b$k;
+var _a$y, _b$l;
 const rotate$1 = styled.keyframes(_a$y || (_a$y = __template$y(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const Root$x = styled__default.default(Text)(_b$k || (_b$k = __template$y(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
+const Root$x = styled__default.default(Text)(_b$l || (_b$l = __template$y(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
 const Spinner = react.forwardRef(function Spinner2(props, ref) {
   return /* @__PURE__ */jsxRuntime.jsx(Root$x, {
     "data-ui": "Spinner",
@@ -4648,9 +4648,12 @@ var __defProp$y = Object.defineProperty;
 var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
   value: __freeze$x(raw || cooked.slice())
 }));
-var _a$x;
-function buttonBaseStyles() {
-  return styled.css(_a$x || (_a$x = __template$x(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])));
+var _a$x, _b$k;
+function buttonBaseStyles(_ref20) {
+  let {
+    $width
+  } = _ref20;
+  return styled.css(_b$k || (_b$k = __template$x(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    ", "\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])), $width === "fill" && styled.css(_a$x || (_a$x = __template$x(["\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
 }
 const buttonTheme = {
   border: {
@@ -4665,7 +4668,7 @@ function combineBoxShadow() {
   return boxShadows.filter(Boolean).join(",");
 }
 function buttonColorStyles(props) {
-  var _a2, _b;
+  var _a2, _b2;
   const {
     $mode,
     theme
@@ -4708,7 +4711,7 @@ function buttonColorStyles(props) {
       },
       "&[data-selected]": _colorVarsStyle(base, color.pressed)
     }
-  }, (_b = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b.root].filter(Boolean);
+  }, (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b2.root].filter(Boolean);
 }
 var __freeze$w = Object.freeze;
 var __defProp$x = Object.defineProperty;
@@ -4743,6 +4746,7 @@ const Button = react.forwardRef(function Button2(props, ref) {
     tone = "default",
     type = "button",
     muted = false,
+    width,
     ...restProps
   } = props;
   const justify = useArrayProp(justifyProp);
@@ -4777,6 +4781,7 @@ const Button = react.forwardRef(function Button2(props, ref) {
     disabled: Boolean(loading || disabled),
     ref,
     type,
+    $width: width,
     children: [Boolean(loading) && /* @__PURE__ */jsxRuntime.jsx(LoadingBox, {
       children: /* @__PURE__ */jsxRuntime.jsx(Spinner, {})
     }), (icon || text || iconRight) && /* @__PURE__ */jsxRuntime.jsx(Box, {
@@ -5005,10 +5010,10 @@ var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
   value: __freeze$t(raw || cooked.slice())
 }));
 var _a$t;
-function codeSyntaxHighlightingStyle(_ref20) {
+function codeSyntaxHighlightingStyle(_ref21) {
   let {
     theme
-  } = _ref20;
+  } = _ref21;
   const color = theme.sanity.color.syntax;
   return {
     "&.atrule": {
@@ -6316,13 +6321,13 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     }));
     if (constrainSize || matchReferenceWidth) {
       ret.push(size({
-        apply(_ref21) {
+        apply(_ref22) {
           let {
             availableWidth,
             availableHeight,
             elements,
             referenceWidth
-          } = _ref21;
+          } = _ref22;
           referenceWidthRef.current = referenceWidth;
           const _currentWidth = widthRef.current;
           const _maxWidth = maxWidthRef.current;
@@ -7131,12 +7136,12 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
       mainAxis: 3
     }));
     ret.push(reactDom$1.size({
-      apply(_ref22) {
+      apply(_ref23) {
         let {
           availableWidth,
           availableHeight,
           elements
-        } = _ref22;
+        } = _ref23;
         Object.assign(elements.floating.style, {
           maxWidth: "".concat(availableWidth - 4 * 2, "px"),
           // the padding is `4px`
@@ -7442,10 +7447,10 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
     query,
     value
   } = state;
-  const defaultRenderOption = react.useCallback(_ref23 => {
+  const defaultRenderOption = react.useCallback(_ref24 => {
     let {
       value: value2
-    } = _ref23;
+    } = _ref24;
     return /* @__PURE__ */jsxRuntime.jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7899,10 +7904,10 @@ const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
   });
 });
 const BORDER_OFFSET_X = 12;
-function dialogStyle(_ref24) {
+function dialogStyle(_ref25) {
   let {
     theme
-  } = _ref24;
+  } = _ref25;
   const color = theme.sanity.color.base;
   return {
     "&:not([hidden])": {
@@ -8987,15 +8992,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
 var _a$6, _b$3, _c$1, _d;
 const keyframe = styled.keyframes(_a$6 || (_a$6 = __template$6(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
 const animation = styled.css(_b$3 || (_b$3 = __template$6(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = styled.css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref25 => {
+const skeletonStyle = styled.css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref26 => {
   let {
     $visible
-  } = _ref25;
+  } = _ref26;
   return $visible ? 1 : 0;
-}, _ref26 => {
+}, _ref27 => {
   let {
     $animated
-  } = _ref26;
+  } = _ref27;
   return $animated ? animation : styled.css(_c$1 || (_c$1 = __template$6(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
@@ -9026,12 +9031,12 @@ const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled__default.default(Skeleton)(_ref27 => {
+const Root$3 = styled__default.default(Skeleton)(_ref28 => {
   let {
     $size,
     $style,
     theme
-  } = _ref27;
+  } = _ref28;
   const {
     media
   } = theme.sanity;
@@ -9379,12 +9384,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
             initial: false,
-            children: state.map(_ref28 => {
+            children: state.map(_ref29 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref28;
+              } = _ref29;
               return /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
                 animate: {
                   opacity: 1,