@sanity/ui 2.10.0-corel.0 → 2.10.0

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

@@ -12,7 +12,7 @@ import {Text} from '../../text'
 import {Popover} from '../popover'
 import {PopoverUpdateCallback} from '../types'
 
-export default function TestStory(): ReactElement {
+export default function TestStory(): ReactElement<any> {
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
@@ -30,7 +30,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/popover.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   Middleware,
   RootBoundary,
@@ -60,7 +59,7 @@ export interface PopoverProps
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement
+  children?: React.ReactElement<any>
   /**
    * When `true`, prevent overflow within the current boundary:
    * - by flipping on its side axis
@@ -118,7 +117,7 @@ export const Popover = memo(
     props: PopoverProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement {
+  ): React.ReactElement<any> {
     const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
@@ -199,7 +198,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(() => {
@@ -366,9 +365,12 @@ export const Popover = memo(
     )
 
     const child = useMemo(() => {
+      // 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: referenceElement ? undefined : setReference})
+      return cloneElement(childProp, {ref: setReference})
     }, [childProp, referenceElement, setReference])
 
     useEffect(() => {
@@ -382,10 +384,8 @@ export const Popover = memo(
     }, [update, updateRef])
 
     useEffect(() => {
-      if (referenceElement) {
-        refs.setReference(referenceElement)
-      }
-    }, [referenceElement, refs, child])
+      if (referenceElement) refs.setReference(referenceElement)
+    }, [referenceElement, refs])
 
     if (disabled) {
       return childProp || <></>
@@ -448,7 +448,7 @@ 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: React.ReactElement<any>) {
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
   let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning

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/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/stack/stack.tsx

@@ -1,4 +1,4 @@
-import {forwardRef} from 'react'
+import {forwardRef, type JSX} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'

package/src/core/primitives/text/__workshop__/example.tsx

@@ -1,4 +1,4 @@
-import {Card, Container, Text} from '@sanity/ui'
+import {Container, Flex, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {
   WORKSHOP_TEXT_ALIGN_OPTIONS,
@@ -11,7 +11,7 @@ export default function TextStory() {
   const accent = useBoolean('Accent', false, 'Props')
   const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, '', 'Props') || undefined
   const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
   const text = useText('Text', 'Hello, world', 'Props')
 
   const textOverflow =
@@ -20,8 +20,8 @@ export default function TextStory() {
   const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
 
   return (
-    <Container width={0}>
-      <Card padding={4}>
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container width={0}>
         <Text
           accent={accent}
           align={align}
@@ -32,7 +32,7 @@ export default function TextStory() {
         >
           {text}
         </Text>
-      </Card>
-    </Container>
+      </Container>
+    </Flex>
   )
 }

package/src/core/primitives/text/__workshop__/opticalAlignment.tsx

@@ -6,47 +6,37 @@ export default function OpticalAlignment() {
     <Box padding={[4, 5, 6]}>
       <Stack space={1}>
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={4}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={4}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={3}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={3}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={2}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={2}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={1}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={1}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={0}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={0}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={2} scheme="dark">
+          <Card padding={2} tone="neutral">
             <Text>
               <AddCircleIcon />
             </Text>

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

@@ -9,7 +9,6 @@ export function textBaseStyle(
   const {font} = getTheme_v2(props.theme)
 
   return css`
-    min-width: 0;
     color: var(--card-fg-color);
 
     ${$accent &&

package/src/core/primitives/text/text.tsx

@@ -1,5 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {forwardRef, type JSX} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {
@@ -25,7 +25,7 @@ export interface TextProps {
    * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
    * @beta
    */
-  textOverflow?: 'ellipsis' | 'none'
+  textOverflow?: 'ellipsis'
   weight?: ThemeFontWeightKey
 }
 
@@ -67,8 +67,6 @@ export const Text = forwardRef(function Text(
 
   if (textOverflow === 'ellipsis') {
     children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  } else {
-    children = <span>{children}</span>
   }
 
   return (
@@ -82,7 +80,7 @@ export const Text = forwardRef(function Text(
       $size={useArrayProp(size)}
       $weight={weight}
     >
-      {children}
+      <span>{children}</span>
     </Root>
   )
 })

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

@@ -17,7 +17,7 @@ export default function PlainStory() {
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
   const readOnly = useBoolean('Read only', false, 'Props')
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
 

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

@@ -35,11 +35,6 @@ export default defineScope({
       title: 'Read only',
       component: lazy(() => import('./readOnly')),
     },
-    {
-      name: 'multiple-tones',
-      title: 'Multiple tones',
-      component: lazy(() => import('./multipleTones')),
-    },
     {
       name: 'states',
       title: 'States',

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

@@ -57,7 +57,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   const iconRight = useSelect(
     'Icon (right)',
     WORKSHOP_ICON_SYMBOL_OPTIONS,
-    'close',
+    'cube',
     'Props',
   ) as IconSymbol
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
@@ -83,7 +83,6 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       icon={icon && icons[icon]}
       iconRight={iconRight && icons[iconRight]}
       id="text-input-example"
-      name="email"
       onChange={handleChange}
       padding={padding}
       placeholder={placeholder}

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

@@ -1,5 +1,9 @@
-import {TextInput} from '@sanity/ui'
+import {Flex, TextInput} from '@sanity/ui'
 
 export default function ReadOnlyStory() {
-  return <TextInput id="text-input-example" readOnly />
+  return (
+    <Flex padding={4}>
+      <TextInput id="text-input-example" readOnly />
+    </Flex>
+  )
 }

package/src/core/primitives/textInput/__workshop__/tones.tsx

@@ -3,7 +3,9 @@ import {useBoolean} from '@sanity/ui-workshop'
 
 export default function TonesStory() {
   const transparentTone = useBoolean('Transparent', true)
+  const neutralTone = useBoolean('Neutral', true)
   const primaryTone = useBoolean('Primary', true)
+  const suggestTone = useBoolean('Suggest', true)
   const positiveTone = useBoolean('Positive', true)
   const cautionTone = useBoolean('Caution', true)
   const criticalTone = useBoolean('Critical', true)
@@ -49,6 +51,24 @@ export default function TonesStory() {
                   </Card>
                 )}
 
+                {neutralTone && (
+                  <Card padding={3} tone="neutral">
+                    <TextInput
+                      placeholder="neutral"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
                 {primaryTone && (
                   <Card padding={3} tone="primary">
                     <TextInput
@@ -67,6 +87,24 @@ export default function TonesStory() {
                   </Card>
                 )}
 
+                {suggestTone && (
+                  <Card padding={3} tone="suggest">
+                    <TextInput
+                      placeholder="suggest"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
                 {positiveTone && (
                   <Card padding={3} tone="positive">
                     <TextInput

package/src/core/primitives/tooltip/tooltip.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   arrow,
   autoUpdate,
@@ -48,7 +47,7 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   allowedAutoPlacements?: Placement[]
   arrow?: boolean
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement
+  children?: React.ReactElement<any>
   content?: React.ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]

package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -28,7 +28,7 @@ export interface TooltipDelayGroupProviderProps {
  */
 export function TooltipDelayGroupProvider(
   props: TooltipDelayGroupProviderProps,
-): React.ReactElement {
+): React.ReactElement<any> {
   const {children, delay} = props
   const [isGroupActive, setIsGroupActive] = useDelayedState(false)
   const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)

package/src/core/styles/card/_cardColorStyle.ts

@@ -55,10 +55,18 @@ export function _cardColorStyle(
     '--card-badge-default-dot-color': color.badge.default.dot,
     '--card-badge-default-fg-color': color.badge.default.fg,
     '--card-badge-default-icon-color': color.badge.default.icon,
+    '--card-badge-neutral-bg-color': color.badge.neutral?.bg,
+    '--card-badge-neutral-dot-color': color.badge.neutral?.dot,
+    '--card-badge-neutral-fg-color': color.badge.neutral?.fg,
+    '--card-badge-neutral-icon-color': color.badge.neutral?.icon,
     '--card-badge-primary-bg-color': color.badge.primary.bg,
     '--card-badge-primary-dot-color': color.badge.primary.dot,
     '--card-badge-primary-fg-color': color.badge.primary.fg,
     '--card-badge-primary-icon-color': color.badge.primary.icon,
+    '--card-badge-suggest-bg-color': color.badge.suggest?.bg,
+    '--card-badge-suggest-dot-color': color.badge.suggest?.dot,
+    '--card-badge-suggest-fg-color': color.badge.suggest?.fg,
+    '--card-badge-suggest-icon-color': color.badge.suggest?.icon,
     '--card-badge-positive-bg-color': color.badge.positive.bg,
     '--card-badge-positive-dot-color': color.badge.positive.dot,
     '--card-badge-positive-fg-color': color.badge.positive.fg,
@@ -71,14 +79,6 @@ export function _cardColorStyle(
     '--card-badge-critical-dot-color': color.badge.critical.dot,
     '--card-badge-critical-fg-color': color.badge.critical.fg,
     '--card-badge-critical-icon-color': color.badge.critical.icon,
-    '--card-badge-prospect-bg-color': color.badge.prospect.bg,
-    '--card-badge-prospect-dot-color': color.badge.prospect.dot,
-    '--card-badge-prospect-fg-color': color.badge.prospect.fg,
-    '--card-badge-prospect-icon-color': color.badge.prospect.icon,
-    '--card-badge-explore-bg-color': color.badge.explore.bg,
-    '--card-badge-explore-dot-color': color.badge.explore.dot,
-    '--card-badge-explore-fg-color': color.badge.explore.fg,
-    '--card-badge-explore-icon-color': color.badge.explore.icon,
 
     '--card-code-bg-color': color.code.bg,
     '--card-code-fg-color': color.code.fg,

package/src/core/styles/flex/flexStyle.ts

@@ -16,8 +16,6 @@ export function responsiveFlexStyle(): Array<
     BASE_STYLE,
     responsiveFlexAlignStyle,
     responsiveFlexGapStyle,
-    responsiveFlexGapXStyle,
-    responsiveFlexGapYStyle,
     responsiveFlexWrapStyle,
     responsiveFlexJustifyStyle,
     responsiveFlexDirectionStyle,
@@ -42,22 +40,6 @@ function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
   }))
 }
 
-function responsiveFlexGapXStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$gapX, (gapX) => ({
-    columnGap: gapX ? rem(space[gapX]) : undefined,
-  }))
-}
-
-function responsiveFlexGapYStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$gapY, (gapY) => ({
-    rowGap: gapY ? rem(space[gapY]) : undefined,
-  }))
-}
-
 export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
   const {media} = getTheme_v2(props.theme)
 

package/src/core/styles/flex/types.ts

@@ -7,8 +7,6 @@ export interface ResponsiveFlexStyleProps {
   $align: FlexAlign[]
   $direction: FlexDirection[]
   $gap: number[]
-  $gapX: number[]
-  $gapY: number[]
   $justify: FlexJustify[]
   $wrap: FlexWrap[]
 }

package/src/core/theme/__workshop__/build/story.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import {
   ThemeColorButtonTone_v2,
   ThemeColorCard_v2,
@@ -23,7 +21,7 @@ import {Root} from './Root'
 
 const theme = buildTheme()
 
-export default function BuildStory(): ReactElement {
+export default function BuildStory(): ReactElement<any> {
   return (
     <Root>
       <div

package/src/core/theme/__workshop__/debug/story.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import {CropIcon} from '@sanity/icons'
 import {
   THEME_COLOR_BUTTON_MODES,
@@ -12,7 +10,7 @@ import {
   ThemeColorState_v2,
 } from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {CSSProperties, useMemo} from 'react'
+import {CSSProperties} from 'react'
 import {Badge, Box, Flex, KBD, Stack, Text} from '../../../primitives'
 import {useRootTheme} from '../../useRootTheme'
 
@@ -50,16 +48,13 @@ export default function DebugStory() {
   const button = useBoolean('Button', false, 'Props') || false
   const selectable = useBoolean('Selectable', false, 'Props') || false
 
-  const features: Features = useMemo(
-    () => ({
-      base,
-      button,
-      schemes: scheme == 'all' ? ['light', 'dark'] : [scheme],
-      selectable,
-      tones: tone == 'all' ? ['transparent', 'default'] : [tone],
-    }),
-    [base, button, scheme, selectable, tone],
-  )
+  const features: Features = {
+    base,
+    button,
+    schemes: scheme == 'all' ? ['light', 'dark'] : [scheme],
+    selectable,
+    tones: tone == 'all' ? ['transparent', 'default'] : [tone],
+  }
 
   return (
     <Flex>
@@ -352,11 +347,21 @@ function getStateVars(state: ThemeColorState_v2) {
     '--card-badge-default-fg-color': state.badge.default.fg,
     '--card-badge-default-icon-color': state.badge.default.icon,
 
+    '--card-badge-neutral-bg-color': state.badge.neutral.bg,
+    '--card-badge-neutral-dot-color': state.badge.neutral.dot,
+    '--card-badge-neutral-fg-color': state.badge.neutral.fg,
+    '--card-badge-neutral-icon-color': state.badge.neutral.icon,
+
     '--card-badge-primary-bg-color': state.badge.primary.bg,
     '--card-badge-primary-dot-color': state.badge.primary.dot,
     '--card-badge-primary-fg-color': state.badge.primary.fg,
     '--card-badge-primary-icon-color': state.badge.primary.icon,
 
+    '--card-badge-suggest-bg-color': state.badge.suggest.bg,
+    '--card-badge-suggest-dot-color': state.badge.suggest.dot,
+    '--card-badge-suggest-fg-color': state.badge.suggest.fg,
+    '--card-badge-suggest-icon-color': state.badge.suggest.icon,
+
     '--card-badge-positive-bg-color': state.badge.positive.bg,
     '--card-badge-positive-dot-color': state.badge.positive.dot,
     '--card-badge-positive-fg-color': state.badge.positive.fg,

package/src/core/theme/theme.test.tsx

@@ -1,5 +1,4 @@
 /** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {buildTheme} from '@sanity/ui/theme'
 import {render} from '../../../test'

package/src/core/theme/themeColorProvider.tsx

@@ -14,7 +14,7 @@ export interface ThemeColorProviderProps {
 /**
  * @public
  */
-export function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement {
+export function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement<any> {
   const {children, scheme, tone} = props
   const root = useRootTheme()
 

package/src/core/theme/themeProvider.tsx

@@ -23,14 +23,12 @@ export interface ThemeProviderProps {
 /**
  * @public
  */
-export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
+export function ThemeProvider(props: ThemeProviderProps): React.ReactElement<any> {
   const parentTheme = useContext(ThemeContext)
-  const {
-    children,
-    scheme = parentTheme?.scheme || 'light',
-    theme: rootTheme = parentTheme?.theme || null,
-    tone = parentTheme?.tone || 'default',
-  } = props
+  const {children} = props
+  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
+  const rootTheme = props.theme ?? (parentTheme?.theme || null)
+  const tone = props.tone ?? (parentTheme?.tone || 'default')
 
   const themeContext: ThemeContextValue | null = useMemo(() => {
     if (!rootTheme) return null

package/src/core/utils/arrow/arrow.tsx

@@ -68,7 +68,7 @@ export const Arrow = forwardRef(function Arrow(
     'width' | 'height'
   >,
   ref: ForwardedRef<HTMLDivElement>,
-): ReactElement {
+): ReactElement<any> {
   const {width: w, height: h, radius = 0, ...restProps} = props
   const {card} = useTheme_v2()
   const strokeWidth = card.shadow.outline

package/src/core/utils/boundaryElement/boundaryElement.test.tsx

@@ -1,5 +1,4 @@
 /** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {render} from '../../../../test'
 import {BoundaryElementContext} from './boundaryElementContext'

package/src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -13,7 +13,9 @@ export interface BoundaryElementProviderProps {
 /**
  * @public
  */
-export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.ReactElement {
+export function BoundaryElementProvider(
+  props: BoundaryElementProviderProps,
+): React.ReactElement<any> {
   const {children, element} = props
   const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])