@sanity/ui 3.0.0-static.10 → 3.0.0-static.3

package/src/theme/v3/color/card.ts

@@ -15,48 +15,6 @@ export interface CardColorTokens {
     }
   >
   backdrop: [ColorToken, ColorToken]
-  code: {
-    bg: [ColorToken, ColorToken]
-    fg: [ColorToken, ColorToken]
-    token: {
-      atrule: [ColorToken, ColorToken]
-      attrName: [ColorToken, ColorToken]
-      attrValue: [ColorToken, ColorToken]
-      attribute: [ColorToken, ColorToken]
-      boolean: [ColorToken, ColorToken]
-      builtin: [ColorToken, ColorToken]
-      cdata: [ColorToken, ColorToken]
-      char: [ColorToken, ColorToken]
-      class: [ColorToken, ColorToken]
-      className: [ColorToken, ColorToken]
-      comment: [ColorToken, ColorToken]
-      constant: [ColorToken, ColorToken]
-      deleted: [ColorToken, ColorToken]
-      doctype: [ColorToken, ColorToken]
-      entity: [ColorToken, ColorToken]
-      function: [ColorToken, ColorToken]
-      hexcode: [ColorToken, ColorToken]
-      id: [ColorToken, ColorToken]
-      important: [ColorToken, ColorToken]
-      inserted: [ColorToken, ColorToken]
-      keyword: [ColorToken, ColorToken]
-      number: [ColorToken, ColorToken]
-      operator: [ColorToken, ColorToken]
-      prolog: [ColorToken, ColorToken]
-      property: [ColorToken, ColorToken]
-      pseudoClass: [ColorToken, ColorToken]
-      pseudoElement: [ColorToken, ColorToken]
-      punctuation: [ColorToken, ColorToken]
-      regex: [ColorToken, ColorToken]
-      selector: [ColorToken, ColorToken]
-      string: [ColorToken, ColorToken]
-      symbol: [ColorToken, ColorToken]
-      tag: [ColorToken, ColorToken]
-      unit: [ColorToken, ColorToken]
-      url: [ColorToken, ColorToken]
-      variable: [ColorToken, ColorToken]
-    }
-  }
   focusRing: [ColorToken, ColorToken]
   link: {
     fg: [ColorToken, ColorToken]
@@ -71,7 +29,44 @@ export interface CardColorTokens {
     from: [ColorToken, ColorToken]
     to: [ColorToken, ColorToken]
   }
-
+  token: {
+    atrule: [ColorToken, ColorToken]
+    attrName: [ColorToken, ColorToken]
+    attrValue: [ColorToken, ColorToken]
+    attribute: [ColorToken, ColorToken]
+    boolean: [ColorToken, ColorToken]
+    builtin: [ColorToken, ColorToken]
+    cdata: [ColorToken, ColorToken]
+    char: [ColorToken, ColorToken]
+    class: [ColorToken, ColorToken]
+    className: [ColorToken, ColorToken]
+    comment: [ColorToken, ColorToken]
+    constant: [ColorToken, ColorToken]
+    deleted: [ColorToken, ColorToken]
+    doctype: [ColorToken, ColorToken]
+    entity: [ColorToken, ColorToken]
+    function: [ColorToken, ColorToken]
+    hexcode: [ColorToken, ColorToken]
+    id: [ColorToken, ColorToken]
+    important: [ColorToken, ColorToken]
+    inserted: [ColorToken, ColorToken]
+    keyword: [ColorToken, ColorToken]
+    number: [ColorToken, ColorToken]
+    operator: [ColorToken, ColorToken]
+    prolog: [ColorToken, ColorToken]
+    property: [ColorToken, ColorToken]
+    pseudoClass: [ColorToken, ColorToken]
+    pseudoElement: [ColorToken, ColorToken]
+    punctuation: [ColorToken, ColorToken]
+    regex: [ColorToken, ColorToken]
+    selector: [ColorToken, ColorToken]
+    string: [ColorToken, ColorToken]
+    symbol: [ColorToken, ColorToken]
+    tag: [ColorToken, ColorToken]
+    unit: [ColorToken, ColorToken]
+    url: [ColorToken, ColorToken]
+    variable: [ColorToken, ColorToken]
+  }
   variant: {
     solid: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
     tinted: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>

package/src/theme/v3/color/color.ts

@@ -34,48 +34,6 @@ export interface ThemeColorCard_v3 {
   _hue: Hue
   avatar: ThemeColorAvatar_v2
   backdrop: string
-  code: {
-    bg: string
-    fg: string
-    token: {
-      atrule: string
-      attrName: string
-      attrValue: string
-      attribute: string
-      boolean: string
-      builtin: string
-      cdata: string
-      char: string
-      class: string
-      className: string
-      comment: string
-      constant: string
-      deleted: string
-      doctype: string
-      entity: string
-      function: string
-      hexcode: string
-      id: string
-      important: string
-      inserted: string
-      keyword: string
-      number: string
-      operator: string
-      prolog: string
-      property: string
-      pseudoClass: string
-      pseudoElement: string
-      punctuation: string
-      regex: string
-      selector: string
-      string: string
-      symbol: string
-      tag: string
-      unit: string
-      url: string
-      variable: string
-    }
-  }
   focusRing: string
   shadow: {
     outline: string
@@ -83,6 +41,44 @@ export interface ThemeColorCard_v3 {
     penumbra: string
     ambient: string
   }
+  token: {
+    atrule: string
+    attrName: string
+    attrValue: string
+    attribute: string
+    boolean: string
+    builtin: string
+    cdata: string
+    char: string
+    class: string
+    className: string
+    comment: string
+    constant: string
+    deleted: string
+    doctype: string
+    entity: string
+    function: string
+    hexcode: string
+    id: string
+    important: string
+    inserted: string
+    keyword: string
+    number: string
+    operator: string
+    prolog: string
+    property: string
+    pseudoClass: string
+    pseudoElement: string
+    punctuation: string
+    regex: string
+    selector: string
+    string: string
+    symbol: string
+    tag: string
+    unit: string
+    url: string
+    variable: string
+  }
   skeleton: {
     from: string
     to: string

package/src/theme/v3/defaults.ts

@@ -1,52 +1,28 @@
+import {PaletteConfig} from '../palette'
 import {PartialTokens, Tokens} from './tokens'
 
+export const defaultPalette: PaletteConfig = {
+  chroma: {min: 0.005, max: 0.2325},
+  luminosity: {min: 0.1875, max: 1},
+  hues: {
+    gray: {h: 277, c: 0.04},
+    blue: {h: 273, c: 0.185},
+    purple: {h: 295, c: 0.4},
+    magenta: {h: 12, c: 0.4},
+    red: {h: 30, c: 0.4},
+    orange: {h: 68, c: 0.4},
+    yellow: {h: 90, c: 0.4},
+    green: {h: 171, c: 0.4},
+    cyan: {h: 194, c: 0.4},
+  },
+}
+
 export const defaultTokens: PartialTokens<Tokens> = {
   color: {
     '*': {
       // backdrop: ['black/0.2', '200/0.2'],
       backdrop: ['black/0.5', 'gray/100/0.5'],
-      code: {
-        bg: ['950', '50'],
-        fg: ['300', '700'],
-        token: {
-          atrule: ['purple/300', 'purple/600'],
-          attrName: ['green/300', 'green/600'],
-          attrValue: ['yellow/300', 'yellow/600'],
-          attribute: ['yellow/300', 'yellow/600'],
-          boolean: ['purple/300', 'purple/600'],
-          builtin: ['purple/300', 'purple/600'],
-          cdata: ['yellow/300', 'yellow/600'],
-          char: ['yellow/300', 'yellow/600'],
-          class: ['orange/300', 'orange/600'],
-          className: ['cyan/300', 'cyan/600'],
-          comment: ['gray/600', 'gray/300'],
-          constant: ['purple/300', 'purple/600'],
-          deleted: ['red/300', 'red/600'],
-          entity: ['red/300', 'red/600'],
-          function: ['green/300', 'green/600'],
-          hexcode: ['blue/300', 'blue/600'],
-          id: ['purple/300', 'purple/600'],
-          important: ['purple/300', 'purple/600'],
-          inserted: ['green/300', 'green/600'],
-          keyword: ['magenta/300', 'magenta/600'],
-          number: ['purple/300', 'purple/600'],
-          operator: ['magenta/300', 'magenta/600'],
-          prolog: ['gray/300', 'gray/600'],
-          property: ['blue/300', 'blue/600'],
-          pseudoClass: ['yellow/300', 'yellow/600'],
-          pseudoElement: ['yellow/300', 'yellow/600'],
-          punctuation: ['gray/300', 'gray/600'],
-          regex: ['blue/300', 'blue/600'],
-          selector: ['red/300', 'red/600'],
-          string: ['yellow/300', 'yellow/600'],
-          symbol: ['purple/300', 'purple/600'],
-          tag: ['red/300', 'red/600'],
-          unit: ['orange/300', 'orange/600'],
-          url: ['red/300', 'red/600'],
-          variable: ['red/300', 'red/600'],
-        },
-      },
-      focusRing: ['blue/500', 'blue/500'],
+      focusRing: ['blue/500', 'blue/300'],
       link: {
         fg: ['blue/400', 'blue/600'],
       },
@@ -56,16 +32,53 @@ export const defaultTokens: PartialTokens<Tokens> = {
         penumbra: ['black/0.14', '500/0.07'],
         ambient: ['black/0.12', '500/0.06'],
       },
+      token: {
+        atrule: ['purple/300', 'purple/600'],
+        attrName: ['green/300', 'green/600'],
+        attrValue: ['yellow/300', 'yellow/600'],
+        attribute: ['yellow/300', 'yellow/600'],
+        boolean: ['purple/300', 'purple/600'],
+        builtin: ['purple/300', 'purple/600'],
+        cdata: ['yellow/300', 'yellow/600'],
+        char: ['yellow/300', 'yellow/600'],
+        class: ['orange/300', 'orange/600'],
+        className: ['cyan/300', 'cyan/600'],
+        comment: ['gray/600', 'gray/300'],
+        constant: ['purple/300', 'purple/600'],
+        deleted: ['red/300', 'red/600'],
+        entity: ['red/300', 'red/600'],
+        function: ['green/300', 'green/600'],
+        hexcode: ['blue/300', 'blue/600'],
+        id: ['purple/300', 'purple/600'],
+        important: ['purple/300', 'purple/600'],
+        inserted: ['green/300', 'green/600'],
+        keyword: ['magenta/300', 'magenta/600'],
+        number: ['purple/300', 'purple/600'],
+        operator: ['magenta/300', 'magenta/600'],
+        prolog: ['gray/300', 'gray/600'],
+        property: ['blue/300', 'blue/600'],
+        pseudoClass: ['yellow/300', 'yellow/600'],
+        pseudoElement: ['yellow/300', 'yellow/600'],
+        punctuation: ['gray/300', 'gray/600'],
+        regex: ['blue/300', 'blue/600'],
+        selector: ['red/300', 'red/600'],
+        string: ['yellow/300', 'yellow/600'],
+        symbol: ['purple/300', 'purple/600'],
+        tag: ['red/300', 'red/600'],
+        unit: ['orange/300', 'orange/600'],
+        url: ['red/300', 'red/600'],
+        variable: ['red/300', 'red/600'],
+      },
       variant: {
         tinted: {
           '*': {
             bg: {
-              0: ['950', '50'],
-              4: ['800', '200'],
+              0: ['900', '50'],
+              4: ['800', '150'],
             },
             border: {
-              0: ['700', '100'],
-              4: ['500', '300'],
+              0: ['800', '150'],
+              4: ['600', '350'],
             },
             fg: {
               0: ['100', '900'],
@@ -91,8 +104,8 @@ export const defaultTokens: PartialTokens<Tokens> = {
         solid: {
           '*': {
             bg: {
-              0: ['400', '500'],
-              4: ['300', '600'],
+              0: ['300', '500'],
+              4: ['200', '600'],
             },
             border: {
               0: ['200', '400'],
@@ -137,15 +150,15 @@ export const defaultTokens: PartialTokens<Tokens> = {
           '*': {
             bg: {
               0: ['black', 'gray/50'],
-              4: ['800', '300 50%'],
+              4: ['900', '150'],
             },
             border: {
-              0: ['800', '300 40%'],
-              4: ['600', '300'],
+              0: ['900', '150'],
+              4: ['700', '350'],
             },
             fg: {
-              0: ['100', 'black'],
-              4: ['400', '700'],
+              0: ['150', 'black'],
+              4: ['550', '600'],
             },
           },
         },
@@ -156,12 +169,12 @@ export const defaultTokens: PartialTokens<Tokens> = {
         tinted: {
           '*': {
             bg: {
-              0: ['950', 'white'],
-              4: ['800', '200'],
+              0: ['gray/950', 'white'],
+              4: ['850', '100'],
             },
             border: {
-              0: ['800', '100'],
-              4: ['600', '300'],
+              0: ['850', '100'],
+              4: ['650', '300'],
             },
             fg: {
               0: ['white', 'black'],
@@ -171,18 +184,6 @@ export const defaultTokens: PartialTokens<Tokens> = {
         },
       },
     },
-    'neutral': {
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['900', '50'],
-              4: ['700', '200'],
-            },
-          },
-        },
-      },
-    },
     'primary': {
       _hue: 'blue',
     },
@@ -200,3 +201,5 @@ export const defaultTokens: PartialTokens<Tokens> = {
     },
   },
 }
+
+// export const defaultTheme = buildTheme_v3()

package/src/theme/v3/resolveTokens.ts

@@ -97,48 +97,6 @@ function resolveCardColorTokens(
       },
     },
     backdrop: tokens?.backdrop ?? ['900', '100'],
-    code: {
-      bg: tokens?.code?.bg ?? ['950', '50'],
-      fg: tokens?.code?.fg ?? ['400', '600'],
-      token: {
-        atrule: tokens?.code?.token?.atrule ?? ['400', '600'],
-        attribute: tokens?.code?.token?.attribute ?? ['400', '600'],
-        attrName: tokens?.code?.token?.attrName ?? ['400', '600'],
-        attrValue: tokens?.code?.token?.attrValue ?? ['400', '600'],
-        boolean: tokens?.code?.token?.boolean ?? ['400', '600'],
-        builtin: tokens?.code?.token?.builtin ?? ['400', '600'],
-        cdata: tokens?.code?.token?.cdata ?? ['400', '600'],
-        char: tokens?.code?.token?.char ?? ['400', '600'],
-        class: tokens?.code?.token?.class ?? ['400', '600'],
-        className: tokens?.code?.token?.className ?? ['400', '600'],
-        comment: tokens?.code?.token?.comment ?? ['600', '400'],
-        constant: tokens?.code?.token?.constant ?? ['400', '600'],
-        deleted: tokens?.code?.token?.deleted ?? ['400', '600'],
-        doctype: tokens?.code?.token?.doctype ?? ['400', '600'],
-        entity: tokens?.code?.token?.entity ?? ['400', '600'],
-        function: tokens?.code?.token?.function ?? ['400', '600'],
-        hexcode: tokens?.code?.token?.hexcode ?? ['400', '600'],
-        id: tokens?.code?.token?.id ?? ['400', '600'],
-        important: tokens?.code?.token?.important ?? ['400', '600'],
-        inserted: tokens?.code?.token?.inserted ?? ['400', '600'],
-        keyword: tokens?.code?.token?.keyword ?? ['400', '600'],
-        number: tokens?.code?.token?.number ?? ['400', '600'],
-        operator: tokens?.code?.token?.operator ?? ['400', '600'],
-        prolog: tokens?.code?.token?.prolog ?? ['400', '600'],
-        property: tokens?.code?.token?.property ?? ['400', '600'],
-        pseudoClass: tokens?.code?.token?.pseudoClass ?? ['400', '600'],
-        pseudoElement: tokens?.code?.token?.pseudoElement ?? ['400', '600'],
-        punctuation: tokens?.code?.token?.punctuation ?? ['400', '600'],
-        regex: tokens?.code?.token?.regex ?? ['400', '600'],
-        selector: tokens?.code?.token?.selector ?? ['400', '600'],
-        string: tokens?.code?.token?.string ?? ['400', '600'],
-        symbol: tokens?.code?.token?.symbol ?? ['400', '600'],
-        tag: tokens?.code?.token?.tag ?? ['400', '600'],
-        unit: tokens?.code?.token?.unit ?? ['400', '600'],
-        url: tokens?.code?.token?.url ?? ['400', '600'],
-        variable: tokens?.code?.token?.variable ?? ['400', '600'],
-      },
-    },
     focusRing: tokens?.focusRing ?? ['500', '500'],
     link: {
       fg: tokens?.link?.fg ?? ['400', '600'],
@@ -153,7 +111,44 @@ function resolveCardColorTokens(
       from: tokens?.skeleton?.from ?? ['900', '100'],
       to: tokens?.skeleton?.to ?? ['950', '50'],
     },
-
+    token: {
+      atrule: tokens?.token?.atrule ?? ['400', '600'],
+      attribute: tokens?.token?.attribute ?? ['400', '600'],
+      attrName: tokens?.token?.attrName ?? ['400', '600'],
+      attrValue: tokens?.token?.attrValue ?? ['400', '600'],
+      boolean: tokens?.token?.boolean ?? ['400', '600'],
+      builtin: tokens?.token?.builtin ?? ['400', '600'],
+      cdata: tokens?.token?.cdata ?? ['400', '600'],
+      char: tokens?.token?.char ?? ['400', '600'],
+      class: tokens?.token?.class ?? ['400', '600'],
+      className: tokens?.token?.className ?? ['400', '600'],
+      comment: tokens?.token?.comment ?? ['600', '400'],
+      constant: tokens?.token?.constant ?? ['400', '600'],
+      deleted: tokens?.token?.deleted ?? ['400', '600'],
+      doctype: tokens?.token?.doctype ?? ['400', '600'],
+      entity: tokens?.token?.entity ?? ['400', '600'],
+      function: tokens?.token?.function ?? ['400', '600'],
+      hexcode: tokens?.token?.hexcode ?? ['400', '600'],
+      id: tokens?.token?.id ?? ['400', '600'],
+      important: tokens?.token?.important ?? ['400', '600'],
+      inserted: tokens?.token?.inserted ?? ['400', '600'],
+      keyword: tokens?.token?.keyword ?? ['400', '600'],
+      number: tokens?.token?.number ?? ['400', '600'],
+      operator: tokens?.token?.operator ?? ['400', '600'],
+      prolog: tokens?.token?.prolog ?? ['400', '600'],
+      property: tokens?.token?.property ?? ['400', '600'],
+      pseudoClass: tokens?.token?.pseudoClass ?? ['400', '600'],
+      pseudoElement: tokens?.token?.pseudoElement ?? ['400', '600'],
+      punctuation: tokens?.token?.punctuation ?? ['400', '600'],
+      regex: tokens?.token?.regex ?? ['400', '600'],
+      selector: tokens?.token?.selector ?? ['400', '600'],
+      string: tokens?.token?.string ?? ['400', '600'],
+      symbol: tokens?.token?.symbol ?? ['400', '600'],
+      tag: tokens?.token?.tag ?? ['400', '600'],
+      unit: tokens?.token?.unit ?? ['400', '600'],
+      url: tokens?.token?.url ?? ['400', '600'],
+      variable: tokens?.token?.variable ?? ['400', '600'],
+    },
     variant: {
       solid: {
         '*': resolveElementTokens(tokens?.variant?.solid?.['*']),

package/src/theme/v3/types.ts

@@ -1,4 +1,5 @@
 import {ThemeConfig} from '../config'
+import {PaletteConfig} from '../palette'
 import {ThemeFocusRing, ThemeFonts, ThemeFontWeightKey, ThemeLayer, ThemeShadow} from '../v0'
 import {ThemeAvatar_v2, ThemeInput_v2} from '../v2'
 import {ThemeColor_v3} from './color'
@@ -10,6 +11,7 @@ export type ThemeEntry = [`--${string}`, string]
 /** @public */
 export interface ThemeOptions {
   v2?: ThemeConfig
+  palette?: PaletteConfig
   tokens?: PartialTokens<Tokens>
 }
 
@@ -20,6 +22,7 @@ export interface ThemeOptions {
  */
 export interface Theme_v3 {
   _version: 3
+  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {

package/src/theme/versioning/themeColor_v3_v2.ts

@@ -84,7 +84,7 @@ export function themeColor_v3_v2(options: {
       return tones
     }, {} as ThemeColorSelectable_v2),
     shadow: color.shadow,
-    syntax: color.code.token,
+    syntax: color.token,
   }
 }
 

package/src/ui/StyleTags.tsx

@@ -11,7 +11,7 @@ export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
   return (
     <>
       <style href="sanity-palette" precedence="palette">
-        {compilePalette()}
+        {compilePalette(theme._palette)}
       </style>
       <style href="sanity-theme" precedence="theme">
         {compileTheme({v3: theme} as RootTheme)}

package/src/ui/components/autocomplete/__workshop__/async.tsx

@@ -135,6 +135,7 @@ function AsyncOption(props: {
       disabled={disabled}
       padding={3}
       radius={1}
+      selectable
       selected={selected}
       tabIndex={tabIndex}
     >

package/src/ui/components/autocomplete/__workshop__/index.ts

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: 'components/autocomplete',
+  name: './components/autocomplete',
   title: 'Autocomplete',
   stories: [
     {

package/src/ui/components/autocomplete/autocomplete.tsx

@@ -128,7 +128,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     customValidity,
     disabled,
     filterOption: filterOptionProp,
-    fontSize = 2,
+    fontSize = 1,
     icon,
     id,
     listBox = EMPTY_RECORD,
@@ -167,7 +167,14 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const defaultRenderOption = useCallback(
     ({value}: BaseAutocompleteOption) => (
-      <Card as="button" padding={paddingProp} radius={2} tone="inherit">
+      <Card
+        as="button"
+        // data-as="button"
+        padding={paddingProp}
+        radius={2}
+        selectable
+        // tone="inherit"
+      >
         <Text size={fontSize} textOverflow="ellipsis">
           {value}
         </Text>
@@ -612,6 +619,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
                 {cloneElement(renderOption(option), {
                   disabled: loading,
                   selected: active,
+                  selectable: true,
                   tabIndex: listFocused && active ? 0 : -1,
                 })}
               </AutocompleteOption>
@@ -678,6 +686,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
     popover,
+    radius,
     renderPopover,
   ])
 

package/src/ui/components/dialog/dialog.tsx

@@ -26,7 +26,7 @@ import {
   useRef,
 } from 'react'
 
-import {Z_OFFSETS} from '../../constants'
+import {useTheme_v2} from '../../_compat'
 import {
   containsOrEqualsElement,
   focusFirstDescendant,
@@ -282,6 +282,7 @@ export const Dialog = forwardRef(function Dialog(
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const context = useDialog()
+  const {layer} = useTheme_v2()
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
@@ -308,8 +309,8 @@ export const Dialog = forwardRef(function Dialog(
     tone,
     ...restProps
   } = props
-  const positionProp = _positionProp ?? context.position ?? 'fixed'
-  const zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog
+  const positionProp = _positionProp ?? (context.position || 'fixed')
+  const zOffsetProp = _zOffsetProp ?? (context.zOffset || layer.dialog.zOffset)
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()

package/src/ui/constants.ts

@@ -77,9 +77,3 @@ export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | '
   bottom: 'top',
   left: 'right',
 }
-
-export const Z_OFFSETS = {
-  dialog: 600,
-  popover: 400,
-  tooltip: 200,
-}

package/src/ui/hooks/useMediaIndex/useMediaIndex.ts

@@ -96,6 +96,8 @@ function getServerSnapshot() {
  * @beta
  */
 export function useMediaIndex(): number {
+  // const {media} = useTheme_v2()
+  // const media = MEDIA
   const store = useMemo(() => _createMediaStore(), [])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)

package/src/ui/primitives/box/box.tsx

@@ -32,10 +32,7 @@ export const Box = forwardRef(function Box(
   const {
     align,
     as: As = 'div',
-    autoCols,
-    autoFlow,
-    autoRows,
-    border = false,
+    border,
     borderTop,
     borderRight,
     borderBottom,
@@ -66,7 +63,6 @@ export const Box = forwardRef(function Box(
     marginBottom,
     marginLeft,
     maxWidth,
-    minWidth = 0,
     overflow,
     padding = 0,
     paddingX,
@@ -97,9 +93,6 @@ export const Box = forwardRef(function Box(
         className,
         box({
           align,
-          autoCols,
-          autoFlow,
-          autoRows,
           border,
           borderTop,
           borderRight,
@@ -131,7 +124,6 @@ export const Box = forwardRef(function Box(
           marginBottom,
           marginLeft,
           maxWidth,
-          minWidth,
           muted,
           padding,
           paddingX,
@@ -152,6 +144,7 @@ export const Box = forwardRef(function Box(
           wrap,
         }),
       )}
+      // data-gap={gap}
       ref={ref}
     >
       {props.children}