@sanity/ui 4.0.0-static.4 → 4.0.0-static.41

package/src/core/primitives/textInput/{textInput.tsx → TextInput.tsx}

@@ -23,13 +23,13 @@ import {
 import {isValidElementType} from 'react-is'
 
 import {EMPTY_RECORD} from '../../constants'
+import {_getResponsiveProp} from '../../helpers/props'
 import {useCustomValidity} from '../../hooks/useCustomValidity'
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {isRecord} from '../../lib/isRecord'
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
-import {Button, type ButtonProps} from '../button/button'
-import {Text} from '../text/text'
+import {Box} from '../box/Box'
+import {Button, type ButtonProps} from '../button/Button'
+import {Text} from '../text/Text'
 
 /** @public */
 export const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
@@ -86,6 +86,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     className,
     clearButton,
     disabled = false,
+    flex,
     fontSize = 2,
     gap = 3,
     icon: IconComponent,
@@ -99,14 +100,14 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     suffix,
     customValidity,
     type = 'text',
-    weight: _width, // eslint-disable-line @typescript-eslint/no-unused-vars
+    weight: _width,
     width,
     ...rest
   } = props as TextInputProps<typeof DEFAULT_TEXT_INPUT_ELEMENT>
 
   const ref = useRef<HTMLInputElement | null>(null)
 
-  const responsivePadding = useResponsiveProp(padding)
+  const responsivePadding = useMemo(() => _getResponsiveProp(padding), [padding])
 
   const withClearButton = Boolean(clearButton)
 
@@ -136,45 +137,16 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     [onClear, ref],
   )
 
-  const clearButtonBoxPadding = useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(responsivePadding).map(([key, value]) => {
-        if (value === 0) return [key, 0]
-        if (value === 1) return [key, 1]
-        if (value === 2) return [key, 1]
-
-        return [key, typeof value === 'number' ? value - 2 : 0]
-      }),
-    ) as ResponsiveProp<Space>
-  }, [responsivePadding])
-
-  const clearButtonPadding = useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(responsivePadding).map(([key, value]) => {
-        if (value === 0) return [key, 0]
-        if (value === 1) return [key, 0]
-        if (value === 2) return [key, 1]
-
-        return [key, typeof value === 'number' ? value - 1 : 0]
-      }),
-    ) as ResponsiveProp<Space>
-  }, [responsivePadding])
-
-  const clearButtonProps: TextInputClearButtonProps = useMemo(
-    () => (isRecord(clearButton) ? clearButton : EMPTY_RECORD),
-    [clearButton],
-  )
-
   return (
-    <Box
-      alignItems="center"
+    <span
       className={textInput({
         className,
         border,
+        flex,
         fontSize,
         padding,
         radius,
-        gap: gap,
+        gap,
         width,
       })}
       data-icon-left={IconComponent ? '' : undefined}
@@ -184,15 +156,14 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
       data-read-only={!disabled && readOnly ? '' : undefined}
       data-suffix={suffix ? '' : undefined}
       data-ui="TextInput"
-      display="flex"
     >
       {prefix && (
-        <Box className={textInputPrefix()} sizing="border">
+        <span className={textInputPrefix()}>
           <span>{prefix}</span>
-        </Box>
+        </span>
       )}
 
-      <Box className={textInputElement()} flex={1} position="relative">
+      <span className={textInputElement()}>
         <Element
           {...rest}
           className={_inputElement()}
@@ -203,10 +174,10 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
           type={type}
         />
 
-        <Box className={_inputPresentation()} position="absolute">
+        <span className={_inputPresentation()}>
           {IconComponent && (
-            <Box padding={padding} position="absolute" insetTop={0} insetLeft={0}>
-              <Text size={fontSize}>
+            <Box as="span" padding={padding} position="absolute" insetTop={0} insetLeft={0}>
+              <Text as="span" size={fontSize}>
                 {isValidElement(IconComponent) && IconComponent}
                 {isValidElementType(IconComponent) && <IconComponent />}
               </Text>
@@ -214,45 +185,95 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
           )}
 
           {!withClearButton && IconRightComponent && (
-            <Box padding={padding} position="absolute" insetTop={0} insetRight={0}>
-              <Text size={fontSize}>
+            <Box as="span" padding={padding} position="absolute" insetTop={0} insetRight={0}>
+              <Text as="span" size={fontSize}>
                 {isValidElement(IconRightComponent) && IconRightComponent}
                 {isValidElementType(IconRightComponent) && <IconRightComponent />}
               </Text>
             </Box>
           )}
-        </Box>
+        </span>
 
         {!disabled && !readOnly && clearButton && (
-          <Box
-            insetTop={0}
-            insetRight={0}
-            padding={clearButtonBoxPadding}
-            position="absolute"
-            style={{zIndex: 2}}
-          >
-            <Button
-              aria-label="Clear"
-              data-qa="clear-button"
-              display="block"
-              fontSize={fontSize}
-              icon={CloseIcon}
-              mode="bleed"
-              padding={clearButtonPadding}
-              radius={radius}
-              {...clearButtonProps}
-              onClick={handleClearClick}
-              onMouseDown={handleClearMouseDown}
-            />
-          </Box>
+          <ClearButton
+            fontSize={fontSize}
+            radius={radius}
+            clearButtonProps={isRecord(clearButton) ? clearButton : EMPTY_RECORD}
+            handleClearClick={handleClearClick}
+            handleClearMouseDown={handleClearMouseDown}
+            padding={responsivePadding}
+          />
         )}
-      </Box>
+      </span>
 
       {suffix && (
-        <Box className={textInputSuffix()} sizing="border">
+        <span className={textInputSuffix()}>
           <span>{suffix}</span>
-        </Box>
+        </span>
       )}
+    </span>
+  )
+}
+
+function ClearButton({
+  fontSize,
+  radius,
+  clearButtonProps,
+  handleClearClick,
+  handleClearMouseDown,
+  padding,
+}: {
+  clearButtonProps: TextInputClearButtonProps
+  handleClearClick: (event: MouseEvent<HTMLButtonElement>) => void
+  handleClearMouseDown: (event: MouseEvent<HTMLButtonElement>) => void
+  padding: ResponsiveProp<Space>
+} & Pick<TextInputOwnProps, 'fontSize' | 'radius'>) {
+  const clearButtonBoxPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(padding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 1]
+        if (value === 2) return [key, 1]
+
+        return [key, typeof value === 'number' ? value - 2 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [padding])
+
+  const clearButtonPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(padding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 0]
+        if (value === 2) return [key, 1]
+
+        return [key, typeof value === 'number' ? value - 1 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [padding])
+
+  return (
+    <Box
+      as="span"
+      insetTop={0}
+      insetRight={0}
+      padding={clearButtonBoxPadding}
+      position="absolute"
+      style={{zIndex: 2}}
+    >
+      <Button
+        aria-label="Clear"
+        data-qa="clear-button"
+        display="block"
+        fontSize={fontSize}
+        icon={CloseIcon}
+        mode="bleed"
+        padding={clearButtonPadding}
+        radius={radius}
+        {...clearButtonProps}
+        onClick={handleClearClick}
+        onMouseDown={handleClearMouseDown}
+      />
     </Box>
   )
 }

package/src/core/primitives/textInput/__workshop__/{plain.tsx → Plain.tsx}

@@ -53,16 +53,23 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   const border = useBoolean('Border', true)
   const customValidity = useText('Custom validity')
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  // @ts-expect-error - TODO: fix this
   const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search')
+  // @ts-expect-error - TODO: fix this
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, 'cube')
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
   const placeholder = useText('Placeholder')
   const prefix = useBoolean('Prefix', false)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const readOnly = useBoolean('Read only', false)
   const suffix = useBoolean('Suffix', false)
+  // @ts-expect-error - TODO: fix this
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   const [value, setValue] = useState('')
@@ -77,33 +84,56 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       border={border}
       customValidity={customValidity}
       disabled={disabled}
+      // @ts-expect-error - TODO: fix this
       fontSize={fontSize}
+      // @ts-expect-error - TODO: fix this
       gap={gap}
+      // @ts-expect-error - TODO: fix this
       icon={icon && icons[icon]}
+      // @ts-expect-error - TODO: fix this
       iconRight={iconRight && icons[iconRight]}
       id="text-input-example"
       name="test"
       onChange={handleChange}
+      // @ts-expect-error - TODO: fix this
       padding={padding}
       placeholder={placeholder}
       prefix={
         prefix && (
-          <Box padding={padding}>
-            <Text size={fontSize}>Prefix</Text>
+          <Box
+            // @ts-expect-error - TODO: fix this
+            padding={padding}
+          >
+            <Text
+              // @ts-expect-error - TODO: fix this
+              size={fontSize}
+            >
+              Prefix
+            </Text>
           </Box>
         )
       }
+      // @ts-expect-error - TODO: fix this
       radius={radius}
       readOnly={readOnly}
       ref={ref}
       suffix={
         suffix && (
-          <Box padding={padding}>
-            <Text size={fontSize}>Suffix</Text>
+          <Box
+            // @ts-expect-error - TODO: fix this
+            padding={padding}
+          >
+            <Text
+              // @ts-expect-error - TODO: fix this
+              size={fontSize}
+            >
+              Suffix
+            </Text>
           </Box>
         )
       }
       value={value}
+      // @ts-expect-error - TODO: fix this
       weight={weight}
     />
   )

package/src/core/primitives/textInput/__workshop__/{typed.tsx → Typed.tsx}

@@ -5,6 +5,7 @@ import {useCallback, useState} from 'react'
 import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '$workshop'
 
 export default function TypedStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text')
 
   const [value, setValue] = useState('')
@@ -16,7 +17,12 @@ export default function TypedStory(): React.JSX.Element {
   return (
     <Box padding={4}>
       <Container width={1}>
-        <TextInput onChange={handleChange} type={type} value={value} />
+        <TextInput
+          onChange={handleChange}
+          // @ts-expect-error - TODO: fix this
+          type={type}
+          value={value}
+        />
       </Container>
     </Box>
   )

package/src/core/primitives/textInput/__workshop__/index.ts

@@ -8,37 +8,37 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
     {
       name: 'custom-validity',
       title: 'Custom validity',
-      component: lazy(() => import('./customValidity')),
+      component: lazy(() => import('./CustomValidity')),
     },
     {
       name: 'typed',
       title: 'Typed',
-      component: lazy(() => import('./typed')),
+      component: lazy(() => import('./Typed')),
     },
     {
       name: 'tones',
       title: 'Tones',
-      component: lazy(() => import('./tones')),
+      component: lazy(() => import('./Tones')),
     },
     {
       name: 'clear-button',
       title: 'Clear button',
-      component: lazy(() => import('./clearButton')),
+      component: lazy(() => import('./ClearButton')),
     },
     {
       name: 'read-only',
       title: 'Read only',
-      component: lazy(() => import('./readOnly')),
+      component: lazy(() => import('./ReadOnly')),
     },
     {
       name: 'states',
       title: 'States',
-      component: lazy(() => import('./states')),
+      component: lazy(() => import('./States')),
     },
   ],
 }

package/src/core/primitives/tooltip/{tooltip.test.tsx → Tooltip.test.tsx}

@@ -3,10 +3,10 @@ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {Button} from '../button/button'
-import {Text} from '../text/text'
-import {Tooltip} from './tooltip'
-import {TooltipDelayGroupProvider} from './tooltipDelayGroup'
+import {Button} from '../button/Button'
+import {Text} from '../text/Text'
+import {Tooltip} from './Tooltip'
+import {TooltipDelayGroupProvider} from './tooltipDelayGroup/TooltipDelayGroupProvider'
 
 // Fake timers
 beforeEach(() => {

package/src/core/primitives/tooltip/{tooltip.tsx → Tooltip.tsx}

@@ -19,6 +19,7 @@ import {
   type ReactElement,
   type ReactNode,
   type RefAttributes,
+  use,
   useCallback,
   useEffect,
   useId,
@@ -35,20 +36,22 @@ import {useDelayedState} from '../../hooks/useDelayedState'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Delay, Placement, Props} from '../../types'
-import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
+import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
 import {getElementRef} from '../../utils/getElementRef'
-import {Portal} from '../../utils/portal/portal'
-import {usePortal} from '../../utils/portal/usePortal'
-import {CardProvider} from '../card/cardProvider'
-import {useCard} from '../card/useCard'
-import type {LayerOwnProps} from '../layer/layer'
+import {Portal} from '../../utils/portal/Portal'
+import {PortalContext} from '../../utils/portal/PortalContext'
+import {assertPortalContext} from '../../utils/portal/usePortal'
+import {CardContext} from '../card/CardContext'
+import {CardProvider} from '../card/CardProvider'
+import {assertCardContext} from '../card/useCard'
+import type {LayerOwnProps} from '../layer/Layer'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
-import {useTooltipDelayGroup} from './tooltipDelayGroup'
-import {TooltipLayer} from './tooltipLayer'
+import {TooltipDelayGroupContext} from './tooltipDelayGroup/TooltipDelayGroupContext'
+import {TooltipLayer} from './TooltipLayer'
 
 /** @public */
 export const DEFAULT_TOOLTIP_ELEMENT = 'div'
@@ -105,20 +108,17 @@ export type TooltipProps<E extends TooltipElementType = TooltipElementType> = Pr
 export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
   props: TooltipProps<E>,
 ): React.JSX.Element {
-  const boundaryElementContext = useBoundaryElement()
-
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
     as = DEFAULT_TOOLTIP_ELEMENT,
-    boundaryElement = boundaryElementContext?.element,
+    boundaryElement: _boundaryElement,
     children: childProp,
     className,
     content,
     delay,
     disabled,
-    fallbackPlacements = props.fallbackPlacements ??
-      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+    fallbackPlacements: _fallbackPlacements,
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
@@ -130,8 +130,10 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     tone = 'inherit',
     ...rest
   } = props as TooltipProps<typeof DEFAULT_TOOLTIP_ELEMENT>
+  const boundaryElement = _boundaryElement ?? use(BoundaryElementContext)
+  const fallbackPlacements =
+    _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
 
-  const card = useCard()
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const ref = useRef<HTMLDivElement | null>(null)
@@ -142,48 +144,22 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
-  const portal = usePortal()
-  const portalElement =
-    typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
-
-  const middleware = useMemo(() => {
-    const ret: Middleware[] = []
-
-    // Flip the floating element when leaving the boundary box
-    ret.push(
-      flip({
-        boundary: boundaryElement || undefined,
-        fallbackPlacements,
-        padding: DEFAULT_TOOLTIP_PADDING,
-        rootBoundary,
-      }),
-    )
-
-    // Define distance between reference and floating element
-    ret.push(offset({mainAxis: DEFAULT_TOOLTIP_DISTANCE}))
-
-    // Shift the tooltip so its sits with the boundary element
-    ret.push(
-      shift({
-        boundary: boundaryElement || undefined,
-        rootBoundary,
-        padding: DEFAULT_TOOLTIP_PADDING,
-      }),
-    )
-
-    // Place arrow
-    if (arrowProp) {
-      ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
-    }
-
-    // Determine the origin to scale from.
-    // Must be placed after `@sanity/ui/size` and `shift` middleware.
-    if (animate) {
-      ret.push(origin)
-    }
+  let portalElement: HTMLElement | null = null
+  if (portalProp) {
+    const portal = use(PortalContext)
+    assertPortalContext(portal)
+    portalElement =
+      typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
+  }
 
-    return ret
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements])
+  const middleware = useMiddleware({
+    animate,
+    arrowProp,
+    arrowRef,
+    boundaryElement,
+    fallbackPlacements,
+    rootBoundary,
+  })
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -201,7 +177,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
 
   const tooltipId = useId()
   const [isOpen, setIsOpen] = useDelayedState(false)
-  const delayGroupContext = useTooltipDelayGroup()
+  const delayGroupContext = use(TooltipDelayGroupContext)
   const {setIsGroupActive, setOpenTooltipId} = delayGroupContext || {}
   const showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId
 
@@ -330,6 +306,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
       portalElement?.offsetWidth || document.body.offsetWidth,
     ]
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2)
   }, [boundaryElement, portalElement])
 
@@ -411,17 +388,24 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     </TooltipLayer>
   )
 
-  const children =
-    showTooltip &&
-    (portalProp ? (
+  let children = showTooltip ? node : null
+
+  if (showTooltip && portalProp) {
+    let resolvedTone = tone as Exclude<typeof tone, 'inherit'>
+    if (tone === 'inherit') {
+      const card = use(CardContext)
+      assertCardContext(card)
+      resolvedTone = card.tone
+    }
+
+    children = (
       <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
+        <CardProvider tone={resolvedTone} scheme={scheme ?? 'light'}>
           {node}
         </CardProvider>
       </Portal>
-    ) : (
-      node
-    ))
+    )
+  }
 
   return (
     <>
@@ -434,6 +418,61 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
   )
 }
 
+function useMiddleware({
+  animate,
+  arrowProp,
+  arrowRef,
+  boundaryElement,
+  fallbackPlacements,
+  rootBoundary,
+}: {
+  animate: boolean
+  arrowProp: boolean
+  arrowRef: React.RefObject<HTMLDivElement | null>
+  boundaryElement: HTMLElement | null
+  fallbackPlacements: Placement[]
+  rootBoundary: RootBoundary
+}) {
+  return useMemo(() => {
+    const ret: Middleware[] = []
+
+    // Flip the floating element when leaving the boundary box
+    ret.push(
+      flip({
+        boundary: boundaryElement || undefined,
+        fallbackPlacements,
+        padding: DEFAULT_TOOLTIP_PADDING,
+        rootBoundary,
+      }),
+    )
+
+    // Define distance between reference and floating element
+    ret.push(offset({mainAxis: DEFAULT_TOOLTIP_DISTANCE}))
+
+    // Shift the tooltip so its sits with the boundary element
+    ret.push(
+      shift({
+        boundary: boundaryElement || undefined,
+        rootBoundary,
+        padding: DEFAULT_TOOLTIP_PADDING,
+      }),
+    )
+
+    // Place arrow
+    if (arrowProp) {
+      ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
+    }
+
+    // Determine the origin to scale from.
+    // Must be placed after `@sanity/ui/size` and `shift` middleware.
+    if (animate) {
+      ret.push(origin)
+    }
+
+    return ret
+  }, [animate, arrowProp, arrowRef, boundaryElement, fallbackPlacements, rootBoundary])
+}
+
 /**
  * As `useEffectEvent` should never be passed to other components or hooks, this custom hook groups together the `useEffectEvent` and the `useEffect` hook using it.
  * @see https://19.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events:~:text=Never%20pass%20them%20to%20other%20components%20or%20Hooks

package/src/core/primitives/tooltip/{tooltipLayer.tsx → TooltipLayer.tsx}

@@ -3,8 +3,8 @@ import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import type {Placement} from '../../types'
-import {Arrow} from '../arrow/arrow'
-import {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
+import {Arrow} from '../arrow/Arrow'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer/Layer'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,