@sanity/ui 3.0.0-static.16 → 3.0.0-static.18

package/README.md

@@ -14,9 +14,7 @@ npm install react react-dom react-is styled-components
 ## Usage
 
 ```jsx
-import '@sanity/ui/sanity-palette.css'
-import '@sanity/ui/sanity-theme.css'
-import '@sanity/ui/system.css'
+import '@sanity/ui/ui.css'
 
 import {Button, Card} from '@sanity/ui'
 import {createRoot} from 'react-dom/client'
@@ -24,7 +22,7 @@ import {createRoot} from 'react-dom/client'
 const root = createRoot(document.getElementById('root'))
 
 root.render(
-  <Card>
+  <Card scheme="light" tone="default">
     <Button text="Hello, world" />
   </Card>,
 )

package/bin/{ui.js → sanity-ui.cjs}

@@ -2,4 +2,4 @@
 
 require('dotenv-flow').config()
 
-require('../dist/cli.js')
+require('../dist/cli.cjs')

package/dist/_chunks-cjs/{_visual-editing.js → _visual-editing.cjs}

@@ -282,9 +282,9 @@ function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   let t1;
   return $[2] !== mediaQueryString ? (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1) : t1 = $[3], react.useSyncExternalStore(t0, t1, getServerSnapshot2);
 }
-const media = [360, 600, 900, 1200, 1800, 2400];
+const media = Object.values(css.BREAKPOINTS);
 function _getMediaQuery(media2, index) {
-  return index === 0 ? `screen and (max-width: ${media2[index] - 1}px)` : index === media2.length ? `screen and (min-width: ${media2[index - 1]}px)` : `screen and (min-width: ${media2[index - 1]}px) and (max-width: ${media2[index] - 1}px)`;
+  return index === 0 ? `screen and (max-width: ${media2[index + 1] - 1}px)` : index === media2.length ? `screen and (min-width: ${media2[index]}px)` : `screen and (min-width: ${media2[index]}px) and (max-width: ${media2[index + 1] - 1}px)`;
 }
 function _createMediaStore() {
   const mediaLen = media.length;
@@ -787,12 +787,12 @@ function Button(props) {
       className: css.composeClassNames(className, css.button({
         display,
         flex,
-        mode,
         radius,
-        tone,
         width
       })),
       "data-disabled": loading || disabled ? "" : void 0,
+      "data-mode": mode,
+      "data-tone": tone,
       "data-selected": selected ? "" : void 0,
       disabled: !!(loading || disabled),
       href: disabled ? void 0 : href,
@@ -904,7 +904,7 @@ function Checkbox(props) {
 }
 Checkbox.displayName = "Checkbox";
 const LazyRefractor = react.lazy(() => Promise.resolve().then(function() {
-  return require("./refractor.js");
+  return require("./refractor.cjs");
 })), DEFAULT_CODE_ELEMENT = "pre";
 function Code(props) {
   const $ = reactCompilerRuntime.c(25), t0 = props;
@@ -3151,4 +3151,4 @@ exports.useRootTheme = useRootTheme;
 exports.useTheme = useTheme;
 exports.useTheme_v2 = useTheme_v2;
 exports.useTooltipDelayGroup = useTooltipDelayGroup;
-//# sourceMappingURL=_visual-editing.js.map
+//# sourceMappingURL=_visual-editing.cjs.map