fix: cyclic imports

src/alert/alert.tsx

@@ -9,7 +9,8 @@ import {
     ThemeCSSStyles,
     useTheme,
     themeTernaryOperator as tto,
-    createStyle
+    createStyle,
+    getColorForComponent
 } from '../styles'
 import {
     DefaultSuccessIcon,
@@ -19,7 +20,7 @@ import {
     DefaultCloseIcon
 } from '../constants/default-icons'
 
-import { attachSignatureToComponent, getColorForComponent } from '../utils'
+import { attachSignatureToComponent } from '../utils'
 import { ALERT } from '../constants/component-ids'
 import { IconButton, IconButtonCommonProps } from '../icon-button'
 import { Typography } from '../typography'

src/card-content/card-content.tsx

@@ -4,12 +4,10 @@ import cx from 'clsx'
 import {
     createStyledComponent,
     getThemeCSSObject,
-    ThemeCSSStyles
-} from '../styles'
-import {
-    attachSignatureToComponent,
+    ThemeCSSStyles,
     getNeutralBasicColorForComponent
-} from '../utils'
+} from '../styles'
+import { attachSignatureToComponent } from '../utils'
 import { CARD_CONTENT } from '../constants/component-ids'
 
 export interface CardContentProps

src/card/card.tsx

@@ -5,12 +5,10 @@ import {
     createStyledComponent,
     getThemeCSSObject,
     ThemeCSSStyles,
-    themeTernaryOperator as tto
-} from '../styles'
-import {
-    attachSignatureToComponent,
+    themeTernaryOperator as tto,
     getNeutralBasicColorForComponent
-} from '../utils'
+} from '../styles'
+import { attachSignatureToComponent } from '../utils'
 import { CARD } from '../constants/component-ids'
 
 import { CSSObject } from 'styled-components'

src/divider/divider.tsx

@@ -4,9 +4,10 @@ import cx from 'clsx'
 import {
     createStyledComponent,
     getThemeCSSObject,
-    ThemeCSSStyles
+    ThemeCSSStyles,
+    getColorForComponent
 } from '../styles'
-import { attachSignatureToComponent, getColorForComponent } from '../utils'
+import { attachSignatureToComponent } from '../utils'
 import { DIVIDER } from '../constants/component-ids'
 
 export interface DividerBaseProps

src/inline-alert/inline-alert.tsx

@@ -5,13 +5,14 @@ import {
     createStyledComponent,
     getThemeCSSObject,
     themeTernaryOperator as tto,
-    Theme
+    Theme,
+    getColorForComponent
 } from '../styles'
 
 import { Alert, AlertProps } from '../alert'
 import { Collapsible, CollapsibleProps } from '../collapsible'
 
-import { attachSignatureToComponent, getColorForComponent } from '../utils'
+import { attachSignatureToComponent } from '../utils'
 import { INLINE_ALERT } from '../constants/component-ids'
 import { getHoverProperties } from '../button-base/utils'
 

src/input-base/input-base.tsx

@@ -6,9 +6,10 @@ import {
     themeTernaryOperator as tto,
     createStyledComponent,
     ThemeCSSStyles,
-    getThemeCSSObject
+    getThemeCSSObject,
+    getColorForComponent
 } from '../styles'
-import { attachSignatureToComponent, getColorForComponent } from '../utils'
+import { attachSignatureToComponent } from '../utils'
 import { INPUT_BASE } from '../constants/component-ids'
 
 export interface InputBaseProps

src/input/input.tsx

@@ -10,9 +10,10 @@ import {
     isValidColorHex,
     ReactElement,
     ThemeCSSStyles,
-    themeTernaryOperator as tto
+    themeTernaryOperator as tto,
+    getColorForComponent
 } from '../styles'
-import { attachSignatureToComponent, getColorForComponent } from '../utils'
+import { attachSignatureToComponent } from '../utils'
 import { INPUT } from '../constants/component-ids'
 
 export type InputProps = InputBaseProps & {

src/label/label.tsx

@@ -4,9 +4,10 @@ import cx from 'clsx'
 import {
     createStyledComponent,
     getThemeCSSObject,
-    ThemeCSSStyles
+    ThemeCSSStyles,
+    getColorForComponent
 } from '../styles'
-import { attachSignatureToComponent, getColorForComponent } from '../utils'
+import { attachSignatureToComponent } from '../utils'
 import { LABEL } from '../constants/component-ids'
 
 export interface LabelProps

src/list-heading/list-heading.tsx

@@ -4,12 +4,10 @@ import cx from 'clsx'
 import {
     createStyledComponent,
     getThemeCSSObject,
-    ThemeCSSStyles
-} from '../styles'
-import {
-    attachSignatureToComponent,
+    ThemeCSSStyles,
     getNeutralBasicColorForComponent
-} from '../utils'
+} from '../styles'
+import { attachSignatureToComponent } from '../utils'
 import { LIST_HEADING } from '../constants/component-ids'
 
 export interface ListHeadingProps

src/list-item/list-item.tsx

@@ -4,12 +4,10 @@ import cx from 'clsx'
 import {
     createStyledComponent,
     getThemeCSSObject,
-    ThemeCSSStyles
-} from '../styles'
-import {
-    attachSignatureToComponent,
+    ThemeCSSStyles,
     getNeutralBasicColorForComponent
-} from '../utils'
+} from '../styles'
+import { attachSignatureToComponent } from '../utils'
 import { LIST_ITEM } from '../constants/component-ids'
 import { CSSObject } from 'styled-components'
 

src/loading/spinner.tsx

@@ -6,9 +6,10 @@ import {
     createStyledComponent,
     createStyle,
     ThemeCSSStyles,
-    getThemeCSSObject
+    getThemeCSSObject,
+    getColorForComponent
 } from '../styles'
-import { attachSignatureToComponent, getColorForComponent } from '../utils'
+import { attachSignatureToComponent } from '../utils'
 import { SPINNER } from '../constants/component-ids'
 
 export interface SpinnerProps

src/modal/modal.tsx

@@ -7,9 +7,10 @@ import {
     getThemeCSSObject,
     createStyle,
     hex2rgba,
-    themeTernaryOperator as tto
+    themeTernaryOperator as tto,
+    getColorForComponent
 } from '../styles'
-import { attachSignatureToComponent, getColorForComponent } from '../utils'
+import { attachSignatureToComponent } from '../utils'
 import { MODAL } from '../constants/component-ids'
 
 export interface ModalProps extends Omit<ReactModalProps, 'as'> {

src/select/select.tsx

@@ -9,7 +9,9 @@ import ReactSelect, {
 } from 'react-select'
 import cx from 'clsx'
 import type { StylesProps } from 'react-select/dist/declarations/src/styles'
-import { attachSignatureToComponent, getColorForComponent } from '../utils'
+
+import { getColorForComponent } from '../styles'
+import { attachSignatureToComponent } from '../utils'
 import { SELECT } from '../constants/component-ids'
 
 import {

src/stepper/stepper.tsx

@@ -8,15 +8,13 @@ import {
     ReactElement,
     ThemeCSSStyles,
     ThemePalette,
-    themeTernaryOperator as tto
+    themeTernaryOperator as tto,
+    getNeutralBasicColorForComponent
 } from '../styles'
 import DefaultWarningIcon from '../icons/System/alert-line'
 import DefaultCompleteIcon from '../icons/System/check-fill'
 import DefaultErrorIcon from '../icons/System/close-fill'
-import {
-    attachSignatureToComponent,
-    getNeutralBasicColorForComponent
-} from '../utils'
+import { attachSignatureToComponent } from '../utils'
 import { STEPPER } from '../constants/component-ids'
 
 import { Box } from '../box'

src/styles/theme/create/palette.ts

@@ -10,7 +10,6 @@ import {
     darkGrey as darkGreyColor,
     grey as greyColor,
     orange,
-    themeTernaryOperator as tto,
     hex2rgba,
     createColor,
     getContrastRatio,
@@ -24,6 +23,8 @@ import type {
     ThemePaletteColor,
 } from './create'
 
+import { themeTernaryOperator as tto } from '../utils'
+
 type CreateIndividualPaletteOptions = {
     contrastThreshold: number
     themeType: ThemeType

src/table-cell/table-cell.tsx

@@ -6,12 +6,10 @@ import {
     createStyledComponent,
     ThemeCSSStyles,
     getThemeCSSObject,
-    themeTernaryOperator as tto
-} from '../styles'
-import {
-    attachSignatureToComponent,
+    themeTernaryOperator as tto,
     getNeutralBasicColorForComponent
-} from '../utils'
+} from '../styles'
+import { attachSignatureToComponent } from '../utils'
 import { TABLE_CELL } from '../constants/component-ids'
 
 import TableContext from '../table/table-context'

src/table/table.tsx

@@ -4,9 +4,10 @@ import cx from 'clsx'
 import {
     createStyledComponent,
     ThemeCSSStyles,
-    getThemeCSSObject
+    getThemeCSSObject,
+    getColorForComponent
 } from '../styles'
-import { attachSignatureToComponent, getColorForComponent } from '../utils'
+import { attachSignatureToComponent } from '../utils'
 import { TABLE } from '../constants/component-ids'
 
 import TableContext from './table-context'

src/tooltip/tooltip.tsx

@@ -9,11 +9,11 @@ import {
     isValidColorHex,
     ReactElement,
     ThemeCSSStyles,
-    themeTernaryOperator as tto
+    themeTernaryOperator as tto,
+    getColorForComponent
 } from '../styles'
 import {
     attachSignatureToComponent,
-    getColorForComponent,
     setRef,
     useForkRef,
     useMouseOver

src/typography/typography.tsx

@@ -7,9 +7,10 @@ import {
     isThemeFontVariant,
     ThemeTypographyVariant,
     ThemeCSSStyles,
-    getThemeCSSObject
+    getThemeCSSObject,
+    getColorForComponent
 } from '../styles'
-import { attachSignatureToComponent, getColorForComponent } from '../utils'
+import { attachSignatureToComponent } from '../utils'
 import { TYPOGRAPHY } from '../constants/component-ids'
 
 export interface TypographyBaseProps

src/utils/get.ts

@@ -1,12 +1,4 @@
 import { nanoid } from 'nanoid'
-import {
-    BasicColor,
-    getColorNameAndKey,
-    getThemeColorUsingKey,
-    Theme,
-    themeTernaryOperator as tto,
-} from '../styles'
-
 import { isChromatinElement } from './validate'
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -33,65 +25,3 @@ export const getElementUsingEvent = (event: Event): EventTarget => {
 
     return event.target ?? document.body
 }
-
-export const getColorForComponent = (options: {
-    theme: Theme
-    color?: string
-    key?: string
-    isReturnDefaultColor?: boolean
-    isSwitchDefaultColor?: boolean
-    defaultKey?: {
-        grey?: keyof BasicColor
-        darkGrey?: keyof BasicColor
-    }
-}): string | undefined => {
-    const {
-        key,
-        theme,
-        color,
-        isReturnDefaultColor = true,
-        isSwitchDefaultColor = false,
-        defaultKey = {},
-    } = options
-
-    if (!color) {
-        if (!isReturnDefaultColor) return
-
-        const {
-            themeType,
-            palette: { darkGrey, grey },
-        } = theme
-
-        const { grey: _gK = 10, darkGrey: _dgK = 10 } = defaultKey
-
-        if (isSwitchDefaultColor) {
-            return tto(themeType, grey[_gK], darkGrey[_dgK])
-        }
-        return tto(themeType, darkGrey[_dgK], grey[_dgK])
-    }
-
-    const colorTuple = getColorNameAndKey(color, { theme, defaultKey: key })
-
-    if (colorTuple) {
-        return getThemeColorUsingKey(colorTuple, theme)
-    }
-
-    return color
-}
-
-export const getNeutralBasicColorForComponent = (options: {
-    theme: Theme
-    isOpposite?: boolean
-}): BasicColor => {
-    const { theme, isOpposite = false } = options
-    const {
-        themeType,
-        palette: { darkGrey, grey },
-    } = theme
-
-    if (isOpposite) {
-        return tto(themeType, darkGrey, grey)
-    }
-
-    return tto(themeType, grey, darkGrey)
-}