@sanity/ui 0.38.0 → 0.38.2-next.14

package/package.json

@@ -1,58 +1,56 @@
 {
   "name": "@sanity/ui",
-  "version": "0.38.0",
+  "version": "0.38.2-next.14+4e7fc734",
   "sideEffects": false,
   "source": "./src/index.ts",
+  "module": "./dist/sanity-ui.js",
+  "types": "./dist/types/src/index.d.ts",
+  "main": "./dist/sanity-ui.cjs",
   "exports": {
     ".": {
-      "require": "./lib/sanity-ui.js",
-      "default": "./lib/sanity-ui.modern.js"
+      "source": "./src/index.ts",
+      "default": "./dist/sanity-ui.js",
+      "types": "./dist/types/src/index.d.ts",
+      "require": "./dist/sanity-ui.cjs"
     }
   },
-  "main": "./lib/sanity-ui.js",
-  "module": "./lib/sanity-ui.module.js",
-  "types": "./lib/dts/src/index.d.ts",
   "files": [
-    "lib",
+    "dist",
     "src"
   ],
   "license": "MIT",
   "scripts": {
-    "build": "run-s build:microbundle",
-    "build:microbundle": "microbundle --format modern,esm,cjs --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --no-compress --tsconfig tsconfig.lib.json",
-    "clean": "rimraf lib",
+    "build": "pkg build --tsconfig tsconfig.dist.json",
+    "clean": "rimraf dist",
     "lint": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx --quiet",
     "prebuild": "yarn clean",
     "test": "jest",
     "type-check": "tsc --build",
-    "watch": "run-p watch:*",
-    "watch:cjs": "tsc --preserveWatchOutput -w --module CommonJS --outDir lib/cjs --project tsconfig.lib.json --rootDir src --target ES5",
-    "watch:es": "tsc --preserveWatchOutput -w --module ES6 --outDir lib/esm --project tsconfig.lib.json --rootDir src --target ES6"
+    "watch": "pkg watch --tsconfig tsconfig.dist.json"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@popperjs/core": "^2.11.6",
-    "@reach/auto-id": "^0.17.0",
-    "@sanity/color": "^2.1.14",
-    "@sanity/icons": "^1.3.4",
-    "framer-motion": "6.3.0",
+    "@sanity/color": "2.1.16-next.14+4e7fc734",
+    "@sanity/icons": "1.3.6-next.14+4e7fc734",
+    "framer-motion": "^7.3.2",
     "popper-max-size-modifier": "^0.2.0",
-    "react-is": "^17.0.2",
+    "react-is": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.4.0",
     "@types/refractor": "^3.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "styled-components": "^5.3.5"
   },
   "peerDependencies": {
-    "react": "^16.9 || ^17 || ^18",
-    "react-dom": "^16.9 || ^17 || ^18",
+    "react": "^18",
+    "react-dom": "^18",
     "styled-components": "^5.2"
   },
   "repository": {
@@ -72,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f456393d5c6f1e09418af3eaaf2ca734a996523a"
+  "gitHead": "4e7fc73402390c60cb8b2f996bbce207465e9e90"
 }

package/src/__workshop__/color/overview.tsx

@@ -1,6 +1,6 @@
 import {black, ColorTints, ColorValue, COLOR_HUES, hues, white} from '@sanity/color'
 import {Box, Card, Code, Flex, Grid, Heading, Stack, useToast} from '@sanity/ui'
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {hexToRgb, rgbToHsl} from '../../theme'
 
 function ucfirst(str: string) {

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

@@ -10,7 +10,7 @@ import {
   Stack,
   Text,
 } from '@sanity/ui'
-import React, {useCallback, useEffect, useRef, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {countriesStore} from '../__mocks__/apiStore'
 
 export default function AsyncStory() {

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

@@ -7,7 +7,7 @@ import {
   Stack,
   Text,
 } from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {Popover} from '../../../primitives'
 import countries from '../__fixtures__/countries'
 import {AutocompleteProps} from '../autocomplete'

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

@@ -1,6 +1,6 @@
 import {Autocomplete, Box, Button, Card, Code, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,

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

@@ -2,7 +2,7 @@ import {Autocomplete, Box, Card, Container, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop'
 import {fireEvent} from '@testing-library/dom'
-import React, {useCallback, useMemo, useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {
   WORKSHOP_CARD_TONE_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,

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

@@ -1,5 +1,5 @@
 import {Autocomplete, Box, Button, Card, Code, Stack} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 
 export default function FocusAndBlurStory() {
   const [value, setValue] = useState('')

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

@@ -18,7 +18,7 @@ import {
   useToast,
 } from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {countriesStore} from '../__mocks__/apiStore'
 
 export default function Fullscreen() {

package/src/components/autocomplete/autocomplete.tsx

@@ -1,5 +1,5 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import React, {
+import {
   cloneElement,
   forwardRef,
   useCallback,

package/src/components/autocomplete/autocompleteOption.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {_isEnterToClickElement} from '../../helpers'
 
 export interface AutocompleteOptionProps {

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

@@ -1,6 +1,5 @@
 import {Breadcrumbs, Flex, Text} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 
 const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
   '(none)': 0,

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,12 +1,4 @@
-import React, {
-  Children,
-  forwardRef,
-  Fragment,
-  isValidElement,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react'
+import {Children, forwardRef, Fragment, isValidElement, useCallback, useMemo, useState} from 'react'
 import {useArrayProp, useClickOutside} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
 import {ExpandButton, Root} from './breadcrumbs.styles'

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

@@ -1,6 +1,5 @@
 import {Box, Button, Dialog, Text} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function AutoFocusStory() {
   const autoFocus = useBoolean('Auto-focus', true, 'Props')

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

@@ -1,6 +1,5 @@
 import {Box, Card, Code, Dialog, Layer, LayerProvider, useLayer} from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function LayeringStory() {
   return (

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

@@ -1,5 +1,5 @@
 import {Box, Button, Dialog, LayerProvider, Menu, MenuButton, MenuItem} from '@sanity/ui'
-import React, {useState} from 'react'
+import {useState} from 'react'
 
 export default function NestedStory() {
   const [open1] = useState(true)

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

@@ -1,6 +1,6 @@
 import {Box, Dialog, LayerProvider, Text} from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
-import React, {useEffect, useRef} from 'react'
+import {useEffect, useRef} from 'react'
 
 export default function OnScrollStory() {
   const ref = useRef<HTMLDivElement | null>(null)

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

@@ -1,7 +1,6 @@
 import {ArrowDownIcon, ArrowUpIcon} from '@sanity/icons'
 import {Box, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PositionStory() {

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

@@ -1,6 +1,6 @@
 import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React, {useCallback, useRef, useState} from 'react'
+import {useCallback, useRef, useState} from 'react'
 import {WORKSHOP_WIDTH_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PropsStory() {

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

@@ -1,5 +1,4 @@
 import {Dialog, DialogProvider} from '@sanity/ui'
-import React from 'react'
 
 export default function ProviderStory() {
   return (

package/src/components/dialog/dialog.tsx

@@ -1,5 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
-import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {focusFirstDescendant, focusLastDescendant} from '../../helpers'
 import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'

package/src/components/dialog/dialogProvider.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import {useMemo} from 'react'
 import {DialogPosition} from '../../types'
 import {DialogContext, DialogContextValue} from './dialogContext'
 

package/src/components/hotkeys/__workshop__/plain.tsx

@@ -1,5 +1,4 @@
 import {Flex, Hotkeys} from '@sanity/ui'
-import React from 'react'
 
 export default function PlainStory() {
   return (

package/src/components/hotkeys/hotkeys.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'

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

@@ -1,5 +1,5 @@
 import {Button, Flex, Menu, MenuButton, MenuItem, Text} from '@sanity/ui'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,

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

@@ -1,6 +1,6 @@
 import {AddIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuItem, Stack} from '@sanity/ui'
-import React, {useRef} from 'react'
+import {useRef} from 'react'
 
 export default function ClosableMenuButtonStory() {
   const ref = useRef<HTMLButtonElement | null>(null)

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

@@ -11,7 +11,7 @@ import {
   SelectableTone,
   Text,
 } from '@sanity/ui'
-import React, {useState} from 'react'
+import {useState} from 'react'
 import {MenuButtonProps} from '../menuButton'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {

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

@@ -1,5 +1,4 @@
 import {Box, Card, LayerProvider, Menu, MenuDivider, MenuItem, Stack, Text} from '@sanity/ui'
-import React from 'react'
 
 export default function CustomMenuItemStory() {
   return (

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

@@ -1,7 +1,6 @@
 import {SelectIcon} from '@sanity/icons'
 import {Button, Flex, Menu, MenuButton, MenuItem} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function DisableFocusOnCloseStory() {
   const disableRestoreFocusOnClose = useBoolean('Disable restore focus on close', false)

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

@@ -11,7 +11,6 @@ import {
   MenuItem,
 } from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function GroupsStory() {
   return (

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

@@ -11,7 +11,6 @@ import {
   MenuItem,
 } from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function MenuButtonStory() {

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

@@ -18,7 +18,6 @@ import {
   MenuGroup,
   MenuItem,
 } from '@sanity/ui'
-import React from 'react'
 
 export default function MenuGroupRightStory() {
   return (

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

@@ -1,5 +1,4 @@
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem, Stack} from '@sanity/ui'
-import React from 'react'
 
 export default function NestedMenuItems() {
   return (

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

@@ -1,5 +1,5 @@
 import {Box, Button, Menu, MenuButton, MenuItem, Stack, useToast} from '@sanity/ui'
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 
 export default function OnCloseMenuButton() {
   const {push} = useToast()

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

@@ -1,6 +1,6 @@
 import {CheckmarkIcon, ClockIcon, ExpandIcon, SearchIcon} from '@sanity/icons'
 import {Box, Button, Code, Menu, MenuButton, MenuDivider, MenuItem, Stack} from '@sanity/ui'
-import React, {useState} from 'react'
+import {useState} from 'react'
 
 export default function SelectedItemStory() {
   const [selectedIndex, setSelectedIndex] = useState(0)

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

@@ -1,7 +1,6 @@
 import {SearchIcon} from '@sanity/icons'
 import {Box, Card, LayerProvider, Menu, MenuItem} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function TonesStory() {

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

@@ -1,5 +1,4 @@
 import {Box, Button, Menu, MenuButton, MenuItem, Stack} from '@sanity/ui'
-import React from 'react'
 
 export default function WithoutArrowStory() {
   return (

package/src/components/menu/menu.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-import React, {useCallback, useMemo} from 'react'
+import {useCallback, useMemo} from 'react'
 import {render} from '../../../test'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'

package/src/components/menu/menu.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useCallback, useEffect, useMemo} from 'react'
+import {forwardRef, useCallback, useEffect, useMemo} from 'react'
 import styled from 'styled-components'
 import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'

package/src/components/menu/menuButton.tsx

@@ -1,12 +1,4 @@
-import React, {
-  cloneElement,
-  forwardRef,
-  useCallback,
-  useMemo,
-  useState,
-  useEffect,
-  useRef,
-} from 'react'
+import {cloneElement, forwardRef, useCallback, useMemo, useState, useEffect, useRef} from 'react'
 import {isElement} from 'react-is'
 import {Popover, PopoverProps} from '../../primitives'
 import {ThemeColorSchemeKey} from '../../theme'

package/src/components/menu/menuGroup.tsx

@@ -1,5 +1,5 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import React, {createElement, isValidElement, useCallback, useEffect, useRef, useState} from 'react'
+import {createElement, isValidElement, useCallback, useEffect, useRef, useState} from 'react'
 import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'

package/src/components/menu/menuItem.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   createElement,
   forwardRef,
   isValidElement,

package/src/components/menu/useMenuController.ts

@@ -33,7 +33,7 @@ export function useMenuController(props: {
   const activeElement = elementsRef.current[activeIndex] || null
   const mounted = Boolean(rootElement)
 
-  const setActiveIndex = useCallback((nextActiveIndex) => {
+  const setActiveIndex = useCallback((nextActiveIndex: number) => {
     _setActiveIndex(nextActiveIndex)
     activeIndexRef.current = nextActiveIndex
   }, [])

package/src/components/skeleton/__workshop__/delay.tsx

@@ -12,7 +12,6 @@ import {
   TextSkeleton,
 } from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function SkeletonDelayStory() {

package/src/components/skeleton/__workshop__/skeleton.tsx

@@ -12,7 +12,6 @@ import {
   TextSkeleton,
 } from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function SkeletonStory() {

package/src/components/skeleton/skeleton.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useEffect, useState} from 'react'
+import {forwardRef, useEffect, useState} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box} from '../../primitives'

package/src/components/skeleton/textSkeleton.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {_responsive} from '../../styles'

package/src/components/tab/__workshop__/example.tsx

@@ -1,6 +1,6 @@
 import {OkHandIcon, RocketIcon, SunIcon} from '@sanity/icons'
 import {Box, Card, Tab, TabList, TabPanel, Text} from '@sanity/ui'
-import React, {useState} from 'react'
+import {useState} from 'react'
 
 export default function ExampleStory() {
   const [tab, setTab] = useState('foo')

package/src/components/tab/tab.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useCallback, useEffect, useRef} from 'react'
+import {forwardRef, useCallback, useEffect, useRef} from 'react'
 import {useForwardedRef} from '../../hooks'
 import {Button} from '../../primitives'
 import {ButtonTone} from '../../types'

package/src/components/tab/tabList.tsx

@@ -1,4 +1,4 @@
-import React, {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
+import {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
 import {Inline, InlineProps} from '../../primitives'
 
 /**

package/src/components/tab/tabPanel.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import {Box, BoxProps} from '../../primitives'
 
 /**

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

@@ -1,5 +1,4 @@
 import {Box, Button, Inline, ToastProvider, useToast} from '@sanity/ui'
-import React from 'react'
 
 export default function HookStory() {
   const toast = useToast()

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

@@ -1,6 +1,5 @@
 import {Box, Container, Toast} from '@sanity/ui'
 import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_TOAST_STATUS_OPTIONS} from '../../../__workshop__/constants'
 
 export default function ToastStory() {

package/src/components/toast/toast.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {render} from '../../../test'
 import {ToastContext} from './toastContext'
 import {ToastContextValue} from './types'

package/src/components/toast/toast.tsx

@@ -1,5 +1,4 @@
 import {CloseIcon} from '@sanity/icons'
-import React from 'react'
 import styled from 'styled-components'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
 import {ThemeColorToneKey} from '../../theme'

package/src/components/toast/toastProvider.tsx

@@ -1,5 +1,5 @@
 import {AnimatePresence, motion} from 'framer-motion'
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {Box} from '../../primitives'
 import {Layer} from '../../utils'

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

@@ -1,7 +1,7 @@
 import {LinkIcon} from '@sanity/icons'
 import {Box, Tree, TreeItem} from '@sanity/ui'
 import {usePerfTest} from '@sanity/ui-workshop'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {perfTests} from './basic.perf'
 
 export default function BasicStory() {

package/src/components/tree/tree.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {useForwardedRef} from '../../hooks'
 import {Stack} from '../../primitives'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'

package/src/components/tree/treeGroup.tsx

@@ -1,4 +1,4 @@
-import React, {memo} from 'react'
+import {memo} from 'react'
 import {Stack} from '../../primitives'
 import {useTree} from './useTree'
 

package/src/components/tree/treeItem.tsx

@@ -1,6 +1,5 @@
-import {useId} from '@reach/auto-id'
 import {ToggleArrowRightIcon} from '@sanity/icons'
-import React, {createElement, memo, useCallback, useEffect, useMemo, useRef} from 'react'
+import {createElement, memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {Box, Flex, Text} from '../../primitives'
 import {ThemeFontWeightKey} from '../../theme'
@@ -64,7 +63,8 @@ export const TreeItem = memo(function TreeItem(
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
-  const id = useId(idProp) || idProp
+  const _id = useId()
+  const id = idProp || _id
   const itemPath = useMemo(() => path.concat([id || '']), [id, path])
   const itemKey = itemPath.join('/')
   const itemState = tree.state[itemKey]

package/src/hooks/useArrayProp.ts

@@ -1,13 +1,14 @@
 import {useMemo} from 'react'
 import {_getArrayProp} from '../styles'
 
-export type Primitive = string | number | boolean | undefined | null
+/** @beta */
+export type ArrayPropPrimitive = string | number | boolean | undefined | null
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function useArrayProp<T extends Primitive = Primitive>(
+export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[]
 ): T[] {

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

@@ -1,6 +1,5 @@
 import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
 import {useMemo, useState} from 'react'
-import React from 'react'
 import {Grid} from '../../../primitives'
 
 export default function ExampleStory() {