@sanity/ui 2.15.8 → 2.15.9

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

@@ -1,9 +1,11 @@
 /** @jest-environment jsdom */
-import {screen, act, fireEvent} from '@testing-library/react'
 import '../../../../test/mocks/resizeObserver.mock'
 import '../../../../test/mocks/matchMedia.mock'
+
+import {act, fireEvent, screen} from '@testing-library/react'
+
 import {render} from '../../../../test'
-import {Text, Button} from '../../primitives'
+import {Button, Text} from '../../primitives'
 import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
 
 // Fake timers using Jest

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

@@ -2,11 +2,11 @@ import {
   arrow,
   autoUpdate,
   flip,
+  type Middleware,
   offset,
+  type RootBoundary,
   shift,
   useFloating,
-  type Middleware,
-  type RootBoundary,
 } from '@floating-ui/react-dom'
 import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
@@ -15,15 +15,16 @@ import {
   forwardRef,
   useCallback,
   useEffect,
-  useMemo,
-  useRef,
-  useState,
   useId,
   useImperativeHandle,
   useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
 } from 'react'
 import {styled} from 'styled-components'
 import {useEffectEvent} from 'use-effect-event'
+
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'

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

@@ -1,7 +1,8 @@
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {type MotionProps, motion} from 'framer-motion'
+import {motion, type MotionProps} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
+
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import {Placement, Radius} from '../../types'
 import {Arrow} from '../../utils'

package/src/core/primitives/tooltip/tooltipDelayGroup/index.ts

@@ -1,4 +1,4 @@
-export * from './useTooltipDelayGroup'
 export * from './tooltipDelayGroupContext'
 export * from './tooltipDelayGroupProvider'
 export * from './types'
+export * from './useTooltipDelayGroup'

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

@@ -1,4 +1,5 @@
 import {useMemo} from 'react'
+
 import {useDelayedState} from '../../../hooks/useDelayedState'
 import {Delay} from '../../types'
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'

package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
 import {TooltipDelayGroupContextValue} from './types'
 

package/src/core/styles/border/borderStyle.ts

@@ -1,4 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'

package/src/core/styles/box/boxStyle.ts

@@ -1,5 +1,6 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {Property} from 'csstype'
+
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBoxStyleProps} from './types'

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

@@ -1,5 +1,4 @@
-import {ThemeColorState_v2, ThemeColorCard_v2} from '@sanity/ui/theme'
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, ThemeColorCard_v2, ThemeColorState_v2} from '@sanity/ui/theme'
 
 /**
  * @internal

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

@@ -1,4 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+
 import {EMPTY_ARRAY} from '../../constants'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'

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

@@ -1,5 +1,6 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive} from '../helpers'
+
+import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexStyleProps} from './types'
 

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

@@ -1,3 +1,3 @@
-export * from './flexStyle'
 export * from './flexItemStyle'
+export * from './flexStyle'
 export * from './types'

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

@@ -21,4 +21,5 @@ export interface ResponsiveFlexItemStyleProps {
 /**
  * @internal
  */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface FlexItemStyleProps extends ResponsiveFlexItemStyleProps {}

package/src/core/styles/font/codeFontStyle.ts

@@ -1,4 +1,5 @@
 import {CSSObject} from '@sanity/ui/theme'
+
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/core/styles/font/headingFontStyle.ts

@@ -1,4 +1,5 @@
 import {CSSObject} from '@sanity/ui/theme'
+
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/core/styles/font/labelFontStyle.ts

@@ -1,4 +1,5 @@
 import {CSSObject} from '@sanity/ui/theme'
+
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/core/styles/font/responsiveFont.ts

@@ -1,6 +1,6 @@
-import {ThemeFontSize, ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
-import {CSSObject} from '@sanity/ui/theme'
-import {rem, _responsive} from '../helpers'
+import {CSSObject, getTheme_v2, ThemeFontKey, ThemeFontSize} from '@sanity/ui/theme'
+
+import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFontStyleProps} from './types'
 

package/src/core/styles/font/textAlignStyle.ts

@@ -1,4 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveTextAlignStyleProps} from './types'

package/src/core/styles/font/textFontStyle.ts

@@ -1,4 +1,5 @@
 import {CSSObject} from '@sanity/ui/theme'
+
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

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

@@ -1,4 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
+
 import {TextAlign} from '../../types'
 
 /**

package/src/core/styles/grid/gridItemStyle.ts

@@ -1,4 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridItemStyleProps} from './types'

package/src/core/styles/grid/gridStyle.ts

@@ -1,5 +1,6 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive} from '../helpers'
+
+import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridStyleProps} from './types'
 

package/src/core/styles/grid/index.ts

@@ -1,3 +1,3 @@
-export * from './gridStyle'
 export * from './gridItemStyle'
+export * from './gridStyle'
 export * from './types'

package/src/core/styles/helpers.ts

@@ -1,5 +1,5 @@
-import {Theme, getTheme_v2} from '@sanity/ui/theme'
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2, Theme} from '@sanity/ui/theme'
+
 import {EMPTY_ARRAY} from '../constants'
 
 /**

package/src/core/styles/input/responsiveInputPaddingStyle.ts

@@ -1,5 +1,6 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive} from '../helpers'
+
+import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 
 export interface TextInputResponsivePaddingStyleProps {

package/src/core/styles/input/textInputStyle.ts

@@ -1,9 +1,9 @@
-import {ThemeColorSchemeKey, ThemeFontWeightKey, getTheme_v2} from '@sanity/ui/theme'
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2, ThemeColorSchemeKey, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {css} from 'styled-components'
+
 import {CardTone} from '../../types'
 import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
-import {rem, _responsive} from '../helpers'
+import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 
 /**

package/src/core/styles/margin/marginStyle.ts

@@ -1,4 +1,5 @@
 import {CSSObject} from '@sanity/ui/theme'
+
 import {_getResponsiveSpace} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveMarginStyleProps} from './types'

package/src/core/styles/margin/marginsStyle.test.ts

@@ -1,6 +1,7 @@
 /** @jest-environment jsdom */
 
 import {buildTheme, getScopedTheme} from '@sanity/ui/theme'
+
 import {responsiveMarginStyle} from './marginStyle'
 
 const theme = getScopedTheme(buildTheme(), 'light', 'default')

package/src/core/styles/padding/paddingStyle.test.ts

@@ -1,6 +1,7 @@
 /** @jest-environment jsdom */
 
 import {buildTheme, getScopedTheme} from '@sanity/ui/theme'
+
 import {responsivePaddingStyle} from './paddingStyle'
 
 const theme = getScopedTheme(buildTheme(), 'light', 'default')

package/src/core/styles/padding/paddingStyle.ts

@@ -1,4 +1,5 @@
 import {CSSObject} from '@sanity/ui/theme'
+
 import {_getResponsiveSpace} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsivePaddingStyleProps} from './types'

package/src/core/styles/radius/radiusStyle.ts

@@ -1,4 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+
 import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveRadiusStyleProps} from './types'

package/src/core/styles/shadow/shadowStyle.ts

@@ -1,7 +1,7 @@
-import {ThemeBoxShadow, ThemeShadow, getTheme_v2} from '@sanity/ui/theme'
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2, ThemeBoxShadow, ThemeShadow} from '@sanity/ui/theme'
+
 import {EMPTY_RECORD} from '../../constants'
-import {rem, _responsive} from '../helpers'
+import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveShadowStyleProps} from './types'
 

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

@@ -1,5 +1,5 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css, styled} from 'styled-components'
-import {getTheme_v2} from '../../../../theme'
 
 export const Root = styled.div((props) => {
   const {button, card, input} = getTheme_v2(props.theme)

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

@@ -1,18 +1,17 @@
 import {
-  ThemeColorButtonTone_v2,
-  ThemeColorCard_v2,
-  ThemeColorInputMode_v2,
-  ThemeColorState_v2,
-} from '@sanity/ui/theme'
-import {
+  buildTheme,
   THEME_COLOR_BUTTON_MODES,
   THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_STATE_TONES,
+  ThemeColorButtonTone_v2,
+  ThemeColorCard_v2,
   ThemeColorCardToneKey,
+  ThemeColorInputMode_v2,
   ThemeColorInputModeKey,
+  ThemeColorState_v2,
 } from '@sanity/ui/theme'
-import {buildTheme} from '@sanity/ui/theme'
+
 import {rem} from '../../../styles'
 import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
@@ -171,6 +170,7 @@ function StatePreview(props: {theme: ThemeColorState_v2}) {
             display: 'flex',
             gap: 'var(--space-1)',
           }}
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
           tabIndex={0}
         >
           <div style={{flex: 'none'}}>Card</div>
@@ -280,6 +280,7 @@ function ButtonPreview(props: {theme: ThemeColorButtonTone_v2}) {
       <div
         className="button"
         style={{flex: 1, padding: 'var(--space-2)', display: 'flex', gap: 4}}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
       >
         <div style={{flex: 'none'}}>Button</div>
@@ -442,10 +443,18 @@ function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInp
         } as any
       }
     >
-      <div className="input" tabIndex={0}>
+      <div
+        className="input"
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+      >
         <span>Text ({mode})</span> <span className="placeholder">Placeholder</span>
       </div>
-      <div className="input readOnly" tabIndex={0}>
+      <div
+        className="input readOnly"
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+      >
         <span>Text ({mode})</span>
       </div>
       <div className="input disabled">

package/src/core/theme/__workshop__/canvas.tsx

@@ -10,18 +10,18 @@ import {
   useRootTheme,
 } from '@sanity/ui'
 import {
+  getContrastRatio,
+  mix,
+  parseColor,
+  rgbToHex,
+  ThemeColorButton_v2,
   ThemeColorButtonMode_v2,
   ThemeColorButtonTone_v2,
-  ThemeColorButton_v2,
   ThemeColorCard_v2,
   ThemeColorScheme_v2,
-  ThemeColorSelectableTone_v2,
   ThemeColorSelectable_v2,
+  ThemeColorSelectableTone_v2,
   ThemeColorState_v2,
-  getContrastRatio,
-  mix,
-  parseColor,
-  rgbToHex,
 } from '@sanity/ui/theme'
 import {useBoolean} from '@sanity/ui-workshop'
 import {createContext, useContext} from 'react'
@@ -175,6 +175,7 @@ function ColorBase(props: {color: ThemeColorCard_v2}) {
 
       <Text accent>Accent</Text>
       <Text>
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
         <a href="#">Link</a>
       </Text>
       <Text>

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

@@ -1,16 +1,17 @@
 import {CropIcon} from '@sanity/icons'
 import {
   THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_STATES,
   THEME_COLOR_STATE_TONES,
-  ThemeColorCardToneKey,
+  THEME_COLOR_STATES,
   ThemeColorCard_v2,
-  ThemeColorSchemeKey,
+  ThemeColorCardToneKey,
   ThemeColorScheme_v2,
+  ThemeColorSchemeKey,
   ThemeColorState_v2,
 } from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {CSSProperties} from 'react'
+
 import {Badge, Box, Flex, KBD, Stack, Text} from '../../../primitives'
 import {useRootTheme} from '../../useRootTheme'
 
@@ -148,6 +149,7 @@ function DebugState() {
         Accent
       </Text>
       <Text size={1}>
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
         <a href="#" style={{color: 'var(--card-link-fg-color)'}}>
           Link
         </a>

package/src/core/theme/index.ts

@@ -1,5 +1,5 @@
 export * from './themeColorProvider'
 export * from './themeProvider'
+export * from './types'
 export * from './useRootTheme'
 export * from './useTheme'
-export * from './types'

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

@@ -1,6 +1,7 @@
 /** @jest-environment jsdom */
 
 import {buildTheme} from '@sanity/ui/theme'
+
 import {render} from '../../../test'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'

package/src/core/theme/themeColorProvider.tsx

@@ -1,4 +1,5 @@
 import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+
 import {ThemeProvider} from './themeProvider'
 import {useRootTheme} from './useRootTheme'
 

package/src/core/theme/themeProvider.tsx

@@ -1,12 +1,13 @@
 import {
+  getScopedTheme,
   type RootTheme,
+  type Theme,
   type ThemeColorCardToneKey,
   type ThemeColorSchemeKey,
-  type Theme,
-  getScopedTheme,
 } from '@sanity/ui/theme'
 import {useContext, useMemo} from 'react'
 import {ThemeProvider as StyledThemeProvider} from 'styled-components'
+
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 

package/src/core/theme/useRootTheme.ts

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 

package/src/core/theme/useTheme.ts

@@ -1,4 +1,4 @@
-import {Theme, Theme_v2, getTheme_v2} from '@sanity/ui/theme'
+import {getTheme_v2, Theme, Theme_v2} from '@sanity/ui/theme'
 import {useTheme as useStyledTheme} from 'styled-components'
 
 /**

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

@@ -1,7 +1,8 @@
-import {ForwardedRef, HTMLProps, forwardRef} from 'react'
-import {styled, css} from 'styled-components'
+import {ForwardedRef, forwardRef, HTMLProps} from 'react'
+import {css, styled} from 'styled-components'
+
 import {useTheme_v2} from '../../theme'
-import {Point, compileCommands, getRoundedCommands} from './cmds'
+import {compileCommands, getRoundedCommands, Point} from './cmds'
 
 const StyledArrow = styled.div<{$w: number}>(
   ({$w: w}) => css`

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

@@ -1,4 +1,5 @@
 import {useMemo} from 'react'
+
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'
 

package/src/core/utils/boundaryElement/index.ts

@@ -1,3 +1,3 @@
 export * from './boundaryElementProvider'
-export * from './useBoundaryElement'
 export * from './types'
+export * from './useBoundaryElement'

package/src/core/utils/boundaryElement/useBoundaryElement.ts

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {isRecord} from '../../lib/isRecord'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -1,4 +1,5 @@
 import {forwardRef, useImperativeHandle, useMemo, useState} from 'react'
+
 import {useElementSize} from '../../hooks'
 import {useTheme_v2} from '../../theme'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'

package/src/core/utils/errorBoundary.tsx

@@ -1,4 +1,5 @@
 import {Component, PropsWithChildren} from 'react'
+
 import {Code} from '../primitives/code'
 
 /**

package/src/core/utils/layer/__workshop__/multipleRoots.tsx

@@ -1,4 +1,5 @@
 import {Card, Layer, LayerProvider, Stack} from '@sanity/ui'
+
 import {LayerDebugInfo} from './_debug'
 
 export default function MultipleRootsStory() {

package/src/core/utils/layer/__workshop__/nested.tsx

@@ -1,6 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Layer, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useCallback, useState} from 'react'
+
 import {LayerDebugInfo} from './_debug'
 
 export default function PlainStory() {

package/src/core/utils/layer/__workshop__/responsiveZOffset.tsx

@@ -1,4 +1,5 @@
 import {Card, Layer} from '@sanity/ui'
+
 import {LayerDebugInfo} from './_debug'
 
 export default function ResponsiveZOffsetStory() {

package/src/core/utils/layer/index.ts

@@ -1,4 +1,4 @@
-export * from './useLayer'
 export * from './layer'
 export * from './layerProvider'
 export * from './types'
+export * from './useLayer'

package/src/core/utils/layer/layer.tsx

@@ -1,5 +1,6 @@
 import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
+
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
 import {LayerProvider} from './layerProvider'

package/src/core/utils/layer/layerProvider.tsx

@@ -1,5 +1,6 @@
 import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import {useMediaIndex, useArrayProp} from '../../hooks'
+
+import {useArrayProp, useMediaIndex} from '../../hooks'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'

package/src/core/utils/layer/useLayer.ts

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'

package/src/core/utils/portal/portal.ts

@@ -1,4 +1,5 @@
 import {createPortal} from 'react-dom'
+
 import {usePortal} from './usePortal'
 
 /**

package/src/core/utils/portal/portalProvider.tsx

@@ -1,4 +1,5 @@
 import {useMemo, useRef, useSyncExternalStore} from 'react'
+
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 

package/src/core/utils/portal/usePortal.ts

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {isRecord} from '../../lib/isRecord'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'

package/src/core/utils/virtualList/virtualList.tsx

@@ -1,5 +1,6 @@
 import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
+
 import {_isScrollable} from '../../helpers'
 import {_ResizeObserver} from '../../observers'
 import {StackProps} from '../../primitives'

package/src/theme/build/_deprecated/color/_solid/createSolidTones.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBase, ThemeColorSolid, ThemeColorName} from '../../../../system'
+import {ThemeColorBase, ThemeColorName, ThemeColorSolid} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createSolidTones(