use named export in styled components

components/src/atoms/Checkbox/index.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { COLORS, BORDERS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
 import { Icon } from '../../icons'

components/src/atoms/CheckboxField/index.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { COLORS, BORDERS } from '../../helix-design-system'
 import { Flex, Box } from '../../primitives'

components/src/atoms/Chip/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
 import { LegacyStyledText } from '../StyledText'

components/src/atoms/InputField/index.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react'
-import styled, { css } from 'styled-components'
+import styled, { css } from '../../patches'
 
 import { Flex } from '../../primitives'
 import {

components/src/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from '../../../patches'
 import { SPACING } from '../../../ui-style-constants'
 import { BORDERS, COLORS } from '../../../helix-design-system'
 import { Flex } from '../../../primitives'

components/src/atoms/ListButton/index.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
 import { BORDERS, COLORS } from '../../helix-design-system'

components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import { css } from '../../../patches'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
 import { COLORS } from '../../../helix-design-system'
 import { Flex, Link } from '../../../primitives'

components/src/atoms/ListItem/index.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { Flex } from '../../primitives'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 import { BORDERS, COLORS } from '../../helix-design-system'

components/src/atoms/MenuList/MenuItem.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from '../../patches'
 import { COLORS } from '../../helix-design-system'
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { ALIGN_CENTER } from '../../styles'

components/src/atoms/MenuList/OverflowBtn.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 
 import { Btn } from '../../primitives'
 import { BORDERS, COLORS } from '../../helix-design-system'

components/src/atoms/Snackbar/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { ALIGN_CENTER } from '../../styles'
 import { Flex } from '../../primitives'
 import { BORDERS, COLORS } from '../../helix-design-system'

components/src/atoms/StepMeter/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { Box } from '../../primitives'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 import { COLORS } from '../../helix-design-system'

components/src/atoms/StyledText/LegacyStyledText.tsx

@@ -1,9 +1,9 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from '../../patches'
 import { Text } from '../../primitives'
 import { TYPOGRAPHY, RESPONSIVENESS } from '../../ui-style-constants'
 
 import type * as React from 'react'
-import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { FlattenSimpleInterpolation } from '../../patches'
 
 export interface LegacyProps extends React.ComponentProps<typeof Text> {
   children?: React.ReactNode

components/src/atoms/StyledText/StyledText.tsx

@@ -1,10 +1,10 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from '../../patches'
 import { Text } from '../../primitives'
 import { TYPOGRAPHY, RESPONSIVENESS } from '../../ui-style-constants'
 import { TYPOGRAPHY as HELIX_TYPOGRAPHY } from '../../helix-design-system/product'
 
 import type * as React from 'react'
-import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { FlattenSimpleInterpolation } from '../../patches'
 
 const helixProductStyleMap = {
   displayBold: {

components/src/atoms/Tag/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
 import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'

components/src/atoms/Toast/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 
 import { Btn, Flex, Link } from '../../primitives'
 import { Icon } from '../../icons'
@@ -18,7 +18,7 @@ import type {
   DefaultTheme,
   FlattenSimpleInterpolation,
   ThemedCssFunction,
-} from 'styled-components'
+} from '../../patches'
 import type { StyleProps } from '../../primitives'
 import type { IconName, IconProps } from '../../icons'
 

components/src/atoms/ToggleGroup/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
 import { PrimaryButton } from '../../atoms/buttons/PrimaryButton'

components/src/atoms/buttons/AlertPrimaryButton.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from '../../patches'
 import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { NewAlertPrimaryBtn, styleProps } from '../../primitives'

components/src/atoms/buttons/AltPrimaryButton.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from '../../patches'
 
 import { COLORS } from '../../helix-design-system'
 import { styleProps } from '../../primitives'

components/src/atoms/buttons/EmptySelectorButton.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from '../../patches'
 import { Flex } from '../../primitives'
 import {
   ALIGN_CENTER,

components/src/atoms/buttons/LargeButton.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 
 import { Btn } from '../../primitives'
 import { BORDERS, COLORS } from '../../helix-design-system'

components/src/atoms/buttons/PrimaryButton.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from '../../patches'
 import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { NewPrimaryBtn, styleProps } from '../../primitives'

components/src/atoms/buttons/RadioButton.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import styled, { css } from 'styled-components'
+import styled, { css } from '../../patches'
 import { Flex } from '../../primitives'
 import { COLORS, BORDERS } from '../../helix-design-system'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
@@ -14,7 +14,7 @@ import {
 } from '../../index'
 import type { IconName } from '../../icons'
 import type { StyleProps } from '../../primitives'
-import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { FlattenSimpleInterpolation } from '../../patches'
 
 interface RadioButtonProps extends StyleProps {
   buttonLabel: string | React.ReactNode

components/src/atoms/buttons/SecondaryButton.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from '../../patches'
 
 import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
 import { isntStyleProp, styleProps } from '../../primitives'

components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled from 'styled-components'
+import styled from '../../patches'
 import { animated, useSpring, easings } from '@react-spring/web'
 import {
   getDeckDefFromRobotType,

components/src/hardware-sim/Deck/RobotCoordsForeignObject.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { Flex, ForeignObject } from '../../primitives'
 
 export interface RobotCoordsForeignObjectProps {

components/src/hardware-sim/Deck/RobotCoordsText.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 
 export interface RobotCoordsTextProps extends React.ComponentProps<'text'> {
   x: number

components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import { css } from '../../patches'
 
 import { Icon } from '../../icons'
 import { Btn } from '../../primitives'

components/src/hardware-sim/DeckConfigurator/constants.ts

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import { css } from '../../patches'
 
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'

components/src/hardware-sim/Labware/Labware.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled from 'styled-components'
+import styled from '../../patches'
 import map from 'lodash/map'
 
 import { COLORS } from '../../helix-design-system'

components/src/hardware-sim/Labware/LabwareRender.tsx

@@ -8,7 +8,7 @@ import {
 } from './labwareInternals'
 import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
 
-import type { CSSProperties } from 'styled-components'
+import type { CSSProperties } from '../../patches'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type {
   HighlightedWellLabels,

components/src/hardware-sim/Labware/labwareInternals/FilledWells.tsx

@@ -3,7 +3,7 @@ import map from 'lodash/map'
 import { COLORS } from '../../../helix-design-system'
 import { Well } from './Well'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
-import type { CSSProperties } from 'styled-components'
+import type { CSSProperties } from '../../../patches'
 
 export interface FilledWellsProps {
   definition: LabwareDefinition2

components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx

@@ -2,7 +2,7 @@ import type * as React from 'react'
 import { SLOT_RENDER_WIDTH, SLOT_RENDER_HEIGHT } from '@opentrons/shared-data'
 import { COLORS } from '../../../helix-design-system'
 
-import type { CSSProperties } from 'styled-components'
+import type { CSSProperties } from '../../../patches'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 export interface LabwareOutlineProps {

components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx

@@ -1,6 +1,6 @@
 // Render labware definition to SVG. XY is in robot coordinates.
 import * as React from 'react'
-import styled from 'styled-components'
+import styled from '../../../patches'
 import flatMap from 'lodash/flatMap'
 
 import { LabwareOutline } from './LabwareOutline'
@@ -10,7 +10,7 @@ import { COLORS } from '../../../helix-design-system'
 
 import type { LabwareDefinition2, LabwareWell } from '@opentrons/shared-data'
 import type { WellMouseEvent, WellStroke } from './types'
-import type { CSSProperties } from 'styled-components'
+import type { CSSProperties } from '../../../patches'
 
 export interface StaticLabwareProps {
   /** Labware definition to render */

components/src/hardware-sim/Labware/labwareInternals/StrokedWells.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import map from 'lodash/map'
 import { Well } from './Well'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
-import type { CSSProperties } from 'styled-components'
+import type { CSSProperties } from '../../../patches'
 import { COLORS } from '../../../helix-design-system'
 
 export interface StrokedWellProps {

components/src/hardware-sim/ProtocolDeck/LabwareInfo.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 
 import { RobotCoordsForeignDiv } from '../Deck'
 import {

components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpace.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from '../../patches'
 import { animated } from '@react-spring/web'
 import type * as React from 'react'
 import { Svg } from '../../primitives'

components/src/icons/Icon.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { css, keyframes } from 'styled-components'
+import { css, keyframes } from '../patches'
 import cx from 'classnames'
 
 import { Svg } from '../primitives'

components/src/instrument/InstrumentDiagram.tsx

@@ -8,7 +8,7 @@ import singleFlexSrc from './single-channel-flex.png'
 import eightChannelFlexSrc from './eight-channel-flex.png'
 import ninetySixSrc from './ninety-six-channel-gen1.png'
 
-import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { FlattenSimpleInterpolation } from '../patches'
 import type { PipetteV2Specs } from '@opentrons/shared-data'
 import type { Mount } from '../robot-types'
 import type { StyleProps } from '..'

components/src/modals/ModalHeader.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../patches'
 
 import { Icon } from '../icons'
 import { Box, Btn, Flex } from '../primitives'

components/src/modals/ModalShell.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import styled from 'styled-components'
+import styled from '../patches'
 import {
   ALIGN_CENTER,
   ALIGN_END,

components/src/molecules/Banner/index.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { Btn, Flex } from '../../primitives'
 import { Icon } from '../../icons'
 import { BORDERS, COLORS } from '../../helix-design-system'

components/src/molecules/DeckInfoLabel/index.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from '../../patches'
 
 import { StyledText } from '../../atoms'
 import { BORDERS, COLORS } from '../../helix-design-system'

components/src/molecules/DeckLabel/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { getModuleType } from '@opentrons/shared-data'
 import { Flex } from '../../primitives'
 import { ALIGN_CENTER, FLEX_MAX_CONTENT } from '../../styles'
@@ -7,7 +7,7 @@ import { SPACING } from '../../ui-style-constants'
 import { StyledText } from '../../atoms'
 import { ModuleIcon } from '../../icons'
 
-import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { FlattenSimpleInterpolation } from '../../patches'
 import type { ModuleModel } from '@opentrons/shared-data'
 
 export interface DeckLabelProps {

components/src/molecules/DropdownMenu/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { css } from 'styled-components'
+import { css } from '../../patches'
 
 import { BORDERS, COLORS } from '../../helix-design-system'
 import {

components/src/molecules/LiquidIcon/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { Btn, Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
 import { BORDERS, COLORS } from '../../helix-design-system'

components/src/molecules/ParametersTable/index.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from '../../patches'
 import {
   formatRunTimeParameterDefaultValue,
   formatRunTimeParameterMinMax,

components/src/molecules/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import { css } from '../../patches'
 import { TYPOGRAPHY, SPACING, RESPONSIVENESS } from '../../ui-style-constants'
 import { COLORS, BORDERS } from '../../helix-design-system'
 import { POSITION_RELATIVE, DIRECTION_ROW } from '../../styles'

components/src/organisms/DeckLabelSet/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled from 'styled-components'
+import styled from '../../patches'
 import { Box } from '../../primitives'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { RobotCoordsForeignDiv } from '../../hardware-sim'

components/src/patches.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export * from 'styled-components'
+
+// @ts-expect-error
+const defaultStyled: typeof styled = typeof styled === 'function' ? styled : styled.default
+
+// eslint-disable-next-line import/no-default-export
+export { defaultStyled as default }

components/src/primitives/Box.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from '../patches'
 
 import { styleProps, isntStyleProp } from './style-props'