@sanity/ui 1.7.3 → 1.7.6

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)

package/src/primitives/avatar/avatarCounter.tsx

@@ -34,7 +34,9 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
     color: inherit;
     color: var(--card-fg-color);
     background: var(--card-bg-color);
-    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);
+    box-shadow:
+      0 0 0 1px var(--card-bg-color),
+      inset 0 0 0 1.5px var(--card-hairline-hard-color);
     padding: 0 ${rem(theme.sanity.space[2])};
 
     &:not([hidden]) {
@@ -45,7 +47,7 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
 
 const Root = styled.div<{$size: AvatarSize[]}>(
   _responsiveAvatarCounterSizeStyle,
-  _avatarCounterBaseStyle
+  _avatarCounterBaseStyle,
 )
 
 /**
@@ -63,7 +65,7 @@ export interface AvatarCounterProps {
  */
 export const AvatarCounter = forwardRef(function AvatarCounter(
   props: AvatarCounterProps,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const {count, size: sizeProp = 0} = props
   const size = useArrayProp(sizeProp)

package/src/primitives/avatar/avatarStack.tsx

@@ -58,7 +58,7 @@ export interface AvatarStackProps {
  */
 export const AvatarStack = forwardRef(function AvatarStack(
   props: AvatarStackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     children: childrenProp,
@@ -67,7 +67,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     ...restProps
   } = props
   const children = childrenToElementArray(childrenProp).filter(
-    (child) => typeof child !== 'string'
+    (child) => typeof child !== 'string',
   ) as React.ReactElement[]
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)

package/src/primitives/avatar/styles.ts

@@ -98,7 +98,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
 }
 
 export function responsiveAvatarSizeStyle(
-  props: ResponsiveAvatarSizeStyleProps & ThemeProps
+  props: ResponsiveAvatarSizeStyleProps & ThemeProps,
 ): CSSObject[] {
   const {theme} = props
   const {avatar, media} = theme.sanity

package/src/primitives/badge/badge.tsx

@@ -21,7 +21,7 @@ export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
 
 const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
   responsiveRadiusStyle,
-  badgeStyle
+  badgeStyle,
 )
 
 /**
@@ -29,7 +29,7 @@ const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
  */
 export const Badge = forwardRef(function Badge(
   props: BadgeProps & React.HTMLProps<HTMLDivElement>,
-  ref
+  ref,
 ) {
   const {
     children,

package/src/primitives/box/box.tsx

@@ -46,7 +46,7 @@ const Root = styled.div<
   responsiveBoxStyle,
   responsiveGridItemStyle,
   responsiveMarginStyle,
-  responsivePaddingStyle
+  responsivePaddingStyle,
 )
 
 /**
@@ -54,7 +54,7 @@ const Root = styled.div<
  */
 export const Box = forwardRef(function Box(
   props: BoxProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     as: asProp = 'div',

package/src/primitives/button/button.tsx

@@ -59,7 +59,7 @@ const LoadingBox = styled.div`
  */
 export const Button = forwardRef(function Button(
   props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as'>,
-  ref: React.ForwardedRef<HTMLButtonElement>
+  ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
     children,
@@ -111,7 +111,7 @@ export const Button = forwardRef(function Button(
       paddingLeft,
       paddingRight,
     }),
-    [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]
+    [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],
   )
 
   return (

package/src/primitives/button/styles.ts

@@ -46,7 +46,7 @@ const buttonTheme = {border: {width: 1}}
  * @internal
  */
 export function buttonColorStyles(
-  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps
+  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
 ): CSSObject[] {
   const {$mode, theme} = props
   const {focusRing} = theme.sanity

package/src/primitives/card/__workshop__/asComponent.tsx

@@ -3,7 +3,7 @@ import {forwardRef} from 'react'
 
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
-  ref: React.ForwardedRef<HTMLAnchorElement>
+  ref: React.ForwardedRef<HTMLAnchorElement>,
 ): React.ReactElement {
   const {children, req, ...restProps} = props
 

package/src/primitives/card/__workshop__/selected.tsx

@@ -14,23 +14,27 @@ import {
 import {useBoolean} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
 
-const TextWithTone = styled(Text)<{$tone: ThemeColorToneKey}>(
-  ({$tone, theme}: {$tone: ThemeColorToneKey; theme: Theme}) => {
-    const tone = theme.sanity.color.solid[$tone]
+const TextWithTone = styled(Text)<{$tone: ThemeColorToneKey}>(({
+  $tone,
+  theme,
+}: {
+  $tone: ThemeColorToneKey
+  theme: Theme
+}) => {
+  const tone = theme.sanity.color.solid[$tone]
 
-    return css`
-      &:not([data-selected]) {
-        --card-fg-color: ${tone ? tone.enabled.bg : undefined};
-        --card-muted-fg-color: ${tone ? tone.enabled.bg : undefined};
-      }
+  return css`
+    &:not([data-selected]) {
+      --card-fg-color: ${tone ? tone.enabled.bg : undefined};
+      --card-muted-fg-color: ${tone ? tone.enabled.bg : undefined};
+    }
 
-      [data-ui='Card']:disabled & {
-        --card-fg-color: inherit;
-        --card-muted-fg-color: inherit;
-      }
-    `
-  }
-)
+    [data-ui='Card']:disabled & {
+      --card-fg-color: inherit;
+      --card-muted-fg-color: inherit;
+    }
+  `
+})
 
 export default function SelectedStory() {
   const disabled = useBoolean('Disabled', false) || false

package/src/primitives/card/card.tsx

@@ -52,7 +52,7 @@ const Root = styled(Box)<
  */
 export const Card = forwardRef(function Card(
   props: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     __unstable_checkered: checkered = false,

package/src/primitives/card/styles.ts

@@ -5,7 +5,7 @@ import {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'
 import {CardStyleProps} from './types'
 
 export function cardStyle(
-  props: CardStyleProps & ThemeProps
+  props: CardStyleProps & ThemeProps,
 ): Array<FlattenSimpleInterpolation | (() => FlattenSimpleInterpolation)> {
   return [cardBaseStyle(props), cardColorStyle(props)]
 }

package/src/primitives/checkbox/checkbox.tsx

@@ -20,7 +20,7 @@ const Input = styled.input(inputElementStyles)
  */
 export const Checkbox = forwardRef(function Checkbox(
   props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & CheckboxProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>
+  forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
   const {
     checked,

package/src/primitives/code/code.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {forwardRef} from 'react'
 import Refractor from 'react-refractor'
 import styled from 'styled-components'
@@ -22,7 +23,7 @@ const Root = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeF
  */
 export const Code = forwardRef(function Code(
   props: CodeProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>
+  ref: React.ForwardedRef<HTMLElement>,
 ) {
   const {children, language: languageProp, size = 2, weight, ...restProps} = props
   const language = typeof languageProp === 'string' ? languageProp : undefined

package/src/primitives/container/container.tsx

@@ -13,7 +13,7 @@ export interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
 
 const Root = styled(Box)<ResponsiveWidthStyleProps>(
   containerBaseStyle,
-  responsiveContainerWidthStyle
+  responsiveContainerWidthStyle,
 )
 
 /**
@@ -21,7 +21,7 @@ const Root = styled(Box)<ResponsiveWidthStyleProps>(
  */
 export const Container = forwardRef(function Container(
   props: ContainerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {as, width = 2, ...restProps} = props
 

package/src/primitives/container/styles.ts

@@ -12,7 +12,7 @@ export function containerBaseStyle(): CSSObject {
 }
 
 export function responsiveContainerWidthStyle(
-  props: ResponsiveWidthStyleProps & ThemeProps
+  props: ResponsiveWidthStyleProps & ThemeProps,
 ): CSSObject[] {
   const {theme} = props
   const {container, media} = theme.sanity

package/src/primitives/flex/flex.tsx

@@ -22,7 +22,7 @@ export interface FlexProps
 
 const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
   flexItemStyle,
-  responsiveFlexStyle
+  responsiveFlexStyle,
 )
 
 /**
@@ -30,7 +30,7 @@ const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
  */
 export const Flex = forwardRef(function Flex(
   props: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
 

package/src/primitives/grid/grid.tsx

@@ -17,7 +17,7 @@ const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
  */
 export const Grid = forwardRef(function Grid(
   props: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
     props

package/src/primitives/heading/heading.tsx

@@ -47,7 +47,7 @@ const SpanWithTextOverflow = styled.span`
  */
 export const Heading = forwardRef(function Heading(
   props: HeadingProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>
+  ref: React.ForwardedRef<HTMLElement>,
 ) {
   const {
     accent = false,

package/src/primitives/heading/styles.ts

@@ -3,7 +3,7 @@ import {ThemeProps} from '../../styles'
 import {HeadingStyleProps} from './types'
 
 export function headingBaseStyle(
-  props: HeadingStyleProps & ThemeProps
+  props: HeadingStyleProps & ThemeProps,
 ): FlattenSimpleInterpolation {
   const {$accent, $muted, theme} = props
 
@@ -36,7 +36,9 @@ export function headingBaseStyle(
       }
 
       &:focus {
-        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);
+        box-shadow:
+          0 0 0 1px var(--card-bg-color),
+          0 0 0 3px var(--card-focus-ring-color);
       }
 
       &:focus:not(:focus-visible) {

package/src/primitives/helpers.ts

@@ -1,11 +1,11 @@
 import {isElement, isFragment} from 'react-is'
 
 export function childrenToElementArray(
-  children: React.ReactNode
+  children: React.ReactNode,
 ): Array<React.ReactElement | string> {
   const childrenArray = Array.isArray(children) ? children : [children]
 
   return childrenArray.filter(
-    (node) => isElement(node) || isFragment(node) || typeof node === 'string'
+    (node) => isElement(node) || isFragment(node) || typeof node === 'string',
   ) as Array<React.ReactElement | string>
 }

package/src/primitives/inline/inline.tsx

@@ -20,7 +20,7 @@ const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlin
  */
 export const Inline = forwardRef(function Inline(
   props: InlineProps & React.HTMLProps<HTMLDivElement>,
-  ref
+  ref,
 ) {
   const {as, children: childrenProp, space, ...restProps} = props
 
@@ -29,7 +29,7 @@ export const Inline = forwardRef(function Inline(
       childrenToElementArray(childrenProp)
         .filter(Boolean)
         .map((child, idx) => <div key={idx}>{child}</div>),
-    [childrenProp]
+    [childrenProp],
   )
 
   return (

package/src/primitives/kbd/kbd.tsx

@@ -34,7 +34,7 @@ const Root = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdSt
  */
 export const KBD = forwardRef(function KBD(
   props: KBDProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {children, fontSize = 1, padding = 1, radius = 2, ...restProps} = props
 

package/src/primitives/label/label.tsx

@@ -44,7 +44,7 @@ const SpanWithTextOverflow = styled.span`
  */
 export const Label = forwardRef(function Label(
   props: LabelProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     accent,

package/src/primitives/label/styles.ts

@@ -2,7 +2,7 @@ import {css, FlattenSimpleInterpolation} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
 export function labelBaseStyle(
-  props: {$accent?: boolean; $muted: boolean} & ThemeProps
+  props: {$accent?: boolean; $muted: boolean} & ThemeProps,
 ): FlattenSimpleInterpolation {
   const {$accent, $muted, theme} = props
   const {fonts} = theme.sanity

package/src/primitives/popover/__workshop__/RecursiveStory.tsx

@@ -52,7 +52,7 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
       if (!isTopLayer) return
       if (event.key === 'Escape' && onClose) onClose()
     },
-    [isTopLayer, onClose]
+    [isTopLayer, onClose],
   )
 
   return (

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

@@ -1,4 +1,4 @@
-import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {ReactElement, useRef, useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,

package/src/primitives/popover/helpers.ts

@@ -27,6 +27,6 @@ export function calcMaxWidth(params: {
 
   return Math.min(
     currentWidth ?? Infinity,
-    (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2
+    (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2,
   )
 }

package/src/primitives/popover/popover.tsx

@@ -74,7 +74,7 @@ export const Popover = memo(
   forwardRef(function Popover(
     props: PopoverProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
-    ref: React.ForwardedRef<HTMLDivElement>
+    ref: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {
     const theme = useTheme()
     const boundaryElementContext = useBoundaryElement()
@@ -175,7 +175,7 @@ export const Popover = memo(
             fallbackPlacements,
             padding: DEFAULT_POPOVER_PADDING,
             rootBoundary,
-          })
+          }),
         )
       }
 
@@ -183,7 +183,7 @@ export const Popover = memo(
       ret.push(
         offset({
           mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
-        })
+        }),
       )
 
       // Track sizes
@@ -207,7 +207,7 @@ export const Popover = memo(
               if (constrainSize) {
                 elements.floating.style.maxWidth = `${Math.min(
                   availableWidth,
-                  _maxWidth ?? Infinity
+                  _maxWidth ?? Infinity,
                 )}px`
 
                 elements.floating.style.maxHeight = `${availableHeight}px`
@@ -218,7 +218,7 @@ export const Popover = memo(
             margins,
             matchReferenceWidth,
             padding: DEFAULT_POPOVER_PADDING,
-          })
+          }),
         )
       }
 
@@ -229,7 +229,7 @@ export const Popover = memo(
             boundary: floatingBoundary || undefined,
             rootBoundary,
             padding: DEFAULT_POPOVER_PADDING,
-          })
+          }),
         )
       }
 
@@ -239,7 +239,7 @@ export const Popover = memo(
           arrow({
             element: arrowRef,
             padding: DEFAULT_POPOVER_PADDING,
-          })
+          }),
         )
       }
 
@@ -248,7 +248,7 @@ export const Popover = memo(
           boundary: referenceBoundary || undefined,
           padding: DEFAULT_POPOVER_PADDING,
           strategy: 'referenceHidden',
-        })
+        }),
       )
 
       return ret
@@ -283,7 +283,7 @@ export const Popover = memo(
         forwardedRef.current = node
         refs.setFloating(node)
       },
-      [forwardedRef, refs]
+      [forwardedRef, refs],
     )
 
     const setReference = useCallback(
@@ -299,7 +299,7 @@ export const Popover = memo(
           childRef.current = node
         }
       },
-      [childProp, refs]
+      [childProp, refs],
     )
 
     const child = useMemo(() => {
@@ -373,7 +373,7 @@ export const Popover = memo(
         {child}
       </>
     )
-  })
+  }),
 )
 
 Popover.displayName = 'Popover'

package/src/primitives/popover/popoverArrow.tsx

@@ -57,7 +57,7 @@ const ShapePath = styled.path`
 
 export const PopoverArrow = forwardRef(function PopoverArrow(
   props: Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
     <Root data-ui="Popover__arrow" {...props} ref={ref}>

package/src/primitives/popover/popoverCard.tsx

@@ -43,7 +43,7 @@ export const PopoverCard = memo(
       x: number | null
       y: number | null
     } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
-    ref: React.ForwardedRef<HTMLDivElement>
+    ref: React.ForwardedRef<HTMLDivElement>,
   ) {
     const {
       __unstable_margins: marginsProp,
@@ -72,7 +72,7 @@ export const PopoverCard = memo(
     // Get margins: [top, right, bottom, left]
     const margins: PopoverMargins = useMemo(
       () => marginsProp || DEFAULT_POPOVER_MARGINS,
-      [marginsProp]
+      [marginsProp],
     )
 
     // Translate according to margins
@@ -88,7 +88,7 @@ export const PopoverCard = memo(
         zIndex,
         ...style,
       }),
-      [strategy, style, width, x, y, zIndex]
+      [strategy, style, width, x, y, zIndex],
     )
 
     const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
@@ -128,7 +128,7 @@ export const PopoverCard = memo(
         {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
       </Root>
     )
-  })
+  }),
 )
 
 PopoverCard.displayName = 'PopoverCard'

package/src/primitives/radio/radio.tsx

@@ -18,7 +18,7 @@ const Input = styled.input(inputElementStyle)
  */
 export const Radio = forwardRef(function Radio(
   props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>
+  forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
   const {className, disabled, style, customValidity, readOnly, ...restProps} = props
   const ref = useForwardedRef(forwardedRef)

package/src/primitives/select/select.tsx

@@ -33,7 +33,7 @@ const IconBox = styled(Box)(selectStyle.iconBox)
  */
 export const Select = forwardRef(function Select(
   props: SelectProps & Omit<React.HTMLProps<HTMLSelectElement>, 'as'>,
-  forwardedRef: React.ForwardedRef<HTMLSelectElement>
+  forwardedRef: React.ForwardedRef<HTMLSelectElement>,
 ) {
   const {
     children,