@sanity/ui 4.0.0-beta.1 → 4.0.0-beta.2

package/exports/index.ts

@@ -1,3 +1,11 @@
+// re-export css (types, constants and vars)
+export type {ResponsiveProp} from '@sanity/ui-css'
+export {BREAKPOINTS, vars} from '@sanity/ui-css'
+
+// re-export tokens (types and constants)
+export type * from '@sanity/ui-tokens'
+export * from '@sanity/ui-tokens/constants'
+
 // components
 export * from '../src/components/autocomplete/Autocomplete'
 export * from '../src/components/autocomplete/types'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.2",
   "keywords": [
     "react",
     "ui",
@@ -30,29 +30,11 @@
       "source": "./exports/index.ts",
       "default": "./dist/index.js"
     },
-    "./css": {
-      "source": "./exports/css.ts",
-      "default": "./dist/css.js"
-    },
-    "./css/index.css": "./dist/css/index.css",
-    "./package.json": "./package.json",
-    "./tokens": {
-      "source": "./exports/tokens.ts",
-      "default": "./dist/tokens.js"
-    }
+    "./index.css": "./dist/index.css",
+    "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "css": [
-        "./dist/css.d.ts"
-      ],
-      "tokens": [
-        "./dist/tokens.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "exports",
@@ -67,8 +49,8 @@
     "csstype": "^3.2.3",
     "motion": "^12.38.0",
     "react-refractor": "^4.0.0",
-    "@sanity/ui-tokens": "1.0.0-beta.1",
-    "@sanity/ui-css": "1.0.0-beta.1"
+    "@sanity/ui-css": "1.0.0-beta.2",
+    "@sanity/ui-tokens": "1.0.0-beta.2"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",

package/src/components/autocomplete/__workshop__/Custom.tsx

@@ -1,6 +1,6 @@
 import {SearchIcon} from '@sanity/icons'
 import {Autocomplete, Box, Button, Code, Selectable, Stack, Text} from '@sanity/ui'
-import {FONT_TEXT_SIZE, RADIUS, type Radius, SPACE} from '@sanity/ui/tokens'
+import {FONT_TEXT_SIZE, RADIUS, type Radius, SPACE} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 

package/src/components/autocomplete/__workshop__/Example.tsx

@@ -1,6 +1,5 @@
 import {SearchIcon} from '@sanity/icons'
-import {Autocomplete, Text} from '@sanity/ui'
-import {FONT_TEXT_SIZE, RADIUS, SPACE} from '@sanity/ui/tokens'
+import {Autocomplete, FONT_TEXT_SIZE, RADIUS, SPACE, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {type PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'

package/src/components/breadcrumbs/__workshop__/Example.tsx

@@ -1,6 +1,5 @@
 import {EllipsisHorizontalIcon} from '@sanity/icons'
-import {Box, Breadcrumbs, Button, Flex, Text} from '@sanity/ui'
-import {SPACE} from '@sanity/ui/tokens'
+import {Box, Breadcrumbs, Button, Flex, SPACE, Text} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
 import {CardWrapper} from '$workshop'

package/src/components/dialog/__workshop__/Props.tsx

@@ -1,5 +1,14 @@
-import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
-import {CARD_TONES, COLOR_SCHEMES, CONTAINER} from '@sanity/ui/tokens'
+import {
+  Box,
+  Button,
+  CARD_TONES,
+  COLOR_SCHEMES,
+  CONTAINER,
+  Dialog,
+  LayerProvider,
+  Stack,
+  Text,
+} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
 

package/src/components/menu/__workshop__/ClosableMenuButton.tsx

@@ -1,6 +1,6 @@
 import {AddIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, type MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
+import {vars} from '@sanity/ui'
 import {useRef} from 'react'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {

package/src/components/menu/__workshop__/ConstrainedInBoundary.tsx

@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   Card,
+  type ElementTone,
   Flex,
   Menu,
   MenuButton,
@@ -11,7 +12,6 @@ import {
   MenuItem,
   Text,
 } from '@sanity/ui'
-import type {ElementTone} from '@sanity/ui/tokens'
 import {useState} from 'react'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {

package/src/components/menu/__workshop__/DataProps.tsx

@@ -1,5 +1,4 @@
-import {Menu, MenuItem, Text} from '@sanity/ui'
-import {ELEMENT_TONES} from '@sanity/ui/tokens'
+import {ELEMENT_TONES, Menu, MenuItem, Text} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
 import {CardWrapper} from '$workshop'

package/src/components/menu/__workshop__/MenuButton.tsx

@@ -11,7 +11,7 @@ import {
   MenuDivider,
   MenuItem,
 } from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/tokens'
+import {CARD_TONES} from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useMemo} from 'react'
 

package/src/components/menu/__workshop__/Tones.tsx

@@ -1,6 +1,5 @@
 import {CubeIcon} from '@sanity/icons'
-import {Menu, MenuItem} from '@sanity/ui'
-import {ELEMENT_TONES} from '@sanity/ui/tokens'
+import {ELEMENT_TONES, Menu, MenuItem} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
 import {CardWrapper} from '$workshop'

package/src/components/tree/__workshop__/Basic.tsx

@@ -1,6 +1,5 @@
 import {LinkIcon} from '@sanity/icons'
-import {Box, Tree, TreeItem} from '@sanity/ui'
-import {SPACE} from '@sanity/ui/tokens'
+import {Box, SPACE, Tree, TreeItem} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {useCallback, useState} from 'react'

package/src/primitives/avatar/__workshop__/AsButton.tsx

@@ -1,5 +1,4 @@
-import {Avatar, Flex} from '@sanity/ui'
-import {AVATAR_SIZE} from '@sanity/ui/tokens'
+import {Avatar, AVATAR_SIZE, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
 export default function AsButtonStory(): React.JSX.Element {

package/src/primitives/avatar/__workshop__/PropsStory.tsx

@@ -1,5 +1,4 @@
-import {Avatar, Box} from '@sanity/ui'
-import {AVATAR_SIZE} from '@sanity/ui/tokens'
+import {Avatar, AVATAR_SIZE, Box} from '@sanity/ui'
 import {useBoolean, useSelect, useString} from '@sanity/ui-workshop'
 
 import {WORKSHOP_AVATAR_SRC} from '$workshop'

package/src/primitives/avatar/__workshop__/Stack.tsx

@@ -1,5 +1,4 @@
-import {Avatar, AvatarCounter, AvatarStack, Box} from '@sanity/ui'
-import {AVATAR_SIZE} from '@sanity/ui/tokens'
+import {Avatar, AVATAR_SIZE, AvatarCounter, AvatarStack, Box} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
 import {CardWrapper} from '$workshop'

package/src/primitives/badge/__workshop__/Props.tsx

@@ -1,5 +1,4 @@
-import {Badge, Flex} from '@sanity/ui'
-import {ELEMENT_TONES, RADIUS, SPACE} from '@sanity/ui/tokens'
+import {Badge, ELEMENT_TONES, Flex, RADIUS, SPACE} from '@sanity/ui'
 import {useAction, useSelect, useText} from '@sanity/ui-workshop'
 
 export default function PropsStory() {

package/src/primitives/badge/__workshop__/Tones.tsx

@@ -1,5 +1,4 @@
-import {Badge, Flex} from '@sanity/ui'
-import {ELEMENT_TONES} from '@sanity/ui/tokens'
+import {Badge, ELEMENT_TONES, Flex} from '@sanity/ui'
 
 export default function Tones(): React.JSX.Element {
   return (

package/src/primitives/box/__workshop__/Props.tsx

@@ -1,5 +1,5 @@
 import {Box, type BoxProps, Text} from '@sanity/ui'
-import {BORDER_STYLE, BORDER_WIDTH, RADIUS, SHADOW, SPACE} from '@sanity/ui/tokens'
+import {BORDER_STYLE, BORDER_WIDTH, RADIUS, SHADOW, SPACE} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {CardWrapper} from '$workshop'

package/src/primitives/box/__workshop__/Responsive.tsx

@@ -1,5 +1,4 @@
-import {Box, Text} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
+import {Box, Text, vars} from '@sanity/ui'
 
 export default function ResponsiveStory(): React.JSX.Element {
   return (

package/src/primitives/button/__workshop__/Custom.tsx

@@ -1,5 +1,15 @@
-import {Avatar, Badge, Button, Flex, Grid, Hotkeys, Stack, Text} from '@sanity/ui'
-import {BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui/tokens'
+import {
+  Avatar,
+  Badge,
+  Button,
+  BUTTON_MODES,
+  ELEMENT_TONES,
+  Flex,
+  Grid,
+  Hotkeys,
+  Stack,
+  Text,
+} from '@sanity/ui'
 
 export default function CustomStory(): React.JSX.Element {
   return (

package/src/primitives/button/__workshop__/CustomIcons.tsx

@@ -1,6 +1,5 @@
 import {RocketIcon} from '@sanity/icons'
-import {Button, Flex} from '@sanity/ui'
-import {BUTTON_MODES} from '@sanity/ui/tokens'
+import {Button, BUTTON_MODES, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
 import {CardWrapper} from '$workshop'

package/src/primitives/button/__workshop__/DataProps.tsx

@@ -1,5 +1,4 @@
-import {Button} from '@sanity/ui'
-import {BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui/tokens'
+import {Button, BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
 import {CardWrapper} from '$workshop'

package/src/primitives/button/__workshop__/Props.tsx

@@ -1,6 +1,6 @@
 import {icons} from '@sanity/icons'
 import {Button, Flex, type TooltipProps} from '@sanity/ui'
-import {BUTTON_MODES, ELEMENT_TONES, FONT_TEXT_SIZE, FONT_WEIGHT, SPACE} from '@sanity/ui/tokens'
+import {BUTTON_MODES, ELEMENT_TONES, FONT_TEXT_SIZE, FONT_WEIGHT, SPACE} from '@sanity/ui'
 import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 
 import {

package/src/primitives/button/__workshop__/Stacked.tsx

@@ -1,6 +1,15 @@
 import {icons} from '@sanity/icons'
-import {Box, Button, Container, Flex, Stack} from '@sanity/ui'
-import {BUTTON_MODES, ELEMENT_TONES, FONT_TEXT_SIZE, SPACE} from '@sanity/ui/tokens'
+import {
+  Box,
+  Button,
+  BUTTON_MODES,
+  Container,
+  ELEMENT_TONES,
+  Flex,
+  FONT_TEXT_SIZE,
+  SPACE,
+  Stack,
+} from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {CardWrapper, WORKSHOP_FLEX_JUSTIFY_OPTIONS, WORKSHOP_ICON_SYMBOL_OPTIONS} from '$workshop'

package/src/primitives/card/__workshop__/AsButton.tsx

@@ -1,5 +1,4 @@
-import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/tokens'
+import {Box, Card, CARD_TONES, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
 
 export default function AsButtonStory(): React.JSX.Element {
   return (

package/src/primitives/card/__workshop__/Checkered.tsx

@@ -1,5 +1,4 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/tokens'
+import {Card, CARD_TONES, Flex, Stack, Text} from '@sanity/ui'
 
 export default function CheckeredStory(): React.JSX.Element {
   return (

package/src/primitives/card/__workshop__/Props.tsx

@@ -1,5 +1,15 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {BG_PATTERNS, BORDER_WIDTH, CARD_TONES, RADIUS, SHADOW, SPACE} from '@sanity/ui/tokens'
+import {
+  BG_PATTERNS,
+  BORDER_WIDTH,
+  Card,
+  CARD_TONES,
+  Flex,
+  RADIUS,
+  SHADOW,
+  SPACE,
+  Stack,
+  Text,
+} from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_CARD_AS_OPTIONS} from '$workshop'

package/src/primitives/card/__workshop__/Tones.tsx

@@ -1,5 +1,4 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/tokens'
+import {Card, CARD_TONES, Container, Flex, Stack, Text} from '@sanity/ui'
 
 export default function TonesStory(): React.JSX.Element {
   return (

package/src/primitives/checkbox/__workshop__/Tones.tsx

@@ -1,5 +1,4 @@
-import {Card, Checkbox, Flex, Stack, Text} from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/tokens'
+import {Card, CARD_TONES, Checkbox, Flex, Stack, Text} from '@sanity/ui'
 
 export default function MultipleTonesStory(): React.JSX.Element {
   return (

package/src/primitives/code/__workshop__/OpticalAlignment.tsx

@@ -1,6 +1,5 @@
 import {CropIcon} from '@sanity/icons'
-import {Box, Code, Stack} from '@sanity/ui'
-import {FONT_CODE_SIZE} from '@sanity/ui/tokens'
+import {Box, Code, FONT_CODE_SIZE, Stack} from '@sanity/ui'
 
 import {CardWrapper} from '$workshop'
 

package/src/primitives/code/__workshop__/Props.tsx

@@ -1,5 +1,4 @@
-import {Box, Code} from '@sanity/ui'
-import {FONT_CODE_SIZE} from '@sanity/ui/tokens'
+import {Box, Code, FONT_CODE_SIZE} from '@sanity/ui'
 import {useSelect, useText} from '@sanity/ui-workshop'
 
 import {WORKSHOP_CODE_LANGUAGE_OPTIONS} from '$workshop'

package/src/primitives/container/__workshop__/Example.tsx

@@ -1,5 +1,4 @@
-import {Container, Flex, Text} from '@sanity/ui'
-import {CONTAINER_SCALE} from '@sanity/ui/tokens'
+import {Container, CONTAINER_SCALE, Flex, Text} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
 export default function PlainStory(): React.JSX.Element {

package/src/primitives/heading/__workshop__/OpticalAlignment.tsx

@@ -1,6 +1,5 @@
 import {CropIcon} from '@sanity/icons'
-import {Box, Heading, Stack} from '@sanity/ui'
-import {FONT_HEADING_SIZE} from '@sanity/ui/tokens'
+import {Box, FONT_HEADING_SIZE, Heading, Stack} from '@sanity/ui'
 
 import {CardWrapper} from '$workshop'
 

package/src/primitives/heading/__workshop__/Plain.tsx

@@ -1,5 +1,4 @@
-import {Flex, Heading} from '@sanity/ui'
-import {FONT_HEADING_SIZE} from '@sanity/ui/tokens'
+import {Flex, FONT_HEADING_SIZE, Heading} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 
 import {WORKSHOP_FONT_WEIGHT_OPTIONS, WORKSHOP_TEXT_OVERFLOW_OPTIONS} from '$workshop'

package/src/primitives/inline/__workshop__/Plain.tsx

@@ -1,5 +1,4 @@
-import {Card, Flex, Inline, Text} from '@sanity/ui'
-import {SPACE} from '@sanity/ui/tokens'
+import {Card, Flex, Inline, SPACE, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
 
 export default function PlainStory(): React.JSX.Element {

package/src/primitives/label/__workshop__/OpticalAlignment.tsx

@@ -1,6 +1,5 @@
 import {CropIcon} from '@sanity/icons'
-import {Box, Label, Stack} from '@sanity/ui'
-import {FONT_LABEL_SIZE} from '@sanity/ui/tokens'
+import {Box, FONT_LABEL_SIZE, Label, Stack} from '@sanity/ui'
 
 import {CardWrapper} from '$workshop'
 

package/src/primitives/label/__workshop__/Plain.tsx

@@ -1,5 +1,4 @@
-import {Container, Flex, Label} from '@sanity/ui'
-import {FONT_TEXT_SIZE} from '@sanity/ui/tokens'
+import {Container, Flex, FONT_TEXT_SIZE, Label} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 
 import {

package/src/primitives/popover/__workshop__/AlignedStory.tsx

@@ -1,6 +1,5 @@
 import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Button, Card, Flex, Popover, Text, useClickOutsideEvent} from '@sanity/ui'
-import {CONTAINER} from '@sanity/ui/tokens'
+import {Button, Card, CONTAINER, Flex, Popover, Text, useClickOutsideEvent} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
 

package/src/primitives/popover/__workshop__/PlainStory.tsx

@@ -1,5 +1,4 @@
-import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
-import {CONTAINER, RADIUS, SPACE} from '@sanity/ui/tokens'
+import {Button, Card, CONTAINER, Popover, PortalProvider, RADIUS, SPACE, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useState} from 'react'
 

package/src/primitives/popover/__workshop__/RecursiveStory.tsx

@@ -1,5 +1,5 @@
 import {Button, Flex, LayerProvider, type Placement, Popover, useLayer} from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/tokens'
+import {CARD_TONES} from '@sanity/ui'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 export default function RecursiveStory(): React.JSX.Element {

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

@@ -2,6 +2,8 @@ import {
   BoundaryElementProvider,
   Box,
   Card,
+  CARD_TONES,
+  type CardTone,
   Flex,
   Popover,
   type PopoverProps,
@@ -9,7 +11,6 @@ import {
   Stack,
   Text,
 } from '@sanity/ui'
-import {CARD_TONES, type CardTone} from '@sanity/ui/tokens'
 import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useRef, useState} from 'react'
 

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

@@ -7,7 +7,7 @@ import {
   PortalProvider,
   Text,
 } from '@sanity/ui'
-import {CONTAINER, RADIUS} from '@sanity/ui/tokens'
+import {CONTAINER, RADIUS} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useRef, useState} from 'react'
 

package/src/primitives/select/__workshop__/Plain.tsx

@@ -1,5 +1,4 @@
-import {Select, Stack, Text} from '@sanity/ui'
-import {FONT_TEXT_SIZE, RADIUS} from '@sanity/ui/tokens'
+import {FONT_TEXT_SIZE, RADIUS, Select, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {CardWrapper} from '$workshop'

package/src/primitives/skeleton/__workshop__/Delay.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   Card,
+  CARD_TONES,
   CodeSkeleton,
   Container,
   Flex,
@@ -11,7 +12,6 @@ import {
   Text,
   TextSkeleton,
 } from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/tokens'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 export default function SkeletonDelayStory(): React.JSX.Element {

package/src/primitives/skeleton/__workshop__/Skeleton.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   Card,
+  CARD_TONES,
   CodeSkeleton,
   Container,
   Flex,
@@ -11,7 +12,6 @@ import {
   Stack,
   TextSkeleton,
 } from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/tokens'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 export default function SkeletonStory(): React.JSX.Element {

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

@@ -1,5 +1,4 @@
-import {Flex, Spinner} from '@sanity/ui'
-import {FONT_TEXT_SIZE} from '@sanity/ui/tokens'
+import {Flex, FONT_TEXT_SIZE, Spinner} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 export default function Props(): React.JSX.Element {

package/src/primitives/stack/__workshop__/Plain.tsx

@@ -1,5 +1,4 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {SPACE} from '@sanity/ui/tokens'
+import {Card, Container, Flex, SPACE, Stack, Text} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
 export default function PlainStory(): React.JSX.Element {

package/src/primitives/text/__workshop__/Example.tsx

@@ -1,5 +1,4 @@
-import {Text} from '@sanity/ui'
-import {FONT_TEXT_SIZE} from '@sanity/ui/tokens'
+import {FONT_TEXT_SIZE, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 
 import {

package/src/primitives/text/__workshop__/OpticalAlignment.tsx

@@ -1,6 +1,5 @@
 import {CropIcon} from '@sanity/icons'
-import {Box, Stack, Text} from '@sanity/ui'
-import {FONT_TEXT_SIZE} from '@sanity/ui/tokens'
+import {Box, FONT_TEXT_SIZE, Stack, Text} from '@sanity/ui'
 
 import {CardWrapper} from '$workshop'
 

package/src/primitives/textArea/__workshop__/Plain.tsx

@@ -1,5 +1,4 @@
-import {Stack, Text, TextArea} from '@sanity/ui'
-import {FONT_TEXT_SIZE, RADIUS, SPACE} from '@sanity/ui/tokens'
+import {FONT_TEXT_SIZE, RADIUS, SPACE, Stack, Text, TextArea} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useState} from 'react'
 

package/src/primitives/textInput/__workshop__/Plain.tsx

@@ -1,6 +1,5 @@
 import {icons} from '@sanity/icons'
-import {Box, Stack, Text, TextInput} from '@sanity/ui'
-import {FONT_TEXT_SIZE, RADIUS, SPACE} from '@sanity/ui/tokens'
+import {Box, FONT_TEXT_SIZE, RADIUS, SPACE, Stack, Text, TextInput} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {type PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'

package/src/primitives/textInput/__workshop__/Tones.tsx

@@ -1,5 +1,4 @@
-import {Box, Card, Text, TextInput} from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/tokens'
+import {Box, Card, CARD_TONES, Text, TextInput} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
 import {CardWrapper} from '$workshop'

package/src/primitives/tooltip/__workshop__/Props.tsx

@@ -1,5 +1,13 @@
-import {Button, Card, Stack, Text, Tooltip, TooltipDelayGroupProvider} from '@sanity/ui'
-import {SHADOW, SPACE} from '@sanity/ui/tokens'
+import {
+  Button,
+  Card,
+  SHADOW,
+  SPACE,
+  Stack,
+  Text,
+  Tooltip,
+  TooltipDelayGroupProvider,
+} from '@sanity/ui'
 import {useBoolean, useNumber, useSelect, useText} from '@sanity/ui-workshop'
 
 import {CardWrapper, WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'

package/src/utils/elementQuery/__workshop__/styles.css.ts

@@ -1,4 +1,4 @@
-import {vars} from '@sanity/ui/css'
+import {vars} from '@sanity/ui'
 import {style} from '@vanilla-extract/css'
 
 export const testCard: string = style({

package/dist/css.d.ts

@@ -1,11 +0,0 @@
-import {BREAKPOINTS} from '@sanity/ui-css'
-import {ResponsiveProp} from '@sanity/ui-css'
-import {vars} from '@sanity/ui-css'
-
-export {BREAKPOINTS}
-
-export {ResponsiveProp}
-
-export {vars}
-
-export {}

package/dist/css.js

@@ -1,7 +0,0 @@
-import { BREAKPOINTS, vars } from "@sanity/ui-css";
-import "@sanity/ui-tokens/constants";
-export {
-  BREAKPOINTS,
-  vars
-};
-//# sourceMappingURL=css.js.map

package/dist/css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/tokens.d.ts

@@ -1,4 +0,0 @@
-export * from '@sanity/ui-tokens'
-export * from '@sanity/ui-tokens/constants'
-
-export {}

package/dist/tokens.js

@@ -1,2 +0,0 @@
-export * from "@sanity/ui-tokens/constants";
-//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}