@sanity/ui 3.0.2 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "keywords": [
     "sanity",
     "ui",
@@ -119,7 +119,7 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.4",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.11",
+    "framer-motion": "^12.23.12",
     "react-compiler-runtime": "19.1.0-rc.2",
     "react-refractor": "^4.0.0",
     "use-effect-event": "^2.0.3"
@@ -131,8 +131,8 @@
     "@babel/preset-typescript": "^7.27.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/js": "^9.31.0",
-    "@sanity/pkg-utils": "^7.9.11",
+    "@eslint/js": "^9.32.0",
+    "@sanity/pkg-utils": "^7.9.14",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^3.1.2",
@@ -157,8 +157,8 @@
     "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
-    "@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",
     "@vitejs/plugin-react": "^4.7.0",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
@@ -167,7 +167,7 @@
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.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",
@@ -188,9 +188,9 @@
     "module-alias": "^2.2.3",
     "npm-run-all2": "^8.0.4",
     "prettier": "^3.6.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-is": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-is": "^19.1.1",
     "refractor": "^5.0.0",
     "rimraf": "^5.0.5",
     "semantic-release": "^24.2.7",

package/src/core/primitives/avatar/styles.ts

@@ -17,8 +17,8 @@ function avatarArrowStyle(): CSSObject {
   return {
     'position': 'absolute',
     'boxSizing': 'border-box',
-    'zIndex': 0,
-    'opacity': 0,
+    'zIndex': '0',
+    'opacity': '0',
     'transition': 'all 0.2s linear',
     'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
     'left': 0,
@@ -41,16 +41,16 @@ function avatarArrowStyle(): CSSObject {
 
     "[data-arrow-position='inside'] > &": {
       transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
-      opacity: 0,
+      opacity: '0',
     },
 
     "[data-arrow-position='top'] > &": {
-      opacity: 1,
+      opacity: '1',
       transform: 'rotate(0deg)',
     },
 
     "[data-arrow-position='bottom'] > &": {
-      opacity: 1,
+      opacity: '1',
       transform: 'rotate(-180deg)',
     },
   }
@@ -71,7 +71,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
     'boxShadow': '0 0 0 1px var(--card-bg-color)',
 
     '&[data-status="inactive"]': {
-      opacity: 0.5,
+      opacity: '0.5',
     },
 
     '&>svg': {

package/src/core/primitives/inline/styles.ts

@@ -5,7 +5,7 @@ import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {
   return {
-    'lineHeight': 0,
+    'lineHeight': '0',
 
     '&&:not([hidden])': {
       display: 'block',

package/src/core/primitives/select/styles.ts

@@ -97,7 +97,7 @@ function inputColorStyle(props: ThemeProps) {
 }
 
 function textSize(size: ThemeFontSize) {
-  return {fontSize: rem(size.fontSize), lineHeight: rem(size.lineHeight)}
+  return {fontSize: rem(size.fontSize), lineHeight: `${rem(size.lineHeight)}`}
 }
 
 function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps) {

package/src/core/styles/flex/flexItemStyle.ts

@@ -23,5 +23,5 @@ export function responsiveFlexItemStyle(
 
   if (!props.$flex) return EMPTY_ARRAY
 
-  return _responsive(media, props.$flex, (flex) => ({flex}))
+  return _responsive(media, props.$flex, (flex) => ({flex: `${flex}`}))
 }

package/src/core/styles/font/responsiveFont.ts

@@ -23,7 +23,7 @@ export function responsiveFont(
   const base: CSSObject = {
     'position': 'relative',
     'fontFamily': family,
-    fontWeight,
+    'fontWeight': `${fontWeight}`,
     'padding': '1px 0',
     'margin': 0,
 

package/src/core/styles/grid/gridItemStyle.ts

@@ -43,14 +43,14 @@ function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & T
   const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$rowStart, (rowStart) => ({
-    gridRowStart: rowStart,
+    gridRowStart: `${rowStart}`,
   }))
 }
 
 function responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
   const {media} = getTheme_v2(props.theme)
 
-  return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: rowEnd}))
+  return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: `${rowEnd}`}))
 }
 
 function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
@@ -69,7 +69,7 @@ function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps
   const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$columnStart, (columnStart) => ({
-    gridColumnStart: columnStart,
+    gridColumnStart: `${columnStart}`,
   }))
 }
 
@@ -77,6 +77,6 @@ function responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps &
   const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$columnEnd, (columnEnd) => ({
-    gridColumnEnd: columnEnd,
+    gridColumnEnd: `${columnEnd}`,
   }))
 }

package/src/core/styles/input/textInputStyle.ts

@@ -120,7 +120,7 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
 
     return {
       fontSize: rem(size.fontSize),
-      lineHeight: size.lineHeight / size.fontSize,
+      lineHeight: `${size.lineHeight / size.fontSize}`,
     }
   })
 }