@sanity/ui 3.0.0-static.28 → 3.0.0-static.29

package/README.md

@@ -14,18 +14,15 @@ npm install react react-dom react-is styled-components
 ## Usage
 
 ```jsx
-import '@sanity/ui/index.css'
+import '@sanity/ui/css/index.css'
 
-import {Button, Card} from '@sanity/ui'
-import {defaultTheme} from '@sanity/ui/css'
+import {Box, Button, Root} from '@sanity/ui'
 import {createRoot} from 'react-dom/client'
 
-const root = createRoot(document.getElementById('root'))
-
-root.render(
-  <Card className={defaultTheme} scheme="light" tone="default">
+createRoot(document).render(
+  <Root lang="en">
     <Button text="Hello, world" />
-  </Card>,
+  </Root>,
 )
 ```
 

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

@@ -329,6 +329,29 @@ function Box(props) {
   let t10;
   return $[149] !== Element || $[150] !== children || $[151] !== rest || $[152] !== t9 ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(Element, { "data-ui": "Box", ...rest, className: t9, children }), $[149] = Element, $[150] = children, $[151] = rest, $[152] = t9, $[153] = t10) : t10 = $[153], t10;
 }
+const DEFAULT_SELECTABLE_ELEMENT = "button";
+function Selectable(props) {
+  const $ = compilerRuntime.c(16), t0 = props;
+  let className, radius, rest, selected, t1, tone;
+  $[0] !== t0 ? ({
+    as: t1,
+    className,
+    radius,
+    selected,
+    tone,
+    ...rest
+  } = t0, $[0] = t0, $[1] = className, $[2] = radius, $[3] = rest, $[4] = selected, $[5] = t1, $[6] = tone) : (className = $[1], radius = $[2], rest = $[3], selected = $[4], t1 = $[5], tone = $[6]);
+  const as = t1 === void 0 ? DEFAULT_SELECTABLE_ELEMENT : t1;
+  let t2;
+  $[7] !== className || $[8] !== radius || $[9] !== tone ? (t2 = css._selectable({
+    className,
+    radius,
+    tone
+  }), $[7] = className, $[8] = radius, $[9] = tone, $[10] = t2) : t2 = $[10];
+  const t3 = selected ? "" : void 0;
+  let t4;
+  return $[11] !== as || $[12] !== rest || $[13] !== t2 || $[14] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Box, { ...rest, as, className: t2, "data-selected": t3 }), $[11] = as, $[12] = rest, $[13] = t2, $[14] = t3, $[15] = t4) : t4 = $[15], t4;
+}
 const DEFAULT_TEXT_ELEMENT = "div";
 function Text(props) {
   const $ = compilerRuntime.c(32), t0 = props;
@@ -474,49 +497,6 @@ function Button(props) {
     }
   );
 }
-function useCard() {
-  return react.useContext(CardContext);
-}
-const DEFAULT_CARD_ELEMENT = "div";
-function Card(props) {
-  const $ = compilerRuntime.c(38), t0 = props;
-  let className, disabled, pressed, rest, schemeProp, selected, style, t1, t2, t3, t4, t5;
-  $[0] !== t0 ? ({
-    __unstable_checkered: t1,
-    __unstable_focusRing: t2,
-    as: t3,
-    className,
-    disabled,
-    pressed,
-    radius: t4,
-    scheme: schemeProp,
-    selected,
-    style,
-    tone: t5,
-    ...rest
-  } = t0, $[0] = t0, $[1] = className, $[2] = disabled, $[3] = pressed, $[4] = rest, $[5] = schemeProp, $[6] = selected, $[7] = style, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5) : (className = $[1], disabled = $[2], pressed = $[3], rest = $[4], schemeProp = $[5], selected = $[6], style = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12]);
-  const checkered = t1 === void 0 ? !1 : t1, focusRing = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_CARD_ELEMENT : t3, radius = t4 === void 0 ? 0 : t4, toneProp = t5 === void 0 ? "default" : t5, parent = useCard(), tone = toneProp === "inherit" ? parent?.tone : toneProp, scheme = schemeProp === void 0 ? parent?.scheme : schemeProp, t6 = scheme === parent?.scheme ? void 0 : scheme;
-  let t7;
-  $[13] !== className || $[14] !== t6 || $[15] !== tone ? (t7 = css.card({
-    className,
-    scheme: t6,
-    tone
-  }), $[13] = className, $[14] = t6, $[15] = tone, $[16] = t7) : t7 = $[16];
-  const t8 = checkered ? "" : void 0, t9 = disabled ? "" : void 0, t10 = focusRing ? "" : void 0, t11 = pressed ? "" : void 0, t12 = selected ? "" : void 0;
-  let t13;
-  $[17] !== as || $[18] !== radius || $[19] !== rest || $[20] !== style || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(Box, { "data-ui": "Card", ...rest, as, className: t7, "data-checkered": t8, "data-disabled": t9, "data-focus-ring": t10, "data-pressed": t11, "data-selected": t12, radius, style }), $[17] = as, $[18] = radius, $[19] = rest, $[20] = style, $[21] = t10, $[22] = t11, $[23] = t12, $[24] = t7, $[25] = t8, $[26] = t9, $[27] = t13) : t13 = $[27];
-  let node = t13;
-  if (scheme === parent?.scheme && tone === parent?.tone)
-    return node;
-  const t14 = scheme ?? "light", t15 = tone ?? "default", t16 = parent?.unstable_CompatProvider;
-  let t17;
-  if ($[28] !== node || $[29] !== t14 || $[30] !== t15 || $[31] !== t16 ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { scheme: t14, tone: t15, unstable_CompatProvider: t16, children: node }), $[28] = node, $[29] = t14, $[30] = t15, $[31] = t16, $[32] = t17) : t17 = $[32], node = t17, parent?.unstable_CompatProvider) {
-    const CompatProvider = parent.unstable_CompatProvider, t18 = scheme ?? "light", t19 = tone ?? parent?.tone ?? "default";
-    let t20;
-    return $[33] !== CompatProvider || $[34] !== node || $[35] !== t18 || $[36] !== t19 ? (t20 = /* @__PURE__ */ jsxRuntime.jsx(CompatProvider, { scheme: t18, tone: t19, children: node }), $[33] = CompatProvider, $[34] = node, $[35] = t18, $[36] = t19, $[37] = t20) : t20 = $[37], t20;
-  }
-  return node;
-}
 function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   const $ = compilerRuntime.c(4);
   react.useDebugValue(mediaQueryString);
@@ -575,6 +555,49 @@ function useBoundaryElement() {
     throw new Error("useBoundaryElement(): the context value is not compatible");
   return value || DEFAULT_VALUE;
 }
+function useCard() {
+  return react.useContext(CardContext);
+}
+const DEFAULT_CARD_ELEMENT = "div";
+function Card(props) {
+  const $ = compilerRuntime.c(38), t0 = props;
+  let className, disabled, pressed, rest, schemeProp, selected, style, t1, t2, t3, t4, t5;
+  $[0] !== t0 ? ({
+    __unstable_checkered: t1,
+    __unstable_focusRing: t2,
+    as: t3,
+    className,
+    disabled,
+    pressed,
+    radius: t4,
+    scheme: schemeProp,
+    selected,
+    style,
+    tone: t5,
+    ...rest
+  } = t0, $[0] = t0, $[1] = className, $[2] = disabled, $[3] = pressed, $[4] = rest, $[5] = schemeProp, $[6] = selected, $[7] = style, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5) : (className = $[1], disabled = $[2], pressed = $[3], rest = $[4], schemeProp = $[5], selected = $[6], style = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12]);
+  const checkered = t1 === void 0 ? !1 : t1, focusRing = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_CARD_ELEMENT : t3, radius = t4 === void 0 ? 0 : t4, toneProp = t5 === void 0 ? "default" : t5, parent = useCard(), tone = toneProp === "inherit" ? parent?.tone : toneProp, scheme = schemeProp === void 0 ? parent?.scheme : schemeProp, t6 = scheme === parent?.scheme ? void 0 : scheme;
+  let t7;
+  $[13] !== className || $[14] !== t6 || $[15] !== tone ? (t7 = css.card({
+    className,
+    scheme: t6,
+    tone
+  }), $[13] = className, $[14] = t6, $[15] = tone, $[16] = t7) : t7 = $[16];
+  const t8 = checkered ? "" : void 0, t9 = disabled ? "" : void 0, t10 = focusRing ? "" : void 0, t11 = pressed ? "" : void 0, t12 = selected ? "" : void 0;
+  let t13;
+  $[17] !== as || $[18] !== radius || $[19] !== rest || $[20] !== style || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(Box, { "data-ui": "Card", ...rest, as, className: t7, "data-checkered": t8, "data-disabled": t9, "data-focus-ring": t10, "data-pressed": t11, "data-selected": t12, radius, style }), $[17] = as, $[18] = radius, $[19] = rest, $[20] = style, $[21] = t10, $[22] = t11, $[23] = t12, $[24] = t7, $[25] = t8, $[26] = t9, $[27] = t13) : t13 = $[27];
+  let node = t13;
+  if (scheme === parent?.scheme && tone === parent?.tone)
+    return node;
+  const t14 = scheme ?? "light", t15 = tone ?? "default", t16 = parent?.unstable_CompatProvider;
+  let t17;
+  if ($[28] !== node || $[29] !== t14 || $[30] !== t15 || $[31] !== t16 ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { scheme: t14, tone: t15, unstable_CompatProvider: t16, children: node }), $[28] = node, $[29] = t14, $[30] = t15, $[31] = t16, $[32] = t17) : t17 = $[32], node = t17, parent?.unstable_CompatProvider) {
+    const CompatProvider = parent.unstable_CompatProvider, t18 = scheme ?? "light", t19 = tone ?? parent?.tone ?? "default";
+    let t20;
+    return $[33] !== CompatProvider || $[34] !== node || $[35] !== t18 || $[36] !== t19 ? (t20 = /* @__PURE__ */ jsxRuntime.jsx(CompatProvider, { scheme: t18, tone: t19, children: node }), $[33] = CompatProvider, $[34] = node, $[35] = t18, $[36] = t19, $[37] = t20) : t20 = $[37], t20;
+  }
+  return node;
+}
 const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
 globalScope[elementKey] = null;
 const defaultContextValue = {
@@ -1706,29 +1729,6 @@ function MenuDivider(props) {
   let t3;
   return $[6] !== Element || $[7] !== rest || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Element, { ...rest, className: t2 }), $[6] = Element, $[7] = rest, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
-const DEFAULT_SELECTABLE_ELEMENT = "button";
-function Selectable(props) {
-  const $ = compilerRuntime.c(16), t0 = props;
-  let className, radius, rest, selected, t1, tone;
-  $[0] !== t0 ? ({
-    as: t1,
-    className,
-    radius,
-    selected,
-    tone,
-    ...rest
-  } = t0, $[0] = t0, $[1] = className, $[2] = radius, $[3] = rest, $[4] = selected, $[5] = t1, $[6] = tone) : (className = $[1], radius = $[2], rest = $[3], selected = $[4], t1 = $[5], tone = $[6]);
-  const as = t1 === void 0 ? DEFAULT_SELECTABLE_ELEMENT : t1;
-  let t2;
-  $[7] !== className || $[8] !== radius || $[9] !== tone ? (t2 = css._selectable({
-    className,
-    radius,
-    tone
-  }), $[7] = className, $[8] = radius, $[9] = tone, $[10] = t2) : t2 = $[10];
-  const t3 = selected ? "" : void 0;
-  let t4;
-  return $[11] !== as || $[12] !== rest || $[13] !== t2 || $[14] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Box, { ...rest, as, className: t2, "data-selected": t3 }), $[11] = as, $[12] = rest, $[13] = t2, $[14] = t3, $[15] = t4) : t4 = $[15], t4;
-}
 function useMenu() {
   const value = react.useContext(MenuContext);
   if (!value)