Fix styled components

site/source/components/App.tsx

@@ -4,7 +4,7 @@ import rules from 'modele-social'
 import { ComponentProps, StrictMode, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Route, Routes } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import Footer from '@/components/layout/Footer/Footer'
 import Header from '@/components/layout/Header'

site/source/components/BarChart.tsx

@@ -2,7 +2,7 @@ import { formatValue } from 'publicodes'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { animated, config, useSpring } from 'react-spring'
-import styled, { ThemeContext } from 'styled-components'
+import { styled, ThemeContext } from 'styled-components'
 
 import useDisplayOnIntersecting from '@/components/utils/useDisplayOnIntersecting'
 import { Emoji } from '@/design-system/emoji'

site/source/components/BetaBanner/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { Message } from '@/design-system'
 import { CloseButton } from '@/design-system/buttons'

site/source/components/ChiffreAffairesActivitéMixte.tsx

@@ -3,7 +3,7 @@ import { PublicodesExpression, serializeEvaluation } from 'publicodes'
 import { useCallback } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Switch } from '@/design-system/switch'
 import { batchUpdateSituation } from '@/store/actions/actions'

site/source/components/EngineValue.tsx

@@ -8,7 +8,7 @@ import Engine, {
 } from 'publicodes'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { keyframes } from 'styled-components'
+import { keyframes, styled } from 'styled-components'
 
 import RuleLink from './RuleLink'
 import { useEngine } from './utils/EngineContext'

site/source/components/Feedback/FeedbackForm.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ScrollToElement } from '@/components/utils/Scroll'
 import { Checkbox, Message, TextAreaField, TextField } from '@/design-system'

site/source/components/Feedback/FeedbackRating.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Emoji } from '@/design-system/emoji'
 

site/source/components/Feedback/index.tsx

@@ -1,7 +1,7 @@
 import FocusTrap from 'focus-trap-react'
 import { MutableRefObject, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Emoji } from '@/design-system/emoji'
 import { FocusStyle } from '@/design-system/global-style'

site/source/components/Logo.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import logoSvgFRDark from '@/assets/images/logo-monentreprise_white.svg'
 import logoSvgFR from '@/assets/images/logo-monentreprise.svg'

site/source/components/Notifications.tsx

@@ -2,7 +2,7 @@ import { DottedName } from 'modele-social'
 import Engine, { RuleNode } from 'publicodes'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { useEngine, useInversionFail } from '@/components/utils/EngineContext'
 import { Message } from '@/design-system'

site/source/components/PageHeader.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Grid } from '@/design-system/layout'
 import { H1 } from '@/design-system/typography/heading'

site/source/components/PlaceDesEntreprises.tsx

@@ -1,6 +1,6 @@
 import { lazy, Suspense, useRef } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'

site/source/components/PlaceDesEntreprisesIframe.tsx

@@ -1,6 +1,6 @@
 import { iframeResize } from 'iframe-resizer'
 import { ReactEventHandler, useEffect } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 const Iframe = styled.iframe`
 	width: 1px;

site/source/components/QuickLinks.tsx

@@ -1,6 +1,6 @@
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Spacing } from '@/design-system/layout'
 import { Link } from '@/design-system/typography/link'

site/source/components/References.tsx

@@ -1,7 +1,7 @@
 import { DottedName } from 'modele-social'
 import { utils } from 'publicodes'
 import { useContext } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { EngineContext, useEngine } from '@/components/utils/EngineContext'
 import { Grid } from '@/design-system/layout'

site/source/components/SearchButton.tsx

@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'

site/source/components/SelectSimulationYear.tsx

@@ -2,7 +2,7 @@ import { Evaluation } from 'publicodes'
 import { useContext } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Banner from '@/components/Banner'
 import { EngineContext } from '@/components/utils/EngineContext'

site/source/components/ServiceWorker.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { useRegisterSW } from 'virtual:pwa-register/react'
 
 import { useIsEmbedded } from '@/hooks/useIsEmbedded'

site/source/components/ShareSimulationBanner/index.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'

site/source/components/SimulateurOrAssistantPage.tsx

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react'
 import { useSelector } from 'react-redux'
 import { useLocation } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Meta from '@/components/utils/Meta'
 import useSearchParamsSimulationSharing from '@/components/utils/useSearchParamsSimulationSharing'

site/source/components/SimulateurWarning.tsx

@@ -1,7 +1,7 @@
 import { Evaluation } from 'publicodes'
 import { useContext } from 'react'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Warning from '@/components/ui/WarningBlock'
 import { Link } from '@/design-system/typography/link'

site/source/components/Simulation/Questions.tsx

@@ -1,7 +1,7 @@
 import { DottedName } from 'modele-social'
 import Engine from 'publicodes'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Conversation, {
 	ConversationProps,

site/source/components/Simulation/SimulationGoal.tsx

@@ -2,7 +2,7 @@ import { DottedName } from 'modele-social'
 import { formatValue, PublicodesExpression } from 'publicodes'
 import React, { useCallback, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import { Grid } from '@/design-system/layout'

site/source/components/Simulation/SimulationGoals.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import { Grid } from '@/design-system/layout'

site/source/components/Simulation/index.tsx

@@ -3,7 +3,7 @@ import Engine from 'publicodes'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ConversationProps } from '@/components/conversation/Conversation'
 import ShareOrSaveSimulationBanner from '@/components/ShareSimulationBanner'

site/source/components/StackedBarChart.tsx

@@ -4,7 +4,7 @@ import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { animated, useSpring } from 'react-spring'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import RuleLink from '@/components/RuleLink'
 import useDisplayOnIntersecting from '@/components/utils/useDisplayOnIntersecting'

site/source/components/StatutTag.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import {
 	CircleIcon,

site/source/components/charts/PagesCharts.tsx

@@ -10,7 +10,7 @@ import {
 	XAxis,
 	YAxis,
 } from 'recharts'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { Strong } from '@/design-system/typography'
 import { Li, Ul } from '@/design-system/typography/list'

site/source/components/company/Details.tsx

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Message } from '@/design-system'
 import { Grid, Spacing } from '@/design-system/layout'

site/source/components/company/SearchDetails.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { FabriqueSocialEntreprise } from '@/api/fabrique-social'
 import { Spacing } from '@/design-system/layout'

site/source/components/company/SearchField.tsx

@@ -1,7 +1,7 @@
 import { useSearchFieldState } from '@react-stately/searchfield'
 import { ReactNode, useEffect, useRef } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { FabriqueSocialEntreprise } from '@/api/fabrique-social'
 import {

site/source/components/conversation/AnswerList.tsx

@@ -3,7 +3,7 @@ import { PublicodesExpression, RuleNode, utils } from 'publicodes'
 import { useCallback, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { EvaluatedRule, useEngine } from '@/components/utils/EngineContext'
 import { Message, PopoverWithTrigger } from '@/design-system'

site/source/components/conversation/ChoicesInput.tsx

@@ -7,7 +7,7 @@ import {
 } from 'publicodes'
 import { Fragment, Key, useCallback, useEffect, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import {
 	Item,

site/source/components/conversation/InputSuggestions.tsx

@@ -1,7 +1,7 @@
 import { ASTNode } from 'publicodes'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Link } from '@/design-system/typography/link'
 import { SmallBody } from '@/design-system/typography/paragraphs'

site/source/components/conversation/NumberInput.tsx

@@ -2,7 +2,7 @@ import { NumberFieldProps } from '@react-types/numberfield'
 import { ASTNode, parseUnit, serializeUnit, Unit } from 'publicodes'
 import { useCallback, useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { EngineContext } from '@/components/utils/EngineContext'
 import { NumberField } from '@/design-system/field'

site/source/components/conversation/ParagrapheInput.tsx

@@ -1,6 +1,6 @@
 import { Evaluation } from 'publicodes'
 import { useCallback } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { debounce } from '../../utils'
 import { InputProps } from './RuleInput'

site/source/components/conversation/SeeAnswersButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'

site/source/components/conversation/select/SelectCommune.tsx

@@ -1,6 +1,6 @@
 import { KeyboardEvent, useCallback, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import {
 	Commune,

site/source/components/conversation/select/SelectTauxRisque.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Card } from '@/design-system/card'
 import TextField from '@/design-system/field/TextField'

site/source/components/layout/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import { Helmet } from 'react-helmet-async'
 import { Trans, useTranslation } from 'react-i18next'
 import { generatePath, matchPath, useLocation } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import Contact from '@/components/Contact'
 import FeedbackButton from '@/components/Feedback'

site/source/components/layout/Header.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Logo } from '@/components/Logo'
 import SearchButton from '@/components/SearchButton'

site/source/components/layout/Menu.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Button } from '@/design-system/buttons'
 import { Drawer } from '@/design-system/drawer'

site/source/components/search/Hightlight.tsx

@@ -1,5 +1,5 @@
 import { Highlight as ISHighlight } from 'react-instantsearch-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export const Highlight = styled(ISHighlight)`
 	& .ais-Highlight-highlighted,

site/source/components/search/RulesInfiniteHits/index.tsx

@@ -2,7 +2,7 @@ import { DottedName } from 'modele-social'
 import { useTranslation } from 'react-i18next'
 import { Hit as AlgoliaHit } from 'react-instantsearch-core'
 import { connectInfiniteHits } from 'react-instantsearch-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Button } from '@/design-system/buttons'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'

site/source/components/search/SearchRoot.tsx

@@ -1,5 +1,5 @@
 import { InstantSearch, InstantSearchProps } from 'react-instantsearch-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 interface SearchType extends InstantSearchProps {
 	role?: string

site/source/components/search/SimulatorHits.tsx

@@ -1,7 +1,7 @@
 import { Trans } from 'react-i18next'
 import { Hit } from 'react-instantsearch-core'
 import { connectHits } from 'react-instantsearch-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { SmallCard } from '@/design-system/card'
 import { Emoji } from '@/design-system/emoji'

site/source/components/simulationExplanation/InstitutionsPartenaires.tsx

@@ -1,7 +1,7 @@
 import { DottedName } from 'modele-social'
 import { Trans } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import assuranceMaladieSrc from '@/assets/images/assurance-maladie.svg'
 import dgfipSrc from '@/assets/images/logo-dgfip.svg'

site/source/components/ui/AnimatedTargetValue.tsx

@@ -2,7 +2,7 @@ import { formatValue } from 'publicodes'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import styled, { keyframes } from 'styled-components'
+import { keyframes, styled } from 'styled-components'
 
 import { targetUnitSelector } from '@/store/selectors/simulationSelectors'
 

site/source/components/ui/Checklist/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Markdown } from '@/components/utils/markdown'
 import { ScrollToElement } from '@/components/utils/Scroll'

site/source/components/ui/Progress.tsx

@@ -1,6 +1,6 @@
 import { useProgressBar } from '@react-aria/progress'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Body } from '@/design-system/typography/paragraphs'
 

site/source/components/ui/animate.tsx

@@ -7,7 +7,7 @@ import {
 	useTrail,
 } from 'react-spring'
 import useMeasure from 'react-use-measure'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { DisableAnimationContext } from '@/components/utils/DisableAnimationContext'
 

site/source/components/utils/markdown.tsx

@@ -1,7 +1,7 @@
 import MarkdownToJsx, { MarkdownToJSX } from 'markdown-to-jsx'
 import React, { useContext, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Message } from '@/design-system'
 import { Emoji } from '@/design-system/emoji'

site/source/design-system/InfoBulle/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 const QuestionMark = styled.span`
 	color: var(--color);

site/source/design-system/accordion/index.tsx

@@ -6,7 +6,7 @@ import { ReactNode, useEffect, useRef, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { animated, useSpring } from 'react-spring'
 import useMeasure from 'react-use-measure'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { omit } from '@/utils'
 

site/source/design-system/banner/index.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export const Banner = styled.div`
 	display: flex;

site/source/design-system/buttons/Button.tsx

@@ -1,5 +1,5 @@
 import React, { ForwardedRef, forwardRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import {
 	GenericButtonOrNavLinkProps,

site/source/design-system/buttons/CloseButton.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { GenericButtonOrNavLinkProps } from '../typography/link'
 import { Button } from './Button'

site/source/design-system/buttons/HelpButtonWithPopover.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 

site/source/design-system/card/Article.tsx

@@ -1,7 +1,7 @@
 import { useButton } from '@react-aria/button'
 import React, { useRef } from 'react'
 import { Link } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ChevronIcon } from '@/design-system/icons'
 import { H4 } from '@/design-system/typography/heading'

site/source/design-system/card/Card.tsx

@@ -1,7 +1,7 @@
 import { AriaButtonProps } from '@react-types/button'
 import React, { ComponentPropsWithRef, ReactHTML, useRef } from 'react'
 import { Link as BaseLink } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { StyledButton } from '@/design-system/buttons/Button'
 import { H3, H4, HeadingUnderline } from '@/design-system/typography/heading'

site/source/design-system/card/SmallCard.tsx

@@ -1,7 +1,7 @@
 import { useButton } from '@react-aria/button'
 import React, { useRef } from 'react'
 import { Link } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { H6 } from '@/design-system/typography/heading'
 import {

site/source/design-system/checklist/index.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { CheckmarkIcon, CrossIcon } from '../icons'
 

site/source/design-system/chip/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import { Palette, SmallPalette } from '@/types/styled'

site/source/design-system/drawer/Drawer.tsx

@@ -3,7 +3,7 @@ import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import ReactDOM from 'react-dom'
 import { Trans } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { useOnClickOutside } from '@/hooks/useOnClickOutside'
 import { useOnKeyDown } from '@/hooks/useOnKeyDown'

site/source/design-system/field/Checkbox.tsx

@@ -2,7 +2,7 @@ import { useCheckbox } from '@react-aria/checkbox'
 import { useToggleState } from '@react-stately/toggle'
 import { AriaCheckboxProps } from '@react-types/checkbox'
 import { useRef } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Body } from '@/design-system/typography/paragraphs'
 

site/source/design-system/field/DateField.tsx

@@ -9,7 +9,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useId } from 'react-aria'
 import { DayPicker, useInput } from 'react-day-picker'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { useOnClickOutside } from '@/hooks/useOnClickOutside'
 

site/source/design-system/field/NumberField.tsx

@@ -15,7 +15,7 @@ import {
 	useRef,
 	useState,
 } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { omit } from '@/utils'
 

site/source/design-system/field/Radio/Radio.tsx

@@ -2,7 +2,7 @@ import { useRadio } from '@react-aria/radio'
 import { RadioGroupState } from '@react-stately/radio'
 import { AriaRadioProps } from '@react-types/radio'
 import { createContext, useContext, useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { FocusStyle } from '@/design-system/global-style'
 import { Body } from '@/design-system/typography/paragraphs'

site/source/design-system/field/Radio/RadioCard.tsx

@@ -1,6 +1,6 @@
 import { AriaRadioProps } from '@react-types/radio'
 import React, { ComponentProps } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { CardContainer } from '@/design-system/card/Card'
 import { Emoji } from '@/design-system/emoji'

site/source/design-system/field/Radio/RadioCardGroup.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ToggleGroup, ToggleGroupContainer } from './ToggleGroup'
 

site/source/design-system/field/Radio/RadioGroup.tsx

@@ -1,7 +1,7 @@
 import { useRadioGroup } from '@react-aria/radio'
 import { useRadioGroupState } from '@react-stately/radio'
 import { AriaRadioGroupProps } from '@react-types/radio'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { RadioContext } from './Radio'
 

site/source/design-system/field/Radio/ToggleGroup.tsx

@@ -1,7 +1,7 @@
 import { useRadioGroup } from '@react-aria/radio'
 import { useRadioGroupState } from '@react-stately/radio'
 import { AriaRadioGroupProps } from '@react-types/radio'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import {
 	InputRadio,

site/source/design-system/field/SearchField.tsx

@@ -6,7 +6,7 @@ import {
 } from '@react-stately/searchfield'
 import { AriaSearchFieldProps } from '@react-types/searchfield'
 import { useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { SearchIcon } from '@/design-system/icons'
 import { Loader } from '@/design-system/icons/Loader'

site/source/design-system/field/Select/ListBox.tsx

@@ -9,7 +9,7 @@ import {
 	useContext,
 	useRef,
 } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 interface ListBoxProps extends AriaListBoxOptions<unknown> {
 	listBoxRef?: RefObject<HTMLUListElement>

site/source/design-system/field/Select/PopOver.tsx

@@ -1,7 +1,7 @@
 import { FocusScope } from '@react-aria/focus'
 import { DismissButton, useOverlay } from '@react-aria/overlays'
 import { ReactNode, RefObject, useRef } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 interface PopoverProps {
 	popoverRef?: RefObject<HTMLDivElement>

site/source/design-system/field/Select/index.tsx

@@ -6,7 +6,7 @@ import { useSelectState } from '@react-stately/select'
 import type { AriaSelectProps } from '@react-types/select'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { FocusStyle } from '@/design-system/global-style'
 import { CarretDownIcon } from '@/design-system/icons'

site/source/design-system/field/TextAreaField.tsx

@@ -1,6 +1,6 @@
 import { AriaTextFieldOptions, useTextField } from '@react-aria/textfield'
 import { HTMLAttributes, RefObject, useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { ExtraSmallBody } from '@/design-system/typography/paragraphs'
 

site/source/design-system/field/TextField.tsx

@@ -1,6 +1,6 @@
 import { AriaTextFieldOptions, useTextField } from '@react-aria/textfield'
 import { HTMLAttributes, RefObject, useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { ExtraSmallBody } from '@/design-system/typography/paragraphs'
 import { omit } from '@/utils'

site/source/design-system/footer/column.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Grid } from '@/design-system/layout'
 import { H1 } from '@/design-system/typography/heading'

site/source/design-system/footer/container.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Grid } from '@/design-system/layout'
 

site/source/design-system/icons/index.tsx

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export const SvgIcon = styled.svg`
 	/* width: ${({ theme }) => theme.spacings.lg};

site/source/design-system/layout/Container.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled, { DefaultTheme } from 'styled-components'
+import { DefaultTheme, styled } from 'styled-components'
 
 import {
 	ForceThemeProvider,

site/source/design-system/layout/Grid.tsx

@@ -1,5 +1,5 @@
 import { ComponentType, createContext, useContext } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { Merge } from '@/types/utils'
 

site/source/design-system/layout/index.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export { default as Container } from './Container'
 export { default as Grid } from './Grid'

site/source/design-system/message/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Message } from '@/design-system'
 

site/source/design-system/message/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { css, CSSProperties, DefaultTheme } from 'styled-components'
+import { css, CSSProperties, DefaultTheme, styled } from 'styled-components'
 
 import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import { Palette, SmallPalette } from '@/types/styled'

site/source/design-system/popover/Popover.tsx

@@ -11,7 +11,7 @@ import { AriaDialogProps } from '@react-types/dialog'
 import FocusTrap from 'focus-trap-react'
 import React, { RefObject, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { css, keyframes } from 'styled-components'
+import { css, keyframes, styled } from 'styled-components'
 
 import { Grid } from '@/design-system/layout'
 import { wrapperDebounceEvents } from '@/utils'

site/source/design-system/popover/PopoverConfirm.tsx

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Button } from '@/design-system/buttons'
 

site/source/design-system/root.tsx

@@ -1,7 +1,8 @@
 import isbot from 'isbot'
 import { ReactNode } from 'react'
-import styled, {
+import {
 	css,
+	styled,
 	StyleSheetManager,
 	ThemeProvider,
 } from 'styled-components'

site/source/design-system/stepper/index.tsx

@@ -4,7 +4,7 @@ import { AriaButtonProps } from '@react-types/button'
 import { ComponentPropsWithRef } from 'react'
 import { Trans } from 'react-i18next'
 import { Link as RouterLink, useMatch } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { Link } from '../typography/link'
 

site/source/design-system/switch/Switch.tsx

@@ -1,7 +1,7 @@
 import { useSwitch } from '@react-aria/switch'
 import { useToggleState } from '@react-stately/toggle'
 import { ReactNode, useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { FocusStyle, SROnly } from '@/design-system/global-style'
 

site/source/design-system/tag/index.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Colors, getColorGroup, isColor } from '../theme'
 import { KeysOfUnion, LG, MD, SM } from '../types'

site/source/design-system/tooltip/Tooltip.tsx

@@ -3,7 +3,7 @@ import { Tooltip as RTooltip } from 'react-tooltip'
 
 import 'react-tooltip/dist/react-tooltip.css'
 
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 // TODO: Replace react-tooltip with @floating-ui/react-dom for more control (see DateField.tsx for example)
 export const Tooltip = ({

site/source/design-system/typography/heading.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 const baseHeading = css`
 	font-family: 'Montserrat', sans-serif;

site/source/design-system/typography/index.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export * as headings from './heading'
 export * as lists from './list'

site/source/design-system/typography/link.tsx

@@ -8,7 +8,7 @@ import React, {
 	useRef,
 } from 'react'
 import { NavLink } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 export const StyledLinkHover = css`
 	text-decoration: underline;

site/source/design-system/typography/list.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { baseParagraphStyle } from './paragraphs'
 

site/source/design-system/typography/paragraphs.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 export const baseParagraphStyle = css`
 	font-family: ${({ theme }) => theme.fonts.main};

site/source/pages/Accessibilité.tsx

@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { H1, H2, H3, H4, H5 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'

site/source/pages/Documentation.tsx

@@ -12,7 +12,7 @@ import {
 	useLocation,
 	useParams,
 } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { References } from '@/components/References'
 import SearchRules from '@/components/search/SearchRules'