@sanity/ui 1.7.2 → 1.7.4

package/src/primitives/stack/styles.ts

@@ -21,7 +21,7 @@ export function stackBaseStyle(): CSSObject {
 }
 
 export function responsiveStackSpaceStyle(
-  props: ResponsiveStackSpaceStyleProps & ThemeProps
+  props: ResponsiveStackSpaceStyleProps & ThemeProps,
 ): CSSObject[] {
   const {theme} = props
   const {media, space} = theme.sanity

package/src/primitives/switch/__workshop__/props.tsx

@@ -23,7 +23,7 @@ export default function PropsStory() {
         },
       },
     }),
-    [focusRingOffset, focusRingWidth, theme]
+    [focusRingOffset, focusRingWidth, theme],
   )
 
   return (

package/src/primitives/switch/styles.ts

@@ -122,7 +122,7 @@ export function switchTrackStyles(props: ThemeProps): FlattenSimpleInterpolation
 
 /* Thumb */
 export function switchThumbStyles(
-  props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps
+  props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
 ): FlattenSimpleInterpolation {
   const {$indeterminate, theme} = props
   const {input} = theme.sanity

package/src/primitives/switch/switch.tsx

@@ -27,7 +27,7 @@ const Thumb = styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switch
  */
 export const Switch = forwardRef(function Switch(
   props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>
+  forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
   const {checked, className, disabled, indeterminate, readOnly, style, ...restProps} = props
   const ref = useForwardedRef(forwardedRef)

package/src/primitives/text/__workshop__/colored.tsx

@@ -3,15 +3,16 @@ import {useSelect} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
 import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
 
-const ColoredText = styled(Text)<{color?: ThemeColorSpotKey}>(
-  (props: {color?: ThemeColorSpotKey; theme: Theme}) => {
-    const {spot} = props.theme.sanity.color
+const ColoredText = styled(Text)<{color?: ThemeColorSpotKey}>((props: {
+  color?: ThemeColorSpotKey
+  theme: Theme
+}) => {
+  const {spot} = props.theme.sanity.color
 
-    return css`
-      color: ${spot[props.color || 'gray']};
-    `
-  }
-)
+  return css`
+    color: ${spot[props.color || 'gray']};
+  `
+})
 
 export default function ColoredTextStory() {
   const theme = useTheme()

package/src/primitives/text/styles.ts

@@ -2,7 +2,7 @@ import {css, FlattenSimpleInterpolation} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
 export function textBaseStyle(
-  props: {$accent?: boolean; $muted?: boolean} & ThemeProps
+  props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
 ): FlattenSimpleInterpolation {
   const {$accent, $muted, theme} = props
   const {weights} = theme.sanity.fonts.text
@@ -40,7 +40,9 @@ export function textBaseStyle(
       }
 
       &: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/text/text.tsx

@@ -31,7 +31,7 @@ export interface TextProps {
 const Root = styled.div<ResponsiveFontStyleProps>(
   responsiveTextFont,
   responsiveTextAlignStyle,
-  textBaseStyle
+  textBaseStyle,
 )
 
 const SpanWithTextOverflow = styled.span`
@@ -47,7 +47,7 @@ const SpanWithTextOverflow = styled.span`
  */
 export const Text = forwardRef(function Text(
   props: TextProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     accent = false,

package/src/primitives/textArea/textArea.tsx

@@ -39,12 +39,12 @@ const InputRoot = styled.span`
 const Input = styled.textarea<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
   responsiveInputPaddingStyle,
   textInputBaseStyle,
-  textInputFontSizeStyle
+  textInputFontSizeStyle,
 )
 
 const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
   responsiveRadiusStyle,
-  textInputRepresentationStyle
+  textInputRepresentationStyle,
 )
 
 /**
@@ -52,7 +52,7 @@ const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresenta
  */
 export const TextArea = forwardRef(function TextArea(
   props: TextAreaProps & Omit<React.HTMLProps<HTMLTextAreaElement>, 'as'>,
-  forwardedRef: React.ForwardedRef<HTMLTextAreaElement>
+  forwardedRef: React.ForwardedRef<HTMLTextAreaElement>,
 ) {
   const {
     border = true,

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

@@ -58,7 +58,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
     'Icon (right)',
     WORKSHOP_ICON_SYMBOL_OPTIONS,
     'close',
-    'Props'
+    'Props',
   ) as IconSymbol
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const placeholder = useText('Placeholder', '', 'Props') || undefined
@@ -71,7 +71,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
 
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => setValue(event.currentTarget.value),
-    []
+    [],
   )
 
   return (

package/src/primitives/textInput/textInput.tsx

@@ -105,12 +105,12 @@ const Suffix = styled(Card).attrs({forwardedAs: 'span'})`
 const Input = styled.input<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
   responsiveInputPaddingStyle,
   textInputBaseStyle,
-  textInputFontSizeStyle
+  textInputFontSizeStyle,
 )
 
 const Presentation = styled.span<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
   responsiveRadiusStyle,
-  textInputRepresentationStyle
+  textInputRepresentationStyle,
 )
 
 const LeftBox = styled(Box)`
@@ -137,7 +137,7 @@ const RightCard = styled(Card)`
  */
 export const TextInput = forwardRef(function TextInput(
   props: TextInputProps & Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'prefix' | 'type'>,
-  forwardedRef: React.Ref<HTMLInputElement>
+  forwardedRef: React.Ref<HTMLInputElement>,
 ) {
   const {
     border = true,
@@ -193,7 +193,7 @@ export const TextInput = forwardRef(function TextInput(
       // Focus the input, in case focus has been lost when clicking the clear button
       ref.current?.focus()
     },
-    [onClear, ref]
+    [onClear, ref],
   )
 
   // Render prefix (memoized)
@@ -204,7 +204,7 @@ export const TextInput = forwardRef(function TextInput(
           <span>{prefix}</span>
         </Prefix>
       ),
-    [prefix, radius]
+    [prefix, radius],
   )
 
   // Render presentation (memoized)
@@ -250,7 +250,7 @@ export const TextInput = forwardRef(function TextInput(
       $hasClearButton,
       $hasPrefix,
       $hasSuffix,
-    ]
+    ],
   )
 
   // Render clear button (memoized)
@@ -263,7 +263,7 @@ export const TextInput = forwardRef(function TextInput(
 
         return v - 2
       }),
-    [padding]
+    [padding],
   )
   const clearButtonPadding = useMemo(
     () =>
@@ -274,11 +274,11 @@ export const TextInput = forwardRef(function TextInput(
 
         return v - 1
       }),
-    [padding]
+    [padding],
   )
   const clearButtonProps: TextInputClearButtonProps = useMemo(
     () => (typeof clearButton === 'object' ? clearButton : EMPTY_RECORD),
-    [clearButton]
+    [clearButton],
   )
   const clearButtonNode = useMemo(
     () =>
@@ -317,7 +317,7 @@ export const TextInput = forwardRef(function TextInput(
       handleClearMouseDown,
       radius,
       readOnly,
-    ]
+    ],
   )
 
   // Render suffix (memoized)
@@ -328,7 +328,7 @@ export const TextInput = forwardRef(function TextInput(
           <span>{suffix}</span>
         </Suffix>
       ),
-    [radius, suffix]
+    [radius, suffix],
   )
 
   return (

package/src/primitives/tooltip/tooltip.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   arrow,
   autoUpdate,
@@ -55,7 +56,7 @@ const Root = styled(Layer)`
  */
 export const Tooltip = forwardRef(function Tooltip(
   props: TooltipProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
   const theme = useTheme()
@@ -89,7 +90,7 @@ export const Tooltip = forwardRef(function Tooltip(
         fallbackPlacements,
         padding: 4,
         rootBoundary,
-      })
+      }),
     )
 
     // Define distance between reference and floating element
@@ -101,7 +102,7 @@ export const Tooltip = forwardRef(function Tooltip(
         boundary: boundaryElement || undefined,
         rootBoundary,
         padding: 4,
-      })
+      }),
     )
 
     // Place arrow
@@ -122,7 +123,7 @@ export const Tooltip = forwardRef(function Tooltip(
       top: y ?? 0,
       left: x ?? 0,
     }),
-    [strategy, x, y]
+    [strategy, x, y],
   )
 
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
@@ -193,7 +194,7 @@ export const Tooltip = forwardRef(function Tooltip(
       arrowRef.current = arrowEl
       update()
     },
-    [update]
+    [update],
   )
 
   const setFloating = useCallback(
@@ -201,7 +202,7 @@ export const Tooltip = forwardRef(function Tooltip(
       forwardedRef.current = node
       refs.setFloating(node)
     },
-    [forwardedRef, refs]
+    [forwardedRef, refs],
   )
 
   const childRef: ForwardedRef<HTMLElement | null> = (childProp as any)?.ref
@@ -217,7 +218,7 @@ export const Tooltip = forwardRef(function Tooltip(
       // childRef.current = node
       setReferenceElement(node)
     },
-    [childRef]
+    [childRef],
   )
 
   const child = useMemo(() => {

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -74,7 +74,7 @@ interface TooltipArrowProps {}
 
 export const TooltipArrow = forwardRef(function TooltipArrow(
   props: TooltipArrowProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {...restProps} = props
 

package/src/styles/border/borderStyle.ts

@@ -16,7 +16,7 @@ function border(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {media} = theme.sanity
 
   return _responsive(media, props.$border, (value) =>
-    value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}}
+    value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}},
   )
 }
 
@@ -25,7 +25,7 @@ function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {media} = theme.sanity
 
   return _responsive(media, props.$borderTop, (value) =>
-    value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}}
+    value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}},
   )
 }
 
@@ -34,7 +34,7 @@ function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {media} = theme.sanity
 
   return _responsive(media, props.$borderRight, (value) =>
-    value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}}
+    value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}},
   )
 }
 
@@ -43,7 +43,7 @@ function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {media} = theme.sanity
 
   return _responsive(media, props.$borderBottom, (value) =>
-    value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}}
+    value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}},
   )
 }
 
@@ -52,6 +52,6 @@ function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {media} = theme.sanity
 
   return _responsive(media, props.$borderLeft, (value) =>
-    value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}}
+    value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}},
   )
 }

package/src/styles/colorVars/colorVarsStyle.ts

@@ -7,7 +7,7 @@ import {ThemeColorBase, ThemeColorGenericState} from '../../theme'
 export function _colorVarsStyle(
   base: ThemeColorBase,
   color: ThemeColorGenericState,
-  checkered = false
+  checkered = false,
 ): CSSObject {
   return {
     // Base

package/src/styles/flex/flexItemStyle.ts

@@ -16,7 +16,7 @@ export function flexItemStyle(): Array<
 }
 
 export function responsiveFlexItemStyle(
-  props: ResponsiveFlexItemStyleProps & ThemeProps
+  props: ResponsiveFlexItemStyleProps & ThemeProps,
 ): CSSObject[] {
   const {theme} = props
   const {media} = theme.sanity

package/src/styles/flex/flexStyle.ts

@@ -23,7 +23,7 @@ export function responsiveFlexStyle(): Array<
 }
 
 export function responsiveFlexAlignStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps
+  props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
   const {theme} = props
   const {media} = theme.sanity
@@ -52,7 +52,7 @@ export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeP
 }
 
 export function responsiveFlexJustifyStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps
+  props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
   const {theme} = props
   const {media} = theme.sanity
@@ -63,7 +63,7 @@ export function responsiveFlexJustifyStyle(
 }
 
 export function responsiveFlexDirectionStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps
+  props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
   const {theme} = props
   const {media} = theme.sanity

package/src/styles/font/responsiveFont.ts

@@ -10,7 +10,7 @@ import {ResponsiveFontStyleProps} from './types'
  */
 export function responsiveFont(
   fontKey: ThemeFontKey,
-  props: ResponsiveFontStyleProps & ThemeProps
+  props: ResponsiveFontStyleProps & ThemeProps,
 ): CSSObject[] {
   const {$size, $weight, theme} = props
   const {fonts, media} = theme.sanity

package/src/styles/font/textAlignStyle.ts

@@ -8,7 +8,7 @@ import {ResponsiveTextAlignStyleProps} from './types'
  * @internal
  */
 export function responsiveTextAlignStyle(
-  props: ResponsiveTextAlignStyleProps & ThemeProps
+  props: ResponsiveTextAlignStyleProps & ThemeProps,
 ): CSSObject[] {
   const {theme} = props
 

package/src/styles/helpers.ts

@@ -28,7 +28,7 @@ export function rem(pixelValue: number): string | 0 {
 export function _responsive<T>(
   media: number[],
   values: T[],
-  callback: (value: T, index: number, array: T[]) => CSSObject
+  callback: (value: T, index: number, array: T[]) => CSSObject,
 ): CSSObject[] {
   const statements = values?.map(callback) || []
 
@@ -54,7 +54,7 @@ export function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?:
 export function _getResponsiveSpace(
   theme: Theme,
   props: string[],
-  spaceIndexes: number[] = EMPTY_ARRAY
+  spaceIndexes: number[] = EMPTY_ARRAY,
 ): CSSObject[] | null {
   if (!Array.isArray(spaceIndexes)) {
     throw new Error('the property must be array of numbers')
@@ -65,6 +65,6 @@ export function _getResponsiveSpace(
   }
 
   return _responsive(theme.sanity.media, spaceIndexes, (spaceIndex) =>
-    _fillCSSObject(props, rem(theme.sanity.space[spaceIndex]))
+    _fillCSSObject(props, rem(theme.sanity.space[spaceIndex])),
   )
 }

package/src/styles/input/responsiveInputPaddingStyle.ts

@@ -11,7 +11,7 @@ export interface TextInputResponsivePaddingStyleProps {
 }
 
 export function responsiveInputPaddingStyle(
-  props: TextInputResponsivePaddingStyleProps & ThemeProps
+  props: TextInputResponsivePaddingStyleProps & ThemeProps,
 ): CSSObject[] {
   const {$fontSize, $iconLeft, $iconRight, $padding, $space, theme} = props
   const {fonts, media, space: spaceScale} = theme.sanity
@@ -51,7 +51,7 @@ export function responsiveInputPaddingIconsStyle(
     $fontSize: number[]
     $padding: number[]
     $space: number[]
-  } & ThemeProps
+  } & ThemeProps,
 ): CSSObject[] {
   return responsiveInputPaddingStyle({...props, $iconLeft: true, $iconRight: true})
 }
@@ -61,7 +61,7 @@ export function responsiveInputPaddingIconLeftStyle(
     $fontSize: number[]
     $padding: number[]
     $space: number[]
-  } & ThemeProps
+  } & ThemeProps,
 ): CSSObject[] {
   return responsiveInputPaddingStyle({...props, $iconLeft: true})
 }
@@ -71,7 +71,7 @@ export function responsiveInputPaddingIconRightStyle(
     $fontSize: number[]
     $padding: number[]
     $space: number[]
-  } & ThemeProps
+  } & ThemeProps,
 ): CSSObject[] {
   return responsiveInputPaddingStyle({...props, $iconRight: true})
 }

package/src/styles/input/textInputStyle.ts

@@ -38,7 +38,7 @@ export function textInputRootStyle(): FlattenSimpleInterpolation {
 }
 
 export function textInputBaseStyle(
-  props: TextInputInputStyleProps & ThemeProps
+  props: TextInputInputStyleProps & ThemeProps,
 ): FlattenSimpleInterpolation {
   const {theme, $scheme, $tone, $weight} = props
   const font = theme.sanity.fonts.text
@@ -126,7 +126,7 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
 }
 
 export function textInputRepresentationStyle(
-  props: TextInputRepresentationStyleProps & ThemeProps
+  props: TextInputRepresentationStyleProps & ThemeProps,
 ): FlattenSimpleInterpolation {
   const {$hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
   const {focusRing, input} = theme.sanity

package/src/styles/margin/marginStyle.ts

@@ -4,7 +4,7 @@ import {ThemeProps} from '../types'
 import {ResponsiveMarginStyleProps} from './types'
 
 export function responsiveMarginStyle(
-  props: ResponsiveMarginStyleProps & ThemeProps
+  props: ResponsiveMarginStyleProps & ThemeProps,
 ): CSSObject[][] {
   const {theme} = props
 

package/src/styles/padding/paddingStyle.ts

@@ -4,7 +4,7 @@ import {ThemeProps} from '../types'
 import {ResponsivePaddingStyleProps} from './types'
 
 export function responsivePaddingStyle(
-  props: ResponsivePaddingStyleProps & ThemeProps
+  props: ResponsivePaddingStyleProps & ThemeProps,
 ): CSSObject[][] {
   const {theme} = props
 

package/src/theme/__workshop__/color.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {Box, Card, Tree, TreeItem, useRootTheme} from '@sanity/ui'
 
 export default function ColorStory() {

package/src/theme/lib/theme/color/button/createButtonModes.ts

@@ -10,7 +10,7 @@ export function createButtonModes(
   base: ThemeColorBase,
   dark: boolean,
   solid: ThemeColorSolid,
-  muted: ThemeColorMuted
+  muted: ThemeColorMuted,
 ): ThemeColorButton {
   return {
     default: createButtonTones(opts, base, dark, solid, muted, 'default'),

package/src/theme/lib/theme/color/button/createButtonTones.ts

@@ -10,7 +10,7 @@ export function createButtonTones(
   dark: boolean,
   solid: ThemeColorSolid,
   muted: ThemeColorMuted,
-  mode: ThemeColorButtonModeKey
+  mode: ThemeColorButtonModeKey,
 ): ThemeColorButtonTones {
   return {
     default: opts.button({

package/src/theme/lib/theme/color/card/createCardStates.ts

@@ -11,7 +11,7 @@ export function createCardStates(
   dark: boolean,
   name: ThemeColorName,
   solid: ThemeColorSolid,
-  muted: ThemeColorMuted
+  muted: ThemeColorMuted,
 ): ThemeColorCard {
   return {
     enabled: opts.card({

package/src/theme/lib/theme/color/factory.ts

@@ -87,7 +87,7 @@ export type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
  * @public
  */
 export function createColorTheme(
-  partialOpts: PartialThemeColorBuilderOpts = {}
+  partialOpts: PartialThemeColorBuilderOpts = {},
 ): ThemeColorSchemes {
   const builders: ThemeColorBuilderOpts = {...defaultOpts, ...partialOpts}
 
@@ -117,7 +117,7 @@ function _createColorScheme(opts: ThemeColorBuilderOpts, dark: boolean): ThemeCo
 function _createColor(
   opts: ThemeColorBuilderOpts,
   dark: boolean,
-  name: ThemeColorName
+  name: ThemeColorName,
 ): ThemeColor {
   const base = opts.base({dark, name})
   const solid = createSolidTones(opts, base, dark, name)

package/src/theme/lib/theme/color/input/createInputModes.ts

@@ -9,7 +9,7 @@ export function createInputModes(
   base: ThemeColorBase,
   dark: boolean,
   solid: ThemeColorSolid,
-  muted: ThemeColorMuted
+  muted: ThemeColorMuted,
 ): ThemeColorInput {
   return {
     default: {

package/src/theme/lib/theme/color/muted/createMuted.ts

@@ -7,7 +7,7 @@ export function createMutedTones(
   opts: ThemeColorBuilderOpts,
   base: ThemeColorBase,
   dark: boolean,
-  name: ThemeColorName
+  name: ThemeColorName,
 ): ThemeColorMuted {
   return {
     default: {

package/src/theme/lib/theme/color/selectable/createSelectableTones.ts

@@ -9,7 +9,7 @@ export function createSelectableTones(
   base: ThemeColorBase,
   dark: boolean,
   solid: ThemeColorSolid,
-  muted: ThemeColorMuted
+  muted: ThemeColorMuted,
 ): ThemeColorSelectable {
   return {
     default: _createSelectableStates(opts, base, dark, solid, muted, 'default'),
@@ -26,7 +26,7 @@ function _createSelectableStates(
   dark: boolean,
   solid: ThemeColorSolid,
   muted: ThemeColorMuted,
-  tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+  tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical',
 ): ThemeColorSelectableStates {
   return {
     enabled: opts.selectable({

package/src/theme/lib/theme/color/solid/createSolidTones.ts

@@ -7,7 +7,7 @@ export function createSolidTones(
   opts: ThemeColorBuilderOpts,
   base: ThemeColorBase,
   dark: boolean,
-  name: ThemeColorName
+  name: ThemeColorName,
 ): ThemeColorSolid {
   return {
     default: {

package/src/theme/lib/theme/color/spot/createSpot.ts

@@ -5,7 +5,7 @@ import {ThemeColorSpot} from './types'
 export function createSpot(
   opts: ThemeColorBuilderOpts,
   base: ThemeColorBase,
-  dark: boolean
+  dark: boolean,
 ): ThemeColorSpot {
   return {
     gray: opts.spot({base, dark, key: 'gray'}),

package/src/theme/lib/theme/shadow.ts

@@ -7,7 +7,7 @@ export type BoxShadow = [
   number,
   number,
   number,
-  number
+  number,
 ]
 
 /**

package/src/theme/lib/theme/theme.ts

@@ -10,7 +10,7 @@ import {ThemeShadow} from './shadow'
  */
 export interface BaseTheme<
   // eslint-disable-next-line @typescript-eslint/ban-types
-  Styles extends {} = {}
+  Styles extends {} = {},
 > {
   avatar: ThemeAvatar
   button: {