@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -1,12 +1,14 @@
 import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useRef, useState} from 'react'
+
 import {BoundaryElementProvider} from '../../../utils'
 import {Box} from '../../box'
 import {Card} from '../../card'
 import {Flex} from '../../flex'
 import {Stack} from '../../stack'
 import {Text} from '../../text'
-import {Popover, PopoverProps, PopoverUpdateCallback} from '../popover'
+import {Popover, PopoverProps} from '../popover'
+import {PopoverUpdateCallback} from '../types'
 
 const SIDE_PANEL_WIDTH = {
   sm: 300,
@@ -18,7 +20,7 @@ const SIDE_PANEL_WIDTH = {
 export default function SidePanelStory() {
   const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
   const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
-  const updateRef = useRef<PopoverUpdateCallback>()
+  const updateRef = useRef<PopoverUpdateCallback>(undefined)
 
   useEffect(() => updateRef.current?.(), [sidePanelWidth])
 
@@ -80,6 +82,7 @@ function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
       width={0}
       updateRef={updateRef}
     >
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
       <code onClick={handleClick}>reference</code>
     </Popover>
   )

package/src/core/primitives/popover/__workshop__/TestStory.tsx

@@ -1,11 +1,12 @@
 import {Radius} from '@sanity/ui/theme'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {ReactElement, useRef, useState} from 'react'
+import {useRef, useState} from 'react'
+
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 import {BoundaryElementProvider, PortalProvider} from '../../../utils'
 import {Button} from '../../button'
 import {Card} from '../../card'
@@ -13,7 +14,7 @@ import {Text} from '../../text'
 import {Popover} from '../popover'
 import {PopoverUpdateCallback} from '../types'
 
-export default function TestStory(): ReactElement {
+export default function TestStory(): React.JSX.Element {
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
@@ -31,7 +32,7 @@ export default function TestStory(): ReactElement {
 
   const text = useText('Text', 'Test')
 
-  const updateRef = useRef<PopoverUpdateCallback>()
+  const updateRef = useRef<PopoverUpdateCallback>(undefined)
 
   const button = (
     <Button text="reference" selected style={{width: referenceWide ? 300 : undefined}} />

package/src/core/primitives/popover/floating-ui/size.ts

@@ -1,4 +1,5 @@
-import {Elements, Middleware, detectOverflow} from '@floating-ui/react-dom'
+import {detectOverflow, Elements, Middleware} from '@floating-ui/react-dom'
+
 import {PopoverMargins} from '../../../types'
 
 export interface SizeMiddlewareApplyOptions {

package/src/core/primitives/popover/helpers.ts

@@ -1,15 +1,16 @@
+import {ContainerWidth} from '@sanity/ui/theme'
+
 import {DEFAULT_POPOVER_PADDING} from './constants'
-import {PopoverWidth} from './types'
 
 export function calcCurrentWidth(params: {
   mediaIndex: number
   container: number[]
-  width: PopoverWidth[]
+  width: (ContainerWidth | 'fill' | null | undefined)[]
 }): number | undefined {
   const {container, mediaIndex, width} = params
 
   const w = width[mediaIndex]
-  const currentWidth: PopoverWidth | undefined = w === undefined ? width[width.length - 1] : w
+  const currentWidth = w === undefined ? width[width.length - 1] : w
 
   return typeof currentWidth === 'number' ? container[currentWidth] : undefined
 }

package/src/core/primitives/popover/popover.tsx

@@ -1,55 +1,50 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import {
-  Middleware,
-  RootBoundary,
   arrow,
   autoUpdate,
   flip,
   hide,
+  Middleware,
   offset,
+  RootBoundary,
   shift,
   useFloating,
 } from '@floating-ui/react-dom'
-import {RadiusStyleProps} from '@sanity/ui/css'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
 import {
-  MutableRefObject,
-  RefCallback,
   cloneElement,
+  ForwardedRef,
   forwardRef,
   memo,
+  MutableRefObject,
+  ReactElement,
+  ReactNode,
+  RefCallback,
   useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
 } from 'react'
+
+import {useTheme_v2} from '../../_compat'
 import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
-import {useTheme_v2} from '../../theme'
-import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
-import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
-import {ResponsiveShadowProps} from '../types'
+import {Placement, PopoverMargins, Props} from '../../types'
+import {LayerProps, LayerProvider, Portal, useBoundaryElement, useLayer} from '../../utils'
+import {CardProps} from '../card'
 import {
+  DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_POPOVER_DISTANCE,
   DEFAULT_POPOVER_MARGINS,
-  DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
 import {calcCurrentWidth, calcMaxWidth} from './helpers'
 import {PopoverCard} from './popoverCard'
-import {PopoverUpdateCallback, PopoverWidth} from './types'
-
-export type {PopoverUpdateCallback}
+import {PopoverUpdateCallback} from './types'
 
 /** @public */
-export interface PopoverProps
-  extends Omit<LayerProps, 'width'>,
-    RadiusStyleProps,
-    ResponsiveShadowProps {
+export interface PopoverProps extends CardProps, LayerProps {
   /** @beta */
   __unstable_margins?: PopoverMargins
   /**
@@ -62,7 +57,7 @@ export interface PopoverProps
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement
+  children?: ReactElement<{ref: ForwardedRef<HTMLElement>}>
   /**
    * When `true`, prevent overflow within the current boundary:
    * - by flipping on its side axis
@@ -75,7 +70,7 @@ export interface PopoverProps
    * @defaultValue false
    */
   constrainSize?: boolean
-  content?: React.ReactNode
+  content?: ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]
   floatingBoundary?: HTMLElement | null
@@ -88,9 +83,14 @@ export interface PopoverProps
    * @defaultValue false
    */
   matchReferenceWidth?: boolean
+  /**
+   * When true, blocks all pointer interaction with elements beneath the popover until closed.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  modal?: boolean
   open?: boolean
-  overflow?: BoxOverflow
-  padding?: number | number[]
   placement?: Placement
   /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
@@ -101,13 +101,16 @@ export interface PopoverProps
    * The children of the popover won't be rendered.
    */
   referenceElement?: HTMLElement | null
-  scheme?: ThemeColorSchemeKey
-  tone?: CardTone
   /** @beta */
   updateRef?:
     | MutableRefObject<PopoverUpdateCallback | undefined>
     | RefCallback<PopoverUpdateCallback | undefined>
-  width?: PopoverWidth | PopoverWidth[]
+}
+
+const ViewportOverlay = () => {
+  const {zIndex} = useLayer()
+
+  return <div style={{height: '100vh', inset: 0, position: 'fixed', width: '100vw', zIndex}} />
 }
 
 /**
@@ -117,13 +120,9 @@ export interface PopoverProps
  */
 export const Popover = memo(
   forwardRef(function Popover(
-    props: PopoverProps &
-      Omit<
-        React.HTMLProps<HTMLDivElement>,
-        'as' | 'children' | 'content' | 'height' | 'rows' | 'width' | 'wrap'
-      >,
-    forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement {
+    props: Props<PopoverProps, 'div'>,
+    forwardedRef: ForwardedRef<HTMLDivElement>,
+  ): ReactElement {
     const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
@@ -140,6 +139,7 @@ export const Popover = memo(
         DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
       floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      modal,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -204,7 +204,7 @@ export const Popover = memo(
     }, [maxWidth])
 
     // Keep track of reference element width (see `size` middleware below)
-    const referenceWidthRef = useRef<number>()
+    const referenceWidthRef = useRef<number>(undefined)
 
     // Force apply width & max width to floating element
     useEffect(() => {
@@ -333,6 +333,11 @@ export const Popover = memo(
       middleware,
       placement: placementProp,
       whileElementsMounted: autoUpdate,
+      elements: referenceElement
+        ? {
+            reference: referenceElement,
+          }
+        : undefined,
     })
 
     const referenceHidden = middlewareData.hide?.referenceHidden
@@ -359,7 +364,6 @@ export const Popover = memo(
       (node: HTMLElement | null) => {
         refs.setReference(node)
 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const childRef = getElementRef(childProp as any)
 
         if (typeof childRef === 'function') {
@@ -372,7 +376,10 @@ export const Popover = memo(
     )
 
     const child = useMemo(() => {
-      if (!childProp || referenceElement) return null
+      // If a reference element is defined, we don't need to clone the child
+      if (referenceElement) return childProp
+
+      if (!childProp) return null
 
       return cloneElement(childProp, {ref: setReference})
     }, [childProp, referenceElement, setReference])
@@ -387,17 +394,15 @@ export const Popover = memo(
       }
     }, [update, updateRef])
 
-    useEffect(() => {
-      if (child) return
-      refs.setReference(referenceElement || null)
-    }, [referenceElement, refs, child])
-
     if (disabled) {
       return childProp || <></>
     }
 
     const popover = (
       <LayerProvider zOffset={zOffset}>
+        {/* Optional transparent blocking overlay at the top-most z-index layer. Must be positioned before the below popover card. */}
+        {modal && <ViewportOverlay />}
+
         <PopoverCard
           {...restProps}
           __unstable_margins={margins}
@@ -412,13 +417,13 @@ export const Popover = memo(
           placement={placement}
           radius={radius}
           ref={setFloating}
+          referenceWidth={matchReferenceWidth ? referenceWidthRef.current : width}
           scheme={scheme}
           shadow={shadow}
           originX={originX}
           originY={originY}
           strategy={strategy}
           tone={tone}
-          width={matchReferenceWidth ? referenceWidthRef.current : width}
           x={x}
           y={y}
         >
@@ -454,7 +459,9 @@ Popover.displayName = 'Memo(ForwardRef(Popover))'
 // https://github.com/facebook/react/pull/28348
 //
 // Access the ref using the method that doesn't yield a warning.
-function getElementRef(element: React.ReactElement) {
+function getElementRef(
+  element: ReactElement<{ref: ForwardedRef<HTMLElement>}>,
+): ForwardedRef<HTMLElement> {
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
   let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning

package/src/core/primitives/popover/popoverCard.tsx

@@ -1,13 +1,9 @@
 import {Strategy} from '@floating-ui/react-dom'
-import {RadiusStyleProps} from '@sanity/ui/css'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {MotionProps, motion} from 'framer-motion'
-import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
-import {
-  // POPOVER_MOTION_CONTENT_OPACITY_PROPERTY,
-  POPOVER_MOTION_PROPS,
-} from '../../constants'
-import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
+import {motion, MotionProps} from 'framer-motion'
+import {CSSProperties, ForwardedRef, forwardRef, memo, useMemo} from 'react'
+
+import {POPOVER_MOTION_PROPS} from '../../constants'
+import {Placement, PopoverMargins, Props} from '../../types'
 import {Arrow, useLayer} from '../../utils'
 import {Card, CardProps} from '../card'
 import {Flex} from '../flex'
@@ -19,38 +15,32 @@ import {
 } from './constants'
 
 /** @internal */
-export interface PopoverCardProps extends RadiusStyleProps {
+export interface PopoverCardProps extends CardProps {
   /** @beta*/
   __unstable_margins?: PopoverMargins
   animate?: boolean
   arrow: boolean
-  arrowRef: React.Ref<HTMLDivElement>
+  arrowRef: ForwardedRef<HTMLDivElement>
   arrowX?: number
   arrowY?: number
   originX?: number
   originY?: number
-  overflow?: BoxOverflow
-  padding?: number | number[]
   placement: Placement
-  scheme?: ThemeColorSchemeKey
-  shadow?: number | number[]
+  referenceWidth?: number
   strategy: Strategy
-  tone: CardTone
-  width: number | undefined
   x: number | null
   y: number | null
 }
 
-const MotionCard = motion(Card)
+const MotionCard = motion.create(Card)
 
 /**
  * @internal
  */
 export const PopoverCard = memo(
   forwardRef(function PopoverCard(
-    props: PopoverCardProps &
-      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
-    ref: React.ForwardedRef<HTMLDivElement>,
+    props: Props<PopoverCardProps, 'div'>,
+    ref: ForwardedRef<HTMLDivElement>,
   ) {
     const {
       __unstable_margins: marginsProp,
@@ -66,12 +56,13 @@ export const PopoverCard = memo(
       originY,
       overflow,
       radius,
+      referenceWidth,
       scheme,
       shadow,
       strategy,
       style,
       tone,
-      width,
+      // width,
       x: xProp,
       y: yProp,
       ...restProps
@@ -96,12 +87,12 @@ export const PopoverCard = memo(
         originY,
         position: strategy,
         top: y,
-        width,
+        width: referenceWidth,
         zIndex,
         willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [animate, originX, originY, strategy, style, width, x, y, zIndex],
+      [animate, originX, originY, referenceWidth, strategy, style, x, y, zIndex],
     )
 
     const arrowStyle: CSSProperties = useMemo(
@@ -120,6 +111,8 @@ export const PopoverCard = memo(
         data-ui="Popover"
         {...(restProps as CardProps & MotionProps)}
         data-placement={placement}
+        direction="column"
+        display="flex"
         radius={radius}
         ref={ref}
         scheme={scheme}
@@ -127,9 +120,11 @@ export const PopoverCard = memo(
         sizing="border"
         style={rootStyle}
         tone={tone}
-        // todo
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        {...((animate ? POPOVER_MOTION_PROPS : {}) as any)}
+        variants={POPOVER_MOTION_PROPS.card}
+        transition={POPOVER_MOTION_PROPS.transition}
+        initial={animate ? ['hidden', 'initial'] : undefined}
+        animate={animate ? ['visible', 'scaleIn'] : undefined}
+        exit={animate ? ['hidden', 'scaleOut'] : undefined}
       >
         <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
           <Flex direction="column" flex={1} padding={padding}>

package/src/core/primitives/radio/__workshop__/plain.tsx

@@ -2,8 +2,8 @@ import {Flex, Radio} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function PlainStory() {
-  const checked = useBoolean('Checked?', false, 'Props')
-  const disabled = useBoolean('Disabled?', false, 'Props')
+  const checked = useBoolean('Checked', false, 'Props')
+  const disabled = useBoolean('Disabled', false, 'Props')
   const id = 'radioStory'
   const name = 'radioStory'
   const onBlur = useAction('onBlur')

package/src/core/primitives/radio/radio.tsx

@@ -1,7 +1,8 @@
-import {forwardRef, useImperativeHandle, useRef} from 'react'
+import {composeClassNames, radio} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+
 import {useCustomValidity} from '../../hooks'
-import {styled} from '../../lib/styled'
-import {radioBaseStyle, inputElementStyle} from './styles'
+import {Props} from '../../types'
 
 /**
  * @public
@@ -10,17 +11,14 @@ export interface RadioProps {
   customValidity?: string
 }
 
-const Root = styled.div(radioBaseStyle)
-const Input = styled.input(inputElementStyle)
-
 /**
  * The `Radio` component allows the user to select one option from a set.
  *
  * @public
  */
 export const Radio = forwardRef(function Radio(
-  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
+  props: Props<RadioProps, 'input'>,
+  forwardedRef: ForwardedRef<HTMLInputElement>,
 ) {
   const {className, disabled, style, customValidity, readOnly, ...restProps} = props
   const ref = useRef<HTMLInputElement | null>(null)
@@ -33,8 +31,8 @@ export const Radio = forwardRef(function Radio(
   useCustomValidity(ref, customValidity)
 
   return (
-    <Root className={className} data-ui="Radio" style={style}>
-      <Input
+    <div className={composeClassNames(className, radio())} data-ui="Radio" style={style}>
+      <input
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-error={customValidity ? '' : undefined}
         {...restProps}
@@ -44,7 +42,8 @@ export const Radio = forwardRef(function Radio(
         type="radio"
       />
       <span />
-    </Root>
+    </div>
   )
 })
+
 Radio.displayName = 'ForwardRef(Radio)'

package/src/core/primitives/select/__workshop__/plain.tsx

@@ -1,8 +1,11 @@
 import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function PlainStory() {
   const disabled = useBoolean('Disabled', false, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
   const readOnly = useBoolean('Read only', false, 'Props')
 
   return (
@@ -13,7 +16,7 @@ export default function PlainStory() {
             Select
           </Label>
 
-          <Select disabled={disabled} id="select-example" readOnly={readOnly}>
+          <Select disabled={disabled} fontSize={fontSize} id="select-example" readOnly={readOnly}>
             <option value="a">Option A</option>
             <option value="b">Option B</option>
             <option value="c">Option C</option>

package/src/core/primitives/select/__workshop__/readOnly.tsx

@@ -9,7 +9,7 @@ export default function ReadOnlyStory() {
             Select
           </Label>
 
-          <Select id="select-example" radius={3} readOnly>
+          <Select id="select-example" readOnly>
             <option value="a">Option A</option>
             <option value="b">Option B</option>
             <option value="c">Option C</option>

package/src/core/primitives/select/select.tsx

@@ -1,52 +1,49 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {useCustomValidity, useArrayProp} from '../../hooks'
-import {styled} from '../../lib/styled'
-import {Radius} from '../../types'
+import {
+  _inputElement,
+  ResponsiveProp,
+  select,
+  selectPresentation,
+  SelectStyleProps,
+} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
+import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+
+import {useCustomValidity} from '../../hooks'
+import {Props} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
-import {selectStyle} from './styles'
 
 /**
  * @public
  */
-export interface SelectProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  space?: number | number[]
+export interface SelectProps extends SelectStyleProps {
   customValidity?: string
+  readOnly?: boolean
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
 }
 
-const Root = styled.div(selectStyle.root)
-
-const Input = styled.select<{
-  $fontSize: number[]
-  $padding: number[]
-  $radius: Radius[]
-  $space: number[]
-}>(selectStyle.input)
-
-const IconBox = styled(Box)(selectStyle.iconBox)
-
 /**
  * The `Select` component provides control of options.
  *
  * @public
  */
 export const Select = forwardRef(function Select(
-  props: SelectProps & Omit<React.HTMLProps<HTMLSelectElement>, 'as'>,
-  forwardedRef: React.ForwardedRef<HTMLSelectElement>,
+  props: Props<SelectProps, 'select'>,
+  forwardedRef: ForwardedRef<HTMLSelectElement>,
 ) {
   const {
+    border = true,
     children,
     customValidity,
     disabled,
-    fontSize = 2,
-    padding = 3,
+    fontSize = 1,
+    gap,
+    padding = 2,
     radius = 2,
     readOnly,
-    space = 3,
+    space = 2,
     ...restProps
   } = props
 
@@ -60,27 +57,29 @@ export const Select = forwardRef(function Select(
   useCustomValidity(ref, customValidity)
 
   return (
-    <Root data-ui="Select">
-      <Input
+    <div
+      data-ui="Select"
+      className={select({border, fontSize, padding, radius, gap: gap ?? space})}
+      data-icon-right=""
+    >
+      <select
         data-read-only={!disabled && readOnly ? '' : undefined}
-        data-ui="Select"
         {...restProps}
-        $fontSize={useArrayProp(fontSize)}
-        $padding={useArrayProp(padding)}
-        $radius={useArrayProp(radius)}
-        $space={useArrayProp(space)}
+        className={_inputElement()}
         disabled={disabled || readOnly}
         ref={ref}
       >
         {children}
-      </Input>
-
-      <IconBox padding={padding}>
-        <Text size={fontSize}>
-          <ChevronDownIcon />
-        </Text>
-      </IconBox>
-    </Root>
+      </select>
+      <span className={selectPresentation()}>
+        <Box as="span" display="inline-block" padding={padding}>
+          <Text size={fontSize}>
+            <ChevronDownIcon />
+          </Text>
+        </Box>
+      </span>
+    </div>
   )
 })
+
 Select.displayName = 'ForwardRef(Select)'

package/src/core/primitives/spinner/__workshop__/Props.tsx

@@ -1,7 +1,8 @@
 import {Flex, Spinner} from '@sanity/ui'
 import {FontTextSize} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function Props() {
   const muted = useBoolean('Muted', false, 'Props')