Bandeau beta avec une croix et various refacto

site/source/ServiceWorker.tsx

@@ -6,8 +6,7 @@ import { useRegisterSW } from 'virtual:pwa-register/react'
 import { getItem, removeItem, setItem } from '@/storage/safeLocalStorage'
 
 import { Message } from './design-system'
-import { HideButton } from './design-system/banner'
-import { Button } from './design-system/buttons'
+import { Button, CloseButton } from './design-system/buttons'
 import { Body } from './design-system/typography/paragraphs'
 
 const PromptContainer = styled.div`
@@ -33,7 +32,7 @@ const StyledMessage = styled(Message)`
 	}
 `
 
-const StyledHideButton = styled.div`
+const StyledClosedButton = styled(CloseButton)`
 	position: absolute;
 	top: 0.375rem;
 	right: 0.375rem;
@@ -105,14 +104,10 @@ export const ServiceWorker = () => {
 						</Button>
 					</StyledSmallBody>
 
-					<StyledHideButton>
-						<HideButton
-							onClick={() => setNeedRefresh(false)}
-							aria-label={t('Fermer')}
-						>
-							&times;
-						</HideButton>
-					</StyledHideButton>
+					<StyledClosedButton
+						onClick={() => setNeedRefresh(false)}
+						aria-label={t('Fermer')}
+					/>
 				</StyledMessage>
 			)}
 		</PromptContainer>

site/source/components/Banner.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
-import styled from 'styled-components'
 
-import { Body } from '@/design-system/typography/paragraphs'
+import { Message } from '@/design-system'
+import { Emoji } from '@/design-system/emoji'
+import { SmallBody } from '@/design-system/typography/paragraphs'
 import { firstStepCompletedSelector } from '@/selectors/simulationSelectors'
 
 import { FadeIn } from './ui/animate'
-import Emoji from './utils/Emoji'
 
 type BannerProps = {
 	children: React.ReactNode
@@ -16,22 +16,11 @@ type BannerProps = {
 	className?: string
 }
 
-const Container = styled.div`
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-`
-const Content = styled(Body)`
-	margin: 0.5rem;
-	margin-left: 1rem;
-`
-
 export default function Banner({
 	children,
 	hidden: hiddenProp = false,
 	hideAfterFirstStep = true,
 	icon,
-	className,
 }: BannerProps) {
 	const hiddenState = useSelector(firstStepCompletedSelector)
 
@@ -39,12 +28,14 @@ export default function Banner({
 
 	return !hidden ? (
 		<FadeIn>
-			<Container className={className}>
-				<Emoji emoji={icon} />
-				<Content as={typeof children === 'string' ? undefined : 'div'}>
-					{children}
-				</Content>
-			</Container>
+			<Message
+				border={false}
+				mini
+				icon={!!icon && <Emoji emoji={icon} />}
+				className="print-hidden"
+			>
+				<SmallBody>{children}</SmallBody>
+			</Message>
 		</FadeIn>
 	) : null
 }

site/source/components/BarChart.tsx

@@ -5,11 +5,11 @@ import { animated, config, useSpring } from 'react-spring'
 import styled, { ThemeContext } from 'styled-components'
 
 import useDisplayOnIntersecting from '@/components/utils/useDisplayOnIntersecting'
+import { Emoji } from '@/design-system/emoji'
 import { Spacing } from '@/design-system/layout'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'
 
 import { DisableAnimationContext } from './utils/DisableAnimationContext'
-import Emoji from './utils/Emoji'
 
 type ChartItemBarProps = {
 	numberToPlot: number

site/source/components/BetaBanner/index.tsx

@@ -1,31 +1,67 @@
-import { Trans } from 'react-i18next'
+import { useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import { Message } from '@/design-system'
+import { CloseButton } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Strong } from '@/design-system/typography'
 import { Body } from '@/design-system/typography/paragraphs'
 
 export default function BetaBanner() {
+	const [showBetaBanner, toggleBetaBanner] = useState(true)
+	const { t } = useTranslation()
+	if (!showBetaBanner) {
+		return null
+	}
+
 	return (
-		<Message type="info" icon="🚧" border={false}>
-			<Trans i18nKey="betawarning">
-				<Body>
-					<StyledStrong>Cet outil est en version bêta</StyledStrong> : nous
-					travaillons à <Strong>valider les informations et les calculs</Strong>
-					, mais des <Strong>erreurs peuvent être présentes.</Strong>
-				</Body>
-			</Trans>
-			{/* <Body>
+		<StyledBetaContainer>
+			<Message type="info" icon={<Emoji emoji="🚧" />} border={false}>
+				<Trans i18nKey="betawarning">
+					<Body>
+						<StyledStrong>Cet outil est en version bêta</StyledStrong> : nous
+						travaillons à{' '}
+						<Strong>valider les informations et les calculs</Strong>, mais des{' '}
+						<Strong>erreurs peuvent être présentes.</Strong>
+					</Body>
+				</Trans>
+				<AbsoluteHideButton
+					color="tertiary"
+					onPress={() => toggleBetaBanner(false)}
+					aria-label={t('Fermer')}
+				/>
+				{/* <Body>
 								Bien qu'il ne soit pas terminé, nous avons choisi de le publier
 								pour prendre en compte vos retours le plus tôt possible. Si vous
 								pensez avoir trouvé un problème ou si vous voulez nous partager
 								une remarque, vous pouvez nous contacter via le bouton « Faire
 								une suggestion » en bas de page.
 							</Body> */}
-		</Message>
+			</Message>
+		</StyledBetaContainer>
 	)
 }
 
 const StyledStrong = styled(Strong)`
 	color: ${({ theme }) => theme.colors.extended.info[600]};
 `
+
+const AbsoluteHideButton = styled(CloseButton)`
+	position: absolute;
+	top: ${({ theme }) => theme.spacings.sm};
+	right: ${({ theme }) => theme.spacings.sm};
+`
+
+const StyledBetaContainer = styled.div`
+	padding-top: ${({ theme }) => theme.spacings.xl};
+	@media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
+		padding-top: ${({ theme }) => theme.spacings.md};
+	}
+	margin-bottom: -${({ theme }) => theme.spacings.xl};
+	position: sticky;
+	top: 0;
+	z-index: 3;
+	background-color: ${({ theme }) =>
+		!theme.darkMode ? 'rgba(255, 255, 255, 0.7)' : 'inherit'};
+`

site/source/components/Feedback/index.tsx

@@ -4,8 +4,8 @@ import { useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { TrackingContext } from '@/ATInternetTracking'
-import Emoji from '@/components/utils/Emoji'
 import { Button } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
 import Popover from '@/design-system/popover/Popover'
 import { Strong } from '@/design-system/typography'

site/source/components/MoreInfosOnUs.tsx

@@ -2,12 +2,12 @@ import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
 
 import { SmallCard } from '@/design-system/card'
+import { Emoji } from '@/design-system/emoji'
 import { Grid } from '@/design-system/layout'
 import { H2 } from '@/design-system/typography/heading'
 import { useSitePaths } from '@/sitePaths'
 
 import { icons } from './ui/SocialIcon'
-import Emoji from './utils/Emoji'
 
 export default function MoreInfosOnUs() {
 	const { pathname } = useLocation()

site/source/components/Notifications.tsx

@@ -7,8 +7,7 @@ import styled from 'styled-components'
 import { hideNotification } from '@/actions/actions'
 import { useEngine, useInversionFail } from '@/components/utils/EngineContext'
 import { Message } from '@/design-system'
-import { Button } from '@/design-system/buttons'
-import { GenericButtonOrNavLinkProps } from '@/design-system/typography/link'
+import { CloseButton } from '@/design-system/buttons'
 import { RootState } from '@/reducers/rootReducer'
 
 import RuleLink from './RuleLink'
@@ -83,13 +82,10 @@ export default function Notifications() {
 								<Trans>En savoir plus</Trans>
 							</RuleLink>
 						)}
-						<HideButton
-							className="hide"
+						<AbsoluteCloseButton
 							aria-label={t('Fermer')}
 							onPress={() => dispatch(hideNotification(dottedName))}
-						>
-							×
-						</HideButton>
+						/>
 					</Message>
 				))}
 			</Appear>
@@ -97,25 +93,8 @@ export default function Notifications() {
 	)
 }
 
-const HideButton = styled(Button)<GenericButtonOrNavLinkProps>`
-	&& {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 1.5rem;
-		width: 1.5rem;
-		padding: 0;
-		background: ${({ theme }) => theme.colors.extended.grey[100]};
-		color: ${({ theme }) => theme.colors.bases.primary[600]};
-		font-weight: bold;
-		margin-left: 1rem;
-
-		position: absolute;
-		top: 0.375rem;
-		right: 0.375rem;
-
-		&:hover {
-			background: ${({ theme }) => theme.colors.bases.primary[300]};
-		}
-	}
+const AbsoluteCloseButton = styled(CloseButton)`
+	position: absolute;
+	top: ${({ theme }) => theme.spacings.xs};
+	right: ${({ theme }) => theme.spacings.sm};
 `

site/source/components/PageData.tsx

@@ -79,11 +79,7 @@ export default function PageData(props: PageDataProps) {
 			<TrackChapter {...trackInfo}>
 				{meta && <Meta page={`simulateur.${title ?? ''}`} {...meta} />}
 
-				{beta && (
-					<StyledBetaContainer>
-						<BetaBanner />
-					</StyledBetaContainer>
-				)}
+				{beta && <BetaBanner />}
 				{title && !inIframe && (
 					<>
 						<H1>
@@ -124,15 +120,3 @@ export default function PageData(props: PageDataProps) {
 const StyledSpan = styled.span`
 	margin-right: ${({ theme }) => theme.spacings.sm};
 `
-const StyledBetaContainer = styled.div`
-	padding-top: ${({ theme }) => theme.spacings.xl};
-	@media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
-		padding-top: ${({ theme }) => theme.spacings.md};
-	}
-	margin-bottom: -${({ theme }) => theme.spacings.xl};
-	position: sticky;
-	top: 0;
-	z-index: 3;
-	background-color: ${({ theme }) =>
-		!theme.darkMode ? 'rgba(255, 255, 255, 0.7)' : 'inherit'};
-`

site/source/components/PlaceDesEntreprises.tsx

@@ -4,11 +4,10 @@ import styled from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Loader } from '@/design-system/icons/Loader'
 import { Body } from '@/design-system/typography/paragraphs'
 
-import Emoji from './utils/Emoji'
-
 const LazyIframe = lazy(async () => {
 	return import('./PlaceDesEntreprisesIframe').then(
 		({ PlaceDesEntreprisesIframe }) => ({

site/source/components/SchemeComparaison.tsx

@@ -10,14 +10,13 @@ import {
 import { Message } from '@/design-system'
 import AnswerGroup from '@/design-system/answer-group'
 import { Button } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Intro } from '@/design-system/typography/paragraphs'
 import revenusSVG from '@/images/revenus.svg'
 import { useSitePaths } from '@/sitePaths'
 
-import Emoji from './utils/Emoji'
-
 type SchemeComparaisonProps = {
 	hideAutoEntrepreneur?: boolean
 	hideAssimiléSalarié?: boolean

site/source/components/SelectSimulationYear.tsx

@@ -23,6 +23,8 @@ export const SelectSimulationYear = () => {
 			new Date().getFullYear()
 	)
 
+	// return null // Waiting for next year.
+
 	return (
 		<Banner hideAfterFirstStep={false} icon={'📅'}>
 			<Trans i18nKey="pages.simulateurs.select-year.info">

site/source/components/ShareSimulationBanner/index.tsx

@@ -3,9 +3,9 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
-import Emoji from '@/components/utils/Emoji'
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
 import {
 	companySituationSelector,

site/source/components/Simulation/index.tsx

@@ -86,14 +86,6 @@ export default function Simulation({
 					</Body>
 					{children}
 					<FromTop>
-						<div className="print-hidden">
-							{!showQuestionsFromBeginning && !firstStepCompleted && (
-								<>
-									<Spacing sm />
-									<PreviousSimulationBanner />
-								</>
-							)}
-						</div>
 						{(firstStepCompleted || showQuestionsFromBeginning) && (
 							<>
 								<div className="print-hidden">
@@ -105,42 +97,41 @@ export default function Simulation({
 								/>
 							</>
 						)}
-						<div className="print-hidden">
-							{afterQuestionsSlot}
-							{existingCompany && (
-								<Banner icon="✏">
-									<Trans>
-										Ce simulateur a été prérempli avec la situation de votre
-										entreprise.
-									</Trans>{' '}
-									<PopoverWithTrigger
-										trigger={(buttonProps) => (
-											<Link
-												{...buttonProps}
-												aria-haspopup="dialog"
-												aria-label={t(
-													'Voir ma situation, accéder à la page de gestion de mon entreprise'
-												)}
-											>
-												<Trans>Voir ma situation</Trans>
-											</Link>
-										)}
-									>
-										{(close) => <AnswerList onClose={close} />}
-									</PopoverWithTrigger>
-								</Banner>
-							)}
-							{firstStepCompleted && !hideDetails && (
-								<>
-									<ShareOrSaveSimulationBanner
-										share
-										print
-										placeDesEntreprises
-									/>
-									<Spacing lg />
-								</>
-							)}
-						</div>
+						<Spacing md />
+
+						{!showQuestionsFromBeginning && !firstStepCompleted && (
+							<PreviousSimulationBanner />
+						)}
+						{afterQuestionsSlot}
+						{existingCompany && (
+							<Banner icon="✏">
+								<Trans>
+									Ce simulateur a été prérempli avec la situation de votre
+									entreprise.
+								</Trans>{' '}
+								<PopoverWithTrigger
+									trigger={(buttonProps) => (
+										<Link
+											{...buttonProps}
+											aria-haspopup="dialog"
+											aria-label={t(
+												'Voir ma situation, accéder à la page de gestion de mon entreprise'
+											)}
+										>
+											<Trans>Voir ma situation</Trans>
+										</Link>
+									)}
+								>
+									{(close) => <AnswerList onClose={close} />}
+								</PopoverWithTrigger>
+							</Banner>
+						)}
+						{firstStepCompleted && !hideDetails && (
+							<>
+								<ShareOrSaveSimulationBanner share print placeDesEntreprises />
+								<Spacing lg />
+							</>
+						)}
 					</FromTop>
 				</StyledGrid>
 			</Grid>

site/source/components/conversation/AnswerList.tsx

@@ -7,11 +7,11 @@ import styled from 'styled-components'
 
 import { answerQuestion, resetSimulation } from '@/actions/actions'
 import { resetCompany } from '@/actions/companyActions'
-import Emoji from '@/components/utils/Emoji'
 import { EvaluatedRule, useEngine } from '@/components/utils/EngineContext'
 import { useNextQuestions } from '@/components/utils/useNextQuestion'
 import { Message, PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
 import PopoverConfirm from '@/design-system/popover/PopoverConfirm'
 import { H2, H3 } from '@/design-system/typography/heading'

site/source/components/conversation/ChoicesInput.tsx

@@ -18,7 +18,6 @@ import {
 import { Trans, useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import Emoji from '@/components/utils/Emoji'
 import {
 	Radio,
 	RadioCard,
@@ -26,6 +25,7 @@ import {
 	RadioGroup,
 	ToggleGroup,
 } from '@/design-system'
+import { Emoji } from '@/design-system/emoji'
 import { Item, Select } from '@/design-system/field/Select'
 import { Spacing } from '@/design-system/layout'
 import { H3, H4 } from '@/design-system/typography/heading'

site/source/components/conversation/Conversation.tsx

@@ -13,10 +13,10 @@ import {
 import Notifications from '@/components/Notifications'
 import QuickLinks from '@/components/QuickLinks'
 import RuleInput from '@/components/conversation/RuleInput'
-import Emoji from '@/components/utils/Emoji'
 import { useEngine } from '@/components/utils/EngineContext'
 import { useNextQuestions } from '@/components/utils/useNextQuestion'
 import { Button } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
 import { H3 } from '@/design-system/typography/heading'
 import { Body } from '@/design-system/typography/paragraphs'

site/source/components/conversation/Explicable.tsx

@@ -3,7 +3,7 @@ import { useContext } from 'react'
 
 import { EngineContext } from '@/components/utils/EngineContext'
 import { Markdown } from '@/components/utils/markdown'
-import ButtonHelp from '@/design-system/buttons/ButtonHelp'
+import HelpButton from '@/design-system/buttons/HelpButton'
 import { H3 } from '@/design-system/typography/heading'
 
 import { References } from '../References'
@@ -33,7 +33,7 @@ export function ExplicableRule<Names extends string = DottedName>({
 	// TODO montrer les variables de type 'une possibilité'
 
 	return (
-		<ButtonHelp
+		<HelpButton
 			key={rule.dottedName}
 			type="info"
 			title={rule.title}
@@ -50,6 +50,6 @@ export function ExplicableRule<Names extends string = DottedName>({
 					<References references={rule.rawNode.références} />
 				</>
 			)}
-		</ButtonHelp>
+		</HelpButton>
 	)
 }

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

@@ -4,7 +4,7 @@ import { ThemeProvider } from 'styled-components'
 
 import PageFeedback from '@/components/Feedback'
 import LegalNotice from '@/components/LegalNotice'
-import Emoji from '@/components/utils/Emoji'
+import { Emoji } from '@/design-system/emoji'
 import { FooterContainer } from '@/design-system/footer'
 import { FooterColumn } from '@/design-system/footer/column'
 import { Container } from '@/design-system/layout'

site/source/components/layout/Header.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { Logo } from '@/components/Logo'
 import SearchButton from '@/components/SearchButton'
 import BrowserOnly from '@/components/utils/BrowserOnly'
-import Emoji from '@/components/utils/Emoji'
+import { Emoji } from '@/design-system/emoji'
 import { Container } from '@/design-system/layout'
 import { Switch } from '@/design-system/switch'
 import { Link } from '@/design-system/typography/link'

site/source/components/layout/NewsBanner.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import Emoji from '@/components/utils/Emoji'
-import { Banner, HideButton, InnerBanner } from '@/design-system/banner'
+import { Message } from '@/design-system'
+import { CloseButton } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Link } from '@/design-system/typography/link'
 import { useFetchData } from '@/hooks/useFetchData'
 import { useSitePaths } from '@/sitePaths'
@@ -50,29 +51,26 @@ function NewsBanner({ lastRelease }: { lastRelease: LastRelease }) {
 	}
 
 	return (
-		<Banner className="print-hidden" onClick={() => setShowBanner(false)}>
-			<InnerBanner>
-				<span>
-					<Emoji emoji="✨" /> Découvrez les nouveautés{' '}
-					{determinant(lastRelease.name)}
-					<Link
-						to={absoluteSitePaths.nouveautés}
-						aria-label={t(
-							'Voir les nouveautés apportées par la version {{release}}',
-							{ release: lastRelease.name.toLowerCase() }
-						)}
-					>
-						{lastRelease.name.toLowerCase()}
-					</Link>
-				</span>
-				<HideButton
-					onPress={() => setShowBanner(false)}
-					aria-label={t('Fermer')}
-				>
-					&times;
-				</HideButton>
-			</InnerBanner>
-		</Banner>
+		<Message className="print-hidden" icon={<Emoji emoji="✨" />}>
+			Découvrez les nouveautés
+			{determinant(lastRelease.name)}
+			<Link
+				to={absoluteSitePaths.nouveautés}
+				aria-label={t(
+					'Voir les nouveautés apportées par la version {{release}}',
+					{ release: lastRelease.name.toLowerCase() }
+				)}
+			>
+				{lastRelease.name.toLowerCase()}
+			</Link>
+			<CloseButton
+				onPress={() => {
+					setShowBanner(false)
+					setItem(localStorageKey, lastRelease.name)
+				}}
+				aria-label={t('Fermer')}
+			/>
+		</Message>
 	)
 }
 

site/source/components/search/SimulatorHits.tsx

@@ -2,9 +2,9 @@ import { Trans } from 'react-i18next'
 import { Hit } from 'react-instantsearch-core'
 import { connectHits } from 'react-instantsearch-dom'
 
-import Emoji from '@/components/utils/Emoji'
 import InfoBulle from '@/design-system/InfoBulle'
 import { SmallCard } from '@/design-system/card'
+import { Emoji } from '@/design-system/emoji'
 import { Grid } from '@/design-system/layout'
 import { H3 } from '@/design-system/typography/heading'
 import { ExtractFromSimuData } from '@/pages/Simulateurs/metadata'

site/source/components/simulationExplanation/InstitutionsPartenaires.tsx

@@ -10,9 +10,9 @@ import Value, {
 } from '@/components/EngineValue'
 import RuleLink from '@/components/RuleLink'
 import { FromBottom } from '@/components/ui/animate'
-import Emoji from '@/components/utils/Emoji'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Message } from '@/design-system'
+import { Emoji } from '@/design-system/emoji'
 import { Grid } from '@/design-system/layout'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'

site/source/components/simulationExplanation/SalaryExplanation.tsx

@@ -6,8 +6,8 @@ import Distribution from '@/components/Distribution'
 import PaySlip from '@/components/PaySlip'
 import StackedBarChart from '@/components/StackedBarChart'
 import { FromTop } from '@/components/ui/animate'
-import Emoji from '@/components/utils/Emoji'
 import { useInversionFail } from '@/components/utils/EngineContext'
+import { Emoji } from '@/design-system/emoji'
 import { Container, Grid, Spacing } from '@/design-system/layout'
 import { H2 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'

site/source/components/ui/WarningBlock.tsx

@@ -22,7 +22,7 @@ export default function Warning({ localStorageKey, children }: WarningProps) {
 
 	return (
 		<>
-			<Message type="info">
+			<Message type="info" icon>
 				<div className="print-hidden">
 					<Intro as="h2">
 						<Trans i18nKey="simulateurs.warning.titre">

site/source/components/utils/markdown.tsx

@@ -4,6 +4,7 @@ import { useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { Message } from '@/design-system'
+import { Emoji } from '@/design-system/emoji'
 import { Strong, U } from '@/design-system/typography'
 import { H1, H2, H3, H4, H5, H6 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
@@ -12,7 +13,6 @@ import { Body } from '@/design-system/typography/paragraphs'
 
 import { SiteNameContext } from '../../Provider'
 import { isIterable } from '../../utils'
-import Emoji from './Emoji'
 
 const internalURLs = {
 	'mon-entreprise.urssaf.fr': 'mon-entreprise',

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

@@ -1,8 +1,5 @@
 import styled from 'styled-components'
 
-import { Button } from '@/design-system/buttons'
-import { GenericButtonOrNavLinkProps } from '@/design-system/typography/link'
-
 export const Banner = styled.div`
 	display: flex;
 	width: 100%;
@@ -26,20 +23,3 @@ export const InnerBanner = styled.div`
 	border-color: ${({ theme }) => theme.colors.bases.primary[500]};
 	border-radius: 0.375rem;
 `
-
-export const HideButton = styled(Button)<GenericButtonOrNavLinkProps>`
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 1.5rem;
-	width: 1.5rem;
-	padding: 0;
-	background: ${({ theme }) => theme.colors.extended.grey[100]};
-	color: ${({ theme }) => theme.colors.bases.primary[600]};
-	font-weight: bold;
-	margin-left: 1rem;
-
-	&:hover {
-		background: ${({ theme }) => theme.colors.bases.primary[300]};
-	}
-`

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

@@ -95,8 +95,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
 		${({ $isDisabled }) =>
 			!$isDisabled &&
 			css`
-				position: relative;
-				top: 3px;
+				transform: translateY(3px);
 			`}
 	}
 

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+import { GenericButtonOrNavLinkProps } from '../typography/link'
+import { Button } from './Button'
+
+export default styled(Button).attrs({
+	light: true,
+	children: '×',
+})<GenericButtonOrNavLinkProps>`
+	@media print {
+		display: none !important;
+	}
+	text-align: center;
+	height: 1.5rem;
+	line-height: 1rem;
+	width: 1.5rem;
+	padding: 0;
+	font-weight: bold;
+	margin-left: 1rem;
+`

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

@@ -4,9 +4,9 @@ import styled from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 
-import { Button } from '.'
+import { Button } from './Button'
 
-type ButtonHelpProps = {
+type HelpButtonProps = {
 	type: 'aide' | 'info'
 	title: string
 	children: React.ReactNode
@@ -15,7 +15,7 @@ type ButtonHelpProps = {
 	className?: string
 }
 
-export default function ButtonHelp({
+export default function HelpButton({
 	children,
 	title,
 	type,
@@ -23,7 +23,7 @@ export default function ButtonHelp({
 	bigPopover,
 	className,
 	...props
-}: ButtonHelpProps) {
+}: HelpButtonProps) {
 	return (
 		<PopoverWithTrigger
 			trigger={(buttonProps) => (

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

@@ -28,3 +28,5 @@ Secondary.args = {
 	color: 'secondary',
 	children: 'Secondary XS button',
 }
+
+export { CloseButton, HelpButton } from '@/design-system/buttons'

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

@@ -1 +1,3 @@
-export { Button } from './Button'
+export * from './Button'
+export { default as CloseButton } from './CloseButton'
+export { default as HelpButton } from './HelpButton'

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

@@ -2,6 +2,8 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 
 import { Chip } from '@/design-system'
 
+import { Emoji } from '../emoji'
+
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
 	component: Chip,
@@ -47,10 +49,10 @@ DifferentChips.args = {
 
 export const ChipWithCustomIcon: ComponentStory<typeof Chip> = (args) => (
 	<>
-		<Chip {...args} icon="🚧" type="info">
+		<Chip {...args} icon={<Emoji emoji="🚧" />} type="info">
 			Bêta
 		</Chip>
-		<Chip {...args} type="secondary" icon="😃">
+		<Chip {...args} type="secondary" icon={<Emoji emoji="😃" />}>
 			Everything is awesome
 		</Chip>
 	</>

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

@@ -1,16 +1,16 @@
 import React from 'react'
 import styled, { ThemeProvider, css } from 'styled-components'
 
-import Emoji from '@/components/utils/Emoji'
 import { Palette, SmallPalette } from '@/types/styled'
 
+import { Emoji } from '../emoji'
 import { ErrorIcon, InfoIcon, SuccessIcon } from '../icons'
 import { textColorFromType } from '../message'
 
 export type ChipType = 'primary' | 'secondary' | 'info' | 'error' | 'success'
 type ChipProps = {
 	children: React.ReactNode
-	icon?: boolean | string
+	icon?: boolean | React.ReactElement<typeof Emoji>
 	type?: ChipType
 	className?: string
 }
@@ -26,8 +26,8 @@ export function Chip({
 			<StyledChip className={className} type={type}>
 				{icon && (
 					<StyledIconWrapper type={type}>
-						{typeof icon === 'string' ? (
-							<Emoji emoji={icon} aria-hidden />
+						{typeof icon !== 'boolean' ? (
+							icon
 						) : type === 'success' ? (
 							<SuccessIcon />
 						) : type === 'error' ? (

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

@@ -0,0 +1,20 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { Emoji as EmojiComponent } from '.'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+	component: EmojiComponent,
+	// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+	argTypes: {
+		emoji: { type: 'string' },
+	},
+} as ComponentMeta<typeof EmojiComponent>
+
+export const Emoji: ComponentStory<typeof EmojiComponent> = (args) => (
+	<EmojiComponent {...args} />
+)
+
+Emoji.args = {
+	emoji: '❤️🧡💛💚💙💜',
+}

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

@@ -1,7 +1,7 @@
 import emojiFn from 'react-easy-emoji'
 
 type PropType = {
-	emoji: string | undefined
+	emoji: string
 	alt?: string
 	title?: string
 	'aria-hidden'?: boolean
@@ -11,7 +11,7 @@ type PropType = {
 // `emojiFn` provided by `react-easy-emoji` :
 // - allow to configure the URL to self host twemoji images in production
 // - using a real React component works better with the translation scripts
-export default function Emoji({ emoji, alt, title, ...props }: PropType) {
+export function Emoji({ emoji, alt, title, ...props }: PropType) {
 	alt ??= emoji
 
 	if (!emoji) {

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

@@ -1,8 +1,8 @@
 import { AriaRadioProps } from '@react-types/radio'
 import styled from 'styled-components'
 
-import Emoji from '@/components/utils/Emoji'
 import { Markdown } from '@/components/utils/markdown'
+import { Emoji } from '@/design-system/emoji'
 
 import { LabelBody, RadioPoint, RadioSkeleton, VisibleRadio } from './Radio'
 

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

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 import { Message } from '@/design-system'
 
+import { Emoji } from '../emoji'
 import { Strong } from '../typography'
 import { Body } from '../typography/paragraphs'
 
@@ -47,7 +48,7 @@ Alert.args = {
 }
 
 export const MessageWithCustomIcon = () => (
-	<Message type="info" icon="🚧" border={false} mini>
+	<Message type="info" icon={<Emoji emoji="🚧" />} border={false} mini>
 		<Body>
 			<StyledStrong>Cet outil est en version bêta</StyledStrong> : nous
 			travaillons à <Strong>valider les informations et les calculs</Strong>,

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

@@ -1,16 +1,16 @@
 import React from 'react'
 import styled, { DefaultTheme, ThemeProvider, css } from 'styled-components'
 
-import Emoji from '@/components/utils/Emoji'
 import { Palette, SmallPalette } from '@/types/styled'
 
+import { Emoji } from '../emoji'
 import { ErrorIcon, InfoIcon, ReturnIcon, SuccessIcon } from '../icons'
 import { Body } from '../typography/paragraphs'
 
 export type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success'
 type MessageProps = {
 	children: React.ReactNode
-	icon?: boolean | string
+	icon?: boolean | React.ReactElement<typeof Emoji>
 	border?: boolean
 	type?: MessageType
 	mini?: boolean
@@ -45,8 +45,8 @@ export function Message({
 			>
 				{icon && (
 					<StyledIconWrapper type={type}>
-						{typeof icon === 'string' ? (
-							<Emoji emoji={icon} aria-hidden />
+						{typeof icon !== 'boolean' ? (
+							icon
 						) : type === 'success' ? (
 							<SuccessIcon />
 						) : type === 'error' ? (

site/source/pages/Budget/Budget.tsx

@@ -1,12 +1,12 @@
 import { formatValue } from 'publicodes'
 import { useState } from 'react'
-import { Trans, useTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import MoreInfosOnUs from '@/components/MoreInfosOnUs'
-import Emoji from '@/components/utils/Emoji'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { Markdown } from '@/components/utils/markdown'
+import { Emoji } from '@/design-system/emoji'
 import { Item, Select } from '@/design-system/field/Select'
 import { Grid } from '@/design-system/layout'
 import { H1, H2 } from '@/design-system/typography/heading'

site/source/pages/Creer/CreationChecklist.tsx

@@ -9,10 +9,10 @@ import { resetCompanyStatusChoice } from '@/actions/companyStatusActions'
 import { CheckItem, Checklist } from '@/components/ui/Checklist'
 import { FromBottom } from '@/components/ui/animate'
 import DefaultHelmet from '@/components/utils/DefaultHelmet'
-import Emoji from '@/components/utils/Emoji'
 import Scroll from '@/components/utils/Scroll'
 import { Button } from '@/design-system/buttons'
 import { Article } from '@/design-system/card'
+import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
 import { H1, H2 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'

site/source/pages/Landing/SearchOrCreate.tsx

@@ -11,10 +11,10 @@ import {
 } from '@/api/fabrique-social'
 import { CompanyDetails } from '@/components/company/Details'
 import { CompanySearchField } from '@/components/company/SearchField'
-import Emoji from '@/components/utils/Emoji'
 import { useEngine } from '@/components/utils/EngineContext'
 import AnswerGroup from '@/design-system/answer-group'
 import { Button } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
 import PopoverConfirm from '@/design-system/popover/PopoverConfirm'
 import { H3 } from '@/design-system/typography/heading'

site/source/pages/Nouveautes/Nouveautes.tsx

@@ -5,10 +5,10 @@ import styled from 'styled-components'
 
 import MoreInfosOnUs from '@/components/MoreInfosOnUs'
 import { determinant, useHideNewsBanner } from '@/components/layout/NewsBanner'
-import Emoji from '@/components/utils/Emoji'
 import Meta from '@/components/utils/Meta'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { MarkdownWithAnchorLinks } from '@/components/utils/markdown'
+import { Emoji } from '@/design-system/emoji'
 import { Item, Select } from '@/design-system/field/Select'
 import { Container, Grid } from '@/design-system/layout'
 import { H1 } from '@/design-system/typography/heading'

site/source/pages/Simulateurs/EconomieCollaborative/ActiviteCard/index.tsx

@@ -3,10 +3,10 @@ import React, { useCallback, useContext, useRef } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import Emoji from '@/components/utils/Emoji'
 import { Button } from '@/design-system/buttons'
-import ButtonHelp from '@/design-system/buttons/ButtonHelp'
+import HelpButton from '@/design-system/buttons/HelpButton'
 import { CardContainer } from '@/design-system/card/Card'
+import { Emoji } from '@/design-system/emoji'
 import { Checkbox } from '@/design-system/field'
 import { Spacing } from '@/design-system/layout'
 import { Tag } from '@/design-system/tag'
@@ -88,9 +88,9 @@ export const ActiviteCard = ({
 			)}
 			<ActiviteContent>
 				<H4 as="h3">{titre}</H4>
-				<ButtonHelp title={titre} type="aide">
+				<HelpButton title={titre} type="aide">
 					<Body>{explication}</Body>
-				</ButtonHelp>
+				</HelpButton>
 				<SmallBody
 					css={`
 						flex: 1;

site/source/pages/Simulateurs/EconomieCollaborative/Activité.tsx

@@ -4,9 +4,9 @@ import { Trans, useTranslation } from 'react-i18next'
 import { Navigate, useParams } from 'react-router-dom'
 
 import { FromBottom } from '@/components/ui/animate'
-import Emoji from '@/components/utils/Emoji'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { Markdown } from '@/components/utils/markdown'
+import { Emoji } from '@/design-system/emoji'
 import { Radio, RadioGroup } from '@/design-system/field'
 import { H1, H2, H3 } from '@/design-system/typography/heading'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'

site/source/pages/Simulateurs/EconomieCollaborative/ActivitésSelection.tsx

@@ -2,8 +2,8 @@ import { useContext } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 
 import { FromBottom } from '@/components/ui/animate'
-import Emoji from '@/components/utils/Emoji'
 import { ScrollToTop } from '@/components/utils/Scroll'
+import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
 import { H1, H2 } from '@/design-system/typography/heading'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'

site/source/pages/Simulateurs/EconomieCollaborative/VotreSituation.tsx

@@ -5,9 +5,9 @@ import { Navigate } from 'react-router-dom'
 import PageFeedback from '@/components/Feedback'
 import { FromBottom } from '@/components/ui/animate'
 import DefaultHelmet from '@/components/utils/DefaultHelmet'
-import Emoji from '@/components/utils/Emoji'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { Button } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Grid } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H1, H2, H3 } from '@/design-system/typography/heading'

site/source/pages/Simulateurs/Home.tsx

@@ -3,12 +3,12 @@ import { ThemeProvider } from 'styled-components'
 
 import PageHeader from '@/components/PageHeader'
 import DefaultHelmet from '@/components/utils/DefaultHelmet'
-import Emoji from '@/components/utils/Emoji'
 import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
 import { Chip } from '@/design-system'
 import InfoBulle from '@/design-system/InfoBulle'
 import { Card } from '@/design-system/card'
 import { SmallCard } from '@/design-system/card/SmallCard'
+import { Emoji } from '@/design-system/emoji'
 import { Grid } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H2, H3 } from '@/design-system/typography/heading'

site/source/pages/Simulateurs/Salarié.tsx

@@ -18,9 +18,9 @@ import Simulation, {
 import SalaryExplanation from '@/components/simulationExplanation/SalaryExplanation'
 import { FromTop } from '@/components/ui/animate'
 import BrowserOnly from '@/components/utils/BrowserOnly'
-import Emoji from '@/components/utils/Emoji'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Button } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Link } from '@/design-system/typography/link'
 import { SmallBody } from '@/design-system/typography/paragraphs'
 import { targetUnitSelector } from '@/selectors/simulationSelectors'

site/source/pages/Simulateurs/SchemeComparaison.tsx

@@ -11,9 +11,9 @@ import Simulation, {
 	SimulationGoal,
 	SimulationGoals,
 } from '@/components/Simulation'
-import Emoji from '@/components/utils/Emoji'
 import { useEngine, useRawSituation } from '@/components/utils/EngineContext'
 import useSimulationConfig from '@/components/utils/useSimulationConfig'
+import { Emoji } from '@/design-system/emoji'
 import { Spacing } from '@/design-system/layout'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Intro } from '@/design-system/typography/paragraphs'

site/source/pages/Simulateurs/cards/GuideURSSAFCard.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 
-import Emoji from '@/components/utils/Emoji'
 import { Article } from '@/design-system/card'
+import { Emoji } from '@/design-system/emoji'
 
 type GuideURSSAFCardProps = {
 	guideUrssaf: {

site/source/pages/Simulateurs/cards/IframeIntegrationCard.tsx

@@ -1,7 +1,7 @@
 import { Trans, useTranslation } from 'react-i18next'
 
-import Emoji from '@/components/utils/Emoji'
 import { Article } from '@/design-system/card'
+import { Emoji } from '@/design-system/emoji'
 
 type IframeIntegrationCardProps = {
 	sitePaths: { développeur: { iframe: string } }

site/source/pages/Simulateurs/cards/SimulatorRessourceCard.tsx

@@ -1,7 +1,7 @@
 import { Trans } from 'react-i18next'
 
-import Emoji from '@/components/utils/Emoji'
 import { Article } from '@/design-system/card'
+import { Emoji } from '@/design-system/emoji'
 
 import useSimulatorsData, { SimulatorData } from '../metadata'
 

site/source/pages/Simulateurs/metadata.tsx

@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components'
 
 import { PlaceDesEntreprisesButton } from '@/components/PlaceDesEntreprises'
 import RuleLink from '@/components/RuleLink'
-import Emoji from '@/components/utils/Emoji'
+import { Emoji } from '@/design-system/emoji'
 import { Strong } from '@/design-system/typography'
 import { H2 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'

site/source/pages/Stats/GlobalStats.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 
-import Emoji from '@/components/utils/Emoji'
+import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
 import { Link } from '@/design-system/typography/link'
 

site/source/pages/Stats/LazyStats.tsx

@@ -3,9 +3,9 @@ import { Suspense, lazy } from 'react'
 import MoreInfosOnUs from '@/components/MoreInfosOnUs'
 import PageHeader from '@/components/PageHeader'
 import Privacy from '@/components/layout/Footer/Privacy'
-import Emoji from '@/components/utils/Emoji'
 import Meta from '@/components/utils/Meta'
 import { ScrollToTop } from '@/components/utils/Scroll'
+import { Emoji } from '@/design-system/emoji'
 import { Intro } from '@/design-system/typography/paragraphs'
 
 import { TrackPage } from '../../ATInternetTracking'

site/source/pages/Stats/SatisfactionChart.tsx

@@ -1,7 +1,7 @@
 import { Bar, BarChart, LabelList, Tooltip, XAxis } from 'recharts'
 
 import { StyledLegend } from '@/components/charts/PagesCharts'
-import Emoji from '@/components/utils/Emoji'
+import { Emoji } from '@/design-system/emoji'
 import { Strong } from '@/design-system/typography'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'

site/source/pages/Stats/Stats.tsx

@@ -6,10 +6,10 @@ import { BrushProps } from 'recharts'
 import styled from 'styled-components'
 
 import PagesChart from '@/components/charts/PagesCharts'
-import Emoji from '@/components/utils/Emoji'
 import { useScrollToHash } from '@/components/utils/markdown'
 import { Message } from '@/design-system'
 import InfoBulle from '@/design-system/InfoBulle'
+import { Emoji } from '@/design-system/emoji'
 import { Radio, ToggleGroup } from '@/design-system/field'
 import { Item, Select } from '@/design-system/field/Select'
 import { Grid, Spacing } from '@/design-system/layout'

site/source/pages/gerer/_components/ActivitePartielle.tsx

@@ -1,7 +1,7 @@
 import { Trans, useTranslation } from 'react-i18next'
 
-import Emoji from '@/components/utils/Emoji'
 import { Card } from '@/design-system/card'
+import { Emoji } from '@/design-system/emoji'
 import { useSitePaths } from '@/sitePaths'
 
 export function ActivitePartielleCard() {

site/source/pages/gerer/_components/ImpotSociete.tsx

@@ -1,7 +1,7 @@
 import { Trans, useTranslation } from 'react-i18next'
 
-import Emoji from '@/components/utils/Emoji'
 import { Card } from '@/design-system/card'
+import { Emoji } from '@/design-system/emoji'
 import { useSitePaths } from '@/sitePaths'
 
 export function ImpotSocieteCard() {

site/source/pages/gerer/declaration-charges-sociales-independant/_components/ExplicationResultatFiscal.tsx

@@ -1,7 +1,7 @@
 import { Trans } from 'react-i18next'
 import styled from 'styled-components'
 
-import ButtonHelp from '@/design-system/buttons/ButtonHelp'
+import HelpButton from '@/design-system/buttons/HelpButton'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body, baseParagraphStyle } from '@/design-system/typography/paragraphs'
 
@@ -36,7 +36,7 @@ const suramortissementHeader = 'suramortissementHeader'
 
 export function ExplicationsResultatFiscal() {
 	return (
-		<ButtonHelp title="Quelles exonérations inclure ?" type="aide" bigPopover>
+		<HelpButton title="Quelles exonérations inclure ?" type="aide" bigPopover>
 			<Body>
 				Pour calculer le montant du résultat fiscal avant déduction des
 				exonérations et des charges sociales à indiquer dans ce simulateur, vous
@@ -207,6 +207,6 @@ export function ExplicationsResultatFiscal() {
 					</tr>
 				</tbody>
 			</StyledTable>
-		</ButtonHelp>
+		</HelpButton>
 	)
 }

site/source/pages/gerer/declaration-charges-sociales-independant/_components/RésultatSimple.tsx

@@ -3,10 +3,10 @@ import { Trans, useTranslation } from 'react-i18next'
 
 import Value, { Condition } from '@/components/EngineValue'
 import { FromTop } from '@/components/ui/animate'
-import Emoji from '@/components/utils/Emoji'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Markdown } from '@/components/utils/markdown'
 import { Article } from '@/design-system/card'
+import { Emoji } from '@/design-system/emoji'
 import { Container, Grid, Spacing } from '@/design-system/layout'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'

site/source/pages/gerer/demande-mobilité/EndBlock.tsx

@@ -5,10 +5,10 @@ import SignaturePad from 'react-signature-pad-wrapper'
 import { ThemeContext } from 'styled-components'
 
 import { Condition } from '@/components/EngineValue'
-import Emoji from '@/components/utils/Emoji'
 import { EngineContext, EngineProvider } from '@/components/utils/EngineContext'
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Checkbox, TextField } from '@/design-system/field'
 import { Grid, Spacing } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'

site/source/pages/gerer/demande-mobilité/index.tsx

@@ -7,12 +7,12 @@ import { WhenApplicable, WhenNotApplicable } from '@/components/EngineValue'
 import PageHeader from '@/components/PageHeader'
 import RuleInput from '@/components/conversation/RuleInput'
 import BrowserOnly from '@/components/utils/BrowserOnly'
-import Emoji from '@/components/utils/Emoji'
 import { EngineContext, EngineProvider } from '@/components/utils/EngineContext'
 import { Markdown } from '@/components/utils/markdown'
 import { usePersistingState } from '@/components/utils/persistState'
 import useSimulationConfig from '@/components/utils/useSimulationConfig'
 import { Button } from '@/design-system/buttons'
+import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
 import PopoverConfirm from '@/design-system/popover/PopoverConfirm'
 import { headings } from '@/design-system/typography'

site/source/pages/integration/Iframe.tsx

@@ -5,9 +5,9 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useHref, useSearchParams } from 'react-router-dom'
 import styled from 'styled-components'
 
-import Emoji from '@/components/utils/Emoji'
 import { PopoverWithTrigger, TextField } from '@/design-system'
 import { Article } from '@/design-system/card'
+import { Emoji } from '@/design-system/emoji'
 import { Item, Select } from '@/design-system/field/Select'
 import { Grid, Spacing } from '@/design-system/layout'
 import { H1, H2, H3 } from '@/design-system/typography/heading'

site/source/pages/integration/Library.tsx

@@ -1,9 +1,9 @@
 import { Trans } from 'react-i18next'
 
 import PageHeader from '@/components/PageHeader'
-import Emoji from '@/components/utils/Emoji'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { Message } from '@/design-system'
+import { Emoji } from '@/design-system/emoji'
 import { Code, Strong } from '@/design-system/typography'
 import { H2, H3, H4 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'

site/source/pages/integration/Options.tsx

@@ -2,8 +2,8 @@ import { Trans, useTranslation } from 'react-i18next'
 
 import PageHeader from '@/components/PageHeader'
 import { icons } from '@/components/ui/SocialIcon'
-import Emoji from '@/components/utils/Emoji'
 import { Card } from '@/design-system/card'
+import { Emoji } from '@/design-system/emoji'
 import { Grid } from '@/design-system/layout'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
 import { useSitePaths } from '@/sitePaths'

site/source/pages/integration/index.tsx

@@ -1,9 +1,9 @@
 import { Trans, useTranslation } from 'react-i18next'
 import { Route, Routes, useLocation } from 'react-router-dom'
 
-import Emoji from '@/components/utils/Emoji'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { Banner, InnerBanner } from '@/design-system/banner'
+import { Emoji } from '@/design-system/emoji'
 import { Link } from '@/design-system/typography/link'
 import { useFetchData } from '@/hooks/useFetchData'
 import { useSitePaths } from '@/sitePaths'