@sanity/ui 2.10.0-corel.0 → 3.0.0-static.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ReactIs = require("react-is"), styledComponents = require("styled-components"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom"), useEffectEvent = require("use-effect-event"), getTheme_v2 = require("./_chunks-cjs/getTheme_v2.js");
+var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), css$1 = require("@sanity/ui/css"), react = require("react"), ReactIs = require("react-is"), styledComponents = require("styled-components"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), useEffectEvent = require("use-effect-event"), reactDom = require("react-dom"), getTheme_v2 = require("./_chunks-cjs/getTheme_v2.js");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -28,6 +28,9 @@ const createColorTheme = theme.createColorTheme, hexToRgb = theme.hexToRgb, hslT
 function _fillCSSObject(keys, value) {
   return keys.reduce((style, key2) => (style[key2] = value, style), {});
 }
+function px(pixelValue) {
+  return pixelValue === 0 ? 0 : `${pixelValue}px`;
+}
 function rem(pixelValue) {
   return pixelValue === 0 ? 0 : `${pixelValue / 16}rem`;
 }
@@ -133,7 +136,7 @@ function _getElements(element, elementsArg) {
   return ret.filter(Boolean);
 }
 function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
-  const [element, setElement] = react.useState(null), [elements, setElements] = react.useState(() => _getElements(element, elementsArg)), elementsRef = react.useRef(elements);
+  const [element, setElement] = react.useState(null), [elements2, setElements] = react.useState(() => _getElements(element, elementsArg)), elementsRef = react.useRef(elements2);
   return react.useEffect(() => {
     const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
     if (prevElements.length !== nextElements.length) {
@@ -155,7 +158,7 @@ function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
     const handleWindowMouseDown = (evt) => {
       const target = evt.target;
       if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
-        for (const el of elements)
+        for (const el of elements2)
           if (target === el || el.contains(target))
             return;
         listener(evt);
@@ -164,7 +167,7 @@ function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
     return window.addEventListener("mousedown", handleWindowMouseDown), () => {
       window.removeEventListener("mousedown", handleWindowMouseDown);
     };
-  }, [boundaryElement, listener, elements]), setElement;
+  }, [boundaryElement, listener, elements2]), setElement;
 }
 function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundaryElement) {
   const onEvent = useEffectEvent.useEffectEvent((evt) => {
@@ -176,8 +179,8 @@ function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundar
     const resolvedBoundaryElement = boundaryElement?.();
     if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
       return;
-    const elements = elementsArg().flat();
-    for (const el of elements)
+    const elements2 = elementsArg().flat();
+    for (const el of elements2)
       if (el && (target === el || el.contains(target)))
         return;
     listener(evt);
@@ -273,7 +276,7 @@ var freeze = function(obj) {
     return cache.get(target);
   if (isHidden(target))
     return cache.set(target, zeroBoxes), zeroBoxes;
-  var cs = getComputedStyle(target), svg = isSVG(target) && target.ownerSVGElement && target.getBBox(), removePadding = !IE && cs.boxSizing === "border-box", switchSizes = verticalRegexp.test(cs.writingMode || ""), canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || ""), canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || ""), paddingTop = svg ? 0 : parseDimension(cs.paddingTop), paddingRight = svg ? 0 : parseDimension(cs.paddingRight), paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom), paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft), borderTop2 = svg ? 0 : parseDimension(cs.borderTopWidth), borderRight2 = svg ? 0 : parseDimension(cs.borderRightWidth), borderBottom2 = svg ? 0 : parseDimension(cs.borderBottomWidth), borderLeft2 = svg ? 0 : parseDimension(cs.borderLeftWidth), horizontalPadding = paddingLeft + paddingRight, verticalPadding = paddingTop + paddingBottom, horizontalBorderArea = borderLeft2 + borderRight2, verticalBorderArea = borderTop2 + borderBottom2, horizontalScrollbarThickness = canScrollHorizontally ? target.offsetHeight - verticalBorderArea - target.clientHeight : 0, verticalScrollbarThickness = canScrollVertically ? target.offsetWidth - horizontalBorderArea - target.clientWidth : 0, widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0, heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0, contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness, contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness, borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea, borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea, boxes = freeze({
+  var cs = getComputedStyle(target), svg = isSVG(target) && target.ownerSVGElement && target.getBBox(), removePadding = !IE && cs.boxSizing === "border-box", switchSizes = verticalRegexp.test(cs.writingMode || ""), canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || ""), canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || ""), paddingTop = svg ? 0 : parseDimension(cs.paddingTop), paddingRight = svg ? 0 : parseDimension(cs.paddingRight), paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom), paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft), borderTop = svg ? 0 : parseDimension(cs.borderTopWidth), borderRight = svg ? 0 : parseDimension(cs.borderRightWidth), borderBottom = svg ? 0 : parseDimension(cs.borderBottomWidth), borderLeft = svg ? 0 : parseDimension(cs.borderLeftWidth), horizontalPadding = paddingLeft + paddingRight, verticalPadding = paddingTop + paddingBottom, horizontalBorderArea = borderLeft + borderRight, verticalBorderArea = borderTop + borderBottom, horizontalScrollbarThickness = canScrollHorizontally ? target.offsetHeight - verticalBorderArea - target.clientHeight : 0, verticalScrollbarThickness = canScrollVertically ? target.offsetWidth - horizontalBorderArea - target.clientWidth : 0, widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0, heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0, contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness, contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness, borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea, borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea, boxes = freeze({
     devicePixelContentBoxSize: size$1(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
     borderBoxSize: size$1(borderBoxWidth, borderBoxHeight, switchSizes),
     contentBoxSize: size$1(contentWidth, contentHeight, switchSizes),
@@ -548,6 +551,169 @@ function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   }, [mediaQueryString]);
   return react.useDebugValue(mediaQueryString), react.useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
 }
+const css = styledComponents.css, keyframes = styledComponents.keyframes, ThemeProvider$1 = styledComponents.ThemeProvider, useTheme$1 = styledComponents.useTheme, elements = [
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "big",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "keygen",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "menuitem",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "use",
+  "var",
+  "video",
+  "wbr",
+  // SVG
+  "circle",
+  "clipPath",
+  "defs",
+  "ellipse",
+  "foreignObject",
+  "g",
+  "image",
+  "line",
+  "linearGradient",
+  "marker",
+  "mask",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "stop",
+  "svg",
+  "text",
+  "tspan"
+], baseStyled = (tagName) => {
+  const m = (_strings, ..._interpolations) => {
+    const Styled = react.forwardRef(function(props, ref) {
+      const { as, forwardedAs, ...rest } = props, sanitizedProps = Object.fromEntries(
+        Object.entries(rest).filter(([, val]) => !!val && (!isArray(val) || val.length > 0)).map(([key2, val]) => key2.startsWith("$") ? [`data-${toSnakeCase(key2.slice(1))}`, val] : [key2, val])
+      );
+      return react.createElement(as ?? tagName, { ...sanitizedProps, as: forwardedAs, ref });
+    });
+    return Styled.displayName = `Styled(${typeof tagName == "function" ? tagName.displayName : tagName})`, Styled;
+  };
+  return m.attrs = (attrs) => (_strings, ..._interpolations) => {
+    const StyledAttrs = react.forwardRef(function(_props, ref) {
+      const props = { ...attrs, ..._props }, { as, forwardedAs, ...rest } = props, sanitizedProps = Object.fromEntries(
+        Object.entries(rest).filter(([, val]) => !!val && (!isArray(val) || val.length > 0)).map(([key2, val]) => key2.startsWith("$") ? [`data-${toSnakeCase(key2.slice(1))}`, val] : [key2, val])
+      );
+      return react.createElement(as ?? tagName, { ...sanitizedProps, as: forwardedAs, ref });
+    });
+    return StyledAttrs.displayName = `StyledAttrs(${typeof tagName == "function" ? tagName.displayName : tagName})`, StyledAttrs;
+  }, m;
+}, styled = baseStyled;
+for (const tagName of elements)
+  styled[tagName] = baseStyled(tagName);
+function toSnakeCase(str) {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
 function getGlobalScope() {
   if (typeof globalThis < "u") return globalThis;
   if (typeof window < "u") return window;
@@ -576,7 +742,7 @@ function ThemeProvider(props) {
     scheme,
     tone
   } : null, [rootTheme, scheme, tone]), theme$1 = react.useMemo(() => rootTheme ? theme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
-  return theme$1 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
+  return theme$1 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider$1, { theme: theme$1, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
 }
 ThemeProvider.displayName = "ThemeProvider";
 function useRootTheme() {
@@ -591,10 +757,10 @@ function ThemeColorProvider(props) {
 }
 ThemeColorProvider.displayName = "ThemeColorProvider";
 function useTheme() {
-  return styledComponents.useTheme();
+  return useTheme$1();
 }
 function useTheme_v2() {
-  return theme.getTheme_v2(styledComponents.useTheme());
+  return theme.getTheme_v2(useTheme$1());
 }
 function _getMediaQuery(media, index) {
   return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
@@ -643,107 +809,16 @@ function usePrefersDark(getServerSnapshot2 = () => !1) {
 function usePrefersReducedMotion(getServerSnapshot2 = () => !1) {
   return useMatchMedia("(prefers-reduced-motion: reduce)", getServerSnapshot2);
 }
-function responsiveBorderStyle() {
-  return [border, borderTop, borderRight, borderBottom, borderLeft];
-}
-function border(props) {
-  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-  return _responsive(
-    media,
-    props.$border,
-    (value) => value ? { "&&": { border: borderStyle } } : { "&&": { border: 0 } }
-  );
-}
-function borderTop(props) {
-  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-  return _responsive(
-    media,
-    props.$borderTop,
-    (value) => value ? { "&&": { borderTop: borderStyle } } : { "&&": { borderTop: 0 } }
-  );
-}
-function borderRight(props) {
-  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-  return _responsive(
-    media,
-    props.$borderRight,
-    (value) => value ? { "&&": { borderRight: borderStyle } } : { "&&": { borderRight: 0 } }
-  );
-}
-function borderBottom(props) {
-  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-  return _responsive(
-    media,
-    props.$borderBottom,
-    (value) => value ? { "&&": { borderBottom: borderStyle } } : { "&&": { borderBottom: 0 } }
-  );
-}
-function borderLeft(props) {
-  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-  return _responsive(
-    media,
-    props.$borderLeft,
-    (value) => value ? { "&&": { borderLeft: borderStyle } } : { "&&": { borderLeft: 0 } }
-  );
-}
-const BASE_STYLE$4 = {
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: "none"
-  }
-}, BOX_SIZING = {
-  content: "content-box",
-  border: "border-box"
-}, BOX_HEIGHT = {
-  stretch: "stretch",
-  fill: "100%"
-};
-function boxStyle() {
-  return BASE_STYLE$4;
-}
-function responsiveBoxStyle() {
-  return [
-    responsiveBoxSizingStyle,
-    responsiveBoxHeightStyle,
-    responsiveBoxOverflowStyle,
-    responsiveBoxDisplayStyle
-  ];
-}
-function responsiveBoxDisplayStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$display, (display) => ({
-    "&:not([hidden])": { display }
-  }));
-}
-function responsiveBoxSizingStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$sizing, (sizing) => ({
-    boxSizing: BOX_SIZING[sizing]
-  }));
-}
-function responsiveBoxHeightStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$height, (height) => ({
-    height: BOX_HEIGHT[height]
-  }));
-}
-function responsiveBoxOverflowStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$overflow, (overflow) => ({
-    overflow
-  }));
-}
-const BASE_STYLE$3 = {
+const BASE_STYLE$1 = {
   "&&:not([hidden])": {
     display: "flex"
   }
 };
 function responsiveFlexStyle() {
   return [
-    BASE_STYLE$3,
+    BASE_STYLE$1,
     responsiveFlexAlignStyle,
     responsiveFlexGapStyle,
-    responsiveFlexGapXStyle,
-    responsiveFlexGapYStyle,
     responsiveFlexWrapStyle,
     responsiveFlexJustifyStyle,
     responsiveFlexDirectionStyle
@@ -759,18 +834,6 @@ function responsiveFlexGapStyle(props) {
     gap: gap ? rem(space[gap]) : void 0
   }));
 }
-function responsiveFlexGapXStyle(props) {
-  const { media, space } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$gapX, (gapX) => ({
-    columnGap: gapX ? rem(space[gapX]) : void 0
-  }));
-}
-function responsiveFlexGapYStyle(props) {
-  const { media, space } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$gapY, (gapY) => ({
-    rowGap: gapY ? rem(space[gapY]) : void 0
-  }));
-}
 function responsiveFlexWrapStyle(props) {
   const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$wrap, (wrap) => ({ flexWrap: wrap }));
@@ -783,37 +846,30 @@ function responsiveFlexDirectionStyle(props) {
   const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$direction, (direction) => ({ flexDirection: direction }));
 }
-const BASE_STYLE$2 = {
+const BASE_STYLE = {
   minWidth: 0,
   minHeight: 0
 };
 function flexItemStyle() {
-  return [BASE_STYLE$2, responsiveFlexItemStyle];
+  return [BASE_STYLE, responsiveFlexItemStyle];
 }
 function responsiveFlexItemStyle(props) {
   const { media } = theme.getTheme_v2(props.theme);
   return props.$flex ? _responsive(media, props.$flex, (flex) => ({ flex })) : EMPTY_ARRAY;
 }
-function focusRingBorderStyle(border2) {
-  return `inset 0 0 0 ${border2.width}px ${border2.color}`;
+function focusRingBorderStyle(border) {
+  return `inset 0 0 0 ${border.width}px ${border.color}`;
 }
 function focusRingStyle(opts) {
-  const { base, border: border2, focusRing } = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
+  const { base, border, focusRing } = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
   return [
     focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
-    border2 && focusRingBorderStyle(border2),
+    border && focusRingBorderStyle(border),
     focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
     focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`
   ].filter(Boolean).join(",");
 }
-const GRID_CSS = {
-  "&&:not([hidden])": {
-    display: "grid"
-  },
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: "none"
-  }
-}, GRID_AUTO_COLUMS = {
+const GRID_AUTO_COLUMS = {
   auto: "auto",
   min: "min-content",
   max: "max-content",
@@ -826,7 +882,6 @@ const GRID_CSS = {
 };
 function responsiveGridStyle() {
   return [
-    GRID_CSS,
     responsiveGridAutoFlowStyle,
     responsiveGridAutoRowsStyle,
     responsiveGridAutoColsStyle,
@@ -885,53 +940,6 @@ function responsiveGridGapYStyle(props) {
     rowGap: gapY ? rem(space[gapY]) : void 0
   }));
 }
-function responsiveGridItemStyle() {
-  return [
-    responsiveGridItemRowStyle,
-    responsiveGridItemRowStartStyle,
-    responsiveGridItemRowEndStyle,
-    responsiveGridItemColumnStyle,
-    responsiveGridItemColumnStartStyle,
-    responsiveGridItemColumnEndStyle
-  ];
-}
-const GRID_ITEM_ROW = {
-  auto: "auto",
-  full: "1 / -1"
-}, GRID_ITEM_COLUMN = {
-  auto: "auto",
-  full: "1 / -1"
-};
-function responsiveGridItemRowStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$row, (row) => typeof row == "number" ? { gridRow: `span ${row} / span ${row}` } : { gridRow: GRID_ITEM_ROW[row] });
-}
-function responsiveGridItemRowStartStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$rowStart, (rowStart) => ({
-    gridRowStart: rowStart
-  }));
-}
-function responsiveGridItemRowEndStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$rowEnd, (rowEnd) => ({ gridRowEnd: rowEnd }));
-}
-function responsiveGridItemColumnStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$column, (column) => typeof column == "number" ? { gridColumn: `span ${column} / span ${column}` } : { gridColumn: GRID_ITEM_COLUMN[column] });
-}
-function responsiveGridItemColumnStartStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$columnStart, (columnStart) => ({
-    gridColumnStart: columnStart
-  }));
-}
-function responsiveGridItemColumnEndStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$columnEnd, (columnEnd) => ({
-    gridColumnEnd: columnEnd
-  }));
-}
 function responsiveInputPaddingStyle(props) {
   const { $fontSize, $iconLeft, $iconRight, $padding, $space } = props, { font, media, space } = theme.getTheme_v2(props.theme), len = Math.max($padding.length, $space.length, $fontSize.length), _padding = [], _space = [], _fontSize = [];
   for (let i = 0; i < len; i += 1)
@@ -949,7 +957,7 @@ function responsiveInputPaddingStyle(props) {
 function responsiveInputPaddingIconRightStyle(props) {
   return responsiveInputPaddingStyle({ ...props, $iconRight: !0 });
 }
-const ROOT_STYLE = styledComponents.css`
+const ROOT_STYLE = css`
   &:not([hidden]) {
     display: flex;
   }
@@ -961,7 +969,7 @@ function textInputRootStyle() {
 }
 function textInputBaseStyle(props) {
   const { $scheme, $tone, $weight } = props, { color, font } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
+  return css`
     appearance: none;
     background: none;
     border: 0;
@@ -1039,7 +1047,7 @@ function textInputFontSizeStyle(props) {
 }
 function textInputRepresentationStyle(props) {
   const { $hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing } = props, { color, input } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
+  return css`
     --input-box-shadow: none;
 
     position: absolute;
@@ -1165,30 +1173,6 @@ function textInputRepresentationStyle(props) {
     }
   `;
 }
-function responsiveMarginStyle(props) {
-  const { theme: theme2 } = props;
-  return [
-    _getResponsiveSpace(theme2, ["margin"], props.$margin),
-    _getResponsiveSpace(theme2, ["marginLeft", "marginRight"], props.$marginX),
-    _getResponsiveSpace(theme2, ["marginTop", "marginBottom"], props.$marginY),
-    _getResponsiveSpace(theme2, ["marginTop"], props.$marginTop),
-    _getResponsiveSpace(theme2, ["marginRight"], props.$marginRight),
-    _getResponsiveSpace(theme2, ["marginBottom"], props.$marginBottom),
-    _getResponsiveSpace(theme2, ["marginLeft"], props.$marginLeft)
-  ].filter(Boolean);
-}
-function responsivePaddingStyle(props) {
-  const { theme: theme2 } = props;
-  return [
-    _getResponsiveSpace(theme2, ["padding"], props.$padding),
-    _getResponsiveSpace(theme2, ["paddingLeft", "paddingRight"], props.$paddingX),
-    _getResponsiveSpace(theme2, ["paddingTop", "paddingBottom"], props.$paddingY),
-    _getResponsiveSpace(theme2, ["paddingTop"], props.$paddingTop),
-    _getResponsiveSpace(theme2, ["paddingRight"], props.$paddingRight),
-    _getResponsiveSpace(theme2, ["paddingBottom"], props.$paddingBottom),
-    _getResponsiveSpace(theme2, ["paddingLeft"], props.$paddingLeft)
-  ].filter(Boolean);
-}
 function responsiveRadiusStyle(props) {
   const { media, radius } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$radius, (value) => {
@@ -1196,32 +1180,16 @@ function responsiveRadiusStyle(props) {
     return typeof value == "number" && (borderRadius = rem(radius[value])), value === "full" && (borderRadius = "9999px"), { borderRadius };
   });
 }
-function toBoxShadow(shadow, color) {
-  return `${shadow.map(rem).join(" ")} ${color}`;
-}
-function shadowStyle(shadow, outlineWidth = 1) {
-  if (!shadow) return EMPTY_RECORD;
-  const outline = `0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`, umbra = toBoxShadow(shadow.umbra, "var(--card-shadow-umbra-color)"), penumbra = toBoxShadow(shadow.penumbra, "var(--card-shadow-penumbra-color)"), ambient = toBoxShadow(shadow.ambient, "var(--card-shadow-ambient-color)");
-  return { boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}` };
-}
-function responsiveShadowStyle(props) {
-  const { card, media, shadow } = theme.getTheme_v2(props.theme);
-  return _responsive(
-    media,
-    props.$shadow,
-    (index) => shadowStyle(shadow[index], card.shadow.outline)
-  );
-}
 function labelBaseStyle(props) {
   const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
+  return css`
     text-transform: uppercase;
 
-    ${$accent && styledComponents.css`
+    ${$accent && css`
       color: var(--card-accent-fg-color);
     `}
 
-    ${$muted && styledComponents.css`
+    ${$muted && css`
       color: var(--card-muted-fg-color);
     `}
 
@@ -1246,7 +1214,7 @@ function labelBaseStyle(props) {
     }
   `;
 }
-const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styledComponents.styled.span`
+const Root$f = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styled.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1257,6 +1225,7 @@ const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAl
     accent,
     align,
     children: childrenProp,
+    className,
     muted = !1,
     size: size2 = 2,
     textOverflow,
@@ -1265,164 +1234,31 @@ const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAl
   } = props;
   let children = childrenProp;
   return textOverflow === "ellipsis" ? children = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow$2, { children }) : children = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), /* @__PURE__ */ jsxRuntime.jsx(
-    Root$C,
+    Root$f,
     {
       "data-ui": "Label",
       ...restProps,
-      $accent: accent,
       $align: useArrayProp(align),
-      $muted: muted,
-      $size: useArrayProp(size2),
       $weight: weight,
+      className: css$1.composeClassNames(
+        className,
+        css$1.label({
+          accent,
+          muted,
+          size: size2
+        })
+      ),
       ref,
       children
     }
   );
 });
 Label.displayName = "ForwardRef(Label)";
-const avatarStyle = {
-  root: avatarRootStyle,
-  arrow: avatarArrowStyle,
-  bgStroke: avatarBgStrokeStyle,
-  stroke: avatarStrokeStyle,
-  initials: avatarInitialsStyle,
-  image: avatarImageStyle
-};
-function avatarArrowStyle() {
-  return {
-    position: "absolute",
-    boxSizing: "border-box",
-    zIndex: 0,
-    opacity: 0,
-    transition: "all 0.2s linear",
-    transform: "rotate(-90deg) translate3d(0, 6px, 0)",
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    "& > svg": {
-      width: "11px",
-      height: "7px",
-      position: "absolute",
-      top: "-5px",
-      left: "50%",
-      transform: "translateX(-6px)",
-      "&:not([hidden])": {
-        display: "block"
-      }
-    },
-    "[data-arrow-position='inside'] > &": {
-      transform: "rotate(-90deg) translate3d(0, 6px, 0)",
-      opacity: 0
-    },
-    "[data-arrow-position='top'] > &": {
-      opacity: 1,
-      transform: "rotate(0deg)"
-    },
-    "[data-arrow-position='bottom'] > &": {
-      opacity: 1,
-      transform: "rotate(-180deg)"
-    }
-  };
-}
-function avatarRootStyle(props) {
-  const { $color } = props, { avatar } = theme.getTheme_v2(props.theme);
-  return {
-    "--avatar-bg-color": `var(--card-avatar-${$color}-bg-color)`,
-    "--avatar-fg-color": `var(--card-avatar-${$color}-fg-color)`,
-    backgroundColor: "var(--avatar-bg-color)",
-    position: "relative",
-    boxSizing: "border-box",
-    userSelect: "none",
-    boxShadow: "0 0 0 1px var(--card-bg-color)",
-    '&[data-status="inactive"]': {
-      opacity: 0.5
-    },
-    "&>svg": {
-      "&:not([hidden])": {
-        display: "block"
-      }
-    },
-    /* &:is(button) */
-    '&[data-as="button"]': {
-      WebkitFontSmoothing: "inherit",
-      appearance: "none",
-      margin: 0,
-      padding: 0,
-      border: 0,
-      font: "inherit",
-      color: "inherit",
-      outline: "none",
-      "&:focus": {
-        boxShadow: focusRingStyle({ focusRing: avatar.focusRing })
-      },
-      "&:focus:not(:focus-visible)": {
-        boxShadow: "none"
-      }
-    }
-  };
-}
-function responsiveAvatarSizeStyle(props) {
-  const { avatar, media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$size, (size2) => {
-    const avatarSize = avatar.sizes[size2] || avatar.sizes[0];
-    return {
-      width: rem(avatarSize.size),
-      height: rem(avatarSize.size),
-      borderRadius: rem(avatarSize.size / 2),
-      "&>svg": {
-        width: rem(avatarSize.size),
-        height: rem(avatarSize.size),
-        borderRadius: rem(avatarSize.size / 2)
-      }
-    };
-  });
-}
-function avatarImageStyle() {
-  return {
-    position: "relative"
-  };
-}
-function avatarInitialsStyle() {
-  return {
-    width: "100%",
-    height: "100%",
-    color: "var(--avatar-fg-color)",
-    alignItems: "center",
-    justifyContent: "center",
-    textTransform: "uppercase",
-    textAlign: "center",
-    borderRadius: "50%",
-    "&:not([hidden])": {
-      display: "flex"
-    }
-  };
-}
-function avatarBgStrokeStyle() {
-  return {
-    strokeWidth: "4px",
-    stroke: "var(--card-bg-color)"
-  };
-}
-function avatarStrokeStyle() {
-  return {
-    strokeWidth: "2px",
-    stroke: "var(--avatar-bg-color)",
-    '[data-status="editing"] &': {
-      strokeDasharray: "2 4",
-      strokeLinecap: "round"
-    }
-  };
-}
-const Root$B = styledComponents.styled.div(
-  responsiveAvatarSizeStyle,
-  avatarStyle.root
-), Arrow$1 = styledComponents.styled.div(avatarStyle.arrow), BgStroke = styledComponents.styled.ellipse(avatarStyle.bgStroke), Stroke = styledComponents.styled.ellipse(avatarStyle.stroke), Initials = styledComponents.styled.div(avatarStyle.initials), InitialsLabel = styledComponents.styled(Label)({
-  color: "inherit"
-}), Image = styledComponents.styled.svg(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
+const Avatar = react.forwardRef(function(props, ref) {
   const {
     __unstable_hideInnerStroke,
     as: asProp,
+    className,
     color = "gray",
     src,
     title,
@@ -1433,7 +1269,7 @@ const Root$B = styledComponents.styled.div(
     status = "online",
     size: sizeProp = 1,
     ...restProps
-  } = props, { avatar } = useTheme_v2(), as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(
+  } = props, { avatar: avatarTheme } = useTheme_v2(), As = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatarTheme.sizes[size2[0]] || avatarTheme.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(
     animateArrowFrom || arrowPositionProp || "inside"
   ), [imageFailed, setImageFailed] = react.useState(!1), imageId = `avatar-image-${elementId}`;
   react.useEffect(() => {
@@ -1450,28 +1286,34 @@ const Root$B = styledComponents.styled.div(
     [size2]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Root$B,
+    As,
     {
-      as,
-      "data-as": typeof as == "string" ? as : void 0,
+      "data-as": typeof As == "string" ? As : void 0,
       "data-ui": "Avatar",
       ...restProps,
       $color: color,
       $size: size2,
       "aria-label": title,
-      "data-arrow-position": arrowPosition,
+      className: css$1.composeClassNames(
+        className,
+        css$1.avatar({
+          arrowPosition,
+          color,
+          size: sizeProp
+        })
+      ),
       "data-status": status,
       ref,
       title,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Arrow$1, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: css$1.avatarArrow(), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
             d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z",
             fill: color
           }
         ) }) }),
-        !imageFailed && src && /* @__PURE__ */ jsxRuntime.jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
+        !imageFailed && src && /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: css$1.avatarImage(), viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
           /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsxRuntime.jsx(
             "image",
             {
@@ -1483,8 +1325,9 @@ const Root$B = styledComponents.styled.div(
           ) }) }),
           /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
           !__unstable_hideInnerStroke && /* @__PURE__ */ jsxRuntime.jsx(
-            BgStroke,
+            "ellipse",
             {
+              className: css$1.avatarBgStroke(),
               cx: _radius,
               cy: _radius,
               rx: _radius,
@@ -1493,8 +1336,9 @@ const Root$B = styledComponents.styled.div(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Stroke,
+            "ellipse",
             {
+              className: css$1.avatarStroke(),
               cx: _radius,
               cy: _radius,
               rx: _radius,
@@ -1503,7 +1347,7 @@ const Root$B = styledComponents.styled.div(
             }
           )
         ] }),
-        (imageFailed || !src) && initials && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Initials, { children: /* @__PURE__ */ jsxRuntime.jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) })
+        (imageFailed || !src) && initials && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: css$1.avatarInitials(), children: /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: initialsSize, style: { color: "inherit" }, weight: "medium", children: initials }) }) })
       ]
     }
   );
@@ -1522,7 +1366,7 @@ function _responsiveAvatarCounterSizeStyle(props) {
 }
 function _avatarCounterBaseStyle(props) {
   const { space } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
+  return css`
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
@@ -1540,7 +1384,7 @@ function _avatarCounterBaseStyle(props) {
     }
   `;
 }
-const Root$A = styledComponents.styled.div(
+const Root$e = styled.div(
   _responsiveAvatarCounterSizeStyle,
   _avatarCounterBaseStyle
 ), AvatarCounter = react.forwardRef(function(props, ref) {
@@ -1548,10 +1392,10 @@ const Root$A = styledComponents.styled.div(
     () => size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0),
     [size2]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$e, { $size: size2, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
 });
 AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
-const BASE_STYLES = styledComponents.css`
+const BASE_STYLES = css`
   white-space: nowrap;
 
   & > div {
@@ -1576,7 +1420,7 @@ function responsiveAvatarStackSizeStyle(props) {
     } : EMPTY_RECORD;
   });
 }
-const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
+const Root$d = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
   const {
     children: childrenProp,
     maxLength: maxLengthProp = 4,
@@ -1586,29 +1430,30 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
     () => react.Children.toArray(childrenProp).filter(react.isValidElement),
     [childrenProp]
   ), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$z, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root$d, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
     len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }),
     len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
     visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, { size: size2 }) }, String(childIndex)))
   ] });
 });
 AvatarStack.displayName = "ForwardRef(AvatarStack)";
-const Root$y = styledComponents.styled.div(
-  boxStyle,
-  flexItemStyle,
-  responsiveBoxStyle,
-  responsiveGridItemStyle,
-  responsiveMarginStyle,
-  responsivePaddingStyle
-), Box = react.forwardRef(function(props, ref) {
+const Box = react.forwardRef(function(props, ref) {
   const {
-    as: asProp = "div",
+    align,
+    as: As = "div",
+    className,
     column,
     columnStart,
     columnEnd,
+    direction,
     display = "block",
     flex,
+    gap,
+    gapX,
+    gapY,
     height,
+    inset,
+    justify,
     margin = 0,
     marginX,
     marginY,
@@ -1624,119 +1469,70 @@ const Root$y = styledComponents.styled.div(
     paddingRight,
     paddingBottom,
     paddingLeft,
+    pointerEvents,
+    position,
     row,
     rowStart,
     rowEnd,
     sizing,
+    width,
+    wrap,
     ...restProps
   } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$y,
+    As,
     {
-      "data-as": typeof asProp == "string" ? asProp : void 0,
+      "data-as": typeof As == "string" ? As : void 0,
       "data-ui": "Box",
       ...restProps,
-      $column: useArrayProp(column),
-      $columnStart: useArrayProp(columnStart),
-      $columnEnd: useArrayProp(columnEnd),
-      $display: useArrayProp(display),
-      $flex: useArrayProp(flex),
-      $height: useArrayProp(height),
-      $margin: useArrayProp(margin),
-      $marginX: useArrayProp(marginX),
-      $marginY: useArrayProp(marginY),
-      $marginTop: useArrayProp(marginTop),
-      $marginRight: useArrayProp(marginRight),
-      $marginBottom: useArrayProp(marginBottom),
-      $marginLeft: useArrayProp(marginLeft),
-      $overflow: useArrayProp(overflow),
-      $padding: useArrayProp(padding),
-      $paddingX: useArrayProp(paddingX),
-      $paddingY: useArrayProp(paddingY),
-      $paddingTop: useArrayProp(paddingTop),
-      $paddingRight: useArrayProp(paddingRight),
-      $paddingBottom: useArrayProp(paddingBottom),
-      $paddingLeft: useArrayProp(paddingLeft),
-      $row: useArrayProp(row),
-      $rowStart: useArrayProp(rowStart),
-      $rowEnd: useArrayProp(rowEnd),
-      $sizing: useArrayProp(sizing),
-      as: asProp,
+      className: css$1.composeClassNames(
+        className,
+        css$1.box({
+          align,
+          column,
+          columnStart,
+          columnEnd,
+          direction,
+          display,
+          flex,
+          gap,
+          gapX,
+          gapY,
+          height,
+          inset,
+          justify,
+          overflow,
+          margin,
+          marginX,
+          marginY,
+          marginTop,
+          marginRight,
+          marginBottom,
+          marginLeft,
+          padding,
+          paddingX,
+          paddingY,
+          paddingTop,
+          paddingRight,
+          paddingBottom,
+          paddingLeft,
+          pointerEvents,
+          position,
+          row,
+          rowStart,
+          rowEnd,
+          sizing,
+          width,
+          wrap
+        })
+      ),
       ref,
       children: props.children
     }
   );
 });
 Box.displayName = "ForwardRef(Box)";
-function textBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    min-width: 0;
-    color: var(--card-fg-color);
-
-    ${$accent && styledComponents.css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted && styledComponents.css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-      background-color: var(--card-code-bg-color);
-      color: var(--card-code-fg-color);
-    }
-
-    & a {
-      text-decoration: none;
-      border-radius: 1px;
-      color: var(--card-link-color);
-      outline: none;
-
-      @media (hover: hover) {
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      &:focus {
-        box-shadow:
-          0 0 0 1px var(--card-bg-color),
-          0 0 0 3px var(--card-focus-ring-color);
-      }
-
-      &:focus:not(:focus-visible) {
-        box-shadow: none;
-      }
-    }
-
-    & strong {
-      font-weight: ${font.text.weights.bold};
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-      color: var(--card-icon-color);
-
-      & path {
-        vector-effect: non-scaling-stroke !important;
-      }
-    }
-  `;
-}
-const Root$x = styledComponents.styled.div(
-  responsiveTextFont,
-  responsiveTextAlignStyle,
-  textBaseStyle
-), SpanWithTextOverflow$1 = styledComponents.styled.span`
+const SpanWithTextOverflow$1 = styled.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1746,7 +1542,9 @@ const Root$x = styledComponents.styled.div(
   const {
     accent = !1,
     align,
+    as: As = "div",
     children: childrenProp,
+    className,
     muted = !1,
     size: size2 = 2,
     textOverflow,
@@ -1755,282 +1553,86 @@ const Root$x = styledComponents.styled.div(
   } = props;
   let children = childrenProp;
   return textOverflow === "ellipsis" ? children = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow$1, { children }) : children = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), /* @__PURE__ */ jsxRuntime.jsx(
-    Root$x,
+    As,
     {
       "data-ui": "Text",
       ...restProps,
-      $accent: accent,
       $align: useArrayProp(align),
-      $muted: muted,
       ref,
-      $size: useArrayProp(size2),
-      $weight: weight,
+      className: css$1.composeClassNames(
+        className,
+        css$1.text({
+          accent,
+          muted,
+          size: size2,
+          weight
+        })
+      ),
       children
     }
   );
 });
 Text.displayName = "ForwardRef(Text)";
-function badgeStyle(props) {
-  const { $tone } = props;
-  return {
-    "--card-bg-color": `var(--card-badge-${$tone}-bg-color)`,
-    "--card-fg-color": `var(--card-badge-${$tone}-fg-color)`,
-    backgroundColor: "var(--card-bg-color)",
-    cursor: "default",
-    "&:not([hidden])": {
-      display: "inline-block",
-      verticalAlign: "top"
-    }
-  };
-}
-const Root$w = styledComponents.styled(Box)(
-  responsiveRadiusStyle,
-  badgeStyle
-), Badge = react.forwardRef(function(props, ref) {
+const Badge = react.forwardRef(function(props, ref) {
   const {
     children,
+    className,
+    display = "inline-block",
     fontSize: fontSize2 = 1,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     mode: _deprecated_mode,
     padding = 1,
-    radius = "full",
+    radius = 2,
     tone = "default",
     ...restProps
   } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$w,
+    Box,
     {
       "data-ui": "Badge",
       ...restProps,
-      $tone: tone,
-      $radius: useArrayProp(radius),
-      padding: useArrayProp(padding),
+      className: css$1.composeClassNames(
+        className,
+        css$1.badge({
+          radius,
+          tone
+        })
+      ),
+      display,
+      padding,
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children })
     }
   );
 });
 Badge.displayName = "ForwardRef(Badge)";
-const Root$v = styledComponents.styled(Box)(
+const Root$c = styled(Box)(
   flexItemStyle,
   responsiveFlexStyle
 ), Flex = react.forwardRef(function(props, ref) {
-  const { align, as, direction = "row", gap, gapX, gapY, justify, wrap, ...restProps } = props;
+  const { as, direction = "row", ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$v,
+    Root$c,
     {
       "data-ui": "Flex",
       ...restProps,
-      $align: useArrayProp(align),
-      $direction: useArrayProp(direction),
-      $gap: useArrayProp(gap),
-      $gapX: useArrayProp(gapX),
-      $gapY: useArrayProp(gapY),
-      $justify: useArrayProp(justify),
-      $wrap: useArrayProp(wrap),
+      direction,
+      display: "flex",
       forwardedAs: as,
       ref
     }
   );
 });
 Flex.displayName = "ForwardRef(Flex)";
-const rotate$1 = styledComponents.keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-`, Root$u = styledComponents.styled(Text)`
-  & > span > svg {
-    animation: ${rotate$1} 500ms linear infinite;
-  }
-`, Spinner = react.forwardRef(function(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$u, { "data-ui": "Spinner", ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}) });
+const Spinner = react.forwardRef(function(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Text, { "data-ui": "Spinner", ...props, className: css$1.spinner(), ref, children: /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}) });
 });
 Spinner.displayName = "ForwardRef(Spinner)";
-function _cardColorStyle(base, color, checkered = !1) {
-  return {
-    // from base
-    "--card-backdrop-color": base.backdrop,
-    "--card-focus-ring-color": base.focusRing,
-    "--card-shadow-outline-color": base.shadow.outline,
-    "--card-shadow-umbra-color": base.shadow.umbra,
-    "--card-shadow-penumbra-color": base.shadow.penumbra,
-    "--card-shadow-ambient-color": base.shadow.ambient,
-    // from state
-    "--card-accent-fg-color": color.accent.fg,
-    "--card-avatar-gray-bg-color": color.avatar.gray.bg,
-    "--card-avatar-gray-fg-color": color.avatar.gray.fg,
-    "--card-avatar-blue-bg-color": color.avatar.blue.bg,
-    "--card-avatar-blue-fg-color": color.avatar.blue.fg,
-    "--card-avatar-purple-bg-color": color.avatar.purple.bg,
-    "--card-avatar-purple-fg-color": color.avatar.purple.fg,
-    "--card-avatar-magenta-bg-color": color.avatar.magenta.bg,
-    "--card-avatar-magenta-fg-color": color.avatar.magenta.fg,
-    "--card-avatar-red-bg-color": color.avatar.red.bg,
-    "--card-avatar-red-fg-color": color.avatar.red.fg,
-    "--card-avatar-orange-bg-color": color.avatar.orange.bg,
-    "--card-avatar-orange-fg-color": color.avatar.orange.fg,
-    "--card-avatar-yellow-bg-color": color.avatar.yellow.bg,
-    "--card-avatar-yellow-fg-color": color.avatar.yellow.fg,
-    "--card-avatar-green-bg-color": color.avatar.green.bg,
-    "--card-avatar-green-fg-color": color.avatar.green.fg,
-    "--card-avatar-cyan-bg-color": color.avatar.cyan.bg,
-    "--card-avatar-cyan-fg-color": color.avatar.cyan.fg,
-    "--card-bg-color": color.bg,
-    "--card-bg-image": checkered ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)` : void 0,
-    "--card-border-color": color.border,
-    "--card-badge-default-bg-color": color.badge.default.bg,
-    "--card-badge-default-dot-color": color.badge.default.dot,
-    "--card-badge-default-fg-color": color.badge.default.fg,
-    "--card-badge-default-icon-color": color.badge.default.icon,
-    "--card-badge-primary-bg-color": color.badge.primary.bg,
-    "--card-badge-primary-dot-color": color.badge.primary.dot,
-    "--card-badge-primary-fg-color": color.badge.primary.fg,
-    "--card-badge-primary-icon-color": color.badge.primary.icon,
-    "--card-badge-positive-bg-color": color.badge.positive.bg,
-    "--card-badge-positive-dot-color": color.badge.positive.dot,
-    "--card-badge-positive-fg-color": color.badge.positive.fg,
-    "--card-badge-positive-icon-color": color.badge.positive.icon,
-    "--card-badge-caution-bg-color": color.badge.caution.bg,
-    "--card-badge-caution-dot-color": color.badge.caution.dot,
-    "--card-badge-caution-fg-color": color.badge.caution.fg,
-    "--card-badge-caution-icon-color": color.badge.caution.icon,
-    "--card-badge-critical-bg-color": color.badge.critical.bg,
-    "--card-badge-critical-dot-color": color.badge.critical.dot,
-    "--card-badge-critical-fg-color": color.badge.critical.fg,
-    "--card-badge-critical-icon-color": color.badge.critical.icon,
-    "--card-badge-prospect-bg-color": color.badge.prospect.bg,
-    "--card-badge-prospect-dot-color": color.badge.prospect.dot,
-    "--card-badge-prospect-fg-color": color.badge.prospect.fg,
-    "--card-badge-prospect-icon-color": color.badge.prospect.icon,
-    "--card-badge-explore-bg-color": color.badge.explore.bg,
-    "--card-badge-explore-dot-color": color.badge.explore.dot,
-    "--card-badge-explore-fg-color": color.badge.explore.fg,
-    "--card-badge-explore-icon-color": color.badge.explore.icon,
-    "--card-code-bg-color": color.code.bg,
-    "--card-code-fg-color": color.code.fg,
-    "--card-fg-color": color.fg,
-    "--card-icon-color": color.icon,
-    "--card-kbd-bg-color": color.kbd.bg,
-    "--card-kbd-border-color": color.kbd.border,
-    "--card-kbd-fg-color": color.kbd.fg,
-    "--card-link-fg-color": color.link.fg,
-    "--card-muted-bg-color": color.muted.bg,
-    "--card-muted-fg-color": color.muted.fg,
-    "--card-skeleton-color-from": color.skeleton.from,
-    "--card-skeleton-color-to": color.skeleton.to,
-    // deprecated variables (kept for legacy)
-    "--card-bg2-color": color.muted.bg,
-    "--card-link-color": color.link.fg,
-    "--card-hairline-soft-color": color.border,
-    "--card-hairline-hard-color": color.border
-  };
-}
-function buttonBaseStyles(props) {
-  const { $width } = props, { style } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    ${style?.button};
-
-    -webkit-font-smoothing: inherit;
-    appearance: none;
-    display: inline-flex;
-    align-items: center;
-    font: inherit;
-    border: 0;
-    outline: none;
-    user-select: none;
-    text-decoration: none;
-    border: 0;
-    box-sizing: border-box;
-    padding: 0;
-    overflow: hidden;
-    margin: 0;
-    text-align: left;
-    position: relative;
-    vertical-align: top;
-
-    ${$width === "fill" && styledComponents.css`
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    `}
-
-    & > span {
-      display: block;
-      flex: 1;
-      min-width: 0;
-      border-radius: inherit;
-    }
-
-    &::-moz-focus-inner {
-      border: 0;
-      padding: 0;
-    }
-  `;
-}
-function combineBoxShadow(...boxShadows) {
-  return boxShadows.filter(Boolean).join(",");
-}
-function buttonColorStyles(props) {
-  const { $mode } = props, { button, color: baseColor, style } = theme.getTheme_v2(props.theme), shadow = props.$mode === "ghost", mode = baseColor.button[$mode] || baseColor.button.default, color = mode[props.$tone] || mode.default, border2 = {
-    width: button.border.width,
-    color: "var(--card-border-color)"
-  }, defaultBoxShadow = void 0;
-  return [
-    _cardColorStyle(baseColor, color.enabled),
-    {
-      backgroundColor: "var(--card-bg-color)",
-      color: "var(--card-fg-color)",
-      boxShadow: focusRingBorderStyle(border2),
-      '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
-      "&:not([data-disabled='true'])": {
-        boxShadow: combineBoxShadow(
-          focusRingBorderStyle(border2),
-          shadow ? defaultBoxShadow : void 0
-        ),
-        "&:focus": {
-          boxShadow: focusRingStyle({
-            base: baseColor,
-            border: { width: 2, color: baseColor.bg },
-            focusRing: button.focusRing
-          })
-        },
-        "&:focus:not(:focus-visible)": {
-          boxShadow: combineBoxShadow(
-            focusRingBorderStyle(border2),
-            shadow ? defaultBoxShadow : void 0
-          )
-        },
-        "@media (hover: hover)": {
-          "&:hover": _cardColorStyle(baseColor, color.hovered),
-          "&:active": _cardColorStyle(baseColor, color.pressed),
-          "&[data-hovered]": _cardColorStyle(baseColor, color.hovered)
-        },
-        "&[data-selected]": _cardColorStyle(baseColor, color.pressed)
-      }
-    },
-    style?.button?.root
-  ].filter(Boolean);
-}
-const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styledComponents.styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--card-bg-color);
-  border-radius: inherit;
-  z-index: 1;
-  box-shadow: inherit;
-`, Button = react.forwardRef(function(props, ref) {
+const Button = react.forwardRef(function(props, ref) {
   const {
+    as: As = "button",
     children,
+    className,
     disabled,
     fontSize: fontSize2 = 1,
     icon: IconComponent,
@@ -2057,7 +1659,7 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
     muted = !1,
     width,
     ...restProps
-  } = props, { button } = useTheme_v2(), justify = useArrayProp(justifyProp), padding = useArrayProp(paddingProp), paddingX = useArrayProp(paddingXProp), paddingY = useArrayProp(paddingYProp), paddingTop = useArrayProp(paddingTopProp), paddingBottom = useArrayProp(paddingBottomProp), paddingLeft = useArrayProp(paddingLeftProp), paddingRight = useArrayProp(paddingRightProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), boxProps = react.useMemo(
+  } = props, { button: buttonTheme } = useTheme_v2(), justify = useArrayProp(justifyProp), padding = useArrayProp(paddingProp), paddingX = useArrayProp(paddingXProp), paddingY = useArrayProp(paddingYProp), paddingTop = useArrayProp(paddingTopProp), paddingBottom = useArrayProp(paddingBottomProp), paddingLeft = useArrayProp(paddingLeftProp), paddingRight = useArrayProp(paddingRightProp), space = useArrayProp(spaceProp), boxProps = react.useMemo(
     () => ({
       // flex: 1,
       padding,
@@ -2071,27 +1673,32 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
     [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Root$t,
+    As,
     {
       "data-ui": "Button",
       ...restProps,
-      $mode: mode,
-      $radius: radius,
-      $tone: tone,
+      className: css$1.composeClassNames(
+        className,
+        css$1.button({
+          mode,
+          radius: radiusProp,
+          tone,
+          width
+        })
+      ),
       "data-disabled": !!(loading || disabled),
       "data-selected": selected ? "" : void 0,
       disabled: !!(loading || disabled),
       ref,
       type,
-      $width: width,
       children: [
-        !!loading && /* @__PURE__ */ jsxRuntime.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }),
+        !!loading && /* @__PURE__ */ jsxRuntime.jsx(Box, { align: "center", className: css$1.buttonLoadingBox(), display: "flex", justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: fontSize2 }) }),
         (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
           IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { as: "span", size: fontSize2, style: { flex: "none" }, children: [
             react.isValidElement(IconComponent) && IconComponent,
             ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
           ] }),
-          text && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", children: /* @__PURE__ */ jsxRuntime.jsx(
+          text && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
             Text,
             {
               as: "span",
@@ -2099,7 +1706,7 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
               align: textAlign,
               size: fontSize2,
               textOverflow,
-              weight: textWeight ?? button.textWeight,
+              weight: textWeight ?? buttonTheme.textWeight,
               children: text
             }
           ) }),
@@ -2114,299 +1721,60 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
   );
 });
 Button.displayName = "ForwardRef(Button)";
-function cardStyle(props) {
-  return [cardBaseStyle(props), cardColorStyle(props)];
-}
-function cardBaseStyle(props) {
-  const { $checkered } = props, { space } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    ${$checkered && styledComponents.css`
-      background-size: ${space[3]}px ${space[3]}px;
-      background-position: 50% 50%;
-      background-image: var(--card-bg-image);
-    `}
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      outline: none;
-      text-decoration: none;
-    }
-
-    /* &:is(pre) */
-    &[data-as='pre'] {
-      font: inherit;
-    }
-  `;
-}
-function cardColorStyle(props) {
-  const { $checkered, $focusRing, $muted } = props, { card, color, style } = theme.getTheme_v2(props.theme), border2 = { width: card.border.width, color: "var(--card-border-color)" };
-  return styledComponents.css`
-    color-scheme: ${color._dark ? "dark" : "light"};
-
-    ${_cardColorStyle(color, color, $checkered)}
-
-    background-color: ${$muted ? "var(--card-muted-bg-color)" : "var(--card-bg-color)"};
-    color: var(--card-fg-color);
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      --card-focus-ring-box-shadow: none;
-
-      cursor: default;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &:disabled {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
-      }
-
-      &:not(:disabled) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({ base: color, border: border2, focusRing: card.focusRing }) : void 0};
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      cursor: pointer;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &[data-disabled] {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({ base: color, border: border2, focusRing: card.focusRing }) : void 0};
-        }
-      }
-    }
-
-    ${style?.card?.root}
-  `;
-}
-const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
+const RootCardContext = react.createContext(null), Card = react.forwardRef(function(props, ref) {
   const {
-    __unstable_checkered: checkered = !1,
-    __unstable_focusRing: focusRing = !1,
+    // __unstable_checkered: checkered = false,
+    // __unstable_focusRing: focusRing = false,
     as: asProp,
-    border: border2,
-    borderTop: borderTop2,
-    borderRight: borderRight2,
-    borderBottom: borderBottom2,
-    borderLeft: borderLeft2,
-    muted,
+    border,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    className,
+    // muted,
     pressed,
     radius = 0,
     scheme,
     selected,
     shadow,
+    style,
     tone: toneProp = "default",
     ...restProps
-  } = props, as = ReactIs.isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Root$s,
+  } = props, as = ReactIs.isValidElementType(asProp) ? asProp : "div", rootCard = react.useContext(RootCardContext), rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, node = /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
     {
       "data-as": typeof as == "string" ? as : void 0,
       "data-scheme": rootTheme.scheme,
       "data-ui": "Card",
       "data-tone": tone,
       ...restProps,
-      $border: useArrayProp(border2),
-      $borderTop: useArrayProp(borderTop2),
-      $borderRight: useArrayProp(borderRight2),
-      $borderBottom: useArrayProp(borderBottom2),
-      $borderLeft: useArrayProp(borderLeft2),
-      $checkered: checkered,
-      $focusRing: focusRing,
-      $muted: muted,
-      $radius: useArrayProp(radius),
-      $shadow: useArrayProp(shadow),
-      $tone: tone,
-      "data-checkered": checkered ? "" : void 0,
+      as,
+      className: css$1.composeClassNames(
+        className,
+        rootCard ? void 0 : "root",
+        css$1.card({
+          border,
+          borderTop,
+          borderRight,
+          borderBottom,
+          borderLeft,
+          radius,
+          shadow
+        })
+      ),
       "data-pressed": pressed ? "" : void 0,
+      "data-test": rootCard ? void 0 : "",
       "data-selected": selected ? "" : void 0,
-      forwardedAs: as,
       ref,
-      selected
+      selected,
+      style
     }
   ) });
+  return rootCard ? node : /* @__PURE__ */ jsxRuntime.jsx(RootCardContext.Provider, { value: { renderedVars: !0 }, children: node });
 });
 Card.displayName = "ForwardRef(Card)";
-function checkboxBaseStyles() {
-  return styledComponents.css`
-    position: relative;
-    display: inline-block;
-  `;
-}
-function inputElementStyles(props) {
-  const { color, input, radius } = theme.getTheme_v2(props.theme), { focusRing } = input.checkbox;
-  return styledComponents.css`
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    outline: none;
-    opacity: 0;
-    z-index: 1;
-    padding: 0;
-    margin: 0;
-
-    & + span {
-      position: relative;
-      display: block;
-      height: ${rem(input.checkbox.size)};
-      width: ${rem(input.checkbox.size)};
-      box-sizing: border-box;
-      box-shadow: ${focusRingBorderStyle({
-    color: color.input.default.enabled.border,
-    width: input.border.width
-  })};
-      border-radius: ${rem(radius[2])};
-      line-height: 1;
-      background-color: ${color.input.default.enabled.bg};
-
-      & > svg {
-        display: block;
-        position: absolute;
-        opacity: 0;
-        height: 100%;
-        width: 100%;
-
-        & > path {
-          vector-effect: non-scaling-stroke;
-          stroke-width: 1.5px !important;
-        }
-      }
-    }
-
-    &:checked + span {
-      background: ${color.input.default.enabled.fg};
-      box-shadow: ${focusRingBorderStyle({
-    color: color.input.default.enabled.fg,
-    width: input.border.width
-  })};
-      color: ${color.input.default.enabled.bg};
-    }
-
-    /* focus */
-    &:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({ focusRing })};
-    }
-
-    /* focus when checked - uses a different offset */
-    &:not(:disabled):focus:focus-visible&:checked + span {
-      box-shadow: ${focusRingStyle({ focusRing: { width: 1, offset: 1 } })};
-    }
-
-    &[data-error] + span {
-      background-color: ${color.input.invalid.enabled.border};
-      box-shadow: ${focusRingBorderStyle({
-    width: input.border.width,
-    color: color.input.invalid.enabled.muted.bg
-  })};
-      color: ${color.input.default.disabled.fg};
-    }
-    &[data-error]&:checked + span {
-      background-color: ${color.input.invalid.enabled.muted.bg};
-      color: ${color.input.default.enabled.bg};
-    }
-    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({
-    border: { width: input.border.width, color: color.input.invalid.readOnly.muted.bg },
-    focusRing: { width: 1, offset: 1 }
-  })};
-    }
-
-    &:disabled + span {
-      background-color: ${color.input.default.disabled.bg};
-      box-shadow: ${focusRingBorderStyle({
-    width: input.border.width,
-    color: color.input.default.disabled.border
-  })};
-      color: ${color.input.default.disabled.fg};
-    }
-    &:disabled&:checked + span {
-      background-color: ${color.input.default.disabled.muted.bg};
-    }
-
-    &[data-read-only] + span {
-      background-color: ${color.input.default.readOnly.bg};
-      box-shadow: ${focusRingBorderStyle({
-    width: input.border.width,
-    color: color.input.default.readOnly.border
-  })};
-      color: ${color.input.default.readOnly.fg};
-    }
-
-    &[data-read-only]&:checked + span {
-      background-color: ${color.input.default.readOnly.muted.bg};
-    }
-
-    &:checked + span > svg:first-child {
-      opacity: 1;
-    }
-    &:indeterminate + span > svg:last-child {
-      opacity: 1;
-    }
-  `;
-}
-const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styledComponents.styled.input(inputElementStyles), Checkbox = react.forwardRef(function(props, forwardedRef) {
+const Checkbox = react.forwardRef(function(props, forwardedRef) {
   const {
     checked,
     className,
@@ -2422,14 +1790,15 @@ const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styled
     () => ref.current
   ), react.useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, [indeterminate]), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$r, { className, "data-ui": "Checkbox", style, children: [
+  }, [indeterminate]), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs("span", { className: css$1.composeClassNames(className, css$1.checkbox()), "data-ui": "Checkbox", style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Input$5,
+      "input",
       {
         "data-read-only": !disabled && readOnly ? "" : void 0,
         "data-error": customValidity ? "" : void 0,
         ...restProps,
         checked,
+        className: css$1.composeClassNames(className, css$1.checkboxInput()),
         disabled: disabled || readOnly,
         type: "checkbox",
         readOnly,
@@ -2443,120 +1812,49 @@ const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styled
   ] });
 });
 Checkbox.displayName = "ForwardRef(Checkbox)";
-function codeSyntaxHighlightingStyle({ theme: theme$1 }) {
+const Code = react.forwardRef(function(props, ref) {
   const {
-    color: { syntax: color }
-  } = theme.getTheme_v2(theme$1);
-  return {
-    "&.atrule": { color: color.atrule },
-    "&.attr-name": { color: color.attrName },
-    "&.attr-value": { color: color.attrValue },
-    "&.attribute": { color: color.attribute },
-    "&.boolean": { color: color.boolean },
-    "&.builtin": { color: color.builtin },
-    "&.cdata": { color: color.cdata },
-    "&.char": { color: color.char },
-    "&.class": { color: color.class },
-    "&.class-name": { color: color.className },
-    "&.comment": { color: color.comment },
-    "&.constant": { color: color.constant },
-    "&.deleted": { color: color.deleted },
-    "&.doctype": { color: color.doctype },
-    "&.entity": { color: color.entity },
-    "&.function": { color: color.function },
-    "&.hexcode": { color: color.hexcode },
-    "&.id": { color: color.id },
-    "&.important": { color: color.important },
-    "&.inserted": { color: color.inserted },
-    "&.keyword": { color: color.keyword },
-    "&.number": { color: color.number },
-    "&.operator": { color: color.operator },
-    "&.prolog": { color: color.prolog },
-    "&.property": { color: color.property },
-    "&.pseudo-class": { color: color.pseudoClass },
-    "&.pseudo-element": { color: color.pseudoElement },
-    "&.punctuation": { color: color.punctuation },
-    "&.regex": { color: color.regex },
-    "&.selector": { color: color.selector },
-    "&.string": { color: color.string },
-    "&.symbol": { color: color.symbol },
-    "&.tag": { color: color.tag },
-    "&.unit": { color: color.unit },
-    "&.url": { color: color.url },
-    "&.variable": { color: color.variable }
-  };
-}
-function codeBaseStyle() {
-  return styledComponents.css`
-    color: var(--card-code-fg-color);
-
-    & code {
-      font-family: inherit;
-
-      &.refractor .token {
-        ${codeSyntaxHighlightingStyle}
-      }
-    }
-
-    & a {
-      color: inherit;
-      text-decoration: underline;
-      border-radius: 1px;
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
+    as: As = "pre",
+    children,
+    className,
+    language: languageProp,
+    size: size2 = 2,
+    weight,
+    ...restProps
+  } = props, language = typeof languageProp == "string" ? languageProp : void 0, registered = language ? Refractor__default.default.hasLanguage(language) : !1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    As,
+    {
+      "data-ui": "Code",
+      ...restProps,
+      className: css$1.composeClassNames(className, css$1.code({ size: size2, weight })),
+      ref,
+      children: [
+        !(language && registered) && /* @__PURE__ */ jsxRuntime.jsx("code", { children }),
+        language && registered && /* @__PURE__ */ jsxRuntime.jsx(Refractor__default.default, { inline: !0, language, value: String(children) })
+      ]
     }
-  `;
-}
-const Root$q = styledComponents.styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
-  const { children, language: languageProp, size: size2 = 2, weight, ...restProps } = props, language = typeof languageProp == "string" ? languageProp : void 0, registered = language ? Refractor__default.default.hasLanguage(language) : !1;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$q, { "data-ui": "Code", ...restProps, $size: useArrayProp(size2), $weight: weight, ref, children: [
-    !(language && registered) && /* @__PURE__ */ jsxRuntime.jsx("code", { children }),
-    language && registered && /* @__PURE__ */ jsxRuntime.jsx(Refractor__default.default, { inline: !0, language, value: String(children) })
-  ] });
+  );
 });
 Code.displayName = "ForwardRef(Code)";
-const BASE_STYLE$1 = {
-  width: "100%",
-  margin: "0 auto"
-};
-function containerBaseStyle() {
-  return BASE_STYLE$1;
-}
-function responsiveContainerWidthStyle(props) {
-  const { container, media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$width, (val) => ({
-    maxWidth: val === "auto" ? "none" : rem(container[val])
-  }));
-}
-const Root$p = styledComponents.styled(Box)(
-  containerBaseStyle,
-  responsiveContainerWidthStyle
-), Container = react.forwardRef(function(props, ref) {
-  const { as, width = 2, ...restProps } = props;
+const Container = react.forwardRef(function(props, ref) {
+  const { as, className, width = 2, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$p,
+    Box,
     {
       "data-ui": "Container",
       ...restProps,
-      $width: useArrayProp(width),
-      forwardedAs: as,
+      as,
+      className: css$1.composeClassNames(className, css$1.container({ width })),
       ref
     }
   );
 });
 Container.displayName = "ForwardRef(Container)";
-const Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
+const Root$b = styled(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
   const { as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$o,
+    Root$b,
     {
       "data-as": typeof as == "string" ? as : void 0,
       "data-ui": "Grid",
@@ -2569,6 +1867,7 @@ const Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.f
       $gapX: useArrayProp(gapX),
       $gapY: useArrayProp(gapY),
       $rows: useArrayProp(rows),
+      display: "grid",
       forwardedAs: as,
       ref,
       children
@@ -2576,61 +1875,7 @@ const Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.f
   );
 });
 Grid.displayName = "ForwardRef(Grid)";
-function headingBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    ${$accent && styledComponents.css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted && styledComponents.css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-    }
-
-    & a {
-      text-decoration: none;
-      border-radius: 1px;
-      color: var(--card-link-color);
-      outline: none;
-
-      @media (hover: hover) {
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      &:focus {
-        box-shadow:
-          0 0 0 1px var(--card-bg-color),
-          0 0 0 3px var(--card-focus-ring-color);
-      }
-
-      &:focus:not(:focus-visible) {
-        box-shadow: none;
-      }
-    }
-
-    & strong {
-      font-weight: ${font.heading.weights.bold};
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-    }
-  `;
-}
-const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styledComponents.styled.span`
+const SpanWithTextOverflow = styled.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -2640,7 +1885,9 @@ const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlign
   const {
     accent = !1,
     align,
+    as: As = "div",
     children: childrenProp,
+    className,
     muted = !1,
     size: size2 = 2,
     textOverflow,
@@ -2649,81 +1896,71 @@ const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlign
   } = props;
   let children = childrenProp;
   return textOverflow === "ellipsis" && (children = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow, { children })), /* @__PURE__ */ jsxRuntime.jsx(
-    Root$n,
+    As,
     {
       "data-ui": "Heading",
       ...restProps,
-      $accent: accent,
       $align: useArrayProp(align),
-      $muted: muted,
-      $size: useArrayProp(size2),
-      $weight: weight,
+      className: css$1.composeClassNames(
+        className,
+        css$1.heading({
+          accent,
+          muted,
+          size: size2,
+          weight
+        })
+      ),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx("span", { children })
     }
   );
 });
 Heading.displayName = "ForwardRef(Heading)";
-function inlineBaseStyle() {
-  return {
-    lineHeight: 0,
-    "&&:not([hidden])": {
-      display: "block"
-    },
-    "& > div": {
-      display: "inline-block",
-      verticalAlign: "middle"
-    }
-  };
-}
-function inlineSpaceStyle(props) {
-  const { media, space } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$space, (spaceIndex) => {
-    const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex]);
-    return {
-      margin: `-${_space} 0 0 -${_space}`,
-      "& > div": { padding: `${_space} 0 0 ${_space}` }
-    };
-  });
-}
-const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
+const Inline = react.forwardRef(function(props, ref) {
   const { as, children: childrenProp, space, ...restProps } = props, children = react.useMemo(
-    () => react.Children.map(childrenProp, (child) => child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child })),
+    () => react.Children.map(childrenProp, (child) => child && /* @__PURE__ */ jsxRuntime.jsx(Box, { maxWidth: "fill", children: child })),
     [childrenProp]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$m,
+    Box,
     {
       "data-ui": "Inline",
       ...restProps,
-      $space: useArrayProp(space),
-      forwardedAs: as,
+      align: "center",
+      as,
+      display: "flex",
+      gap: space,
       ref,
+      wrap: "wrap",
       children
     }
   );
 });
 Inline.displayName = "ForwardRef(Inline)";
-function kbdStyle() {
-  return styledComponents.css`
-    --card-bg-color: var(--card-kbd-bg-color);
-    --card-border-color: var(--card-kbd-border-color);
-    --card-fg-color: var(--card-kbd-fg-color);
-
-    box-shadow: inset 0 0 0 1px var(--card-border-color);
-    background: var(--card-bg-color);
-    font: inherit;
-
-    vertical-align: top;
-
-    &:not([hidden]) {
-      display: inline-block;
+const KBD = react.forwardRef(function(props, ref) {
+  const {
+    as = "kbd",
+    children,
+    className,
+    display = "inline-block",
+    fontSize: fontSize2 = 0,
+    padding = 1,
+    radius = 2,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      "data-ui": "KBD",
+      ...restProps,
+      as,
+      className: css$1.composeClassNames(className, css$1.kbd({ radius })),
+      display,
+      padding,
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children })
     }
-  `;
-}
-const Root$l = styledComponents.styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
-  const { children, fontSize: fontSize2 = 0, padding = 1, radius = 2, ...restProps } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: useArrayProp(radius), ref, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }) }) });
+  );
 });
 KBD.displayName = "ForwardRef(KBD)";
 const origin = {
@@ -2783,8 +2020,8 @@ function getRoundedCommands(points) {
 function compileCommands(cmds) {
   return cmds.map((n, idx) => n.type === "point" ? `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}` : n.type === "curve" ? `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}` : "").join(" ");
 }
-const Root$k = styledComponents.styled.div(
-  ({ $w: w }) => styledComponents.css`
+const Root$a = styled.div(
+  ({ $w: w }) => css`
     position: absolute;
     width: ${w}px;
     height: ${w}px;
@@ -2831,9 +2068,9 @@ const Root$k = styledComponents.styled.div(
       }
     }
   `
-), StrokePath = styledComponents.styled.path`
+), StrokePath = styled.path`
   stroke: var(--card-shadow-outline-color);
-`, ShapePath = styledComponents.styled.path`
+`, ShapePath = styled.path`
   fill: var(--card-bg-color);
 `, Arrow = react.forwardRef(function(props, ref) {
   const { width: w, height: h, radius = 0, ...restProps } = props, { card } = useTheme_v2(), strokeWidth = card.shadow.outline, center = w / 2, points = [
@@ -2861,7 +2098,7 @@ const Root$k = styledComponents.styled.div(
       y: 0
     }
   ], cmds = getRoundedCommands(points), path = compileCommands(cmds), strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`;
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$k, { ...restProps, $w: w, ref, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: w, height: w, viewBox: `0 0 ${w} ${w}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$a, { ...restProps, $w: w, ref, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: w, height: w, viewBox: `0 0 ${w} ${w}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: strokeWidth, width: w, height: w, fill: "white" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(StrokePath, { d: strokePath, mask: "url(#stroke-mask)", strokeWidth: strokeWidth * 2 }),
     /* @__PURE__ */ jsxRuntime.jsx(ShapePath, { d: fillPath })
@@ -3075,8 +2312,15 @@ function LayerProvider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children });
 }
 LayerProvider.displayName = "LayerProvider";
-const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
-  const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = react.useRef(null), ref = react.useRef(null), isTopLayerRef = react.useRef(isTopLayer);
+const LayerChildren = react.forwardRef(function(props, forwardedRef) {
+  const {
+    children,
+    onActivate,
+    onFocus,
+    position = "relative",
+    style = EMPTY_RECORD,
+    ...restProps
+  } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = react.useRef(null), ref = react.useRef(null), isTopLayerRef = react.useRef(isTopLayer);
   react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
     isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({ activeElement: lastFocusedRef.current }), isTopLayerRef.current = isTopLayer;
   }, [isTopLayer, onActivate]);
@@ -3088,7 +2332,18 @@ const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChild
     },
     [isTopLayer, onFocus]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$j, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: { ...style, zIndex }, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      "data-ui": "Layer",
+      ...restProps,
+      onFocus: handleFocus,
+      position,
+      ref,
+      style: { ...style, zIndex },
+      children
+    }
+  );
 }), Layer = react.forwardRef(function(props, ref) {
   const { children, zOffset = 1, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(LayerChildren, { ...restProps, ref, children }) });
@@ -3117,7 +2372,7 @@ function Portal(props) {
 }
 Portal.displayName = "Portal";
 function PortalProvider(props) {
-  const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(
+  const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements2 = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(
     emptySubscribe,
     () => document.body,
     () => null
@@ -3125,8 +2380,8 @@ function PortalProvider(props) {
     version: 0,
     boundaryElement: boundaryElement || null,
     element: element || fallbackElement,
-    elements
-  }), [boundaryElement, element, elements, fallbackElement]);
+    elements: elements2
+  }), [boundaryElement, element, elements2, fallbackElement]);
   return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children });
 }
 PortalProvider.displayName = "PortalProvider";
@@ -3142,7 +2397,7 @@ function _isEqual(objA, objB) {
   const keysA = Object.keys(objA), keysB = Object.keys(objB);
   return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
 }
-const Root$i = styledComponents.styled.div`
+const Root$9 = styled.div`
   display: block;
   width: 0;
   height: 0;
@@ -3151,12 +2406,12 @@ const Root$i = styledComponents.styled.div`
   overflow: clip;
 `, SrOnly = react.forwardRef(function(props, ref) {
   const { as, children } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$i, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$9, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children });
 });
 SrOnly.displayName = "ForwardRef(SrOnly)";
-const Root$h = styledComponents.styled.div`
+const Root$8 = styled.div`
   position: relative;
-`, ItemWrapper = styledComponents.styled.div`
+`, ItemWrapper = styled.div`
   position: absolute;
   left: 0;
   right: 0;
@@ -3202,7 +2457,7 @@ const Root$h = styledComponents.styled.div`
     const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
     return /* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { style: { top: itemIndex * (itemHeight + space[gap]) }, children: node }, key2);
   }), [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]), wrapperStyle = react.useMemo(() => ({ height }), [height]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$h, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$8, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
 });
 VirtualList.displayName = "ForwardRef(VirtualList)";
 const DEFAULT_POPOVER_DISTANCE = 4, DEFAULT_POPOVER_PADDING = 4, DEFAULT_POPOVER_ARROW_WIDTH = 19, DEFAULT_POPOVER_ARROW_HEIGHT = 8, DEFAULT_POPOVER_ARROW_RADIUS = 2, DEFAULT_POPOVER_MARGINS = [0, 0, 0, 0], DEFAULT_FALLBACK_PLACEMENTS$1 = {
@@ -3224,7 +2479,7 @@ function size(options) {
   return {
     name: "@sanity/ui/size",
     async fn(args) {
-      const { elements, placement, platform, rects } = args, { floating, reference } = rects, overflow = await reactDom$1.detectOverflow(args, {
+      const { elements: elements2, placement, platform, rects } = args, { floating, reference } = rects, overflow = await reactDom$1.detectOverflow(args, {
         altBoundary: !0,
         boundary: options.boundaryElement || void 0,
         elementContext: "floating",
@@ -3236,10 +2491,10 @@ function size(options) {
       placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom)), apply({
         availableWidth: maxWidth - margins[1] - margins[3],
         availableHeight: maxHeight - margins[0] - margins[2],
-        elements,
+        elements: elements2,
         referenceWidth: reference.width - margins[1] - margins[3]
       });
-      const nextDimensions = await platform.getDimensions(elements.floating), targetH = nextDimensions.height, targetW = nextDimensions.width;
+      const nextDimensions = await platform.getDimensions(elements2.floating), targetH = nextDimensions.height, targetW = nextDimensions.width;
       return floatingW !== targetW || floatingH !== targetH ? { reset: { rects: !0 } } : {};
     }
   };
@@ -3256,18 +2511,7 @@ function calcMaxWidth(params) {
       (boundaryWidth || 1 / 0) - DEFAULT_POPOVER_PADDING * 2
     );
 }
-const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
-  &:not([hidden]) {
-    display: flex;
-  }
-  flex-direction: column;
-  width: max-content;
-  min-width: min-content;
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`, PopoverCard = react.memo(
+const MotionCard$1 = framerMotion.motion(Card), PopoverCard = react.memo(
   react.forwardRef(function(props, ref) {
     const {
       __unstable_margins: marginsProp,
@@ -3320,6 +2564,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
     return /* @__PURE__ */ jsxRuntime.jsxs(
       MotionCard$1,
       {
+        className: "popover-card",
         "data-ui": "Popover",
         ...restProps,
         "data-placement": placement,
@@ -3367,21 +2612,21 @@ const Popover = react.memo(
       onActivate,
       open,
       overflow = "hidden",
-      padding: paddingProp,
+      padding,
       placement: placementProp = "bottom",
       portal,
       preventOverflow = !0,
-      radius: radiusProp = 3,
+      radius = 3,
       referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
       referenceElement,
       scheme,
-      shadow: shadowProp = 3,
+      shadow = 3,
       tone = "inherit",
       width: widthProp = "auto",
       zOffset: zOffsetProp = layer.popover.zOffset,
       updateRef,
       ...restProps
-    } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
+    } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
     react.useImperativeHandle(
       forwardedRef,
       () => ref.current
@@ -3416,13 +2661,13 @@ const Popover = react.memo(
         })
       ), ret.push(reactDom$1.offset({ mainAxis: DEFAULT_POPOVER_DISTANCE })), (constrainSize || matchReferenceWidth) && ret.push(
         size({
-          apply({ availableWidth, availableHeight, elements, referenceWidth }) {
+          apply({ availableWidth, availableHeight, elements: elements2, referenceWidth }) {
             referenceWidthRef.current = referenceWidth;
             const _currentWidth = widthRef.current, _maxWidth = maxWidthRef.current;
-            matchReferenceWidth ? elements.floating.style.width = `${referenceWidth}px` : _currentWidth !== void 0 && (elements.floating.style.width = `${_currentWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(
+            matchReferenceWidth ? elements2.floating.style.width = `${referenceWidth}px` : _currentWidth !== void 0 && (elements2.floating.style.width = `${_currentWidth}px`), constrainSize && (elements2.floating.style.maxWidth = `${Math.min(
               availableWidth,
               _maxWidth ?? 1 / 0
-            )}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
+            )}px`, elements2.floating.style.maxHeight = `${availableHeight}px`);
           },
           boundaryElement: floatingBoundary || void 0,
           constrainSize,
@@ -3476,11 +2721,11 @@ const Popover = react.memo(
         typeof childRef == "function" ? childRef(node) : childRef && (childRef.current = node);
       },
       [childProp, refs]
-    ), child = react.useMemo(() => childProp ? react.cloneElement(childProp, { ref: referenceElement ? void 0 : setReference }) : null, [childProp, referenceElement, setReference]);
+    ), child = react.useMemo(() => !childProp || referenceElement ? null : react.cloneElement(childProp, { ref: setReference }), [childProp, referenceElement, setReference]);
     if (react.useEffect(() => {
       updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
     }, [update, updateRef]), react.useEffect(() => {
-      referenceElement && refs.setReference(referenceElement);
+      child || refs.setReference(referenceElement || null);
     }, [referenceElement, refs, child]), disabled)
       return childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
     const popover = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3523,7 +2768,7 @@ function getElementRef(element) {
   return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
 }
 function radioBaseStyle() {
-  return styledComponents.css`
+  return css`
     position: relative;
 
     &:not([hidden]) {
@@ -3537,7 +2782,7 @@ function radioBaseStyle() {
 }
 function inputElementStyle(props) {
   const { color, input } = theme.getTheme_v2(props.theme), dist = (input.radio.size - input.radio.markSize) / 2;
-  return styledComponents.css`
+  return css`
     appearance: none;
     position: absolute;
     top: 0;
@@ -3630,14 +2875,14 @@ function inputElementStyle(props) {
     }
   `;
 }
-const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComponents.styled.input(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
+const Root$7 = styled.div(radioBaseStyle), Input$2 = styled.input(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
   const { className, disabled, style, customValidity, readOnly, ...restProps } = props, ref = react.useRef(null);
   return react.useImperativeHandle(
     forwardedRef,
     () => ref.current
-  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$g, { className, "data-ui": "Radio", style, children: [
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$7, { className, "data-ui": "Radio", style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Input$4,
+      Input$2,
       {
         "data-read-only": !disabled && readOnly ? "" : void 0,
         "data-error": customValidity ? "" : void 0,
@@ -3653,7 +2898,7 @@ const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComp
 });
 Radio.displayName = "ForwardRef(Radio)";
 function rootStyle() {
-  return styledComponents.css`
+  return css`
     position: relative;
     width: -moz-available;
     width: -webkit-fill-available;
@@ -3666,7 +2911,7 @@ function rootStyle() {
 }
 function inputBaseStyle(props) {
   const { font } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
+  return css`
     -webkit-font-smoothing: antialiased;
     appearance: none;
     border: 0;
@@ -3683,7 +2928,7 @@ function inputBaseStyle(props) {
 }
 function inputColorStyle(props) {
   const { color, input } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
+  return css`
     /* enabled */
     background-color: ${color.input.default.enabled.bg};
     color: ${color.input.default.enabled.fg};
@@ -3755,7 +3000,7 @@ function inputStyle() {
 }
 function iconBoxStyle(props) {
   const { color } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
+  return css`
     pointer-events: none;
     position: absolute;
     top: 0;
@@ -3786,7 +3031,7 @@ const selectStyle = {
   root: rootStyle,
   input: inputStyle,
   iconBox: iconBoxStyle
-}, Root$f = styledComponents.styled.div(selectStyle.root), Input$3 = styledComponents.styled.select(selectStyle.input), IconBox = styledComponents.styled(Box)(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
+}, Root$6 = styled.div(selectStyle.root), Input$1 = styled.select(selectStyle.input), IconBox = styled(Box)(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
   const {
     children,
     customValidity,
@@ -3801,9 +3046,9 @@ const selectStyle = {
   return react.useImperativeHandle(
     forwardedRef,
     () => ref.current
-  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$f, { "data-ui": "Select", children: [
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$6, { "data-ui": "Select", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Input$3,
+      Input$1,
       {
         "data-read-only": !disabled && readOnly ? "" : void 0,
         "data-ui": "Select",
@@ -3821,223 +3066,83 @@ const selectStyle = {
   ] });
 });
 Select.displayName = "ForwardRef(Select)";
-const BASE_STYLE = {
-  "&&:not([hidden])": {
-    display: "grid"
-  },
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: "none"
-  },
-  gridTemplateColumns: "minmax(0, 1fr)",
-  gridAutoRows: "min-content"
-};
-function stackBaseStyle() {
-  return BASE_STYLE;
-}
-function responsiveStackSpaceStyle(props) {
-  const { media, space } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$space, (spaceIndex) => ({
-    gridGap: rem(space[spaceIndex])
-  }));
-}
-const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
+const Stack = react.forwardRef(function(props, ref) {
   const { as, space, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$e,
+    Box,
     {
+      as,
       "data-as": typeof as == "string" ? as : void 0,
       "data-ui": "Stack",
       ...restProps,
-      $space: useArrayProp(space),
+      direction: "column",
+      display: "flex",
       forwardedAs: as,
+      gapY: space,
       ref
     }
   );
 });
 Stack.displayName = "ForwardRef(Stack)";
-function switchBaseStyles() {
-  return styledComponents.css`
-    position: relative;
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `;
-}
-function switchInputStyles() {
-  return styledComponents.css`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    height: 100%;
-    width: 100%;
-    outline: none;
-    padding: 0;
-    margin: 0;
-
-    /* Place the input element above the representation element */
-    z-index: 1;
-  `;
-}
-function switchRepresentationStyles(props) {
-  const { color, input } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    --switch-bg-color: ${color.input.default.enabled.border};
-    --switch-fg-color: ${color.input.default.enabled.bg};
-    --switch-box-shadow: none;
-
-    &:not([hidden]) {
-      display: block;
-    }
-    position: relative;
-    width: ${rem(input.switch.width)};
-    height: ${rem(input.switch.height)};
-    border-radius: ${rem(input.switch.height / 2)};
-
-    /* Make sure it’s not possible to interact with the wrapper element */
-    pointer-events: none;
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 1;
-      box-shadow: var(--switch-box-shadow);
-      border-radius: inherit;
-    }
-
-    /* Focus styles */
-    input:focus + && {
-      --switch-box-shadow: ${focusRingStyle({ focusRing: input.switch.focusRing })};
-    }
-
-    input:focus:not(:focus-visible) + && {
-      --switch-box-shadow: none;
-    }
-
-    input:checked + && {
-      --switch-bg-color: ${color.input.default.enabled.fg};
-      --switch-fg-color: ${color.input.default.enabled.bg};
-    }
-
-    @media (hover: hover) {
-      input:not(:disabled):hover + && {
-        --switch-bg-color: ${color.input.default.hovered.border};
-        --switch-fg-color: ${color.input.default.hovered.bg};
-      }
-
-      input:not(:disabled):checked:hover + && {
-        --switch-bg-color: ${color.input.default.enabled.fg};
-        --switch-fg-color: ${color.input.default.enabled.bg};
-      }
-    }
-
-    input:not([data-read-only]):disabled + && {
-      --switch-bg-color: ${color.input.default.disabled.border};
-      --switch-fg-color: ${color.input.default.disabled.bg};
-    }
-
-    input[data-read-only]:disabled + && {
-      --switch-bg-color: ${color.input.default.readOnly.border};
-      --switch-fg-color: ${color.input.default.readOnly.bg};
-    }
-
-    input:checked[data-read-only]:disabled + && {
-      --switch-bg-color: ${color.input.default.readOnly.fg};
-      --switch-fg-color: ${color.input.default.readOnly.bg};
-    }
-  `;
-}
-function switchTrackStyles(props) {
-  const { input } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    &:not([hidden]) {
-      display: block;
-    }
-    background-color: var(--switch-bg-color);
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: ${rem(input.switch.width)};
-    height: ${rem(input.switch.height)};
-    border-radius: ${rem(input.switch.height / 2)};
-  `;
-}
-function switchThumbStyles(props) {
-  const { $indeterminate } = props, { input } = theme.getTheme_v2(props.theme), trackWidth = input.switch.width, trackHeight = input.switch.height, trackPadding = input.switch.padding, size2 = trackHeight - input.switch.padding * 2, checkedOffset = trackWidth - trackPadding * 2 - size2, indeterminateOffset = trackWidth / 2 - size2 / 2 - trackPadding, checked = $indeterminate !== !0 && props.$checked === !0;
-  return styledComponents.css`
-    &:not([hidden]) {
-      display: block;
-    }
-    position: absolute;
-    left: ${rem(trackPadding)};
-    top: ${rem(trackPadding)};
-    height: ${rem(size2)};
-    width: ${rem(size2)};
-    border-radius: ${rem(size2 / 2)};
-    transition-property: transform;
-    transition-duration: ${input.switch.transitionDurationMs}ms;
-    transition-timing-function: ${input.switch.transitionTimingFunction};
-    background: var(--switch-fg-color);
-    transform: translate3d(0, 0, 0);
-    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-
-    ${checked && styledComponents.css`
-      transform: translate3d(${checkedOffset}px, 0, 0);
-    `}
-
-    ${$indeterminate && styledComponents.css`
-      transform: translate3d(${indeterminateOffset}px, 0, 0);
-    `}
-  `;
-}
-const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledComponents.styled.input(switchInputStyles), Representation = styledComponents.styled.span(switchRepresentationStyles), Track = styledComponents.styled.span(switchTrackStyles), Thumb = styledComponents.styled.span(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
+const Switch = react.forwardRef(function(props, forwardedRef) {
   const { checked, className, disabled, indeterminate, readOnly, style, ...restProps } = props, ref = react.useRef(null);
   return react.useImperativeHandle(
     forwardedRef,
     () => ref.current
   ), react.useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, [indeterminate]), /* @__PURE__ */ jsxRuntime.jsxs(Root$d, { className, "data-ui": "Switch", style, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Input$2,
-      {
-        "data-read-only": !disabled && readOnly ? "" : void 0,
-        ...restProps,
-        checked: indeterminate !== !0 && checked,
-        disabled: disabled || readOnly,
-        type: "checkbox",
-        ref
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(Representation, { "aria-hidden": !0, "data-name": "representation", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Track, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(Thumb, { $checked: checked, $indeterminate: indeterminate })
-    ] })
-  ] });
+  }, [indeterminate]), /* @__PURE__ */ jsxRuntime.jsxs(
+    Box,
+    {
+      className: css$1.composeClassNames(className, css$1._switch()),
+      "data-ui": "Switch",
+      display: "inline-block",
+      position: "relative",
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            "data-read-only": !disabled && readOnly ? "" : void 0,
+            ...restProps,
+            checked: indeterminate !== !0 && checked,
+            className: "switch-input",
+            disabled: disabled || readOnly,
+            type: "checkbox",
+            ref
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": !0, className: "switch-presentation", "data-name": "representation", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "switch-track" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "switch-thumb",
+              "data-checked": checked ? "" : void 0,
+              "data-indeterminate": indeterminate ? "" : void 0
+            }
+          )
+        ] })
+      ]
+    }
+  );
 });
 Switch.displayName = "ForwardRef(Switch)";
-const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = styledComponents.styled.span`
+const Root$5 = styled.span(textInputRootStyle), InputRoot = styled.span`
   flex: 1;
   min-width: 0;
   display: block;
   position: relative;
-`, Input$1 = styledComponents.styled.textarea(
+`, Input = styled.textarea(
   responsiveInputPaddingStyle,
   textInputBaseStyle,
   textInputFontSizeStyle
-), Presentation$1 = styledComponents.styled.div(
+), Presentation = styled.div(
   responsiveRadiusStyle,
   textInputRepresentationStyle
 ), TextArea = react.forwardRef(function(props, forwardedRef) {
   const {
-    border: border2 = !0,
+    border = !0,
     customValidity,
     disabled = !1,
     fontSize: fontSize2 = 2,
@@ -4050,9 +3155,9 @@ const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = s
   return react.useImperativeHandle(
     forwardedRef,
     () => ref.current
-  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot$1, { children: [
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsx(Root$5, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Input$1,
+      Input,
       {
         "data-as": "textarea",
         "data-scheme": rootTheme.scheme,
@@ -4069,13 +3174,13 @@ const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = s
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      Presentation$1,
+      Presentation,
       {
         $radius: useArrayProp(radius),
         $unstableDisableFocusRing: __unstable_disableFocusRing,
         $scheme: rootTheme.scheme,
         $tone: rootTheme.tone,
-        "data-border": border2 ? "" : void 0,
+        "data-border": border ? "" : void 0,
         "data-scheme": rootTheme.scheme,
         "data-tone": rootTheme.tone
       }
@@ -4083,55 +3188,20 @@ const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = s
   ] }) });
 });
 TextArea.displayName = "ForwardRef(TextArea)";
-const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(Card).attrs({ forwardedAs: "span" })(textInputRootStyle), InputRoot = styledComponents.styled.span`
-  flex: 1;
-  min-width: 0;
-  display: block;
-  position: relative;
-`, Prefix = styledComponents.styled(Card).attrs({ forwardedAs: "span" })`
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-
-  & > span {
-    display: block;
-    margin: -1px;
-  }
-`, Suffix = styledComponents.styled(Card).attrs({ forwardedAs: "span" })`
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  & > span {
-    display: block;
-    margin: -1px;
-  }
-`, Input = styledComponents.styled.input(
-  responsiveInputPaddingStyle,
-  textInputBaseStyle,
-  textInputFontSizeStyle
-), Presentation = styledComponents.styled.span(
-  responsiveRadiusStyle,
-  textInputRepresentationStyle
-), LeftBox = styledComponents.styled(Box)`
-  position: absolute;
-  top: 0;
-  left: 0;
-`, RightBox = styledComponents.styled(Box)`
-  position: absolute;
-  top: 0;
-  right: 0;
-`, RightCard = styledComponents.styled(Card)`
-  background-color: transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
-`, TextInputClearButton = styledComponents.styled(Button)({
+const CLEAR_BUTTON_BOX_STYLE = {
+  backgroundColor: "transparent",
+  top: 0,
+  right: 0,
+  zIndex: 2
+}, TextInputClearButton = styled(Button)({
   "&:not([hidden])": {
     display: "block"
   }
 }), TextInput = react.forwardRef(function(props, forwardedRef) {
   const {
     __unstable_disableFocusRing,
-    border: border2 = !0,
+    border = !0,
+    className,
     clearButton,
     disabled = !1,
     fontSize: fontSizeProp = 2,
@@ -4142,13 +3212,13 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(C
     prefix,
     radius: radiusProp = 2,
     readOnly,
-    space: spaceProp = 3,
+    space: _space = 3,
     suffix,
     customValidity,
     type = "text",
-    weight,
+    weight: _width,
     ...restProps
-  } = props, ref = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
+  } = props, ref = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), $hasClearButton = !!clearButton;
   react.useImperativeHandle(
     forwardedRef,
     () => ref.current
@@ -4161,27 +3231,40 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(C
     },
     [onClear, ref]
   ), prefixNode = react.useMemo(
-    () => prefix && /* @__PURE__ */ jsxRuntime.jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: prefix }) }),
+    () => prefix && /* @__PURE__ */ jsxRuntime.jsx(
+      Card,
+      {
+        as: "span",
+        borderTop: !0,
+        borderLeft: !0,
+        borderBottom: !0,
+        className: "text-input-prefix",
+        radius,
+        sizing: "border",
+        tone: "inherit",
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: prefix })
+      }
+    ),
     [prefix, radius]
   ), presentationNode = react.useMemo(
     () => /* @__PURE__ */ jsxRuntime.jsxs(
-      Presentation,
+      Card,
       {
-        $hasPrefix,
-        $unstableDisableFocusRing: __unstable_disableFocusRing,
-        $hasSuffix,
-        $radius: radius,
-        $scheme: rootTheme.scheme,
-        $tone: rootTheme.tone,
-        "data-border": border2 ? "" : void 0,
+        as: "span",
+        border,
+        className: "text-input-presentation",
+        "data-border": border ? "" : void 0,
+        "data-disable-focus-ring": __unstable_disableFocusRing ? "" : void 0,
         "data-scheme": rootTheme.scheme,
         "data-tone": rootTheme.tone,
+        position: "absolute",
+        radius,
         children: [
-          IconComponent && /* @__PURE__ */ jsxRuntime.jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+          IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, position: "absolute", style: { top: 0, left: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
             react.isValidElement(IconComponent) && IconComponent,
             ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
           ] }) }),
-          !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsxRuntime.jsx(RightBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+          !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, position: "absolute", style: { top: 0, right: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
             react.isValidElement(IconRightComponent) && IconRightComponent,
             ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
           ] }) })
@@ -4190,16 +3273,16 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(C
     ),
     [
       __unstable_disableFocusRing,
-      border2,
+      border,
       fontSize2,
       IconComponent,
       IconRightComponent,
       padding,
       radius,
       rootTheme,
-      $hasClearButton,
-      $hasPrefix,
-      $hasSuffix
+      $hasClearButton
+      // $hasPrefix,
+      // $hasSuffix,
     ]
   ), clearButtonBoxPadding = react.useMemo(
     () => padding.map((v) => v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2),
@@ -4212,10 +3295,10 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(C
     [clearButton]
   ), clearButtonNode = react.useMemo(
     () => !disabled && !readOnly && clearButton && /* @__PURE__ */ jsxRuntime.jsx(
-      RightCard,
+      Card,
       {
-        forwardedAs: "span",
         padding: clearButtonBoxPadding,
+        position: "absolute",
         style: CLEAR_BUTTON_BOX_STYLE,
         tone: customValidity ? "critical" : "inherit",
         children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4249,38 +3332,63 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(C
       readOnly
     ]
   ), suffixNode = react.useMemo(
-    () => suffix && /* @__PURE__ */ jsxRuntime.jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: suffix }) }),
+    () => suffix && /* @__PURE__ */ jsxRuntime.jsx(
+      Card,
+      {
+        as: "span",
+        borderTop: !0,
+        borderRight: !0,
+        borderBottom: !0,
+        className: "text-input-suffix",
+        radius,
+        sizing: "border",
+        tone: "inherit",
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: suffix })
+      }
+    ),
     [radius, suffix]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$b, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
-    prefixNode,
-    /* @__PURE__ */ jsxRuntime.jsxs(InputRoot, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          "data-as": "input",
-          "data-scheme": rootTheme.scheme,
-          "data-tone": rootTheme.tone,
-          ...restProps,
-          $fontSize: fontSize2,
-          $iconLeft: $hasIcon,
-          $iconRight: $hasIconRight || $hasClearButton,
-          $padding: padding,
-          $scheme: rootTheme.scheme,
-          $space: space,
-          $tone: rootTheme.tone,
-          $weight: weight,
-          disabled,
-          readOnly,
-          ref,
-          type
-        }
-      ),
-      presentationNode,
-      clearButtonNode
-    ] }),
-    suffixNode
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Card,
+    {
+      align: "center",
+      as: "span",
+      className: css$1.composeClassNames(className, css$1.textInput({ size: fontSizeProp })),
+      "data-ui": "TextInput",
+      display: "flex",
+      tone: rootTheme.tone,
+      children: [
+        prefixNode,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Box,
+          {
+            as: "span",
+            className: "text-input-wrapper",
+            flex: 1,
+            position: "relative",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  "data-as": "input",
+                  "data-scheme": rootTheme.scheme,
+                  "data-tone": rootTheme.tone,
+                  ...restProps,
+                  disabled,
+                  readOnly,
+                  ref,
+                  type
+                }
+              ),
+              presentationNode,
+              clearButtonNode
+            ]
+          }
+        ),
+        suffixNode
+      ]
+    }
+  );
 });
 TextInput.displayName = "ForwardRef(TextInput)";
 function useDelayedState(initialState) {
@@ -4306,12 +3414,7 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   right: ["right-end", "right-start", "left", "top", "bottom"],
   "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
   "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
-}, MotionCard = styledComponents.styled(framerMotion.motion(Card))`
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`, TooltipCard = react.memo(
+}, MotionCard = framerMotion.motion(Card), TooltipCard = react.memo(
   react.forwardRef(function(props, ref) {
     const {
       animate,
@@ -4351,6 +3454,8 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
       {
         "data-ui": "Tooltip__card",
         ...restProps,
+        "data-animate": animate ? "" : void 0,
+        className: css$1.tooltipCard(),
         "data-placement": placement,
         padding,
         radius,
@@ -4400,14 +3505,13 @@ function TooltipDelayGroupProvider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children });
 }
 TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
-const Root$a = styledComponents.styled(Layer)`
-  pointer-events: none;
-`, Tooltip = react.forwardRef(function(props, forwardedRef) {
+const Tooltip = react.forwardRef(function(props, forwardedRef) {
   const boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), {
     animate: _animate = !1,
     arrow: arrowProp = !1,
     boundaryElement = boundaryElementContext?.element,
     children: childProp,
+    className,
     content,
     disabled,
     fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
@@ -4512,8 +3616,8 @@ const Root$a = styledComponents.styled(Layer)`
     },
     [update]
   ), setFloating = react.useCallback(
-    (node) => {
-      ref.current = node, refs.setFloating(node);
+    (node2) => {
+      ref.current = node2, refs.setFloating(node2);
     },
     [refs]
   ), childRef = react.useRef(null);
@@ -4540,11 +3644,12 @@ const Root$a = styledComponents.styled(Layer)`
       return setReferenceElement(childRef.current), () => setReferenceElement(null);
   }, [child]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   if (disabled) return child;
-  const tooltip = /* @__PURE__ */ jsxRuntime.jsx(
-    Root$a,
+  const node = /* @__PURE__ */ jsxRuntime.jsx(
+    Layer,
     {
       "data-ui": "Tooltip",
       ...restProps,
+      className: css$1.composeClassNames(className, css$1.tooltip()),
       ref: setFloating,
       style: {
         ...floatingStyles,
@@ -4572,7 +3677,7 @@ const Root$a = styledComponents.styled(Layer)`
         }
       )
     }
-  ), children = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip);
+  ), children = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: node }) : node);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
     child
@@ -4595,15 +3700,15 @@ function useCloseOnMouseLeave({
     return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
   }, [onMouseMove, showTooltip]);
 }
-const Root$9 = styledComponents.styled.div`
+const Root$4 = styled.div`
   line-height: 0;
-`, ListBox = styledComponents.styled(Box)`
+`, ListBox = styled(Box)`
   & > ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
-`, rotate = styledComponents.keyframes`
+`, rotate = keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -4611,7 +3716,7 @@ const Root$9 = styledComponents.styled.div`
   to {
     transform: rotate(360deg);
   }
-`, AnimatedSpinnerIcon = styledComponents.styled(icons.SpinnerIcon)`
+`, AnimatedSpinnerIcon = styled(icons.SpinnerIcon)`
   animation: ${rotate} 500ms linear infinite;
 `;
 function AutocompleteOption(props) {
@@ -4655,7 +3760,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   "CapsLock"
 ], AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start", AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"], DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1, InnerAutocomplete = react.forwardRef(function(props, forwardedRef) {
   const {
-    border: border2 = !0,
+    border = !0,
     customValidity,
     disabled,
     filterOption: filterOptionProp,
@@ -4709,13 +3814,13 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
       setTimeout(() => {
         if (popoverMouseWithinRef.current)
           return;
-        const elements = (relatedElements || []).concat(
+        const elements2 = (relatedElements || []).concat(
           rootElementRef.current ? [rootElementRef.current] : [],
           resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : []
         );
         let focusInside = !1;
         if (document.activeElement) {
-          for (const e of elements)
+          for (const e of elements2)
             if (e === document.activeElement || e.contains(document.activeElement)) {
               focusInside = !0;
               break;
@@ -4813,7 +3918,10 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   }, [disabled, handleClearButtonFocus, loading, value]), openButtonBoxPadding = react.useMemo(
     () => padding.map((v) => v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2),
     [padding]
-  ), openButtonPadding = react.useMemo(() => padding.map((v) => Math.max(v - 1, 0)), [padding]), openButtonProps = react.useMemo(
+  ), openButtonPadding = react.useMemo(
+    () => padding.map((v) => Math.max(v - 1, 0)),
+    [padding]
+  ), openButtonProps = react.useMemo(
     () => typeof openButton == "object" ? openButton : EMPTY_RECORD,
     [openButton]
   ), handleOpenClick = react.useCallback(
@@ -4857,7 +3965,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
       autoCapitalize: "off",
       autoComplete: "off",
       autoCorrect: "off",
-      border: border2,
+      border,
       clearButton,
       customValidity,
       disabled,
@@ -4974,7 +4082,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     renderPopover
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Root$9,
+    Root$4,
     {
       "data-ui": "Autocomplete",
       onBlur: handleRootBlur,
@@ -4989,11 +4097,10 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   );
 });
 InnerAutocomplete.displayName = "ForwardRef(Autocomplete)";
-const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.nav`
-  line-height: 0;
-`, Breadcrumbs = react.forwardRef(function(props, ref) {
+const Autocomplete = InnerAutocomplete, Breadcrumbs = react.forwardRef(function(props, ref) {
   const {
     children,
+    className,
     expandButton: expandButtonProps,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     gap: _gapProp,
@@ -5042,60 +4149,21 @@ const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.nav`
     }
     return rawItems;
   }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems]), len = items.length;
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$8, { "data-ui": "Breadcrumbs", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { align: "flex-start", as: "ol", gapX, gapY, wrap: "wrap", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "flex-start", as: "li", gapX, gapY, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { children: item }),
-    itemIndex < len - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": !0, children: separator || /* @__PURE__ */ jsxRuntime.jsx(Text, { muted: !0, children: "/" }) })
-  ] }, itemIndex)) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "data-ui": "Breadcrumbs",
+      ...restProps,
+      className: css$1.composeClassNames(className, css$1.breadcrumbs()),
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { align: "flex-start", as: "ol", gapX, gapY, wrap: "wrap", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "flex-start", as: "li", gapX, gapY, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { children: item }),
+        itemIndex < len - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": !0, children: separator || /* @__PURE__ */ jsxRuntime.jsx(Text, { muted: !0, children: "/" }) })
+      ] }, itemIndex)) })
+    }
+  );
 });
 Breadcrumbs.displayName = "ForwardRef(Breadcrumbs)";
-function dialogStyle({ theme: theme$1 }) {
-  const { color } = theme.getTheme_v2(theme$1);
-  return {
-    "&:not([hidden])": {
-      display: "flex"
-    },
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    outline: "none",
-    background: color.backdrop
-  };
-}
-function responsiveDialogPositionStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$position, (position) => ({ "&&": { position } }));
-}
-function animationDialogStyle(props) {
-  return props.$animate ? styledComponents.css`
-    @keyframes zoomIn {
-      from {
-        opacity: 0;
-        transform: scale(0.95);
-      }
-      to {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-
-    animation: fadeIn 200ms ease-out;
-    // Animates the dialog card.
-    & > [data-ui='DialogCard'] {
-      animation: zoomIn 200ms ease-out;
-    }
-  ` : styledComponents.css``;
-}
 const DialogContext = createGlobalScopedContext(
   "@sanity/ui/context/dialog",
   { version: 0 }
@@ -5106,40 +4174,7 @@ function useDialog() {
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
-const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styledComponents.styled(Container)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`, DialogCardRoot = styledComponents.styled(Card)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  min-height: 0;
-  max-height: 100%;
-  overflow: hidden;
-  overflow: clip;
-`, DialogLayout = styledComponents.styled(Flex)`
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-`, DialogHeader = styledComponents.styled(Box)`
-  position: relative;
-  z-index: 2;
-`, DialogContent = styledComponents.styled(Box)`
-  position: relative;
-  z-index: 1;
-  overflow: auto;
-  outline: none;
-`, DialogFooter = styledComponents.styled(Box)`
-  position: relative;
-  z-index: 3;
-`, DialogCard = react.forwardRef(function(props, forwardedRef) {
+const DialogCard = react.forwardRef(function(props, forwardedRef) {
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
@@ -5176,33 +4211,68 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
       target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
     }),
     () => [ref.current]
-  ), /* @__PURE__ */ jsxRuntime.jsx(DialogContainer, { "data-ui": "DialogCard", width, children: /* @__PURE__ */ jsxRuntime.jsx(DialogCardRoot, { radius, ref, scheme, shadow, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogLayout, { direction: "column", children: [
-    showHeader && /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "flex-start", padding: 3, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, padding: 2, children: header && /* @__PURE__ */ jsxRuntime.jsx(Text, { id: labelId, size: 1, weight: "semibold", children: header }) }),
-      showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
+  ), /* @__PURE__ */ jsxRuntime.jsx(
+    Container,
+    {
+      align: "center",
+      className: css$1.dialogContainer(),
+      "data-ui": "DialogCard",
+      direction: "column",
+      display: "flex",
+      justify: "center",
+      width,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Card,
         {
-          "aria-label": "Close dialog",
-          disabled: !onClose,
-          icon: icons.CloseIcon,
-          mode: "bleed",
-          onClick: onClose,
-          padding: 2
+          className: css$1.dialogCardRoot(),
+          display: "flex",
+          radius,
+          ref,
+          scheme,
+          shadow,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { className: css$1.dialogLayout(), direction: "column", flex: 1, children: [
+            showHeader && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: css$1.dialogHeader(), position: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "flex-start", padding: 3, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, padding: 2, children: header && /* @__PURE__ */ jsxRuntime.jsx(Text, { id: labelId, size: 1, weight: "semibold", children: header }) }),
+              showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  "aria-label": "Close dialog",
+                  disabled: !onClose,
+                  icon: icons.CloseIcon,
+                  mode: "bleed",
+                  onClick: onClose,
+                  padding: 2
+                }
+              ) })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Box,
+              {
+                className: css$1.dialogContent(),
+                flex: 1,
+                overflow: "auto",
+                position: "relative",
+                ref: contentRef,
+                tabIndex: -1,
+                children
+              }
+            ),
+            footer && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: css$1.dialogFooter(), position: "relative", children: footer })
+          ] })
         }
-      ) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { flex: 1, ref: contentRef, tabIndex: -1, children }),
-    footer && /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { children: footer })
-  ] }) }) });
+      )
+    }
+  );
 });
 DialogCard.displayName = "ForwardRef(DialogCard)";
 const Dialog = react.forwardRef(function(props, ref) {
-  const dialog = useDialog(), { layer } = useTheme_v2(), {
+  const context = useDialog(), { layer } = useTheme_v2(), {
     __unstable_autoFocus: autoFocus = !0,
     __unstable_hideCloseButton: hideCloseButton = !1,
     cardRadius: cardRadiusProp = 4,
     cardShadow = 3,
     children,
+    className,
     contentRef,
     footer,
     header,
@@ -5211,15 +4281,15 @@ const Dialog = react.forwardRef(function(props, ref) {
     onClickOutside,
     onClose,
     onFocus,
-    padding: paddingProp = 3,
+    padding = 3,
     portal: portalProp,
-    position: positionProp = dialog.position || "fixed",
+    position: positionProp = context.position || "fixed",
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
+    zOffset: zOffsetProp = context.zOffset || layer.dialog.zOffset,
     animate: _animate = !1,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null), handleFocus = react.useCallback(
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null), handleFocus = react.useCallback(
     (event) => {
       onFocus?.(event);
       const target = event.target, cardElement = cardRef.current;
@@ -5249,19 +4319,21 @@ const Dialog = react.forwardRef(function(props, ref) {
     }, 0);
   }, [boundaryElement, portalElement]);
   return /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: portalProp, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    Root$7,
+    Layer,
     {
       ...restProps,
-      $animate: animate,
-      $padding: padding,
-      $position: position,
       "aria-labelledby": labelId,
       "aria-modal": !0,
+      className: css$1.composeClassNames(className, css$1.dialog()),
+      "data-animate": animate ? "" : void 0,
       "data-ui": "Dialog",
+      display: "flex",
       id,
       onActivate,
       onClick: handleRootClick,
       onFocus: handleFocus,
+      padding,
+      position,
       ref,
       role: "dialog",
       zOffset,
@@ -5305,20 +4377,9 @@ function DialogProvider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children });
 }
 DialogProvider.displayName = "DialogProvider";
-const Root$6 = styledComponents.styled.kbd`
-  font: inherit;
-  padding: 1px;
-
-  &:not([hidden]) {
-    display: block;
-  }
-`, Key = styledComponents.styled(KBD)`
-  &:not([hidden]) {
-    display: block;
-  }
-`, Hotkeys = react.forwardRef(function(props, ref) {
+const Hotkeys = react.forwardRef(function(props, ref) {
   const { fontSize: fontSize2, keys, padding, radius, space: spaceProp = 0.5, ...restProps } = props, space = useArrayProp(spaceProp);
-  return !keys || keys.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : /* @__PURE__ */ jsxRuntime.jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { as: "span", space, children: keys.map((key2, i) => /* @__PURE__ */ jsxRuntime.jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i)) }) });
+  return !keys || keys.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "kbd", "data-ui": "Hotkeys", ...restProps, display: "flex", gap: spaceProp, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { as: "span", space, children: keys.map((key2, i) => /* @__PURE__ */ jsxRuntime.jsx(KBD, { display: "block", fontSize: fontSize2, padding, radius, children: key2 }, i)) }) });
 });
 Hotkeys.displayName = "ForwardRef(Hotkeys)";
 const MenuContext = createGlobalScopedContext(
@@ -5328,8 +4389,8 @@ const MenuContext = createGlobalScopedContext(
 function _isFocusable(element) {
   return isHTMLAnchorElement(element) && element.getAttribute("data-disabled") !== "true" || isHTMLButtonElement(element) && !element.disabled;
 }
-function _getFocusableElements(elements) {
-  return elements.filter(_isFocusable);
+function _getFocusableElements(elements2) {
+  return elements2.filter(_isFocusable);
 }
 function _getDOMPath(rootElement, el) {
   const path = [];
@@ -5345,10 +4406,10 @@ function _getDOMPath(rootElement, el) {
   return path;
 }
 const EMPTY_PATH = [];
-function _sortElements(rootElement, elements) {
+function _sortElements(rootElement, elements2) {
   if (!rootElement) return;
   const map = /* @__PURE__ */ new WeakMap();
-  for (const el of elements)
+  for (const el of elements2)
     map.set(el, _getDOMPath(rootElement, el));
   const _sort = (a, b) => {
     const _a = map.get(a) || EMPTY_PATH, _b = map.get(b) || EMPTY_PATH, len = Math.max(_a.length, _b.length);
@@ -5359,7 +4420,7 @@ function _sortElements(rootElement, elements) {
     }
     return 0;
   };
-  elements.sort(_sort);
+  elements2.sort(_sort);
 }
 function useMenuController(props) {
   const { onKeyDown, originElement, shouldFocus, rootElementRef } = props, elementsRef = react.useRef([]), [activeIndex, _setActiveIndex] = react.useState(-1), activeIndexRef = react.useRef(activeIndex), activeElement = react.useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = react.useCallback((nextActiveIndex) => {
@@ -5466,7 +4527,7 @@ function useMenuController(props) {
     mount
   };
 }
-const Root$5 = styledComponents.styled(Box)`
+const Root$3 = styled(Box)`
   outline: none;
   overflow: auto;
 `, Menu = react.forwardRef(function(props, forwardedRef) {
@@ -5541,7 +4602,7 @@ const Root$5 = styledComponents.styled(Box)`
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Root$5,
+    Root$3,
     {
       "data-ui": "Menu",
       ...restProps,
@@ -5686,114 +4747,25 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
   return /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
 });
 MenuButton.displayName = "ForwardRef(MenuButton)";
-const MenuDivider = styledComponents.styled.hr`
+const MenuDivider = styled.hr`
   height: 1px;
   border: 0;
   background: var(--card-hairline-soft-color);
   margin: 0;
 `;
 MenuDivider.displayName = "MenuDivider";
-function selectableBaseStyle() {
-  return styledComponents.css`
-    background-color: inherit;
-    color: inherit;
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `;
-}
-function selectableColorStyle(props) {
-  const { $tone } = props, { color, style } = theme.getTheme_v2(props.theme), tone = color.selectable[$tone];
-  return styledComponents.css`
-    ${_cardColorStyle(color, tone.enabled)}
-
-    background-color: var(--card-bg-color);
-    color: var(--card-fg-color);
-    outline: none;
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      &:disabled {
-        ${_cardColorStyle(color, tone.disabled)}
-      }
-
-      &:not(:disabled) {
-        &[aria-pressed='true'] {
-          ${_cardColorStyle(color, tone.pressed)}
-        }
-
-        &[data-selected],
-        &[aria-selected='true'] > & {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, tone.hovered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, tone.pressed)}
-            }
-          }
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      &[data-disabled] {
-        ${_cardColorStyle(color, tone.disabled)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, tone.pressed)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, tone.hovered)}
-            }
-            &:active {
-              ${_cardColorStyle(color, tone.pressed)}
-            }
-          }
-        }
-      }
+const Selectable = react.forwardRef(function(props, ref) {
+  const { className, radius, tone, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      ...restProps,
+      className: css$1.composeClassNames(className, css$1.selectable({ radius, tone })),
+      ref
     }
-
-    ${style?.card?.root}
-  `;
-}
-const Selectable = styledComponents.styled(Box)(
-  responsiveRadiusStyle,
-  selectableBaseStyle,
-  selectableColorStyle
-);
-Selectable.displayName = "Selectable";
+  );
+});
+Selectable.displayName = "ForwardRef(Selectable)";
 function useMenu() {
   const value = react.useContext(MenuContext);
   if (!value)
@@ -5816,7 +4788,7 @@ function MenuGroup(props) {
     text,
     tone = "default",
     ...restProps
-  } = props, menu = useMenu(), { scheme } = useRootTheme(), {
+  } = props, menu = useMenu(), {
     activeElement,
     mount,
     onClickOutside,
@@ -5882,14 +4854,13 @@ function MenuGroup(props) {
       "aria-pressed": as === "button" ? withinMenu : void 0,
       "data-pressed": as !== "button" ? withinMenu : void 0,
       "data-selected": !withinMenu && active ? "" : void 0,
-      $radius: useArrayProp(radius),
-      $tone: tone,
-      $scheme: scheme,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       onMouseEnter: handleMouseEnter,
+      radius,
       ref: setRootElement,
       tabIndex: -1,
+      tone,
       type: as === "button" ? "button" : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
         IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
@@ -5927,7 +4898,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     text,
     tone = "default",
     ...restProps
-  } = props, { scheme } = useRootTheme(), menu = useMenu(), {
+  } = props, menu = useMenu(), {
     activeElement,
     mount,
     onItemClick,
@@ -5951,7 +4922,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       paddingLeft
     }),
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]
-  ), hotkeysFontSize = useArrayProp(fontSize2).map((s) => s - 1), setRef = react.useCallback((el) => {
+  ), setRef = react.useCallback((el) => {
     ref.current = el, setRootElement(el);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5960,14 +4931,11 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       "data-ui": "MenuItem",
       ...restProps,
       "aria-pressed": as === "button" && pressed,
+      as,
       "data-pressed": as !== "button" && pressed ? "" : void 0,
       "data-selected": active ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
-      forwardedAs: as,
-      $radius: useArrayProp(radius),
-      $padding: useArrayProp(0),
-      $tone: disabled ? "default" : tone,
-      $scheme: scheme,
+      radius,
       disabled,
       onClick: handleClick,
       onMouseEnter: onItemMouseEnter,
@@ -5975,6 +4943,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       ref: setRef,
       role: "menuitem",
       tabIndex: -1,
+      tone,
       type: as === "button" ? "button" : void 0,
       children: [
         (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
@@ -5986,7 +4955,6 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
           hotkeys && /* @__PURE__ */ jsxRuntime.jsx(
             Hotkeys,
             {
-              fontSize: hotkeysFontSize,
               keys: hotkeys,
               style: { marginTop: -4, marginBottom: -4 }
             }
@@ -6002,14 +4970,14 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
   );
 });
 MenuItem.displayName = "ForwardRef(MenuItem)";
-const keyframe = styledComponents.keyframes`
+const keyframe = keyframes`
   0% {
     background-position: 100%;
   }
   100% {
     background-position: -100%;
   }
-`, animation = styledComponents.css`
+`, animation = css`
   background-image: linear-gradient(
     to right,
     var(--card-skeleton-color-from),
@@ -6025,12 +4993,12 @@ const keyframe = styledComponents.keyframes`
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-duration: 2000ms;
-`, skeletonStyle = styledComponents.css`
+`, skeletonStyle = css`
   opacity: ${({ $visible }) => $visible ? 1 : 0};
   transition: opacity 200ms ease-in;
 
   @media screen and (prefers-reduced-motion: no-preference) {
-    ${({ $animated }) => $animated ? animation : styledComponents.css`
+    ${({ $animated }) => $animated ? animation : css`
             background-color: var(--card-skeleton-color-from);
           `}
   }
@@ -6038,7 +5006,7 @@ const keyframe = styledComponents.keyframes`
   @media screen and (prefers-reduced-motion: reduce) {
     background-color: var(--card-skeleton-color-from);
   }
-`, Root$4 = styledComponents.styled(Box)(
+`, Root$2 = styled(Box)(
   responsiveRadiusStyle,
   skeletonStyle
 ), Skeleton = react.forwardRef(function(props, ref) {
@@ -6053,7 +5021,7 @@ const keyframe = styledComponents.keyframes`
       clearTimeout(timeout);
     };
   }, [delay]), /* @__PURE__ */ jsxRuntime.jsx(
-    Root$4,
+    Root$2,
     {
       ...restProps,
       $animated: animated,
@@ -6064,7 +5032,7 @@ const keyframe = styledComponents.keyframes`
   );
 });
 Skeleton.displayName = "ForwardRef(Skeleton)";
-const Root$3 = styledComponents.styled(Skeleton)((props) => {
+const Root$1 = styled(Skeleton)((props) => {
   const { $size, $style } = props, { font, media } = theme.getTheme_v2(props.theme), fontStyle = font[$style];
   return _responsive(media, $size, (sizeIndex) => {
     const fontSize2 = fontStyle.sizes[sizeIndex];
@@ -6072,27 +5040,25 @@ const Root$3 = styledComponents.styled(Skeleton)((props) => {
   });
 }), TextSkeleton = react.forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "text" });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$1, { ...restProps, $size, ref, $style: "text" });
 });
 TextSkeleton.displayName = "ForwardRef(TextSkeleton)";
 const LabelSkeleton = react.forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "label" });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$1, { ...restProps, $size, ref, $style: "label" });
 });
 LabelSkeleton.displayName = "ForwardRef(LabelSkeleton)";
 const HeadingSkeleton = react.forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "heading" });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$1, { ...restProps, $size, ref, $style: "heading" });
 });
 HeadingSkeleton.displayName = "ForwardRef(HeadingSkeleton)";
 const CodeSkeleton = react.forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "code" });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$1, { ...restProps, $size, ref, $style: "code" });
 });
 CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
-const CustomButton = styledComponents.styled(Button)`
-  max-width: 100%;
-`, Tab = react.forwardRef(function(props, forwardedRef) {
+const Tab = react.forwardRef(function(props, forwardedRef) {
   const {
     icon,
     id,
@@ -6120,7 +5086,7 @@ const CustomButton = styledComponents.styled(Button)`
   return react.useEffect(() => {
     focused && !focusedRef.current && (ref.current && ref.current.focus(), focusedRef.current = !0);
   }, [focused]), /* @__PURE__ */ jsxRuntime.jsx(
-    CustomButton,
+    Button,
     {
       "data-ui": "Tab",
       ...restProps,
@@ -6146,7 +5112,7 @@ Tab.displayName = "ForwardRef(Tab)";
 function _isReactElement(node) {
   return !!node;
 }
-const CustomInline = styledComponents.styled(Inline)`
+const CustomInline = styled(Inline)`
   & > div {
     display: inline-block;
     vertical-align: middle;
@@ -6197,9 +5163,9 @@ const TabPanel = react.forwardRef(function(props, ref) {
   );
 });
 TabPanel.displayName = "ForwardRef(TabPanel)";
-const TextBox = styledComponents.styled(Flex)`
+const TextBox = styled(Flex)`
   overflow-x: auto;
-`, loadingAnimation = styledComponents.keyframes`
+`, loadingAnimation = keyframes`
   0% {
     width: 0;
   }
@@ -6209,7 +5175,7 @@ const TextBox = styledComponents.styled(Flex)`
 `, LOADING_BAR_HEIGHT = 2;
 function rootStyles(props) {
   const { color } = getTheme_v2.getTheme_v2(props.theme), loadingBarColor = color.button.default[props.tone].enabled.bg;
-  return props.$duration ? styledComponents.css`
+  return props.$duration ? css`
     pointer-events: all;
     width: 100%;
     position: relative;
@@ -6231,7 +5197,7 @@ function rootStyles(props) {
       opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
       will-change: opacity;
     }
-  ` : styledComponents.css`
+  ` : css`
       pointer-events: all;
       & > * {
         opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
@@ -6254,18 +5220,19 @@ const STATUS_CARD_TONE = {
   warning: "alert",
   success: "alert",
   info: "alert"
-}, Root$2 = styledComponents.styled(Card)(
+}, Root = styled(Card)(
   rootStyles
 );
 function Toast(props) {
   const { closable, description, duration, onClose, radius = 3, title, status, ...restProps } = props, cardTone = status ? STATUS_CARD_TONE[status] : "default", buttonTone = status ? BUTTON_TONE[status] : "default", role = status ? ROLES[status] : "status";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$2,
+    Root,
     {
       "data-ui": "Toast",
       role,
       ...restProps,
       marginTop: 3,
+      pointerEvents: "auto",
       radius,
       shadow: 2,
       tone: cardTone,
@@ -6303,21 +5270,7 @@ const subscribe = () => () => {
 }, ToastContext = createGlobalScopedContext(
   "@sanity/ui/context/toast",
   null
-), Root$1 = styledComponents.styled(Layer)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-`, ToastContainer = styledComponents.styled.div`
-  box-sizing: border-box;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  max-width: 420px;
-  width: 100%;
-`;
+);
 let toastId = 0;
 function ToastProvider(props) {
   const { children, padding = 4, paddingX, paddingY, zOffset } = props, [state, _setState] = react.useState([]), toastsRef = react.useRef({}), mounted = useMounted(), prefersReducedMotion = usePrefersReducedMotion(), variants = react.useMemo(
@@ -6372,29 +5325,55 @@ function ToastProvider(props) {
     []
   ), /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
     children,
-    mounted && /* @__PURE__ */ jsxRuntime.jsx(Root$1, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(ToastContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: !1, children: state.map(({ dismiss, id, params }) => /* @__PURE__ */ jsxRuntime.jsx(
-      framerMotion.motion.div,
+    mounted && /* @__PURE__ */ jsxRuntime.jsx(
+      Layer,
       {
-        layout: "position",
-        initial: "initial",
-        animate: "animate",
-        exit: "exit",
-        variants,
-        transition: prefersReducedMotion ? { duration: 0 } : { type: "spring", damping: 30, stiffness: 400 },
+        className: void 0,
+        "data-ui": "ToastProvider",
+        inset: 0,
+        pointerEvents: "none",
+        position: "fixed",
+        zOffset,
+        width: "fill",
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          Toast,
+          Box,
           {
-            closable: params.closable,
-            description: params.description,
-            onClose: dismiss,
-            status: params.status,
-            title: params.title,
-            duration: params.duration
+            className: void 0,
+            position: "absolute",
+            sizing: "border",
+            style: {
+              // todo: move to css
+              right: 0,
+              bottom: 0,
+              maxWidth: 420
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: !1, children: state.map(({ dismiss, id, params }) => /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.div,
+              {
+                layout: "position",
+                initial: "initial",
+                animate: "animate",
+                exit: "exit",
+                variants,
+                transition: prefersReducedMotion ? { duration: 0 } : { type: "spring", damping: 30, stiffness: 400 },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Toast,
+                  {
+                    closable: params.closable,
+                    description: params.description,
+                    onClose: dismiss,
+                    status: params.status,
+                    title: params.title,
+                    duration: params.duration
+                  }
+                )
+              },
+              id
+            )) }) })
           }
         )
-      },
-      id
-    )) }) }) }) })
+      }
+    )
   ] });
 }
 ToastProvider.displayName = "ToastProvider";
@@ -6584,92 +5563,6 @@ const TreeContext = createGlobalScopedContext(
   })
 );
 Tree.displayName = "Memo(ForwardRef(Tree))";
-function treeItemRootStyle() {
-  return styledComponents.css`
-    &[role='none'] > [role='treeitem'] {
-      outline: none;
-      cursor: default;
-      border-radius: 3px;
-
-      background-color: var(--card-bg-color);
-      color: var(--treeitem-fg-color);
-
-      &:focus {
-        position: relative;
-      }
-    }
-
-    &[role='treeitem'] {
-      outline: none;
-
-      & > div {
-        cursor: default;
-        border-radius: 3px;
-
-        background-color: var(--card-bg-color);
-        color: var(--treeitem-fg-color);
-      }
-
-      &:focus > div {
-        position: relative;
-      }
-    }
-  `;
-}
-function treeItemRootColorStyle(props) {
-  const $tone = "default", { color } = theme.getTheme_v2(props.theme), tone = color.selectable[$tone];
-  return styledComponents.css`
-    &[role='none'] {
-      & > [role='treeitem'] {
-        ${_cardColorStyle(color, tone.enabled)}
-      }
-
-      &[data-selected] > [role='treeitem'] {
-        ${_cardColorStyle(color, tone.pressed)}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
-          ${_cardColorStyle(color, tone.hovered)}
-        }
-
-        & > [role='treeitem']:focus {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-      }
-    }
-
-    &[role='treeitem'] {
-      & > [data-ui='TreeItem__box'] {
-        ${_cardColorStyle(color, tone.enabled)}
-      }
-
-      &[data-selected] > [data-ui='TreeItem__box'] {
-        ${_cardColorStyle(color, tone.pressed)}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
-          ${_cardColorStyle(color, tone.hovered)}
-        }
-
-        &:focus > [data-ui='TreeItem__box'] {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-      }
-    }
-  `;
-}
-function treeItemBoxStyle(props) {
-  const { $level } = props, { space } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    padding-left: ${rem(space[2] * $level)};
-
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `;
-}
 function useTree() {
   const tree = react.useContext(TreeContext);
   if (!tree)
@@ -6691,13 +5584,14 @@ const TreeGroup = react.memo(function(props) {
       children
     }
   );
-}), Root = react.memo(styledComponents.styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styledComponents.styled(Box).attrs({ forwardedAs: "a" })(treeItemBoxStyle), ToggleArrowText = styledComponents.styled(Text)`
+}), ToggleArrowText = styled(Text)`
   & > svg {
     transition: transform 100ms;
   }
 `, TreeItem = react.memo(function(props) {
   const {
     children,
+    className,
     expanded: expandedProp = !1,
     fontSize: fontSize2 = 1,
     href,
@@ -6732,11 +5626,10 @@ const TreeGroup = react.memo(function(props) {
     if (rootRef.current)
       return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
   }, [expanded, itemPath, registerItem, selected]);
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { padding, children: [
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       Box,
       {
-        marginRight: space,
         style: {
           visibility: IconComponent || children ? "visible" : "hidden",
           pointerEvents: "none"
@@ -6750,21 +5643,22 @@ const TreeGroup = react.memo(function(props) {
     /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) })
   ] });
   return href ? /* @__PURE__ */ jsxRuntime.jsxs(
-    Root,
+    Box,
     {
       "data-selected": selected ? "" : void 0,
       "data-tree-id": id,
       "data-tree-key": itemKey,
       "data-ui": "TreeItem",
       ...restProps,
+      as: "li",
+      className: css$1.composeClassNames(className, css$1.treeItem()),
       onClick: handleClick,
       ref: rootRef,
       role: "none",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          TreeItemBox,
+          Box,
           {
-            $level: tree.level,
             "aria-expanded": expanded,
             as: linkAs,
             "data-ui": "TreeItem__box",
@@ -6772,6 +5666,9 @@ const TreeGroup = react.memo(function(props) {
             ref: treeitemRef,
             role: "treeitem",
             tabIndex,
+            style: {
+              paddingLeft: `calc(var(--space-2) * ${tree.level})`
+            },
             children: content
           }
         ),
@@ -6779,7 +5676,7 @@ const TreeGroup = react.memo(function(props) {
       ]
     }
   ) : /* @__PURE__ */ jsxRuntime.jsxs(
-    Root,
+    Box,
     {
       "data-selected": selected ? "" : void 0,
       "data-ui": "TreeItem",
@@ -6793,7 +5690,17 @@ const TreeGroup = react.memo(function(props) {
       role: "treeitem",
       tabIndex,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Box,
+          {
+            as: "div",
+            "data-ui": "TreeItem__box",
+            style: {
+              paddingLeft: `calc(var(--space-2) * ${tree.level})`
+            },
+            children: content
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }) })
       ]
     }
@@ -6891,6 +5798,7 @@ exports.isHTMLSelectElement = isHTMLSelectElement;
 exports.isHTMLTextAreaElement = isHTMLTextAreaElement;
 exports.multiply = multiply;
 exports.parseColor = parseColor;
+exports.px = px;
 exports.rem = rem;
 exports.responsiveCodeFontStyle = responsiveCodeFontStyle;
 exports.responsiveHeadingFont = responsiveHeadingFont;