@sanity/ui 3.0.0-static.30 → 3.0.0-static.32

package/dist/index.d.cts

@@ -1992,7 +1992,7 @@ export declare interface ResponsiveAvatarSizeStyleProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveBorderProps {
   border?: boolean | boolean[]
@@ -2004,7 +2004,7 @@ export declare interface ResponsiveBorderProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveBoxProps {
   display?: BoxDisplay | BoxDisplay[]
@@ -2015,7 +2015,7 @@ export declare interface ResponsiveBoxProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveFlexItemProps {
   /** Sets the flex CSS attribute. The property is responsive. */
@@ -2024,7 +2024,7 @@ export declare interface ResponsiveFlexItemProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveFlexProps {
   align?: FlexAlign | FlexAlign[]
@@ -2035,7 +2035,7 @@ export declare interface ResponsiveFlexProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveGridItemProps {
   column?: GridItemColumn | GridItemColumn[]
@@ -2048,7 +2048,7 @@ export declare interface ResponsiveGridItemProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveGridProps {
   autoRows?: GridAutoRows | GridAutoRows[]
@@ -2060,7 +2060,7 @@ export declare interface ResponsiveGridProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveMarginProps {
   /** Applies margins to all sides. The property is responsive. */
@@ -2077,7 +2077,7 @@ export declare interface ResponsiveMarginProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsivePaddingProps {
   padding?: number | number[]
@@ -2091,7 +2091,7 @@ export declare interface ResponsivePaddingProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveRadiusProps {
   radius?: Radius | Radius[]
@@ -2099,7 +2099,7 @@ export declare interface ResponsiveRadiusProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveShadowProps {
   shadow?: number | number[]
@@ -2107,7 +2107,7 @@ export declare interface ResponsiveShadowProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveWidthProps {
   width?: number | 'auto' | (number | 'auto')[]
@@ -3018,7 +3018,7 @@ export declare function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
 /** @public */
-export declare function useCard(): CardContextValue | null
+export declare function useCard(): CardContextValue
 
 /**
  * @public

package/dist/index.d.ts

@@ -1992,7 +1992,7 @@ export declare interface ResponsiveAvatarSizeStyleProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveBorderProps {
   border?: boolean | boolean[]
@@ -2004,7 +2004,7 @@ export declare interface ResponsiveBorderProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveBoxProps {
   display?: BoxDisplay | BoxDisplay[]
@@ -2015,7 +2015,7 @@ export declare interface ResponsiveBoxProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveFlexItemProps {
   /** Sets the flex CSS attribute. The property is responsive. */
@@ -2024,7 +2024,7 @@ export declare interface ResponsiveFlexItemProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveFlexProps {
   align?: FlexAlign | FlexAlign[]
@@ -2035,7 +2035,7 @@ export declare interface ResponsiveFlexProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveGridItemProps {
   column?: GridItemColumn | GridItemColumn[]
@@ -2048,7 +2048,7 @@ export declare interface ResponsiveGridItemProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveGridProps {
   autoRows?: GridAutoRows | GridAutoRows[]
@@ -2060,7 +2060,7 @@ export declare interface ResponsiveGridProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveMarginProps {
   /** Applies margins to all sides. The property is responsive. */
@@ -2077,7 +2077,7 @@ export declare interface ResponsiveMarginProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsivePaddingProps {
   padding?: number | number[]
@@ -2091,7 +2091,7 @@ export declare interface ResponsivePaddingProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveRadiusProps {
   radius?: Radius | Radius[]
@@ -2099,7 +2099,7 @@ export declare interface ResponsiveRadiusProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveShadowProps {
   shadow?: number | number[]
@@ -2107,7 +2107,7 @@ export declare interface ResponsiveShadowProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export declare interface ResponsiveWidthProps {
   width?: number | 'auto' | (number | 'auto')[]
@@ -3018,7 +3018,7 @@ export declare function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
 /** @public */
-export declare function useCard(): CardContextValue | null
+export declare function useCard(): CardContextValue
 
 /**
  * @public

package/dist/index.js

@@ -1,11 +1,11 @@
 import { 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 } from "@sanity/ui/theme";
-import { isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, isHTMLElement, _isEnterToClickElement, Selectable, Text, useResponsiveProp, EMPTY_ARRAY, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, containsOrEqualsElement, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, Card, createGlobalScopedContext, usePrefersReducedMotion, Portal, Z_OFFSETS, Layer, Grid, LayerProvider, isRecord, _getArrayProp, useCustomValidity, BoundaryElementContext, CardProvider, PortalProvider, useDelayedState, TooltipDelayGroupContext } from "./_chunks-es/_visual-editing.js";
+import { isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, isHTMLElement, _isEnterToClickElement, Selectable, Text, useResponsiveProp, EMPTY_ARRAY, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, containsOrEqualsElement, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, Card, createGlobalScopedContext, usePrefersReducedMotion, Portal, Z_OFFSETS, Layer, Grid, LayerProvider, isRecord, _getArrayProp, useCustomValidity, useDelayedState, TooltipDelayGroupContext, BoundaryElementContext, CardProvider, PortalProvider } from "./_chunks-es/_visual-editing.js";
 import { Arrow, DEFAULT_ARROW_ELEMENT, DEFAULT_BOX_ELEMENT, DEFAULT_BUTTON_ELEMENT, DEFAULT_CARD_ELEMENT, DEFAULT_FLEX_ELEMENT, DEFAULT_GRID_ELEMENT, DEFAULT_HOTKEYS_ELEMENT, DEFAULT_KBD_ELEMENT, DEFAULT_LAYER_ELEMENT, DEFAULT_MENU_DIVIDER_ELEMENT, DEFAULT_MENU_ELEMENT, DEFAULT_MENU_GROUP_ELEMENT, DEFAULT_MENU_ITEM_ELEMENT, DEFAULT_POPOVER_ELEMENT, DEFAULT_SELECTABLE_ELEMENT, DEFAULT_SPINNER_ELEMENT, DEFAULT_STACK_ELEMENT, DEFAULT_TAB_ELEMENT, DEFAULT_TAB_LIST_ELEMENT, DEFAULT_TEXT_ELEMENT, DEFAULT_TEXT_INPUT_ELEMENT, DEFAULT_TOOLTIP_ELEMENT, Hotkeys, KBD, Menu, MenuDivider, MenuGroup, MenuItem, Spinner, Tab, TabList, ThemeColorProvider, ThemeProvider, Tooltip, _getResponsiveProp, useCard, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTheme_v2, useTooltipDelayGroup } from "./_chunks-es/_visual-editing.js";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { ChevronDownIcon, CloseIcon, ToggleArrowRightIcon, CheckmarkIcon, RemoveIcon } from "@sanity/icons";
 import { useReducer, useCallback, useRef, useImperativeHandle, useMemo, useEffect, cloneElement, useState, Children, isValidElement, Fragment, useContext, useSyncExternalStore, startTransition, memo, useId, lazy, Suspense, Component } from "react";
 import { c } from "react/compiler-runtime";
-import { breadcrumbs, container as container$1, dialogCard, dialogHeader, dialogContent, dialogScrollerShadowTop, dialogScroller, dialogScrollerShadowBottom, dialogFooter, dialog, dialogContainer, toast, toastLayer, treeItem, vars, label, textOverflow, avatar, avatarArrow, avatarInitials, avatarImage, avatarImageOutline, avatarCounter, avatarStack, badge, checkbox, checkboxInput, checkboxPresentation, code, heading, radio, radioInput, radioPresentation, box, root, select, _inputElement, selectPresentation, skeleton, codeSkeleton, headingSkeleton, labelSkeleton, textSkeleton, srOnly, _switch, _switchElement, _switchPresentation, _switchTrack, _switchThumb, textArea, _inputPresentation, BREAKPOINTS } from "@sanity/ui/css";
+import { breadcrumbs, container as container$1, dialogCard, dialogHeader, dialogContent, dialogScrollerShadowTop, dialogScroller, dialogScrollerShadowBottom, dialogFooter, dialog, dialogContainer, toast, toastLayer, treeItem, vars, label, textOverflow, avatar, avatarArrow, avatarInitials, avatarImage, avatarImageOutline, avatarCounter, avatarStack, badge, checkbox, checkboxInput, checkboxPresentation, code, heading, radio, radioInput, radioPresentation, select, _inputElement, selectPresentation, skeleton, codeSkeleton, headingSkeleton, labelSkeleton, textSkeleton, srOnly, _switch, _switchElement, _switchPresentation, _switchTrack, _switchThumb, textArea, _inputPresentation, BREAKPOINTS, box, root } from "@sanity/ui/css";
 import { px, rem } from "@sanity/ui/css";
 import { motion, AnimatePresence } from "framer-motion";
 import { ResizeObserver } from "@juggle/resize-observer";
@@ -380,7 +380,7 @@ function isTargetWithinScope(boundaryElement, portalElement, target) {
 }
 const DEFAULT_DIALOG_CARD_ELEMENT = "div";
 function DialogCard(props) {
-  const $ = c(60), t0 = props;
+  const $ = c(61), t0 = props;
   let autoFocus, children, footer, forwardedContentRef, forwardedRef, header, hideCloseButton, id, onClickOutside, onClose, portalProp, rest, t1;
   $[0] !== t0 ? ({
     __unstable_autoFocus: autoFocus,
@@ -399,7 +399,7 @@ function DialogCard(props) {
   } = t0, $[0] = t0, $[1] = autoFocus, $[2] = children, $[3] = footer, $[4] = forwardedContentRef, $[5] = forwardedRef, $[6] = header, $[7] = hideCloseButton, $[8] = id, $[9] = onClickOutside, $[10] = onClose, $[11] = portalProp, $[12] = rest, $[13] = t1) : (autoFocus = $[1], children = $[2], footer = $[3], forwardedContentRef = $[4], forwardedRef = $[5], header = $[6], hideCloseButton = $[7], id = $[8], onClickOutside = $[9], onClose = $[10], portalProp = $[11], rest = $[12], t1 = $[13]);
   const as = t1 === void 0 ? DEFAULT_DIALOG_CARD_ELEMENT : t1, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, ref = useRef(null), contentRef = useRef(null), layer = useLayer(), {
     isTopLayer
-  } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton, [scrollTop, setScrollTop] = useState(0);
+  } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton, [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), scrollBottom = scrollHeight - scrollTop;
   let t2;
   $[14] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[14] = t2) : t2 = $[14], useImperativeHandle(forwardedRef, t2);
   let t3;
@@ -428,7 +428,7 @@ function DialogCard(props) {
     if (!el)
       return;
     const handleScroll = () => {
-      setScrollTop(el.scrollTop);
+      setScrollTop(el.scrollTop), setScrollHeight(el.scrollHeight - el.offsetHeight);
     };
     return el.addEventListener("scroll", handleScroll, {
       passive: !0
@@ -454,21 +454,23 @@ function DialogCard(props) {
   let t16;
   $[44] !== children ? (t16 = /* @__PURE__ */ jsx(Box, { className: t15, overflow: "auto", ref: contentRef, children }), $[44] = children, $[45] = t16) : t16 = $[45];
   let t17;
-  $[46] !== footer ? (t17 = footer && /* @__PURE__ */ jsx("div", { className: dialogScrollerShadowBottom() }), $[46] = footer, $[47] = t17) : t17 = $[47];
+  $[46] !== footer || $[47] !== scrollBottom ? (t17 = footer && /* @__PURE__ */ jsx("div", { className: dialogScrollerShadowBottom(), style: {
+    opacity: Math.min(scrollBottom, 32) / 32
+  } }), $[46] = footer, $[47] = scrollBottom, $[48] = t17) : t17 = $[48];
   let t18;
-  $[48] !== t14 || $[49] !== t16 || $[50] !== t17 ? (t18 = /* @__PURE__ */ jsxs(Box, { className: t13, flex: 1, position: "relative", tabIndex: -1, children: [
+  $[49] !== t14 || $[50] !== t16 || $[51] !== t17 ? (t18 = /* @__PURE__ */ jsxs(Box, { className: t13, flex: 1, position: "relative", tabIndex: -1, children: [
     t14,
     t16,
     t17
-  ] }), $[48] = t14, $[49] = t16, $[50] = t17, $[51] = t18) : t18 = $[51];
+  ] }), $[49] = t14, $[50] = t16, $[51] = t17, $[52] = t18) : t18 = $[52];
   let t19;
-  $[52] !== footer ? (t19 = footer && /* @__PURE__ */ jsx(Box, { className: dialogFooter(), position: "relative", children: footer }), $[52] = footer, $[53] = t19) : t19 = $[53];
+  $[53] !== footer ? (t19 = footer && /* @__PURE__ */ jsx(Box, { className: dialogFooter(), position: "relative", children: footer }), $[53] = footer, $[54] = t19) : t19 = $[54];
   let t20;
-  return $[54] !== as || $[55] !== rest || $[56] !== t12 || $[57] !== t18 || $[58] !== t19 ? (t20 = /* @__PURE__ */ jsxs(Card, { ...rest, as, className: t11, display: "flex", flexDirection: "column", ref, children: [
+  return $[55] !== as || $[56] !== rest || $[57] !== t12 || $[58] !== t18 || $[59] !== t19 ? (t20 = /* @__PURE__ */ jsxs(Card, { ...rest, as, className: t11, display: "flex", flexDirection: "column", ref, children: [
     t12,
     t18,
     t19
-  ] }), $[54] = as, $[55] = rest, $[56] = t12, $[57] = t18, $[58] = t19, $[59] = t20) : t20 = $[59], t20;
+  ] }), $[55] = as, $[56] = rest, $[57] = t12, $[58] = t18, $[59] = t19, $[60] = t20) : t20 = $[60], t20;
 }
 const DialogContext = createGlobalScopedContext("@sanity/ui/context/dialog", {
   version: 0
@@ -1856,85 +1858,6 @@ function Radio(props) {
     t9
   ] }), $[21] = style, $[22] = t3, $[23] = t8, $[24] = t10) : t10 = $[24], t10;
 }
-function BoundaryElementProvider(props) {
-  const $ = c(5), {
-    children,
-    element
-  } = props;
-  let t0, t1;
-  $[0] !== element ? (t1 = {
-    version: 0,
-    element
-  }, $[0] = element, $[1] = t1) : t1 = $[1], t0 = t1;
-  const value = t0;
-  let t2;
-  return $[2] !== children || $[3] !== value ? (t2 = /* @__PURE__ */ jsx(BoundaryElementContext.Provider, { value, children }), $[2] = children, $[3] = value, $[4] = t2) : t2 = $[4], t2;
-}
-function RootProvider(props) {
-  const $ = c(10), {
-    boundaryElement: t0,
-    children,
-    portalElement: t1,
-    scheme: t2,
-    tone: t3
-  } = props, boundaryElement = t0 === void 0 ? null : t0, portalElement = t1 === void 0 ? null : t1, scheme = t2 === void 0 ? "light" : t2, tone = t3 === void 0 ? "transparent" : t3;
-  let t4;
-  $[0] !== children || $[1] !== portalElement ? (t4 = /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children }), $[0] = children, $[1] = portalElement, $[2] = t4) : t4 = $[2];
-  let t5;
-  $[3] !== boundaryElement || $[4] !== t4 ? (t5 = /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(BoundaryElementProvider, { element: boundaryElement, children: t4 }) }), $[3] = boundaryElement, $[4] = t4, $[5] = t5) : t5 = $[5];
-  let t6;
-  return $[6] !== scheme || $[7] !== t5 || $[8] !== tone ? (t6 = /* @__PURE__ */ jsx(LayerProvider, { children: /* @__PURE__ */ jsx(CardProvider, { scheme, tone, children: t5 }) }), $[6] = scheme, $[7] = t5, $[8] = tone, $[9] = t6) : t6 = $[9], t6;
-}
-const DEFAULT_ROOT_ELEMENT = "html";
-function Root(props) {
-  const $ = c(33), t0 = props;
-  let children, className, forwardedRef, rest, t1, t2, t3, t4;
-  $[0] !== t0 ? ({
-    as: t1,
-    children,
-    className,
-    height: t2,
-    ref: forwardedRef,
-    scheme: t3,
-    tone: t4,
-    ...rest
-  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = forwardedRef, $[4] = rest, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4) : (children = $[1], className = $[2], forwardedRef = $[3], rest = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8]);
-  const as = t1 === void 0 ? DEFAULT_ROOT_ELEMENT : t1, height = t2 === void 0 ? "fill" : t2, scheme = t3 === void 0 ? "light" : t3, tone = t4 === void 0 ? "transparent" : t4, ref = useRef(null);
-  let t5;
-  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[9] = t5) : t5 = $[9], useImperativeHandle(forwardedRef, t5);
-  const [portalElement, setPortalElement] = useState(null), [boundaryElement, setBoundaryElement] = useState(null);
-  let t6;
-  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t6 = (el) => {
-    setBoundaryElement(el), ref.current = el;
-  }, $[10] = t6) : t6 = $[10];
-  const handleRef = t6;
-  let t7;
-  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsx("div", { "data-portal": "", ref: setPortalElement }), $[11] = t7) : t7 = $[11];
-  let t8;
-  $[12] !== boundaryElement || $[13] !== children || $[14] !== portalElement || $[15] !== scheme || $[16] !== tone ? (t8 = /* @__PURE__ */ jsxs(RootProvider, { boundaryElement, portalElement, scheme, tone, children: [
-    children,
-    t7
-  ] }), $[12] = boundaryElement, $[13] = children, $[14] = portalElement, $[15] = scheme, $[16] = tone, $[17] = t8) : t8 = $[17];
-  let node = t8;
-  if (as === "html") {
-    let t92;
-    $[18] !== height ? (t92 = box({
-      height,
-      margin: 0
-    }), $[18] = height, $[19] = t92) : t92 = $[19];
-    let t102;
-    $[20] !== node || $[21] !== t92 ? (t102 = /* @__PURE__ */ jsx("body", { className: t92, children: node }), $[20] = node, $[21] = t92, $[22] = t102) : t102 = $[22], node = t102;
-  }
-  let t9;
-  $[23] !== className || $[24] !== height || $[25] !== scheme || $[26] !== tone ? (t9 = root({
-    className,
-    height,
-    scheme,
-    tone
-  }), $[23] = className, $[24] = height, $[25] = scheme, $[26] = tone, $[27] = t9) : t9 = $[27];
-  let t10;
-  return $[28] !== as || $[29] !== node || $[30] !== rest || $[31] !== t9 ? (t10 = /* @__PURE__ */ jsx(Box, { as, "data-ui": "Root", ...rest, className: t9, ref: handleRef, children: node }), $[28] = as, $[29] = node, $[30] = rest, $[31] = t9, $[32] = t10) : t10 = $[32], t10;
-}
 const DEFAULT_SELECT_ELEMENT = "select";
 function Select(props) {
   const $ = c(38), t0 = props;
@@ -2213,6 +2136,20 @@ function TooltipDelayGroupProvider(props) {
   let t3;
   return $[6] !== children || $[7] !== value ? (t3 = /* @__PURE__ */ jsx(TooltipDelayGroupContext.Provider, { value, children }), $[6] = children, $[7] = value, $[8] = t3) : t3 = $[8], t3;
 }
+function BoundaryElementProvider(props) {
+  const $ = c(5), {
+    children,
+    element
+  } = props;
+  let t0, t1;
+  $[0] !== element ? (t1 = {
+    version: 0,
+    element
+  }, $[0] = element, $[1] = t1) : t1 = $[1], t0 = t1;
+  const value = t0;
+  let t2;
+  return $[2] !== children || $[3] !== value ? (t2 = /* @__PURE__ */ jsx(BoundaryElementContext.Provider, { value, children }), $[2] = children, $[3] = value, $[4] = t2) : t2 = $[4], t2;
+}
 function findMaxBreakpoints(media, width) {
   const ret = [];
   for (let i = 0; i < media.length; i += 1)
@@ -2288,6 +2225,72 @@ class ErrorBoundary extends Component {
     return this.props.children;
   }
 }
+function RootProvider(props) {
+  const $ = c(10), {
+    boundaryElement: t0,
+    children,
+    portalElement: t1,
+    scheme: t2,
+    tone: t3
+  } = props, boundaryElement = t0 === void 0 ? null : t0, portalElement = t1 === void 0 ? null : t1, scheme = t2 === void 0 ? "light" : t2, tone = t3 === void 0 ? "transparent" : t3;
+  let t4;
+  $[0] !== children || $[1] !== portalElement ? (t4 = /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children }), $[0] = children, $[1] = portalElement, $[2] = t4) : t4 = $[2];
+  let t5;
+  $[3] !== boundaryElement || $[4] !== t4 ? (t5 = /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(BoundaryElementProvider, { element: boundaryElement, children: t4 }) }), $[3] = boundaryElement, $[4] = t4, $[5] = t5) : t5 = $[5];
+  let t6;
+  return $[6] !== scheme || $[7] !== t5 || $[8] !== tone ? (t6 = /* @__PURE__ */ jsx(LayerProvider, { children: /* @__PURE__ */ jsx(CardProvider, { scheme, tone, children: t5 }) }), $[6] = scheme, $[7] = t5, $[8] = tone, $[9] = t6) : t6 = $[9], t6;
+}
+const DEFAULT_ROOT_ELEMENT = "html";
+function Root(props) {
+  const $ = c(35), t0 = props;
+  let children, className, forwardedRef, height, rest, t1, t2, t3, t4;
+  $[0] !== t0 ? ({
+    as: t1,
+    children,
+    className,
+    height,
+    overflow: t2,
+    ref: forwardedRef,
+    scheme: t3,
+    tone: t4,
+    ...rest
+  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = forwardedRef, $[4] = height, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = t4) : (children = $[1], className = $[2], forwardedRef = $[3], height = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8], t4 = $[9]);
+  const as = t1 === void 0 ? DEFAULT_ROOT_ELEMENT : t1, overflow = t2 === void 0 ? "hidden" : t2, scheme = t3 === void 0 ? "light" : t3, tone = t4 === void 0 ? "transparent" : t4, ref = useRef(null);
+  let t5;
+  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[10] = t5) : t5 = $[10], useImperativeHandle(forwardedRef, t5);
+  const [portalElement, setPortalElement] = useState(null), [boundaryElement, setBoundaryElement] = useState(null);
+  let t6;
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t6 = (el) => {
+    setBoundaryElement(el), ref.current = el;
+  }, $[11] = t6) : t6 = $[11];
+  const handleRef = t6;
+  let t7;
+  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsx("div", { "data-portal": "", ref: setPortalElement }), $[12] = t7) : t7 = $[12];
+  let t8;
+  $[13] !== boundaryElement || $[14] !== children || $[15] !== portalElement || $[16] !== scheme || $[17] !== tone ? (t8 = /* @__PURE__ */ jsxs(RootProvider, { boundaryElement, portalElement, scheme, tone, children: [
+    children,
+    t7
+  ] }), $[13] = boundaryElement, $[14] = children, $[15] = portalElement, $[16] = scheme, $[17] = tone, $[18] = t8) : t8 = $[18];
+  let node = t8;
+  if (as === "html") {
+    let t92;
+    $[19] !== height ? (t92 = box({
+      height,
+      margin: 0
+    }), $[19] = height, $[20] = t92) : t92 = $[20];
+    let t102;
+    $[21] !== node || $[22] !== t92 ? (t102 = /* @__PURE__ */ jsx("body", { className: t92, children: node }), $[21] = node, $[22] = t92, $[23] = t102) : t102 = $[23], node = t102;
+  }
+  let t9;
+  $[24] !== className || $[25] !== height || $[26] !== scheme || $[27] !== tone ? (t9 = root({
+    className,
+    height,
+    scheme,
+    tone
+  }), $[24] = className, $[25] = height, $[26] = scheme, $[27] = tone, $[28] = t9) : t9 = $[28];
+  let t10;
+  return $[29] !== as || $[30] !== node || $[31] !== overflow || $[32] !== rest || $[33] !== t9 ? (t10 = /* @__PURE__ */ jsx(Box, { as, "data-ui": "Root", ...rest, className: t9, overflow, ref: handleRef, children: node }), $[29] = as, $[30] = node, $[31] = overflow, $[32] = rest, $[33] = t9, $[34] = t10) : t10 = $[34], t10;
+}
 export {
   Arrow,
   Autocomplete,