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

package/dist/index.mjs

@@ -1,14 +1,15 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useState, useRef, useEffect, useDebugValue, useImperativeHandle, useSyncExternalStore, createContext, useContext, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, useReducer, startTransition } from "react";
+import { composeClassNames, label, avatar, avatarArrow, avatarImage, avatarBgStroke, avatarStroke, avatarInitials, box, text, badge, spinner, button, buttonLoadingBox, card, checkbox, checkboxInput, code, container, heading, kbd, _switch, textInput, tooltipCard, tooltip, breadcrumbs, dialogContainer, dialogCardRoot, dialogLayout, dialogHeader, dialogContent, dialogFooter, dialog, selectable, treeItem } from "@sanity/ui/css";
+import { useMemo, useState, useRef, useEffect, useDebugValue, useImperativeHandle, useSyncExternalStore, forwardRef, createElement, createContext, useContext, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, useReducer, startTransition } from "react";
 import ReactIs, { isValidElementType } from "react-is";
-import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
+import { css as css$1, keyframes as keyframes$1, ThemeProvider as ThemeProvider$2, useTheme as useTheme$2 } from "styled-components";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
 import Refractor from "react-refractor";
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
 import { motion, AnimatePresence } from "framer-motion";
-import { createPortal } from "react-dom";
 import { useEffectEvent } from "use-effect-event";
+import { createPortal } from "react-dom";
 import { getTheme_v2 as getTheme_v2$1 } from "./_chunks-es/getTheme_v2.mjs";
 const createColorTheme = createColorTheme$1, hexToRgb = hexToRgb$1, hslToRgb = hslToRgb$1, multiply = multiply$1, parseColor = parseColor$1, rgbToHex = rgbToHex$1, rgbToHsl = rgbToHsl$1, rgba = rgba$1, screen = screen$1, studioTheme = buildTheme(), EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity", POPOVER_MOTION_PROPS = {
   initial: {
@@ -33,6 +34,9 @@ const createColorTheme = createColorTheme$1, hexToRgb = hexToRgb$1, hslToRgb = h
 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`;
 }
@@ -138,7 +142,7 @@ function _getElements(element, elementsArg) {
   return ret.filter(Boolean);
 }
 function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
-  const [element, setElement] = useState(null), [elements, setElements] = useState(() => _getElements(element, elementsArg)), elementsRef = useRef(elements);
+  const [element, setElement] = useState(null), [elements2, setElements] = useState(() => _getElements(element, elementsArg)), elementsRef = useRef(elements2);
   return useEffect(() => {
     const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
     if (prevElements.length !== nextElements.length) {
@@ -160,7 +164,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);
@@ -169,7 +173,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((evt) => {
@@ -181,8 +185,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);
@@ -278,7 +282,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),
@@ -553,6 +557,169 @@ function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   }, [mediaQueryString]);
   return useDebugValue(mediaQueryString), useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
 }
+const css = css$1, keyframes = keyframes$1, ThemeProvider$1 = ThemeProvider$2, useTheme$1 = useTheme$2, 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 = 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 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 = 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 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;
@@ -648,107 +815,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 } = 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 } = 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 } = 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 } = 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 } = 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 } = getTheme_v2(props.theme);
-  return _responsive(media, props.$display, (display) => ({
-    "&:not([hidden])": { display }
-  }));
-}
-function responsiveBoxSizingStyle(props) {
-  const { media } = getTheme_v2(props.theme);
-  return _responsive(media, props.$sizing, (sizing) => ({
-    boxSizing: BOX_SIZING[sizing]
-  }));
-}
-function responsiveBoxHeightStyle(props) {
-  const { media } = getTheme_v2(props.theme);
-  return _responsive(media, props.$height, (height) => ({
-    height: BOX_HEIGHT[height]
-  }));
-}
-function responsiveBoxOverflowStyle(props) {
-  const { media } = 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
@@ -764,18 +840,6 @@ function responsiveFlexGapStyle(props) {
     gap: gap ? rem(space[gap]) : void 0
   }));
 }
-function responsiveFlexGapXStyle(props) {
-  const { media, space } = getTheme_v2(props.theme);
-  return _responsive(media, props.$gapX, (gapX) => ({
-    columnGap: gapX ? rem(space[gapX]) : void 0
-  }));
-}
-function responsiveFlexGapYStyle(props) {
-  const { media, space } = getTheme_v2(props.theme);
-  return _responsive(media, props.$gapY, (gapY) => ({
-    rowGap: gapY ? rem(space[gapY]) : void 0
-  }));
-}
 function responsiveFlexWrapStyle(props) {
   const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$wrap, (wrap) => ({ flexWrap: wrap }));
@@ -788,37 +852,30 @@ function responsiveFlexDirectionStyle(props) {
   const { media } = 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 } = 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",
@@ -831,7 +888,6 @@ const GRID_CSS = {
 };
 function responsiveGridStyle() {
   return [
-    GRID_CSS,
     responsiveGridAutoFlowStyle,
     responsiveGridAutoRowsStyle,
     responsiveGridAutoColsStyle,
@@ -890,53 +946,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 } = 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 } = getTheme_v2(props.theme);
-  return _responsive(media, props.$rowStart, (rowStart) => ({
-    gridRowStart: rowStart
-  }));
-}
-function responsiveGridItemRowEndStyle(props) {
-  const { media } = getTheme_v2(props.theme);
-  return _responsive(media, props.$rowEnd, (rowEnd) => ({ gridRowEnd: rowEnd }));
-}
-function responsiveGridItemColumnStyle(props) {
-  const { media } = 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 } = getTheme_v2(props.theme);
-  return _responsive(media, props.$columnStart, (columnStart) => ({
-    gridColumnStart: columnStart
-  }));
-}
-function responsiveGridItemColumnEndStyle(props) {
-  const { media } = 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 } = getTheme_v2(props.theme), len = Math.max($padding.length, $space.length, $fontSize.length), _padding = [], _space = [], _fontSize = [];
   for (let i = 0; i < len; i += 1)
@@ -1170,30 +1179,6 @@ function textInputRepresentationStyle(props) {
     }
   `;
 }
-function responsiveMarginStyle(props) {
-  const { theme } = props;
-  return [
-    _getResponsiveSpace(theme, ["margin"], props.$margin),
-    _getResponsiveSpace(theme, ["marginLeft", "marginRight"], props.$marginX),
-    _getResponsiveSpace(theme, ["marginTop", "marginBottom"], props.$marginY),
-    _getResponsiveSpace(theme, ["marginTop"], props.$marginTop),
-    _getResponsiveSpace(theme, ["marginRight"], props.$marginRight),
-    _getResponsiveSpace(theme, ["marginBottom"], props.$marginBottom),
-    _getResponsiveSpace(theme, ["marginLeft"], props.$marginLeft)
-  ].filter(Boolean);
-}
-function responsivePaddingStyle(props) {
-  const { theme } = props;
-  return [
-    _getResponsiveSpace(theme, ["padding"], props.$padding),
-    _getResponsiveSpace(theme, ["paddingLeft", "paddingRight"], props.$paddingX),
-    _getResponsiveSpace(theme, ["paddingTop", "paddingBottom"], props.$paddingY),
-    _getResponsiveSpace(theme, ["paddingTop"], props.$paddingTop),
-    _getResponsiveSpace(theme, ["paddingRight"], props.$paddingRight),
-    _getResponsiveSpace(theme, ["paddingBottom"], props.$paddingBottom),
-    _getResponsiveSpace(theme, ["paddingLeft"], props.$paddingLeft)
-  ].filter(Boolean);
-}
 function responsiveRadiusStyle(props) {
   const { media, radius } = getTheme_v2(props.theme);
   return _responsive(media, props.$radius, (value) => {
@@ -1201,22 +1186,6 @@ 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 } = getTheme_v2(props.theme);
-  return _responsive(
-    media,
-    props.$shadow,
-    (index) => shadowStyle(shadow[index], card.shadow.outline)
-  );
-}
 function labelBaseStyle(props) {
   const { $accent, $muted } = props, { font } = getTheme_v2(props.theme);
   return css`
@@ -1251,7 +1220,7 @@ function labelBaseStyle(props) {
     }
   `;
 }
-const Root$C = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styled.span`
+const Root$f = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styled.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1262,6 +1231,7 @@ const Root$C = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBa
     accent,
     align,
     children: childrenProp,
+    className,
     muted = !1,
     size: size2 = 2,
     textOverflow,
@@ -1270,164 +1240,31 @@ const Root$C = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBa
   } = props;
   let children = childrenProp;
   return textOverflow === "ellipsis" ? children = /* @__PURE__ */ jsx(SpanWithTextOverflow$2, { children }) : children = /* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx(
-    Root$C,
+    Root$f,
     {
       "data-ui": "Label",
       ...restProps,
-      $accent: accent,
       $align: useArrayProp(align),
-      $muted: muted,
-      $size: useArrayProp(size2),
       $weight: weight,
+      className: composeClassNames(
+        className,
+        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 } = 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 } = 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 = styled.div(
-  responsiveAvatarSizeStyle,
-  avatarStyle.root
-), Arrow$1 = styled.div(avatarStyle.arrow), BgStroke = styled.ellipse(avatarStyle.bgStroke), Stroke = styled.ellipse(avatarStyle.stroke), Initials = styled.div(avatarStyle.initials), InitialsLabel = styled(Label)({
-  color: "inherit"
-}), Image = styled.svg(avatarStyle.image), Avatar = forwardRef(function(props, ref) {
+const Avatar = forwardRef(function(props, ref) {
   const {
     __unstable_hideInnerStroke,
     as: asProp,
+    className,
     color = "gray",
     src,
     title,
@@ -1438,7 +1275,7 @@ const Root$B = styled.div(
     status = "online",
     size: sizeProp = 1,
     ...restProps
-  } = props, { avatar } = useTheme_v2(), as = ReactIs.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = useId(), [arrowPosition, setArrowPosition] = useState(
+  } = props, { avatar: avatarTheme } = useTheme_v2(), As = ReactIs.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatarTheme.sizes[size2[0]] || avatarTheme.sizes[0]).size, _radius = _sizeRem / 2, elementId = useId(), [arrowPosition, setArrowPosition] = useState(
     animateArrowFrom || arrowPositionProp || "inside"
   ), [imageFailed, setImageFailed] = useState(!1), imageId = `avatar-image-${elementId}`;
   useEffect(() => {
@@ -1455,28 +1292,34 @@ const Root$B = styled.div(
     [size2]
   );
   return /* @__PURE__ */ 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: composeClassNames(
+        className,
+        avatar({
+          arrowPosition,
+          color,
+          size: sizeProp
+        })
+      ),
       "data-status": status,
       ref,
       title,
       children: [
-        /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("span", { className: avatarArrow(), children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ 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__ */ jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
+        !imageFailed && src && /* @__PURE__ */ jsxs("svg", { className: avatarImage(), viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
           /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx(
             "image",
             {
@@ -1488,8 +1331,9 @@ const Root$B = styled.div(
           ) }) }),
           /* @__PURE__ */ jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
           !__unstable_hideInnerStroke && /* @__PURE__ */ jsx(
-            BgStroke,
+            "ellipse",
             {
+              className: avatarBgStroke(),
               cx: _radius,
               cy: _radius,
               rx: _radius,
@@ -1498,8 +1342,9 @@ const Root$B = styled.div(
             }
           ),
           /* @__PURE__ */ jsx(
-            Stroke,
+            "ellipse",
             {
+              className: avatarStroke(),
               cx: _radius,
               cy: _radius,
               rx: _radius,
@@ -1508,16 +1353,16 @@ const Root$B = styled.div(
             }
           )
         ] }),
-        (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Initials, { children: /* @__PURE__ */ jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) })
+        (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: avatarInitials(), children: /* @__PURE__ */ jsx(Label, { as: "span", size: initialsSize, style: { color: "inherit" }, weight: "medium", children: initials }) }) })
       ]
     }
   );
 });
 Avatar.displayName = "ForwardRef(Avatar)";
 function _responsiveAvatarCounterSizeStyle(props) {
-  const { avatar, media } = getTheme_v2(props.theme);
+  const { avatar: avatar2, media } = getTheme_v2(props.theme);
   return _responsive(media, props.$size, (size2) => {
-    const avatarSize = avatar.sizes[size2];
+    const avatarSize = avatar2.sizes[size2];
     return avatarSize ? {
       borderRadius: rem(avatarSize.size / 2),
       minWidth: rem(avatarSize.size),
@@ -1545,7 +1390,7 @@ function _avatarCounterBaseStyle(props) {
     }
   `;
 }
-const Root$A = styled.div(
+const Root$e = styled.div(
   _responsiveAvatarCounterSizeStyle,
   _avatarCounterBaseStyle
 ), AvatarCounter = forwardRef(function(props, ref) {
@@ -1553,7 +1398,7 @@ const Root$A = styled.div(
     () => size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0),
     [size2]
   );
-  return /* @__PURE__ */ jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
+  return /* @__PURE__ */ jsx(Root$e, { $size: size2, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
 });
 AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
 const BASE_STYLES = css`
@@ -1571,9 +1416,9 @@ function avatarStackStyle() {
   return BASE_STYLES;
 }
 function responsiveAvatarStackSizeStyle(props) {
-  const { avatar, media } = getTheme_v2(props.theme);
+  const { avatar: avatar2, media } = getTheme_v2(props.theme);
   return _responsive(media, props.$size, (size2) => {
-    const avatarSize = avatar.sizes[size2];
+    const avatarSize = avatar2.sizes[size2];
     return avatarSize ? {
       "& > div + div": {
         marginLeft: rem(avatarSize.distance)
@@ -1581,7 +1426,7 @@ function responsiveAvatarStackSizeStyle(props) {
     } : EMPTY_RECORD;
   });
 }
-const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = forwardRef(function(props, ref) {
+const Root$d = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = forwardRef(function(props, ref) {
   const {
     children: childrenProp,
     maxLength: maxLengthProp = 4,
@@ -1591,29 +1436,30 @@ const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), Ava
     () => Children.toArray(childrenProp).filter(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__ */ jsxs(Root$z, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
+  return /* @__PURE__ */ jsxs(Root$d, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
     len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }) }),
     len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
     visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsx("div", { children: cloneElement(child, { size: size2 }) }, String(childIndex)))
   ] });
 });
 AvatarStack.displayName = "ForwardRef(AvatarStack)";
-const Root$y = styled.div(
-  boxStyle,
-  flexItemStyle,
-  responsiveBoxStyle,
-  responsiveGridItemStyle,
-  responsiveMarginStyle,
-  responsivePaddingStyle
-), Box = forwardRef(function(props, ref) {
+const Box = 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,
@@ -1629,119 +1475,70 @@ const Root$y = styled.div(
     paddingRight,
     paddingBottom,
     paddingLeft,
+    pointerEvents,
+    position,
     row,
     rowStart,
     rowEnd,
     sizing,
+    width,
+    wrap,
     ...restProps
   } = props;
   return /* @__PURE__ */ 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: composeClassNames(
+        className,
+        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 } = getTheme_v2(props.theme);
-  return css`
-    min-width: 0;
-    color: var(--card-fg-color);
-
-    ${$accent && css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted && 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 = styled.div(
-  responsiveTextFont,
-  responsiveTextAlignStyle,
-  textBaseStyle
-), SpanWithTextOverflow$1 = styled.span`
+const SpanWithTextOverflow$1 = styled.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1751,7 +1548,9 @@ const Root$x = styled.div(
   const {
     accent = !1,
     align,
+    as: As = "div",
     children: childrenProp,
+    className,
     muted = !1,
     size: size2 = 2,
     textOverflow,
@@ -1760,282 +1559,86 @@ const Root$x = styled.div(
   } = props;
   let children = childrenProp;
   return textOverflow === "ellipsis" ? children = /* @__PURE__ */ jsx(SpanWithTextOverflow$1, { children }) : children = /* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx(
-    Root$x,
+    As,
     {
       "data-ui": "Text",
       ...restProps,
-      $accent: accent,
       $align: useArrayProp(align),
-      $muted: muted,
       ref,
-      $size: useArrayProp(size2),
-      $weight: weight,
+      className: composeClassNames(
+        className,
+        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 = styled(Box)(
-  responsiveRadiusStyle,
-  badgeStyle
-), Badge = forwardRef(function(props, ref) {
+const Badge = 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__ */ jsx(
-    Root$w,
+    Box,
     {
       "data-ui": "Badge",
       ...restProps,
-      $tone: tone,
-      $radius: useArrayProp(radius),
-      padding: useArrayProp(padding),
+      className: composeClassNames(
+        className,
+        badge({
+          radius,
+          tone
+        })
+      ),
+      display,
+      padding,
       ref,
       children: /* @__PURE__ */ jsx(Text, { size: fontSize2, children })
     }
   );
 });
 Badge.displayName = "ForwardRef(Badge)";
-const Root$v = styled(Box)(
+const Root$c = styled(Box)(
   flexItemStyle,
   responsiveFlexStyle
 ), Flex = forwardRef(function(props, ref) {
-  const { align, as, direction = "row", gap, gapX, gapY, justify, wrap, ...restProps } = props;
+  const { as, direction = "row", ...restProps } = props;
   return /* @__PURE__ */ 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 = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-`, Root$u = styled(Text)`
-  & > span > svg {
-    animation: ${rotate$1} 500ms linear infinite;
-  }
-`, Spinner = forwardRef(function(props, ref) {
-  return /* @__PURE__ */ jsx(Root$u, { "data-ui": "Spinner", ...props, ref, children: /* @__PURE__ */ jsx(SpinnerIcon, {}) });
+const Spinner = forwardRef(function(props, ref) {
+  return /* @__PURE__ */ jsx(Text, { "data-ui": "Spinner", ...props, className: spinner(), ref, children: /* @__PURE__ */ jsx(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 } = getTheme_v2(props.theme);
-  return 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" && 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 } = 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 = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = 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 = forwardRef(function(props, ref) {
+const Button = forwardRef(function(props, ref) {
   const {
+    as: As = "button",
     children,
+    className,
     disabled,
     fontSize: fontSize2 = 1,
     icon: IconComponent,
@@ -2053,7 +1656,7 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
     radius: radiusProp = 2,
     selected,
     space: spaceProp = 3,
-    text,
+    text: text2,
     textAlign,
     textOverflow = "ellipsis",
     textWeight,
@@ -2062,7 +1665,7 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
     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 = 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 = useMemo(
     () => ({
       // flex: 1,
       padding,
@@ -2076,27 +1679,32 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
     [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]
   );
   return /* @__PURE__ */ jsxs(
-    Root$t,
+    As,
     {
       "data-ui": "Button",
       ...restProps,
-      $mode: mode,
-      $radius: radius,
-      $tone: tone,
+      className: composeClassNames(
+        className,
+        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__ */ jsx(LoadingBox, { children: /* @__PURE__ */ jsx(Spinner, {}) }),
-        (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxs(Flex, { as: "span", justify, gap: space, children: [
+        !!loading && /* @__PURE__ */ jsx(Box, { align: "center", className: buttonLoadingBox(), display: "flex", justify: "center", children: /* @__PURE__ */ jsx(Spinner, { size: fontSize2 }) }),
+        (IconComponent || text2 || IconRightComponent) && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxs(Flex, { as: "span", justify, gap: space, children: [
           IconComponent && /* @__PURE__ */ jsxs(Text, { as: "span", size: fontSize2, style: { flex: "none" }, children: [
             isValidElement(IconComponent) && IconComponent,
             isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
           ] }),
-          text && /* @__PURE__ */ jsx(Box, { as: "span", children: /* @__PURE__ */ jsx(
+          text2 && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
             Text,
             {
               as: "span",
@@ -2104,8 +1712,8 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
               align: textAlign,
               size: fontSize2,
               textOverflow,
-              weight: textWeight ?? button.textWeight,
-              children: text
+              weight: textWeight ?? buttonTheme.textWeight,
+              children: text2
             }
           ) }),
           IconRightComponent && /* @__PURE__ */ jsxs(Text, { as: "span", size: fontSize2, style: { flex: "none" }, children: [
@@ -2119,299 +1727,60 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
   );
 });
 Button.displayName = "ForwardRef(Button)";
-function cardStyle(props) {
-  return [cardBaseStyle(props), cardColorStyle(props)];
-}
-function cardBaseStyle(props) {
-  const { $checkered } = props, { space } = getTheme_v2(props.theme);
-  return css`
-    ${$checkered && 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 } = getTheme_v2(props.theme), border2 = { width: card.border.width, color: "var(--card-border-color)" };
-  return 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 = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
+const RootCardContext = createContext(null), Card = 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 = isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
-  return /* @__PURE__ */ jsx(ThemeColorProvider, { scheme, tone, children: /* @__PURE__ */ jsx(
-    Root$s,
+  } = props, as = isValidElementType(asProp) ? asProp : "div", rootCard = useContext(RootCardContext), rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, node = /* @__PURE__ */ jsx(ThemeColorProvider, { scheme, tone, children: /* @__PURE__ */ 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: composeClassNames(
+        className,
+        rootCard ? void 0 : "root",
+        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__ */ jsx(RootCardContext.Provider, { value: { renderedVars: !0 }, children: node });
 });
 Card.displayName = "ForwardRef(Card)";
-function checkboxBaseStyles() {
-  return css`
-    position: relative;
-    display: inline-block;
-  `;
-}
-function inputElementStyles(props) {
-  const { color, input, radius } = getTheme_v2(props.theme), { focusRing } = input.checkbox;
-  return 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 = styled.div(checkboxBaseStyles), Input$5 = styled.input(inputElementStyles), Checkbox = forwardRef(function(props, forwardedRef) {
+const Checkbox = forwardRef(function(props, forwardedRef) {
   const {
     checked,
     className,
@@ -2427,14 +1796,15 @@ const Root$r = styled.div(checkboxBaseStyles), Input$5 = styled.input(inputEleme
     () => ref.current
   ), useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, [indeterminate]), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxs(Root$r, { className, "data-ui": "Checkbox", style, children: [
+  }, [indeterminate]), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxs("span", { className: composeClassNames(className, checkbox()), "data-ui": "Checkbox", style, children: [
     /* @__PURE__ */ jsx(
-      Input$5,
+      "input",
       {
         "data-read-only": !disabled && readOnly ? "" : void 0,
         "data-error": customValidity ? "" : void 0,
         ...restProps,
         checked,
+        className: composeClassNames(className, checkboxInput()),
         disabled: disabled || readOnly,
         type: "checkbox",
         readOnly,
@@ -2448,120 +1818,49 @@ const Root$r = styled.div(checkboxBaseStyles), Input$5 = styled.input(inputEleme
   ] });
 });
 Checkbox.displayName = "ForwardRef(Checkbox)";
-function codeSyntaxHighlightingStyle({ theme }) {
+const Code = forwardRef(function(props, ref) {
   const {
-    color: { syntax: color }
-  } = getTheme_v2(theme);
-  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 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.hasLanguage(language) : !1;
+  return /* @__PURE__ */ jsxs(
+    As,
+    {
+      "data-ui": "Code",
+      ...restProps,
+      className: composeClassNames(className, code({ size: size2, weight })),
+      ref,
+      children: [
+        !(language && registered) && /* @__PURE__ */ jsx("code", { children }),
+        language && registered && /* @__PURE__ */ jsx(Refractor, { inline: !0, language, value: String(children) })
+      ]
     }
-  `;
-}
-const Root$q = styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = forwardRef(function(props, ref) {
-  const { children, language: languageProp, size: size2 = 2, weight, ...restProps } = props, language = typeof languageProp == "string" ? languageProp : void 0, registered = language ? Refractor.hasLanguage(language) : !1;
-  return /* @__PURE__ */ jsxs(Root$q, { "data-ui": "Code", ...restProps, $size: useArrayProp(size2), $weight: weight, ref, children: [
-    !(language && registered) && /* @__PURE__ */ jsx("code", { children }),
-    language && registered && /* @__PURE__ */ jsx(Refractor, { 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 } = getTheme_v2(props.theme);
-  return _responsive(media, props.$width, (val) => ({
-    maxWidth: val === "auto" ? "none" : rem(container[val])
-  }));
-}
-const Root$p = styled(Box)(
-  containerBaseStyle,
-  responsiveContainerWidthStyle
-), Container = forwardRef(function(props, ref) {
-  const { as, width = 2, ...restProps } = props;
+const Container = forwardRef(function(props, ref) {
+  const { as, className, width = 2, ...restProps } = props;
   return /* @__PURE__ */ jsx(
-    Root$p,
+    Box,
     {
       "data-ui": "Container",
       ...restProps,
-      $width: useArrayProp(width),
-      forwardedAs: as,
+      as,
+      className: composeClassNames(className, container({ width })),
       ref
     }
   );
 });
 Container.displayName = "ForwardRef(Container)";
-const Root$o = styled(Box)(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
+const Root$b = styled(Box)(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
   const { as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps } = props;
   return /* @__PURE__ */ jsx(
-    Root$o,
+    Root$b,
     {
       "data-as": typeof as == "string" ? as : void 0,
       "data-ui": "Grid",
@@ -2574,6 +1873,7 @@ const Root$o = styled(Box)(responsiveGridStyle), Grid = forwardRef(function(prop
       $gapX: useArrayProp(gapX),
       $gapY: useArrayProp(gapY),
       $rows: useArrayProp(rows),
+      display: "grid",
       forwardedAs: as,
       ref,
       children
@@ -2581,61 +1881,7 @@ const Root$o = styled(Box)(responsiveGridStyle), Grid = forwardRef(function(prop
   );
 });
 Grid.displayName = "ForwardRef(Grid)";
-function headingBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = getTheme_v2(props.theme);
-  return css`
-    ${$accent && css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted && 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 = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styled.span`
+const SpanWithTextOverflow = styled.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -2645,7 +1891,9 @@ const Root$n = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsive
   const {
     accent = !1,
     align,
+    as: As = "div",
     children: childrenProp,
+    className,
     muted = !1,
     size: size2 = 2,
     textOverflow,
@@ -2654,81 +1902,71 @@ const Root$n = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsive
   } = props;
   let children = childrenProp;
   return textOverflow === "ellipsis" && (children = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children })), /* @__PURE__ */ jsx(
-    Root$n,
+    As,
     {
       "data-ui": "Heading",
       ...restProps,
-      $accent: accent,
       $align: useArrayProp(align),
-      $muted: muted,
-      $size: useArrayProp(size2),
-      $weight: weight,
+      className: composeClassNames(
+        className,
+        heading({
+          accent,
+          muted,
+          size: size2,
+          weight
+        })
+      ),
       ref,
       children: /* @__PURE__ */ 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 } = 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 = styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
+const Inline = forwardRef(function(props, ref) {
   const { as, children: childrenProp, space, ...restProps } = props, children = useMemo(
-    () => Children.map(childrenProp, (child) => child && /* @__PURE__ */ jsx("div", { children: child })),
+    () => Children.map(childrenProp, (child) => child && /* @__PURE__ */ jsx(Box, { maxWidth: "fill", children: child })),
     [childrenProp]
   );
   return /* @__PURE__ */ 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 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 = forwardRef(function(props, ref) {
+  const {
+    as = "kbd",
+    children,
+    className,
+    display = "inline-block",
+    fontSize: fontSize2 = 0,
+    padding = 1,
+    radius = 2,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-ui": "KBD",
+      ...restProps,
+      as,
+      className: composeClassNames(className, kbd({ radius })),
+      display,
+      padding,
+      ref,
+      children: /* @__PURE__ */ jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children })
     }
-  `;
-}
-const Root$l = styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
-  const { children, fontSize: fontSize2 = 0, padding = 1, radius = 2, ...restProps } = props;
-  return /* @__PURE__ */ jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: useArrayProp(radius), ref, children: /* @__PURE__ */ jsx(Box, { as: "span", padding, children: /* @__PURE__ */ jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }) }) });
+  );
 });
 KBD.displayName = "ForwardRef(KBD)";
 const origin = {
@@ -2788,7 +2026,7 @@ 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 = styled.div(
+const Root$a = styled.div(
   ({ $w: w }) => css`
     position: absolute;
     width: ${w}px;
@@ -2841,7 +2079,7 @@ const Root$k = styled.div(
 `, ShapePath = styled.path`
   fill: var(--card-bg-color);
 `, Arrow = forwardRef(function(props, ref) {
-  const { width: w, height: h, radius = 0, ...restProps } = props, { card } = useTheme_v2(), strokeWidth = card.shadow.outline, center = w / 2, points = [
+  const { width: w, height: h, radius = 0, ...restProps } = props, { card: card2 } = useTheme_v2(), strokeWidth = card2.shadow.outline, center = w / 2, points = [
     {
       x: 0,
       y: 0
@@ -2866,7 +2104,7 @@ const Root$k = styled.div(
       y: 0
     }
   ], cmds = getRoundedCommands(points), path = compileCommands(cmds), strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`;
-  return /* @__PURE__ */ jsx(Root$k, { ...restProps, $w: w, ref, children: /* @__PURE__ */ jsxs("svg", { width: w, height: w, viewBox: `0 0 ${w} ${w}`, children: [
+  return /* @__PURE__ */ jsx(Root$a, { ...restProps, $w: w, ref, children: /* @__PURE__ */ jsxs("svg", { width: w, height: w, viewBox: `0 0 ${w} ${w}`, children: [
     /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsx("rect", { x: 0, y: strokeWidth, width: w, height: w, fill: "white" }) }),
     /* @__PURE__ */ jsx(StrokePath, { d: strokePath, mask: "url(#stroke-mask)", strokeWidth: strokeWidth * 2 }),
     /* @__PURE__ */ jsx(ShapePath, { d: fillPath })
@@ -3080,8 +2318,15 @@ function LayerProvider(props) {
   return /* @__PURE__ */ jsx(LayerContext.Provider, { value, children });
 }
 LayerProvider.displayName = "LayerProvider";
-const Root$j = styled.div({ position: "relative" }), LayerChildren = forwardRef(function(props, forwardedRef) {
-  const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), ref = useRef(null), isTopLayerRef = useRef(isTopLayer);
+const LayerChildren = forwardRef(function(props, forwardedRef) {
+  const {
+    children,
+    onActivate,
+    onFocus,
+    position = "relative",
+    style = EMPTY_RECORD,
+    ...restProps
+  } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), ref = useRef(null), isTopLayerRef = useRef(isTopLayer);
   useImperativeHandle(forwardedRef, () => ref.current), useEffect(() => {
     isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({ activeElement: lastFocusedRef.current }), isTopLayerRef.current = isTopLayer;
   }, [isTopLayer, onActivate]);
@@ -3093,7 +2338,18 @@ const Root$j = styled.div({ position: "relative" }), LayerChildren = forwardRef(
     },
     [isTopLayer, onFocus]
   );
-  return /* @__PURE__ */ jsx(Root$j, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: { ...style, zIndex }, children });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-ui": "Layer",
+      ...restProps,
+      onFocus: handleFocus,
+      position,
+      ref,
+      style: { ...style, zIndex },
+      children
+    }
+  );
 }), Layer = forwardRef(function(props, ref) {
   const { children, zOffset = 1, ...restProps } = props;
   return /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(LayerChildren, { ...restProps, ref, children }) });
@@ -3122,7 +2378,7 @@ function Portal(props) {
 }
 Portal.displayName = "Portal";
 function PortalProvider(props) {
-  const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(
+  const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements2 = useUnique(elementsProp), fallbackElement = useSyncExternalStore(
     emptySubscribe,
     () => document.body,
     () => null
@@ -3130,8 +2386,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__ */ jsx(PortalContext.Provider, { value, children });
 }
 PortalProvider.displayName = "PortalProvider";
@@ -3147,7 +2403,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 = styled.div`
+const Root$9 = styled.div`
   display: block;
   width: 0;
   height: 0;
@@ -3156,10 +2412,10 @@ const Root$i = styled.div`
   overflow: clip;
 `, SrOnly = forwardRef(function(props, ref) {
   const { as, children } = props;
-  return /* @__PURE__ */ jsx(Root$i, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children });
+  return /* @__PURE__ */ jsx(Root$9, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children });
 });
 SrOnly.displayName = "ForwardRef(SrOnly)";
-const Root$h = styled.div`
+const Root$8 = styled.div`
   position: relative;
 `, ItemWrapper = styled.div`
   position: absolute;
@@ -3207,7 +2463,7 @@ const Root$h = styled.div`
     const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
     return /* @__PURE__ */ jsx(ItemWrapper, { style: { top: itemIndex * (itemHeight + space[gap]) }, children: node }, key2);
   }), [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]), wrapperStyle = useMemo(() => ({ height }), [height]);
-  return /* @__PURE__ */ jsx(Root$h, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
+  return /* @__PURE__ */ jsx(Root$8, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ 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 = {
@@ -3229,7 +2485,7 @@ function size(options) {
   return {
     name: "@sanity/ui/size",
     async fn(args) {
-      const { elements, placement, platform, rects } = args, { floating, reference } = rects, overflow = await detectOverflow(args, {
+      const { elements: elements2, placement, platform, rects } = args, { floating, reference } = rects, overflow = await detectOverflow(args, {
         altBoundary: !0,
         boundary: options.boundaryElement || void 0,
         elementContext: "floating",
@@ -3241,17 +2497,17 @@ 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 } } : {};
     }
   };
 }
 function calcCurrentWidth(params) {
-  const { container, mediaIndex, width } = params, w = width[mediaIndex], currentWidth = w === void 0 ? width[width.length - 1] : w;
-  return typeof currentWidth == "number" ? container[currentWidth] : void 0;
+  const { container: container2, mediaIndex, width } = params, w = width[mediaIndex], currentWidth = w === void 0 ? width[width.length - 1] : w;
+  return typeof currentWidth == "number" ? container2[currentWidth] : void 0;
 }
 function calcMaxWidth(params) {
   const { boundaryWidth, currentWidth } = params;
@@ -3261,18 +2517,7 @@ function calcMaxWidth(params) {
       (boundaryWidth || 1 / 0) - DEFAULT_POPOVER_PADDING * 2
     );
 }
-const MotionCard$1 = styled(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 = memo(
+const MotionCard$1 = motion(Card), PopoverCard = memo(
   forwardRef(function(props, ref) {
     const {
       __unstable_margins: marginsProp,
@@ -3325,6 +2570,7 @@ const MotionCard$1 = styled(motion(Card))`
     return /* @__PURE__ */ jsxs(
       MotionCard$1,
       {
+        className: "popover-card",
         "data-ui": "Popover",
         ...restProps,
         "data-placement": placement,
@@ -3356,7 +2602,7 @@ const MotionCard$1 = styled(motion(Card))`
 PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
 const Popover = memo(
   forwardRef(function(props, forwardedRef) {
-    const { container, layer } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
+    const { container: container2, layer } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = !1,
       arrow: arrowProp = !1,
@@ -3372,27 +2618,27 @@ const Popover = 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 = useRef(null), arrowRef = useRef(null), rootBoundary = "viewport";
+    } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = useRef(null), arrowRef = useRef(null), rootBoundary = "viewport";
     useImperativeHandle(
       forwardedRef,
       () => ref.current
     );
     const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
-      container,
+      container: container2,
       mediaIndex,
       width: widthArrayProp
     }), widthRef = useRef(width);
@@ -3421,13 +2667,13 @@ const Popover = memo(
         })
       ), ret.push(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,
@@ -3481,11 +2727,11 @@ const Popover = memo(
         typeof childRef == "function" ? childRef(node) : childRef && (childRef.current = node);
       },
       [childProp, refs]
-    ), child = useMemo(() => childProp ? cloneElement(childProp, { ref: referenceElement ? void 0 : setReference }) : null, [childProp, referenceElement, setReference]);
+    ), child = useMemo(() => !childProp || referenceElement ? null : cloneElement(childProp, { ref: setReference }), [childProp, referenceElement, setReference]);
     if (useEffect(() => {
       updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
     }, [update, updateRef]), useEffect(() => {
-      referenceElement && refs.setReference(referenceElement);
+      child || refs.setReference(referenceElement || null);
     }, [referenceElement, refs, child]), disabled)
       return childProp || /* @__PURE__ */ jsx(Fragment, {});
     const popover = /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(
@@ -3635,14 +2881,14 @@ function inputElementStyle(props) {
     }
   `;
 }
-const Root$g = styled.div(radioBaseStyle), Input$4 = styled.input(inputElementStyle), Radio = forwardRef(function(props, forwardedRef) {
+const Root$7 = styled.div(radioBaseStyle), Input$2 = styled.input(inputElementStyle), Radio = forwardRef(function(props, forwardedRef) {
   const { className, disabled, style, customValidity, readOnly, ...restProps } = props, ref = useRef(null);
   return useImperativeHandle(
     forwardedRef,
     () => ref.current
-  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxs(Root$g, { className, "data-ui": "Radio", style, children: [
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxs(Root$7, { className, "data-ui": "Radio", style, children: [
     /* @__PURE__ */ jsx(
-      Input$4,
+      Input$2,
       {
         "data-read-only": !disabled && readOnly ? "" : void 0,
         "data-error": customValidity ? "" : void 0,
@@ -3791,7 +3037,7 @@ const selectStyle = {
   root: rootStyle,
   input: inputStyle,
   iconBox: iconBoxStyle
-}, Root$f = styled.div(selectStyle.root), Input$3 = styled.select(selectStyle.input), IconBox = styled(Box)(selectStyle.iconBox), Select = forwardRef(function(props, forwardedRef) {
+}, Root$6 = styled.div(selectStyle.root), Input$1 = styled.select(selectStyle.input), IconBox = styled(Box)(selectStyle.iconBox), Select = forwardRef(function(props, forwardedRef) {
   const {
     children,
     customValidity,
@@ -3806,9 +3052,9 @@ const selectStyle = {
   return useImperativeHandle(
     forwardedRef,
     () => ref.current
-  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxs(Root$f, { "data-ui": "Select", children: [
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxs(Root$6, { "data-ui": "Select", children: [
     /* @__PURE__ */ jsx(
-      Input$3,
+      Input$1,
       {
         "data-read-only": !disabled && readOnly ? "" : void 0,
         "data-ui": "Select",
@@ -3826,223 +3072,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 } = getTheme_v2(props.theme);
-  return _responsive(media, props.$space, (spaceIndex) => ({
-    gridGap: rem(space[spaceIndex])
-  }));
-}
-const Root$e = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function(props, ref) {
+const Stack = forwardRef(function(props, ref) {
   const { as, space, ...restProps } = props;
   return /* @__PURE__ */ 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 css`
-    position: relative;
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `;
-}
-function switchInputStyles() {
-  return 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 } = getTheme_v2(props.theme);
-  return 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 } = getTheme_v2(props.theme);
-  return 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 } = 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 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 && css`
-      transform: translate3d(${checkedOffset}px, 0, 0);
-    `}
-
-    ${$indeterminate && css`
-      transform: translate3d(${indeterminateOffset}px, 0, 0);
-    `}
-  `;
-}
-const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInputStyles), Representation = styled.span(switchRepresentationStyles), Track = styled.span(switchTrackStyles), Thumb = styled.span(switchThumbStyles), Switch = forwardRef(function(props, forwardedRef) {
+const Switch = forwardRef(function(props, forwardedRef) {
   const { checked, className, disabled, indeterminate, readOnly, style, ...restProps } = props, ref = useRef(null);
   return useImperativeHandle(
     forwardedRef,
     () => ref.current
   ), useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, [indeterminate]), /* @__PURE__ */ jsxs(Root$d, { className, "data-ui": "Switch", style, children: [
-    /* @__PURE__ */ jsx(
-      Input$2,
-      {
-        "data-read-only": !disabled && readOnly ? "" : void 0,
-        ...restProps,
-        checked: indeterminate !== !0 && checked,
-        disabled: disabled || readOnly,
-        type: "checkbox",
-        ref
-      }
-    ),
-    /* @__PURE__ */ jsxs(Representation, { "aria-hidden": !0, "data-name": "representation", children: [
-      /* @__PURE__ */ jsx(Track, {}),
-      /* @__PURE__ */ jsx(Thumb, { $checked: checked, $indeterminate: indeterminate })
-    ] })
-  ] });
+  }, [indeterminate]), /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: composeClassNames(className, _switch()),
+      "data-ui": "Switch",
+      display: "inline-block",
+      position: "relative",
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "data-read-only": !disabled && readOnly ? "" : void 0,
+            ...restProps,
+            checked: indeterminate !== !0 && checked,
+            className: "switch-input",
+            disabled: disabled || readOnly,
+            type: "checkbox",
+            ref
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": !0, className: "switch-presentation", "data-name": "representation", children: [
+          /* @__PURE__ */ jsx("span", { className: "switch-track" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "switch-thumb",
+              "data-checked": checked ? "" : void 0,
+              "data-indeterminate": indeterminate ? "" : void 0
+            }
+          )
+        ] })
+      ]
+    }
+  );
 });
 Switch.displayName = "ForwardRef(Switch)";
-const Root$c = styled.span(textInputRootStyle), InputRoot$1 = styled.span`
+const Root$5 = styled.span(textInputRootStyle), InputRoot = styled.span`
   flex: 1;
   min-width: 0;
   display: block;
   position: relative;
-`, Input$1 = styled.textarea(
+`, Input = styled.textarea(
   responsiveInputPaddingStyle,
   textInputBaseStyle,
   textInputFontSizeStyle
-), Presentation$1 = styled.div(
+), Presentation = styled.div(
   responsiveRadiusStyle,
   textInputRepresentationStyle
 ), TextArea = forwardRef(function(props, forwardedRef) {
   const {
-    border: border2 = !0,
+    border = !0,
     customValidity,
     disabled = !1,
     fontSize: fontSize2 = 2,
@@ -4055,9 +3161,9 @@ const Root$c = styled.span(textInputRootStyle), InputRoot$1 = styled.span`
   return useImperativeHandle(
     forwardedRef,
     () => ref.current
-  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxs(InputRoot$1, { children: [
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsx(Root$5, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxs(InputRoot, { children: [
     /* @__PURE__ */ jsx(
-      Input$1,
+      Input,
       {
         "data-as": "textarea",
         "data-scheme": rootTheme.scheme,
@@ -4074,13 +3180,13 @@ const Root$c = styled.span(textInputRootStyle), InputRoot$1 = styled.span`
       }
     ),
     /* @__PURE__ */ 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
       }
@@ -4088,55 +3194,20 @@ const Root$c = styled.span(textInputRootStyle), InputRoot$1 = styled.span`
   ] }) });
 });
 TextArea.displayName = "ForwardRef(TextArea)";
-const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled(Card).attrs({ forwardedAs: "span" })(textInputRootStyle), InputRoot = styled.span`
-  flex: 1;
-  min-width: 0;
-  display: block;
-  position: relative;
-`, Prefix = styled(Card).attrs({ forwardedAs: "span" })`
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-
-  & > span {
-    display: block;
-    margin: -1px;
-  }
-`, Suffix = styled(Card).attrs({ forwardedAs: "span" })`
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  & > span {
-    display: block;
-    margin: -1px;
-  }
-`, Input = styled.input(
-  responsiveInputPaddingStyle,
-  textInputBaseStyle,
-  textInputFontSizeStyle
-), Presentation = styled.span(
-  responsiveRadiusStyle,
-  textInputRepresentationStyle
-), LeftBox = styled(Box)`
-  position: absolute;
-  top: 0;
-  left: 0;
-`, RightBox = styled(Box)`
-  position: absolute;
-  top: 0;
-  right: 0;
-`, RightCard = styled(Card)`
-  background-color: transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
-`, TextInputClearButton = styled(Button)({
+const CLEAR_BUTTON_BOX_STYLE = {
+  backgroundColor: "transparent",
+  top: 0,
+  right: 0,
+  zIndex: 2
+}, TextInputClearButton = styled(Button)({
   "&:not([hidden])": {
     display: "block"
   }
 }), TextInput = forwardRef(function(props, forwardedRef) {
   const {
     __unstable_disableFocusRing,
-    border: border2 = !0,
+    border = !0,
+    className,
     clearButton,
     disabled = !1,
     fontSize: fontSizeProp = 2,
@@ -4147,13 +3218,13 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled(Card).attrs({ forw
     prefix,
     radius: radiusProp = 2,
     readOnly,
-    space: spaceProp = 3,
+    space: _space = 3,
     suffix,
     customValidity,
     type = "text",
-    weight,
+    weight: _width,
     ...restProps
-  } = props, ref = 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 = useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), $hasClearButton = !!clearButton;
   useImperativeHandle(
     forwardedRef,
     () => ref.current
@@ -4166,27 +3237,40 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled(Card).attrs({ forw
     },
     [onClear, ref]
   ), prefixNode = useMemo(
-    () => prefix && /* @__PURE__ */ jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: prefix }) }),
+    () => prefix && /* @__PURE__ */ jsx(
+      Card,
+      {
+        as: "span",
+        borderTop: !0,
+        borderLeft: !0,
+        borderBottom: !0,
+        className: "text-input-prefix",
+        radius,
+        sizing: "border",
+        tone: "inherit",
+        children: /* @__PURE__ */ jsx("span", { children: prefix })
+      }
+    ),
     [prefix, radius]
   ), presentationNode = useMemo(
     () => /* @__PURE__ */ 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__ */ jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+          IconComponent && /* @__PURE__ */ jsx(Box, { as: "span", padding, position: "absolute", style: { top: 0, left: 0 }, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
             isValidElement(IconComponent) && IconComponent,
             isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
           ] }) }),
-          !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsx(RightBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+          !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsx(Box, { as: "span", padding, position: "absolute", style: { top: 0, right: 0 }, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
             isValidElement(IconRightComponent) && IconRightComponent,
             isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
           ] }) })
@@ -4195,16 +3279,16 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled(Card).attrs({ forw
     ),
     [
       __unstable_disableFocusRing,
-      border2,
+      border,
       fontSize2,
       IconComponent,
       IconRightComponent,
       padding,
       radius,
       rootTheme,
-      $hasClearButton,
-      $hasPrefix,
-      $hasSuffix
+      $hasClearButton
+      // $hasPrefix,
+      // $hasSuffix,
     ]
   ), clearButtonBoxPadding = useMemo(
     () => padding.map((v) => v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2),
@@ -4217,10 +3301,10 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled(Card).attrs({ forw
     [clearButton]
   ), clearButtonNode = useMemo(
     () => !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(
-      RightCard,
+      Card,
       {
-        forwardedAs: "span",
         padding: clearButtonBoxPadding,
+        position: "absolute",
         style: CLEAR_BUTTON_BOX_STYLE,
         tone: customValidity ? "critical" : "inherit",
         children: /* @__PURE__ */ jsx(
@@ -4254,38 +3338,63 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled(Card).attrs({ forw
       readOnly
     ]
   ), suffixNode = useMemo(
-    () => suffix && /* @__PURE__ */ jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: suffix }) }),
+    () => suffix && /* @__PURE__ */ jsx(
+      Card,
+      {
+        as: "span",
+        borderTop: !0,
+        borderRight: !0,
+        borderBottom: !0,
+        className: "text-input-suffix",
+        radius,
+        sizing: "border",
+        tone: "inherit",
+        children: /* @__PURE__ */ jsx("span", { children: suffix })
+      }
+    ),
     [radius, suffix]
   );
-  return /* @__PURE__ */ jsxs(Root$b, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
-    prefixNode,
-    /* @__PURE__ */ jsxs(InputRoot, { children: [
-      /* @__PURE__ */ 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__ */ jsxs(
+    Card,
+    {
+      align: "center",
+      as: "span",
+      className: composeClassNames(className, textInput({ size: fontSizeProp })),
+      "data-ui": "TextInput",
+      display: "flex",
+      tone: rootTheme.tone,
+      children: [
+        prefixNode,
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            as: "span",
+            className: "text-input-wrapper",
+            flex: 1,
+            position: "relative",
+            children: [
+              /* @__PURE__ */ 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) {
@@ -4311,12 +3420,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 = styled(motion(Card))`
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`, TooltipCard = memo(
+}, MotionCard = motion(Card), TooltipCard = memo(
   forwardRef(function(props, ref) {
     const {
       animate,
@@ -4356,6 +3460,8 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
       {
         "data-ui": "Tooltip__card",
         ...restProps,
+        "data-animate": animate ? "" : void 0,
+        className: tooltipCard(),
         "data-placement": placement,
         padding,
         radius,
@@ -4405,14 +3511,13 @@ function TooltipDelayGroupProvider(props) {
   return /* @__PURE__ */ jsx(TooltipDelayGroupContext.Provider, { value, children });
 }
 TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
-const Root$a = styled(Layer)`
-  pointer-events: none;
-`, Tooltip = forwardRef(function(props, forwardedRef) {
+const Tooltip = 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"],
@@ -4517,8 +3622,8 @@ const Root$a = styled(Layer)`
     },
     [update]
   ), setFloating = useCallback(
-    (node) => {
-      ref.current = node, refs.setFloating(node);
+    (node2) => {
+      ref.current = node2, refs.setFloating(node2);
     },
     [refs]
   ), childRef = useRef(null);
@@ -4545,11 +3650,12 @@ const Root$a = styled(Layer)`
       return setReferenceElement(childRef.current), () => setReferenceElement(null);
   }, [child]), !child) return /* @__PURE__ */ jsx(Fragment, {});
   if (disabled) return child;
-  const tooltip = /* @__PURE__ */ jsx(
-    Root$a,
+  const node = /* @__PURE__ */ jsx(
+    Layer,
     {
       "data-ui": "Tooltip",
       ...restProps,
+      className: composeClassNames(className, tooltip()),
       ref: setFloating,
       style: {
         ...floatingStyles,
@@ -4577,7 +3683,7 @@ const Root$a = styled(Layer)`
         }
       )
     }
-  ), children = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip);
+  ), children = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: node }) : node);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
     child
@@ -4600,7 +3706,7 @@ function useCloseOnMouseLeave({
     return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
   }, [onMouseMove, showTooltip]);
 }
-const Root$9 = styled.div`
+const Root$4 = styled.div`
   line-height: 0;
 `, ListBox = styled(Box)`
   & > ul {
@@ -4660,7 +3766,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 = forwardRef(function(props, forwardedRef) {
   const {
-    border: border2 = !0,
+    border = !0,
     customValidity,
     disabled,
     filterOption: filterOptionProp,
@@ -4714,13 +3820,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;
@@ -4818,7 +3924,10 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   }, [disabled, handleClearButtonFocus, loading, value]), openButtonBoxPadding = useMemo(
     () => padding.map((v) => v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2),
     [padding]
-  ), openButtonPadding = useMemo(() => padding.map((v) => Math.max(v - 1, 0)), [padding]), openButtonProps = useMemo(
+  ), openButtonPadding = useMemo(
+    () => padding.map((v) => Math.max(v - 1, 0)),
+    [padding]
+  ), openButtonProps = useMemo(
     () => typeof openButton == "object" ? openButton : EMPTY_RECORD,
     [openButton]
   ), handleOpenClick = useCallback(
@@ -4862,7 +3971,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
       autoCapitalize: "off",
       autoComplete: "off",
       autoCorrect: "off",
-      border: border2,
+      border,
       clearButton,
       customValidity,
       disabled,
@@ -4979,7 +4088,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     renderPopover
   ]);
   return /* @__PURE__ */ jsxs(
-    Root$9,
+    Root$4,
     {
       "data-ui": "Autocomplete",
       onBlur: handleRootBlur,
@@ -4994,11 +4103,10 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   );
 });
 InnerAutocomplete.displayName = "ForwardRef(Autocomplete)";
-const Autocomplete = InnerAutocomplete, Root$8 = styled.nav`
-  line-height: 0;
-`, Breadcrumbs = forwardRef(function(props, ref) {
+const Autocomplete = InnerAutocomplete, Breadcrumbs = forwardRef(function(props, ref) {
   const {
     children,
+    className,
     expandButton: expandButtonProps,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     gap: _gapProp,
@@ -5047,60 +4155,21 @@ const Autocomplete = InnerAutocomplete, Root$8 = styled.nav`
     }
     return rawItems;
   }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems]), len = items.length;
-  return /* @__PURE__ */ jsx(Root$8, { "data-ui": "Breadcrumbs", ...restProps, ref, children: /* @__PURE__ */ jsx(Flex, { align: "flex-start", as: "ol", gapX, gapY, wrap: "wrap", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs(Flex, { align: "flex-start", as: "li", gapX, gapY, children: [
-    /* @__PURE__ */ jsx(Box, { children: item }),
-    itemIndex < len - 1 && /* @__PURE__ */ jsx(Box, { "aria-hidden": !0, children: separator || /* @__PURE__ */ jsx(Text, { muted: !0, children: "/" }) })
-  ] }, itemIndex)) }) });
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-ui": "Breadcrumbs",
+      ...restProps,
+      className: composeClassNames(className, breadcrumbs()),
+      ref,
+      children: /* @__PURE__ */ jsx(Flex, { align: "flex-start", as: "ol", gapX, gapY, wrap: "wrap", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs(Flex, { align: "flex-start", as: "li", gapX, gapY, children: [
+        /* @__PURE__ */ jsx(Box, { children: item }),
+        itemIndex < len - 1 && /* @__PURE__ */ jsx(Box, { "aria-hidden": !0, children: separator || /* @__PURE__ */ jsx(Text, { muted: !0, children: "/" }) })
+      ] }, itemIndex)) })
+    }
+  );
 });
 Breadcrumbs.displayName = "ForwardRef(Breadcrumbs)";
-function dialogStyle({ theme }) {
-  const { color } = getTheme_v2(theme);
-  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 } = getTheme_v2(props.theme);
-  return _responsive(media, props.$position, (position) => ({ "&&": { position } }));
-}
-function animationDialogStyle(props) {
-  return props.$animate ? 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;
-    }
-  ` : css``;
-}
 const DialogContext = createGlobalScopedContext(
   "@sanity/ui/context/dialog",
   { version: 0 }
@@ -5111,40 +4180,7 @@ function useDialog() {
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
-const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styled(Container)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`, DialogCardRoot = styled(Card)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  min-height: 0;
-  max-height: 100%;
-  overflow: hidden;
-  overflow: clip;
-`, DialogLayout = styled(Flex)`
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-`, DialogHeader = styled(Box)`
-  position: relative;
-  z-index: 2;
-`, DialogContent = styled(Box)`
-  position: relative;
-  z-index: 1;
-  overflow: auto;
-  outline: none;
-`, DialogFooter = styled(Box)`
-  position: relative;
-  z-index: 3;
-`, DialogCard = forwardRef(function(props, forwardedRef) {
+const DialogCard = forwardRef(function(props, forwardedRef) {
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
@@ -5181,33 +4217,68 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
       target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
     }),
     () => [ref.current]
-  ), /* @__PURE__ */ jsx(DialogContainer, { "data-ui": "DialogCard", width, children: /* @__PURE__ */ jsx(DialogCardRoot, { radius, ref, scheme, shadow, children: /* @__PURE__ */ jsxs(DialogLayout, { direction: "column", children: [
-    showHeader && /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", padding: 3, children: [
-      /* @__PURE__ */ jsx(Box, { flex: 1, padding: 2, children: header && /* @__PURE__ */ jsx(Text, { id: labelId, size: 1, weight: "semibold", children: header }) }),
-      showCloseButton && /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsx(
-        Button,
+  ), /* @__PURE__ */ jsx(
+    Container,
+    {
+      align: "center",
+      className: dialogContainer(),
+      "data-ui": "DialogCard",
+      direction: "column",
+      display: "flex",
+      justify: "center",
+      width,
+      children: /* @__PURE__ */ jsx(
+        Card,
         {
-          "aria-label": "Close dialog",
-          disabled: !onClose,
-          icon: CloseIcon,
-          mode: "bleed",
-          onClick: onClose,
-          padding: 2
+          className: dialogCardRoot(),
+          display: "flex",
+          radius,
+          ref,
+          scheme,
+          shadow,
+          children: /* @__PURE__ */ jsxs(Flex, { className: dialogLayout(), direction: "column", flex: 1, children: [
+            showHeader && /* @__PURE__ */ jsx(Box, { className: dialogHeader(), position: "relative", children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", padding: 3, children: [
+              /* @__PURE__ */ jsx(Box, { flex: 1, padding: 2, children: header && /* @__PURE__ */ jsx(Text, { id: labelId, size: 1, weight: "semibold", children: header }) }),
+              showCloseButton && /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": "Close dialog",
+                  disabled: !onClose,
+                  icon: CloseIcon,
+                  mode: "bleed",
+                  onClick: onClose,
+                  padding: 2
+                }
+              ) })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: dialogContent(),
+                flex: 1,
+                overflow: "auto",
+                position: "relative",
+                ref: contentRef,
+                tabIndex: -1,
+                children
+              }
+            ),
+            footer && /* @__PURE__ */ jsx(Box, { className: dialogFooter(), position: "relative", children: footer })
+          ] })
         }
-      ) })
-    ] }) }),
-    /* @__PURE__ */ jsx(DialogContent, { flex: 1, ref: contentRef, tabIndex: -1, children }),
-    footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
-  ] }) }) });
+      )
+    }
+  );
 });
 DialogCard.displayName = "ForwardRef(DialogCard)";
 const Dialog = 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,
@@ -5216,15 +4287,15 @@ const Dialog = 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 = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null), handleFocus = 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 = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null), handleFocus = useCallback(
     (event) => {
       onFocus?.(event);
       const target = event.target, cardElement = cardRef.current;
@@ -5254,19 +4325,21 @@ const Dialog = forwardRef(function(props, ref) {
     }, 0);
   }, [boundaryElement, portalElement]);
   return /* @__PURE__ */ jsx(Portal, { __unstable_name: portalProp, children: /* @__PURE__ */ jsxs(
-    Root$7,
+    Layer,
     {
       ...restProps,
-      $animate: animate,
-      $padding: padding,
-      $position: position,
       "aria-labelledby": labelId,
       "aria-modal": !0,
+      className: composeClassNames(className, dialog()),
+      "data-animate": animate ? "" : void 0,
       "data-ui": "Dialog",
+      display: "flex",
       id,
       onActivate,
       onClick: handleRootClick,
       onFocus: handleFocus,
+      padding,
+      position,
       ref,
       role: "dialog",
       zOffset,
@@ -5310,20 +4383,9 @@ function DialogProvider(props) {
   return /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children });
 }
 DialogProvider.displayName = "DialogProvider";
-const Root$6 = styled.kbd`
-  font: inherit;
-  padding: 1px;
-
-  &:not([hidden]) {
-    display: block;
-  }
-`, Key = styled(KBD)`
-  &:not([hidden]) {
-    display: block;
-  }
-`, Hotkeys = forwardRef(function(props, ref) {
+const Hotkeys = 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__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: /* @__PURE__ */ jsx(Inline, { as: "span", space, children: keys.map((key2, i) => /* @__PURE__ */ jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i)) }) });
+  return !keys || keys.length === 0 ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(Box, { as: "kbd", "data-ui": "Hotkeys", ...restProps, display: "flex", gap: spaceProp, ref, children: /* @__PURE__ */ jsx(Inline, { as: "span", space, children: keys.map((key2, i) => /* @__PURE__ */ jsx(KBD, { display: "block", fontSize: fontSize2, padding, radius, children: key2 }, i)) }) });
 });
 Hotkeys.displayName = "ForwardRef(Hotkeys)";
 const MenuContext = createGlobalScopedContext(
@@ -5333,8 +4395,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 = [];
@@ -5350,10 +4412,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);
@@ -5364,7 +4426,7 @@ function _sortElements(rootElement, elements) {
     }
     return 0;
   };
-  elements.sort(_sort);
+  elements2.sort(_sort);
 }
 function useMenuController(props) {
   const { onKeyDown, originElement, shouldFocus, rootElementRef } = props, elementsRef = useRef([]), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = useCallback((nextActiveIndex) => {
@@ -5471,7 +4533,7 @@ function useMenuController(props) {
     mount
   };
 }
-const Root$5 = styled(Box)`
+const Root$3 = styled(Box)`
   outline: none;
   overflow: auto;
 `, Menu = forwardRef(function(props, forwardedRef) {
@@ -5546,7 +4608,7 @@ const Root$5 = styled(Box)`
     ]
   );
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: /* @__PURE__ */ jsx(
-    Root$5,
+    Root$3,
     {
       "data-ui": "Menu",
       ...restProps,
@@ -5646,7 +4708,7 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
       registerElement,
       shouldFocus
     ]
-  ), menu = menuProp && cloneElement(menuProp, menuProps), ref = useRef(null), button = useMemo(
+  ), menu = menuProp && cloneElement(menuProp, menuProps), ref = useRef(null), button2 = useMemo(
     () => buttonProp && cloneElement(buttonProp, {
       "data-ui": "MenuButton",
       id,
@@ -5664,9 +4726,9 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
     forwardedRef,
     () => ref.current
   ), useEffect(() => {
-    if (button)
+    if (button2)
       return setButtonElement(ref.current), () => setButtonElement(null);
-  }, [button]);
+  }, [button2]);
   const popoverProps = useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,
@@ -5688,7 +4750,7 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
       popover
     ]
   );
-  return /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsx(Fragment, {}) });
+  return /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button2 || /* @__PURE__ */ jsx(Fragment, {}) });
 });
 MenuButton.displayName = "ForwardRef(MenuButton)";
 const MenuDivider = styled.hr`
@@ -5698,107 +4760,18 @@ const MenuDivider = styled.hr`
   margin: 0;
 `;
 MenuDivider.displayName = "MenuDivider";
-function selectableBaseStyle() {
-  return 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 } = getTheme_v2(props.theme), tone = color.selectable[$tone];
-  return 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 = forwardRef(function(props, ref) {
+  const { className, radius, tone, ...restProps } = props;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...restProps,
+      className: composeClassNames(className, selectable({ radius, tone })),
+      ref
     }
-
-    ${style?.card?.root}
-  `;
-}
-const Selectable = styled(Box)(
-  responsiveRadiusStyle,
-  selectableBaseStyle,
-  selectableColorStyle
-);
-Selectable.displayName = "Selectable";
+  );
+});
+Selectable.displayName = "ForwardRef(Selectable)";
 function useMenu() {
   const value = useContext(MenuContext);
   if (!value)
@@ -5818,10 +4791,10 @@ function MenuGroup(props) {
     popover,
     radius = 2,
     space = 3,
-    text,
+    text: text2,
     tone = "default",
     ...restProps
-  } = props, menu = useMenu(), { scheme } = useRootTheme(), {
+  } = props, menu = useMenu(), {
     activeElement,
     mount,
     onClickOutside,
@@ -5887,21 +4860,20 @@ 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__ */ jsxs(Flex, { gap: space, padding, children: [
         IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
           isValidElement(IconComponent) && IconComponent,
           isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
         ] }),
-        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
+        /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text2 }) }),
         /* @__PURE__ */ jsx(Text, { size: fontSize2, children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
       ] })
     }
@@ -5929,10 +4901,10 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     radius = 2,
     selected: selectedProp,
     space = 3,
-    text,
+    text: text2,
     tone = "default",
     ...restProps
-  } = props, { scheme } = useRootTheme(), menu = useMenu(), {
+  } = props, menu = useMenu(), {
     activeElement,
     mount,
     onItemClick,
@@ -5956,7 +4928,7 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
       paddingLeft
     }),
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]
-  ), hotkeysFontSize = useArrayProp(fontSize2).map((s) => s - 1), setRef = useCallback((el) => {
+  ), setRef = useCallback((el) => {
     ref.current = el, setRootElement(el);
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -5965,14 +4937,11 @@ const MenuItem = 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,
@@ -5980,18 +4949,18 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
       ref: setRef,
       role: "menuitem",
       tabIndex: -1,
+      tone,
       type: as === "button" ? "button" : void 0,
       children: [
-        (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
+        (IconComponent || text2 || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
           IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
             isValidElement(IconComponent) && IconComponent,
             isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
           ] }),
-          text && /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
+          text2 && /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text2 }) }),
           hotkeys && /* @__PURE__ */ jsx(
             Hotkeys,
             {
-              fontSize: hotkeysFontSize,
               keys: hotkeys,
               style: { marginTop: -4, marginBottom: -4 }
             }
@@ -6043,7 +5012,7 @@ const keyframe = keyframes`
   @media screen and (prefers-reduced-motion: reduce) {
     background-color: var(--card-skeleton-color-from);
   }
-`, Root$4 = styled(Box)(
+`, Root$2 = styled(Box)(
   responsiveRadiusStyle,
   skeletonStyle
 ), Skeleton = forwardRef(function(props, ref) {
@@ -6058,7 +5027,7 @@ const keyframe = keyframes`
       clearTimeout(timeout);
     };
   }, [delay]), /* @__PURE__ */ jsx(
-    Root$4,
+    Root$2,
     {
       ...restProps,
       $animated: animated,
@@ -6069,7 +5038,7 @@ const keyframe = keyframes`
   );
 });
 Skeleton.displayName = "ForwardRef(Skeleton)";
-const Root$3 = styled(Skeleton)((props) => {
+const Root$1 = styled(Skeleton)((props) => {
   const { $size, $style } = props, { font, media } = getTheme_v2(props.theme), fontStyle = font[$style];
   return _responsive(media, $size, (sizeIndex) => {
     const fontSize2 = fontStyle.sizes[sizeIndex];
@@ -6077,33 +5046,31 @@ const Root$3 = styled(Skeleton)((props) => {
   });
 }), TextSkeleton = forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
-  return /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "text" });
+  return /* @__PURE__ */ jsx(Root$1, { ...restProps, $size, ref, $style: "text" });
 });
 TextSkeleton.displayName = "ForwardRef(TextSkeleton)";
 const LabelSkeleton = forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
-  return /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "label" });
+  return /* @__PURE__ */ jsx(Root$1, { ...restProps, $size, ref, $style: "label" });
 });
 LabelSkeleton.displayName = "ForwardRef(LabelSkeleton)";
 const HeadingSkeleton = forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
-  return /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "heading" });
+  return /* @__PURE__ */ jsx(Root$1, { ...restProps, $size, ref, $style: "heading" });
 });
 HeadingSkeleton.displayName = "ForwardRef(HeadingSkeleton)";
 const CodeSkeleton = forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
-  return /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "code" });
+  return /* @__PURE__ */ jsx(Root$1, { ...restProps, $size, ref, $style: "code" });
 });
 CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
-const CustomButton = styled(Button)`
-  max-width: 100%;
-`, Tab = forwardRef(function(props, forwardedRef) {
+const Tab = forwardRef(function(props, forwardedRef) {
   const {
     icon,
     id,
     focused,
     fontSize: fontSize2 = 1,
-    label,
+    label: label2,
     onClick,
     onFocus,
     padding = 2,
@@ -6125,7 +5092,7 @@ const CustomButton = styled(Button)`
   return useEffect(() => {
     focused && !focusedRef.current && (ref.current && ref.current.focus(), focusedRef.current = !0);
   }, [focused]), /* @__PURE__ */ jsx(
-    CustomButton,
+    Button,
     {
       "data-ui": "Tab",
       ...restProps,
@@ -6142,7 +5109,7 @@ const CustomButton = styled(Button)`
       role: "tab",
       selected,
       tabIndex: selected ? 0 : -1,
-      text: label,
+      text: label2,
       type: "button"
     }
   );
@@ -6259,18 +5226,19 @@ const STATUS_CARD_TONE = {
   warning: "alert",
   success: "alert",
   info: "alert"
-}, Root$2 = 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__ */ jsx(
-    Root$2,
+    Root,
     {
       "data-ui": "Toast",
       role,
       ...restProps,
       marginTop: 3,
+      pointerEvents: "auto",
       radius,
       shadow: 2,
       tone: cardTone,
@@ -6308,21 +5276,7 @@ const subscribe = () => () => {
 }, ToastContext = createGlobalScopedContext(
   "@sanity/ui/context/toast",
   null
-), Root$1 = styled(Layer)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-`, ToastContainer = 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] = useState([]), toastsRef = useRef({}), mounted = useMounted(), prefersReducedMotion = usePrefersReducedMotion(), variants = useMemo(
@@ -6377,29 +5331,55 @@ function ToastProvider(props) {
     []
   ), /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
     children,
-    mounted && /* @__PURE__ */ jsx(Root$1, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsx(ToastContainer, { children: /* @__PURE__ */ jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, children: state.map(({ dismiss, id, params }) => /* @__PURE__ */ jsx(
-      motion.div,
+    mounted && /* @__PURE__ */ 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__ */ 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__ */ jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, children: state.map(({ dismiss, id, params }) => /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                layout: "position",
+                initial: "initial",
+                animate: "animate",
+                exit: "exit",
+                variants,
+                transition: prefersReducedMotion ? { duration: 0 } : { type: "spring", damping: 30, stiffness: 400 },
+                children: /* @__PURE__ */ jsx(
+                  Toast,
+                  {
+                    closable: params.closable,
+                    description: params.description,
+                    onClose: dismiss,
+                    status: params.status,
+                    title: params.title,
+                    duration: params.duration
+                  }
+                )
+              },
+              id
+            )) }) })
           }
         )
-      },
-      id
-    )) }) }) }) })
+      }
+    )
   ] });
 }
 ToastProvider.displayName = "ToastProvider";
@@ -6589,92 +5569,6 @@ const TreeContext = createGlobalScopedContext(
   })
 );
 Tree.displayName = "Memo(ForwardRef(Tree))";
-function treeItemRootStyle() {
-  return 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 } = getTheme_v2(props.theme), tone = color.selectable[$tone];
-  return 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 } = getTheme_v2(props.theme);
-  return css`
-    padding-left: ${rem(space[2] * $level)};
-
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `;
-}
 function useTree() {
   const tree = useContext(TreeContext);
   if (!tree)
@@ -6696,13 +5590,14 @@ const TreeGroup = memo(function(props) {
       children
     }
   );
-}), Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styled(Box).attrs({ forwardedAs: "a" })(treeItemBoxStyle), ToggleArrowText = styled(Text)`
+}), ToggleArrowText = styled(Text)`
   & > svg {
     transition: transform 100ms;
   }
 `, TreeItem = memo(function(props) {
   const {
     children,
+    className,
     expanded: expandedProp = !1,
     fontSize: fontSize2 = 1,
     href,
@@ -6714,7 +5609,7 @@ const TreeGroup = memo(function(props) {
     padding = 2,
     selected = !1,
     space = 2,
-    text,
+    text: text2,
     weight,
     ...restProps
   } = props, rootRef = useRef(null), treeitemRef = useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = useId(), id = idProp || _id, itemPath = useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = useMemo(
@@ -6737,11 +5632,10 @@ const TreeGroup = memo(function(props) {
     if (rootRef.current)
       return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
   }, [expanded, itemPath, registerItem, selected]);
-  const content = /* @__PURE__ */ jsxs(Flex, { padding, children: [
+  const content = /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
     /* @__PURE__ */ jsxs(
       Box,
       {
-        marginRight: space,
         style: {
           visibility: IconComponent || children ? "visible" : "hidden",
           pointerEvents: "none"
@@ -6752,24 +5646,25 @@ const TreeGroup = memo(function(props) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) })
+    /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text2 }) })
   ] });
   return href ? /* @__PURE__ */ jsxs(
-    Root,
+    Box,
     {
       "data-selected": selected ? "" : void 0,
       "data-tree-id": id,
       "data-tree-key": itemKey,
       "data-ui": "TreeItem",
       ...restProps,
+      as: "li",
+      className: composeClassNames(className, treeItem()),
       onClick: handleClick,
       ref: rootRef,
       role: "none",
       children: [
         /* @__PURE__ */ jsx(
-          TreeItemBox,
+          Box,
           {
-            $level: tree.level,
             "aria-expanded": expanded,
             as: linkAs,
             "data-ui": "TreeItem__box",
@@ -6777,6 +5672,9 @@ const TreeGroup = memo(function(props) {
             ref: treeitemRef,
             role: "treeitem",
             tabIndex,
+            style: {
+              paddingLeft: `calc(var(--space-2) * ${tree.level})`
+            },
             children: content
           }
         ),
@@ -6784,7 +5682,7 @@ const TreeGroup = memo(function(props) {
       ]
     }
   ) : /* @__PURE__ */ jsxs(
-    Root,
+    Box,
     {
       "data-selected": selected ? "" : void 0,
       "data-ui": "TreeItem",
@@ -6798,7 +5696,17 @@ const TreeGroup = memo(function(props) {
       role: "treeitem",
       tabIndex,
       children: [
-        /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "div",
+            "data-ui": "TreeItem__box",
+            style: {
+              paddingLeft: `calc(var(--space-2) * ${tree.level})`
+            },
+            children: content
+          }
+        ),
         /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { expanded, children }) })
       ]
     }
@@ -6897,6 +5805,7 @@ export {
   isHTMLTextAreaElement,
   multiply,
   parseColor,
+  px,
   rem,
   responsiveCodeFontStyle,
   responsiveHeadingFont,