@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

package/exports/css.ts

@@ -0,0 +1 @@
+export * from '../src/css'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.10.0-corel.0",
+  "version": "3.0.0-static.1",
   "keywords": [
     "sanity",
     "ui",
@@ -27,12 +27,24 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./css": {
+      "source": "./exports/css.ts",
+      "import": "./dist/css.mjs",
+      "require": "./dist/css.js",
+      "default": "./dist/css.js"
+    },
+    "./system.css": {
+      "default": "./dist/system.css"
+    },
     "./theme": {
       "source": "./exports/theme.ts",
       "import": "./dist/theme.mjs",
       "require": "./dist/theme.js",
       "default": "./dist/theme.js"
     },
+    "./sanity-theme.css": {
+      "default": "./dist/sanity-theme.css"
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
@@ -45,6 +57,9 @@
       ]
     }
   },
+  "bin": {
+    "ui": "./bin/ui.js"
+  },
   "files": [
     "dist",
     "exports",
@@ -82,8 +97,12 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.4.0",
+    "@sanity/ui": "^2.8.10",
+    "cac": "^6.7.14",
     "csstype": "^3.1.3",
+    "dotenv-flow": "^4.1.0",
     "framer-motion": "11.0.8",
+    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -95,24 +114,24 @@
     "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.11.7",
-    "@sanity/prettier-config": "^1.0.2",
+    "@sanity/pkg-utils": "^6.11.8",
+    "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.16",
-    "@storybook/addon-a11y": "^8.3.6",
-    "@storybook/addon-docs": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-mdx-gfm": "^8.3.6",
-    "@storybook/addon-storysource": "^8.3.6",
-    "@storybook/addon-themes": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/manager-api": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@storybook/theming": "^8.3.6",
+    "@storybook/addon-a11y": "^8.4.0",
+    "@storybook/addon-docs": "^8.4.0",
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/addon-interactions": "^8.4.0",
+    "@storybook/addon-links": "^8.4.0",
+    "@storybook/addon-mdx-gfm": "^8.4.0",
+    "@storybook/addon-storysource": "^8.4.0",
+    "@storybook/addon-themes": "^8.4.0",
+    "@storybook/blocks": "^8.4.0",
+    "@storybook/manager-api": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@storybook/test": "^8.4.0",
+    "@storybook/theming": "^8.4.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
@@ -132,6 +151,7 @@
     "cypress": "^13.13.2",
     "cypress-real-events": "^1.13.0",
     "cz-conventional-changelog": "^3.3.0",
+    "esbuild-register": "^3.6.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-boundaries": "^4.2.2",
@@ -149,27 +169,27 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
+    "npm-run-all": "^4.1.5",
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
-    "react-compiler-runtime": "beta",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.5",
     "semantic-release": "^24.0.0",
     "start-server-and-test": "^2.0.5",
-    "storybook": "^8.3.6",
+    "storybook": "^8.4.0",
     "styled-components": "^6.1.13",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.5.3",
+    "typescript": "5.6.3",
     "vite": "^5.4.2",
     "vite-tsconfig-paths": "^5.0.1"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "react-is": "^18",
+    "react": "^18 || >=19.0.0-0",
+    "react-dom": "^18 || >=19.0.0-0",
+    "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
   "engines": {
@@ -182,7 +202,8 @@
     "bundle": false
   },
   "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "bin:build": "./bin/ui.js build",
+    "build": "run-s clean pkg:build bin:build pkg:check figma:pkg:build",
     "clean": "rimraf .workshop dist",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",

package/src/core/__workshop__/constants.ts

@@ -9,16 +9,24 @@ import {
   CardTone,
   DialogPosition,
   FlexAlign,
+  FlexDirection,
   FlexJustify,
   Placement,
   TextAlign,
   TextInputType,
 } from '@sanity/ui'
-import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {
+  ContainerWidth,
+  FontHeadingSize,
+  Space,
+  ThemeColorSpotKey,
+  ThemeColorToneKey,
+  ThemeFontWeightKey,
+} from '@sanity/ui/theme'
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
   '0': 0,
-  '1': 1,
+  '1 (default)': 1,
   '2': 2,
   '3': 3,
 }
@@ -60,12 +68,12 @@ export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
 export const WORKSHOP_CARD_AS_OPTIONS: {
   [key: string]: 'div' | 'button' | 'span' | 'ol' | 'pre' | 'ul'
 } = {
-  DIV: 'div',
-  BUTTON: 'button',
-  SPAN: 'span',
-  OL: 'ol',
-  PRE: 'pre',
-  UL: 'ul',
+  'DIV (default)': 'div',
+  'BUTTON': 'button',
+  'SPAN': 'span',
+  'OL': 'ol',
+  'PRE': 'pre',
+  'UL': 'ul',
 }
 
 export const WORKSHOP_CARD_TONE_OPTIONS: {[key: string]: CardTone} = {
@@ -85,7 +93,7 @@ export const WORKSHOP_CODE_LANGUAGE_OPTIONS = {
   TypeScript: 'typescript',
 }
 
-export const WORKSHOP_CONTAINER_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
+export const WORKSHOP_CONTAINER_WIDTH_OPTIONS: {[key: string]: ContainerWidth} = {
   '0': 0,
   '1': 1,
   '2': 2,
@@ -100,7 +108,7 @@ export const WORKSHOP_DIALOG_POSITION_OPTIONS: {[key: string]: DialogPosition} =
   Absolute: 'absolute',
 }
 
-export const WORKSHOP_FLEX_DIRECTION_OPTIONS: {[key: string]: 'row' | 'column'} = {
+export const WORKSHOP_FLEX_DIRECTION_OPTIONS: {[key: string]: FlexDirection} = {
   Row: 'row',
   Column: 'column',
 }
@@ -129,12 +137,13 @@ export const WORKSHOP_FONT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey} =
   Bold: 'bold',
 }
 
-export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS = {
+export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS: Record<string, FontHeadingSize> = {
   '0': 0,
   '1': 1,
-  '2': 2,
+  '2 (default)': 2,
   '3': 3,
   '4': 4,
+  '5': 5,
 }
 
 export const WORKSHOP_ICON_SYMBOL_OPTIONS: {[key: string]: IconSymbol | ''} = Object.keys(
@@ -190,7 +199,7 @@ export const WORKSHOP_SHADOW_OPTIONS = {
   '5': 5,
 }
 
-export const WORKSHOP_SPACE_OPTIONS = {
+export const WORKSHOP_SPACE_OPTIONS: Record<string, Space> = {
   '0': 0,
   '1': 1,
   '2': 2,
@@ -254,16 +263,16 @@ export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} =
 export const WORKSHOP_TEXT_SIZE_OPTIONS = {
   '0': 0,
   '1': 1,
-  '2': 2,
+  '2 (default)': 2,
   '3': 3,
   '4': 4,
 }
 
 export const WORKSHOP_TEXT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey | ''} = {
-  Regular: 'regular',
-  Medium: 'medium',
-  Semibold: 'semibold',
-  Bold: 'bold',
+  'Regular (default)': '',
+  'Medium': 'medium',
+  'Semibold': 'semibold',
+  'Bold': 'bold',
 }
 
 export const WORKSHOP_THEME_COLOR_TONE_OPTIONS: {[key: string]: ThemeColorToneKey} = {
@@ -285,7 +294,7 @@ export const WORKSHOP_TOAST_STATUS_OPTIONS: {
   Error: 'error',
 }
 
-export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
+export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: ContainerWidth} = {
   'Auto': 'auto',
   '0': 0,
   '1': 1,

package/src/core/_compat/index.ts

@@ -0,0 +1,2 @@
+export * from './types'
+export * from './styles'

package/src/core/{styles → _compat/styles}/border/borderStyle.ts

@@ -3,12 +3,14 @@ import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'
 
+/** @deprecated */
 export function responsiveBorderStyle(): Array<
   (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
 > {
   return [border, borderTop, borderRight, borderBottom, borderLeft]
 }
 
+/** @deprecated */
 function border(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
@@ -18,6 +20,7 @@ function border(props: ResponsiveBorderStyleProps & ThemeProps) {
   )
 }
 
+/** @deprecated */
 function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
@@ -27,6 +30,7 @@ function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
   )
 }
 
+/** @deprecated */
 function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
@@ -36,6 +40,7 @@ function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
   )
 }
 
+/** @deprecated */
 function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
@@ -45,6 +50,7 @@ function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
   )
 }
 
+/** @deprecated */
 function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`

package/src/core/{styles → _compat/styles}/border/types.ts

@@ -1,5 +1,6 @@
 /**
  * @internal
+ * @deprecated
  */
 export interface ResponsiveBorderStyleProps {
   $border: boolean[]

package/src/core/{styles → _compat/styles}/box/boxStyle.ts

@@ -18,12 +18,14 @@ const BOX_SIZING: {[key: string]: Property.BoxSizing} = {
 const BOX_HEIGHT = {
   stretch: 'stretch',
   fill: '100%',
-}
+} as const
 
+/** @deprecated */
 export function boxStyle(): CSSObject {
   return BASE_STYLE
 }
 
+/** @deprecated */
 export function responsiveBoxStyle(): Array<
   (props: ResponsiveBoxStyleProps & ThemeProps) => CSSObject[]
 > {
@@ -35,6 +37,7 @@ export function responsiveBoxStyle(): Array<
   ]
 }
 
+/** @deprecated */
 function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {media} = getTheme_v2(props.theme)
 
@@ -43,6 +46,7 @@ function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps)
   }))
 }
 
+/** @deprecated */
 function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {media} = getTheme_v2(props.theme)
 
@@ -51,6 +55,7 @@ function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   }))
 }
 
+/** @deprecated */
 function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {media} = getTheme_v2(props.theme)
 
@@ -59,6 +64,7 @@ function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   }))
 }
 
+/** @deprecated */
 function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {media} = getTheme_v2(props.theme)
 

package/src/core/{styles → _compat/styles}/box/types.ts

@@ -1,4 +1,4 @@
-import {BoxDisplay, BoxHeight, BoxOverflow, BoxSizing} from '../../types'
+import {BoxDisplay, BoxHeight, BoxOverflow, BoxSizing} from '../../../types'
 
 /**
  * @internal

package/src/core/{styles → _compat/styles}/card/_cardColorStyle.ts

@@ -71,14 +71,6 @@ export function _cardColorStyle(
     '--card-badge-critical-dot-color': color.badge.critical.dot,
     '--card-badge-critical-fg-color': color.badge.critical.fg,
     '--card-badge-critical-icon-color': color.badge.critical.icon,
-    '--card-badge-prospect-bg-color': color.badge.prospect.bg,
-    '--card-badge-prospect-dot-color': color.badge.prospect.dot,
-    '--card-badge-prospect-fg-color': color.badge.prospect.fg,
-    '--card-badge-prospect-icon-color': color.badge.prospect.icon,
-    '--card-badge-explore-bg-color': color.badge.explore.bg,
-    '--card-badge-explore-dot-color': color.badge.explore.dot,
-    '--card-badge-explore-fg-color': color.badge.explore.fg,
-    '--card-badge-explore-icon-color': color.badge.explore.icon,
 
     '--card-code-bg-color': color.code.bg,
     '--card-code-fg-color': color.code.fg,
@@ -96,8 +88,8 @@ export function _cardColorStyle(
     '--card-muted-bg-color': color.muted.bg,
     '--card-muted-fg-color': color.muted.fg,
 
-    '--card-skeleton-color-from': color.skeleton.from,
-    '--card-skeleton-color-to': color.skeleton.to,
+    '--card-skeleton-from-color': color.skeleton.from,
+    '--card-skeleton-to-color': color.skeleton.to,
 
     // deprecated variables (kept for legacy)
 

package/src/core/{styles → _compat/styles}/flex/flexItemStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {EMPTY_ARRAY} from '../../constants'
+import {EMPTY_ARRAY} from '../../../constants'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexItemStyleProps} from './types'

package/src/core/{styles → _compat/styles}/flex/flexStyle.ts

@@ -16,8 +16,6 @@ export function responsiveFlexStyle(): Array<
     BASE_STYLE,
     responsiveFlexAlignStyle,
     responsiveFlexGapStyle,
-    responsiveFlexGapXStyle,
-    responsiveFlexGapYStyle,
     responsiveFlexWrapStyle,
     responsiveFlexJustifyStyle,
     responsiveFlexDirectionStyle,
@@ -42,22 +40,6 @@ function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
   }))
 }
 
-function responsiveFlexGapXStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$gapX, (gapX) => ({
-    columnGap: gapX ? rem(space[gapX]) : undefined,
-  }))
-}
-
-function responsiveFlexGapYStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$gapY, (gapY) => ({
-    rowGap: gapY ? rem(space[gapY]) : undefined,
-  }))
-}
-
 export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
   const {media} = getTheme_v2(props.theme)
 

package/src/core/{styles → _compat/styles}/flex/types.ts

@@ -1,4 +1,4 @@
-import {FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap} from '../../types'
+import {FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap} from '@sanity/ui/css'
 
 /**
  * @internal
@@ -7,8 +7,6 @@ export interface ResponsiveFlexStyleProps {
   $align: FlexAlign[]
   $direction: FlexDirection[]
   $gap: number[]
-  $gapX: number[]
-  $gapY: number[]
   $justify: FlexJustify[]
   $wrap: FlexWrap[]
 }

package/src/core/{styles → _compat/styles}/font/types.ts

@@ -1,5 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {TextAlign} from '../../types'
+import {TextAlign} from '../../../types'
 
 /**
  * @internal

package/src/core/{styles → _compat/styles}/grid/gridStyle.ts

@@ -3,15 +3,6 @@ import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridStyleProps} from './types'
 
-const GRID_CSS = {
-  '&&:not([hidden])': {
-    display: 'grid',
-  },
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: 'none',
-  },
-}
-
 const GRID_AUTO_COLUMS = {
   auto: 'auto',
   min: 'min-content',
@@ -30,7 +21,6 @@ export function responsiveGridStyle(): Array<
   CSSObject | ((props: ResponsiveGridStyleProps & ThemeProps) => CSSObject[])
 > {
   return [
-    GRID_CSS,
     responsiveGridAutoFlowStyle,
     responsiveGridAutoRowsStyle,
     responsiveGridAutoColsStyle,

package/src/core/{styles → _compat/styles}/grid/types.ts

@@ -8,7 +8,7 @@ import {
   GridItemRow,
   GridItemRowEnd,
   GridItemRowStart,
-} from '../../types'
+} from '../../../types'
 
 /**
  * @internal

package/src/core/{styles → _compat/styles}/helpers.ts

@@ -1,6 +1,6 @@
 import {Theme, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {EMPTY_ARRAY} from '../constants'
+import {EMPTY_ARRAY} from '../../constants'
 
 /**
  * @internal
@@ -13,6 +13,15 @@ export function _fillCSSObject(keys: string[], value: string | number | CSSObjec
   }, {})
 }
 
+/**
+ * @public
+ */
+export function px(pixelValue: number): string | 0 {
+  if (pixelValue === 0) return 0
+
+  return `${pixelValue}px`
+}
+
 /**
  * @public
  */

package/src/core/{styles → _compat/styles}/input/textInputStyle.ts

@@ -1,7 +1,7 @@
 import {ThemeColorSchemeKey, ThemeFontWeightKey, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {CardTone} from '../../types'
+import {css} from '../../../lib/styled'
+import {CardTone} from '../../../types'
 import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'

package/src/core/{styles → _compat/styles}/radius/types.ts

@@ -1,4 +1,4 @@
-import {Radius} from '../../types'
+import {Radius} from '../../../types'
 
 /**
  * @internal

package/src/core/{styles → _compat/styles}/shadow/shadowStyle.ts

@@ -1,6 +1,6 @@
 import {ThemeBoxShadow, ThemeShadow, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {EMPTY_RECORD} from '../../constants'
+import {EMPTY_RECORD} from '../../../constants'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveShadowStyleProps} from './types'

package/src/core/components/autocomplete/__workshop__/custom.tsx

@@ -1,4 +1,5 @@
-import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
+import {Autocomplete, Box, Button, Card, Code, Container, Radius, Stack, Text} from '@sanity/ui'
+import {FontTextSize} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 import {
@@ -29,7 +30,7 @@ export default function CustomStory() {
         key={option.value}
         onClick={(event) => event.preventDefault()}
         padding={padding}
-        radius={radius - 1}
+        radius={(radius - 1) as Radius}
       >
         <Text size={fontSize}>{option.title}</Text>
       </Card>
@@ -60,14 +61,14 @@ export default function CustomStory() {
               border={border}
               disabled={disabled}
               filterOption={filterOption}
-              fontSize={fontSize}
+              fontSize={fontSize as FontTextSize}
               id="custom"
               onChange={setValue}
               openButton={openButton}
               options={options}
               padding={padding}
               placeholder="Search"
-              radius={radius}
+              radius={radius as Radius}
               readOnly={readOnly}
               renderOption={renderOption}
               renderValue={renderValue}

package/src/core/components/autocomplete/__workshop__/example.tsx

@@ -1,4 +1,5 @@
 import {Autocomplete, Box, Card, Container, Stack, Text} from '@sanity/ui'
+import {FontTextSize, Radius} from '@sanity/ui/theme'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
@@ -57,14 +58,14 @@ export default function ExampleStory() {
                 border={border}
                 customValidity={customValidity}
                 disabled={disabled}
-                fontSize={fontSize}
+                fontSize={fontSize as FontTextSize}
                 onChange={handleChange}
                 id="default"
                 openButton={openButton}
                 options={options}
                 padding={padding}
                 placeholder="Search"
-                radius={radius}
+                radius={radius as Radius}
                 readOnly={readOnly}
                 ref={ref}
                 value={value}