Styled component update : Fix Errors on landing

site/package.json

@@ -94,6 +94,7 @@
 		"redux": "^4.2.0",
 		"reselect": "^4.1.7",
 		"styled-components": "^6.0.7",
+		"stylis": "^4.0.0",
 		"whatwg-fetch": "^3.6.2"
 	},
 	"devDependencies": {

site/source/components/App.tsx

@@ -111,7 +111,7 @@ const App = () => {
 	const engine = useEngine()
 
 	return (
-		<StyledLayout isEmbedded={isEmbedded}>
+		<StyledLayout $isEmbedded={isEmbedded}>
 			{!isEmbedded && <Header />}
 
 			<main
@@ -192,10 +192,10 @@ const App = () => {
 }
 
 const StyledLayout = styled.div<{
-	isEmbedded: boolean
+	$isEmbedded: boolean
 }>`
-	${({ isEmbedded }) =>
-		!isEmbedded &&
+	${({ $isEmbedded }) =>
+		!$isEmbedded &&
 		css`
 			flex-direction: column;
 			display: flex;

site/source/components/SimulateurCard.tsx

@@ -26,7 +26,6 @@ export function SimulateurCard({
 	beta,
 	small = false,
 	fromGérer = false,
-	...props
 }: SimulateurCardProps) {
 	const isIframe = useIsEmbedded()
 	const { t } = useTranslation()
@@ -39,7 +38,7 @@ export function SimulateurCard({
 	return (
 		<>
 			{small ? (
-				<Grid item xs={12} sm={6} md={6} lg={4} {...props}>
+				<Grid item xs={12} sm={6} md={6} lg={4}>
 					<SmallCard
 						icon={<Emoji emoji={icône} />}
 						to={{
@@ -61,7 +60,7 @@ export function SimulateurCard({
 					/>
 				</Grid>
 			) : (
-				<Grid item xs={12} sm={6} md={6} lg={4} {...props}>
+				<Grid item xs={12} sm={6} md={6} lg={4}>
 					<Card
 						title={
 							<>

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

@@ -50,7 +50,7 @@ export function Article({
 				as={elementType}
 			>
 				{ctaLabel}
-				{linkProps.external && <NewWindowLinkIcon />}
+				{linkProps.target === '_blank' && <NewWindowLinkIcon />}
 				<StyledChevron aria-hidden />
 			</StyledBody>
 		</StyledArticle>

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

@@ -90,7 +90,7 @@ export function Card(props: CardProps) {
 					tabIndex={undefined}
 				>
 					{ctaLabel}
-					{linkProps.external && <NewWindowLinkIcon />}
+					{linkProps.target === '_blank' && <NewWindowLinkIcon />}
 				</CardButton>
 			)}
 		</CardContainer>

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

@@ -45,7 +45,7 @@ export function SmallCard({
 					as="span"
 				>
 					{titleProps.children}
-					{linkProps.external && <NewWindowLinkIcon />}
+					{linkProps.target === '_blank' && <NewWindowLinkIcon />}
 				</H6>
 				{children && <SmallBody>{children}</SmallBody>}
 			</Content>

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

@@ -100,9 +100,9 @@ export default function NumberField(props: NumberFieldProps) {
 		<StyledNumberFieldContainer>
 			<StyledInputContainer
 				{...groupProps}
-				hasError={!!props.errorMessage || props.validationState === 'invalid'}
-				hasLabel={!!props.label}
-				small={props.small}
+				$hasError={!!props.errorMessage || props.validationState === 'invalid'}
+				$hasLabel={!!props.label}
+				$small={props.small}
 			>
 				<StyledNumberInput
 					{...(omit(props, 'label') as HTMLAttributes<HTMLInputElement>)}

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

@@ -38,9 +38,9 @@ const SearchInputContainer = styled(StyledInputContainer)`
 	}
 `
 
-const IconContainer = styled.div<{ hasLabel?: boolean }>`
+const IconContainer = styled.div<{ $hasLabel?: boolean }>`
 	padding: calc(
-			${({ hasLabel = false }) => (hasLabel ? '1rem' : '0rem')} + 0.5rem
+			${({ $hasLabel = false }) => ($hasLabel ? '1rem' : '0rem')} + 0.5rem
 		)
 		0 0.5rem;
 `
@@ -67,10 +67,10 @@ export default function SearchField(
 	return (
 		<StyledContainer>
 			<SearchInputContainer
-				hasError={!!props.errorMessage || props.validationState === 'invalid'}
-				hasLabel={!!props.label}
+				$hasError={!!props.errorMessage || props.validationState === 'invalid'}
+				$hasLabel={!!props.label}
 			>
-				<IconContainer hasLabel={!!props.label}>
+				<IconContainer $hasLabel={!!props.label}>
 					{props.isSearchStalled ? <Loader /> : <SearchIcon aria-hidden />}
 				</IconContainer>
 				<SearchInput

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

@@ -8,7 +8,7 @@ const LABEL_HEIGHT = '1rem'
 
 type TextAreaFieldProps = AriaTextFieldOptions<'textarea'> & {
 	inputRef?: RefObject<HTMLTextAreaElement>
-	small?: boolean
+	$small?: boolean
 	rows?: number | undefined
 }
 
@@ -24,8 +24,8 @@ export default function TextAreaField(props: TextAreaFieldProps) {
 	return (
 		<StyledContainer>
 			<StyledTextAreaContainer
-				hasError={!!props.errorMessage || props.validationState === 'invalid'}
-				hasLabel={!!props.label && !props.small}
+				$hasError={!!props.errorMessage || props.validationState === 'invalid'}
+				$hasLabel={!!props.label && !props.$small}
 			>
 				<StyledTextArea
 					{...(props as HTMLAttributes<HTMLTextAreaElement>)}
@@ -38,7 +38,10 @@ export default function TextAreaField(props: TextAreaFieldProps) {
 					ref={props.inputRef || ref}
 				/>
 				{props.label && (
-					<StyledLabel className={props.small ? 'sr-only' : ''} {...labelProps}>
+					<StyledLabel
+						className={props.$small ? 'sr-only' : ''}
+						{...labelProps}
+					>
 						{props.label}
 					</StyledLabel>
 				)}
@@ -131,9 +134,9 @@ export const StyledSuffix = styled.span`
 `
 
 export const StyledTextAreaContainer = styled.div<{
-	hasError: boolean
-	hasLabel: boolean
-	small?: boolean
+	$hasError: boolean
+	$hasLabel: boolean
+	$small?: boolean
 }>`
 	border-radius: ${({ theme }) => theme.box.borderRadius};
 	border: ${({ theme }) =>
@@ -153,8 +156,8 @@ export const StyledTextAreaContainer = styled.div<{
 	transition: all 0.2s;
 
 	:focus-within {
-		outline-color: ${({ theme, hasError }) =>
-			hasError
+		outline-color: ${({ theme, $hasError }) =>
+			$hasError
 				? theme.colors.extended.error[400]
 				: theme.darkMode
 				? theme.colors.bases.primary[100]
@@ -176,8 +179,8 @@ export const StyledTextAreaContainer = styled.div<{
 			`}
 	}
 
-	${({ hasLabel }) =>
-		hasLabel &&
+	${({ $hasLabel }) =>
+		$hasLabel &&
 		css`
 			${StyledTextArea}:not(:focus):placeholder-shown {
 				color: transparent;
@@ -196,8 +199,8 @@ export const StyledTextAreaContainer = styled.div<{
 		transform: translateY(-50%);
 	}
 
-	${({ theme, hasError }) =>
-		hasError &&
+	${({ theme, $hasError }) =>
+		$hasError &&
 		css`
 			&& {
 				border-color: ${theme.colors.extended.error[400]};
@@ -209,18 +212,18 @@ export const StyledTextAreaContainer = styled.div<{
 		`}
 
 	${StyledTextArea}, ${StyledSuffix} {
-		padding: ${({ hasLabel, theme, small }) =>
-			small
+		padding: ${({ $hasLabel, theme, $small }) =>
+			$small
 				? css`
 						${theme.spacings.xxs} ${theme.spacings.xs}
 				  `
-				: css`calc(${hasLabel ? LABEL_HEIGHT : '0rem'} + ${
+				: css`calc(${$hasLabel ? LABEL_HEIGHT : '0rem'} + ${
 						theme.spacings.xs
 				  }) ${theme.spacings.sm} ${theme.spacings.xs}`};
 	}
 
-	${({ small }) =>
-		small &&
+	${({ $small }) =>
+		$small &&
 		css`
 			${StyledSuffix}, ${StyledTextArea} {
 				font-size: 1rem;

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

@@ -21,8 +21,8 @@ export default function TextField(props: TextFieldProps) {
 	return (
 		<StyledContainer>
 			<StyledInputContainer
-				hasError={!!props.errorMessage || props.validationState === 'invalid'}
-				hasLabel={!!props.label && !props.small}
+				$hasError={!!props.errorMessage || props.validationState === 'invalid'}
+				$hasLabel={!!props.label && !props.small}
 			>
 				<StyledInput
 					{...(omit(props, 'label') as HTMLAttributes<HTMLInputElement>)}
@@ -127,9 +127,9 @@ export const StyledSuffix = styled.span`
 `
 
 export const StyledInputContainer = styled.div<{
-	hasError: boolean
-	hasLabel: boolean
-	small?: boolean
+	$hasError: boolean
+	$hasLabel: boolean
+	$small?: boolean
 }>`
 	border-radius: ${({ theme }) => theme.box.borderRadius};
 	border: ${({ theme }) =>
@@ -150,8 +150,8 @@ export const StyledInputContainer = styled.div<{
 	transition: all 0.2s;
 
 	:focus-within {
-		outline-color: ${({ theme, hasError }) =>
-			hasError
+		outline-color: ${({ theme, $hasError }) =>
+			$hasError
 				? theme.colors.extended.error[400]
 				: theme.darkMode
 				? theme.colors.bases.primary[100]
@@ -173,8 +173,8 @@ export const StyledInputContainer = styled.div<{
 			`}
 	}
 
-	${({ hasLabel }) =>
-		hasLabel &&
+	${({ $hasLabel }) =>
+		$hasLabel &&
 		css`
 			${StyledInput}:not(:focus):placeholder-shown {
 				color: transparent;
@@ -193,8 +193,8 @@ export const StyledInputContainer = styled.div<{
 		transform: translateY(-50%);
 	}
 
-	${({ theme, hasError }) =>
-		hasError &&
+	${({ theme, $hasError }) =>
+		$hasError &&
 		css`
 			&& {
 				border-color: ${theme.colors.extended.error[400]};
@@ -206,12 +206,12 @@ export const StyledInputContainer = styled.div<{
 		`}
 
 	${StyledInput}, ${StyledSuffix} {
-		padding: ${({ hasLabel, theme, small }) =>
-			small
+		padding: ${({ $hasLabel, theme, $small }) =>
+			$small
 				? css`
 						${theme.spacings.xxs} ${theme.spacings.xs}
 				  `
-				: css`calc(${hasLabel ? LABEL_HEIGHT : '0rem'} + ${
+				: css`calc(${$hasLabel ? LABEL_HEIGHT : '0rem'} + ${
 						theme.spacings.xs
 				  }) ${theme.spacings.sm} ${theme.spacings.xs}`};
 		color: ${({ theme }) =>
@@ -220,8 +220,8 @@ export const StyledInputContainer = styled.div<{
 				: theme.colors.extended.grey[800]};
 	}
 
-	${({ small }) =>
-		small &&
+	${({ $small }) =>
+		$small &&
 		css`
 			${StyledSuffix}, ${StyledInput} {
 				font-size: 1rem;

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

@@ -86,7 +86,9 @@ const OuterContainer = styled.div<OuterContainerProps>`
 	flex-direction: column;
 	min-width: 100vw;
 	background-color: ${({ theme, $backgroundColor }) =>
-		$backgroundColor ? $backgroundColor(theme) : theme.colors};
+		$backgroundColor
+			? $backgroundColor(theme)
+			: theme.colors.extended.grey[100]};
 	@media print {
 		min-width: initial;
 	}

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

@@ -62,8 +62,8 @@ type GridProps =
  */
 export default function FluidGrid(props: GridProps) {
 	if (props.container === true) {
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		const { container, item, ...containerProps } = props // Omit props.container and props.item
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 		return <GridContainer {...containerProps} />
 	} else if (props.item === true) {

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

@@ -0,0 +1,30 @@
+import { styled } from 'styled-components'
+
+import { Theme } from '@/types/styled'
+
+export { default as Container } from './Container'
+export { default as Grid } from './Grid'
+type SpacingProps =
+	| { xxl: true }
+	| { xl: true }
+	| { lg: true }
+	| { md: true }
+	| { sm: true }
+	| { xs: true }
+	| { xxs: true }
+
+export function Spacing(props: SpacingProps) {
+	return (
+		<SpacingStyled
+			$size={
+				(['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs'] as const).find(
+					(key) => key in props
+				) ?? 'md'
+			}
+		/>
+	)
+}
+
+const SpacingStyled = styled.div<{ $size: keyof Theme['spacings'] }>`
+	height: ${({ theme, $size }) => theme.spacings[$size]};
+`

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

@@ -22,8 +22,8 @@ const sizeDico = {
 interface StyledProps {
 	checked: boolean
 	disabled: boolean
-	size: Size
-	light: boolean
+	$size: Size
+	$light: boolean
 }
 
 const StyledSpan = styled.span<StyledProps>`
@@ -43,7 +43,7 @@ const StyledSpan = styled.span<StyledProps>`
 `
 
 const StyledSwitch = styled.span<StyledProps>`
-	--switch-size: ${({ size }) => sizeDico[size]};
+	--switch-size: ${({ $size }) => sizeDico[$size]};
 	display: inline-flex;
 	transition: all 0.15s ease-in-out;
 	background-color: ${({ theme, checked }) =>
@@ -55,9 +55,9 @@ const StyledSwitch = styled.span<StyledProps>`
 	padding: 0.2rem;
 	margin: 0 ${({ theme }) => theme.spacings.xxs};
 	border-radius: var(--switch-size);
-	width: calc(var(--switch-size) + ${({ light }) => (light ? 4 : 0)}px);
-	${({ light }) =>
-		light
+	width: calc(var(--switch-size) + ${({ $light }) => ($light ? 4 : 0)}px);
+	${({ $light }) =>
+		$light
 			? css`
 					border: 2px #ffffffbf solid;
 			  `
@@ -105,7 +105,7 @@ type AriaSwitchProps = Parameters<typeof useSwitch>[0]
 
 export type SwitchProps = AriaSwitchProps & {
 	size?: Size
-	light?: boolean
+	$light?: boolean
 	children?: ReactNode
 	className?: string
 	role?: string
@@ -118,7 +118,7 @@ export type SwitchProps = AriaSwitchProps & {
 export const Switch = (props: SwitchProps) => {
 	const {
 		size = 'MD',
-		light = false,
+		$light = false,
 		children,
 		className,
 		invertLabel = false,
@@ -137,8 +137,8 @@ export const Switch = (props: SwitchProps) => {
 				<Text invertLabel={invertLabel}>{children}</Text>
 			)}
 			<StyledSwitch
-				light={light}
-				size={size}
+				$light={$light}
+				$size={size}
 				checked={isSelected}
 				disabled={isDisabled}
 			>
@@ -151,8 +151,8 @@ export const Switch = (props: SwitchProps) => {
 					role={props?.role}
 				/>
 				<StyledSpan
-					light={light}
-					size={size}
+					$light={$light}
+					$size={size}
 					aria-hidden
 					checked={isSelected}
 					disabled={isDisabled}

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

@@ -113,7 +113,6 @@ export function useExternalLinkProps({
 	return {
 		target: '_blank',
 		rel: 'noreferrer',
-		external: true,
 		children: children && (
 			<>
 				{children}

yarn.lock

@@ -25165,6 +25165,7 @@ __metadata:
     serve-static: ^1.15.0
     storybook: ^7.0.5
     styled-components: ^6.0.7
+    stylis: ^4.0.0
     ts-morph: ^17.0.1
     ts-node: ^10.9.1
     typescript: ^5.2.2
@@ -25995,7 +25996,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylis@npm:^4.3.0":
+"stylis@npm:^4.0.0, stylis@npm:^4.3.0":
   version: 4.3.0
   resolution: "stylis@npm:4.3.0"
   checksum: 6120de3f03eacf3b5adc8e7919c4cca991089156a6badc5248752a3088106afaaf74996211a6817a7760ebeadca09004048eea31875bd8d4df51386365c50025