@sanity/ui 2.0.13-alpha.1 → 2.0.13-alpha.2

package/dist/index.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ReactIs = require("react-is"), styledComponents = require("styled-components");
+var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ReactIs = require("react-is"), styled = require("styled-components");
 require("@sanity/color");
 var getScopedTheme = require("./_chunks-cjs/getScopedTheme.js"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
-var ReactIs__default = /* @__PURE__ */ _interopDefaultCompat(ReactIs), Refractor__default = /* @__PURE__ */ _interopDefaultCompat(Refractor);
+var ReactIs__default = /* @__PURE__ */ _interopDefaultCompat(ReactIs), styled__default = /* @__PURE__ */ _interopDefaultCompat(styled), Refractor__default = /* @__PURE__ */ _interopDefaultCompat(Refractor);
 const createColorTheme = theme.createColorTheme, hexToRgb = theme.hexToRgb, hslToRgb = theme.hslToRgb, multiply = theme.multiply, parseColor = theme.parseColor, rgbToHex = theme.rgbToHex, rgbToHsl = theme.rgbToHsl, rgba = theme.rgba, screen = theme.screen, studioTheme = theme.buildTheme(), EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity", POPOVER_MOTION_PROPS = {
   initial: {
     opacity: 0.5,
@@ -531,7 +531,7 @@ function ThemeProvider(props) {
     scheme,
     tone
   } : null, [rootTheme, scheme, tone]), theme2 = react.useMemo(() => rootTheme ? getScopedTheme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
-  return theme2 ? theme2.sanity.v2 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme2, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme.sanity.v2" property in theme' }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
+  return theme2 ? theme2.sanity.v2 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styled.ThemeProvider, { theme: theme2, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme.sanity.v2" property in theme' }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
 }
 function useRootTheme() {
   const value = react.useContext(ThemeContext);
@@ -544,10 +544,10 @@ function ThemeColorProvider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: scheme || root.scheme, theme: root.theme, tone, children });
 }
 function useTheme() {
-  return styledComponents.useTheme();
+  return styled.useTheme();
 }
 function useTheme_v2() {
-  return getScopedTheme.getTheme_v2(styledComponents.useTheme());
+  return getScopedTheme.getTheme_v2(styled.useTheme());
 }
 const MEDIA_STORE_CACHE = /* @__PURE__ */ new WeakMap();
 function _getMediaQuery(media, index) {
@@ -936,7 +936,7 @@ function responsiveInputPaddingStyle(props) {
 function responsiveInputPaddingIconRightStyle(props) {
   return responsiveInputPaddingStyle({ ...props, $iconRight: !0 });
 }
-const ROOT_STYLE = styledComponents.css`
+const ROOT_STYLE = styled.css`
   &:not([hidden]) {
     display: flex;
   }
@@ -948,7 +948,7 @@ function textInputRootStyle() {
 }
 function textInputBaseStyle(props) {
   const { $scheme, $tone, $weight } = props, { color, font } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     appearance: none;
     background: none;
     border: 0;
@@ -1026,7 +1026,7 @@ function textInputFontSizeStyle(props) {
 }
 function textInputRepresentationStyle(props) {
   const { $hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing } = props, { color, input } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     --input-box-shadow: none;
 
     position: absolute;
@@ -1202,14 +1202,14 @@ function responsiveShadowStyle(props) {
 }
 function labelBaseStyle(props) {
   const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     text-transform: uppercase;
 
-    ${$accent && styledComponents.css`
+    ${$accent && styled.css`
       color: var(--card-accent-fg-color);
     `}
 
-    ${$muted && styledComponents.css`
+    ${$muted && styled.css`
       color: var(--card-muted-fg-color);
     `}
 
@@ -1234,7 +1234,7 @@ function labelBaseStyle(props) {
     }
   `;
 }
-const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styledComponents.styled.span`
+const Root$C = styled__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styled__default.default.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1400,12 +1400,12 @@ function avatarStrokeStyle() {
     }
   };
 }
-const Root$B = styledComponents.styled.div(
+const Root$B = styled__default.default.div(
   responsiveAvatarSizeStyle,
   avatarStyle.root
-), Arrow$1 = styledComponents.styled.div(avatarStyle.arrow), BgStroke = styledComponents.styled.ellipse(avatarStyle.bgStroke), Stroke = styledComponents.styled.ellipse(avatarStyle.stroke), Initials = styledComponents.styled.div(avatarStyle.initials), InitialsLabel = styledComponents.styled(Label)({
+), Arrow$1 = styled__default.default.div(avatarStyle.arrow), BgStroke = styled__default.default.ellipse(avatarStyle.bgStroke), Stroke = styled__default.default.ellipse(avatarStyle.stroke), Initials = styled__default.default.div(avatarStyle.initials), InitialsLabel = styled__default.default(Label)({
   color: "inherit"
-}), Image = styledComponents.styled.svg(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
+}), Image = styled__default.default.svg(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
   const {
     __unstable_hideInnerStroke,
     as: asProp,
@@ -1508,7 +1508,7 @@ function _responsiveAvatarCounterSizeStyle(props) {
 }
 function _avatarCounterBaseStyle(props) {
   const { space } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
@@ -1526,7 +1526,7 @@ function _avatarCounterBaseStyle(props) {
     }
   `;
 }
-const Root$A = styledComponents.styled.div(
+const Root$A = styled__default.default.div(
   _responsiveAvatarCounterSizeStyle,
   _avatarCounterBaseStyle
 ), AvatarCounter = react.forwardRef(function(props, ref) {
@@ -1541,7 +1541,7 @@ function childrenToElementArray(children) {
     (node) => ReactIs.isElement(node) || ReactIs.isFragment(node) || typeof node == "string"
   );
 }
-const BASE_STYLES = styledComponents.css`
+const BASE_STYLES = styled.css`
   white-space: nowrap;
 
   & > div {
@@ -1566,7 +1566,7 @@ function responsiveAvatarStackSizeStyle(props) {
     } : EMPTY_RECORD;
   });
 }
-const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
+const Root$z = styled__default.default.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
   const {
     children: childrenProp,
     maxLength: maxLengthProp = 4,
@@ -1580,7 +1580,7 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
     len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
     visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, { size: size2 }) }, String(childIndex)))
   ] });
-}), Root$y = styledComponents.styled.div(
+}), Root$y = styled__default.default.div(
   boxStyle,
   flexItemStyle,
   responsiveBoxStyle,
@@ -1656,14 +1656,14 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
 });
 function textBaseStyle(props) {
   const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     color: var(--card-fg-color);
 
-    ${$accent && styledComponents.css`
+    ${$accent && styled.css`
       color: var(--card-accent-fg-color);
     `}
 
-    ${$muted && styledComponents.css`
+    ${$muted && styled.css`
       color: var(--card-muted-fg-color);
     `}
 
@@ -1717,11 +1717,11 @@ function textBaseStyle(props) {
     }
   `;
 }
-const Root$x = styledComponents.styled.div(
+const Root$x = styled__default.default.div(
   responsiveTextFont,
   responsiveTextAlignStyle,
   textBaseStyle
-), SpanWithTextOverflow$1 = styledComponents.styled.span`
+), SpanWithTextOverflow$1 = styled__default.default.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1767,7 +1767,7 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$w = styledComponents.styled(Box)(
+const Root$w = styled__default.default(Box)(
   responsiveRadiusStyle,
   badgeStyle
 ), Badge = react.forwardRef(function(props, ref) {
@@ -1793,7 +1793,7 @@ const Root$w = styledComponents.styled(Box)(
       children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children })
     }
   );
-}), Root$v = styledComponents.styled(Box)(
+}), Root$v = styled__default.default(Box)(
   flexItemStyle,
   responsiveFlexStyle
 ), Flex = react.forwardRef(function(props, ref) {
@@ -1812,7 +1812,7 @@ const Root$w = styledComponents.styled(Box)(
       ref
     }
   );
-}), rotate$1 = styledComponents.keyframes`
+}), rotate$1 = styled.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -1820,7 +1820,7 @@ const Root$w = styledComponents.styled(Box)(
   to {
     transform: rotate(360deg);
   }
-`, Root$u = styledComponents.styled(Text)`
+`, Root$u = styled__default.default(Text)`
   & > span > svg {
     animation: ${rotate$1} 500ms linear infinite;
   }
@@ -1900,7 +1900,7 @@ function _cardColorStyle(base, color, checkered = !1) {
 }
 function buttonBaseStyles(props) {
   const { $width } = props, { style } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     ${style == null ? void 0 : style.button};
 
     -webkit-font-smoothing: inherit;
@@ -1921,7 +1921,7 @@ function buttonBaseStyles(props) {
     position: relative;
     vertical-align: top;
 
-    ${$width === "fill" && styledComponents.css`
+    ${$width === "fill" && styled.css`
       width: -moz-available;
       width: -webkit-fill-available;
       width: stretch;
@@ -1985,7 +1985,7 @@ function buttonColorStyles(props) {
     (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.root
   ].filter(Boolean);
 }
-const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styledComponents.styled.div`
+const Root$t = styled__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled__default.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -2085,8 +2085,8 @@ function cardStyle(props) {
 }
 function cardBaseStyle(props) {
   const { $checkered } = props, { space } = props.theme.sanity.v2;
-  return styledComponents.css`
-    ${$checkered && styledComponents.css`
+  return styled.css`
+    ${$checkered && styled.css`
       background-size: ${space[3]}px ${space[3]}px;
       background-position: 50% 50%;
       background-image: var(--card-bg-image);
@@ -2119,7 +2119,7 @@ function cardBaseStyle(props) {
 function cardColorStyle(props) {
   var _a;
   const { $checkered, $focusRing } = props, { card, color, style } = props.theme.sanity.v2, border2 = { width: card.border.width, color: "var(--card-border-color)" };
-  return styledComponents.css`
+  return styled.css`
     color-scheme: ${color._dark ? "dark" : "light"};
 
     ${_cardColorStyle(color, color, $checkered)}
@@ -2206,7 +2206,7 @@ function cardColorStyle(props) {
     ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
   `;
 }
-const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
+const Root$s = styled__default.default(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
   const {
     __unstable_checkered: checkered = !1,
     __unstable_focusRing: focusRing = !1,
@@ -2252,14 +2252,14 @@ const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRad
   ) });
 });
 function checkboxBaseStyles() {
-  return styledComponents.css`
+  return styled.css`
     position: relative;
     display: inline-block;
   `;
 }
 function inputElementStyles(props) {
   const { color, input, radius } = props.theme.sanity.v2, { focusRing } = input.checkbox;
-  return styledComponents.css`
+  return styled.css`
     position: absolute;
     top: 0;
     left: 0;
@@ -2370,7 +2370,7 @@ function inputElementStyles(props) {
     }
   `;
 }
-const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styledComponents.styled.input(inputElementStyles), Checkbox = react.forwardRef(function(props, forwardedRef) {
+const Root$r = styled__default.default.div(checkboxBaseStyles), Input$5 = styled__default.default.input(inputElementStyles), Checkbox = react.forwardRef(function(props, forwardedRef) {
   const {
     checked,
     className,
@@ -2445,7 +2445,7 @@ function codeSyntaxHighlightingStyle({ theme: theme2 }) {
   };
 }
 function codeBaseStyle() {
-  return styledComponents.css`
+  return styled.css`
     color: var(--card-code-fg-color);
 
     & code {
@@ -2473,7 +2473,7 @@ function codeBaseStyle() {
     }
   `;
 }
-const Root$q = styledComponents.styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
+const Root$q = styled__default.default.pre(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
   const { children, language: languageProp, size: size2 = 2, weight, ...restProps } = props, language = typeof languageProp == "string" ? languageProp : void 0, registered = language ? Refractor__default.default.hasLanguage(language) : !1;
   return /* @__PURE__ */ jsxRuntime.jsxs(Root$q, { "data-ui": "Code", ...restProps, $size: useArrayProp(size2), $weight: weight, ref, children: [
     !(language && registered) && /* @__PURE__ */ jsxRuntime.jsx("code", { children }),
@@ -2492,7 +2492,7 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$p = styledComponents.styled(Box)(
+const Root$p = styled__default.default(Box)(
   containerBaseStyle,
   responsiveContainerWidthStyle
 ), Container = react.forwardRef(function(props, ref) {
@@ -2507,7 +2507,7 @@ const Root$p = styledComponents.styled(Box)(
       ref
     }
   );
-}), Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
+}), Root$o = styled__default.default(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
   const { as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Root$o,
@@ -2531,12 +2531,12 @@ const Root$p = styledComponents.styled(Box)(
 });
 function headingBaseStyle(props) {
   const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
-  return styledComponents.css`
-    ${$accent && styledComponents.css`
+  return styled.css`
+    ${$accent && styled.css`
       color: var(--card-accent-fg-color);
     `}
 
-    ${$muted && styledComponents.css`
+    ${$muted && styled.css`
       color: var(--card-muted-fg-color);
     `}
 
@@ -2583,7 +2583,7 @@ function headingBaseStyle(props) {
     }
   `;
 }
-const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styledComponents.styled.span`
+const Root$n = styled__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styled__default.default.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -2638,7 +2638,7 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
+const Root$m = styled__default.default(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
   const { as, children: childrenProp, space, ...restProps } = props, children = react.useMemo(
     () => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: child }, idx)),
     [childrenProp]
@@ -2656,7 +2656,7 @@ const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle),
   );
 });
 function kbdStyle() {
-  return styledComponents.css`
+  return styled.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);
@@ -2672,7 +2672,7 @@ function kbdStyle() {
     }
   `;
 }
-const Root$l = styledComponents.styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
+const Root$l = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
   const { children, fontSize: fontSize2 = 0, padding = 1, radius = 2, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: useArrayProp(radius), ref, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }) }) });
 }), origin = {
@@ -2733,8 +2733,8 @@ function getRoundedCommands(points) {
 function compileCommands(cmds) {
   return cmds.map((n, idx) => n.type === "point" ? `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}` : n.type === "curve" ? `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}` : "").join(" ");
 }
-const Root$k = styledComponents.styled.div(
-  ({ $w: w }) => styledComponents.css`
+const Root$k = styled__default.default.div(
+  ({ $w: w }) => styled.css`
     position: absolute;
     width: ${w}px;
     height: ${w}px;
@@ -2781,9 +2781,9 @@ const Root$k = styledComponents.styled.div(
       }
     }
   `
-), StrokePath = styledComponents.styled.path`
+), StrokePath = styled__default.default.path`
   stroke: var(--card-shadow-outline-color);
-`, ShapePath = styledComponents.styled.path`
+`, ShapePath = styled__default.default.path`
   fill: var(--card-bg-color);
 `, Arrow = react.forwardRef(function(props, ref) {
   const { width: w, height: h, radius = 0, ...restProps } = props, { card } = useTheme_v2(), strokeWidth = card.shadow.outline, center = w / 2, points = [
@@ -3027,7 +3027,7 @@ function LayerProvider(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children });
 }
-const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, ref) {
+const Root$j = styled__default.default.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, ref) {
   const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = react.useRef(null), forwardedRef = useForwardedRef(ref), isTopLayerRef = react.useRef(isTopLayer);
   react.useEffect(() => {
     isTopLayerRef.current !== isTopLayer && isTopLayer && (onActivate == null || onActivate({ activeElement: lastFocusedRef.current })), isTopLayerRef.current = isTopLayer;
@@ -3098,7 +3098,7 @@ function PortalProvider(props) {
   }), [boundaryElement, element, elements]);
   return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children });
 }
-const Root$i = styledComponents.styled.div`
+const Root$i = styled__default.default.div`
   display: block;
   width: 0;
   height: 0;
@@ -3108,9 +3108,9 @@ const Root$i = styledComponents.styled.div`
 `, SrOnly = react.forwardRef(function(props, ref) {
   const { as, children } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(Root$i, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children });
-}), Root$h = styledComponents.styled.div`
+}), Root$h = styled__default.default.div`
   position: relative;
-`, ItemWrapper = styledComponents.styled.div`
+`, ItemWrapper = styled__default.default.div`
   position: absolute;
   left: 0;
   right: 0;
@@ -3211,7 +3211,7 @@ function calcMaxWidth(params) {
       (boundaryWidth || 1 / 0) - DEFAULT_POPOVER_PADDING * 2
     );
 }
-const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
+const MotionCard$1 = styled__default.default(framerMotion.motion(Card))`
   &:not([hidden]) {
     display: flex;
   }
@@ -3485,7 +3485,7 @@ const Popover = react.memo(
 );
 Popover.displayName = "Popover";
 function radioBaseStyle() {
-  return styledComponents.css`
+  return styled.css`
     position: relative;
 
     &:not([hidden]) {
@@ -3499,7 +3499,7 @@ function radioBaseStyle() {
 }
 function inputElementStyle(props) {
   const { color, input } = props.theme.sanity.v2, dist = (input.radio.size - input.radio.markSize) / 2;
-  return styledComponents.css`
+  return styled.css`
     appearance: none;
     position: absolute;
     top: 0;
@@ -3592,7 +3592,7 @@ function inputElementStyle(props) {
     }
   `;
 }
-const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComponents.styled.input(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
+const Root$g = styled__default.default.div(radioBaseStyle), Input$4 = styled__default.default.input(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
   const { className, disabled, style, customValidity, readOnly, ...restProps } = props, ref = useForwardedRef(forwardedRef);
   return useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$g, { className, "data-ui": "Radio", style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3611,7 +3611,7 @@ const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComp
   ] });
 });
 function rootStyle() {
-  return styledComponents.css`
+  return styled.css`
     position: relative;
     width: -moz-available;
     width: -webkit-fill-available;
@@ -3624,7 +3624,7 @@ function rootStyle() {
 }
 function inputBaseStyle(props) {
   const { font } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     -webkit-font-smoothing: antialiased;
     appearance: none;
     border: 0;
@@ -3641,7 +3641,7 @@ function inputBaseStyle(props) {
 }
 function inputColorStyle(props) {
   const { color, input } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     /* enabled */
     background-color: ${color.input.default.enabled.bg};
     color: ${color.input.default.enabled.fg};
@@ -3713,7 +3713,7 @@ function inputStyle() {
 }
 function iconBoxStyle(props) {
   const { color } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     pointer-events: none;
     position: absolute;
     top: 0;
@@ -3744,7 +3744,7 @@ const selectStyle = {
   root: rootStyle,
   input: inputStyle,
   iconBox: iconBoxStyle
-}, Root$f = styledComponents.styled.div(selectStyle.root), Input$3 = styledComponents.styled.select(selectStyle.input), IconBox = styledComponents.styled(Box)(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
+}, Root$f = styled__default.default.div(selectStyle.root), Input$3 = styled__default.default.select(selectStyle.input), IconBox = styled__default.default(Box)(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
   const {
     children,
     customValidity,
@@ -3793,7 +3793,7 @@ function responsiveStackSpaceStyle(props) {
     gridGap: rem(space[spaceIndex])
   }));
 }
-const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
+const Root$e = styled__default.default(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
   const { as, space, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Root$e,
@@ -3808,7 +3808,7 @@ const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpace
   );
 });
 function switchBaseStyles() {
-  return styledComponents.css`
+  return styled.css`
     position: relative;
     &:not([hidden]) {
       display: inline-block;
@@ -3816,7 +3816,7 @@ function switchBaseStyles() {
   `;
 }
 function switchInputStyles() {
-  return styledComponents.css`
+  return styled.css`
     position: absolute;
     top: 0;
     right: 0;
@@ -3835,7 +3835,7 @@ function switchInputStyles() {
 }
 function switchRepresentationStyles(props) {
   const { color, input } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     --switch-bg-color: ${color.input.default.enabled.border};
     --switch-fg-color: ${color.input.default.enabled.bg};
     --switch-box-shadow: none;
@@ -3908,7 +3908,7 @@ function switchRepresentationStyles(props) {
 }
 function switchTrackStyles(props) {
   const { input } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     &:not([hidden]) {
       display: block;
     }
@@ -3923,7 +3923,7 @@ function switchTrackStyles(props) {
 }
 function switchThumbStyles(props) {
   const { $indeterminate } = props, { input } = props.theme.sanity.v2, trackWidth = input.switch.width, trackHeight = input.switch.height, trackPadding = input.switch.padding, size2 = trackHeight - input.switch.padding * 2, checkedOffset = trackWidth - trackPadding * 2 - size2, indeterminateOffset = trackWidth / 2 - size2 / 2 - trackPadding, checked = $indeterminate !== !0 && props.$checked === !0;
-  return styledComponents.css`
+  return styled.css`
     &:not([hidden]) {
       display: block;
     }
@@ -3940,16 +3940,16 @@ function switchThumbStyles(props) {
     transform: translate3d(0, 0, 0);
     box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
 
-    ${checked && styledComponents.css`
+    ${checked && styled.css`
       transform: translate3d(${checkedOffset}px, 0, 0);
     `}
 
-    ${$indeterminate && styledComponents.css`
+    ${$indeterminate && styled.css`
       transform: translate3d(${indeterminateOffset}px, 0, 0);
     `}
   `;
 }
-const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledComponents.styled.input(switchInputStyles), Representation = styledComponents.styled.span(switchRepresentationStyles), Track = styledComponents.styled.span(switchTrackStyles), Thumb = styledComponents.styled.span(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
+const Root$d = styled__default.default.span(switchBaseStyles), Input$2 = styled__default.default.input(switchInputStyles), Representation = styled__default.default.span(switchRepresentationStyles), Track = styled__default.default.span(switchTrackStyles), Thumb = styled__default.default.span(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
   const { checked, className, disabled, indeterminate, readOnly, style, ...restProps } = props, ref = useForwardedRef(forwardedRef);
   return react.useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
@@ -3970,16 +3970,16 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
       /* @__PURE__ */ jsxRuntime.jsx(Thumb, { $checked: checked, $indeterminate: indeterminate })
     ] })
   ] });
-}), Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = styledComponents.styled.span`
+}), Root$c = styled__default.default.span(textInputRootStyle), InputRoot$1 = styled__default.default.span`
   flex: 1;
   min-width: 0;
   display: block;
   position: relative;
-`, Input$1 = styledComponents.styled.textarea(
+`, Input$1 = styled__default.default.textarea(
   responsiveInputPaddingStyle,
   textInputBaseStyle,
   textInputFontSizeStyle
-), Presentation$1 = styledComponents.styled.div(
+), Presentation$1 = styled__default.default.div(
   responsiveRadiusStyle,
   textInputRepresentationStyle
 ), TextArea = react.forwardRef(function(props, forwardedRef) {
@@ -4023,12 +4023,12 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
       }
     )
   ] }) });
-}), CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(Card).attrs({ forwardedAs: "span" })(textInputRootStyle), InputRoot = styledComponents.styled.span`
+}), CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled__default.default(Card).attrs({ forwardedAs: "span" })(textInputRootStyle), InputRoot = styled__default.default.span`
   flex: 1;
   min-width: 0;
   display: block;
   position: relative;
-`, Prefix = styledComponents.styled(Card).attrs({ forwardedAs: "span" })`
+`, Prefix = styled__default.default(Card).attrs({ forwardedAs: "span" })`
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 
@@ -4036,7 +4036,7 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     display: block;
     margin: -1px;
   }
-`, Suffix = styledComponents.styled(Card).attrs({ forwardedAs: "span" })`
+`, Suffix = styled__default.default(Card).attrs({ forwardedAs: "span" })`
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 
@@ -4044,27 +4044,27 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     display: block;
     margin: -1px;
   }
-`, Input = styledComponents.styled.input(
+`, Input = styled__default.default.input(
   responsiveInputPaddingStyle,
   textInputBaseStyle,
   textInputFontSizeStyle
-), Presentation = styledComponents.styled.span(
+), Presentation = styled__default.default.span(
   responsiveRadiusStyle,
   textInputRepresentationStyle
-), LeftBox = styledComponents.styled(Box)`
+), LeftBox = styled__default.default(Box)`
   position: absolute;
   top: 0;
   left: 0;
-`, RightBox = styledComponents.styled(Box)`
+`, RightBox = styled__default.default(Box)`
   position: absolute;
   top: 0;
   right: 0;
-`, RightCard = styledComponents.styled(Card)`
+`, RightCard = styled__default.default(Card)`
   background-color: transparent;
   position: absolute;
   top: 0;
   right: 0;
-`, TextInputClearButton = styledComponents.styled(Button)({
+`, TextInputClearButton = styled__default.default(Button)({
   "&:not([hidden])": {
     display: "block"
   }
@@ -4244,7 +4244,7 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   right: ["right-end", "right-start", "left", "top", "bottom"],
   "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
   "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
-}, MotionCard = styledComponents.styled(framerMotion.motion(Card))`
+}, MotionCard = styled__default.default(framerMotion.motion(Card))`
   & > * {
     opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
     will-change: opacity;
@@ -4336,7 +4336,7 @@ function TooltipDelayGroupProvider(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children });
 }
-const Root$a = styledComponents.styled(Layer)`
+const Root$a = styled__default.default(Layer)`
   pointer-events: none;
   max-width: ${({ $maxWidth }) => $maxWidth}px;
 `, Tooltip = react.forwardRef(function(props, ref) {
@@ -4544,15 +4544,15 @@ const Root$a = styledComponents.styled(Layer)`
     ),
     child
   ] });
-}), Root$9 = styledComponents.styled.div`
+}), Root$9 = styled__default.default.div`
   line-height: 0;
-`, ListBox = styledComponents.styled(Box)`
+`, ListBox = styled__default.default(Box)`
   & > ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
-`, rotate = styledComponents.keyframes`
+`, rotate = styled.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -4560,7 +4560,7 @@ const Root$a = styledComponents.styled(Layer)`
   to {
     transform: rotate(360deg);
   }
-`, AnimatedSpinnerIcon = styledComponents.styled(icons.SpinnerIcon)`
+`, AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)`
   animation: ${rotate} 500ms linear infinite;
 `;
 function AutocompleteOption(props) {
@@ -4943,7 +4943,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
       ]
     }
   );
-}), Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
+}), Autocomplete = InnerAutocomplete, Root$8 = styled__default.default.ol`
   margin: 0;
   padding: 0;
   display: flex;
@@ -4951,7 +4951,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   align-items: center;
   white-space: nowrap;
   line-height: 0;
-`, ExpandButton = styledComponents.styled(Button)`
+`, ExpandButton = styled__default.default(Button)`
   appearance: none;
   margin: -4px;
 `, Breadcrumbs = react.forwardRef(function(props, ref) {
@@ -5021,7 +5021,7 @@ function responsiveDialogPositionStyle(props) {
   return _responsive(media, props.$position, (position) => ({ "&&": { position } }));
 }
 function animationDialogStyle(props) {
-  return props.$animate ? styledComponents.css`
+  return props.$animate ? styled.css`
     @keyframes zoomIn {
       from {
         opacity: 0;
@@ -5046,7 +5046,7 @@ function animationDialogStyle(props) {
     & > [data-ui='DialogCard'] {
       animation: zoomIn 200ms ease-out;
     }
-  ` : styledComponents.css``;
+  ` : styled.css``;
 }
 const key$3 = Symbol.for("@sanity/ui/context/dialog");
 globalScope[key$3] = globalScope[key$3] || react.createContext({ version: 0 });
@@ -5057,7 +5057,7 @@ function useDialog() {
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
-const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styledComponents.styled(Container)`
+const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styled__default.default(Container)`
   &:not([hidden]) {
     display: flex;
   }
@@ -5066,7 +5066,7 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
   flex-direction: column;
   align-items: center;
   justify-content: center;
-`, DialogCardRoot = styledComponents.styled(Card)`
+`, DialogCardRoot = styled__default.default(Card)`
   &:not([hidden]) {
     display: flex;
   }
@@ -5075,19 +5075,19 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
   max-height: 100%;
   overflow: hidden;
   overflow: clip;
-`, DialogLayout = styledComponents.styled(Flex)`
+`, DialogLayout = styled__default.default(Flex)`
   flex: 1;
   min-height: 0;
   width: 100%;
-`, DialogHeader = styledComponents.styled(Box)`
+`, DialogHeader = styled__default.default(Box)`
   position: relative;
   z-index: 2;
-`, DialogContent = styledComponents.styled(Box)`
+`, DialogContent = styled__default.default(Box)`
   position: relative;
   z-index: 1;
   overflow: auto;
   outline: none;
-`, DialogFooter = styledComponents.styled(Box)`
+`, DialogFooter = styled__default.default(Box)`
   position: relative;
   z-index: 3;
 `, DialogCard = react.forwardRef(function(props, ref) {
@@ -5269,14 +5269,14 @@ function DialogProvider(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children });
 }
-const Root$6 = styledComponents.styled.kbd`
+const Root$6 = styled__default.default.kbd`
   font: inherit;
   padding: 1px;
 
   &:not([hidden]) {
     display: block;
   }
-`, Key = styledComponents.styled(KBD)`
+`, Key = styled__default.default(KBD)`
   &:not([hidden]) {
     display: block;
   }
@@ -5441,7 +5441,7 @@ function useMenuController(props) {
     setRootElement
   };
 }
-const Root$5 = styledComponents.styled(Box)`
+const Root$5 = styled__default.default(Box)`
   outline: none;
   overflow: auto;
 `, Menu = react.forwardRef(function(props, ref) {
@@ -5665,14 +5665,14 @@ const Root$5 = styledComponents.styled(Box)`
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
-}), MenuDivider = styledComponents.styled.hr`
+}), MenuDivider = styled__default.default.hr`
   height: 1px;
   border: 0;
   background: var(--card-hairline-soft-color);
   margin: 0;
 `;
 function selectableBaseStyle() {
-  return styledComponents.css`
+  return styled.css`
     background-color: inherit;
     color: inherit;
 
@@ -5697,7 +5697,7 @@ function selectableBaseStyle() {
 function selectableColorStyle(props) {
   var _a;
   const { $tone } = props, { color, style } = props.theme.sanity.v2, tone = color.selectable[$tone];
-  return styledComponents.css`
+  return styled.css`
     ${_cardColorStyle(color, tone.enabled)}
 
     background-color: var(--card-bg-color);
@@ -5767,7 +5767,7 @@ function selectableColorStyle(props) {
     ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
   `;
 }
-const Selectable = styledComponents.styled(Box)(
+const Selectable = styled__default.default(Box)(
   responsiveRadiusStyle,
   selectableBaseStyle,
   selectableColorStyle
@@ -5980,14 +5980,14 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       ]
     }
   );
-}), keyframe = styledComponents.keyframes`
+}), keyframe = styled.keyframes`
   0% {
     background-position: 100%;
   }
   100% {
     background-position: -100%;
   }
-`, animation = styledComponents.css`
+`, animation = styled.css`
   background-image: linear-gradient(
     to right,
     var(--card-skeleton-color-from),
@@ -6003,12 +6003,12 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-duration: 2000ms;
-`, skeletonStyle = styledComponents.css`
+`, skeletonStyle = styled.css`
   opacity: ${({ $visible }) => $visible ? 1 : 0};
   transition: opacity 200ms ease-in;
 
   @media screen and (prefers-reduced-motion: no-preference) {
-    ${({ $animated }) => $animated ? animation : styledComponents.css`
+    ${({ $animated }) => $animated ? animation : styled.css`
             background-color: var(--card-skeleton-color-from);
           `}
   }
@@ -6016,7 +6016,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
   @media screen and (prefers-reduced-motion: reduce) {
     background-color: var(--card-skeleton-color-from);
   }
-`, Root$4 = styledComponents.styled(Box)(
+`, Root$4 = styled__default.default(Box)(
   responsiveRadiusStyle,
   skeletonStyle
 ), Skeleton = react.forwardRef(function(props, ref) {
@@ -6040,7 +6040,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       ref
     }
   );
-}), Root$3 = styledComponents.styled(Skeleton)((props) => {
+}), Root$3 = styled__default.default(Skeleton)((props) => {
   const { $size, $style } = props, { font, media } = props.theme.sanity.v2, fontStyle = font[$style];
   return _responsive(media, $size, (sizeIndex) => {
     const fontSize2 = fontStyle.sizes[sizeIndex];
@@ -6058,7 +6058,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
 }), CodeSkeleton = react.forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
   return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "code" });
-}), CustomButton = styledComponents.styled(Button)`
+}), CustomButton = styled__default.default(Button)`
   max-width: 100%;
 `, Tab = react.forwardRef(function(props, forwardedRef) {
   const {
@@ -6110,7 +6110,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
 function _isReactElement(node) {
   return !!node;
 }
-const CustomInline = styledComponents.styled(Inline)`
+const CustomInline = styled__default.default(Inline)`
   & > div {
     display: inline-block;
     vertical-align: middle;
@@ -6172,13 +6172,13 @@ const CustomInline = styledComponents.styled(Inline)`
   warning: "alert",
   success: "alert",
   info: "alert"
-}, Root$2 = styledComponents.styled(Card)`
+}, Root$2 = styled__default.default(Card)`
   pointer-events: all;
   & > * {
     opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
     will-change: opacity;
   }
-`, TextBox = styledComponents.styled(Flex)`
+`, TextBox = styled__default.default(Flex)`
   overflow-x: auto;
 `;
 function Toast(props) {
@@ -6224,14 +6224,14 @@ function useMounted() {
 const subscribe = () => () => {
 }, key$1 = Symbol.for("@sanity/ui/context/toast");
 globalScope[key$1] = globalScope[key$1] || react.createContext(null);
-const ToastContext = globalScope[key$1], Root$1 = styledComponents.styled(Layer)`
+const ToastContext = globalScope[key$1], Root$1 = styled__default.default(Layer)`
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
-`, ToastContainer = styledComponents.styled.div`
+`, ToastContainer = styled__default.default.div`
   box-sizing: border-box;
   position: absolute;
   right: 0;
@@ -6508,7 +6508,7 @@ const TreeContext = globalScope[key], Tree = react.memo(
 );
 Tree.displayName = "Tree";
 function treeItemRootStyle() {
-  return styledComponents.css`
+  return styled.css`
     &[role='none'] > [role='treeitem'] {
       outline: none;
       cursor: default;
@@ -6541,7 +6541,7 @@ function treeItemRootStyle() {
 }
 function treeItemRootColorStyle(props) {
   const $tone = "default", { color } = props.theme.sanity.v2, tone = color.selectable[$tone];
-  return styledComponents.css`
+  return styled.css`
     &[role='none'] {
       & > [role='treeitem'] {
         ${_cardColorStyle(color, tone.enabled)}
@@ -6585,7 +6585,7 @@ function treeItemRootColorStyle(props) {
 }
 function treeItemBoxStyle(props) {
   const { $level } = props, { space } = props.theme.sanity.v2;
-  return styledComponents.css`
+  return styled.css`
     padding-left: ${rem(space[2] * $level)};
 
     &[data-as='a'] {
@@ -6614,7 +6614,7 @@ const TreeGroup = react.memo(function(props) {
       children
     }
   );
-}), Root = react.memo(styledComponents.styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styledComponents.styled(Box).attrs({ forwardedAs: "a" })(treeItemBoxStyle), ToggleArrowText = styledComponents.styled(Text)`
+}), Root = react.memo(styled__default.default.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styled__default.default(Box).attrs({ forwardedAs: "a" })(treeItemBoxStyle), ToggleArrowText = styled__default.default(Text)`
   & > svg {
     transition: transform 100ms;
   }