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

package/exports/_visual-editing.ts

@@ -2,30 +2,30 @@
  * These are internal exports for usage in `@sanity/visual-editing` and `@sanity/insert-menu`,
  * which are used in environments where the regular `@sanity/ui` export is far too heavy due to imports from refractor and more.
  */
-export {studioTheme} from '../src/ui/_compat'
-export {ThemeProvider, type ThemeProviderProps} from '../src/ui/_compat/theme/themeProvider'
-export {useTheme_v2} from '../src/ui/_compat/theme/useTheme'
-export {Hotkeys, type HotkeysProps} from '../src/ui/components/hotkeys/hotkeys'
-export {Menu, type MenuProps} from '../src/ui/components/menu/menu'
-export {MenuDivider} from '../src/ui/components/menu/menuDivider'
-export {MenuGroup, type MenuGroupProps} from '../src/ui/components/menu/menuGroup'
-export {MenuItem, type MenuItemProps} from '../src/ui/components/menu/menuItem'
-export {Tab, type TabProps} from '../src/ui/components/tab/tab'
-export {TabList, type TabListProps} from '../src/ui/components/tab/tabList'
-export {isHTMLAnchorElement, isHTMLElement} from '../src/ui/helpers/element'
-export {usePrefersDark} from '../src/ui/hooks/usePrefersDark'
-export {Box, type BoxProps} from '../src/ui/primitives/box/box'
-export {Button, type ButtonProps} from '../src/ui/primitives/button/button'
-export {Card, type CardProps} from '../src/ui/primitives/card/card'
-export {Flex, type FlexProps} from '../src/ui/primitives/flex/flex'
-export {Grid, type GridProps} from '../src/ui/primitives/grid/grid'
-export {Popover, type PopoverProps} from '../src/ui/primitives/popover/popover'
-export {Spinner, type SpinnerProps} from '../src/ui/primitives/spinner/spinner'
-export {Stack, type StackProps} from '../src/ui/primitives/stack/stack'
-export {Text, type TextProps} from '../src/ui/primitives/text/text'
-export {TextInput, type TextInputProps} from '../src/ui/primitives/textInput/textInput'
-export {Tooltip, type TooltipProps} from '../src/ui/primitives/tooltip/tooltip'
-export type {PopoverMargins} from '../src/ui/types/popover'
-export {LayerProvider} from '../src/ui/utils/layer/layerProvider'
-export {Portal, type PortalProps} from '../src/ui/utils/portal/portal'
-export {PortalProvider, type PortalProviderProps} from '../src/ui/utils/portal/portalProvider'
+// export {studioTheme} from '../src/core/_compat'
+export {ThemeProvider, type ThemeProviderProps} from '../src/core/_compat/theme/themeProvider'
+export {useTheme_v2} from '../src/core/_compat/theme/useTheme'
+export {Hotkeys, type HotkeysProps} from '../src/core/components/hotkeys/hotkeys'
+export {Menu, type MenuProps} from '../src/core/components/menu/menu'
+export {MenuDivider} from '../src/core/components/menu/menuDivider'
+export {MenuGroup, type MenuGroupProps} from '../src/core/components/menu/menuGroup'
+export {MenuItem, type MenuItemProps} from '../src/core/components/menu/menuItem'
+export {Tab, type TabProps} from '../src/core/components/tab/tab'
+export {TabList, type TabListProps} from '../src/core/components/tab/tabList'
+export {isHTMLAnchorElement, isHTMLElement} from '../src/core/helpers/element'
+export {usePrefersDark} from '../src/core/hooks/usePrefersDark'
+export {Box, type BoxProps} from '../src/core/primitives/box/box'
+export {Button, type ButtonProps} from '../src/core/primitives/button/button'
+export {Card, type CardProps} from '../src/core/primitives/card/card'
+export {Flex, type FlexProps} from '../src/core/primitives/flex/flex'
+export {Grid, type GridProps} from '../src/core/primitives/grid/grid'
+export {Popover, type PopoverProps} from '../src/core/primitives/popover/popover'
+export {Spinner, type SpinnerProps} from '../src/core/primitives/spinner/spinner'
+export {Stack, type StackProps} from '../src/core/primitives/stack/stack'
+export {Text, type TextProps} from '../src/core/primitives/text/text'
+export {TextInput, type TextInputProps} from '../src/core/primitives/textInput/textInput'
+export {Tooltip, type TooltipProps} from '../src/core/primitives/tooltip/tooltip'
+export type {PopoverMargins} from '../src/core/types/popover'
+export {LayerProvider} from '../src/core/utils/layer/layerProvider'
+export {Portal, type PortalProps} from '../src/core/utils/portal/portal'
+export {PortalProvider, type PortalProviderProps} from '../src/core/utils/portal/portalProvider'

package/exports/index.ts

@@ -1 +1 @@
-export * from '../src/ui'
+export * from '../src/core'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.15",
+  "version": "3.0.0-static.16",
   "keywords": [
     "react",
     "ui",
@@ -116,7 +116,7 @@
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "pretty-bytes": "^7.0.0",
-    "react-compiler-runtime": "19.1.0-rc.1",
+    "react-compiler-runtime": "19.1.0-rc.2",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -131,7 +131,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
-    "@sanity/ui-workshop": "^2.1.3",
+    "@sanity/ui-workshop": "^2.1.2",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-docs": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -158,7 +158,7 @@
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
     "@vitejs/plugin-react": "^4.4.1",
-    "babel-plugin-react-compiler": "19.1.0-rc.1",
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
@@ -173,7 +173,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-7a2c7045-20250506",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-4448b187-20250515",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.12.0",

package/src/cli/index.ts

@@ -1,21 +1,9 @@
-import cac from 'cac'
+import {cac} from 'cac'
 
 import {version} from '../../package.json'
 
 const cli = cac('ui')
 
-// cli
-//   .command('dev')
-//   .option('--cwd [cwd]', 'Output directory')
-//   .action(async (options) => {
-//     const {devCommand} = await import('./devCommand')
-
-//     await devCommand({
-//       ...options,
-//       cwd: options.cwd || process.cwd(),
-//     })
-//   })
-
 cli
   .command('build')
   .option('--cwd [cwd]', 'Working directory')

package/src/{ui → core}/_compat/index.ts

@@ -1,5 +1,4 @@
 export * from './helpers'
-export * from './studioTheme'
 export * from './styles'
 export * from './theme'
 export * from './types'

package/src/{ui → core}/_compat/theme/themeProvider.tsx

@@ -52,13 +52,13 @@ export function ThemeProvider(props: ThemeProviderProps): ReactElement {
 
   return (
     <CardProvider
-      compat_provider={
+      scheme={scheme}
+      tone={tone}
+      unstable_CompatProvider={
         // Render a theme provider around the card if the scheme or tone differs from the root theme.
         // This is needed for backwards compatibility with the legacy theme API.
         ThemeColorProvider
       }
-      scheme={scheme}
-      tone={tone}
     >
       <ThemeContext.Provider value={themeContext}>
         <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>

package/src/{ui → core}/components/tab/tabList.tsx

@@ -1,6 +1,8 @@
+import {ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {Children, cloneElement, KeyboardEvent, ReactElement, useCallback, useState} from 'react'
 
-import {Inline, InlineOwnProps} from '../../primitives'
+import {Flex, FlexOwnProps} from '../../primitives'
 import {ComponentType, Props} from '../../types'
 import {TabProps} from './tab'
 
@@ -11,8 +13,10 @@ export const DEFAULT_TAB_LIST_ELEMENT = 'div'
 export type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
 
 /** @public */
-export type TabListOwnProps = Omit<InlineOwnProps, 'as' | 'height'> & {
+export type TabListOwnProps = Omit<FlexOwnProps, 'as' | 'height'> & {
   children: TabListChild[]
+  /** @deprecated Use `gap` instead */
+  space?: ResponsiveProp<Space>
 }
 
 /** @public */
@@ -31,6 +35,9 @@ export function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_E
   const {
     as = DEFAULT_TAB_LIST_ELEMENT,
     children: childrenProp,
+    gap = 1,
+    space = 1,
+    wrap = 'nowrap',
     ...rest
   } = props as TabListProps<typeof DEFAULT_TAB_LIST_ELEMENT>
 
@@ -62,9 +69,17 @@ export function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_E
   )
 
   return (
-    <Inline data-ui="TabList" {...rest} as={as} onKeyDown={handleKeyDown} role="tablist">
+    <Flex
+      data-ui="TabList"
+      {...rest}
+      as={as}
+      gap={gap ?? space}
+      onKeyDown={handleKeyDown}
+      role="tablist"
+      wrap={wrap}
+    >
       {tabs}
-    </Inline>
+    </Flex>
   )
 }
 

package/src/{ui → core}/index.ts

@@ -4,7 +4,6 @@ export * from './helpers'
 export * from './hooks'
 export * from './observers'
 export * from './primitives'
-export * from './RootClassNames'
 export * from './StyleTags'
 export * from './types'
 export * from './utils'

package/src/{ui → core}/primitives/box/box.tsx

@@ -29,6 +29,7 @@ export type BoxElementType =
   | 'figcaption'
   | 'footer'
   | 'form'
+  | 'iframe'
   | 'kbd'
   | 'label'
   | 'legend'
@@ -112,6 +113,7 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
     rowStart,
     rowEnd,
     sizing = 'border',
+    textAlign,
     width,
     wrap,
     ...rest
@@ -179,6 +181,7 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
           rowStart,
           rowEnd,
           sizing,
+          textAlign,
           width,
           wrap,
         }),

package/src/{ui → core}/primitives/card/card.tsx

@@ -1,5 +1,4 @@
 import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
-import {createElement} from 'react'
 
 import {Props} from '../../types'
 import {Box, BoxElementType, BoxOwnProps} from '../box'
@@ -57,14 +56,8 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
   } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
 
   const parent = useCard()
-
-  const context = {
-    tone: parent?.tone ?? 'default',
-    scheme: parent?.scheme ?? 'light',
-  }
-
-  const tone = toneProp === 'inherit' ? context.tone : toneProp
-  const scheme = schemeProp === undefined ? context.scheme : schemeProp
+  const tone = toneProp === 'inherit' ? parent?.tone : toneProp
+  const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
 
   let node = (
     <Box
@@ -74,7 +67,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
       className={composeClassNames(
         className,
         card({
-          scheme: scheme === context.scheme ? undefined : scheme,
+          scheme: scheme === parent?.scheme ? undefined : scheme,
           shadow,
           tone,
         }),
@@ -89,27 +82,28 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
     />
   )
 
-  if (scheme === context.scheme && tone === context.tone) {
+  if (scheme === parent?.scheme && tone === parent?.tone) {
     return node
   }
 
   node = (
     <CardProvider
-      compat_provider={parent?.compat_provider}
-      rendered={true}
-      scheme={scheme}
-      tone={tone ?? context.tone}
+      scheme={scheme ?? 'light'}
+      tone={tone ?? 'default'}
+      unstable_CompatProvider={parent?.unstable_CompatProvider}
     >
       {node}
     </CardProvider>
   )
 
-  if (parent?.compat_provider) {
-    return createElement(parent.compat_provider, {
-      children: node,
-      scheme,
-      tone: tone ?? context.tone,
-    })
+  if (parent?.unstable_CompatProvider) {
+    const CompatProvider = parent.unstable_CompatProvider
+
+    return (
+      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? parent?.tone ?? 'default'}>
+        {node}
+      </CompatProvider>
+    )
   }
 
   return node

package/src/core/primitives/card/cardProvider.tsx

@@ -0,0 +1,27 @@
+import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ReactNode, useMemo} from 'react'
+
+import {CardContext} from './cardContext'
+import {_CardCompatProviderComponent} from './types'
+
+export function CardProvider(props: {
+  children?: ReactNode
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+  unstable_CompatProvider?: _CardCompatProviderComponent
+}) {
+  const {children, tone, scheme, unstable_CompatProvider} = props
+
+  return (
+    <CardContext.Provider
+      value={useMemo(
+        () => ({tone, scheme, unstable_CompatProvider}),
+        [tone, scheme, unstable_CompatProvider],
+      )}
+    >
+      {children}
+    </CardContext.Provider>
+  )
+}
+
+CardProvider.displayName = 'CardProvider'

package/src/{ui → core}/primitives/card/types.ts

@@ -12,16 +12,17 @@ export interface CardStyleProps {
   $tone: ThemeColorCardToneKey
 }
 
-export type CardCompatProviderComponent = ComponentType<{
+/** @internal */
+export type _CardCompatProviderComponent = ComponentType<{
   children?: ReactNode
   tone: ThemeColorCardToneKey
   scheme: ThemeColorSchemeKey
 }>
 
-/** @internal */
+/** @public */
 export interface CardContextValue {
-  compat_provider?: CardCompatProviderComponent
-  rendered: boolean
   tone: ThemeColorCardToneKey
   scheme: ThemeColorSchemeKey
+  /** @internal */
+  unstable_CompatProvider?: _CardCompatProviderComponent
 }

package/src/{ui → core}/primitives/popover/popover.tsx

@@ -141,7 +141,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
 
   const {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    animate: _animate = false,
+    animate: _animate = true,
     arrow: arrowProp = false,
     as: as = DEFAULT_POPOVER_ELEMENT,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/{ui → core}/primitives/tooltip/tooltip.tsx

@@ -107,7 +107,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
   const boundaryElementContext = useBoundaryElement()
 
   const {
-    animate: _animate = false,
+    animate: _animate = true,
     arrow: arrowProp = false,
     as = DEFAULT_TOOLTIP_ELEMENT,
     boundaryElement = boundaryElementContext?.element,

package/src/{ui/utils/portal/portal.ts → core/utils/portal/portal.tsx}

@@ -1,4 +1,4 @@
-import {createElement, ReactNode, ReactPortal} from 'react'
+import {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
 import {CardProvider, useCard} from '../../primitives'
@@ -26,15 +26,13 @@ export function Portal(props: PortalProps): ReactPortal | null {
   }
 
   return createPortal(
-    createElement(
-      CardProvider,
-      {
-        rendered: true,
-        tone: 'transparent', // card?.tone || 'default',
-        scheme: card?.scheme || 'light',
-      },
-      children,
-    ),
+    <CardProvider
+      // rendered={true}
+      tone="transparent" // card?.tone || 'default',
+      scheme={card?.scheme || 'light'}
+    >
+      {children}
+    </CardProvider>,
     portalElement,
   )
 }

package/src/css/_mergeStyles.ts

@@ -1,5 +1,3 @@
-// import type {Style, StyleKeyframes, StyleLayers, StyleRules} from '@sanity/css'
-
 import {Style, StyleKeyframes, StyleLayers, StyleRules} from './types'
 
 /** @internal */
@@ -9,11 +7,6 @@ export function _mergeStyles(styles: Style[]): Style {
   const rules: StyleRules = {}
 
   for (const s of styles) {
-    if (!s) {
-      // TODO: should not happen
-      continue
-    }
-
     Object.assign(keyframes, s.keyframes)
 
     for (const layerName in s.layers) {

package/src/css/_system.style.ts

@@ -31,6 +31,7 @@ import {pointerEventsStyle} from './aspects/pointerEvents/pointerEvents.style'
 import {positionStyle} from './aspects/position/position.style'
 import {radiusStyle} from './aspects/radius/radius.style'
 import {shadowStyle} from './aspects/shadow/shadow.style'
+import {textAlignStyle} from './aspects/textAlign/textAlign.style'
 import {textOverflowStyle} from './aspects/textOverflow/textOverflow.style'
 import {widthStyle} from './aspects/width/width.style'
 import {breadcrumbsStyle} from './components/breadcrumbs/breadcrumbs.style'
@@ -114,6 +115,7 @@ export const _systemStyle: Style = _mergeStyles([
   positionStyle,
   radiusStyle,
   shadowStyle,
+  textAlignStyle,
   textOverflowStyle,
   widthStyle,
 

package/src/css/aspects/font/font.style.ts

@@ -1,4 +1,3 @@
-import {_responsiveRule} from '../../_responsiveRule'
 import {Style, StyleRules} from '../../types'
 
 export const primitive: StyleRules = {
@@ -69,24 +68,4 @@ export const primitive: StyleRules = {
   },
 }
 
-_responsiveRule(primitive, `text-align-initial`, {
-  textAlign: 'initial',
-})
-
-_responsiveRule(primitive, `text-align-left`, {
-  textAlign: 'left',
-})
-
-_responsiveRule(primitive, `text-align-center`, {
-  textAlign: 'center',
-})
-
-_responsiveRule(primitive, `text-align-right`, {
-  textAlign: 'right',
-})
-
-_responsiveRule(primitive, `text-align-justify`, {
-  textAlign: 'justify',
-})
-
 export const fontStyle: Style = {layers: {primitive}}

package/src/css/aspects/font/font.ts

@@ -1,12 +1,7 @@
-import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {FontStyleProps} from './types'
 
 /** @public */
 export function font(props: FontStyleProps): string | undefined {
-  return composeClassNames(
-    'font',
-    props.weight && `font-${props.weight}`,
-    _resp('text-align', props.align),
-  )
+  return composeClassNames('font', props.weight && `font-${props.weight}`)
 }

package/src/css/aspects/font/types.ts

@@ -1,10 +1,6 @@
 import {FontWeight} from '@sanity/ui/theme'
 
-/** @public */
-export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
-
 /** @public */
 export interface FontStyleProps {
-  align?: TextAlign
   weight?: FontWeight
 }

package/src/css/aspects/index.ts

@@ -17,5 +17,6 @@ export * from './pointerEvents'
 export * from './position'
 export * from './radius'
 export * from './shadow'
+export * from './textAlign'
 export * from './textOverflow'
 export * from './width'

package/src/css/aspects/textAlign/index.ts

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

package/src/css/aspects/textAlign/textAlign.style.ts

@@ -0,0 +1,26 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+export const util: StyleRules = {}
+
+_responsiveRule(util, `text-align-initial`, {
+  textAlign: 'initial',
+})
+
+_responsiveRule(util, `text-align-left`, {
+  textAlign: 'left',
+})
+
+_responsiveRule(util, `text-align-center`, {
+  textAlign: 'center',
+})
+
+_responsiveRule(util, `text-align-right`, {
+  textAlign: 'right',
+})
+
+_responsiveRule(util, `text-align-justify`, {
+  textAlign: 'justify',
+})
+
+export const textAlignStyle: Style = {layers: {util}}

package/src/css/aspects/textAlign/textAlign.ts

@@ -0,0 +1,8 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {TextAlignStyleProps} from './types'
+
+/** @public */
+export function textAlign(props: TextAlignStyleProps): string | undefined {
+  return composeClassNames(_resp('text-align', props.textAlign))
+}

package/src/css/aspects/textAlign/types.ts

@@ -0,0 +1,7 @@
+/** @public */
+export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+
+/** @public */
+export interface TextAlignStyleProps {
+  textAlign?: TextAlign
+}

package/src/css/primitives/_input/_input.style.ts

@@ -1,5 +1,6 @@
 import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
 
+import {_responsiveRule} from '../../_responsiveRule'
 import {Style, StyleRules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
@@ -132,31 +133,28 @@ const primitive: StyleRules = {
   },
 }
 
-// todo: make responsive
-for (const textSize of FONT_TEXT_SIZE) {
-  const source = vars.font.text.sizes[textSize]
+for (const size of FONT_TEXT_SIZE) {
+  const source = vars.font.text.sizes[size]
 
-  primitive[`.input-${textSize}`] = {
+  _responsiveRule(primitive, `input-${size}`, {
     [varNames.input.fontSize]: source.fontSize,
     [varNames.input.lineHeight]: source.lineHeight,
     [varNames.input.letterSpacing]: source.letterSpacing,
     [varNames.input.ascenderHeight]: source.ascenderHeight,
     [varNames.input.descenderHeight]: source.descenderHeight,
-  }
+  })
 }
 
-// todo: make responsive
 for (const space of SPACE) {
-  primitive[`.input-p-${space}`] = {
+  _responsiveRule(primitive, `input-p-${space}`, {
     [varNames.input.padding]: vars.space[space],
-  }
+  })
 }
 
-// todo: make responsive
 for (const space of SPACE) {
-  primitive[`.input-g-${space}`] = {
+  _responsiveRule(primitive, `input-g-${space}`, {
     [varNames.input.gap]: vars.space[space],
-  }
+  })
 }
 
 export const _inputStyle: Style = {layers: {primitive}}

package/src/css/primitives/box/box.style.ts

@@ -7,7 +7,11 @@ const primitive: StyleRules = {
     'minHeight': 0,
 
     '@nest': {
-      '&:is(ul), &:is(ol)': {
+      'iframe&': {
+        border: 'none',
+      },
+
+      'ul&, ol&': {
         listStyle: 'none',
       },
 

package/src/css/primitives/box/box.ts

@@ -18,6 +18,7 @@ import {
   pointerEvents,
   position,
   radius,
+  textAlign,
   width,
 } from '../../aspects'
 import {BoxStyleProps} from './types'
@@ -47,6 +48,7 @@ export function box(props: BoxStyleProps): string | undefined {
     pointerEvents(props),
     position(props),
     radius(props),
+    textAlign(props),
     width(props),
   )
 }