@sanity/ui 4.0.0-static.1 → 4.0.0-static.10

package/dist/css/index.d.cts

@@ -7,7 +7,6 @@ import {ColorTokens as ColorTokens_2} from '@sanity/ui/theme'
 import type {ColorVariant} from '@sanity/ui/theme'
 import type {ContainerScale} from '@sanity/ui/theme'
 import type {ContainerWidth} from '@sanity/ui/theme'
-import type {createThemeContract} from '@vanilla-extract/css'
 import type {ElementTone} from '@sanity/ui/theme'
 import type {FontCodeSize} from '@sanity/ui/theme'
 import type {FontHeadingSize} from '@sanity/ui/theme'
@@ -360,6 +359,10 @@ export declare type CoreThemeTokens = {
   space: Record<Space, string>
 }
 
+declare function createThemeContract<ThemeTokens extends NullableTokens_2>(
+  tokens: ThemeTokens,
+): ThemeVars_2<ThemeTokens>
+
 /** @public */
 export declare type CSSCardColorTokens = {
   avatar: Record<
@@ -440,6 +443,8 @@ export declare type CSSThemeOptions = {
 /** @public */
 export declare type CSSVarFunction = `var(${CSSVarName})`
 
+declare type CSSVarFunction_2 = `var(--${string})`
+
 /** @public */
 export declare type CSSVarName = `--${string}`
 
@@ -840,6 +845,14 @@ export declare interface LabelStyleProps extends FlexStyleProps, FontStyleProps
 /** @public */
 export declare const layers: Record<CSSLayer, string>
 
+declare type MapLeafNodes<Obj, LeafType> = {
+  [Prop in keyof Obj]: Obj[Prop] extends Primitive
+    ? LeafType
+    : Obj[Prop] extends Record<string | number, any>
+      ? MapLeafNodes<Obj[Prop], LeafType>
+      : never
+}
+
 /** @public */
 export declare type Margin = Space | 'auto'
 
@@ -901,6 +914,10 @@ export declare type NullableTokens = {
   [key: string]: string | NullableTokens
 }
 
+declare type NullableTokens_2 = {
+  [key: string]: string | NullableTokens_2 | null
+}
+
 /** @public */
 export declare type Outline = 'none'
 
@@ -973,6 +990,8 @@ export declare interface PositionStyleProps {
   position?: ResponsiveProp<Position>
 }
 
+declare type Primitive = string | boolean | number | null | undefined
+
 /** @public */
 export declare function radio(props: {className?: string}): string | undefined
 
@@ -1329,6 +1348,11 @@ export declare type ThemeVars = ThemeContract<ThemeTokens & ScopedTokens>
  * @internal */
 export declare const themeVars: ThemeContract<ThemeTokens>
 
+declare type ThemeVars_2<ThemeContract extends NullableTokens_2> = MapLeafNodes<
+  ThemeContract,
+  CSSVarFunction_2
+>
+
 /** @public */
 export declare function toast(): string
 

package/dist/css/index.d.ts

@@ -7,7 +7,6 @@ import {ColorTokens as ColorTokens_2} from '@sanity/ui/theme'
 import type {ColorVariant} from '@sanity/ui/theme'
 import type {ContainerScale} from '@sanity/ui/theme'
 import type {ContainerWidth} from '@sanity/ui/theme'
-import type {createThemeContract} from '@vanilla-extract/css'
 import type {ElementTone} from '@sanity/ui/theme'
 import type {FontCodeSize} from '@sanity/ui/theme'
 import type {FontHeadingSize} from '@sanity/ui/theme'
@@ -360,6 +359,10 @@ export declare type CoreThemeTokens = {
   space: Record<Space, string>
 }
 
+declare function createThemeContract<ThemeTokens extends NullableTokens_2>(
+  tokens: ThemeTokens,
+): ThemeVars_2<ThemeTokens>
+
 /** @public */
 export declare type CSSCardColorTokens = {
   avatar: Record<
@@ -440,6 +443,8 @@ export declare type CSSThemeOptions = {
 /** @public */
 export declare type CSSVarFunction = `var(${CSSVarName})`
 
+declare type CSSVarFunction_2 = `var(--${string})`
+
 /** @public */
 export declare type CSSVarName = `--${string}`
 
@@ -840,6 +845,14 @@ export declare interface LabelStyleProps extends FlexStyleProps, FontStyleProps
 /** @public */
 export declare const layers: Record<CSSLayer, string>
 
+declare type MapLeafNodes<Obj, LeafType> = {
+  [Prop in keyof Obj]: Obj[Prop] extends Primitive
+    ? LeafType
+    : Obj[Prop] extends Record<string | number, any>
+      ? MapLeafNodes<Obj[Prop], LeafType>
+      : never
+}
+
 /** @public */
 export declare type Margin = Space | 'auto'
 
@@ -901,6 +914,10 @@ export declare type NullableTokens = {
   [key: string]: string | NullableTokens
 }
 
+declare type NullableTokens_2 = {
+  [key: string]: string | NullableTokens_2 | null
+}
+
 /** @public */
 export declare type Outline = 'none'
 
@@ -973,6 +990,8 @@ export declare interface PositionStyleProps {
   position?: ResponsiveProp<Position>
 }
 
+declare type Primitive = string | boolean | number | null | undefined
+
 /** @public */
 export declare function radio(props: {className?: string}): string | undefined
 
@@ -1329,6 +1348,11 @@ export declare type ThemeVars = ThemeContract<ThemeTokens & ScopedTokens>
  * @internal */
 export declare const themeVars: ThemeContract<ThemeTokens>
 
+declare type ThemeVars_2<ThemeContract extends NullableTokens_2> = MapLeafNodes<
+  ThemeContract,
+  CSSVarFunction_2
+>
+
 /** @public */
 export declare function toast(): string
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.1",
+  "version": "4.0.0-static.10",
   "keywords": [
     "react",
     "ui",
@@ -118,17 +118,15 @@
     "extends": "@sanity/semantic-release-preset"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.4",
+    "@floating-ui/react-dom": "^2.1.5",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.4",
-    "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/dynamic": "^2.1.5",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.6",
-    "react-compiler-runtime": "19.1.0-rc.2",
+    "framer-motion": "^12.23.12",
     "react-refractor": "^4.0.0",
-    "use-effect-event": "^2.0.2"
+    "use-effect-event": "^2.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
@@ -137,34 +135,37 @@
     "@babel/preset-typescript": "^7.27.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/js": "^9.31.0",
+    "@eslint/js": "^9.32.0",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^7.9.10",
+    "@sanity/pkg-utils": "^7.9.17",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.1.6",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@sanity/ui-workshop": "^3.1.2",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.0.3",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "@types/react-is": "^19.0.0",
-    "@vanilla-extract/rollup-plugin": "^1.3.17",
-    "@vanilla-extract/vite-plugin": "^5.1.0",
+    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/rollup-plugin": "^1.4.0",
+    "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^4.7.0",
-    "@vitest/browser": "^3.2.3",
+    "@vitest/browser": "^3.2.4",
     "autoprefixer": "^10.4.21",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "browserslist": "^4.25.1",
+    "browserslist-config-baseline": "^0.4.0",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
-    "cssnano": "^7.0.7",
+    "cssnano": "^7.1.0",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
-    "eslint": "^9.31.0",
+    "eslint": "^9.32.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-compact": "^8.40.0",
     "eslint-plugin-boundaries": "^5.0.1",
@@ -174,31 +175,31 @@
     "eslint-plugin-react-hooks": "0.0.0-experimental-edac0dde-20250723",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^9.0.11",
-    "globals": "^16.2.0",
+    "eslint-plugin-storybook": "^9.0.18",
+    "globals": "^16.3.0",
     "husky": "^8.0.3",
     "lightningcss": "^1.30.1",
     "lint-staged": "^14.0.1",
     "mkdirp": "^3.0.1",
     "npm-run-all2": "^8.0.4",
     "postcss": "^8.5.6",
-    "postcss-preset-env": "^10.2.3",
-    "prettier": "^3.5.3",
-    "prettier-plugin-packagejson": "^2.5.15",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-is": "^19.1.0",
+    "postcss-preset-env": "^10.2.4",
+    "prettier": "^3.6.2",
+    "prettier-plugin-packagejson": "^2.5.19",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-is": "^19.1.1",
     "refractor": "^5.0.0",
     "rimraf": "^5.0.10",
     "semantic-release": "24.2.7",
-    "start-server-and-test": "^2.0.11",
-    "styled-components": "^6.1.17",
+    "start-server-and-test": "^2.0.12",
+    "styled-components": "^6.1.19",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.38.0",
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.3",
+    "vitest": "^3.2.4",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {
@@ -206,7 +207,7 @@
     "react-dom": "^19",
     "react-is": "^19"
   },
-  "packageManager": "pnpm@10.12.1",
+  "packageManager": "pnpm@10.13.1",
   "engines": {
     "node": ">=20.19"
   },
@@ -226,6 +227,9 @@
       "react": "$react",
       "react-dom": "$react-dom",
       "react-is": "$react-is"
+    },
+    "patchedDependencies": {
+      "@vanilla-extract/rollup-plugin": "patches/@vanilla-extract__rollup-plugin.patch"
     }
   },
   "esm.sh": {

package/src/css/primitives/avatar/avatar.css.ts

@@ -137,11 +137,15 @@ export const image: string = _style(layers.primitives, {
 })
 
 globalStyle(`${image} img`, {
-  display: 'block',
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-  borderRadius: 'inherit',
+  '@layer': {
+    [layers.primitives]: {
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      borderRadius: 'inherit',
+    },
+  },
 })
 
 export const imageOutline: string = _style(layers.primitives, {