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

package/src/core/components/skeleton/textSkeleton.tsx

@@ -1,36 +1,21 @@
-import {ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
+import {
+  codeSkeleton,
+  composeClassNames,
+  headingSkeleton,
+  labelSkeleton,
+  ResponsiveProp,
+  textSkeleton,
+} from '@sanity/ui/css'
+import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {styled} from '../../lib/styled'
-import {useArrayProp} from '../../hooks'
-import {ThemeProps, _responsive} from '../../styles'
 import {Skeleton, SkeletonProps} from './skeleton'
 
-const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
-  props: {
-    $size: number[]
-    $style: ThemeFontKey
-  } & ThemeProps,
-) => {
-  const {$size, $style} = props
-  const {font, media} = getTheme_v2(props.theme)
-  const fontStyle = font[$style]
-
-  const styles = _responsive(media, $size, (sizeIndex) => {
-    const fontSize = fontStyle.sizes[sizeIndex]
-    const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
-
-    return {height: capHeight}
-  })
-
-  return styles
-})
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export interface TextSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontTextSize>
 }
 
 /**
@@ -38,7 +23,7 @@ export interface TextSkeletonProps extends SkeletonProps {
  * @beta
  */
 export interface LabelSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontLabelSize>
 }
 
 /**
@@ -46,7 +31,7 @@ export interface LabelSkeletonProps extends SkeletonProps {
  * @beta
  */
 export interface HeadingSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontHeadingSize>
 }
 
 /**
@@ -54,7 +39,7 @@ export interface HeadingSkeletonProps extends SkeletonProps {
  * @beta
  */
 export interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontCodeSize>
 }
 
 /**
@@ -63,14 +48,24 @@ export interface CodeSkeletonProps extends SkeletonProps {
  */
 export const TextSkeleton = forwardRef(function TextSkeleton(
   props: TextSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
+    >,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="text" />
+  const {className, size = 2, ...restProps} = props
+
+  return (
+    <Skeleton
+      data-ui="TextSkeleton"
+      {...restProps}
+      className={composeClassNames(className, textSkeleton({size}))}
+      ref={ref}
+    />
+  )
 })
+
 TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
 
 /**
@@ -79,14 +74,24 @@ TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
  */
 export const LabelSkeleton = forwardRef(function TextSkeleton(
   props: LabelSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
+    >,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="label" />
+  const {className, size = 2, ...restProps} = props
+
+  return (
+    <Skeleton
+      data-ui="LabelSkeleton"
+      {...restProps}
+      className={composeClassNames(className, labelSkeleton({size}))}
+      ref={ref}
+    />
+  )
 })
+
 LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
 
 /**
@@ -95,14 +100,23 @@ LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
  */
 export const HeadingSkeleton = forwardRef(function TextSkeleton(
   props: HeadingSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
+    >,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
+  const {className, size = 2, ...restProps} = props
+
+  return (
+    <Skeleton
+      {...restProps}
+      className={composeClassNames(className, headingSkeleton({size}))}
+      ref={ref}
+    />
+  )
 })
+
 HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
 
 /**
@@ -111,12 +125,22 @@ HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
  */
 export const CodeSkeleton = forwardRef(function TextSkeleton(
   props: CodeSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
+    >,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="code" />
+  const {className, size = 2, ...restProps} = props
+
+  return (
+    <Skeleton
+      // root
+      {...restProps}
+      className={composeClassNames(className, codeSkeleton({size}))}
+      ref={ref}
+    />
+  )
 })
+
 CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

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

@@ -16,7 +16,6 @@ export interface TabProps {
   'icon'?: React.ElementType | React.ReactNode
   'focused'?: boolean
   'fontSize'?: ResponsiveProp<FontTextSize>
-  // 'fontSize'?: number | number[]
   'label'?: React.ReactNode
   'padding'?: number | number[]
   'selected'?: boolean

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

@@ -1,5 +1,4 @@
-import {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
-import {styled} from '../../lib/styled'
+import {cloneElement, ForwardedRef, forwardRef, useCallback, useMemo, useState} from 'react'
 import {Inline, InlineProps} from '../../primitives'
 
 /**
@@ -13,22 +12,12 @@ function _isReactElement(node: unknown): node is React.ReactElement {
   return Boolean(node)
 }
 
-// Limits the width of tabs in tablist
-const CustomInline = styled(Inline)`
-  & > div {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-`
-
 /**
  * @public
  */
 export const TabList = forwardRef(function TabList(
   props: TabListProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
@@ -63,15 +52,9 @@ export const TabList = forwardRef(function TabList(
   )
 
   return (
-    <CustomInline
-      data-ui="TabList"
-      {...restProps}
-      onKeyDown={handleKeyDown}
-      ref={ref}
-      role="tablist"
-    >
+    <Inline data-ui="TabList" {...restProps} onKeyDown={handleKeyDown} ref={ref} role="tablist">
       {tabs}
-    </CustomInline>
+    </Inline>
   )
 })
 

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

@@ -35,4 +35,5 @@ export const TabPanel = forwardRef(function TabPanel(
     </Box>
   )
 })
+
 TabPanel.displayName = 'ForwardRef(TabPanel)'

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

@@ -1,11 +1,8 @@
 import {CloseIcon} from '@sanity/icons'
 import {RadiusStyleProps} from '@sanity/ui/css'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {styled} from '../../lib/styled'
 import {Box, Button, Flex, Stack, Text, Card} from '../../primitives'
-import {ThemeProps} from '../../styles'
 import type {ButtonTone} from '../../types'
-import {rootStyles, TextBox} from './styles'
 
 /**
  * @public
@@ -40,10 +37,6 @@ const ROLES = {
   info: 'alert',
 } as const
 
-const Root = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
-  rootStyles,
-)
-
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
  *
@@ -53,15 +46,29 @@ const Root = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & T
  */
 export function Toast(
   props: ToastProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title' | 'width' | 'wrap'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'rows' | 'title' | 'width' | 'wrap'
+    >,
 ): React.ReactElement {
-  const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
+  const {
+    closable,
+    description,
+    duration, // eslint-disable-line @typescript-eslint/no-unused-vars
+    onClose,
+    radius = 3,
+    title,
+    status,
+    ...restProps
+  } = props
+
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const buttonTone = status ? BUTTON_TONE[status] : 'default'
   const role = status ? ROLES[status] : 'status'
 
   return (
-    <Root
+    <Card
+      // root
       data-ui="Toast"
       role={role}
       {...restProps}
@@ -70,10 +77,16 @@ export function Toast(
       radius={radius}
       shadow={2}
       tone={cardTone}
-      $duration={duration}
+      // todo
+      // $duration={duration}
     >
       <Flex align="flex-start">
-        <TextBox flex={1} padding={3}>
+        <Box
+          // text-box
+          flex={1}
+          overflowX="auto"
+          padding={3}
+        >
           <Stack space={3}>
             {title && (
               <Text size={1} weight="medium">
@@ -86,7 +99,7 @@ export function Toast(
               </Text>
             )}
           </Stack>
-        </TextBox>
+        </Box>
 
         {closable && (
           <Box padding={1}>
@@ -102,7 +115,7 @@ export function Toast(
           </Box>
         )}
       </Flex>
-    </Root>
+    </Card>
   )
 }
 

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

@@ -3,7 +3,6 @@ import {useMemo, useRef, useState, startTransition, useEffect} from 'react'
 import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {useMounted} from '../../hooks/useMounted'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-// import {styled} from '../../lib/styled'
 import {Box} from '../../primitives'
 import {Layer} from '../../utils'
 import {Toast} from './toast'
@@ -27,15 +26,6 @@ export interface ToastProviderProps {
   zOffset?: number | number[]
 }
 
-// const ToastContainer = styled.div`
-//   box-sizing: border-box;
-//   position: absolute;
-//   right: 0;
-//   bottom: 0;
-//   max-width: 420px;
-//   width: 100%;
-// `
-
 let toastId = 0
 
 /**
@@ -145,7 +135,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
       {children}
       {mounted && (
         <Layer
-          className={undefined /* root */}
+          // root
           data-ui="ToastProvider"
           inset={0}
           pointerEvents="none"
@@ -154,15 +144,16 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
           width="fill"
         >
           <Box
-            className={undefined /* container */}
+            // container
             position="absolute"
             sizing="border"
             style={{
-              // todo: move to css
+              // todo: move to css?
               right: 0,
               bottom: 0,
               maxWidth: 420,
             }}
+            width="fill"
           >
             <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
               <AnimatePresence initial={false}>

package/src/core/components/tree/tree.tsx

@@ -20,7 +20,6 @@ import {TreeContextValue, TreeState} from './types'
  * @beta
  */
 export interface TreeProps {
-  // space?: number | number[]
   space?: ResponsiveProp<Space>
 }
 
@@ -33,7 +32,7 @@ export const Tree = memo(
     props: TreeProps &
       Omit<
         React.HTMLProps<HTMLDivElement>,
-        'align' | 'as' | 'height' | 'ref' | 'role' | 'width' | 'wrap'
+        'align' | 'as' | 'height' | 'ref' | 'rows' | 'role' | 'width' | 'wrap'
       >,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {

package/src/core/components/tree/treeGroup.tsx

@@ -8,7 +8,10 @@ export interface TreeGroupProps {
 
 export const TreeGroup = memo(function TreeGroup(
   props: TreeGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'width' | 'wrap'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'role' | 'rows' | 'width' | 'wrap'
+    >,
 ): React.ReactElement {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()

package/src/core/components/tree/treeItem.tsx

@@ -2,7 +2,6 @@ import {ToggleArrowRightIcon} from '@sanity/icons'
 import {composeClassNames, ResponsiveProp, treeItem} from '@sanity/ui/css'
 import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
-import {styled} from '../../lib/styled'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
@@ -21,28 +20,20 @@ export interface TreeItemProps {
   linkAs?: BoxProps['as']
   padding?: number | number[]
   space?: ResponsiveProp<Space>
-  // space?: number | number[]
   text?: React.ReactNode
   weight?: ThemeFontWeightKey
 }
 
-// const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
-
-// const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
-
-const ToggleArrowText = styled(Text)`
-  & > svg {
-    transition: transform 100ms;
-  }
-`
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export const TreeItem = memo(function TreeItem(
   props: TreeItemProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'width' | 'wrap'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'role' | 'rows' | 'width' | 'wrap'
+    >,
 ): React.ReactElement {
   const {
     children,
@@ -130,9 +121,14 @@ export const TreeItem = memo(function TreeItem(
           </Text>
         )}
         {!IconComponent && (
-          <ToggleArrowText muted={muted} size={fontSize} weight={weight}>
+          <Text
+            // ToggleArrowText
+            muted={muted}
+            size={fontSize}
+            weight={weight}
+          >
             <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
-          </ToggleArrowText>
+          </Text>
         )}
       </Box>
       <Box flex={1}>

package/src/core/hooks/useArrayProp.ts

@@ -1,5 +1,5 @@
 import {useMemo} from 'react'
-import {_getArrayProp} from '../styles'
+import {_getArrayProp} from '../_compat'
 
 /** @beta */
 export type ArrayPropPrimitive = string | number | boolean | undefined | null

package/src/core/index.ts

@@ -5,7 +5,6 @@ export * from './components'
 export * from './helpers'
 export * from './hooks'
 export * from './observers'
-export * from './styles'
 export * from './theme'
 export * from './types'
 export * from './utils'

package/src/core/lib/styled/members.ts

@@ -3,7 +3,7 @@ import {
   createGlobalStyle as _createGlobalStyle,
   type ExecutionContext as _ExecutionContext,
   keyframes as _keyframes,
-  ThemeProvider as _ThemeProvider,
+  // ThemeProvider as _ThemeProvider,
   useTheme as _useTheme,
 } from 'styled-components'
 
@@ -11,5 +11,5 @@ export const createGlobalStyle = _createGlobalStyle
 export const css = _css
 export type ExecutionContext = _ExecutionContext
 export const keyframes = _keyframes
-export const ThemeProvider = _ThemeProvider
+// export const ThemeProvider = _ThemeProvider
 export const useTheme = _useTheme

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

@@ -11,11 +11,9 @@ import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import {useArrayProp} from '../../hooks'
-// import {styled} from '../../lib/styled'
 import {useTheme_v2} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Label} from '../label'
-// import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
 
 /**
  * @public
@@ -39,25 +37,6 @@ export interface AvatarProps {
   title?: string
 }
 
-// const Root = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
-//   responsiveAvatarSizeStyle,
-//   avatarStyle.root,
-// )
-
-// const Arrow = styled.div(avatarStyle.arrow)
-
-// const BgStroke = styled.ellipse(avatarStyle.bgStroke)
-
-// const Stroke = styled.ellipse(avatarStyle.stroke)
-
-// const Initials = styled.div(avatarStyle.initials)
-
-// const InitialsLabel = styled(Label)({
-//   color: 'inherit',
-// })
-
-// const Image = styled.svg(avatarStyle.image)
-
 /**
  * Avatars are used to represent people and other agents (e.g. bots).
  *

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

@@ -1,9 +1,9 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef, useMemo} from 'react'
+import {rem, _responsive, ThemeProps} from '../../_compat'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
 import {styled, css} from '../../lib/styled'
-import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {Label} from '../label'
 

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

@@ -1,9 +1,9 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {Children, cloneElement, forwardRef, isValidElement, useMemo} from 'react'
+import {rem, _responsive, ThemeProps} from '../../_compat'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
 import {styled, css} from '../../lib/styled'
-import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {AvatarCounter} from './avatarCounter'
 

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

@@ -1,6 +1,6 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../styles'
-import {focusRingStyle} from '../../styles/internal'
+import {rem, _responsive, ThemeProps} from '../../_compat'
+import {focusRingStyle} from '../../_compat/styles/internal'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
 export const avatarStyle = {

package/src/core/primitives/box/box.tsx

@@ -17,7 +17,8 @@ export interface BoxProps extends BoxStyleProps, GapStyleProps, PositionStylePro
  * @public
  */
 export const Box = forwardRef(function Box(
-  props: BoxProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'wrap' | 'width'>,
+  props: BoxProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'wrap' | 'width'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -43,6 +44,7 @@ export const Box = forwardRef(function Box(
     marginRight,
     marginBottom,
     marginLeft,
+    maxWidth,
     overflow,
     padding = 0,
     paddingX,
@@ -91,6 +93,7 @@ export const Box = forwardRef(function Box(
           marginRight,
           marginBottom,
           marginLeft,
+          maxWidth,
           padding,
           paddingX,
           paddingY,

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

@@ -1,5 +1,6 @@
 import {icons} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
+import {FontTextSize} from '@sanity/ui/theme'
 import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {
   WORKSHOP_BUTTON_MODE_OPTIONS,
@@ -32,7 +33,7 @@ export default function ButtonStory() {
     <Flex align="center" height="fill" justify="center">
       <Button
         disabled={disabled}
-        fontSize={fontSize}
+        fontSize={fontSize as FontTextSize}
         icon={icon && icons[icon]}
         iconRight={iconRight && icons[iconRight]}
         justify={justify}

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

@@ -1,6 +1,6 @@
 import {UploadIcon} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
-import {styled} from '../../../lib/styled'
+import {styled} from 'styled-components'
 
 const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
   & input {

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

@@ -1,5 +1,6 @@
 import {icons} from '@sanity/icons'
 import {Box, Button, Card, Container, Flex, Stack} from '@sanity/ui'
+import {FontTextSize} from '@sanity/ui/theme'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 import {
   WORKSHOP_BUTTON_MODE_OPTIONS,
@@ -33,7 +34,7 @@ export default function StackedStory() {
               {tones.map(([title, tone]) => (
                 <Button
                   disabled={disabled}
-                  fontSize={fontSize}
+                  fontSize={fontSize as FontTextSize}
                   icon={icon && icons[icon]}
                   iconRight={iconRight && icons[iconRight]}
                   justify={justify}

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

@@ -1,5 +1,5 @@
 import {Button, Flex} from '@sanity/ui'
-import {styled} from '../../../lib/styled'
+import {styled} from 'styled-components'
 
 const StyledButton1 = styled.a`
   &:hover {

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

@@ -1,5 +1,5 @@
 import {Button, Flex} from '@sanity/ui'
-import {styled} from '../../../lib/styled'
+import {styled} from 'styled-components'
 
 const StyledButton2 = styled(Button)<{$color?: boolean}>`
   &:hover {