@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/primitives/tooltip/tooltip.test.tsx

@@ -1,278 +0,0 @@
-/** @jest-environment jsdom */
-import {screen, act, fireEvent} from '@testing-library/react'
-import '../../../test/mocks/resizeObserver.mock'
-import '../../../test/mocks/matchMedia.mock'
-import {render} from '../../../test'
-import {Text, Button} from '../../primitives'
-import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
-
-describe('Tooltip', () => {
-  describe('Using same delay for open and close', () => {
-    it('should hide and show the tooltip content when hovered, with no delay', () => {
-      render(
-        <Tooltip content={<Text size={1}>{'Tooltip content'}</Text>} placement={'top'}>
-          <Button mode="bleed" text="Hover me" />
-        </Tooltip>,
-      )
-
-      const button = screen.getByText('Hover me')
-
-      // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-
-      fireEvent.mouseEnter(button)
-
-      // Validate tooltip content is rendered
-      screen.getByText('Tooltip content')
-
-      fireEvent.mouseOut(button)
-      // Validate tooltip content is not rendered anymore
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-    })
-    it('should support delays to show and hide the tooltip.', () => {
-      jest.useFakeTimers()
-      const delay = 200
-
-      render(
-        <Tooltip
-          content={<Text size={1}>{'Tooltip content'}</Text>}
-          placement={'top'}
-          delay={delay}
-        >
-          <Button mode="bleed" text="Hover me" />
-        </Tooltip>,
-      )
-
-      const button = screen.getByText('Hover me')
-
-      // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-
-      fireEvent.mouseEnter(button)
-
-      act(() => jest.advanceTimersByTime(delay / 2))
-      // Content should not be rendered yet
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
-
-      // Validate tooltip content is rendered
-      screen.getByText('Tooltip content')
-
-      fireEvent.mouseOut(button)
-      // Validate tooltip content is still showing.
-      screen.getByText('Tooltip content')
-      act(() => jest.advanceTimersByTime(delay))
-      // Validate tooltip content is not rendered anymore
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-    })
-    it('should support different open and close delays to show and hide the tooltip.', () => {
-      jest.useFakeTimers()
-      const openDelay = 200
-      const closeDelay = 150
-
-      render(
-        <Tooltip
-          content={<Text size={1}>{'Tooltip content'}</Text>}
-          placement={'top'}
-          delay={{
-            open: openDelay,
-            close: closeDelay,
-          }}
-        >
-          <Button mode="bleed" text="Hover me" />
-        </Tooltip>,
-      )
-
-      const button = screen.getByText('Hover me')
-
-      // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-
-      fireEvent.mouseEnter(button)
-
-      act(() => jest.advanceTimersByTime(openDelay / 2))
-      // Content should not be rendered yet
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
-
-      // Validate tooltip content is rendered
-      screen.getByText('Tooltip content')
-
-      fireEvent.mouseOut(button)
-      // Validate tooltip content is still showing.
-      screen.getByText('Tooltip content')
-      act(() => jest.advanceTimersByTime(closeDelay))
-      // Validate tooltip content is not rendered anymore
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Using the <TooltipDelayGroupProvider />', () => {
-    it('should support groups with the same delay to open and close.', () => {
-      const delay = 150
-
-      jest.useFakeTimers()
-      render(
-        <TooltipDelayGroupProvider delay={delay}>
-          <Tooltip content={<Text size={1}>{'Tooltip 1'}</Text>} placement={'top'} delay={400}>
-            <Button mode="bleed" text="Button 1" />
-          </Tooltip>
-          <Tooltip
-            content={<Text size={1}>{'Tooltip 2'}</Text>}
-            placement={'top'}
-            delay={400} // This should be overridden by the group delay
-          >
-            <Button mode="bleed" text="Button 2" />
-          </Tooltip>
-        </TooltipDelayGroupProvider>,
-      )
-
-      const button1 = screen.getByText('Button 1')
-      const button2 = screen.getByText('Button 2')
-
-      // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-
-      // Hovers on first button, it should show first tooltip only
-      fireEvent.mouseEnter(button1)
-      act(() => jest.advanceTimersByTime(delay / 2))
-      // Content should not be rendered yet, we have a delay of 150ms
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
-
-      // Validate Tooltip 1 is rendered
-      screen.getByText('Tooltip 1')
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-
-      // Hovers on second button.
-      fireEvent.mouseOut(button1)
-      fireEvent.mouseEnter(button2)
-
-      // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
-      act(() => jest.advanceTimersByTime(1))
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
-      screen.getByText('Tooltip 2')
-
-      // Validate tooltip content is not rendered anymore
-      fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(delay + 1))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-
-      // Hovering again, should trigger the tooltip to show immediately, as the group is not deactivated yet
-      fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(1))
-      screen.getByText('Tooltip 2')
-
-      // Validate tooltip content is not rendered anymore
-      fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(delay + 1))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-
-      // Wait 200ms, the group is deactivated, hovering again should trigger the delay
-      act(() => jest.advanceTimersByTime(200))
-      fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(delay / 2))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
-      screen.getByText('Tooltip 2')
-    })
-    it('should support groups with different open and close delay.', () => {
-      const openDelay = 250
-      const closeDelay = 150
-
-      jest.useFakeTimers()
-      render(
-        <TooltipDelayGroupProvider
-          delay={{
-            open: openDelay,
-            close: closeDelay,
-          }}
-        >
-          <Tooltip content={<Text size={1}>{'Tooltip 1'}</Text>} placement={'top'} delay={400}>
-            <Button mode="bleed" text="Button 1" />
-          </Tooltip>
-          <Tooltip
-            content={<Text size={1}>{'Tooltip 2'}</Text>}
-            placement={'top'}
-            delay={400} // This should be overridden by the group delay
-          >
-            <Button mode="bleed" text="Button 2" />
-          </Tooltip>
-        </TooltipDelayGroupProvider>,
-      )
-
-      const button1 = screen.getByText('Button 1')
-      const button2 = screen.getByText('Button 2')
-
-      // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-
-      // Hovers on first button, it should show first tooltip only
-      fireEvent.mouseEnter(button1)
-      act(() => jest.advanceTimersByTime(openDelay / 2))
-      // Content should not be rendered yet, we have a delay of2150ms
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
-
-      // Validate Tooltip 1 is rendered
-      screen.getByText('Tooltip 1')
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-
-      // Hovers on second button.
-      fireEvent.mouseOut(button1)
-      fireEvent.mouseEnter(button2)
-
-      // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
-      act(() => jest.advanceTimersByTime(1))
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
-      screen.getByText('Tooltip 2')
-
-      // Validate tooltip content is not rendered anymore
-      fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(closeDelay + 1))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-
-      // Hovering again, should trigger the tooltip to show immediately, as the group is not deactivated yet
-      fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(1))
-      screen.getByText('Tooltip 2')
-
-      // Validate tooltip content is not rendered anymore
-      fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(closeDelay + 1))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-
-      // Wait 200ms, the group is deactivated, hovering again should trigger the delay
-      act(() => jest.advanceTimersByTime(200))
-      fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(openDelay / 2))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
-      screen.getByText('Tooltip 2')
-    })
-    it("should throw an error if it's nested inside another <TooltipDelayGroupProvider />", () => {
-      // eslint-disable-next-line no-console
-      console.error = jest.fn() // Silence console.error as we are actually expecting an error in this test.
-      expect(() => {
-        render(
-          <TooltipDelayGroupProvider delay={100}>
-            <TooltipDelayGroupProvider delay={100}>
-              <Tooltip content={<Text size={1}>{'Tooltip 1'}</Text>} placement={'top'} delay={400}>
-                <Button mode="bleed" text="Button 1" />
-              </Tooltip>
-            </TooltipDelayGroupProvider>
-          </TooltipDelayGroupProvider>,
-        )
-      }).toThrow(
-        'TooltipDelayGroupProvider cannot be nested inside another TooltipDelayGroupProvider',
-      )
-
-      // Clean up the console.error mock
-      jest.clearAllMocks()
-    })
-  })
-})

package/src/primitives/tooltip/tooltip.tsx

@@ -1,333 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  arrow,
-  autoUpdate,
-  flip,
-  offset,
-  shift,
-  useFloating,
-  Middleware,
-  RootBoundary,
-  size,
-} from '@floating-ui/react-dom'
-import {
-  cloneElement,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  CSSProperties,
-  ForwardedRef,
-  useId,
-} from 'react'
-import styled from 'styled-components'
-import {FLOATING_STATIC_SIDES} from '../../constants'
-import {useArrayProp, useForwardedRef} from '../../hooks'
-import {useDelayedState} from '../../hooks/useDelayedState'
-import {ThemeColorSchemeKey, useTheme} from '../../theme'
-import {Placement} from '../../types'
-import {Layer, LayerProps, Portal, useBoundaryElement} from '../../utils'
-import {Card} from '../card'
-import {Delay} from '../types'
-import {DEFAULT_FALLBACK_PLACEMENTS} from './constants'
-import {TooltipArrow} from './tooltipArrow'
-import {useTooltipDelayGroup} from './tooltipDelayGroup'
-
-/**
- * @public
- */
-export interface TooltipProps extends Omit<LayerProps, 'as'> {
-  /** @deprecated Use `fallbackPlacements` instead. */
-  allowedAutoPlacements?: Placement[]
-  boundaryElement?: HTMLElement | null
-  children?: React.ReactElement
-  content?: React.ReactNode
-  disabled?: boolean
-  fallbackPlacements?: Placement[]
-  padding?: number | number[]
-  placement?: Placement
-  portal?: boolean | string
-  scheme?: ThemeColorSchemeKey
-  shadow?: number | number[]
-  /**
-   * @public Adds a delay to open or close the tooltip.  Defaults to 0.
-   *
-   * If only a `number` is passed, it will be used for both opening and closing.
-   *
-   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
-   */
-  delay?: Delay
-}
-
-const Root = styled(Layer)`
-  pointer-events: none;
-`
-
-/**
- * @public
- */
-export const Tooltip = forwardRef(function Tooltip(
-  props: TooltipProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const boundaryElementContext = useBoundaryElement()
-  const theme = useTheme()
-  const {
-    boundaryElement = boundaryElementContext?.element,
-    children: childProp,
-    content,
-    disabled,
-    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
-      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
-    padding = 3,
-    placement: placementProp = 'bottom',
-    portal,
-    scheme,
-    shadow = 2,
-    zOffset = theme.sanity.layer?.tooltip.zOffset,
-    delay,
-    ...restProps
-  } = props
-  const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
-  const forwardedRef = useForwardedRef(ref)
-  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
-  const arrowRef = useRef<HTMLDivElement | null>(null)
-  const rootBoundary: RootBoundary = 'viewport'
-
-  const middleware = useMemo(() => {
-    const ret: Middleware[] = []
-
-    // Flip the floating element when leaving the boundary box
-    ret.push(
-      flip({
-        boundary: boundaryElement || undefined,
-        fallbackPlacements,
-        padding: 4,
-        rootBoundary,
-        mainAxis: false,
-      }),
-    )
-
-    // Define distance between reference and floating element
-    ret.push(offset({mainAxis: 3}))
-
-    // Set width and height on the floating element
-    ret.push(
-      size({
-        apply({availableWidth, availableHeight, elements}) {
-          Object.assign(elements.floating.style, {
-            maxWidth: `${availableWidth - 4 * 2}px`, // the padding is `4px`
-            maxHeight: `${availableHeight - 4 * 2}px`, // the padding is `4px`
-          })
-        },
-      }),
-    )
-
-    // Shift the tooltip so its sits with the boundary eleement
-    ret.push(
-      shift({
-        boundary: boundaryElement || undefined,
-        rootBoundary,
-        padding: 4,
-      }),
-    )
-
-    // Place arrow
-    ret.push(arrow({element: arrowRef, padding: 2}))
-
-    return ret
-  }, [boundaryElement, fallbackPlacements])
-
-  const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate,
-  })
-
-  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
-
-  const arrowX = middlewareData.arrow?.x
-  const arrowY = middlewareData.arrow?.y
-
-  const arrowStyle: CSSProperties = useMemo(() => {
-    const style: CSSProperties = {
-      left: arrowX !== null ? arrowX : undefined,
-      top: arrowY !== null ? arrowY : undefined,
-      right: undefined,
-      bottom: undefined,
-    }
-
-    if (staticSide) style[staticSide] = -15
-
-    return style
-  }, [arrowX, arrowY, staticSide])
-
-  const tooltipId = useId()
-  const [isOpen, setIsOpen] = useDelayedState(false)
-  const delayGroupContext = useTooltipDelayGroup()
-  const showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId
-
-  const isInsideGroup = delayGroupContext !== null
-  const openDelayProp = typeof delay === 'number' ? delay : delay?.open || 0
-  const closeDelayProp = typeof delay === 'number' ? delay : delay?.close || 0
-
-  const openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp
-  const closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp
-
-  const handleIsOpenChange = useCallback(
-    (open: boolean) => {
-      if (isInsideGroup) {
-        //  When it's inside a group, the open or close status will be handled by the group.
-        if (open) {
-          delayGroupContext.setIsGroupActive(open, openDelay)
-          delayGroupContext.setOpenTooltipId(tooltipId, openDelay)
-        } else {
-          const minimumGroupDeactivateDelay = 200 // We should provide some delay to allow the user to reach the next tooltip.
-          const groupDeactivateDelay =
-            closeDelay > minimumGroupDeactivateDelay ? closeDelay : minimumGroupDeactivateDelay
-
-          delayGroupContext.setIsGroupActive(open, groupDeactivateDelay)
-          delayGroupContext.setOpenTooltipId(null, closeDelay)
-        }
-      } else {
-        // When it's not inside a group, the open or close status will be handled by the tooltip itself.
-        setIsOpen(open, open ? openDelay : closeDelay)
-      }
-    },
-    [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen],
-  )
-
-  const handleBlur = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange])
-  const handleFocus = useCallback(() => handleIsOpenChange(true), [handleIsOpenChange])
-  const handleMouseEnter = useCallback(() => handleIsOpenChange(true), [handleIsOpenChange])
-  const handleMouseLeave = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange])
-
-  // Detect whether the mouse is moving outside of the reference element. This is sometimes
-  // necessary, because the tooltip might not always close as it should (e.g. when clicking
-  // the reference element triggers a CPU-heavy operation.)
-  useEffect(() => {
-    if (!isOpen) return
-
-    function handleWindowMouseMove(event: MouseEvent) {
-      if (!referenceElement) return
-
-      const isHoveringReference =
-        referenceElement === event.target ||
-        (event.target instanceof Node && referenceElement.contains(event.target))
-
-      if (!isHoveringReference) {
-        handleIsOpenChange(false)
-        window.removeEventListener('mousemove', handleWindowMouseMove)
-      }
-    }
-
-    window.addEventListener('mousemove', handleWindowMouseMove)
-
-    return () => {
-      window.removeEventListener('mousemove', handleWindowMouseMove)
-    }
-  }, [isOpen, referenceElement, handleIsOpenChange])
-
-  // Close when `disabled` changes to `true`
-  useEffect(() => {
-    if (disabled) handleIsOpenChange(false)
-  }, [disabled, handleIsOpenChange])
-
-  // Close when `content` changes to falsy
-  useEffect(() => {
-    if (!content) handleIsOpenChange(false)
-  }, [content, handleIsOpenChange])
-
-  // Update reference
-  useEffect(() => refs.setReference(referenceElement), [referenceElement, refs])
-
-  const setArrow = useCallback(
-    (arrowEl: HTMLDivElement | null) => {
-      arrowRef.current = arrowEl
-      update()
-    },
-    [update],
-  )
-
-  const setFloating = useCallback(
-    (node: HTMLDivElement | null) => {
-      forwardedRef.current = node
-      refs.setFloating(node)
-    },
-    [forwardedRef, refs],
-  )
-
-  const childRef: ForwardedRef<HTMLElement | null> = (childProp as any)?.ref
-
-  const setReference = useCallback(
-    (node: HTMLElement | null) => {
-      if (typeof childRef === 'function') {
-        childRef(node)
-      } else if (childRef) {
-        childRef.current = node
-      }
-
-      // childRef.current = node
-      setReferenceElement(node)
-    },
-    [childRef],
-  )
-
-  const child = useMemo(() => {
-    if (!childProp) return null
-
-    return cloneElement(childProp, {
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      ref: setReference,
-    })
-  }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference])
-
-  if (!child) return <></>
-
-  if (disabled) return child
-
-  const root = (
-    <Root
-      data-ui="Tooltip"
-      {...restProps}
-      ref={setFloating}
-      style={floatingStyles}
-      zOffset={zOffset}
-    >
-      <Card
-        data-ui="Tooltip__card"
-        data-placement={placement}
-        padding={padding}
-        radius={3}
-        scheme={scheme}
-        shadow={shadow}
-      >
-        {content}
-        <TooltipArrow ref={setArrow} style={arrowStyle} />
-      </Card>
-    </Root>
-  )
-
-  return (
-    <>
-      {child}
-
-      {showTooltip && (
-        <>
-          {portal ? (
-            <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-              {root}
-            </Portal>
-          ) : (
-            root
-          )}
-        </>
-      )}
-    </>
-  )
-})

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -1,90 +0,0 @@
-import {forwardRef} from 'react'
-import styled from 'styled-components'
-import {cssVars} from '../../theme'
-
-const Root = styled.div`
-  position: absolute;
-  pointer-events: none;
-  width: 15px;
-  height: 15px;
-  fill: none;
-
-  :empty + & {
-    display: none;
-  }
-
-  & > svg {
-    display: block;
-    transform-origin: 7.5px 7.5px;
-  }
-
-  /* position: absolute;
-  width: 15px;
-  height: 15px;
-  fill: none;
-
-  :empty + & {
-    display: none;
-  }
-
-  & > svg {
-    &:not([hidden]) {
-      display: block;
-    }
-    transform-origin: 7.5px 7.5px;
-  } */
-
-  [data-placement^='top'] > & {
-    bottom: -27px;
-  }
-
-  [data-placement^='right'] > & {
-    left: -27px;
-
-    & > svg {
-      transform: rotate(90deg);
-    }
-  }
-
-  [data-placement^='left'] > & {
-    right: -27px;
-
-    & > svg {
-      transform: rotate(-90deg);
-    }
-  }
-
-  [data-placement^='bottom'] > & {
-    top: -27px;
-
-    & > svg {
-      transform: rotate(180deg);
-    }
-  }
-`
-
-const Border = styled.path`
-  fill: ${cssVars.default['base-shadow-outline-color']};
-`
-
-const Shape = styled.path`
-  fill: ${cssVars.mutable['bg-color']};
-`
-
-interface TooltipArrowProps {}
-
-export const TooltipArrow = forwardRef(function TooltipArrow(
-  props: TooltipArrowProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {...restProps} = props
-
-  return (
-    <Root data-ui="Tooltip__arrow" {...restProps} ref={ref}>
-      <svg width="15" height="15" viewBox="0 0 15 15">
-        <Border d="M11.5266 1C11.032 1.32802 10.5837 1.73105 10.1995 2.20057L9.04792 3.6081C8.24771 4.58614 6.7523 4.58614 5.95209 3.6081L4.80047 2.20057C4.41632 1.73105 3.96796 1.32802 3.47341 1H0.156727C1.65639 1 3.07687 1.67313 4.02651 2.83381L5.17813 4.24134C6.37844 5.70839 8.62156 5.70839 9.82187 4.24134L10.9735 2.83381C11.9231 1.67313 13.3436 1 14.8433 1H11.5266Z" />
-        <Shape d="M0.156725 0C1.95632 0 3.66089 0.80776 4.80047 2.20057L5.95209 3.6081C6.75229 4.58614 8.24771 4.58614 9.04791 3.6081L10.1995 2.20057C11.3391 0.80776 13.0437 0 14.8433 0H15H0H0.156725Z" />
-      </svg>
-    </Root>
-  )
-})