@sanity/ui 3.0.0-static.14 → 3.0.0-static.16

package/README.md

@@ -6,7 +6,7 @@ The Sanity UI components.
 npm install @sanity/ui
 
 # Install peer dependencies
-npm install react react-dom styled-components
+npm install react react-dom react-is styled-components
 ```
 
 [![npm version](https://img.shields.io/npm/v/@sanity/ui.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui)
@@ -14,17 +14,19 @@ npm install react react-dom styled-components
 ## Usage
 
 ```jsx
-import {Button, ThemeProvider} from '@sanity/ui'
-import {buildTheme} from '@sanity/ui/theme'
+import '@sanity/ui/sanity-palette.css'
+import '@sanity/ui/sanity-theme.css'
+import '@sanity/ui/system.css'
+
+import {Button, Card} from '@sanity/ui'
 import {createRoot} from 'react-dom/client'
 
 const root = createRoot(document.getElementById('root'))
-const theme = buildTheme()
 
 root.render(
-  <ThemeProvider theme={theme}>
+  <Card>
     <Button text="Hello, world" />
-  </ThemeProvider>,
+  </Card>,
 )
 ```
 

package/dist/_chunks-cjs/_visual-editing.js

@@ -1,6 +1,5 @@
 "use strict";
-var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), react = require("react"), styledComponents = require("styled-components"), css = require("@sanity/ui/css"), reactIs = require("react-is"), icons = require("@sanity/icons"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), resizeObserver = require("@juggle/resize-observer"), useEffectEvent = require("use-effect-event"), reactDom = require("react-dom");
-const studioTheme = theme.buildTheme();
+var jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), theme = require("@sanity/ui/theme"), react = require("react"), styledComponents = require("styled-components"), css = require("@sanity/ui/css"), reactIs = require("react-is"), icons = require("@sanity/icons"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), resizeObserver = require("@juggle/resize-observer"), useEffectEvent = require("use-effect-event"), reactDom = require("react-dom");
 function getGlobalScope() {
   if (typeof globalThis < "u") return globalThis;
   if (typeof window < "u") return window;
@@ -17,19 +16,18 @@ const CardContext = createGlobalScopedContext("@sanity/ui/context/card", null);
 function CardProvider(props) {
   const $ = reactCompilerRuntime.c(7), {
     children,
-    rendered: t0,
     tone,
-    scheme
-  } = props, rendered = t0 === void 0 ? !1 : t0;
-  let t1, t2;
-  $[0] !== rendered || $[1] !== scheme || $[2] !== tone ? (t2 = {
-    rendered,
+    scheme,
+    unstable_CompatProvider
+  } = props;
+  let t0, t1;
+  $[0] !== scheme || $[1] !== tone || $[2] !== unstable_CompatProvider ? (t1 = {
     tone,
-    scheme
-  }, $[0] = rendered, $[1] = scheme, $[2] = tone, $[3] = t2) : t2 = $[3], t1 = t2;
-  const context = t1;
-  let t3;
-  return $[4] !== children || $[5] !== context ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(CardContext.Provider, { value: context, children }), $[4] = children, $[5] = context, $[6] = t3) : t3 = $[6], t3;
+    scheme,
+    unstable_CompatProvider
+  }, $[0] = scheme, $[1] = tone, $[2] = unstable_CompatProvider, $[3] = t1) : t1 = $[3], t0 = t1;
+  let t2;
+  return $[4] !== children || $[5] !== t0 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(CardContext.Provider, { value: t0, children }), $[4] = children, $[5] = t0, $[6] = t2) : t2 = $[6], t2;
 }
 CardProvider.displayName = "CardProvider";
 const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
@@ -71,7 +69,7 @@ function ThemeProvider(props) {
   let t3;
   $[12] !== t2 || $[13] !== themeContext ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: t2 }), $[12] = t2, $[13] = themeContext, $[14] = t3) : t3 = $[14];
   let t4;
-  return $[15] !== scheme || $[16] !== t3 || $[17] !== tone ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { compat_provider: ThemeColorProvider, scheme, tone, children: t3 }), $[15] = scheme, $[16] = t3, $[17] = tone, $[18] = t4) : t4 = $[18], t4;
+  return $[15] !== scheme || $[16] !== t3 || $[17] !== tone ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { scheme, tone, unstable_CompatProvider: ThemeColorProvider, children: t3 }), $[15] = scheme, $[16] = t3, $[17] = tone, $[18] = t4) : t4 = $[18], t4;
 }
 ThemeProvider.displayName = "ThemeProvider";
 function useRootTheme() {
@@ -354,8 +352,8 @@ function _temp$5() {
 }
 const DEFAULT_BOX_ELEMENT = "div";
 function Box(props) {
-  const $ = reactCompilerRuntime.c(126), t0 = props;
-  let align, autoCols, autoFlow, autoRows, borderBottom, borderLeft, borderRight, borderTop, children, className, column, columnEnd, columnStart, columns, direction, flex, gap, gapX, gapY, height, inset, insetBottom, insetLeft, insetRight, insetTop, justify, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxWidth, muted, outline, overflow, overflowX, overflowY, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pointerEvents, position, radius, rest, row, rowEnd, rowStart, rows, t1, t2, t3, t4, t5, t6, t7, width, wrap;
+  const $ = reactCompilerRuntime.c(128), t0 = props;
+  let align, autoCols, autoFlow, autoRows, borderBottom, borderLeft, borderRight, borderTop, children, className, column, columnEnd, columnStart, columns, direction, flex, gap, gapX, gapY, height, inset, insetBottom, insetLeft, insetRight, insetTop, justify, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxWidth, muted, outline, overflow, overflowX, overflowY, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pointerEvents, position, radius, rest, row, rowEnd, rowStart, rows, t1, t2, t3, t4, t5, t6, t7, textAlign, width, wrap;
   $[0] !== t0 ? ({
     align,
     as: t1,
@@ -415,13 +413,14 @@ function Box(props) {
     rowStart,
     rowEnd,
     sizing: t7,
+    textAlign,
     width,
     wrap,
     ...rest
-  } = t0, $[0] = t0, $[1] = align, $[2] = autoCols, $[3] = autoFlow, $[4] = autoRows, $[5] = borderBottom, $[6] = borderLeft, $[7] = borderRight, $[8] = borderTop, $[9] = children, $[10] = className, $[11] = column, $[12] = columnEnd, $[13] = columnStart, $[14] = columns, $[15] = direction, $[16] = flex, $[17] = gap, $[18] = gapX, $[19] = gapY, $[20] = height, $[21] = inset, $[22] = insetBottom, $[23] = insetLeft, $[24] = insetRight, $[25] = insetTop, $[26] = justify, $[27] = marginBottom, $[28] = marginLeft, $[29] = marginRight, $[30] = marginTop, $[31] = marginX, $[32] = marginY, $[33] = maxWidth, $[34] = muted, $[35] = outline, $[36] = overflow, $[37] = overflowX, $[38] = overflowY, $[39] = paddingBottom, $[40] = paddingLeft, $[41] = paddingRight, $[42] = paddingTop, $[43] = paddingX, $[44] = paddingY, $[45] = pointerEvents, $[46] = position, $[47] = radius, $[48] = rest, $[49] = row, $[50] = rowEnd, $[51] = rowStart, $[52] = rows, $[53] = t1, $[54] = t2, $[55] = t3, $[56] = t4, $[57] = t5, $[58] = t6, $[59] = t7, $[60] = width, $[61] = wrap) : (align = $[1], autoCols = $[2], autoFlow = $[3], autoRows = $[4], borderBottom = $[5], borderLeft = $[6], borderRight = $[7], borderTop = $[8], children = $[9], className = $[10], column = $[11], columnEnd = $[12], columnStart = $[13], columns = $[14], direction = $[15], flex = $[16], gap = $[17], gapX = $[18], gapY = $[19], height = $[20], inset = $[21], insetBottom = $[22], insetLeft = $[23], insetRight = $[24], insetTop = $[25], justify = $[26], marginBottom = $[27], marginLeft = $[28], marginRight = $[29], marginTop = $[30], marginX = $[31], marginY = $[32], maxWidth = $[33], muted = $[34], outline = $[35], overflow = $[36], overflowX = $[37], overflowY = $[38], paddingBottom = $[39], paddingLeft = $[40], paddingRight = $[41], paddingTop = $[42], paddingX = $[43], paddingY = $[44], pointerEvents = $[45], position = $[46], radius = $[47], rest = $[48], row = $[49], rowEnd = $[50], rowStart = $[51], rows = $[52], t1 = $[53], t2 = $[54], t3 = $[55], t4 = $[56], t5 = $[57], t6 = $[58], t7 = $[59], width = $[60], wrap = $[61]);
+  } = t0, $[0] = t0, $[1] = align, $[2] = autoCols, $[3] = autoFlow, $[4] = autoRows, $[5] = borderBottom, $[6] = borderLeft, $[7] = borderRight, $[8] = borderTop, $[9] = children, $[10] = className, $[11] = column, $[12] = columnEnd, $[13] = columnStart, $[14] = columns, $[15] = direction, $[16] = flex, $[17] = gap, $[18] = gapX, $[19] = gapY, $[20] = height, $[21] = inset, $[22] = insetBottom, $[23] = insetLeft, $[24] = insetRight, $[25] = insetTop, $[26] = justify, $[27] = marginBottom, $[28] = marginLeft, $[29] = marginRight, $[30] = marginTop, $[31] = marginX, $[32] = marginY, $[33] = maxWidth, $[34] = muted, $[35] = outline, $[36] = overflow, $[37] = overflowX, $[38] = overflowY, $[39] = paddingBottom, $[40] = paddingLeft, $[41] = paddingRight, $[42] = paddingTop, $[43] = paddingX, $[44] = paddingY, $[45] = pointerEvents, $[46] = position, $[47] = radius, $[48] = rest, $[49] = row, $[50] = rowEnd, $[51] = rowStart, $[52] = rows, $[53] = t1, $[54] = t2, $[55] = t3, $[56] = t4, $[57] = t5, $[58] = t6, $[59] = t7, $[60] = textAlign, $[61] = width, $[62] = wrap) : (align = $[1], autoCols = $[2], autoFlow = $[3], autoRows = $[4], borderBottom = $[5], borderLeft = $[6], borderRight = $[7], borderTop = $[8], children = $[9], className = $[10], column = $[11], columnEnd = $[12], columnStart = $[13], columns = $[14], direction = $[15], flex = $[16], gap = $[17], gapX = $[18], gapY = $[19], height = $[20], inset = $[21], insetBottom = $[22], insetLeft = $[23], insetRight = $[24], insetTop = $[25], justify = $[26], marginBottom = $[27], marginLeft = $[28], marginRight = $[29], marginTop = $[30], marginX = $[31], marginY = $[32], maxWidth = $[33], muted = $[34], outline = $[35], overflow = $[36], overflowX = $[37], overflowY = $[38], paddingBottom = $[39], paddingLeft = $[40], paddingRight = $[41], paddingTop = $[42], paddingX = $[43], paddingY = $[44], pointerEvents = $[45], position = $[46], radius = $[47], rest = $[48], row = $[49], rowEnd = $[50], rowStart = $[51], rows = $[52], t1 = $[53], t2 = $[54], t3 = $[55], t4 = $[56], t5 = $[57], t6 = $[58], t7 = $[59], textAlign = $[60], width = $[61], wrap = $[62]);
   const Element2 = t1 === void 0 ? DEFAULT_BOX_ELEMENT : t1, border = t2 === void 0 ? !1 : t2, display = t3 === void 0 ? "block" : t3, margin = t4 === void 0 ? 0 : t4, minWidth = t5 === void 0 ? 0 : t5, padding = t6 === void 0 ? 0 : t6, sizing = t7 === void 0 ? "border" : t7;
   let t8;
-  $[62] !== align || $[63] !== autoCols || $[64] !== autoFlow || $[65] !== autoRows || $[66] !== border || $[67] !== borderBottom || $[68] !== borderLeft || $[69] !== borderRight || $[70] !== borderTop || $[71] !== className || $[72] !== column || $[73] !== columnEnd || $[74] !== columnStart || $[75] !== columns || $[76] !== direction || $[77] !== display || $[78] !== flex || $[79] !== gap || $[80] !== gapX || $[81] !== gapY || $[82] !== height || $[83] !== inset || $[84] !== insetBottom || $[85] !== insetLeft || $[86] !== insetRight || $[87] !== insetTop || $[88] !== justify || $[89] !== margin || $[90] !== marginBottom || $[91] !== marginLeft || $[92] !== marginRight || $[93] !== marginTop || $[94] !== marginX || $[95] !== marginY || $[96] !== maxWidth || $[97] !== minWidth || $[98] !== muted || $[99] !== outline || $[100] !== overflow || $[101] !== overflowX || $[102] !== overflowY || $[103] !== padding || $[104] !== paddingBottom || $[105] !== paddingLeft || $[106] !== paddingRight || $[107] !== paddingTop || $[108] !== paddingX || $[109] !== paddingY || $[110] !== pointerEvents || $[111] !== position || $[112] !== radius || $[113] !== row || $[114] !== rowEnd || $[115] !== rowStart || $[116] !== rows || $[117] !== sizing || $[118] !== width || $[119] !== wrap ? (t8 = css.composeClassNames(className, css.box({
+  $[63] !== align || $[64] !== autoCols || $[65] !== autoFlow || $[66] !== autoRows || $[67] !== border || $[68] !== borderBottom || $[69] !== borderLeft || $[70] !== borderRight || $[71] !== borderTop || $[72] !== className || $[73] !== column || $[74] !== columnEnd || $[75] !== columnStart || $[76] !== columns || $[77] !== direction || $[78] !== display || $[79] !== flex || $[80] !== gap || $[81] !== gapX || $[82] !== gapY || $[83] !== height || $[84] !== inset || $[85] !== insetBottom || $[86] !== insetLeft || $[87] !== insetRight || $[88] !== insetTop || $[89] !== justify || $[90] !== margin || $[91] !== marginBottom || $[92] !== marginLeft || $[93] !== marginRight || $[94] !== marginTop || $[95] !== marginX || $[96] !== marginY || $[97] !== maxWidth || $[98] !== minWidth || $[99] !== muted || $[100] !== outline || $[101] !== overflow || $[102] !== overflowX || $[103] !== overflowY || $[104] !== padding || $[105] !== paddingBottom || $[106] !== paddingLeft || $[107] !== paddingRight || $[108] !== paddingTop || $[109] !== paddingX || $[110] !== paddingY || $[111] !== pointerEvents || $[112] !== position || $[113] !== radius || $[114] !== row || $[115] !== rowEnd || $[116] !== rowStart || $[117] !== rows || $[118] !== sizing || $[119] !== textAlign || $[120] !== width || $[121] !== wrap ? (t8 = css.composeClassNames(className, css.box({
     align,
     autoCols,
     autoFlow,
@@ -477,11 +476,12 @@ function Box(props) {
     rowStart,
     rowEnd,
     sizing,
+    textAlign,
     width,
     wrap
-  })), $[62] = align, $[63] = autoCols, $[64] = autoFlow, $[65] = autoRows, $[66] = border, $[67] = borderBottom, $[68] = borderLeft, $[69] = borderRight, $[70] = borderTop, $[71] = className, $[72] = column, $[73] = columnEnd, $[74] = columnStart, $[75] = columns, $[76] = direction, $[77] = display, $[78] = flex, $[79] = gap, $[80] = gapX, $[81] = gapY, $[82] = height, $[83] = inset, $[84] = insetBottom, $[85] = insetLeft, $[86] = insetRight, $[87] = insetTop, $[88] = justify, $[89] = margin, $[90] = marginBottom, $[91] = marginLeft, $[92] = marginRight, $[93] = marginTop, $[94] = marginX, $[95] = marginY, $[96] = maxWidth, $[97] = minWidth, $[98] = muted, $[99] = outline, $[100] = overflow, $[101] = overflowX, $[102] = overflowY, $[103] = padding, $[104] = paddingBottom, $[105] = paddingLeft, $[106] = paddingRight, $[107] = paddingTop, $[108] = paddingX, $[109] = paddingY, $[110] = pointerEvents, $[111] = position, $[112] = radius, $[113] = row, $[114] = rowEnd, $[115] = rowStart, $[116] = rows, $[117] = sizing, $[118] = width, $[119] = wrap, $[120] = t8) : t8 = $[120];
+  })), $[63] = align, $[64] = autoCols, $[65] = autoFlow, $[66] = autoRows, $[67] = border, $[68] = borderBottom, $[69] = borderLeft, $[70] = borderRight, $[71] = borderTop, $[72] = className, $[73] = column, $[74] = columnEnd, $[75] = columnStart, $[76] = columns, $[77] = direction, $[78] = display, $[79] = flex, $[80] = gap, $[81] = gapX, $[82] = gapY, $[83] = height, $[84] = inset, $[85] = insetBottom, $[86] = insetLeft, $[87] = insetRight, $[88] = insetTop, $[89] = justify, $[90] = margin, $[91] = marginBottom, $[92] = marginLeft, $[93] = marginRight, $[94] = marginTop, $[95] = marginX, $[96] = marginY, $[97] = maxWidth, $[98] = minWidth, $[99] = muted, $[100] = outline, $[101] = overflow, $[102] = overflowX, $[103] = overflowY, $[104] = padding, $[105] = paddingBottom, $[106] = paddingLeft, $[107] = paddingRight, $[108] = paddingTop, $[109] = paddingX, $[110] = paddingY, $[111] = pointerEvents, $[112] = position, $[113] = radius, $[114] = row, $[115] = rowEnd, $[116] = rowStart, $[117] = rows, $[118] = sizing, $[119] = textAlign, $[120] = width, $[121] = wrap, $[122] = t8) : t8 = $[122];
   let t9;
-  return $[121] !== Element2 || $[122] !== children || $[123] !== rest || $[124] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-ui": "Box", ...rest, className: t8, children }), $[121] = Element2, $[122] = children, $[123] = rest, $[124] = t8, $[125] = t9) : t9 = $[125], t9;
+  return $[123] !== Element2 || $[124] !== children || $[125] !== rest || $[126] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-ui": "Box", ...rest, className: t8, children }), $[123] = Element2, $[124] = children, $[125] = rest, $[126] = t8, $[127] = t9) : t9 = $[127], t9;
 }
 Box.displayName = "Box";
 const DEFAULT_LABEL_ELEMENT = "div";
@@ -821,7 +821,7 @@ function useCard() {
 }
 const DEFAULT_CARD_ELEMENT = "div";
 function Card(props) {
-  const $ = reactCompilerRuntime.c(43), t0 = props;
+  const $ = reactCompilerRuntime.c(40), t0 = props;
   let className, disabled, pressed, rest, schemeProp, selected, shadow, style, t1, t2, t3, t4, t5;
   $[0] !== t0 ? ({
     __unstable_checkered: t1,
@@ -838,35 +838,25 @@ function Card(props) {
     tone: t5,
     ...rest
   } = t0, $[0] = t0, $[1] = className, $[2] = disabled, $[3] = pressed, $[4] = rest, $[5] = schemeProp, $[6] = selected, $[7] = shadow, $[8] = style, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4, $[13] = t5) : (className = $[1], disabled = $[2], pressed = $[3], rest = $[4], schemeProp = $[5], selected = $[6], shadow = $[7], style = $[8], t1 = $[9], t2 = $[10], t3 = $[11], t4 = $[12], t5 = $[13]);
-  const checkered = t1 === void 0 ? !1 : t1, focusRing = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_CARD_ELEMENT : t3, radius = t4 === void 0 ? 0 : t4, toneProp = t5 === void 0 ? "default" : t5, parent = useCard(), t6 = parent?.tone ?? "default", t7 = parent?.scheme ?? "light";
-  let t8;
-  $[14] !== t6 || $[15] !== t7 ? (t8 = {
-    tone: t6,
-    scheme: t7
-  }, $[14] = t6, $[15] = t7, $[16] = t8) : t8 = $[16];
-  const context = t8, tone = toneProp === "inherit" ? context.tone : toneProp, scheme = schemeProp === void 0 ? context.scheme : schemeProp, t9 = scheme === context.scheme ? void 0 : scheme;
-  let t10;
-  $[17] !== className || $[18] !== shadow || $[19] !== t9 || $[20] !== tone ? (t10 = css.composeClassNames(className, css.card({
-    scheme: t9,
+  const checkered = t1 === void 0 ? !1 : t1, focusRing = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_CARD_ELEMENT : t3, radius = t4 === void 0 ? 0 : t4, toneProp = t5 === void 0 ? "default" : t5, parent = useCard(), tone = toneProp === "inherit" ? parent?.tone : toneProp, scheme = schemeProp === void 0 ? parent?.scheme : schemeProp, t6 = scheme === parent?.scheme ? void 0 : scheme;
+  let t7;
+  $[14] !== className || $[15] !== shadow || $[16] !== t6 || $[17] !== tone ? (t7 = css.composeClassNames(className, css.card({
+    scheme: t6,
     shadow,
     tone
-  })), $[17] = className, $[18] = shadow, $[19] = t9, $[20] = tone, $[21] = t10) : t10 = $[21];
-  const t11 = checkered ? "" : void 0, t12 = disabled ? "" : void 0, t13 = focusRing ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0;
-  let t16;
-  $[22] !== as || $[23] !== radius || $[24] !== rest || $[25] !== style || $[26] !== t10 || $[27] !== t11 || $[28] !== t12 || $[29] !== t13 || $[30] !== t14 || $[31] !== t15 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(Box, { "data-ui": "Card", ...rest, as, className: t10, "data-checkered": t11, "data-disabled": t12, "data-focus-ring": t13, "data-pressed": t14, "data-selected": t15, radius, style }), $[22] = as, $[23] = radius, $[24] = rest, $[25] = style, $[26] = t10, $[27] = t11, $[28] = t12, $[29] = t13, $[30] = t14, $[31] = t15, $[32] = t16) : t16 = $[32];
-  let node = t16;
-  if (scheme === context.scheme && tone === context.tone)
+  })), $[14] = className, $[15] = shadow, $[16] = t6, $[17] = tone, $[18] = t7) : t7 = $[18];
+  const t8 = checkered ? "" : void 0, t9 = disabled ? "" : void 0, t10 = focusRing ? "" : void 0, t11 = pressed ? "" : void 0, t12 = selected ? "" : void 0;
+  let t13;
+  $[19] !== as || $[20] !== radius || $[21] !== rest || $[22] !== style || $[23] !== t10 || $[24] !== t11 || $[25] !== t12 || $[26] !== t7 || $[27] !== t8 || $[28] !== t9 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(Box, { "data-ui": "Card", ...rest, as, className: t7, "data-checkered": t8, "data-disabled": t9, "data-focus-ring": t10, "data-pressed": t11, "data-selected": t12, radius, style }), $[19] = as, $[20] = radius, $[21] = rest, $[22] = style, $[23] = t10, $[24] = t11, $[25] = t12, $[26] = t7, $[27] = t8, $[28] = t9, $[29] = t13) : t13 = $[29];
+  let node = t13;
+  if (scheme === parent?.scheme && tone === parent?.tone)
     return node;
-  const t17 = parent?.compat_provider, t18 = tone ?? context.tone;
-  let t19;
-  if ($[33] !== node || $[34] !== scheme || $[35] !== t17 || $[36] !== t18 ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { compat_provider: t17, rendered: !0, scheme, tone: t18, children: node }), $[33] = node, $[34] = scheme, $[35] = t17, $[36] = t18, $[37] = t19) : t19 = $[37], node = t19, parent?.compat_provider) {
-    const t20 = tone ?? context.tone;
-    let t21;
-    return $[38] !== node || $[39] !== parent.compat_provider || $[40] !== scheme || $[41] !== t20 ? (t21 = react.createElement(parent.compat_provider, {
-      children: node,
-      scheme,
-      tone: t20
-    }), $[38] = node, $[39] = parent.compat_provider, $[40] = scheme, $[41] = t20, $[42] = t21) : t21 = $[42], t21;
+  const t14 = scheme ?? "light", t15 = tone ?? "default", t16 = parent?.unstable_CompatProvider;
+  let t17;
+  if ($[30] !== node || $[31] !== t14 || $[32] !== t15 || $[33] !== t16 ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { scheme: t14, tone: t15, unstable_CompatProvider: t16, children: node }), $[30] = node, $[31] = t14, $[32] = t15, $[33] = t16, $[34] = t17) : t17 = $[34], node = t17, parent?.unstable_CompatProvider) {
+    const CompatProvider = parent.unstable_CompatProvider, t18 = scheme ?? "light", t19 = tone ?? parent?.tone ?? "default";
+    let t20;
+    return $[35] !== CompatProvider || $[36] !== node || $[37] !== t18 || $[38] !== t19 ? (t20 = /* @__PURE__ */ jsxRuntime.jsx(CompatProvider, { scheme: t18, tone: t19, children: node }), $[35] = CompatProvider, $[36] = node, $[37] = t18, $[38] = t19, $[39] = t20) : t20 = $[39], t20;
   }
   return node;
 }
@@ -1431,7 +1421,7 @@ function usePortal() {
   return value;
 }
 function Portal(props) {
-  const $ = reactCompilerRuntime.c(4), {
+  const $ = reactCompilerRuntime.c(6), {
     children,
     __unstable_name: name
   } = props, card = useCard(), portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
@@ -1439,11 +1429,9 @@ function Portal(props) {
     return null;
   const t0 = card?.scheme || "light";
   let t1;
-  return $[0] !== children || $[1] !== portalElement || $[2] !== t0 ? (t1 = reactDom.createPortal(react.createElement(CardProvider, {
-    rendered: !0,
-    tone: "transparent",
-    scheme: t0
-  }, children), portalElement), $[0] = children, $[1] = portalElement, $[2] = t0, $[3] = t1) : t1 = $[3], t1;
+  $[0] !== children || $[1] !== t0 ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: "transparent", scheme: t0, children }), $[0] = children, $[1] = t0, $[2] = t1) : t1 = $[2];
+  let t2;
+  return $[3] !== portalElement || $[4] !== t1 ? (t2 = reactDom.createPortal(t1, portalElement), $[3] = portalElement, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
 }
 Portal.displayName = "Portal";
 function PortalProvider(props) {
@@ -1679,18 +1667,16 @@ function size(options) {
     }
   };
 }
-const DEFAULT_POPOVER_LAYER_ELEMENT = "div", MotionLayer$1 = framerMotion.motion.create(Layer);
 function PopoverLayer(props) {
-  const $ = reactCompilerRuntime.c(67), t0 = props;
-  let animate, arrow, arrowRef, arrowX, arrowY, children, marginsProp, maxWidth, originX, originY, overflow, padding, placement, radius, referenceWidth, rest, shadow, strategy, style, t1, t2, xProp, yProp;
-  $[0] !== t0 ? ({
+  const $ = reactCompilerRuntime.c(65);
+  let animate, arrow, arrowRef, arrowX, arrowY, children, marginsProp, maxWidth, originX, originY, overflow, padding, placement, radius, referenceWidth, rest, shadow, strategy, style, t0, xProp, yProp;
+  $[0] !== props ? ({
     __unstable_margins: marginsProp,
     animate,
     arrow,
     arrowRef,
     arrowX,
     arrowY,
-    as: t1,
     children,
     maxWidth,
     padding,
@@ -1703,57 +1689,57 @@ function PopoverLayer(props) {
     shadow,
     strategy,
     style,
-    tone: t2,
+    tone: t0,
     x: xProp,
     y: yProp,
     ...rest
-  } = t0, $[0] = t0, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = marginsProp, $[8] = maxWidth, $[9] = originX, $[10] = originY, $[11] = overflow, $[12] = padding, $[13] = placement, $[14] = radius, $[15] = referenceWidth, $[16] = rest, $[17] = shadow, $[18] = strategy, $[19] = style, $[20] = t1, $[21] = t2, $[22] = xProp, $[23] = yProp) : (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], marginsProp = $[7], maxWidth = $[8], originX = $[9], originY = $[10], overflow = $[11], padding = $[12], placement = $[13], radius = $[14], referenceWidth = $[15], rest = $[16], shadow = $[17], strategy = $[18], style = $[19], t1 = $[20], t2 = $[21], xProp = $[22], yProp = $[23]);
-  const as = t1 === void 0 ? DEFAULT_POPOVER_LAYER_ELEMENT : t1, tone = t2 === void 0 ? "inherit" : t2;
-  let t3;
-  t3 = marginsProp || DEFAULT_POPOVER_MARGINS;
-  const margins = t3, x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0];
+  } = props, $[0] = props, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = marginsProp, $[8] = maxWidth, $[9] = originX, $[10] = originY, $[11] = overflow, $[12] = padding, $[13] = placement, $[14] = radius, $[15] = referenceWidth, $[16] = rest, $[17] = shadow, $[18] = strategy, $[19] = style, $[20] = t0, $[21] = xProp, $[22] = yProp) : (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], marginsProp = $[7], maxWidth = $[8], originX = $[9], originY = $[10], overflow = $[11], padding = $[12], placement = $[13], radius = $[14], referenceWidth = $[15], rest = $[16], shadow = $[17], strategy = $[18], style = $[19], t0 = $[20], xProp = $[21], yProp = $[22]);
+  const tone = t0 === void 0 ? "inherit" : t0;
+  let t1;
+  t1 = marginsProp || DEFAULT_POPOVER_MARGINS;
+  const margins = t1, x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0];
+  let t2;
+  const t3 = animate ? "transform" : void 0;
   let t4;
-  const t5 = animate ? "transform" : void 0;
-  let t6;
-  $[24] !== originX || $[25] !== originY || $[26] !== referenceWidth || $[27] !== style || $[28] !== t5 || $[29] !== x || $[30] !== y ? (t6 = {
+  $[23] !== originX || $[24] !== originY || $[25] !== referenceWidth || $[26] !== style || $[27] !== t3 || $[28] !== x || $[29] !== y ? (t4 = {
     left: x,
     originX,
     originY,
     top: y,
     width: referenceWidth,
-    willChange: t5,
+    willChange: t3,
     ...style
-  }, $[24] = originX, $[25] = originY, $[26] = referenceWidth, $[27] = style, $[28] = t5, $[29] = x, $[30] = y, $[31] = t6) : t6 = $[31], t4 = t6;
-  const rootStyle = t4;
-  let t7;
-  const t8 = arrowX !== null ? arrowX : void 0, t9 = arrowY !== null ? arrowY : void 0;
-  let t10;
-  $[32] !== t8 || $[33] !== t9 ? (t10 = {
-    left: t8,
-    top: t9,
+  }, $[23] = originX, $[24] = originY, $[25] = referenceWidth, $[26] = style, $[27] = t3, $[28] = x, $[29] = y, $[30] = t4) : t4 = $[30], t2 = t4;
+  const rootStyle = t2;
+  let t5;
+  const t6 = arrowX !== null ? arrowX : void 0, t7 = arrowY !== null ? arrowY : void 0;
+  let t8;
+  $[31] !== t6 || $[32] !== t7 ? (t8 = {
+    left: t6,
+    top: t7,
     right: void 0,
     bottom: void 0
-  }, $[32] = t8, $[33] = t9, $[34] = t10) : t10 = $[34], t7 = t10;
-  const arrowStyle = t7;
+  }, $[31] = t6, $[32] = t7, $[33] = t8) : t8 = $[33], t5 = t8;
+  const arrowStyle = t5;
+  let t9;
+  $[34] === Symbol.for("react.memo_cache_sentinel") ? (t9 = css.popoverCard(), $[34] = t9) : t9 = $[34];
+  let t10;
+  $[35] !== animate ? (t10 = animate ? ["hidden", "initial"] : void 0, $[35] = animate, $[36] = t10) : t10 = $[36];
   let t11;
-  $[35] === Symbol.for("react.memo_cache_sentinel") ? (t11 = css.popoverCard(), $[35] = t11) : t11 = $[35];
+  $[37] !== animate ? (t11 = animate ? ["visible", "scaleIn"] : void 0, $[37] = animate, $[38] = t11) : t11 = $[38];
   let t12;
-  $[36] !== animate ? (t12 = animate ? ["hidden", "initial"] : void 0, $[36] = animate, $[37] = t12) : t12 = $[37];
+  $[39] !== animate ? (t12 = animate ? ["hidden", "scaleOut"] : void 0, $[39] = animate, $[40] = t12) : t12 = $[40];
   let t13;
-  $[38] !== animate ? (t13 = animate ? ["visible", "scaleIn"] : void 0, $[38] = animate, $[39] = t13) : t13 = $[39];
+  $[41] !== children || $[42] !== padding ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", flex: 1, padding, children }), $[41] = children, $[42] = padding, $[43] = t13) : t13 = $[43];
   let t14;
-  $[40] !== animate ? (t14 = animate ? ["hidden", "scaleOut"] : void 0, $[40] = animate, $[41] = t14) : t14 = $[41];
+  $[44] !== maxWidth || $[45] !== overflow || $[46] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, maxWidth, overflow, children: t13 }), $[44] = maxWidth, $[45] = overflow, $[46] = t13, $[47] = t14) : t14 = $[47];
   let t15;
-  $[42] !== children || $[43] !== padding ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", flex: 1, padding, children }), $[42] = children, $[43] = padding, $[44] = t15) : t15 = $[44];
+  $[48] !== arrow || $[49] !== arrowRef || $[50] !== arrowStyle ? (t15 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[48] = arrow, $[49] = arrowRef, $[50] = arrowStyle, $[51] = t15) : t15 = $[51];
   let t16;
-  $[45] !== maxWidth || $[46] !== overflow || $[47] !== t15 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, maxWidth, overflow, children: t15 }), $[45] = maxWidth, $[46] = overflow, $[47] = t15, $[48] = t16) : t16 = $[48];
-  let t17;
-  $[49] !== arrow || $[50] !== arrowRef || $[51] !== arrowStyle ? (t17 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[49] = arrow, $[50] = arrowRef, $[51] = arrowStyle, $[52] = t17) : t17 = $[52];
-  let t18;
-  return $[53] !== as || $[54] !== placement || $[55] !== radius || $[56] !== rest || $[57] !== rootStyle || $[58] !== shadow || $[59] !== strategy || $[60] !== t12 || $[61] !== t13 || $[62] !== t14 || $[63] !== t16 || $[64] !== t17 || $[65] !== tone ? (t18 = /* @__PURE__ */ jsxRuntime.jsxs(MotionLayer$1, { className: t11, "data-ui": "Popover", ...rest, as, "data-context-tone": tone, "data-placement": placement, direction: "column", display: "flex", position: strategy, radius, shadow, sizing: "border", style: rootStyle, tone, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t12, animate: t13, exit: t14, children: [
-    t16,
-    t17
-  ] }), $[53] = as, $[54] = placement, $[55] = radius, $[56] = rest, $[57] = rootStyle, $[58] = shadow, $[59] = strategy, $[60] = t12, $[61] = t13, $[62] = t14, $[63] = t16, $[64] = t17, $[65] = tone, $[66] = t18) : t18 = $[66], t18;
+  return $[52] !== placement || $[53] !== radius || $[54] !== rest || $[55] !== rootStyle || $[56] !== shadow || $[57] !== strategy || $[58] !== t10 || $[59] !== t11 || $[60] !== t12 || $[61] !== t14 || $[62] !== t15 || $[63] !== tone ? (t16 = /* @__PURE__ */ jsxRuntime.jsxs(Layer, { className: t9, "data-ui": "Popover", ...rest, as: framerMotion.motion.div, "data-context-tone": tone, "data-placement": placement, direction: "column", display: "flex", position: strategy, radius, shadow, sizing: "border", style: rootStyle, tone, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t10, animate: t11, exit: t12, children: [
+    t14,
+    t15
+  ] }), $[52] = placement, $[53] = radius, $[54] = rest, $[55] = rootStyle, $[56] = shadow, $[57] = strategy, $[58] = t10, $[59] = t11, $[60] = t12, $[61] = t14, $[62] = t15, $[63] = tone, $[64] = t16) : t16 = $[64], t16;
 }
 PopoverLayer.displayName = "PopoverCard";
 const DEFAULT_POPOVER_ELEMENT = "div";
@@ -1773,7 +1759,7 @@ function ViewportOverlay() {
 function Popover(props) {
   const boundaryElementContext = useBoundaryElement(), {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    animate: _animate = !1,
+    animate: _animate = !0,
     arrow: arrowProp = !1,
     as = DEFAULT_POPOVER_ELEMENT,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -2255,17 +2241,15 @@ TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
 function useTooltipDelayGroup() {
   return react.useContext(TooltipDelayGroupContext);
 }
-const DEFAULT_TOOLTIP_LAYER_ELEMENT = "div", MotionLayer = framerMotion.motion.create(Layer);
 function TooltipLayer(props) {
-  const $ = reactCompilerRuntime.c(53), t0 = props;
-  let animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, rest, scheme, shadow, style, t1, t2;
-  $[0] !== t0 ? ({
+  const $ = reactCompilerRuntime.c(51);
+  let animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, rest, scheme, shadow, style, t0;
+  $[0] !== props ? ({
     animate,
     arrow,
     arrowRef,
     arrowX,
     arrowY,
-    as: t1,
     children,
     originX,
     originY,
@@ -2275,52 +2259,52 @@ function TooltipLayer(props) {
     scheme,
     shadow,
     style,
-    tone: t2,
+    tone: t0,
     ...rest
-  } = t0, $[0] = t0, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = originX, $[8] = originY, $[9] = padding, $[10] = placement, $[11] = radius, $[12] = rest, $[13] = scheme, $[14] = shadow, $[15] = style, $[16] = t1, $[17] = t2) : (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], originX = $[7], originY = $[8], padding = $[9], placement = $[10], radius = $[11], rest = $[12], scheme = $[13], shadow = $[14], style = $[15], t1 = $[16], t2 = $[17]);
-  const as = t1 === void 0 ? DEFAULT_TOOLTIP_LAYER_ELEMENT : t1, tone = t2 === void 0 ? "inherit" : t2;
+  } = props, $[0] = props, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = originX, $[8] = originY, $[9] = padding, $[10] = placement, $[11] = radius, $[12] = rest, $[13] = scheme, $[14] = shadow, $[15] = style, $[16] = t0) : (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], originX = $[7], originY = $[8], padding = $[9], placement = $[10], radius = $[11], rest = $[12], scheme = $[13], shadow = $[14], style = $[15], t0 = $[16]);
+  const tone = t0 === void 0 ? "inherit" : t0;
+  let t1;
+  const t2 = animate ? "transform" : void 0;
   let t3;
-  const t4 = animate ? "transform" : void 0;
-  let t5;
-  $[18] !== originX || $[19] !== originY || $[20] !== style || $[21] !== t4 ? (t5 = {
+  $[17] !== originX || $[18] !== originY || $[19] !== style || $[20] !== t2 ? (t3 = {
     originX,
     originY,
-    willChange: t4,
+    willChange: t2,
     ...style
-  }, $[18] = originX, $[19] = originY, $[20] = style, $[21] = t4, $[22] = t5) : t5 = $[22], t3 = t5;
-  const rootStyle = t3;
-  let t6;
-  const t7 = arrowX !== null ? arrowX : void 0, t8 = arrowY !== null ? arrowY : void 0;
-  let t9;
-  $[23] !== t7 || $[24] !== t8 ? (t9 = {
-    left: t7,
-    top: t8,
+  }, $[17] = originX, $[18] = originY, $[19] = style, $[20] = t2, $[21] = t3) : t3 = $[21], t1 = t3;
+  const rootStyle = t1;
+  let t4;
+  const t5 = arrowX !== null ? arrowX : void 0, t6 = arrowY !== null ? arrowY : void 0;
+  let t7;
+  $[22] !== t5 || $[23] !== t6 ? (t7 = {
+    left: t5,
+    top: t6,
     right: void 0,
     bottom: void 0
-  }, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t6 = t9;
-  const arrowStyle = t6;
+  }, $[22] = t5, $[23] = t6, $[24] = t7) : t7 = $[24], t4 = t7;
+  const arrowStyle = t4;
+  let t8;
+  $[25] === Symbol.for("react.memo_cache_sentinel") ? (t8 = css.tooltipCard(), $[25] = t8) : t8 = $[25];
+  const t9 = animate ? "" : void 0;
   let t10;
-  $[26] === Symbol.for("react.memo_cache_sentinel") ? (t10 = css.tooltipCard(), $[26] = t10) : t10 = $[26];
-  const t11 = animate ? "" : void 0;
+  $[26] !== animate ? (t10 = animate ? ["hidden", "initial"] : void 0, $[26] = animate, $[27] = t10) : t10 = $[27];
+  let t11;
+  $[28] !== animate ? (t11 = animate ? ["visible", "scaleIn"] : void 0, $[28] = animate, $[29] = t11) : t11 = $[29];
   let t12;
-  $[27] !== animate ? (t12 = animate ? ["hidden", "initial"] : void 0, $[27] = animate, $[28] = t12) : t12 = $[28];
+  $[30] !== animate ? (t12 = animate ? ["hidden", "scaleOut"] : void 0, $[30] = animate, $[31] = t12) : t12 = $[31];
   let t13;
-  $[29] !== animate ? (t13 = animate ? ["visible", "scaleIn"] : void 0, $[29] = animate, $[30] = t13) : t13 = $[30];
+  $[32] !== arrow || $[33] !== arrowRef || $[34] !== arrowStyle ? (t13 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[32] = arrow, $[33] = arrowRef, $[34] = arrowStyle, $[35] = t13) : t13 = $[35];
   let t14;
-  $[31] !== animate ? (t14 = animate ? ["hidden", "scaleOut"] : void 0, $[31] = animate, $[32] = t14) : t14 = $[32];
-  let t15;
-  $[33] !== arrow || $[34] !== arrowRef || $[35] !== arrowStyle ? (t15 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[33] = arrow, $[34] = arrowRef, $[35] = arrowStyle, $[36] = t15) : t15 = $[36];
-  let t16;
-  return $[37] !== as || $[38] !== children || $[39] !== padding || $[40] !== placement || $[41] !== radius || $[42] !== rest || $[43] !== rootStyle || $[44] !== scheme || $[45] !== shadow || $[46] !== t11 || $[47] !== t12 || $[48] !== t13 || $[49] !== t14 || $[50] !== t15 || $[51] !== tone ? (t16 = /* @__PURE__ */ jsxRuntime.jsxs(MotionLayer, { "data-ui": "Tooltip__card", ...rest, as, className: t10, "data-animate": t11, "data-placement": placement, padding, radius, scheme, shadow, style: rootStyle, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t12, animate: t13, exit: t14, tone, children: [
+  return $[36] !== children || $[37] !== padding || $[38] !== placement || $[39] !== radius || $[40] !== rest || $[41] !== rootStyle || $[42] !== scheme || $[43] !== shadow || $[44] !== t10 || $[45] !== t11 || $[46] !== t12 || $[47] !== t13 || $[48] !== t9 || $[49] !== tone ? (t14 = /* @__PURE__ */ jsxRuntime.jsxs(Layer, { "data-ui": "Tooltip__card", ...rest, as: framerMotion.motion.div, className: t8, "data-animate": t9, "data-placement": placement, padding, radius, scheme, shadow, style: rootStyle, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t10, animate: t11, exit: t12, tone, children: [
     children,
-    t15
-  ] }), $[37] = as, $[38] = children, $[39] = padding, $[40] = placement, $[41] = radius, $[42] = rest, $[43] = rootStyle, $[44] = scheme, $[45] = shadow, $[46] = t11, $[47] = t12, $[48] = t13, $[49] = t14, $[50] = t15, $[51] = tone, $[52] = t16) : t16 = $[52], t16;
+    t13
+  ] }), $[36] = children, $[37] = padding, $[38] = placement, $[39] = radius, $[40] = rest, $[41] = rootStyle, $[42] = scheme, $[43] = shadow, $[44] = t10, $[45] = t11, $[46] = t12, $[47] = t13, $[48] = t9, $[49] = tone, $[50] = t14) : t14 = $[50], t14;
 }
 TooltipLayer.displayName = "TooltipLayer";
 const DEFAULT_TOOLTIP_ELEMENT = "div";
 function Tooltip(props) {
   const boundaryElementContext = useBoundaryElement(), {
-    animate: _animate = !1,
+    animate: _animate = !0,
     arrow: arrowProp = !1,
     as = DEFAULT_TOOLTIP_ELEMENT,
     boundaryElement = boundaryElementContext?.element,
@@ -2371,7 +2355,8 @@ function Tooltip(props) {
     whileElementsMounted: reactDom$1.autoUpdate,
     elements: {
       reference: referenceElement
-    }
+    },
+    transform: !1
   }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), {
     setIsGroupActive,
     setOpenTooltipId
@@ -3010,33 +2995,36 @@ function Tab(props) {
 Tab.displayName = "Tab";
 const DEFAULT_TAB_LIST_ELEMENT = "div";
 function TabList(props) {
-  const $ = reactCompilerRuntime.c(16), t0 = props;
-  let childrenProp, rest, t1;
+  const $ = reactCompilerRuntime.c(21), t0 = props;
+  let childrenProp, rest, t1, t2, t3, t4;
   $[0] !== t0 ? ({
     as: t1,
     children: childrenProp,
+    gap: t2,
+    space: t3,
+    wrap: t4,
     ...rest
-  } = t0, $[0] = t0, $[1] = childrenProp, $[2] = rest, $[3] = t1) : (childrenProp = $[1], rest = $[2], t1 = $[3]);
-  const as = t1 === void 0 ? DEFAULT_TAB_LIST_ELEMENT : t1, [focusedIndex, setFocusedIndex] = react.useState(-1);
-  let t2;
-  if ($[4] !== childrenProp || $[5] !== focusedIndex) {
+  } = t0, $[0] = t0, $[1] = childrenProp, $[2] = rest, $[3] = t1, $[4] = t2, $[5] = t3, $[6] = t4) : (childrenProp = $[1], rest = $[2], t1 = $[3], t2 = $[4], t3 = $[5], t4 = $[6]);
+  const as = t1 === void 0 ? DEFAULT_TAB_LIST_ELEMENT : t1, gap = t2 === void 0 ? 1 : t2, space = t3 === void 0 ? 1 : t3, wrap = t4 === void 0 ? "nowrap" : t4, [focusedIndex, setFocusedIndex] = react.useState(-1);
+  let t5;
+  if ($[7] !== childrenProp || $[8] !== focusedIndex) {
     const children = react.Children.toArray(childrenProp).filter(_isReactElement);
-    let t32;
-    $[7] !== focusedIndex ? (t32 = (child, childIndex) => react.cloneElement(child, {
+    let t62;
+    $[10] !== focusedIndex ? (t62 = (child, childIndex) => react.cloneElement(child, {
       focused: focusedIndex === childIndex,
       key: childIndex,
       onFocus: () => setFocusedIndex(childIndex)
-    }), $[7] = focusedIndex, $[8] = t32) : t32 = $[8], t2 = children.map(t32), $[4] = childrenProp, $[5] = focusedIndex, $[6] = t2;
+    }), $[10] = focusedIndex, $[11] = t62) : t62 = $[11], t5 = children.map(t62), $[7] = childrenProp, $[8] = focusedIndex, $[9] = t5;
   } else
-    t2 = $[6];
-  const tabs = t2, numTabs = tabs.length;
-  let t3;
-  $[9] !== numTabs ? (t3 = (event) => {
+    t5 = $[9];
+  const tabs = t5, numTabs = tabs.length;
+  let t6;
+  $[12] !== numTabs ? (t6 = (event) => {
     event.key === "ArrowLeft" && setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs), event.key === "ArrowRight" && setFocusedIndex((prevIndex_0) => (prevIndex_0 + 1) % numTabs);
-  }, $[9] = numTabs, $[10] = t3) : t3 = $[10];
-  const handleKeyDown = t3;
-  let t4;
-  return $[11] !== as || $[12] !== handleKeyDown || $[13] !== rest || $[14] !== tabs ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Inline, { "data-ui": "TabList", ...rest, as, onKeyDown: handleKeyDown, role: "tablist", children: tabs }), $[11] = as, $[12] = handleKeyDown, $[13] = rest, $[14] = tabs, $[15] = t4) : t4 = $[15], t4;
+  }, $[12] = numTabs, $[13] = t6) : t6 = $[13];
+  const handleKeyDown = t6, t7 = gap ?? space;
+  let t8;
+  return $[14] !== as || $[15] !== handleKeyDown || $[16] !== rest || $[17] !== t7 || $[18] !== tabs || $[19] !== wrap ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { "data-ui": "TabList", ...rest, as, gap: t7, onKeyDown: handleKeyDown, role: "tablist", wrap, children: tabs }), $[14] = as, $[15] = handleKeyDown, $[16] = rest, $[17] = t7, $[18] = tabs, $[19] = wrap, $[20] = t8) : t8 = $[20], t8;
 }
 TabList.displayName = "TabList";
 function _isReactElement(node) {
@@ -3146,7 +3134,6 @@ exports.isHTMLInputElement = isHTMLInputElement;
 exports.isHTMLSelectElement = isHTMLSelectElement;
 exports.isHTMLTextAreaElement = isHTMLTextAreaElement;
 exports.isRecord = isRecord;
-exports.studioTheme = studioTheme;
 exports.useArrayProp = useArrayProp;
 exports.useBoundaryElement = useBoundaryElement;
 exports.useCard = useCard;