@sanity/ui 1.7.3 → 1.7.4

package/src/components/menu/menuButton.tsx

@@ -51,7 +51,7 @@ export interface MenuButtonProps {
  */
 export const MenuButton = forwardRef(function MenuButton(
   props: MenuButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement | null>
+  ref: React.ForwardedRef<HTMLButtonElement | null>,
 ) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
@@ -139,7 +139,7 @@ export const MenuButton = forwardRef(function MenuButton(
 
       setOpen(false)
     },
-    [buttonElement, menuElements]
+    [buttonElement, menuElements],
   )
 
   const handleMenuEscape = useCallback(() => {
@@ -164,7 +164,7 @@ export const MenuButton = forwardRef(function MenuButton(
 
       setOpen(false)
     },
-    [menuElements]
+    [menuElements],
   )
 
   const handleItemClick = useCallback(() => {
@@ -203,7 +203,7 @@ export const MenuButton = forwardRef(function MenuButton(
       handleBlur,
       registerElement,
       shouldFocus,
-    ]
+    ],
   )
 
   const menu = isElement(menuProp) ? cloneElement(menuProp, menuProps) : null
@@ -218,7 +218,7 @@ export const MenuButton = forwardRef(function MenuButton(
 
       setButtonElement(el)
     },
-    [ref]
+    [ref],
   )
 
   const button = useMemo(
@@ -235,7 +235,7 @@ export const MenuButton = forwardRef(function MenuButton(
             selected: open,
           })
         : null,
-    [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef]
+    [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef],
   )
 
   const popoverProps: MenuButtonProps['popover'] = useMemo(
@@ -257,7 +257,7 @@ export const MenuButton = forwardRef(function MenuButton(
       deprecated_portal,
       deprecated_preventOverflow,
       popover,
-    ]
+    ],
   )
 
   return (

package/src/components/menu/menuGroup.tsx

@@ -28,7 +28,7 @@ export interface MenuGroupProps {
  */
 export function MenuGroup(
   props: MenuGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'tabIndex'>
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'tabIndex'>,
 ): React.ReactElement {
   const {
     as = 'button',
@@ -66,7 +66,7 @@ export function MenuGroup(
       onItemMouseEnter(event)
       setOpen(true)
     },
-    [onItemMouseEnter]
+    [onItemMouseEnter],
   )
 
   const handleMenuKeyDown = useCallback(
@@ -81,7 +81,7 @@ export function MenuGroup(
         })
       }
     },
-    [rootElement]
+    [rootElement],
   )
 
   const handleClick = useCallback(
@@ -96,7 +96,7 @@ export function MenuGroup(
         shouldFocusRef.current = null
       })
     },
-    [onClick]
+    [onClick],
   )
 
   const handleChildItemClick = useCallback(() => {

package/src/components/menu/menuItem.tsx

@@ -38,7 +38,7 @@ export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusP
 export const MenuItem = forwardRef(function MenuItem(
   props: MenuItemProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'selected' | 'tabIndex'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     as = 'button',
@@ -85,7 +85,7 @@ export const MenuItem = forwardRef(function MenuItem(
       if (onClick) onClick(event)
       if (onItemClick) onItemClick()
     },
-    [disabled, onClick, onItemClick]
+    [disabled, onClick, onItemClick],
   )
 
   const paddingProps = useMemo(
@@ -98,7 +98,7 @@ export const MenuItem = forwardRef(function MenuItem(
       paddingBottom,
       paddingLeft,
     }),
-    [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]
+    [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
   )
 
   const setRef = useCallback(
@@ -106,7 +106,7 @@ export const MenuItem = forwardRef(function MenuItem(
       ref.current = el
       setRootElement(el)
     },
-    [ref]
+    [ref],
   )
 
   return (

package/src/components/menu/useMenuController.ts

@@ -61,7 +61,7 @@ export function useMenuController(props: {
         }
       }
     },
-    [rootElement, setActiveIndex]
+    [rootElement, setActiveIndex],
   )
 
   const handleKeyDown = useCallback(
@@ -159,7 +159,7 @@ export function useMenuController(props: {
         onKeyDown(event)
       }
     },
-    [onKeyDown, originElement, setActiveIndex]
+    [onKeyDown, originElement, setActiveIndex],
   )
 
   const handleItemMouseEnter = useCallback(
@@ -169,7 +169,7 @@ export function useMenuController(props: {
 
       setActiveIndex(currentIndex)
     },
-    [setActiveIndex]
+    [setActiveIndex],
   )
 
   const handleItemMouseLeave = useCallback(() => {

package/src/components/skeleton/skeleton.tsx

@@ -8,7 +8,7 @@ import {skeletonStyle} from './styles'
 
 const Root = styled(Box)<{$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps>(
   responsiveRadiusStyle,
-  skeletonStyle
+  skeletonStyle,
 )
 
 /**
@@ -26,7 +26,7 @@ export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'ch
  */
 export const Skeleton = forwardRef(function Skeleton(
   props: SkeletonProps & React.HTMLProps<HTMLDivElement>,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const {animated = false, delay, radius, ...restProps} = props
   const [visible, setVisible] = useState<boolean>(delay ? false : true)

package/src/components/skeleton/textSkeleton.tsx

@@ -5,21 +5,27 @@ import {_responsive} from '../../styles'
 import {Theme, ThemeFontKey} from '../../theme'
 import {Skeleton, SkeletonProps} from './skeleton'
 
-const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(
-  ({$size, $style, theme}: {$size: number[]; $style: ThemeFontKey; theme: Theme}) => {
-    const {media} = theme.sanity
-    const font = theme.sanity.fonts[$style]
-
-    const styles = _responsive(media, $size, (sizeIndex) => {
-      const fontSize = font.sizes[sizeIndex]
-      const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
-
-      return {height: capHeight}
-    })
-
-    return styles
-  }
-)
+const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(({
+  $size,
+  $style,
+  theme,
+}: {
+  $size: number[]
+  $style: ThemeFontKey
+  theme: Theme
+}) => {
+  const {media} = theme.sanity
+  const font = theme.sanity.fonts[$style]
+
+  const styles = _responsive(media, $size, (sizeIndex) => {
+    const fontSize = font.sizes[sizeIndex]
+    const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
+
+    return {height: capHeight}
+  })
+
+  return styles
+})
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -60,7 +66,7 @@ export interface CodeSkeletonProps extends SkeletonProps {
 export const TextSkeleton = forwardRef(function TextSkeleton(
   props: TextSkeletonProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)
@@ -75,7 +81,7 @@ export const TextSkeleton = forwardRef(function TextSkeleton(
 export const LabelSkeleton = forwardRef(function TextSkeleton(
   props: LabelSkeletonProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)
@@ -90,7 +96,7 @@ export const LabelSkeleton = forwardRef(function TextSkeleton(
 export const HeadingSkeleton = forwardRef(function TextSkeleton(
   props: HeadingSkeletonProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)
@@ -105,7 +111,7 @@ export const HeadingSkeleton = forwardRef(function TextSkeleton(
 export const CodeSkeleton = forwardRef(function TextSkeleton(
   props: CodeSkeletonProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)

package/src/components/tab/tab.tsx

@@ -27,7 +27,7 @@ export interface TabProps {
 export const Tab = forwardRef(function Tab(
   props: TabProps &
     Omit<React.HTMLProps<HTMLButtonElement>, 'aria-controls' | 'as' | 'id' | 'label' | 'type'>,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement>
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
     icon,
@@ -53,7 +53,7 @@ export const Tab = forwardRef(function Tab(
       focusedRef.current = true
       if (onFocus) onFocus(event)
     },
-    [onFocus]
+    [onFocus],
   )
 
   const ref = useForwardedRef(forwardedRef)

package/src/components/tab/tabList.tsx

@@ -17,7 +17,7 @@ function _isReactElement(node: unknown): node is React.ReactElement {
  */
 export const TabList = forwardRef(function TabList(
   props: TabListProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref
+  ref,
 ) {
   const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
@@ -29,7 +29,7 @@ export const TabList = forwardRef(function TabList(
       focused: focusedIndex === childIndex,
       key: childIndex,
       onFocus: () => handleTabFocus(childIndex),
-    })
+    }),
   )
 
   const numTabs = tabs.length
@@ -48,7 +48,7 @@ export const TabList = forwardRef(function TabList(
         setFocusedIndex((prevIndex) => (prevIndex + 1) % numTabs)
       }
     },
-    [numTabs]
+    [numTabs],
   )
 
   return (

package/src/components/tab/tabPanel.tsx

@@ -18,7 +18,7 @@ export interface TabPanelProps extends BoxProps {
 export const TabPanel = forwardRef(function TabPanel(
   props: TabPanelProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'aria-labelledby' | 'id' | 'role'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {flex, ...restProps} = props
 

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

@@ -1,4 +1,5 @@
 /** @jest-environment jsdom */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {render} from '../../../test'
 import {ToastContext} from './toastContext'
@@ -94,7 +95,7 @@ describe('components/toast', () => {
       render(<Root />)
 
       expect(log.mock.calls[0][0].message).toEqual(
-        'useToast(): the context value is not compatible'
+        'useToast(): the context value is not compatible',
       )
     })
   })

package/src/components/toast/toast.tsx

@@ -40,7 +40,7 @@ const TextBox = styled(Flex)`
  * @public
  */
 export function Toast(
-  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>
+  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
 ): React.ReactElement {
   const {closable, description, onClose, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'

package/src/components/toast/toastProvider.tsx

@@ -115,7 +115,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
 
       toastsRef.current = {}
     },
-    []
+    [],
   )
 
   const value: ToastContextValue = useMemo(() => ({version: 0.0, push}), [push])

package/src/components/tree/__workshop__/basic.perf.ts

@@ -3,7 +3,7 @@ import {findByTestId, fireEvent} from '@testing-library/dom'
 
 function test<ElementType = unknown>(
   title: string,
-  run: PerfTestRunFn<ElementType>
+  run: PerfTestRunFn<ElementType>,
 ): PerfTestProps<ElementType> {
   return {name: title, run}
 }

package/src/components/tree/helpers.ts

@@ -3,7 +3,7 @@ import {TreeState} from './types'
 export function _findPrevItemElement(
   state: TreeState,
   itemElements: HTMLElement[],
-  focusedElement: HTMLElement
+  focusedElement: HTMLElement,
 ): HTMLElement | null {
   const idx = itemElements.indexOf(focusedElement)
   const els = itemElements.slice(0, idx)
@@ -46,7 +46,7 @@ export function _findPrevItemElement(
 export function _findNextItemElement(
   state: TreeState,
   itemElements: HTMLElement[],
-  focusedElement: HTMLElement
+  focusedElement: HTMLElement,
 ): HTMLElement | null {
   const idx = itemElements.indexOf(focusedElement)
   const els = itemElements.slice(idx)

package/src/components/tree/style.ts

@@ -92,7 +92,7 @@ export interface TreeItemBoxStyleProps {
 }
 
 export function treeItemBoxStyle(
-  props: TreeItemBoxStyleProps & ThemeProps
+  props: TreeItemBoxStyleProps & ThemeProps,
 ): FlattenSimpleInterpolation {
   const {$level, theme} = props
   const {space} = theme.sanity

package/src/components/tree/tree.tsx

@@ -21,7 +21,7 @@ export const Tree = memo(
   forwardRef(function Tree(
     props: TreeProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-    ref: React.ForwardedRef<HTMLDivElement>
+    ref: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {
     const {children, space = 1, onFocus, ...restProps} = props
     const forwardedRef = useForwardedRef(ref)
@@ -58,7 +58,7 @@ export const Tree = memo(
           })
         }
       },
-      []
+      [],
     )
 
     const setExpanded = useCallback((path: string, expanded: boolean) => {
@@ -83,7 +83,7 @@ export const Tree = memo(
         space,
         state,
       }),
-      [focusedElement, itemElements, path, registerItem, setExpanded, space, state]
+      [focusedElement, itemElements, path, registerItem, setExpanded, space, state],
     )
 
     const handleKeyDown = useCallback(
@@ -96,7 +96,7 @@ export const Tree = memo(
           const nextEl = _findNextItemElement(
             stateRef.current,
             itemElements,
-            focusedElementRef.current
+            focusedElementRef.current,
           )
 
           if (nextEl) {
@@ -113,7 +113,7 @@ export const Tree = memo(
           const prevEl = _findPrevItemElement(
             stateRef.current,
             itemElements,
-            focusedElementRef.current
+            focusedElementRef.current,
           )
 
           if (prevEl) {
@@ -180,7 +180,7 @@ export const Tree = memo(
           return
         }
       },
-      [itemElements]
+      [itemElements],
     )
 
     const handleFocus = useCallback(
@@ -190,13 +190,13 @@ export const Tree = memo(
         // Call the element's `focus` handler
         onFocus?.(event)
       },
-      [onFocus]
+      [onFocus],
     )
 
     useEffect(() => {
       if (!forwardedRef.current) return
       const _itemElements = Array.from(
-        forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]')
+        forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]'),
       ) as HTMLElement[]
 
       setItemElements(_itemElements)
@@ -218,7 +218,7 @@ export const Tree = memo(
         </Stack>
       </TreeContext.Provider>
     )
-  })
+  }),
 )
 
 Tree.displayName = 'Tree'

package/src/components/tree/treeGroup.tsx

@@ -8,7 +8,7 @@ export interface TreeGroupProps {
 
 export const TreeGroup = memo(function TreeGroup(
   props: TreeGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
 ): React.ReactElement {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()

package/src/components/tree/treeItem.tsx

@@ -45,7 +45,7 @@ const ToggleArrowText = styled(Text)`
  * @beta
  */
 export const TreeItem = memo(function TreeItem(
-  props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>
+  props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
 ): React.ReactElement {
   const {
     children,
@@ -78,7 +78,7 @@ export const TreeItem = memo(function TreeItem(
   const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
-    [itemPath, tree]
+    [itemPath, tree],
   )
 
   const handleClick = useCallback(
@@ -97,7 +97,7 @@ export const TreeItem = memo(function TreeItem(
         setFocusedElement(rootRef.current)
       }
     },
-    [expanded, itemKey, onClick, setExpanded, setFocusedElement]
+    [expanded, itemKey, onClick, setExpanded, setFocusedElement],
   )
 
   const handleKeyDown = useCallback(
@@ -108,7 +108,7 @@ export const TreeItem = memo(function TreeItem(
         el?.click()
       }
     },
-    [focused]
+    [focused],
   )
 
   useEffect(() => {

package/src/hooks/useArrayProp.ts

@@ -10,7 +10,7 @@ export type ArrayPropPrimitive = string | number | boolean | undefined | null
  */
 export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
-  defaultVal?: T[]
+  defaultVal?: T[],
 ): T[] {
   // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
   const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val])
@@ -20,6 +20,6 @@ export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
 
     // Improve performance: Keep object identify for a given hash of the value
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [__perf_hash__]
+    [__perf_hash__],
   )
 }

package/src/hooks/useClickOutside.ts

@@ -8,7 +8,7 @@ export type ClickOutsideListener = (event: MouseEvent) => void
 
 function _getElements(
   element: HTMLElement | null,
-  elementsArg: Array<HTMLElement | HTMLElement[] | null>
+  elementsArg: Array<HTMLElement | HTMLElement[] | null>,
 ): HTMLElement[] {
   const ret = [element]
 
@@ -29,7 +29,7 @@ function _getElements(
 export function useClickOutside(
   listener: ClickOutsideListener,
   elementsArg: Array<HTMLElement | HTMLElement[] | null> = EMPTY_ARRAY,
-  boundaryElement?: HTMLElement | null
+  boundaryElement?: HTMLElement | null,
 ): (el: HTMLElement | null) => void {
   const [element, setElement] = useState<HTMLElement | null>(null)
   const [elements, setElements] = useState(() => _getElements(element, elementsArg))

package/src/hooks/useCustomValidity.ts

@@ -5,7 +5,7 @@ import {useEffect} from 'react'
  */
 export function useCustomValidity(
   ref: {current: null | {setCustomValidity: (validity: string) => void}},
-  customValidity: string | undefined
+  customValidity: string | undefined,
 ): void {
   useEffect(() => {
     if (ref.current) {

package/src/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -15,8 +15,8 @@ describe('useMediaIndex', () => {
       renderToStaticMarkup(
         <ThemeProvider theme={studioTheme}>
           <Log />
-        </ThemeProvider>
-      )
+        </ThemeProvider>,
+      ),
     ).toBe('mediaIndex: 0')
   })
   it(`SSR to markup for hydration doesn't throw`, () => {
@@ -24,8 +24,8 @@ describe('useMediaIndex', () => {
       renderToString(
         <ThemeProvider theme={studioTheme}>
           <Log />
-        </ThemeProvider>
-      )
+        </ThemeProvider>,
+      ),
     ).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
   })
 })

package/src/hooks/usePrefersDark.hydration.test.tsx

@@ -1,4 +1,5 @@
 /** @jest-environment jsdom */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration
@@ -23,7 +24,7 @@ describe('usePrefersDark SSR hydration', () => {
         addEventListener: jest.fn(),
         removeEventListener: jest.fn(),
         matches: true,
-      } as any)
+      }) as any
   })
 
   afterAll(() => {

package/src/hooks/usePrefersReducedMotion.hydration.test.tsx

@@ -1,4 +1,5 @@
 /** @jest-environment jsdom */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration
@@ -23,7 +24,7 @@ describe('usePrefersReducedMotion SSR hydration', () => {
         addEventListener: jest.fn(),
         removeEventListener: jest.fn(),
         matches: true,
-      } as any)
+      }) as any
   })
 
   afterAll(() => {

package/src/lib/globalScope.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Gets the global scope instance in a given environment.
  *

package/src/primitives/_selectable/selectable.tsx

@@ -9,5 +9,5 @@ import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from '.
 export const Selectable = styled(Box)<SelectableStyleProps & ResponsiveRadiusStyleProps>(
   responsiveRadiusStyle,
   selectableBaseStyle,
-  selectableColorStyle
+  selectableColorStyle,
 )

package/src/primitives/_selectable/style.ts

@@ -33,7 +33,7 @@ export function selectableBaseStyle(): FlattenSimpleInterpolation {
 }
 
 export function selectableColorStyle(
-  props: SelectableStyleProps & ThemeProps
+  props: SelectableStyleProps & ThemeProps,
 ): FlattenSimpleInterpolation {
   const {$tone, theme} = props
   const {base, muted, selectable} = theme.sanity.color

package/src/primitives/avatar/avatar.tsx

@@ -29,7 +29,7 @@ export interface AvatarProps {
 
 const Root = styled.div<{$color: string; $size: AvatarSize[]}>(
   responsiveAvatarSizeStyle,
-  avatarStyle.root
+  avatarStyle.root,
 )
 
 const Arrow = styled.div(avatarStyle.arrow)
@@ -45,7 +45,7 @@ const Initials = styled.div(avatarStyle.initials)
  */
 export const Avatar = forwardRef(function Avatar(
   props: AvatarProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     as: asProp,
@@ -72,7 +72,7 @@ export const Avatar = forwardRef(function Avatar(
 
   const elementId = useId()
   const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
-    animateArrowFrom || arrowPositionProp || 'inside'
+    animateArrowFrom || arrowPositionProp || 'inside',
   )
 
   const [imageFailed, setImageFailed] = useState<boolean>(false)