@sanity/ui 1.7.9 → 1.7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.7.9",
+  "version": "1.7.10",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -12,6 +12,7 @@
       "source": "./src/index.ts",
       "require": "./dist/index.js",
       "node": {
+        "module": "./dist/index.esm.js",
         "import": "./dist/index.cjs.mjs"
       },
       "import": "./dist/index.esm.js",
@@ -52,7 +53,7 @@
     "@sanity/color": "^2.2.5",
     "@sanity/icons": "^2.4.1",
     "csstype": "^3.1.2",
-    "framer-motion": "^10.15.2",
+    "framer-motion": "^10.16.1",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
@@ -63,49 +64,49 @@
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^2.4.5",
+    "@sanity/pkg-utils": "^2.4.8",
     "@sanity/semantic-release-preset": "^4.1.3",
-    "@sanity/ui-workshop": "^1.2.9",
+    "@sanity/ui-workshop": "^1.2.10",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.3",
+    "@types/jest": "^29.5.4",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^20.5.0",
-    "@types/react": "^18.2.20",
+    "@types/node": "^20.5.3",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-is": "^18.2.1",
     "@types/refractor": "^3.0.2",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
     "commitizen": "^4.3.0",
-    "cypress": "^12.17.3",
+    "cypress": "^12.17.4",
     "cypress-real-events": "^1.10.0",
     "cz-conventional-changelog": "^3.3.0",
     "esbuild": "^0.19.2",
     "esbuild-register": "^3.4.2",
     "eslint": "^8.47.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-import": "^2.28.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.6.2",
+    "jest": "^29.6.3",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.6.2",
-    "lint-staged": "^13.3.0",
+    "jest-environment-jsdom": "^29.6.3",
+    "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.1",
+    "prettier": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rimraf": "^5.0.1",
-    "semantic-release": "^21.0.7",
+    "semantic-release": "^21.0.9",
     "start-server-and-test": "^2.0.0",
     "styled-components": "^6.0.7",
     "tsconfig-paths": "^4.2.0",
@@ -144,7 +145,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "packageManager": "pnpm@8.6.10",
+  "packageManager": "pnpm@8.6.12",
   "publishConfig": {
     "access": "public",
     "provenance": true

package/src/components/dialog/styles.ts

@@ -1,6 +1,6 @@
-import {CSSObject} from 'styled-components'
 import {_responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
+import {CSSObject} from '../../types/styled'
 
 /**
  * @internal

package/src/components/menu/__workshop__/shouldFocus.tsx

@@ -14,7 +14,7 @@ const ITEMS = [...Array(8).keys()].map((num) => ({
 const OPTIONS = {first: 'first', last: 'last'}
 
 export default function ShouldFocusStory() {
-  const shouldFocus = useSelect('Should focus', OPTIONS, 'first')
+  const shouldFocus = useSelect<keyof typeof OPTIONS>('Should focus', OPTIONS, 'first')
 
   const [popoverOpen, setPopoverOpen] = useState<boolean>(false)
   const handleToggleOpen = useCallback(() => setPopoverOpen((v) => !v), [])

package/src/components/menu/menuDivider.ts

@@ -1,10 +1,9 @@
-import styled, {StyledComponent} from 'styled-components'
-import {Theme} from '../../theme'
+import styled from 'styled-components'
 
 /**
  * @public
  */
-export const MenuDivider: StyledComponent<'hr', Theme> = styled.hr`
+export const MenuDivider = styled.hr`
   height: 1px;
   border: 0;
   background: var(--card-hairline-soft-color);

package/src/components/menu/menuGroup.tsx

@@ -54,7 +54,7 @@ export function MenuGroup(
     onItemMouseEnter = menu.onMouseEnter,
     registerElement,
   } = menu
-  const [rootElement, setRootElement] = useState<HTMLButtonElement | null>(null)
+  const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
   const shouldFocusRef = useRef<'first' | 'last' | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement

package/src/components/tree/style.ts

@@ -1,8 +1,8 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 
-export function treeItemRootStyle(): FlattenSimpleInterpolation {
+export function treeItemRootStyle(): ReturnType<typeof css> {
   return css`
     &[role='none'] > [role='treeitem'] {
       outline: none;
@@ -29,7 +29,7 @@ export function treeItemRootStyle(): FlattenSimpleInterpolation {
   `
 }
 
-export function treeItemRootColorStyle(props: ThemeProps): FlattenSimpleInterpolation {
+export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
   const $tone = 'default'
   const {base, muted, selectable} = theme.sanity.color
@@ -93,7 +93,7 @@ export interface TreeItemBoxStyleProps {
 
 export function treeItemBoxStyle(
   props: TreeItemBoxStyleProps & ThemeProps,
-): FlattenSimpleInterpolation {
+): ReturnType<typeof css> {
   const {$level, theme} = props
   const {space} = theme.sanity
 

package/src/primitives/_selectable/style.ts

@@ -1,4 +1,4 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 import {SelectableTone} from '../../types/selectable'
@@ -10,7 +10,7 @@ export interface SelectableStyleProps {
   $tone: SelectableTone
 }
 
-export function selectableBaseStyle(): FlattenSimpleInterpolation {
+export function selectableBaseStyle(): ReturnType<typeof css> {
   return css`
     background-color: inherit;
     color: inherit;
@@ -34,7 +34,7 @@ export function selectableBaseStyle(): FlattenSimpleInterpolation {
 
 export function selectableColorStyle(
   props: SelectableStyleProps & ThemeProps,
-): FlattenSimpleInterpolation {
+): ReturnType<typeof css> {
   const {$tone, theme} = props
   const {base, muted, selectable} = theme.sanity.color
   // @todo: remove use of `muted` here

package/src/primitives/avatar/styles.ts

@@ -1,6 +1,6 @@
-import {CSSObject} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
+import {CSSObject} from '../../types/styled'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
 export const avatarStyle = {
@@ -32,6 +32,7 @@ function avatarArrowStyle(): CSSObject {
       left: '50%',
       transform: 'translateX(-6px)',
 
+      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       '&:not([hidden])': {
         display: 'block',
       },
@@ -70,6 +71,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
     },
 
     '&>svg': {
+      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       '&:not([hidden])': {
         display: 'block',
       },
@@ -77,7 +79,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
 
     /* &:is(button) */
     '&[data-as="button"]': {
-      '-webkit-font-smoothing': 'inherit',
+      WebkitFontSmoothing: 'inherit',
       appearance: 'none',
       margin: 0,
       padding: 0,
@@ -86,6 +88,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
       color: 'inherit',
       outline: 'none',
 
+      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       '&:focus': {
         boxShadow: focusRingStyle({focusRing}),
       },
@@ -152,7 +155,7 @@ function avatarStrokeStyle(): CSSObject {
     strokeWidth: '3px',
 
     '[data-status="editing"] &': {
-      strokeSasharray: '2 4',
+      strokeDasharray: '2 4',
       strokeLinecap: 'round',
     },
   }

package/src/primitives/badge/styles.ts

@@ -1,5 +1,5 @@
-import {CSSObject} from 'styled-components'
 import {ThemeProps} from '../../styles'
+import {CSSObject} from '../../types/styled'
 import {BadgeStyleProps} from './types'
 
 export function badgeStyle(props: BadgeStyleProps & ThemeProps): CSSObject {

package/src/primitives/box/box.tsx

@@ -32,6 +32,7 @@ export interface BoxProps
     ResponsiveMarginProps,
     ResponsivePaddingProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  forwardedAs?: React.ElementType | keyof JSX.IntrinsicElements
 }
 
 const Root = styled.div<

package/src/primitives/button/styles.ts

@@ -1,13 +1,14 @@
-import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 import {ButtonMode, ButtonTone} from '../../types'
+import {CSSObject} from '../../types/styled'
 
 /**
  * @internal
  */
-export function buttonBaseStyles(): FlattenSimpleInterpolation {
+export function buttonBaseStyles(): ReturnType<typeof css> {
   return css`
     -webkit-font-smoothing: inherit;
     appearance: none;

package/src/primitives/card/styles.ts

@@ -1,4 +1,4 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'
@@ -6,11 +6,11 @@ import {CardStyleProps} from './types'
 
 export function cardStyle(
   props: CardStyleProps & ThemeProps,
-): Array<FlattenSimpleInterpolation | (() => FlattenSimpleInterpolation)> {
+): Array<ReturnType<typeof css> | (() => ReturnType<typeof css>)> {
   return [cardBaseStyle(props), cardColorStyle(props)]
 }
 
-export function cardBaseStyle(props: CardStyleProps & ThemeProps): FlattenSimpleInterpolation {
+export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
   const {$checkered, theme} = props
   const space = theme.sanity.space
 
@@ -45,7 +45,7 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): FlattenSimple
   `
 }
 
-export function cardColorStyle(props: CardStyleProps & ThemeProps): FlattenSimpleInterpolation {
+export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
   const {$checkered, $focusRing, theme} = props
   const {focusRing} = theme.sanity
   const {base, card, dark} = theme.sanity.color

package/src/primitives/checkbox/styles.ts

@@ -1,15 +1,15 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 
-export function checkboxBaseStyles(): FlattenSimpleInterpolation {
+export function checkboxBaseStyles(): ReturnType<typeof css> {
   return css`
     position: relative;
     display: inline-block;
   `
 }
 
-export function inputElementStyles(props: ThemeProps): FlattenSimpleInterpolation {
+export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
   const color = theme.sanity.color.input
   const {focusRing, input, radius} = theme.sanity

package/src/primitives/code/styles.ts

@@ -1,8 +1,6 @@
-import {css, FlattenInterpolation, ThemeProps as StyledThemeProps} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {Theme} from '../../theme'
+import {css, ExecutionContext} from 'styled-components'
 
-function codeSyntaxHighlightingStyle({theme}: ThemeProps) {
+function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
   const color = theme.sanity.color.syntax
 
   return {
@@ -45,7 +43,7 @@ function codeSyntaxHighlightingStyle({theme}: ThemeProps) {
   }
 }
 
-export function codeBaseStyle(): FlattenInterpolation<StyledThemeProps<Theme>> {
+export function codeBaseStyle(): ReturnType<typeof css> {
   return css`
     color: var(--card-code-fg-color);
 

package/src/primitives/container/styles.ts

@@ -1,5 +1,5 @@
-import {CSSObject} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
+import {CSSObject} from '../../types/styled'
 import {ResponsiveWidthStyleProps} from './types'
 
 const BASE_STYLE: CSSObject = {

package/src/primitives/flex/flex.tsx

@@ -35,6 +35,7 @@ export const Flex = forwardRef(function Flex(
   const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
 
   return (
+    // @ts-expect-error -- some dollar prefixed typings aren't inferred correctly https://github.com/styled-components/styled-components/issues/4062
     <Root
       data-ui="Flex"
       {...restProps}

package/src/primitives/heading/styles.ts

@@ -1,10 +1,8 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {HeadingStyleProps} from './types'
 
-export function headingBaseStyle(
-  props: HeadingStyleProps & ThemeProps,
-): FlattenSimpleInterpolation {
+export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
   const {$accent, $muted, theme} = props
 
   return css`

package/src/primitives/inline/inline.tsx

@@ -33,7 +33,14 @@ export const Inline = forwardRef(function Inline(
   )
 
   return (
-    <Root data-ui="Inline" {...restProps} $space={useArrayProp(space)} forwardedAs={as} ref={ref}>
+    <Root
+      data-ui="Inline"
+      {...restProps}
+      $space={useArrayProp(space)}
+      forwardedAs={as}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref={ref as any}
+    >
       {children}
     </Root>
   )

package/src/primitives/inline/styles.ts

@@ -1,5 +1,5 @@
-import {CSSObject} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
+import {CSSObject} from '../../types/styled'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {

package/src/primitives/label/styles.ts

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

package/src/primitives/popover/popover.tsx

@@ -35,6 +35,8 @@ import {calcCurrentWidth, calcMaxWidth} from './helpers'
 import {PopoverCard} from './popoverCard'
 import {PopoverUpdateCallback, PopoverWidth} from './types'
 
+export type {PopoverUpdateCallback}
+
 /** @public */
 export interface PopoverProps
   extends Omit<LayerProps, 'as'>,

package/src/primitives/radio/styles.ts

@@ -1,8 +1,8 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 
-export function radioBaseStyle(): FlattenSimpleInterpolation {
+export function radioBaseStyle(): ReturnType<typeof css> {
   return css`
     position: relative;
 
@@ -16,7 +16,7 @@ export function radioBaseStyle(): FlattenSimpleInterpolation {
   `
 }
 
-export function inputElementStyle(props: ThemeProps): FlattenSimpleInterpolation {
+export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
   const {focusRing, input} = theme.sanity
   const color = theme.sanity.color.input

package/src/primitives/select/styles.ts

@@ -1,4 +1,4 @@
-import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {
   focusRingBorderStyle,
@@ -8,8 +8,9 @@ import {
   ResponsiveRadiusStyleProps,
 } from '../../styles/internal'
 import {ThemeFontSize} from '../../theme'
+import {CSSObject} from '../../types/styled'
 
-function rootStyle(): FlattenSimpleInterpolation {
+function rootStyle(): ReturnType<typeof css> {
   return css`
     position: relative;
     width: stretch;
@@ -20,7 +21,7 @@ function rootStyle(): FlattenSimpleInterpolation {
   `
 }
 
-function inputBaseStyle(props: ThemeProps): FlattenSimpleInterpolation {
+function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
   const font = theme.sanity.fonts.text
 
@@ -117,7 +118,7 @@ function inputStyle(): Array<
         $space: number[]
       } & ThemeProps,
     ) => CSSObject[])
-  | ((props: ThemeProps) => FlattenSimpleInterpolation)
+  | ((props: ThemeProps) => ReturnType<typeof css>)
 > {
   return [
     responsiveRadiusStyle,
@@ -128,7 +129,7 @@ function inputStyle(): Array<
   ]
 }
 
-function iconBoxStyle(props: ThemeProps): FlattenSimpleInterpolation {
+function iconBoxStyle(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
   const color = theme.sanity.color.input
 

package/src/primitives/stack/styles.ts

@@ -1,5 +1,5 @@
-import {CSSObject} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
+import {CSSObject} from '../../types/styled'
 
 export interface ResponsiveStackSpaceStyleProps {
   $space: number[]

package/src/primitives/switch/styles.ts

@@ -1,9 +1,9 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
 
 /* Root */
-export function switchBaseStyles(): FlattenSimpleInterpolation {
+export function switchBaseStyles(): ReturnType<typeof css> {
   return css`
     position: relative;
     &:not([hidden]) {
@@ -13,7 +13,7 @@ export function switchBaseStyles(): FlattenSimpleInterpolation {
 }
 
 /* Input */
-export function switchInputStyles(): FlattenSimpleInterpolation {
+export function switchInputStyles(): ReturnType<typeof css> {
   // Visually hide the input element while keeping it interactive
   return css`
     position: absolute;
@@ -34,7 +34,7 @@ export function switchInputStyles(): FlattenSimpleInterpolation {
 }
 
 /* Representation */
-export function switchRepresentationStyles(props: ThemeProps): FlattenSimpleInterpolation {
+export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
   const {focusRing, input} = theme.sanity
   const color = theme.sanity.color.button.default
@@ -102,7 +102,7 @@ export function switchRepresentationStyles(props: ThemeProps): FlattenSimpleInte
 }
 
 /* Track */
-export function switchTrackStyles(props: ThemeProps): FlattenSimpleInterpolation {
+export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
   const {input} = theme.sanity
 
@@ -123,7 +123,7 @@ export function switchTrackStyles(props: ThemeProps): FlattenSimpleInterpolation
 /* Thumb */
 export function switchThumbStyles(
   props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
-): FlattenSimpleInterpolation {
+): ReturnType<typeof css> {
   const {$indeterminate, theme} = props
   const {input} = theme.sanity
   const trackWidth = input.switch.width

package/src/primitives/text/styles.ts

@@ -1,9 +1,9 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
 export function textBaseStyle(
   props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
-): FlattenSimpleInterpolation {
+): ReturnType<typeof css> {
   const {$accent, $muted, theme} = props
   const {weights} = theme.sanity.fonts.text
 

package/src/styles/border/borderStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'

package/src/styles/box/boxStyle.ts

@@ -1,5 +1,5 @@
 import {Property} from 'csstype'
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBoxStyleProps} from './types'

package/src/styles/colorVars/colorVarsStyle.ts

@@ -1,5 +1,5 @@
-import {CSSObject} from 'styled-components'
 import {ThemeColorBase, ThemeColorGenericState} from '../../theme'
+import {CSSObject} from '../../types/styled'
 
 /**
  * @internal

package/src/styles/flex/flexItemStyle.ts

@@ -1,5 +1,5 @@
-import {CSSObject} from 'styled-components'
 import {EMPTY_ARRAY} from '../../constants'
+import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexItemStyleProps} from './types'

package/src/styles/flex/flexStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexStyleProps} from './types'

package/src/styles/font/codeFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/styles/font/headingFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/styles/font/labelFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/styles/font/responsiveFont.ts

@@ -1,5 +1,5 @@
-import {CSSObject} from 'styled-components'
 import {ThemeFontSize, ThemeFontKey} from '../../theme'
+import {CSSObject} from '../../types/styled'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFontStyleProps} from './types'

package/src/styles/font/textAlignStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveTextAlignStyleProps} from './types'

package/src/styles/font/textFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'