@sanity/ui 0.37.14-next.6 → 0.37.14

package/lib/sanity-ui.js

@@ -6,8 +6,9 @@ var resizeObserver = require('@juggle/resize-observer');
 var color$1 = require('@sanity/color');
 var icons = require('@sanity/icons');
 var Refractor = require('react-refractor');
-var reactDom = require('@floating-ui/react-dom');
+var reactPopper = require('react-popper');
 var ReactDOM = require('react-dom');
+var maxSizeModifier = require('popper-max-size-modifier');
 var framerMotion = require('framer-motion');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -17,6 +18,7 @@ var ReactIs__default = /*#__PURE__*/_interopDefaultLegacy(ReactIs);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Refractor__default = /*#__PURE__*/_interopDefaultLegacy(Refractor);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var maxSizeModifier__default = /*#__PURE__*/_interopDefaultLegacy(maxSizeModifier);
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -114,25 +116,8 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-/**
- * @internal
- */
 var EMPTY_ARRAY = [];
-/**
- * @internal
- */
-
 var EMPTY_RECORD = {};
-/**
- * @internal
- */
-
-var FLOATING_STATIC_SIDES = {
-  top: 'bottom',
-  right: 'left',
-  bottom: 'top',
-  left: 'right'
-};
 
 /**
  * @internal
@@ -2947,7 +2932,7 @@ globalScope[key$7] = globalScope[key$7] || /*#__PURE__*/React.createContext(null
 
 var ThemeContext = globalScope[key$7];
 
-var _excluded$I = ["color", "layer"];
+var _excluded$H = ["color", "layer"];
 /**
  * @public
  */
@@ -2966,7 +2951,7 @@ function ThemeProvider(props) {
 
     var rootColor = themeProp.color,
         rootLayer = themeProp.layer,
-        restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$I);
+        restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$H);
 
     var colorScheme = rootColor[scheme] || rootColor.light;
     var color = colorScheme[tone] || colorScheme["default"];
@@ -3709,8 +3694,8 @@ function responsiveInputPaddingIconRightStyle(props) {
   }));
 }
 
-var _templateObject$C, _templateObject2$m, _templateObject3$d;
-var ROOT_STYLE = styled.css(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
+var _templateObject$D, _templateObject2$n, _templateObject3$e;
+var ROOT_STYLE = styled.css(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
 function textInputRootStyle() {
   return ROOT_STYLE;
 }
@@ -3720,7 +3705,7 @@ function textInputBaseStyle(props) {
       $weight = props.$weight;
   var font = theme.sanity.fonts.text;
   var color = theme.sanity.color.input;
-  return styled.css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\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-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, $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(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\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-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, $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) {
   var theme = props.theme;
@@ -3745,7 +3730,7 @@ function textInputRepresentationStyle(props) {
       focusRing = _theme$sanity2.focusRing,
       input = _theme$sanity2.input;
   var color = theme.sanity.color.input;
-  return styled.css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\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-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + & {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n        --input-box-shadow: ", ";\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        --input-box-shadow: ", ";\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --input-box-shadow: ", ";\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 + & {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : undefined, $hasPrefix ? 0 : undefined, $hasSuffix ? 0 : undefined, $hasSuffix ? 0 : undefined, $tone, color["default"].enabled.bg, color["default"].enabled.fg, $border ? focusRingBorderStyle({
+  return styled.css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\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-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + & {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n        --input-box-shadow: ", ";\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        --input-box-shadow: ", ";\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --input-box-shadow: ", ";\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 + & {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : undefined, $hasPrefix ? 0 : undefined, $hasSuffix ? 0 : undefined, $hasSuffix ? 0 : undefined, $tone, color["default"].enabled.bg, color["default"].enabled.fg, $border ? focusRingBorderStyle({
     color: color["default"].enabled.border,
     width: input.border.width
   }) : undefined, color.invalid.enabled.bg, color.invalid.enabled.fg, $border ? focusRingBorderStyle({
@@ -3813,20 +3798,20 @@ function responsiveShadowStyle(props) {
   });
 }
 
-var _templateObject$B, _templateObject2$l, _templateObject3$c;
+var _templateObject$C, _templateObject2$m, _templateObject3$d;
 function textBaseStyle(props) {
   var $accent = props.$accent,
       $muted = props.$muted,
       theme = props.theme;
   var weights = theme.sanity.fonts.text.weights;
-  return styled.css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\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: 0 0 0 1px var(--card-bg-color), 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    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
+  return styled.css(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\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: 0 0 0 1px var(--card-bg-color), 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    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
 }
 
-var _excluded$H = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+var _excluded$G = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-var _templateObject$A;
+var _templateObject$B;
 var Root$E = styled__default["default"].div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-var SpanWithTextOverflow$2 = styled__default["default"].span(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+var SpanWithTextOverflow$2 = styled__default["default"].span(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -3842,7 +3827,7 @@ var Text = /*#__PURE__*/React.forwardRef(function Text(props, ref) {
       size = _props$size === void 0 ? 2 : _props$size,
       textOverflow = props.textOverflow,
       weight = props.weight,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$H);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
 
   var children = childrenProp;
 
@@ -4002,7 +3987,7 @@ function avatarStrokeStyle() {
   };
 }
 
-var _excluded$G = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
+var _excluded$F = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
 var Root$D = styled__default["default"].div(responsiveAvatarSizeStyle, avatarStyle.root);
 var Arrow = styled__default["default"].div(avatarStyle.arrow);
 var BgStroke = styled__default["default"].ellipse(avatarStyle.bgStroke);
@@ -4026,7 +4011,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(props, ref) {
       status = _props$status === void 0 ? 'online' : _props$status,
       _props$size = props.size,
       sizeProp = _props$size === void 0 ? 0 : _props$size,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
 
   var as = ReactIs__default["default"].isValidElementType(asProp) ? asProp : 'div';
   var size = useArrayProp(sizeProp);
@@ -4131,7 +4116,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(props, ref) {
   }, /*#__PURE__*/React__default["default"].createElement("strong", null, initials)))));
 });
 
-var _templateObject$z;
+var _templateObject$A;
 
 function _responsiveAvatarCounterSizeStyle(props) {
   var theme = props.theme;
@@ -4151,7 +4136,7 @@ function _responsiveAvatarCounterSizeStyle(props) {
 
 function _avatarCounterBaseStyle(props) {
   var theme = props.theme;
-  return styled.css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
+  return styled.css(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
 }
 
 var Root$C = styled__default["default"].div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
@@ -4186,10 +4171,10 @@ function childrenToElementArray(children) {
   });
 }
 
-var _excluded$F = ["children", "maxLength", "size"];
+var _excluded$E = ["children", "maxLength", "size"];
 
-var _templateObject$y;
-var BASE_STYLES = styled.css(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
+var _templateObject$z;
+var BASE_STYLES = styled.css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
 
 function avatarStackStyle() {
   return BASE_STYLES;
@@ -4222,7 +4207,7 @@ var AvatarStack = /*#__PURE__*/React.forwardRef(function AvatarStack(props, ref)
       maxLengthProp = _props$maxLength === void 0 ? 4 : _props$maxLength,
       _props$size = props.size,
       sizeProp = _props$size === void 0 ? 0 : _props$size,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
 
   var children = childrenToElementArray(childrenProp).filter(function (child) {
     return typeof child !== 'string';
@@ -4252,7 +4237,7 @@ var AvatarStack = /*#__PURE__*/React.forwardRef(function AvatarStack(props, ref)
   }));
 });
 
-var _excluded$E = ["as", "column", "columnStart", "columnEnd", "display", "flex", "height", "margin", "marginX", "marginY", "marginTop", "marginRight", "marginBottom", "marginLeft", "overflow", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "row", "rowStart", "rowEnd", "sizing"];
+var _excluded$D = ["as", "column", "columnStart", "columnEnd", "display", "flex", "height", "margin", "marginX", "marginY", "marginTop", "marginRight", "marginBottom", "marginLeft", "overflow", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "row", "rowStart", "rowEnd", "sizing"];
 var Root$A = styled__default["default"].div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 /**
  * @public
@@ -4289,7 +4274,7 @@ var Box = /*#__PURE__*/React.forwardRef(function Box(props, ref) {
       rowStart = props.rowStart,
       rowEnd = props.rowEnd,
       sizing = props.sizing,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
 
   return /*#__PURE__*/React__default["default"].createElement(Root$A, _extends({
     "data-as": typeof asProp === 'string' ? asProp : undefined,
@@ -4325,20 +4310,20 @@ var Box = /*#__PURE__*/React.forwardRef(function Box(props, ref) {
   }), props.children);
 });
 
-var _templateObject$x, _templateObject2$k, _templateObject3$b;
+var _templateObject$y, _templateObject2$l, _templateObject3$c;
 function labelBaseStyle(props) {
   var $accent = props.$accent,
       $muted = props.$muted,
       theme = props.theme;
   var fonts = theme.sanity.fonts;
-  return styled.css(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n    text-transform: uppercase;\n\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    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
+  return styled.css(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n    text-transform: uppercase;\n\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    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
 }
 
-var _excluded$D = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+var _excluded$C = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-var _templateObject$w;
+var _templateObject$x;
 var Root$z = styled__default["default"].div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-var SpanWithTextOverflow$1 = styled__default["default"].span(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+var SpanWithTextOverflow$1 = styled__default["default"].span(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -4353,7 +4338,7 @@ var Label = /*#__PURE__*/React.forwardRef(function Label(props, ref) {
       size = _props$size === void 0 ? 2 : _props$size,
       textOverflow = props.textOverflow,
       weight = props.weight,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
 
   var children = childrenProp;
 
@@ -4392,7 +4377,7 @@ function badgeStyle(props) {
   };
 }
 
-var _excluded$C = ["children", "fontSize", "mode", "padding", "radius", "tone"];
+var _excluded$B = ["children", "fontSize", "mode", "padding", "radius", "tone"];
 var Root$y = styled__default["default"](Box)(responsiveRadiusStyle, badgeStyle);
 /**
  * @public
@@ -4409,7 +4394,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
       radius = _props$radius === void 0 ? 2 : _props$radius,
       _props$tone = props.tone,
       tone = _props$tone === void 0 ? 'default' : _props$tone,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
 
   return /*#__PURE__*/React__default["default"].createElement(Root$y, _extends({
     "data-ui": "Badge"
@@ -4424,7 +4409,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
   }, children));
 });
 
-var _excluded$B = ["align", "as", "direction", "gap", "justify", "wrap"];
+var _excluded$A = ["align", "as", "direction", "gap", "justify", "wrap"];
 var Root$x = styled__default["default"](Box)(flexItemStyle, responsiveFlexStyle);
 /**
  * @public
@@ -4438,7 +4423,7 @@ var Flex = /*#__PURE__*/React.forwardRef(function Flex(props, ref) {
       gap = props.gap,
       justify = props.justify,
       wrap = props.wrap,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
 
   return /*#__PURE__*/React__default["default"].createElement(Root$x, _extends({
     "data-ui": "Flex"
@@ -4453,9 +4438,9 @@ var Flex = /*#__PURE__*/React.forwardRef(function Flex(props, ref) {
   }));
 });
 
-var _templateObject$v, _templateObject2$j;
-var rotate$1 = styled.keyframes(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Root$w = styled__default["default"](Text)(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
+var _templateObject$w, _templateObject2$k;
+var rotate$1 = styled.keyframes(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Root$w = styled__default["default"](Text)(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
 /**
  * @public
  */
@@ -4505,13 +4490,13 @@ function _colorVarsStyle(base, color, checkered) {
   };
 }
 
-var _templateObject$u;
+var _templateObject$v;
 /**
  * @internal
  */
 
 function buttonBaseStyles() {
-  return styled.css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\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  "])));
+  return styled.css(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\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 buttonTheme = {
   border: {
@@ -4560,11 +4545,11 @@ function buttonColorStyles(props) {
   }, (_theme$sanity$styles = theme.sanity.styles) == null ? void 0 : (_theme$sanity$styles$ = _theme$sanity$styles.button) == null ? void 0 : _theme$sanity$styles$.root].filter(Boolean);
 }
 
-var _excluded$A = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
+var _excluded$z = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
 
-var _templateObject$t;
+var _templateObject$u;
 var Root$v = styled__default["default"].button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-var LoadingBox = styled__default["default"].div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
+var LoadingBox = styled__default["default"].div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
 /**
  * @public
  */
@@ -4599,7 +4584,7 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
       tone = _props$tone === void 0 ? 'default' : _props$tone,
       _props$type = props.type,
       type = _props$type === void 0 ? 'button' : _props$type,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$z);
 
   var justify = useArrayProp(justifyProp);
   var padding = useArrayProp(paddingProp);
@@ -4658,7 +4643,7 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   }, boxProps), children));
 });
 
-var _templateObject$s, _templateObject2$i, _templateObject3$a;
+var _templateObject$t, _templateObject2$j, _templateObject3$b;
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -4666,7 +4651,7 @@ function cardBaseStyle(props) {
   var $checkered = props.$checkered,
       theme = props.theme;
   var space = theme.sanity.space;
-  return styled.css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && styled.css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
+  return styled.css(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && styled.css(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
 }
 function cardColorStyle(props) {
   var _theme$sanity$styles, _theme$sanity$styles$;
@@ -4682,7 +4667,7 @@ function cardColorStyle(props) {
     width: 0,
     color: 'var(--card-border-color)'
   };
-  return styled.css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
+  return styled.css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
     base: base,
     border: border,
     focusRing: focusRing
@@ -4693,7 +4678,7 @@ function cardColorStyle(props) {
   }) : undefined, $focusRing ? focusRingBorderStyle(border) : undefined, (_theme$sanity$styles = theme.sanity.styles) == null ? void 0 : (_theme$sanity$styles$ = _theme$sanity$styles.card) == null ? void 0 : _theme$sanity$styles$.root);
 }
 
-var _excluded$z = ["__unstable_checkered", "__unstable_focusRing", "as", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "pressed", "radius", "scheme", "selected", "shadow", "tone"];
+var _excluded$y = ["__unstable_checkered", "__unstable_focusRing", "as", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "pressed", "radius", "scheme", "selected", "shadow", "tone"];
 var Root$u = styled__default["default"](Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 /**
  * @public
@@ -4718,7 +4703,7 @@ var Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
       shadow = props.shadow,
       _props$tone = props.tone,
       toneProp = _props$tone === void 0 ? 'default' : _props$tone,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$z);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$y);
 
   var as = ReactIs.isValidElementType(asProp) ? asProp : 'div';
   var rootTheme = useRootTheme();
@@ -4751,9 +4736,9 @@ var Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
   })));
 });
 
-var _templateObject$r, _templateObject2$h;
+var _templateObject$s, _templateObject2$i;
 function checkboxBaseStyles() {
-  return styled.css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n    position: relative;\n    display: inline-block;\n  "])));
+  return styled.css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n    position: relative;\n    display: inline-block;\n  "])));
 }
 function inputElementStyles(props) {
   var theme = props.theme;
@@ -4762,7 +4747,7 @@ function inputElementStyles(props) {
       focusRing = _theme$sanity.focusRing,
       input = _theme$sanity.input,
       radius = _theme$sanity.radius;
-  return styled.css(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 2 !important;\n        }\n      }\n    }\n\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:not([data-read-only]):disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
+  return styled.css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 2 !important;\n        }\n      }\n    }\n\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:not([data-read-only]):disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
     color: color["default"].enabled.border,
     width: input.border.width
   }), rem(radius[2]), color["default"].enabled.bg, focusRingStyle({
@@ -4783,7 +4768,7 @@ function inputElementStyles(props) {
   }), color["default"].disabled.fg);
 }
 
-var _excluded$y = ["checked", "className", "disabled", "indeterminate", "customValidity", "readOnly", "style"];
+var _excluded$x = ["checked", "className", "disabled", "indeterminate", "customValidity", "readOnly", "style"];
 var Root$t = styled__default["default"].div(checkboxBaseStyles);
 var Input$5 = styled__default["default"].input(inputElementStyles);
 /**
@@ -4798,7 +4783,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, forwardedR
       customValidity = props.customValidity,
       readOnly = props.readOnly,
       style = props.style,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$y);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$x);
 
   var ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
@@ -4823,7 +4808,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, forwardedR
   })), /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkIcon, null), /*#__PURE__*/React__default["default"].createElement(icons.RemoveIcon, null)));
 });
 
-var _templateObject$q;
+var _templateObject$r;
 
 function codeSyntaxHighlightingStyle(_ref) {
   var theme = _ref.theme;
@@ -4941,10 +4926,10 @@ function codeSyntaxHighlightingStyle(_ref) {
 }
 
 function codeBaseStyle() {
-  return styled.css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
+  return styled.css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
 }
 
-var _excluded$x = ["children", "language", "size", "weight"];
+var _excluded$w = ["children", "language", "size", "weight"];
 var Root$s = styled__default["default"].pre(codeBaseStyle, responsiveCodeFontStyle);
 /**
  * @public
@@ -4956,7 +4941,7 @@ var Code = /*#__PURE__*/React.forwardRef(function Code(props, ref) {
       _props$size = props.size,
       size = _props$size === void 0 ? 2 : _props$size,
       weight = props.weight,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$x);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$w);
 
   var language = typeof languageProp === 'string' ? languageProp : undefined;
   var registered = language ? Refractor__default["default"].hasLanguage(language) : false;
@@ -4992,7 +4977,7 @@ function responsiveContainerWidthStyle(props) {
   });
 }
 
-var _excluded$w = ["as", "width"];
+var _excluded$v = ["as", "width"];
 var Root$r = styled__default["default"](Box)(containerBaseStyle, responsiveContainerWidthStyle);
 /**
  * @public
@@ -5002,7 +4987,7 @@ var Container = /*#__PURE__*/React.forwardRef(function Container(props, ref) {
   var as = props.as,
       _props$width = props.width,
       width = _props$width === void 0 ? 2 : _props$width,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$w);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$v);
 
   return /*#__PURE__*/React__default["default"].createElement(Root$r, _extends({
     "data-ui": "Container"
@@ -5013,7 +4998,7 @@ var Container = /*#__PURE__*/React.forwardRef(function Container(props, ref) {
   }));
 });
 
-var _excluded$v = ["as", "autoRows", "autoCols", "autoFlow", "columns", "gap", "gapX", "gapY", "rows", "children"];
+var _excluded$u = ["as", "autoRows", "autoCols", "autoFlow", "columns", "gap", "gapX", "gapY", "rows", "children"];
 var Root$q = styled__default["default"](Box)(responsiveGridStyle);
 /**
  * @public
@@ -5030,7 +5015,7 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(props, ref) {
       gapY = props.gapY,
       rows = props.rows,
       children = props.children,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$v);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$u);
 
   return /*#__PURE__*/React__default["default"].createElement(Root$q, _extends({
     "data-as": typeof as === 'string' ? as : undefined,
@@ -5049,19 +5034,19 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(props, ref) {
   }), children);
 });
 
-var _templateObject$p, _templateObject2$g, _templateObject3$9;
+var _templateObject$q, _templateObject2$h, _templateObject3$a;
 function headingBaseStyle(props) {
   var $accent = props.$accent,
       $muted = props.$muted,
       theme = props.theme;
-  return styled.css(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\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: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
+  return styled.css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\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: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
 }
 
-var _excluded$u = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+var _excluded$t = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-var _templateObject$o;
+var _templateObject$p;
 var Root$p = styled__default["default"].div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-var SpanWithTextOverflow = styled__default["default"].span(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+var SpanWithTextOverflow = styled__default["default"].span(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -5077,7 +5062,7 @@ var Heading = /*#__PURE__*/React.forwardRef(function Heading(props, ref) {
       size = _props$size === void 0 ? 2 : _props$size,
       textOverflow = props.textOverflow,
       weight = props.weight,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$u);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$t);
 
   var children = childrenProp;
 
@@ -5122,7 +5107,7 @@ function inlineSpaceStyle(props) {
   });
 }
 
-var _excluded$t = ["as", "children", "space"];
+var _excluded$s = ["as", "children", "space"];
 var Root$o = styled__default["default"](Box)(inlineBaseStyle, inlineSpaceStyle);
 /**
  * @public
@@ -5132,7 +5117,7 @@ var Inline = /*#__PURE__*/React.forwardRef(function Inline(props, ref) {
   var as = props.as,
       childrenProp = props.children,
       space = props.space,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$t);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$s);
 
   var children = React.useMemo(function () {
     return childrenToElementArray(childrenProp).filter(Boolean).map(function (child, idx) {
@@ -5150,12 +5135,12 @@ var Inline = /*#__PURE__*/React.forwardRef(function Inline(props, ref) {
   }), children);
 });
 
-var _excluded$s = ["children", "fontSize", "padding", "radius"];
+var _excluded$r = ["children", "fontSize", "padding", "radius"];
 
-var _templateObject$n;
+var _templateObject$o;
 
 function kbdStyle() {
-  return styled.css(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 
 var Root$n = styled__default["default"].kbd(responsiveRadiusStyle, kbdStyle);
@@ -5171,7 +5156,7 @@ var KBD = /*#__PURE__*/React.forwardRef(function KBD(props, ref) {
       padding = _props$padding === void 0 ? 1 : _props$padding,
       _props$radius = props.radius,
       radius = _props$radius === void 0 ? 2 : _props$radius,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$s);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$r);
 
   return /*#__PURE__*/React__default["default"].createElement(Root$n, _extends({
     "data-ui": "KBD"
@@ -5257,7 +5242,7 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 
-var _excluded$r = ["children", "media"];
+var _excluded$q = ["children", "media"];
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
@@ -5269,7 +5254,7 @@ var ElementQuery = /*#__PURE__*/React.forwardRef(function ElementQuery(props, re
   var children = props.children,
       _props$media = props.media,
       media = _props$media === void 0 ? theme.sanity.media : _props$media,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$r);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$q);
 
   var forwardedRef = useForwardedRef(ref);
 
@@ -5426,16 +5411,16 @@ function LayerProvider(props) {
   }, children);
 }
 
-var _excluded$q = ["children", "style"],
+var _excluded$p = ["children", "style"],
     _excluded2$1 = ["children", "zOffset"];
 
-var _templateObject$m;
-var Root$m = styled__default["default"].div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$n;
+var Root$m = styled__default["default"].div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var LayerChildren = /*#__PURE__*/React.forwardRef(function LayerChildren(props, ref) {
   var children = props.children,
       _props$style = props.style,
       style = _props$style === void 0 ? EMPTY_RECORD : _props$style,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$q);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$p);
 
   var _useLayer = useLayer(),
       zIndex = _useLayer.zIndex;
@@ -5583,8 +5568,8 @@ function PortalProvider(props) {
   }, children);
 }
 
-var _templateObject$l;
-var Root$l = styled__default["default"].div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n"])));
+var _templateObject$m;
+var Root$l = styled__default["default"].div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -5766,11 +5751,11 @@ function _isScrollable(el) {
   return style.overflowX.includes('auto') || style.overflowX.includes('scroll') || style.overflowY.includes('auto') || style.overflowY.includes('scroll');
 }
 
-var _excluded$p = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
+var _excluded$o = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
 
-var _templateObject$k, _templateObject2$f;
-var Root$k = styled__default["default"].div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var ItemWrapper = styled__default["default"].div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
+var _templateObject$l, _templateObject2$g;
+var Root$k = styled__default["default"].div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var ItemWrapper = styled__default["default"].div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
 /**
  * @beta
  */
@@ -5785,7 +5770,7 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function VirtualList(props, ref)
       items = _props$items === void 0 ? [] : _props$items,
       onChange = props.onChange,
       renderItem = props.renderItem,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$p);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$o);
 
   var space = useTheme().sanity.space;
   var forwardedRef = useForwardedRef(ref);
@@ -5914,13 +5899,13 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function VirtualList(props, ref)
   }, children));
 });
 
-var _templateObject$j, _templateObject2$e, _templateObject3$8;
-var Root$j = styled__default["default"].div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  pointer-events: none;\n  width: 27px;\n  height: 27px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 13.5px 13.5px;\n  }\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
-var BorderPath = styled__default["default"].path(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  fill: var(--card-shadow-outline-color);\n"])));
-var ShapePath = styled__default["default"].path(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  fill: var(--card-bg-color);\n"])));
+var _templateObject$k, _templateObject2$f, _templateObject3$9;
+var Root$j = styled__default["default"].div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  pointer-events: none;\n  width: 27px;\n  height: 27px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 13.5px 13.5px;\n  }\n\n  [data-popper-placement^='top'] > div > & {\n    bottom: -27px;\n  }\n\n  [data-popper-placement^='right'] > div > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-popper-placement^='left'] > div > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-popper-placement^='bottom'] > div > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+var BorderPath = styled__default["default"].path(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n  fill: var(--card-shadow-outline-color);\n"])));
+var ShapePath = styled__default["default"].path(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  fill: var(--card-bg-color);\n"])));
 var PopoverArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(props, ref) {
   return /*#__PURE__*/React__default["default"].createElement(Root$j, _extends({
-    "data-ui": "Popover__arrow"
+    "data-ui": "PopoverArrow"
   }, props, {
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement("svg", {
@@ -5936,309 +5921,317 @@ var PopoverArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(props, re
   })));
 });
 
-var _excluded$o = ["__unstable_margins", "arrow", "arrowRef", "arrowX", "arrowY", "availableHeight", "availableWidth", "boundaryWidth", "children", "padding", "placement", "overflow", "radius", "referenceWidth", "scheme", "shadow", "strategy", "tone", "width", "x", "y"];
-
-function popoverCardStyle(props) {
-  var $boundaryWidth = props.$boundaryWidth;
-  return {
-    maxWidth: $boundaryWidth ? $boundaryWidth - 16 + "px" : 'calc(100% - 16px)'
-  };
-}
+/*
 
-var Root$i = /*#__PURE__*/React.memo(styled__default["default"](Card)(popoverCardStyle));
-/**
- * @internal
- */
+The order of popper phases:
 
-var PopoverCard = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function PopoverCard(props, ref) {
-  var marginsProp = props.__unstable_margins,
-      arrow = props.arrow,
-      arrowRef = props.arrowRef,
-      arrowX = props.arrowX,
-      arrowY = props.arrowY,
-      availableHeight = props.availableHeight,
-      availableWidth = props.availableWidth,
-      boundaryWidth = props.boundaryWidth,
-      children = props.children,
-      padding = props.padding,
-      placement = props.placement,
-      overflow = props.overflow,
-      radius = props.radius,
-      referenceWidthProp = props.referenceWidth,
-      scheme = props.scheme,
-      shadow = props.shadow,
-      strategy = props.strategy,
-      tone = props.tone,
-      width = props.width,
-      xProp = props.x,
-      yProp = props.y,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$o);
+- beforeRead
+- read
+- afterRead
+- beforeMain
+- main
+- afterMain
+- beforeWrite
+- write
+- afterWrite
 
-  var _useLayer = useLayer(),
-      zIndex = _useLayer.zIndex; // top right bottom left
-
-
-  var margins = React.useMemo(function () {
-    return marginsProp || [0, 0, 0, 0];
-  }, [marginsProp]); // translate according to margins
-
-  var referenceWidth = referenceWidthProp ? referenceWidthProp - margins[1] - margins[3] : undefined;
-  var x = (xProp != null ? xProp : 0) + margins[3];
-  var y = (yProp != null ? yProp : 0) + margins[0];
-  var maxWidth = availableWidth ? Math.min(availableWidth - 8, referenceWidth || Infinity) : undefined;
-  var rootStyle = React.useMemo(function () {
-    return {
-      position: strategy,
-      top: y,
-      left: x,
-      zIndex: zIndex,
-      width: referenceWidth,
-      maxWidth: referenceWidth ? undefined : maxWidth
-    };
-  }, [referenceWidth, maxWidth, strategy, x, y, zIndex]);
-  var wrapperStyle = React.useMemo(function () {
-    return {
-      minHeight: 25,
-      maxHeight: availableHeight ? availableHeight - 8 : undefined
-    };
-  }, [availableHeight]);
-  var staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]];
-  var arrowStyle = React.useMemo(function () {
-    var style = {
-      left: arrowX !== null ? arrowX : undefined,
-      top: arrowY !== null ? arrowY : undefined,
-      right: undefined,
-      bottom: undefined
-    };
-    if (staticSide) style[staticSide] = -27;
-    return style;
-  }, [arrowX, arrowY, staticSide]);
-  return /*#__PURE__*/React__default["default"].createElement(Root$i, _extends({}, restProps, {
-    "$boundaryWidth": boundaryWidth,
-    "data-placement": placement,
-    "data-ui": "Popover",
-    radius: radius,
-    ref: ref,
-    scheme: scheme,
-    shadow: shadow,
-    style: rootStyle,
-    tone: tone,
-    "$width": width
-  }), /*#__PURE__*/React__default["default"].createElement(Box, {
-    "data-ui": "Popover__wrapper",
-    overflow: overflow,
-    padding: padding,
-    sizing: "border",
-    style: wrapperStyle
-  }, children), arrow && /*#__PURE__*/React__default["default"].createElement(PopoverArrow, {
-    ref: arrowRef,
-    style: arrowStyle
-  }));
-}));
-PopoverCard.displayName = 'PopoverCard';
+*/
 
-var _excluded$n = ["__unstable_margins", "allowedAutoPlacements", "arrow", "boundaryElement", "children", "constrainSize", "content", "disabled", "fallbackPlacements", "matchReferenceWidth", "open", "overflow", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "scheme", "shadow", "tether", "tetherOffset", "tone", "width", "zOffset"];
+function getPopoverModifiers(props) {
+  var allowedAutoPlacements = props.allowedAutoPlacements,
+      arrow = props.arrow,
+      arrowElement = props.arrowElement,
+      boundaryElement = props.boundaryElement,
+      constrainSize = props.constrainSize,
+      distance = props.distance,
+      fallbackPlacements = props.fallbackPlacements,
+      margins = props.margins,
+      matchReferenceWidth = props.matchReferenceWidth,
+      open = props.open,
+      preventOverflow = props.preventOverflow,
+      skidding = props.skidding,
+      tether = props.tether,
+      tetherOffset = props.tetherOffset; // NOTE: For later viewers:
+  // Prior to adding this change, the popover would get `maxWidth: 0` the 2nd time it
+  // was opened, when used with `constrainSize`. I was looking for a way to "reset"
+  // the size of the popover as measured by Popper.js, and this seems to be a workaround.
+
+  if (!open) {
+    return [];
+  }
 
-function size(scope) {
-  return reactDom.size({
-    apply: function apply(args) {
-      if (scope.constrainSize) {
-        scope.setAvailableWidth(args.availableWidth);
-        scope.setAvailableHeight(args.availableHeight);
+  var detectOverflowOptions = {
+    altAxis: !constrainSize,
+    boundary: boundaryElement || undefined,
+    padding: 8,
+    tether: tether,
+    tetherOffset: tetherOffset
+  };
+  return [constrainSize && _extends({}, maxSizeModifier__default["default"], {
+    options: detectOverflowOptions
+  }), constrainSize && {
+    name: 'applyMaxSize',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['maxSize'],
+    fn: function fn(_ref) {
+      var state = _ref.state;
+      var _state$modifiersData$ = state.modifiersData.maxSize,
+          width = _state$modifiersData$.width,
+          height = _state$modifiersData$.height;
+      state.styles.popper = _extends({}, state.styles.popper, {
+        maxWidth: width + "px",
+        maxHeight: height + "px"
+      });
+    }
+  }, arrow && {
+    name: 'arrow',
+    options: {
+      element: arrowElement,
+      padding: 4
+    }
+  }, (constrainSize || preventOverflow) && {
+    name: 'preventOverflow',
+    options: detectOverflowOptions
+  }, {
+    name: 'offset',
+    options: {
+      offset: [skidding, distance]
+    }
+  }, margins && {
+    name: 'margins',
+    enabled: true,
+    phase: 'beforeRead',
+    fn: function fn(_ref2) {
+      var state = _ref2.state;
+      var rects = state.rects;
+
+      if (rects.reference) {
+        rects.reference.x += margins[3];
+        rects.reference.y += margins[1];
+        rects.reference.width -= margins[1] + margins[3];
+        rects.reference.height -= margins[0] + margins[2];
       }
+    }
+  }, {
+    name: 'flip',
+    options: {
+      allowedAutoPlacements: allowedAutoPlacements,
+      boundary: boundaryElement || undefined,
+      fallbackPlacements: fallbackPlacements,
+      padding: 8
+    }
+  }, matchReferenceWidth && {
+    name: 'matchWidth',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['computeStyles'],
+    fn: function fn(_ref3) {
+      var state = _ref3.state;
+      var width = state.rects.reference.width;
+      state.styles.popper.width = width + "px";
+    },
+    effect: function effect(_ref4) {
+      var state = _ref4.state;
+      var refElement = state.elements.reference;
 
-      if (scope.matchReferenceWidth) {
-        scope.setReferenceWidth(args.rects.reference.width);
+      if (refElement instanceof HTMLElement) {
+        state.elements.popper.style.width = refElement.offsetWidth - (margins ? margins[1] + margins[3] : 0) + "px";
       }
-    },
-    boundary: scope.boundaryElement || undefined
-  });
+    }
+  }].filter(Boolean);
 }
 
-var Popover = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
-  var _theme$sanity$layer, _useElementSize, _middlewareData$arrow, _middlewareData$arrow2;
+function usePopoverModifiers(props) {
+  var allowedAutoPlacements = props.allowedAutoPlacements,
+      arrow = props.arrow,
+      arrowElement = props.arrowElement,
+      boundaryElement = props.boundaryElement,
+      constrainSize = props.constrainSize,
+      distance = props.distance,
+      fallbackPlacements = props.fallbackPlacements,
+      margins = props.margins,
+      matchReferenceWidth = props.matchReferenceWidth,
+      open = props.open,
+      preventOverflow = props.preventOverflow,
+      skidding = props.skidding,
+      tether = props.tether,
+      tetherOffset = props.tetherOffset;
+  return React.useMemo(function () {
+    return getPopoverModifiers({
+      allowedAutoPlacements: allowedAutoPlacements,
+      arrow: arrow,
+      arrowElement: arrowElement,
+      boundaryElement: boundaryElement,
+      constrainSize: constrainSize,
+      distance: distance,
+      fallbackPlacements: fallbackPlacements,
+      margins: margins,
+      matchReferenceWidth: matchReferenceWidth,
+      open: open,
+      preventOverflow: preventOverflow,
+      skidding: skidding,
+      tether: tether,
+      tetherOffset: tetherOffset
+    });
+  }, [allowedAutoPlacements, arrow, arrowElement, boundaryElement, constrainSize, distance, fallbackPlacements, margins, matchReferenceWidth, open, preventOverflow, skidding, tether, tetherOffset]);
+}
+
+var _excluded$n = ["__unstable_margins", "allowedAutoPlacements", "arrow", "boundaryElement", "children", "content", "constrainSize", "disabled", "fallbackPlacements", "open", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "matchReferenceWidth", "shadow", "scheme", "style", "tether", "tetherOffset", "tone", "width", "zOffset"];
+
+var _templateObject$j, _templateObject2$e, _templateObject3$8;
+var Root$i = styled__default["default"](Layer)(function (_ref) {
+  var $preventOverflow = _ref.$preventOverflow;
+  return styled.css(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    max-width: calc(100% - 16px);\n\n    & > * {\n      min-height: 0;\n    }\n\n    /* Hide the popover when the reference element is out of bounds */\n    ", "\n  "])), $preventOverflow && styled.css(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n      &[data-popper-reference-hidden='true'] {\n        display: none;\n      }\n    "]))));
+});
+var PopoverCard = styled__default["default"](Card)(function (_ref2) {
+  var $constrainSize = _ref2.$constrainSize;
+  return styled.css(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n    flex: 1;\n    max-height: ", ";\n    pointer-events: all;\n\n    && {\n      display: flex;\n    }\n\n    flex-direction: column;\n\n    & > * {\n      min-height: 0;\n    }\n\n    ", "\n  "])), $constrainSize && '100%', responsiveContainerWidthStyle);
+});
+/**
+ * @public
+ */
+
+var Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
+  var _theme$sanity$layer;
 
-  var theme = useTheme();
   var boundaryElementContext = useBoundaryElement();
+  var theme = useTheme();
 
   var margins = props.__unstable_margins,
+      allowedAutoPlacements = props.allowedAutoPlacements,
       _props$arrow = props.arrow,
-      arrowProp = _props$arrow === void 0 ? true : _props$arrow,
+      arrow = _props$arrow === void 0 ? true : _props$arrow,
       _props$boundaryElemen = props.boundaryElement,
-      boundaryElement = _props$boundaryElemen === void 0 ? boundaryElementContext.element : _props$boundaryElemen,
-      childProp = props.children,
-      _props$constrainSize = props.constrainSize,
-      constrainSize = _props$constrainSize === void 0 ? false : _props$constrainSize,
+      boundaryElementProp = _props$boundaryElemen === void 0 ? boundaryElementContext.element : _props$boundaryElemen,
+      child = props.children,
       content = props.content,
+      constrainSize = props.constrainSize,
       disabled = props.disabled,
       fallbackPlacements = props.fallbackPlacements,
-      matchReferenceWidthProp = props.matchReferenceWidth,
-      open = props.open,
-      _props$overflow = props.overflow,
-      overflow = _props$overflow === void 0 ? props.constrainSize ? 'auto' : undefined : _props$overflow,
-      paddingProp = props.padding,
+      _props$open = props.open,
+      open = _props$open === void 0 ? false : _props$open,
+      padding = props.padding,
       _props$placement = props.placement,
-      placementProp = _props$placement === void 0 ? 'bottom' : _props$placement,
-      portal = props.portal,
-      _props$preventOverflo = props.preventOverflow,
-      preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
+      placement = _props$placement === void 0 ? 'bottom' : _props$placement,
+      _props$portal = props.portal,
+      portalProp = _props$portal === void 0 ? false : _props$portal,
+      preventOverflow = props.preventOverflow,
       _props$radius = props.radius,
-      radiusProp = _props$radius === void 0 ? 3 : _props$radius,
-      referenceElement = props.referenceElement,
-      scheme = props.scheme,
+      radius = _props$radius === void 0 ? 3 : _props$radius,
+      referenceElementProp = props.referenceElement,
+      matchReferenceWidth = props.matchReferenceWidth,
       _props$shadow = props.shadow,
-      shadowProp = _props$shadow === void 0 ? 3 : _props$shadow,
+      shadow = _props$shadow === void 0 ? 3 : _props$shadow,
+      scheme = props.scheme,
+      _props$style = props.style,
+      style = _props$style === void 0 ? EMPTY_RECORD : _props$style,
+      tether = props.tether,
+      tetherOffset = props.tetherOffset,
       _props$tone = props.tone,
       tone = _props$tone === void 0 ? 'inherit' : _props$tone,
       _props$width = props.width,
-      widthProp = _props$width === void 0 ? undefined : _props$width,
+      widthProp = _props$width === void 0 ? 0 : _props$width,
       _props$zOffset = props.zOffset,
-      zOffsetProp = _props$zOffset === void 0 ? (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.popover.zOffset : _props$zOffset,
+      zOffset = _props$zOffset === void 0 ? (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.popover.zOffset : _props$zOffset,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$n);
 
-  var boundarySize = (_useElementSize = useElementSize(boundaryElement)) == null ? void 0 : _useElementSize.border;
-  var padding = useArrayProp(paddingProp);
-  var radius = useArrayProp(radiusProp);
-  var shadow = useArrayProp(shadowProp);
-  var width = useArrayProp(widthProp);
-  var zOffset = useArrayProp(zOffsetProp);
-
-  var _useState = React.useState(undefined),
-      availableWidth = _useState[0],
-      setAvailableWidth = _useState[1];
-
-  var _useState2 = React.useState(undefined),
-      availableHeight = _useState2[0],
-      setAvailableHeight = _useState2[1];
-
-  var _useState3 = React.useState(undefined),
-      referenceWidth = _useState3[0],
-      setReferenceWidth = _useState3[1];
-
   var forwardedRef = useForwardedRef(ref);
-  var arrowRef = React.useRef(null);
-  var rootBoundary = 'viewport';
-  var middleware = React.useMemo(function () {
-    var ret = []; // Flip the floating element when leaving the boundary box
-
-    if (constrainSize || preventOverflow) {
-      ret.push(reactDom.flip({
-        boundary: boundaryElement || undefined,
-        fallbackPlacements: fallbackPlacements,
-        padding: 8,
-        rootBoundary: rootBoundary
-      }));
-    } // Track sizes
-
-
-    ret.push(size({
-      boundaryElement: boundaryElement,
-      constrainSize: constrainSize,
-      matchReferenceWidth: matchReferenceWidthProp,
-      setAvailableHeight: setAvailableHeight,
-      setAvailableWidth: setAvailableWidth,
-      setReferenceWidth: setReferenceWidth
-    })); // Define distance between reference and floating element
-
-    ret.push(reactDom.offset({
-      mainAxis: arrowProp ? 4 : 0
-    })); // Shift the popover so its sits with the boundary eleement
-
-    if (preventOverflow) {
-      ret.push(reactDom.shift({
-        boundary: boundaryElement || undefined,
-        rootBoundary: rootBoundary,
-        padding: 8
-      }));
-    } // Place arrow
+  var portal = usePortal();
 
+  var _useState = React.useState(null),
+      referenceElement = _useState[0],
+      setReferenceElement = _useState[1];
 
-    if (arrowProp) {
-      ret.push(reactDom.arrow({
-        element: arrowRef,
-        padding: 4
-      }));
-    }
+  var _useState2 = React.useState(null),
+      popperElement = _useState2[0],
+      setPopperElement = _useState2[1];
 
-    return ret;
-  }, [arrowProp, boundaryElement, constrainSize, fallbackPlacements, matchReferenceWidthProp, preventOverflow]);
+  var _useState3 = React.useState(null),
+      arrowElement = _useState3[0],
+      setArrowElement = _useState3[1];
 
-  var _useFloating = reactDom.useFloating({
-    middleware: middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom.autoUpdate
-  }),
-      x = _useFloating.x,
-      y = _useFloating.y,
-      placement = _useFloating.placement,
-      reference = _useFloating.reference,
-      floating = _useFloating.floating,
-      middlewareData = _useFloating.middlewareData,
-      strategy = _useFloating.strategy;
-
-  var arrowX = (_middlewareData$arrow = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow.x;
-  var arrowY = (_middlewareData$arrow2 = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow2.y;
-  var setArrow = React.useCallback(function (arrowEl) {
-    arrowRef.current = arrowEl;
-  }, []);
-  var setFloating = React.useCallback(function (node) {
-    forwardedRef.current = node;
-    floating(node);
-  }, [floating, forwardedRef]);
-  var setReference = React.useCallback(function (node) {
-    reference(node);
-    var childRef = childProp == null ? void 0 : childProp.ref;
+  var popperReferenceElement = referenceElementProp || referenceElement;
+  var width = useArrayProp(widthProp);
+  var modifiers = usePopoverModifiers({
+    allowedAutoPlacements: allowedAutoPlacements,
+    arrow: arrow,
+    arrowElement: arrowElement,
+    boundaryElement: boundaryElementProp || portal.boundaryElement,
+    constrainSize: constrainSize,
+    distance: arrow ? 4 : 0,
+    fallbackPlacements: fallbackPlacements,
+    margins: margins,
+    matchReferenceWidth: matchReferenceWidth,
+    open: open,
+    preventOverflow: preventOverflow,
+    skidding: 0,
+    tether: tether,
+    tetherOffset: tetherOffset
+  });
+  var popper = reactPopper.usePopper(popperReferenceElement, popperElement, {
+    placement: placement,
+    modifiers: modifiers
+  });
+  var attributes = popper.attributes,
+      forceUpdate = popper.forceUpdate,
+      styles = popper.styles;
+  var setRef = React.useCallback(function (el) {
+    var childRef = child.ref;
+    setReferenceElement(el);
 
     if (typeof childRef === 'function') {
-      childRef(node);
+      childRef(el);
     } else if (childRef) {
-      childRef.current = node;
+      childRef.current = el;
     }
-  }, [childProp, reference]);
-  var child = React.useMemo(function () {
-    if (!childProp || referenceElement) return null;
-    return /*#__PURE__*/React.cloneElement(childProp, {
-      ref: setReference
-    });
-  }, [childProp, referenceElement, setReference]);
+  }, [child]);
+  var setRootRef = React.useCallback(function (el) {
+    setPopperElement(el);
+    forwardedRef.current = el;
+  }, [forwardedRef]);
+  var popoverStyle = React.useMemo(function () {
+    return _extends({}, style, styles.popper);
+  }, [style, styles]);
   React.useEffect(function () {
-    if (referenceElement) reference(referenceElement);
-  }, [reference, referenceElement]);
+    if (forceUpdate) {
+      try {
+        forceUpdate();
+      } catch (_) {// ignore caught error
+      }
+    }
+  }, [content, forceUpdate, open, popperReferenceElement]);
 
   if (disabled) {
-    return childProp || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+    return child || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
   }
 
-  var popover = /*#__PURE__*/React__default["default"].createElement(LayerProvider, {
+  var node = /*#__PURE__*/React__default["default"].createElement(Root$i, _extends({
+    "data-ui": "Popover"
+  }, restProps, {
+    "$preventOverflow": preventOverflow,
+    ref: setRootRef,
+    style: popoverStyle,
     zOffset: zOffset
-  }, /*#__PURE__*/React__default["default"].createElement(PopoverCard, _extends({}, restProps, {
-    __unstable_margins: margins,
-    arrow: arrowProp,
-    arrowRef: setArrow,
-    arrowX: arrowX,
-    arrowY: arrowY,
-    availableWidth: constrainSize ? availableWidth : undefined,
-    availableHeight: constrainSize ? availableHeight : undefined,
-    boundaryWidth: boundarySize == null ? void 0 : boundarySize.width,
-    overflow: overflow,
+  }, attributes.popper), /*#__PURE__*/React__default["default"].createElement(PopoverCard, {
+    "$constrainSize": constrainSize,
+    "$width": width,
+    "data-ui": "PopoverCard",
     padding: padding,
-    placement: placement,
     radius: radius,
-    ref: setFloating,
-    referenceWidth: matchReferenceWidthProp ? referenceWidth : undefined,
     scheme: scheme,
     shadow: shadow,
-    strategy: strategy,
-    tone: tone,
-    x: x,
-    y: y,
-    width: width
+    tone: tone
+  }, arrow && /*#__PURE__*/React__default["default"].createElement(PopoverArrow, {
+    ref: setArrowElement,
+    style: styles.arrow
   }), content));
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, open && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, portal ? /*#__PURE__*/React__default["default"].createElement(Portal, {
-    __unstable_name: typeof portal === 'string' ? portal : undefined
-  }, popover) : popover), child);
-}));
-Popover.displayName = 'Popover';
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, child && !referenceElementProp ? /*#__PURE__*/React.cloneElement(child, {
+    ref: setRef
+  }) : child || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null), open && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, portalProp && /*#__PURE__*/React__default["default"].createElement(Portal, {
+    __unstable_name: typeof portalProp === 'string' ? portalProp : undefined
+  }, node), !portalProp && node));
+});
 
 var _templateObject$i, _templateObject2$d;
 function radioBaseStyle() {
@@ -6780,15 +6773,13 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
 });
 
 var _templateObject$d, _templateObject2$9, _templateObject3$4;
-var Root$b = styled__default["default"].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  } */\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+var Root$b = styled__default["default"].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  }\n\n  [data-popper-placement^='top'] > div > & {\n    bottom: -15px;\n  }\n\n  [data-popper-placement^='right'] > div > & {\n    left: -15px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-popper-placement^='left'] > div > & {\n    right: -15px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-popper-placement^='bottom'] > div > & {\n    top: -15px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
 var Border = styled__default["default"].path(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  fill: var(--card-shadow-outline-color);\n"])));
 var Shape = styled__default["default"].path(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  fill: var(--card-bg-color);\n"])));
 var TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(props, ref) {
   var restProps = _extends({}, props);
 
-  return /*#__PURE__*/React__default["default"].createElement(Root$b, _extends({
-    "data-ui": "Tooltip__arrow"
-  }, restProps, {
+  return /*#__PURE__*/React__default["default"].createElement(Root$b, _extends({}, restProps, {
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement("svg", {
     width: "15",
@@ -6801,7 +6792,7 @@ var TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(props, re
   })));
 });
 
-var _excluded$g = ["boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "shadow", "zOffset"];
+var _excluded$g = ["allowedAutoPlacements", "boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "zOffset"];
 
 var _templateObject$c;
 var Root$a = styled__default["default"](Layer)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
@@ -6810,23 +6801,22 @@ var Root$a = styled__default["default"](Layer)(_templateObject$c || (_templateOb
  */
 
 var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
-  var _theme$sanity$layer, _middlewareData$arrow, _middlewareData$arrow2;
+  var _theme$sanity$layer;
 
   var boundaryElementContext = useBoundaryElement();
   var theme = useTheme();
 
-  var _props$boundaryElemen = props.boundaryElement,
+  var allowedAutoPlacements = props.allowedAutoPlacements,
+      _props$boundaryElemen = props.boundaryElement,
       boundaryElement = _props$boundaryElemen === void 0 ? boundaryElementContext == null ? void 0 : boundaryElementContext.element : _props$boundaryElemen,
-      childProp = props.children,
+      children = props.children,
       content = props.content,
       disabled = props.disabled,
       fallbackPlacementsProp = props.fallbackPlacements,
       _props$placement = props.placement,
-      placementProp = _props$placement === void 0 ? 'bottom' : _props$placement,
+      placement = _props$placement === void 0 ? 'bottom' : _props$placement,
       portal = props.portal,
       scheme = props.scheme,
-      _props$shadow = props.shadow,
-      shadow = _props$shadow === void 0 ? 2 : _props$shadow,
       _props$zOffset = props.zOffset,
       zOffset = _props$zOffset === void 0 ? (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.tooltip.zOffset : _props$zOffset,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$g);
@@ -6838,73 +6828,47 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
       referenceElement = _useState[0],
       setReferenceElement = _useState[1];
 
-  var arrowRef = React.useRef(null);
-  var rootBoundary = 'viewport';
-  var middleware = React.useMemo(function () {
-    var ret = []; // Flip the floating element when leaving the boundary box
-
-    ret.push(reactDom.flip({
-      boundary: boundaryElement || undefined,
-      fallbackPlacements: fallbackPlacements,
-      padding: 4,
-      rootBoundary: rootBoundary
-    })); // Define distance between reference and floating element
-
-    ret.push(reactDom.offset({
-      mainAxis: 3
-    })); // Shift the tooltip so its sits with the boundary eleement
-
-    ret.push(reactDom.shift({
-      boundary: boundaryElement || undefined,
-      rootBoundary: rootBoundary,
-      padding: 4
-    })); // Place arrow
+  var _useState2 = React.useState(null),
+      popperElement = _useState2[0],
+      setPopperElement = _useState2[1];
 
-    ret.push(reactDom.arrow({
-      element: arrowRef,
-      padding: 2
-    }));
-    return ret;
-  }, [boundaryElement, fallbackPlacements]);
+  var _useState3 = React.useState(null),
+      arrowElement = _useState3[0],
+      setArrowElement = _useState3[1];
 
-  var _useFloating = reactDom.useFloating({
-    middleware: middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom.autoUpdate
-  }),
-      x = _useFloating.x,
-      y = _useFloating.y,
-      placement = _useFloating.placement,
-      reference = _useFloating.reference,
-      floating = _useFloating.floating,
-      middlewareData = _useFloating.middlewareData,
-      update = _useFloating.update,
-      strategy = _useFloating.strategy;
-
-  var rootStyle = React.useMemo(function () {
-    return {
-      position: strategy,
-      top: y != null ? y : 0,
-      left: x != null ? x : 0
-    };
-  }, [strategy, x, y]);
-  var staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]];
-  var arrowX = (_middlewareData$arrow = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow.x;
-  var arrowY = (_middlewareData$arrow2 = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow2.y;
-  var arrowStyle = React.useMemo(function () {
-    var style = {
-      left: arrowX !== null ? arrowX : undefined,
-      top: arrowY !== null ? arrowY : undefined,
-      right: undefined,
-      bottom: undefined
-    };
-    if (staticSide) style[staticSide] = -15;
-    return style;
-  }, [arrowX, arrowY, staticSide]);
+  var popper = reactPopper.usePopper(referenceElement, popperElement, {
+    placement: placement,
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement,
+        padding: 4
+      }
+    }, {
+      name: 'preventOverflow',
+      options: {
+        altAxis: true,
+        boundary: boundaryElement || undefined,
+        padding: 4
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 3]
+      }
+    }, {
+      name: 'flip',
+      options: {
+        allowedAutoPlacements: allowedAutoPlacements,
+        fallbackPlacements: fallbackPlacements
+      }
+    }]
+  });
+  var forceUpdate = popper.forceUpdate;
 
-  var _useState2 = React.useState(false),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
+  var _useState4 = React.useState(false),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
 
   var handleBlur = React.useCallback(function () {
     return setIsOpen(false);
@@ -6938,7 +6902,15 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     return function () {
       window.removeEventListener('mousemove', handleWindowMouseMove);
     };
-  }, [isOpen, referenceElement]); // Close when `disabled` changes to `true`
+  }, [isOpen, referenceElement]);
+  React.useEffect(function () {
+    if (forceUpdate) {
+      try {
+        forceUpdate();
+      } catch (_) {// ignore caught error
+      }
+    }
+  }, [forceUpdate, content]); // Close when `disabled` changes to `true`
 
   React.useEffect(function () {
     if (disabled) setIsOpen(false);
@@ -6946,61 +6918,40 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
 
   React.useEffect(function () {
     if (!content) setIsOpen(false);
-  }, [content]); // Update reference
+  }, [content]);
 
-  React.useEffect(function () {
-    return reference(referenceElement);
-  }, [reference, referenceElement]);
-  var setArrow = React.useCallback(function (arrowEl) {
-    arrowRef.current = arrowEl;
-    update();
-  }, [update]);
-  var setFloating = React.useCallback(function (node) {
-    forwardedRef.current = node;
-    floating(node);
-  }, [floating, forwardedRef]);
-  var childRef = childProp == null ? void 0 : childProp.ref;
-  var setReference = React.useCallback(function (node) {
-    if (typeof childRef === 'function') {
-      childRef(node);
-    } else if (childRef) {
-      childRef.current = node;
-    } // childRef.current = node
-
-
-    setReferenceElement(node);
-  }, [childRef]);
-  var child = React.useMemo(function () {
-    if (!childProp) return null;
-    return /*#__PURE__*/React.cloneElement(childProp, {
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      ref: setReference
-    });
-  }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
-  if (!child) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
-  if (disabled) return child;
-  var root = /*#__PURE__*/React__default["default"].createElement(Root$a, _extends({
+  var setRef = function setRef(el) {
+    setPopperElement(el);
+    forwardedRef.current = el;
+  };
+
+  if (!children) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+  if (disabled) return children;
+  var referenceProps = {
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    ref: setReferenceElement
+  };
+  var referenceNode = /*#__PURE__*/React.cloneElement(children, referenceProps);
+  var popperNode = /*#__PURE__*/React__default["default"].createElement(Root$a, _extends({
     "data-ui": "Tooltip"
-  }, restProps, {
-    ref: setFloating,
-    style: rootStyle,
+  }, restProps, popper.attributes.popper, {
+    ref: setRef,
+    style: popper.styles.popper,
     zOffset: zOffset
   }), /*#__PURE__*/React__default["default"].createElement(Card, {
-    "data-ui": "Tooltip__card",
-    "data-placement": placement,
     radius: 2,
     scheme: scheme,
-    shadow: shadow
+    shadow: 3
   }, content, /*#__PURE__*/React__default["default"].createElement(TooltipArrow, {
-    ref: setArrow,
-    style: arrowStyle
+    ref: setArrowElement,
+    style: popper.styles.arrow
   })));
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, child, isOpen && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, portal ? /*#__PURE__*/React__default["default"].createElement(Portal, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, referenceNode, isOpen && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, portal && /*#__PURE__*/React__default["default"].createElement(Portal, {
     __unstable_name: typeof portal === 'string' ? portal : undefined
-  }, root) : root));
+  }, popperNode), !portal && popperNode));
 });
 
 var _templateObject$b, _templateObject2$8, _templateObject3$3, _templateObject4$2, _templateObject5$1;
@@ -7018,7 +6969,7 @@ var ListBox = styled__default["default"](Box)(_templateObject2$8 || (_templateOb
  * @internal
  */
 
-var ResultsPopover = styled__default["default"](Popover)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  &[data-popper-reference-hidden='true'] {\n    display: none;\n  }\n"])));
+var ResultsPopover = styled__default["default"](Popover)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  & > div {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  &[data-popper-reference-hidden='true'] {\n    display: none;\n  }\n"])));
 var rotate = styled.keyframes(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
 /**
  * @internal
@@ -7134,17 +7085,17 @@ var AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ['Control', 'Shift', 'Alt', 'Enter', 'Hom
  * @internal
  */
 
-var AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 0, 0];
+var AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 1, 1];
 /**
  * @internal
  */
 
-var AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom';
+var AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom-start';
 /**
  * @internal
  */
 
-var AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['bottom', 'top'];
+var AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['top-start'];
 
 var _excluded$f = ["border", "customValidity", "disabled", "filterOption", "fontSize", "icon", "id", "listBox", "loading", "onBlur", "onChange", "onFocus", "onQueryChange", "onSelect", "openButton", "options", "padding", "popover", "prefix", "radius", "readOnly", "relatedElements", "renderOption", "renderPopover", "renderValue", "suffix", "value"];