@sanity/ui 2.9.0-corel.0 → 2.9.0

package/src/core/components/tab/tabList.tsx

@@ -1,4 +1,4 @@
-import {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
+import {cloneElement, forwardRef, useCallback, useState, Children, isValidElement} from 'react'
 import {styled} from 'styled-components'
 import {Inline, InlineProps} from '../../primitives'
 
@@ -9,10 +9,6 @@ export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
   children: Array<React.ReactElement | null | undefined | false>
 }
 
-function _isReactElement(node: unknown): node is React.ReactElement {
-  return Boolean(node)
-}
-
 //Limits the width of tabs in tablist
 const CustomInline = styled(Inline)`
   & > div {
@@ -33,22 +29,18 @@ export const TabList = forwardRef(function TabList(
   const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
 
-  const children = useMemo(() => childrenProp.filter(_isReactElement), [childrenProp])
+  const children: React.ReactElement[] = Children.toArray(childrenProp).filter(isValidElement)
 
   const tabs = children.map((child, childIndex) =>
     cloneElement(child, {
       focused: focusedIndex === childIndex,
       key: childIndex,
-      onFocus: () => handleTabFocus(childIndex),
+      onFocus: () => setFocusedIndex(childIndex),
     }),
   )
 
   const numTabs = tabs.length
 
-  const handleTabFocus = useCallback((tabIdx: number) => {
-    setFocusedIndex(tabIdx)
-  }, [])
-
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.key === 'ArrowLeft') {

package/src/core/components/toast/__workshop__/hook.tsx

@@ -24,7 +24,7 @@ export default function HookStory() {
               })
             }
             text="Push info"
-            tone="primary"
+            tone="neutral"
           />
 
           <Button

package/src/core/components/toast/toast.tsx

@@ -23,14 +23,14 @@ const STATUS_CARD_TONE: {[key: string]: ThemeColorStateToneKey} = {
   error: 'critical',
   warning: 'caution',
   success: 'positive',
-  info: 'primary',
+  info: 'neutral',
 } as const
 
 const BUTTON_TONE = {
   error: 'critical',
   warning: 'caution',
   success: 'positive',
-  info: 'primary',
+  info: 'neutral',
 } satisfies {[key: string]: ButtonTone}
 
 const ROLES = {

package/src/core/components/toast/toastProvider.tsx

@@ -8,6 +8,7 @@ import {Box} from '../../primitives'
 import {Layer} from '../../utils'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
+import {generateToastId} from './toastState'
 import {ToastContextValue, ToastParams} from './types'
 
 type ToastState = {
@@ -45,8 +46,6 @@ const ToastContainer = styled.div`
   width: 100%;
 `
 
-let toastId = 0
-
 /**
  * @public
  */
@@ -60,20 +59,20 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
     () => ({
       initial: {
         opacity: 0,
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
         y: 32,
         scale: 0.25,
         willChange: 'transform',
       },
       animate: {
         opacity: [0, 1, 1],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
         y: 0,
         scale: 1,
       },
       exit: {
         opacity: [1, 1, 0],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
         scale: 0.5,
         transition: prefersReducedMotion ? {duration: 0} : {duration: 0.2},
       },
@@ -86,7 +85,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
       // Wrap setState in startTransition to allow React to give input state updates higher priority
       const setState: typeof _setState = (state) => startTransition(() => _setState(state))
 
-      const id = params.id || String(toastId++)
+      const id = params.id || generateToastId()
       const duration = params.duration || 5000
 
       const dismiss = () => {

package/src/core/components/toast/toastState.ts

@@ -0,0 +1,6 @@
+let toastId = 0
+
+/** @internal */
+export function generateToastId(): string {
+  return String(toastId++)
+}

package/src/core/constants.ts

@@ -13,7 +13,7 @@ export const EMPTY_RECORD: Record<string, never> = {}
 /**
  * @internal
  */
-export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity'
+export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity' as string
 
 /**
  * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.

package/src/core/hooks/useArrayProp.ts

@@ -1,4 +1,4 @@
-import {useMemo} from 'react'
+import {useState} from 'react'
 import {_getArrayProp} from '../styles'
 
 /** @beta */
@@ -12,14 +12,19 @@ export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[],
 ): T[] {
-  // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
-  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val])
+  const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
+    _getArrayProp(val, defaultVal),
+    JSON.stringify(val ?? defaultVal),
+  ])
 
-  return useMemo(
-    () => _getArrayProp(val, defaultVal),
+  const hash = JSON.stringify(val ?? defaultVal)
 
-    // Improve performance: Keep object identify for a given hash of the value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [__perf_hash__],
-  )
+  if (hash !== cachedHash) {
+    // If the cached hash has changed, update the cache right away.
+    // Calling setState during render is fine in this case, and preferred over a useEffect loop
+    // https://19.react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+    setCache([_getArrayProp(val, defaultVal), hash])
+  }
+
+  return cachedVal
 }

package/src/core/hooks/useElementRect/__workshop__/example.tsx

@@ -1,11 +1,11 @@
 import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
-import {useMemo, useState} from 'react'
+import {useState} from 'react'
 import {Grid} from '../../../primitives'
 
 export default function ExampleStory() {
   const [element, setElement] = useState<HTMLElement | null>(null)
   const rect = useElementRect(element)
-  const size = useMemo(() => ({width: rect?.width || 0, height: rect?.height || 0}), [rect])
+  const size = {width: rect?.width || 0, height: rect?.height || 0}
 
   return (
     <Box padding={[3, 4, 5]}>

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,5 +1,5 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {Children, cloneElement, forwardRef, isValidElement, useMemo} from 'react'
+import {Children, cloneElement, forwardRef, isValidElement} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
@@ -65,10 +65,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children = useMemo<React.ReactElement[]>(
-    () => Children.toArray(childrenProp).filter(isValidElement),
-    [childrenProp],
-  )
+  const children: React.ReactElement[] = Children.toArray(childrenProp).filter(isValidElement)
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)
 

package/src/core/primitives/badge/__workshop__/tones.tsx

@@ -1,4 +1,5 @@
 import {Badge, Flex, Inline} from '@sanity/ui'
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
 
@@ -8,19 +9,11 @@ export default function Tones() {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Inline space={2}>
-        <Badge mode={mode}>Default</Badge>
-        <Badge mode={mode} tone="primary">
-          Primary
-        </Badge>
-        <Badge mode={mode} tone="positive">
-          Positive
-        </Badge>
-        <Badge mode={mode} tone="caution">
-          Caution
-        </Badge>
-        <Badge mode={mode} tone="critical">
-          Critical
-        </Badge>
+        {THEME_COLOR_STATE_TONES.map((tone) => (
+          <Badge key={tone} mode={mode} tone={tone}>
+            {tone}
+          </Badge>
+        ))}
       </Inline>
     </Flex>
   )

package/src/core/primitives/button/__workshop__/custom.tsx

@@ -3,11 +3,12 @@ import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function CustomStory() {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
+  const len = tones.length
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Stack space={2}>
-        <Grid columns={5} gap={1}>
+        <Grid columns={len} gap={1}>
           {tones.map(([title, tone]) => (
             <Button key={tone} mode="ghost" padding={3} tone={tone}>
               <Stack space={2}>
@@ -24,7 +25,7 @@ export default function CustomStory() {
             </Button>
           ))}
         </Grid>
-        <Grid columns={5} gap={1}>
+        <Grid columns={len} gap={1}>
           {tones.map(([title, tone]) => (
             <Button key={tone} mode="default" padding={3} tone={tone}>
               <Stack space={2}>

package/src/core/primitives/button/__workshop__/props.tsx

@@ -13,7 +13,7 @@ import {
 
 export default function ButtonStory() {
   const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')

package/src/core/primitives/button/button.tsx

@@ -9,7 +9,7 @@ import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
-import {Text, TextProps} from '../text'
+import {Text} from '../text'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'
 import {buttonBaseStyles, buttonColorStyles} from './styles'
 
@@ -32,8 +32,6 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   textAlign?: ButtonTextAlign
   muted?: boolean
   text?: React.ReactNode
-  textOverflow?: TextProps['textOverflow']
-  textWeight?: TextProps['weight']
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
   width?: ButtonWidth
@@ -87,8 +85,6 @@ export const Button = forwardRef(function Button(
     space: spaceProp = 3,
     text,
     textAlign,
-    textOverflow = 'ellipsis',
-    textWeight,
     tone = 'default',
     type = 'button',
     muted = false,
@@ -146,21 +142,20 @@ export const Button = forwardRef(function Button(
         <Box as="span" {...boxProps}>
           <Flex as="span" justify={justify} gap={space}>
             {IconComponent && (
-              <Text as="span" size={fontSize} style={{flex: 'none'}}>
+              <Text size={fontSize}>
                 {isValidElement(IconComponent) && IconComponent}
                 {isValidElementType(IconComponent) && <IconComponent />}
               </Text>
             )}
 
             {text && (
-              <Box as="span">
+              <Box>
                 <Text
-                  as="span"
                   muted={muted}
                   align={textAlign}
                   size={fontSize}
-                  textOverflow={textOverflow}
-                  weight={textWeight ?? button.textWeight}
+                  textOverflow="ellipsis"
+                  weight={button.textWeight}
                 >
                   {text}
                 </Text>
@@ -168,7 +163,7 @@ export const Button = forwardRef(function Button(
             )}
 
             {IconRightComponent && (
-              <Text as="span" size={fontSize} style={{flex: 'none'}}>
+              <Text size={fontSize}>
                 {isValidElement(IconRightComponent) && IconRightComponent}
                 {isValidElementType(IconRightComponent) && <IconRightComponent />}
               </Text>

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

@@ -29,8 +29,8 @@ export function buttonBaseStyles(
     border: 0;
     box-sizing: border-box;
     padding: 0;
-    overflow: hidden;
     margin: 0;
+    white-space: nowrap;
     text-align: left;
     position: relative;
     vertical-align: top;

package/src/core/primitives/card/__workshop__/allTones.tsx

@@ -1,23 +1,21 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 
 export default function AllTonesStory() {
-  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
-
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Stack space={5}>
-          {tones.map(([title, tone]) => (
+        <Stack space={3}>
+          {THEME_COLOR_CARD_TONES.map((tone) => (
             <Card
               key={tone}
-              padding={4}
+              padding={3}
               radius={2}
-              shadow={4}
+              shadow={2}
               style={{textAlign: 'center'}}
               tone={tone}
             >
-              <Text>{title}</Text>
+              <Text size={1}>{tone}</Text>
             </Card>
           ))}
         </Stack>

package/src/core/primitives/card/__workshop__/asButton.tsx

@@ -5,7 +5,7 @@ export default function AsButtonStory() {
   const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
 
   return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container>
         <Grid columns={3} gap={2}>
           <Box>
@@ -18,14 +18,20 @@ export default function AsButtonStory() {
                   __unstable_focusRing
                   as="button"
                   key={tone}
-                  padding={4}
+                  padding={3}
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="medium">{title}</Text>
-                    <Text muted>Muted</Text>
-                    <Text accent>Accent</Text>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text muted size={1}>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
                   </Stack>
                 </Card>
               ))}
@@ -43,14 +49,20 @@ export default function AsButtonStory() {
                   as="button"
                   disabled
                   key={tone}
-                  padding={4}
+                  padding={3}
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="medium">{title}</Text>
-                    <Text muted>Muted</Text>
-                    <Text accent>Accent</Text>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text size={1} muted>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
                   </Stack>
                 </Card>
               ))}
@@ -63,21 +75,27 @@ export default function AsButtonStory() {
             </Text>
             <Stack marginTop={3} space={2}>
               {tones.map(([title, tone]) => (
-                <div aria-selected key={tone}>
-                  <Card
-                    __unstable_focusRing
-                    as="button"
-                    padding={4}
-                    style={{textAlign: 'center'}}
-                    tone={tone}
-                  >
-                    <Stack space={2}>
-                      <Text weight="medium">{title}</Text>
-                      <Text muted>Muted</Text>
-                      <Text accent>Accent</Text>
-                    </Stack>
-                  </Card>
-                </div>
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  key={tone}
+                  padding={3}
+                  selected
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack space={2}>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text size={1} muted>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
+                  </Stack>
+                </Card>
               ))}
             </Stack>
           </Box>

package/src/core/primitives/card/__workshop__/asComponent.tsx

@@ -20,7 +20,7 @@ export default function AsComponentStory() {
   return (
     <Flex align="center" height="fill" justify="center">
       <Card as={CustomLink} data-as="a" {...props} padding={3}>
-        <Text>As component</Text>
+        <Text size={1}>As component</Text>
       </Card>
     </Flex>
   )

package/src/core/primitives/card/__workshop__/checkered.tsx

@@ -1,15 +1,25 @@
-import {Card, Flex, Stack} from '@sanity/ui'
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 
 export default function CheckeredStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Stack space={1}>
-        <Card __unstable_checkered border style={{width: 120, height: 60}} />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="transparent" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="primary" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="positive" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="caution" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="critical" />
+        {THEME_COLOR_CARD_TONES.map((tone) => (
+          <Card
+            __unstable_checkered
+            border
+            key={tone}
+            padding={3}
+            sizing="border"
+            style={{width: 120, height: 60}}
+            tone={tone}
+          >
+            <Text muted size={1}>
+              {tone}
+            </Text>
+          </Card>
+        ))}
       </Stack>
     </Flex>
   )

package/src/core/primitives/card/__workshop__/interactive.tsx

@@ -2,13 +2,20 @@ import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
 export default function InteractiveCardStory() {
-  const selected = useBoolean('Selected', false, 'Props')
   const pressed = useBoolean('Pressed', false, 'Props')
+  const selected = useBoolean('Selected', false, 'Props')
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <div aria-selected={selected}>
-        <Card __unstable_focusRing aria-pressed={pressed} as="button" padding={3} tabIndex={0}>
+      <div>
+        <Card
+          __unstable_focusRing
+          as="button"
+          padding={3}
+          pressed={pressed}
+          selected={selected}
+          tabIndex={0}
+        >
           <Stack space={3}>
             <Text>
               Text <code>Code</code>

package/src/core/primitives/card/__workshop__/listNavigation.tsx

@@ -64,10 +64,12 @@ function List2() {
 
 function Preview() {
   return (
-    <Flex align="center">
-      <Skeleton marginRight={2} radius={2} style={{width: 35, height: 35}} />
+    <Flex align="center" gap={2}>
+      <Skeleton radius="full" style={{width: 33, height: 33}} />
       <Stack flex={1} space={2}>
-        <Text>Preview</Text>
+        <Text size={1} weight="medium">
+          Preview
+        </Text>
         <Text muted size={1}>
           Preview
         </Text>

package/src/core/primitives/card/__workshop__/props.tsx

@@ -13,14 +13,14 @@ export default function PropsStory() {
   const border = useBoolean('Border', false, 'Props')
   const checkered = useBoolean('Checkered', false, 'Props')
   const muted = useBoolean('Muted', false, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
   const selected = useBoolean('Selected', false, 'Props')
   const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0, 'Props')
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Card
         __unstable_checkered={checkered}
         as={as}
@@ -34,14 +34,16 @@ export default function PropsStory() {
         tone={tone}
       >
         <Stack space={3}>
-          <Text>
+          <Text size={1}>
             Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
             <code>shadow={shadow}</code>.
           </Text>
-          <Text>
+          <Text size={1}>
             Text with <a>link</a>.
           </Text>
-          <Text accent>Accented text.</Text>
+          <Text accent size={1}>
+            Text with accent color.
+          </Text>
         </Stack>
       </Card>
     </Flex>

package/src/core/primitives/card/__workshop__/selected.tsx

@@ -68,12 +68,14 @@ function Preview({selected}: {selected: boolean}) {
   return (
     <Flex>
       <Box flex={1}>
-        <Text>Title</Text>
+        <Text size={1}>Title</Text>
       </Box>
       <Inline space={3}>
         <TextWithTone
           data-selected={selected ? '' : undefined}
           muted
+          size={1}
+          weight="medium"
           $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
         >
           <EditIcon />
@@ -81,6 +83,7 @@ function Preview({selected}: {selected: boolean}) {
         <TextWithTone
           data-selected={selected ? '' : undefined}
           muted
+          size={1}
           $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
         >
           <PublishIcon />

package/src/core/primitives/checkbox/__workshop__/tones.tsx

@@ -4,9 +4,15 @@ export default function MultipleTonesStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Stack>
+        <Card padding={3} tone="neutral">
+          <Checkbox />
+        </Card>
         <Card padding={3} tone="primary">
           <Checkbox />
         </Card>
+        <Card padding={3} tone="suggest">
+          <Checkbox />
+        </Card>
         <Card padding={3} tone="positive">
           <Checkbox />
         </Card>

package/src/core/primitives/code/__workshop__/props.tsx

@@ -8,7 +8,7 @@ import {
 export default function PropsStory() {
   const code = useText('Code', `console.log('Hello, world')`, 'Props')
   const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1, 'Props')
 
   return (
     <Box padding={[4, 5, 6]}>