@sanity/ui 0.37.14-next.5 → 0.37.15

package/lib/sanity-ui.modern.mjs

@@ -1,13 +1,14 @@
 import { useId } from '@reach/auto-id';
-import React, { useMemo, useState, useRef, useEffect, createContext, useContext, useLayoutEffect, forwardRef, useCallback, cloneElement, isValidElement, createElement, memo, useReducer, Children, Fragment } from 'react';
+import React, { useMemo, useState, useRef, useEffect, createContext, useContext, useLayoutEffect, forwardRef, useCallback, cloneElement, isValidElement, createElement, useReducer, Children, Fragment, memo } from 'react';
 import ReactIs, { isElement, isFragment, isValidElementType } from 'react-is';
 import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { white as white$1, black as black$1, hues } from '@sanity/color';
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
 import Refractor from 'react-refractor';
-import { flip, size as size$1, offset, shift, arrow, useFloating, autoUpdate } from '@floating-ui/react-dom';
+import { usePopper } from 'react-popper';
 import ReactDOM from 'react-dom';
+import maxSizeModifier from 'popper-max-size-modifier';
 import { AnimatePresence, motion } from 'framer-motion';
 
 function _extends() {
@@ -43,25 +44,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-/**
- * @internal
- */
 const EMPTY_ARRAY = [];
-/**
- * @internal
- */
-
 const EMPTY_RECORD = {};
-/**
- * @internal
- */
-
-const FLOATING_STATIC_SIDES = {
-  top: 'bottom',
-  right: 'left',
-  bottom: 'top',
-  left: 'right'
-};
 
 /**
  * @internal
@@ -2853,7 +2837,7 @@ globalScope[key$7] = globalScope[key$7] || /*#__PURE__*/createContext(null);
 
 const ThemeContext = globalScope[key$7];
 
-const _excluded$I = ["color", "layer"];
+const _excluded$H = ["color", "layer"];
 /**
  * @public
  */
@@ -2873,7 +2857,7 @@ function ThemeProvider(props) {
       color: rootColor,
       layer: rootLayer
     } = themeProp,
-          restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$I);
+          restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$H);
 
     const colorScheme = rootColor[scheme] || rootColor.light;
     const color = colorScheme[tone] || colorScheme.default;
@@ -3667,11 +3651,11 @@ function responsiveInputPaddingIconRightStyle(props) {
   }));
 }
 
-let _$C = t => t,
-    _t$C,
-    _t2$m,
-    _t3$d;
-const ROOT_STYLE = css(_t$C || (_t$C = _$C`
+let _$B = t => t,
+    _t$D,
+    _t2$n,
+    _t3$e;
+const ROOT_STYLE = css(_t$D || (_t$D = _$B`
   &:not([hidden]) {
     display: flex;
   }
@@ -3689,7 +3673,7 @@ function textInputBaseStyle(props) {
   } = props;
   const font = theme.sanity.fonts.text;
   const color = theme.sanity.color.input;
-  return css(_t2$m || (_t2$m = _$C`
+  return css(_t2$n || (_t2$n = _$B`
     appearance: none;
     background: none;
     border: 0;
@@ -3784,7 +3768,7 @@ function textInputRepresentationStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return css(_t3$d || (_t3$d = _$C`
+  return css(_t3$e || (_t3$e = _$B`
     --input-box-shadow: none;
 
     position: absolute;
@@ -3924,10 +3908,10 @@ function responsiveShadowStyle(props) {
   return _responsive(media, props.$shadow, shadow => shadowStyle(shadows[shadow]));
 }
 
-let _$B = t => t,
-    _t$B,
-    _t2$l,
-    _t3$c;
+let _$A = t => t,
+    _t$C,
+    _t2$m,
+    _t3$d;
 function textBaseStyle(props) {
   const {
     $accent,
@@ -3937,7 +3921,7 @@ function textBaseStyle(props) {
   const {
     weights
   } = theme.sanity.fonts.text;
-  return css(_t$B || (_t$B = _$B`
+  return css(_t$C || (_t$C = _$A`
     color: var(--card-fg-color);
 
     ${0}
@@ -3979,19 +3963,19 @@ function textBaseStyle(props) {
     & [data-sanity-icon] {
       vertical-align: baseline;
     }
-  `), $accent && css(_t2$l || (_t2$l = _$B`
+  `), $accent && css(_t2$m || (_t2$m = _$A`
       color: var(--card-accent-fg-color);
-    `)), $muted && css(_t3$c || (_t3$c = _$B`
+    `)), $muted && css(_t3$d || (_t3$d = _$A`
       color: var(--card-muted-fg-color);
     `)), theme.sanity.fonts.code.family, weights.bold);
 }
 
-const _excluded$H = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+const _excluded$G = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-let _$A = t => t,
-    _t$A;
+let _$z = t => t,
+    _t$B;
 const Root$E = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-const SpanWithTextOverflow$2 = styled.span(_t$A || (_t$A = _$A`
+const SpanWithTextOverflow$2 = styled.span(_t$B || (_t$B = _$z`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -4011,7 +3995,7 @@ const Text = /*#__PURE__*/forwardRef(function Text(props, ref) {
     textOverflow,
     weight
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$H);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
 
   let children = childrenProp;
 
@@ -4182,7 +4166,7 @@ function avatarStrokeStyle() {
   };
 }
 
-const _excluded$G = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
+const _excluded$F = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
 const Root$D = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
 const Arrow = styled.div(avatarStyle.arrow);
 const BgStroke = styled.ellipse(avatarStyle.bgStroke);
@@ -4205,7 +4189,7 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
     status = 'online',
     size: sizeProp = 0
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
 
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div';
   const size = useArrayProp(sizeProp);
@@ -4295,8 +4279,8 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
   }, /*#__PURE__*/React.createElement("strong", null, initials)))));
 });
 
-let _$z = t => t,
-    _t$z;
+let _$y = t => t,
+    _t$A;
 
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
@@ -4321,7 +4305,7 @@ function _avatarCounterBaseStyle(props) {
   const {
     theme
   } = props;
-  return css(_t$z || (_t$z = _$z`
+  return css(_t$A || (_t$A = _$y`
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
@@ -4365,11 +4349,11 @@ function childrenToElementArray(children) {
   return childrenArray.filter(node => isElement(node) || isFragment(node) || typeof node === 'string');
 }
 
-const _excluded$F = ["children", "maxLength", "size"];
+const _excluded$E = ["children", "maxLength", "size"];
 
-let _$y = t => t,
-    _t$y;
-const BASE_STYLES = css(_t$y || (_t$y = _$y`
+let _$x = t => t,
+    _t$z;
+const BASE_STYLES = css(_t$z || (_t$z = _$x`
   white-space: nowrap;
 
   & > div {
@@ -4415,7 +4399,7 @@ const AvatarStack = /*#__PURE__*/forwardRef(function AvatarStack(props, ref) {
     maxLength: maxLengthProp = 4,
     size: sizeProp = 0
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
 
   const children = childrenToElementArray(childrenProp).filter(child => typeof child !== 'string');
   const maxLength = Math.max(maxLengthProp, 0);
@@ -4441,7 +4425,7 @@ const AvatarStack = /*#__PURE__*/forwardRef(function AvatarStack(props, ref) {
   }))));
 });
 
-const _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"];
+const _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"];
 const Root$A = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 /**
  * @public
@@ -4476,7 +4460,7 @@ const Box = /*#__PURE__*/forwardRef(function Box(props, ref) {
     rowEnd,
     sizing
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
 
   return /*#__PURE__*/React.createElement(Root$A, _extends({
     "data-as": typeof asProp === 'string' ? asProp : undefined,
@@ -4512,10 +4496,10 @@ const Box = /*#__PURE__*/forwardRef(function Box(props, ref) {
   }), props.children);
 });
 
-let _$x = t => t,
-    _t$x,
-    _t2$k,
-    _t3$b;
+let _$w = t => t,
+    _t$y,
+    _t2$l,
+    _t3$c;
 function labelBaseStyle(props) {
   const {
     $accent,
@@ -4525,7 +4509,7 @@ function labelBaseStyle(props) {
   const {
     fonts
   } = theme.sanity;
-  return css(_t$x || (_t$x = _$x`
+  return css(_t$y || (_t$y = _$w`
     text-transform: uppercase;
 
     ${0}
@@ -4545,19 +4529,19 @@ function labelBaseStyle(props) {
     & [data-sanity-icon] {
       vertical-align: baseline;
     }
-  `), $accent && css(_t2$k || (_t2$k = _$x`
+  `), $accent && css(_t2$l || (_t2$l = _$w`
       color: var(--card-accent-fg-color);
-    `)), $muted && css(_t3$b || (_t3$b = _$x`
+    `)), $muted && css(_t3$c || (_t3$c = _$w`
       color: var(--card-muted-fg-color);
     `)), fonts.code.family);
 }
 
-const _excluded$D = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+const _excluded$C = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-let _$w = t => t,
-    _t$w;
+let _$v = t => t,
+    _t$x;
 const Root$z = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-const SpanWithTextOverflow$1 = styled.span(_t$w || (_t$w = _$w`
+const SpanWithTextOverflow$1 = styled.span(_t$x || (_t$x = _$v`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -4577,7 +4561,7 @@ const Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
     textOverflow,
     weight
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
 
   let children = childrenProp;
 
@@ -4618,7 +4602,7 @@ function badgeStyle(props) {
   };
 }
 
-const _excluded$C = ["children", "fontSize", "mode", "padding", "radius", "tone"];
+const _excluded$B = ["children", "fontSize", "mode", "padding", "radius", "tone"];
 const Root$y = styled(Box)(responsiveRadiusStyle, badgeStyle);
 /**
  * @public
@@ -4633,7 +4617,7 @@ const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
     radius = 2,
     tone = 'default'
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
 
   return /*#__PURE__*/React.createElement(Root$y, _extends({
     "data-ui": "Badge"
@@ -4648,7 +4632,7 @@ const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
   }, children));
 });
 
-const _excluded$B = ["align", "as", "direction", "gap", "justify", "wrap"];
+const _excluded$A = ["align", "as", "direction", "gap", "justify", "wrap"];
 const Root$x = styled(Box)(flexItemStyle, responsiveFlexStyle);
 /**
  * @public
@@ -4663,7 +4647,7 @@ const Flex = /*#__PURE__*/forwardRef(function Flex(props, ref) {
     justify,
     wrap
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
 
   return /*#__PURE__*/React.createElement(Root$x, _extends({
     "data-ui": "Flex"
@@ -4678,10 +4662,10 @@ const Flex = /*#__PURE__*/forwardRef(function Flex(props, ref) {
   }));
 });
 
-let _$v = t => t,
-    _t$v,
-    _t2$j;
-const rotate$1 = keyframes(_t$v || (_t$v = _$v`
+let _$u = t => t,
+    _t$w,
+    _t2$k;
+const rotate$1 = keyframes(_t$w || (_t$w = _$u`
   from {
     transform: rotate(0deg);
   }
@@ -4690,7 +4674,7 @@ const rotate$1 = keyframes(_t$v || (_t$v = _$v`
     transform: rotate(360deg);
   }
 `));
-const Root$w = styled(Text)(_t2$j || (_t2$j = _$v`
+const Root$w = styled(Text)(_t2$k || (_t2$k = _$u`
   & > span > svg {
     animation: ${0} 500ms linear infinite;
   }
@@ -4740,14 +4724,14 @@ function _colorVarsStyle(base, color, checkered = false) {
   };
 }
 
-let _$u = t => t,
-    _t$u;
+let _$t = t => t,
+    _t$v;
 /**
  * @internal
  */
 
 function buttonBaseStyles() {
-  return css(_t$u || (_t$u = _$u`
+  return css(_t$v || (_t$v = _$t`
     -webkit-font-smoothing: inherit;
     appearance: none;
     display: inline-flex;
@@ -4829,12 +4813,12 @@ 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);
 }
 
-const _excluded$A = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
+const _excluded$z = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
 
-let _$t = t => t,
-    _t$t;
+let _$s = t => t,
+    _t$u;
 const Root$v = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-const LoadingBox = styled.div(_t$t || (_t$t = _$t`
+const LoadingBox = styled.div(_t$u || (_t$u = _$s`
   position: absolute;
   top: 0;
   left: 0;
@@ -4877,7 +4861,7 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     tone = 'default',
     type = 'button'
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$z);
 
   const justify = useArrayProp(justifyProp);
   const padding = useArrayProp(paddingProp);
@@ -4934,10 +4918,10 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   }, boxProps), children));
 });
 
-let _$s = t => t,
-    _t$s,
-    _t2$i,
-    _t3$a;
+let _$r = t => t,
+    _t$t,
+    _t2$j,
+    _t3$b;
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -4947,7 +4931,7 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return css(_t$s || (_t$s = _$s`
+  return css(_t$t || (_t$t = _$r`
     ${0}
 
     &[data-as='button'] {
@@ -4970,7 +4954,7 @@ function cardBaseStyle(props) {
     &[data-as='pre'] {
       font: inherit;
     }
-  `), $checkered && css(_t2$i || (_t2$i = _$s`
+  `), $checkered && css(_t2$j || (_t2$j = _$r`
       background-size: ${0}px ${0}px;
       background-position: 50% 50%;
       background-image: var(--card-bg-image);
@@ -4995,7 +4979,7 @@ function cardColorStyle(props) {
     width: 0,
     color: 'var(--card-border-color)'
   };
-  return css(_t3$a || (_t3$a = _$s`
+  return css(_t3$b || (_t3$b = _$r`
     ${0}
 
     background-color: var(--card-bg-color);
@@ -5095,7 +5079,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);
 }
 
-const _excluded$z = ["__unstable_checkered", "__unstable_focusRing", "as", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "pressed", "radius", "scheme", "selected", "shadow", "tone"];
+const _excluded$y = ["__unstable_checkered", "__unstable_focusRing", "as", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "pressed", "radius", "scheme", "selected", "shadow", "tone"];
 const Root$u = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 /**
  * @public
@@ -5118,7 +5102,7 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
     shadow,
     tone: toneProp = 'default'
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$z);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$y);
 
   const as = isValidElementType(asProp) ? asProp : 'div';
   const rootTheme = useRootTheme();
@@ -5151,11 +5135,11 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
   })));
 });
 
-let _$r = t => t,
-    _t$r,
-    _t2$h;
+let _$q = t => t,
+    _t$s,
+    _t2$i;
 function checkboxBaseStyles() {
-  return css(_t$r || (_t$r = _$r`
+  return css(_t$s || (_t$s = _$q`
     position: relative;
     display: inline-block;
   `));
@@ -5170,7 +5154,7 @@ function inputElementStyles(props) {
     input,
     radius
   } = theme.sanity;
-  return css(_t2$h || (_t2$h = _$r`
+  return css(_t2$i || (_t2$i = _$q`
     position: absolute;
     top: 0;
     left: 0;
@@ -5255,7 +5239,7 @@ function inputElementStyles(props) {
   }), color.default.disabled.fg);
 }
 
-const _excluded$y = ["checked", "className", "disabled", "indeterminate", "customValidity", "readOnly", "style"];
+const _excluded$x = ["checked", "className", "disabled", "indeterminate", "customValidity", "readOnly", "style"];
 const Root$t = styled.div(checkboxBaseStyles);
 const Input$5 = styled.input(inputElementStyles);
 /**
@@ -5272,7 +5256,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, forwardedRef)
     readOnly,
     style
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$y);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$x);
 
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
@@ -5297,8 +5281,8 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, forwardedRef)
   })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CheckmarkIcon, null), /*#__PURE__*/React.createElement(RemoveIcon, null)));
 });
 
-let _$q = t => t,
-    _t$q;
+let _$p = t => t,
+    _t$r;
 
 function codeSyntaxHighlightingStyle({
   theme
@@ -5417,7 +5401,7 @@ function codeSyntaxHighlightingStyle({
 }
 
 function codeBaseStyle() {
-  return css(_t$q || (_t$q = _$q`
+  return css(_t$r || (_t$r = _$p`
     color: var(--card-code-fg-color);
 
     & code {
@@ -5440,7 +5424,7 @@ function codeBaseStyle() {
   `), codeSyntaxHighlightingStyle);
 }
 
-const _excluded$x = ["children", "language", "size", "weight"];
+const _excluded$w = ["children", "language", "size", "weight"];
 const Root$s = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
 /**
  * @public
@@ -5453,7 +5437,7 @@ const Code = /*#__PURE__*/forwardRef(function Code(props, ref) {
     size = 2,
     weight
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$x);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$w);
 
   const language = typeof languageProp === 'string' ? languageProp : undefined;
   const registered = language ? Refractor.hasLanguage(language) : false;
@@ -5490,7 +5474,7 @@ function responsiveContainerWidthStyle(props) {
   }));
 }
 
-const _excluded$w = ["as", "width"];
+const _excluded$v = ["as", "width"];
 const Root$r = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
 /**
  * @public
@@ -5501,7 +5485,7 @@ const Container = /*#__PURE__*/forwardRef(function Container(props, ref) {
     as,
     width = 2
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$w);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$v);
 
   return /*#__PURE__*/React.createElement(Root$r, _extends({
     "data-ui": "Container"
@@ -5512,7 +5496,7 @@ const Container = /*#__PURE__*/forwardRef(function Container(props, ref) {
   }));
 });
 
-const _excluded$v = ["as", "autoRows", "autoCols", "autoFlow", "columns", "gap", "gapX", "gapY", "rows", "children"];
+const _excluded$u = ["as", "autoRows", "autoCols", "autoFlow", "columns", "gap", "gapX", "gapY", "rows", "children"];
 const Root$q = styled(Box)(responsiveGridStyle);
 /**
  * @public
@@ -5531,7 +5515,7 @@ const Grid = /*#__PURE__*/forwardRef(function Grid(props, ref) {
     rows,
     children
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$v);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$u);
 
   return /*#__PURE__*/React.createElement(Root$q, _extends({
     "data-as": typeof as === 'string' ? as : undefined,
@@ -5550,17 +5534,17 @@ const Grid = /*#__PURE__*/forwardRef(function Grid(props, ref) {
   }), children);
 });
 
-let _$p = t => t,
-    _t$p,
-    _t2$g,
-    _t3$9;
+let _$o = t => t,
+    _t$q,
+    _t2$h,
+    _t3$a;
 function headingBaseStyle(props) {
   const {
     $accent,
     $muted,
     theme
   } = props;
-  return css(_t$p || (_t$p = _$p`
+  return css(_t$q || (_t$q = _$o`
     ${0}
 
     ${0}
@@ -5594,19 +5578,19 @@ function headingBaseStyle(props) {
     & [data-sanity-icon] {
       vertical-align: baseline;
     }
-  `), $accent && css(_t2$g || (_t2$g = _$p`
+  `), $accent && css(_t2$h || (_t2$h = _$o`
       color: var(--card-accent-fg-color);
-    `)), $muted && css(_t3$9 || (_t3$9 = _$p`
+    `)), $muted && css(_t3$a || (_t3$a = _$o`
       color: var(--card-muted-fg-color);
     `)), theme.sanity.fonts.code.family);
 }
 
-const _excluded$u = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+const _excluded$t = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-let _$o = t => t,
-    _t$o;
+let _$n = t => t,
+    _t$p;
 const Root$p = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-const SpanWithTextOverflow = styled.span(_t$o || (_t$o = _$o`
+const SpanWithTextOverflow = styled.span(_t$p || (_t$p = _$n`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -5626,7 +5610,7 @@ const Heading = /*#__PURE__*/forwardRef(function Heading(props, ref) {
     textOverflow,
     weight
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$u);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$t);
 
   let children = childrenProp;
 
@@ -5673,7 +5657,7 @@ function inlineSpaceStyle(props) {
   });
 }
 
-const _excluded$t = ["as", "children", "space"];
+const _excluded$s = ["as", "children", "space"];
 const Root$o = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
 /**
  * @public
@@ -5685,7 +5669,7 @@ const Inline = /*#__PURE__*/forwardRef(function Inline(props, ref) {
     children: childrenProp,
     space
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$t);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$s);
 
   const children = useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /*#__PURE__*/React.createElement("div", {
     key: idx
@@ -5699,13 +5683,13 @@ const Inline = /*#__PURE__*/forwardRef(function Inline(props, ref) {
   }), children);
 });
 
-const _excluded$s = ["children", "fontSize", "padding", "radius"];
+const _excluded$r = ["children", "fontSize", "padding", "radius"];
 
-let _$n = t => t,
-    _t$n;
+let _$m = t => t,
+    _t$o;
 
 function kbdStyle() {
-  return css(_t$n || (_t$n = _$n`
+  return css(_t$o || (_t$o = _$m`
     background: var(--card-bg-color);
     font: inherit;
     box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);
@@ -5728,7 +5712,7 @@ const KBD = /*#__PURE__*/forwardRef(function KBD(props, ref) {
     padding = 1,
     radius = 2
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$s);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$r);
 
   return /*#__PURE__*/React.createElement(Root$n, _extends({
     "data-ui": "KBD"
@@ -5814,7 +5798,7 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 
-const _excluded$r = ["children", "media"];
+const _excluded$q = ["children", "media"];
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
@@ -5827,7 +5811,7 @@ const ElementQuery = /*#__PURE__*/forwardRef(function ElementQuery(props, ref) {
     children,
     media = theme.sanity.media
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$r);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$q);
 
   const forwardedRef = useForwardedRef(ref);
   const [element, setElement] = useState(null);
@@ -5955,12 +5939,12 @@ function LayerProvider(props) {
   }, children);
 }
 
-const _excluded$q = ["children", "style"],
+const _excluded$p = ["children", "style"],
       _excluded2$1 = ["children", "zOffset"];
 
-let _$m = t => t,
-    _t$m;
-const Root$m = styled.div(_t$m || (_t$m = _$m`
+let _$l = t => t,
+    _t$n;
+const Root$m = styled.div(_t$n || (_t$n = _$l`
   position: relative;
 `));
 const LayerChildren = /*#__PURE__*/forwardRef(function LayerChildren(props, ref) {
@@ -5968,7 +5952,7 @@ const LayerChildren = /*#__PURE__*/forwardRef(function LayerChildren(props, ref)
     children,
     style = EMPTY_RECORD
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$q);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$p);
 
   const {
     zIndex
@@ -6119,9 +6103,9 @@ function PortalProvider(props) {
   }, children);
 }
 
-let _$l = t => t,
-    _t$l;
-const Root$l = styled.div(_t$l || (_t$l = _$l`
+let _$k = t => t,
+    _t$m;
+const Root$l = styled.div(_t$m || (_t$m = _$k`
   display: block;
   width: 0;
   height: 0;
@@ -6311,15 +6295,15 @@ function _isScrollable(el) {
   return style.overflowX.includes('auto') || style.overflowX.includes('scroll') || style.overflowY.includes('auto') || style.overflowY.includes('scroll');
 }
 
-const _excluded$p = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
+const _excluded$o = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
 
-let _$k = t => t,
-    _t$k,
-    _t2$f;
-const Root$k = styled.div(_t$k || (_t$k = _$k`
+let _$j = t => t,
+    _t$l,
+    _t2$g;
+const Root$k = styled.div(_t$l || (_t$l = _$j`
   position: relative;
 `));
-const ItemWrapper = styled.div(_t2$f || (_t2$f = _$k`
+const ItemWrapper = styled.div(_t2$g || (_t2$g = _$j`
   position: absolute;
   left: 0;
   right: 0;
@@ -6337,7 +6321,7 @@ const VirtualList = /*#__PURE__*/forwardRef(function VirtualList(props, ref) {
     onChange,
     renderItem
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$p);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$o);
 
   const {
     space
@@ -6456,11 +6440,11 @@ const VirtualList = /*#__PURE__*/forwardRef(function VirtualList(props, ref) {
   }, children));
 });
 
-let _$j = t => t,
-    _t$j,
-    _t2$e,
-    _t3$8;
-const Root$j = styled.div(_t$j || (_t$j = _$j`
+let _$i = t => t,
+    _t$k,
+    _t2$f,
+    _t3$9;
+const Root$j = styled.div(_t$k || (_t$k = _$i`
   position: absolute;
   pointer-events: none;
   width: 27px;
@@ -6476,11 +6460,11 @@ const Root$j = styled.div(_t$j || (_t$j = _$j`
     transform-origin: 13.5px 13.5px;
   }
 
-  [data-placement^='top'] > & {
+  [data-popper-placement^='top'] > div > & {
     bottom: -27px;
   }
 
-  [data-placement^='right'] > & {
+  [data-popper-placement^='right'] > div > & {
     left: -27px;
 
     & > svg {
@@ -6488,7 +6472,7 @@ const Root$j = styled.div(_t$j || (_t$j = _$j`
     }
   }
 
-  [data-placement^='left'] > & {
+  [data-popper-placement^='left'] > div > & {
     right: -27px;
 
     & > svg {
@@ -6496,7 +6480,7 @@ const Root$j = styled.div(_t$j || (_t$j = _$j`
     }
   }
 
-  [data-placement^='bottom'] > & {
+  [data-popper-placement^='bottom'] > div > & {
     top: -27px;
 
     & > svg {
@@ -6504,15 +6488,15 @@ const Root$j = styled.div(_t$j || (_t$j = _$j`
     }
   }
 `));
-const BorderPath = styled.path(_t2$e || (_t2$e = _$j`
+const BorderPath = styled.path(_t2$f || (_t2$f = _$i`
   fill: var(--card-shadow-outline-color);
 `));
-const ShapePath = styled.path(_t3$8 || (_t3$8 = _$j`
+const ShapePath = styled.path(_t3$9 || (_t3$9 = _$i`
   fill: var(--card-bg-color);
 `));
 const PopoverArrow = /*#__PURE__*/forwardRef(function PopoverArrow(props, ref) {
   return /*#__PURE__*/React.createElement(Root$j, _extends({
-    "data-ui": "Popover__arrow"
+    "data-ui": "PopoverArrow"
   }, props, {
     ref: ref
   }), /*#__PURE__*/React.createElement("svg", {
@@ -6528,294 +6512,362 @@ const PopoverArrow = /*#__PURE__*/forwardRef(function PopoverArrow(props, ref) {
   })));
 });
 
-const _excluded$o = ["__unstable_margins", "arrow", "arrowRef", "arrowX", "arrowY", "availableHeight", "availableWidth", "boundaryWidth", "children", "padding", "placement", "overflow", "radius", "referenceWidth", "scheme", "shadow", "strategy", "tone", "width", "x", "y"];
+/*
+
+The order of popper phases:
+
+- beforeRead
+- read
+- afterRead
+- beforeMain
+- main
+- afterMain
+- beforeWrite
+- write
+- afterWrite
+
+*/
 
-function popoverCardStyle(props) {
+function getPopoverModifiers(props) {
   const {
-    $boundaryWidth
-  } = props;
-  return {
-    maxWidth: $boundaryWidth ? `${$boundaryWidth - 16}px` : 'calc(100% - 16px)'
+    allowedAutoPlacements,
+    arrow,
+    arrowElement,
+    boundaryElement,
+    constrainSize,
+    distance,
+    fallbackPlacements,
+    margins,
+    matchReferenceWidth,
+    open,
+    preventOverflow,
+    skidding,
+    tether,
+    tetherOffset
+  } = props; // 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 [];
+  }
+
+  const detectOverflowOptions = {
+    altAxis: !constrainSize,
+    boundary: boundaryElement || undefined,
+    padding: 8,
+    tether,
+    tetherOffset
   };
-}
+  return [constrainSize && _extends({}, maxSizeModifier, {
+    options: detectOverflowOptions
+  }), constrainSize && {
+    name: 'applyMaxSize',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['maxSize'],
+
+    fn({
+      state
+    }) {
+      const {
+        width,
+        height
+      } = state.modifiersData.maxSize;
+      state.styles.popper = _extends({}, state.styles.popper, {
+        maxWidth: `${width}px`,
+        maxHeight: `${height}px`
+      });
+    }
 
-const Root$i = /*#__PURE__*/memo(styled(Card)(popoverCardStyle));
-/**
- * @internal
- */
+  }, 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: ({
+      state
+    }) => {
+      const {
+        rects
+      } = state;
+
+      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,
+      boundary: boundaryElement || undefined,
+      fallbackPlacements,
+      padding: 8
+    }
+  }, matchReferenceWidth && {
+    name: 'matchWidth',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['computeStyles'],
+
+    fn({
+      state
+    }) {
+      const {
+        width
+      } = state.rects.reference;
+      state.styles.popper.width = `${width}px`;
+    },
+
+    effect: ({
+      state
+    }) => {
+      const refElement = state.elements.reference;
 
-const PopoverCard = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function PopoverCard(props, ref) {
+      if (refElement instanceof HTMLElement) {
+        state.elements.popper.style.width = `${refElement.offsetWidth - (margins ? margins[1] + margins[3] : 0)}px`;
+      }
+    }
+  }].filter(Boolean);
+}
+
+function usePopoverModifiers(props) {
   const {
-    __unstable_margins: marginsProp,
+    allowedAutoPlacements,
     arrow,
-    arrowRef,
-    arrowX,
-    arrowY,
-    availableHeight,
-    availableWidth,
-    boundaryWidth,
-    children,
-    padding,
-    placement,
-    overflow,
-    radius,
-    referenceWidth: referenceWidthProp,
-    scheme,
-    shadow,
-    strategy,
-    tone,
-    width,
-    x: xProp,
-    y: yProp
-  } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$o);
+    arrowElement,
+    boundaryElement,
+    constrainSize,
+    distance,
+    fallbackPlacements,
+    margins,
+    matchReferenceWidth,
+    open,
+    preventOverflow,
+    skidding,
+    tether,
+    tetherOffset
+  } = props;
+  return useMemo(() => {
+    return getPopoverModifiers({
+      allowedAutoPlacements,
+      arrow,
+      arrowElement,
+      boundaryElement,
+      constrainSize,
+      distance,
+      fallbackPlacements,
+      margins,
+      matchReferenceWidth,
+      open,
+      preventOverflow,
+      skidding,
+      tether,
+      tetherOffset
+    });
+  }, [allowedAutoPlacements, arrow, arrowElement, boundaryElement, constrainSize, distance, fallbackPlacements, margins, matchReferenceWidth, open, preventOverflow, skidding, tether, tetherOffset]);
+}
 
-  const {
-    zIndex
-  } = useLayer(); // top right bottom left
-
-  const margins = useMemo(() => marginsProp || [0, 0, 0, 0], [marginsProp]); // translate according to margins
-
-  const referenceWidth = referenceWidthProp ? referenceWidthProp - margins[1] - margins[3] : undefined;
-  const x = (xProp != null ? xProp : 0) + margins[3];
-  const y = (yProp != null ? yProp : 0) + margins[0];
-  const maxWidth = availableWidth ? Math.min(availableWidth - 8, referenceWidth || Infinity) : undefined;
-  const rootStyle = useMemo(() => ({
-    position: strategy,
-    top: y,
-    left: x,
-    zIndex,
-    width: referenceWidth,
-    maxWidth: referenceWidth ? undefined : maxWidth
-  }), [referenceWidth, maxWidth, strategy, x, y, zIndex]);
-  const wrapperStyle = useMemo(() => ({
-    minHeight: 25,
-    maxHeight: availableHeight ? availableHeight - 8 : undefined
-  }), [availableHeight]);
-  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]];
-  const arrowStyle = useMemo(() => {
-    const 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.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.createElement(Box, {
-    "data-ui": "Popover__wrapper",
-    overflow: overflow,
-    padding: padding,
-    sizing: "border",
-    style: wrapperStyle
-  }, children), arrow && /*#__PURE__*/React.createElement(PopoverArrow, {
-    ref: arrowRef,
-    style: arrowStyle
-  }));
-}));
-PopoverCard.displayName = 'PopoverCard';
+const _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"];
 
-const _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"];
+let _2$1 = t => t,
+    _t$j,
+    _t2$e,
+    _t3$8;
+const Root$i = styled(Layer)(({
+  $preventOverflow
+}) => css(_t$j || (_t$j = _2$1`
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    max-width: calc(100% - 16px);
 
-function size(scope) {
-  return size$1({
-    apply(args) {
-      if (scope.constrainSize) {
-        scope.setAvailableWidth(args.availableWidth);
-        scope.setAvailableHeight(args.availableHeight);
-      }
+    & > * {
+      min-height: 0;
+    }
 
-      if (scope.matchReferenceWidth) {
-        scope.setReferenceWidth(args.rects.reference.width);
+    /* Hide the popover when the reference element is out of bounds */
+    ${0}
+  `), $preventOverflow && css(_t2$e || (_t2$e = _2$1`
+      &[data-popper-reference-hidden='true'] {
+        display: none;
       }
-    },
+    `))));
+const PopoverCard = styled(Card)(({
+  $constrainSize
+}) => css(_t3$8 || (_t3$8 = _2$1`
+    flex: 1;
+    max-height: ${0};
+    pointer-events: all;
+
+    && {
+      display: flex;
+    }
 
-    boundary: scope.boundaryElement || undefined
-  });
-}
+    flex-direction: column;
 
-const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Popover(props, ref) {
-  var _theme$sanity$layer, _useElementSize, _middlewareData$arrow, _middlewareData$arrow2;
+    & > * {
+      min-height: 0;
+    }
+
+    ${0}
+  `), $constrainSize && '100%', responsiveContainerWidthStyle));
+/**
+ * @public
+ */
+
+const Popover = /*#__PURE__*/forwardRef(function Popover(props, ref) {
+  var _theme$sanity$layer;
 
-  const theme = useTheme();
   const boundaryElementContext = useBoundaryElement();
+  const theme = useTheme();
 
   const {
     __unstable_margins: margins,
-    arrow: arrowProp = true,
-    boundaryElement = boundaryElementContext.element,
-    children: childProp,
-    constrainSize = false,
+    allowedAutoPlacements,
+    arrow = true,
+    boundaryElement: boundaryElementProp = boundaryElementContext.element,
+    children: child,
     content,
+    constrainSize,
     disabled,
     fallbackPlacements,
-    matchReferenceWidth: matchReferenceWidthProp,
-    open,
-    overflow = props.constrainSize ? 'auto' : undefined,
-    padding: paddingProp,
-    placement: placementProp = 'bottom',
-    portal,
-    preventOverflow = true,
-    radius: radiusProp = 3,
-    referenceElement,
+    open = false,
+    padding,
+    placement = 'bottom',
+    portal: portalProp = false,
+    preventOverflow,
+    radius = 3,
+    referenceElement: referenceElementProp,
+    matchReferenceWidth,
+    shadow = 3,
     scheme,
-    shadow: shadowProp = 3,
+    style = EMPTY_RECORD,
+    tether,
+    tetherOffset,
     tone = 'inherit',
-    width: widthProp = undefined,
-    zOffset: zOffsetProp = (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.popover.zOffset
+    width: widthProp = 0,
+    zOffset = (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.popover.zOffset
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$n);
 
-  const boundarySize = (_useElementSize = useElementSize(boundaryElement)) == null ? void 0 : _useElementSize.border;
-  const padding = useArrayProp(paddingProp);
-  const radius = useArrayProp(radiusProp);
-  const shadow = useArrayProp(shadowProp);
-  const width = useArrayProp(widthProp);
-  const zOffset = useArrayProp(zOffsetProp);
-  const [availableWidth, setAvailableWidth] = useState(undefined);
-  const [availableHeight, setAvailableHeight] = useState(undefined);
-  const [referenceWidth, setReferenceWidth] = useState(undefined);
   const forwardedRef = useForwardedRef(ref);
-  const arrowRef = useRef(null);
-  const rootBoundary = 'viewport';
-  const middleware = useMemo(() => {
-    const ret = []; // Flip the floating element when leaving the boundary box
-
-    if (constrainSize || preventOverflow) {
-      ret.push(flip({
-        boundary: boundaryElement || undefined,
-        fallbackPlacements,
-        padding: 8,
-        rootBoundary
-      }));
-    } // Track sizes
-
-
-    ret.push(size({
-      boundaryElement,
-      constrainSize,
-      matchReferenceWidth: matchReferenceWidthProp,
-      setAvailableHeight,
-      setAvailableWidth,
-      setReferenceWidth
-    })); // Define distance between reference and floating element
-
-    ret.push(offset({
-      mainAxis: arrowProp ? 4 : 0
-    })); // Shift the popover so its sits with the boundary eleement
-
-    if (preventOverflow) {
-      ret.push(shift({
-        boundary: boundaryElement || undefined,
-        rootBoundary,
-        padding: 8
-      }));
-    } // Place arrow
-
-
-    if (arrowProp) {
-      ret.push(arrow({
-        element: arrowRef,
-        padding: 4
-      }));
-    }
-
-    return ret;
-  }, [arrowProp, boundaryElement, constrainSize, fallbackPlacements, matchReferenceWidthProp, preventOverflow]);
-  const {
-    x,
-    y,
+  const portal = usePortal();
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const popperReferenceElement = referenceElementProp || referenceElement;
+  const width = useArrayProp(matchReferenceWidth ? 'auto' : widthProp);
+  const modifiers = usePopoverModifiers({
+    allowedAutoPlacements,
+    arrow,
+    arrowElement,
+    boundaryElement: boundaryElementProp || portal.boundaryElement,
+    constrainSize,
+    distance: arrow ? 4 : 0,
+    fallbackPlacements,
+    margins,
+    matchReferenceWidth,
+    open,
+    preventOverflow,
+    skidding: 0,
+    tether,
+    tetherOffset
+  });
+  const popper = usePopper(popperReferenceElement, popperElement, {
     placement,
-    reference,
-    floating,
-    middlewareData,
-    strategy
-  } = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate
+    modifiers
   });
-  const arrowX = (_middlewareData$arrow = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow.x;
-  const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow2.y;
-  const setArrow = useCallback(arrowEl => {
-    arrowRef.current = arrowEl;
-  }, []);
-  const setFloating = useCallback(node => {
-    forwardedRef.current = node;
-    floating(node);
-  }, [floating, forwardedRef]);
-  const setReference = useCallback(node => {
-    reference(node);
-    const childRef = childProp == null ? void 0 : childProp.ref;
+  const {
+    attributes,
+    forceUpdate,
+    styles
+  } = popper;
+  const setRef = useCallback(el => {
+    const childRef = child.ref;
+    setReferenceElement(el);
 
     if (typeof childRef === 'function') {
-      childRef(node);
+      childRef(el);
     } else if (childRef) {
-      childRef.current = node;
+      childRef.current = el;
     }
-  }, [childProp, reference]);
-  const child = useMemo(() => {
-    if (!childProp || referenceElement) return null;
-    return /*#__PURE__*/cloneElement(childProp, {
-      ref: setReference
-    });
-  }, [childProp, referenceElement, setReference]);
+  }, [child]);
+  const setRootRef = useCallback(el => {
+    setPopperElement(el);
+    forwardedRef.current = el;
+  }, [forwardedRef]);
+  const popoverStyle = useMemo(() => _extends({}, style, styles.popper), [style, styles]);
+  const updateTimeoutRef = useRef(null);
   useEffect(() => {
-    if (referenceElement) reference(referenceElement);
-  }, [reference, referenceElement]);
+    if (updateTimeoutRef.current) {
+      clearTimeout(updateTimeoutRef.current);
+      updateTimeoutRef.current = null;
+    }
+
+    updateTimeoutRef.current = setTimeout(() => {
+      if (forceUpdate) {
+        try {
+          forceUpdate();
+        } catch (_) {// ignore caught error
+        }
+      }
+    }, 0);
+  }, [content, forceUpdate, open, popperReferenceElement]);
 
   if (disabled) {
-    return childProp || /*#__PURE__*/React.createElement(React.Fragment, null);
+    return child || /*#__PURE__*/React.createElement(React.Fragment, null);
   }
 
-  const popover = /*#__PURE__*/React.createElement(LayerProvider, {
+  const node = /*#__PURE__*/React.createElement(Root$i, _extends({
+    "data-ui": "Popover"
+  }, restProps, {
+    "$preventOverflow": preventOverflow,
+    ref: setRootRef,
+    style: popoverStyle,
     zOffset: zOffset
-  }, /*#__PURE__*/React.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.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.createElement(PopoverArrow, {
+    ref: setArrowElement,
+    style: styles.arrow
   }), content));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, portal ? /*#__PURE__*/React.createElement(Portal, {
-    __unstable_name: typeof portal === 'string' ? portal : undefined
-  }, popover) : popover), child);
-}));
-Popover.displayName = 'Popover';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, child && !referenceElementProp ? /*#__PURE__*/cloneElement(child, {
+    ref: setRef
+  }) : child || /*#__PURE__*/React.createElement(React.Fragment, null), open && /*#__PURE__*/React.createElement(React.Fragment, null, portalProp && /*#__PURE__*/React.createElement(Portal, {
+    __unstable_name: typeof portalProp === 'string' ? portalProp : undefined
+  }, node), !portalProp && node));
+});
 
-let _$i = t => t,
+let _$h = t => t,
     _t$i,
     _t2$d;
 function radioBaseStyle() {
-  return css(_t$i || (_t$i = _$i`
+  return css(_t$i || (_t$i = _$h`
     position: relative;
 
     &:not([hidden]) {
@@ -6837,7 +6889,7 @@ function inputElementStyle(props) {
   } = theme.sanity;
   const color = theme.sanity.color.input;
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return css(_t2$d || (_t2$d = _$i`
+  return css(_t2$d || (_t2$d = _$h`
     appearance: none;
     position: absolute;
     top: 0;
@@ -6955,14 +7007,14 @@ const Radio = /*#__PURE__*/forwardRef(function Radio(props, forwardedRef) {
   })), /*#__PURE__*/React.createElement("span", null));
 });
 
-let _$h = t => t,
+let _$g = t => t,
     _t$h,
     _t2$c,
     _t3$7,
     _t4$5;
 
 function rootStyle() {
-  return css(_t$h || (_t$h = _$h`
+  return css(_t$h || (_t$h = _$g`
     position: relative;
     width: stretch;
 
@@ -6977,7 +7029,7 @@ function inputBaseStyle(props) {
     theme
   } = props;
   const font = theme.sanity.fonts.text;
-  return css(_t2$c || (_t2$c = _$h`
+  return css(_t2$c || (_t2$c = _$g`
     -webkit-font-smoothing: antialiased;
     appearance: none;
     border: 0;
@@ -7002,7 +7054,7 @@ function inputColorStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return css(_t3$7 || (_t3$7 = _$h`
+  return css(_t3$7 || (_t3$7 = _$g`
     /* enabled */
     background-color: ${0};
     color: ${0};
@@ -7083,7 +7135,7 @@ function iconBoxStyle(props) {
     theme
   } = props;
   const color = theme.sanity.color.input;
-  return css(_t4$5 || (_t4$5 = _$h`
+  return css(_t4$5 || (_t4$5 = _$g`
     pointer-events: none;
     position: absolute;
     top: 0;
@@ -7208,7 +7260,7 @@ const Stack = /*#__PURE__*/forwardRef(function Stack(props, ref) {
   }));
 });
 
-let _$g = t => t,
+let _$f = t => t,
     _t$g,
     _t2$b,
     _t3$6,
@@ -7219,7 +7271,7 @@ let _$g = t => t,
 /* Root */
 
 function switchBaseStyles() {
-  return css(_t$g || (_t$g = _$g`
+  return css(_t$g || (_t$g = _$f`
     position: relative;
     &:not([hidden]) {
       display: inline-block;
@@ -7230,7 +7282,7 @@ function switchBaseStyles() {
 
 function switchInputStyles() {
   // Visually hide the input element while keeping it interactive
-  return css(_t2$b || (_t2$b = _$g`
+  return css(_t2$b || (_t2$b = _$f`
     position: absolute;
     top: 0;
     right: 0;
@@ -7258,7 +7310,7 @@ function switchRepresentationStyles(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.button.default;
-  return css(_t3$6 || (_t3$6 = _$g`
+  return css(_t3$6 || (_t3$6 = _$f`
     --switch-bg-color: ${0};
     --switch-fg-color: ${0};
     --switch-box-shadow: none;
@@ -7330,7 +7382,7 @@ function switchTrackStyles(props) {
   const {
     input
   } = theme.sanity;
-  return css(_t4$4 || (_t4$4 = _$g`
+  return css(_t4$4 || (_t4$4 = _$f`
     &:not([hidden]) {
       display: block;
     }
@@ -7360,7 +7412,7 @@ function switchThumbStyles(props) {
   const checkedOffset = trackWidth - trackPadding * 2 - size;
   const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
   const checked = $indeterminate !== true && props.$checked === true;
-  return css(_t5$3 || (_t5$3 = _$g`
+  return css(_t5$3 || (_t5$3 = _$f`
     &:not([hidden]) {
       display: block;
     }
@@ -7379,9 +7431,9 @@ function switchThumbStyles(props) {
     ${0}
 
     ${0}
-  `), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_t6$2 || (_t6$2 = _$g`
+  `), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_t6$2 || (_t6$2 = _$f`
       transform: translate3d(${0}px, 0, 0);
-    `), checkedOffset), $indeterminate && css(_t7 || (_t7 = _$g`
+    `), checkedOffset), $indeterminate && css(_t7 || (_t7 = _$f`
       transform: translate3d(${0}px, 0, 0);
     `), indeterminateOffset));
 }
@@ -7436,10 +7488,10 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(props, forwardedRef) {
 
 const _excluded$i = ["border", "customValidity", "disabled", "fontSize", "padding", "radius", "weight"];
 
-let _$f = t => t,
+let _$e = t => t,
     _t$f;
 const Root$d = styled.span(textInputRootStyle);
-const InputRoot$1 = styled.span(_t$f || (_t$f = _$f`
+const InputRoot$1 = styled.span(_t$f || (_t$f = _$e`
   flex: 1;
   min-width: 0;
   display: block;
@@ -7489,7 +7541,7 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(props, forwardedRef)
 
 const _excluded$h = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type", "weight"];
 
-let _$e = t => t,
+let _$d = t => t,
     _t$e,
     _t2$a,
     _t3$5,
@@ -7502,7 +7554,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
 const Root$c = styled(Card).attrs({
   forwardedAs: 'span'
 })(textInputRootStyle);
-const InputRoot = styled.span(_t$e || (_t$e = _$e`
+const InputRoot = styled.span(_t$e || (_t$e = _$d`
   flex: 1;
   min-width: 0;
   display: block;
@@ -7510,7 +7562,7 @@ const InputRoot = styled.span(_t$e || (_t$e = _$e`
 `));
 const Prefix = styled(Card).attrs({
   forwardedAs: 'span'
-})(_t2$a || (_t2$a = _$e`
+})(_t2$a || (_t2$a = _$d`
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 
@@ -7521,7 +7573,7 @@ const Prefix = styled(Card).attrs({
 `));
 const Suffix = styled(Card).attrs({
   forwardedAs: 'span'
-})(_t3$5 || (_t3$5 = _$e`
+})(_t3$5 || (_t3$5 = _$d`
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 
@@ -7532,17 +7584,17 @@ const Suffix = styled(Card).attrs({
 `));
 const Input = styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationStyle);
-const LeftBox = styled(Box)(_t4$3 || (_t4$3 = _$e`
+const LeftBox = styled(Box)(_t4$3 || (_t4$3 = _$d`
   position: absolute;
   top: 0;
   left: 0;
 `));
-const RightBox = styled(Box)(_t5$2 || (_t5$2 = _$e`
+const RightBox = styled(Box)(_t5$2 || (_t5$2 = _$d`
   position: absolute;
   top: 0;
   right: 0;
 `));
-const RightCard = styled(Card)(_t6$1 || (_t6$1 = _$e`
+const RightCard = styled(Card)(_t6$1 || (_t6$1 = _$d`
   background-color: transparent;
   position: absolute;
   top: 0;
@@ -7686,27 +7738,12 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
   })), presentationNode, clearButtonNode), suffixNode);
 });
 
-let _$d = t => t,
+let _$c = t => t,
     _t$d,
     _t2$9,
     _t3$4;
-const Root$b = styled.div(_t$d || (_t$d = _$d`
+const Root$b = styled.div(_t$d || (_t$d = _$c`
   position: absolute;
-  pointer-events: none;
-  width: 15px;
-  height: 15px;
-  fill: none;
-
-  :empty + & {
-    display: none;
-  }
-
-  & > svg {
-    display: block;
-    transform-origin: 7.5px 7.5px;
-  }
-
-  /* position: absolute;
   width: 15px;
   height: 15px;
   fill: none;
@@ -7720,48 +7757,46 @@ const Root$b = styled.div(_t$d || (_t$d = _$d`
       display: block;
     }
     transform-origin: 7.5px 7.5px;
-  } */
+  }
 
-  [data-placement^='top'] > & {
-    bottom: -27px;
+  [data-popper-placement^='top'] > div > & {
+    bottom: -15px;
   }
 
-  [data-placement^='right'] > & {
-    left: -27px;
+  [data-popper-placement^='right'] > div > & {
+    left: -15px;
 
     & > svg {
       transform: rotate(90deg);
     }
   }
 
-  [data-placement^='left'] > & {
-    right: -27px;
+  [data-popper-placement^='left'] > div > & {
+    right: -15px;
 
     & > svg {
       transform: rotate(-90deg);
     }
   }
 
-  [data-placement^='bottom'] > & {
-    top: -27px;
+  [data-popper-placement^='bottom'] > div > & {
+    top: -15px;
 
     & > svg {
       transform: rotate(180deg);
     }
   }
 `));
-const Border = styled.path(_t2$9 || (_t2$9 = _$d`
+const Border = styled.path(_t2$9 || (_t2$9 = _$c`
   fill: var(--card-shadow-outline-color);
 `));
-const Shape = styled.path(_t3$4 || (_t3$4 = _$d`
+const Shape = styled.path(_t3$4 || (_t3$4 = _$c`
   fill: var(--card-bg-color);
 `));
 const TooltipArrow = /*#__PURE__*/forwardRef(function TooltipArrow(props, ref) {
   const restProps = _extends({}, props);
 
-  return /*#__PURE__*/React.createElement(Root$b, _extends({
-    "data-ui": "Tooltip__arrow"
-  }, restProps, {
+  return /*#__PURE__*/React.createElement(Root$b, _extends({}, restProps, {
     ref: ref
   }), /*#__PURE__*/React.createElement("svg", {
     width: "15",
@@ -7774,11 +7809,11 @@ const TooltipArrow = /*#__PURE__*/forwardRef(function TooltipArrow(props, ref) {
   })));
 });
 
-const _excluded$g = ["boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "shadow", "zOffset"];
+const _excluded$g = ["allowedAutoPlacements", "boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "zOffset"];
 
-let _$c = t => t,
+let _2 = t => t,
     _t$c;
-const Root$a = styled(Layer)(_t$c || (_t$c = _$c`
+const Root$a = styled(Layer)(_t$c || (_t$c = _2`
   pointer-events: none;
 `));
 /**
@@ -7786,21 +7821,21 @@ const Root$a = styled(Layer)(_t$c || (_t$c = _$c`
  */
 
 const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
-  var _theme$sanity$layer, _middlewareData$arrow, _middlewareData$arrow2;
+  var _theme$sanity$layer;
 
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
 
   const {
+    allowedAutoPlacements,
     boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
-    children: childProp,
+    children,
     content,
     disabled,
     fallbackPlacements: fallbackPlacementsProp,
-    placement: placementProp = 'bottom',
+    placement = 'bottom',
     portal,
     scheme,
-    shadow = 2,
     zOffset = (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.tooltip.zOffset
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$g);
@@ -7808,66 +7843,39 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
   const forwardedRef = useForwardedRef(ref);
   const [referenceElement, setReferenceElement] = useState(null);
-  const arrowRef = useRef(null);
-  const rootBoundary = 'viewport';
-  const middleware = useMemo(() => {
-    const ret = []; // Flip the floating element when leaving the boundary box
-
-    ret.push(flip({
-      boundary: boundaryElement || undefined,
-      fallbackPlacements,
-      padding: 4,
-      rootBoundary
-    })); // Define distance between reference and floating element
-
-    ret.push(offset({
-      mainAxis: 3
-    })); // Shift the tooltip so its sits with the boundary eleement
-
-    ret.push(shift({
-      boundary: boundaryElement || undefined,
-      rootBoundary,
-      padding: 4
-    })); // Place arrow
-
-    ret.push(arrow({
-      element: arrowRef,
-      padding: 2
-    }));
-    return ret;
-  }, [boundaryElement, fallbackPlacements]);
-  const {
-    x,
-    y,
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const popper = usePopper(referenceElement, popperElement, {
     placement,
-    reference,
-    floating,
-    middlewareData,
-    update,
-    strategy
-  } = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate
+    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,
+        fallbackPlacements
+      }
+    }]
   });
-  const rootStyle = useMemo(() => ({
-    position: strategy,
-    top: y != null ? y : 0,
-    left: x != null ? x : 0
-  }), [strategy, x, y]);
-  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]];
-  const arrowX = (_middlewareData$arrow = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow.x;
-  const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow2.y;
-  const arrowStyle = useMemo(() => {
-    const 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]);
+  const {
+    forceUpdate
+  } = popper;
   const [isOpen, setIsOpen] = useState(false);
   const handleBlur = useCallback(() => setIsOpen(false), []);
   const handleFocus = useCallback(() => setIsOpen(true), []);
@@ -7893,7 +7901,23 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
     return () => {
       window.removeEventListener('mousemove', handleWindowMouseMove);
     };
-  }, [isOpen, referenceElement]); // Close when `disabled` changes to `true`
+  }, [isOpen, referenceElement]);
+  const updateTimeoutRef = useRef(null);
+  useEffect(() => {
+    if (updateTimeoutRef.current) {
+      clearTimeout(updateTimeoutRef.current);
+      updateTimeoutRef.current = null;
+    }
+
+    updateTimeoutRef.current = setTimeout(() => {
+      if (forceUpdate) {
+        try {
+          forceUpdate();
+        } catch (_) {// ignore caught error
+        }
+      }
+    }, 0);
+  }, [forceUpdate, content]); // Close when `disabled` changes to `true`
 
   useEffect(() => {
     if (disabled) setIsOpen(false);
@@ -7901,59 +7925,40 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
 
   useEffect(() => {
     if (!content) setIsOpen(false);
-  }, [content]); // Update reference
-
-  useEffect(() => reference(referenceElement), [reference, referenceElement]);
-  const setArrow = useCallback(arrowEl => {
-    arrowRef.current = arrowEl;
-    update();
-  }, [update]);
-  const setFloating = useCallback(node => {
-    forwardedRef.current = node;
-    floating(node);
-  }, [floating, forwardedRef]);
-  const childRef = childProp == null ? void 0 : childProp.ref;
-  const setReference = useCallback(node => {
-    if (typeof childRef === 'function') {
-      childRef(node);
-    } else if (childRef) {
-      childRef.current = node;
-    } // childRef.current = node
-
-
-    setReferenceElement(node);
-  }, [childRef]);
-  const child = useMemo(() => {
-    if (!childProp) return null;
-    return /*#__PURE__*/cloneElement(childProp, {
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      ref: setReference
-    });
-  }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
-  if (!child) return /*#__PURE__*/React.createElement(React.Fragment, null);
-  if (disabled) return child;
-  const root = /*#__PURE__*/React.createElement(Root$a, _extends({
+  }, [content]);
+
+  const setRef = el => {
+    setPopperElement(el);
+    forwardedRef.current = el;
+  };
+
+  if (!children) return /*#__PURE__*/React.createElement(React.Fragment, null);
+  if (disabled) return children;
+  const referenceProps = {
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    ref: setReferenceElement
+  };
+  const referenceNode = /*#__PURE__*/cloneElement(children, referenceProps);
+  const popperNode = /*#__PURE__*/React.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.createElement(Card, {
-    "data-ui": "Tooltip__card",
-    "data-placement": placement,
     radius: 2,
     scheme: scheme,
-    shadow: shadow
+    shadow: 3
   }, content, /*#__PURE__*/React.createElement(TooltipArrow, {
-    ref: setArrow,
-    style: arrowStyle
+    ref: setArrowElement,
+    style: popper.styles.arrow
   })));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, child, isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, portal ? /*#__PURE__*/React.createElement(Portal, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, referenceNode, isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, portal && /*#__PURE__*/React.createElement(Portal, {
     __unstable_name: typeof portal === 'string' ? portal : undefined
-  }, root) : root));
+  }, popperNode), !portal && popperNode));
 });
 
 let _$b = t => t,
@@ -7985,6 +7990,11 @@ const ListBox = styled(Box)(_t2$8 || (_t2$8 = _$b`
  */
 
 const ResultsPopover = styled(Popover)(_t3$3 || (_t3$3 = _$b`
+  & > div {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
   &[data-popper-reference-hidden='true'] {
     display: none;
   }
@@ -8116,17 +8126,17 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ['Control', 'Shift', 'Alt', 'Enter', 'H
  * @internal
  */
 
-const AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 0, 0];
+const AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 1, 1];
 /**
  * @internal
  */
 
-const AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom';
+const AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom-start';
 /**
  * @internal
  */
 
-const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['bottom', 'top'];
+const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['top-start'];
 
 const _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"];