@axa-fr/design-system-apollo-react 2.0.4-alpha.20 → 2.0.4-alpha.74

package/dist/Accordion/AccordionApollo.d.ts

@@ -1,4 +1,4 @@
 import { type AccordionProps } from "./AccordionCommon";
-import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionApollo.css";
 export declare const Accordion: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export { type AccordionVariants, accordionVariants } from "./AccordionCommon";

package/dist/Accordion/AccordionApollo.js

@@ -3,6 +3,6 @@ import { AccordionCore } from "../AccordionCore/AccordionCoreApollo";
 import { AccordionTagDateContainer } from "./AccordionTagDateContainer/AccordionTagDateContainerApollo";
 import { Icon } from "../Icon/IconApollo";
 import { AccordionCommon } from "./AccordionCommon";
-import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionApollo.css";
 export const Accordion = (props) => (_jsx(AccordionCommon, { ...props, AccordionCoreComponent: AccordionCore, AccordionTagDateContainerComponent: AccordionTagDateContainer, IconComponent: Icon }));
 export { accordionVariants } from "./AccordionCommon";

package/dist/Accordion/AccordionLF.d.ts

@@ -1,4 +1,4 @@
 import { type AccordionProps } from "./AccordionCommon";
-import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionLF.css";
 export declare const Accordion: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export { type AccordionVariants, accordionVariants } from "./AccordionCommon";

package/dist/Accordion/AccordionLF.js

@@ -3,6 +3,6 @@ import { AccordionCore } from "../AccordionCore/AccordionCoreLF";
 import { AccordionTagDateContainer } from "./AccordionTagDateContainer/AccordionTagDateContainerLF";
 import { AccordionCommon } from "./AccordionCommon";
 import { Icon } from "../Icon/IconCommon";
-import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionLF.css";
 export const Accordion = (props) => (_jsx(AccordionCommon, { ...props, AccordionCoreComponent: AccordionCore, AccordionTagDateContainerComponent: AccordionTagDateContainer, IconComponent: Icon }));
 export { accordionVariants } from "./AccordionCommon";

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerApollo.d.ts

@@ -1,3 +1,3 @@
 import { type AccordionTagDateContainerProps } from "./AccordionTagDateContainerCommon";
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreApollo.css";
 export declare const AccordionTagDateContainer: (props: AccordionTagDateContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerApollo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tag } from "../../Tag/TagApollo";
 import { AccordionTagDateContainerCommon, } from "./AccordionTagDateContainerCommon";
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreApollo.css";
 export const AccordionTagDateContainer = (props) => _jsx(AccordionTagDateContainerCommon, { ...props, TagComponent: Tag });

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerLF.d.ts

@@ -1,3 +1,3 @@
 import { type AccordionTagDateContainerProps } from "./AccordionTagDateContainerCommon";
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreLF.css";
 export declare const AccordionTagDateContainer: (props: AccordionTagDateContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerLF.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tag } from "../../Tag/TagLF";
 import { AccordionTagDateContainerCommon, } from "./AccordionTagDateContainerCommon";
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreLF.css";
 export const AccordionTagDateContainer = (props) => _jsx(AccordionTagDateContainerCommon, { ...props, TagComponent: Tag });

package/dist/AccordionCore/AccordionCoreApollo.d.ts

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreApollo.css";
 import { type AccordionCoreProps } from "./AccordionCoreCommon";
 export declare const AccordionCore: (props: AccordionCoreProps) => import("react/jsx-runtime").JSX.Element;

package/dist/AccordionCore/AccordionCoreApollo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreApollo.css";
 import { AccordionCoreCommon, } from "./AccordionCoreCommon";
 import { Icon } from "../Icon/IconApollo";
 export const AccordionCore = (props) => (_jsx(AccordionCoreCommon, { IconComponent: Icon, ...props }));

package/dist/AccordionCore/AccordionCoreLF.d.ts

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreLF.css";
 import { type AccordionCoreProps } from "./AccordionCoreCommon";
 export declare const AccordionCore: (props: AccordionCoreProps) => import("react/jsx-runtime").JSX.Element;

package/dist/AccordionCore/AccordionCoreLF.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreLF.css";
 import { AccordionCoreCommon, } from "./AccordionCoreCommon";
 import { Icon } from "../Icon/IconLF";
 export const AccordionCore = (props) => (_jsx(AccordionCoreCommon, { IconComponent: Icon, ...props }));

package/dist/BasePicture/BasePicture.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "react";
-import "@axa-fr/design-system-apollo-css/dist/BasePicture/BasePicture.scss";
+import "@axa-fr/design-system-apollo-css/dist/BasePicture/BasePictureAll.css";
 type BasePictureProps = ComponentProps<"img">;
 export declare const BasePicture: ({ className, src, ...props }: BasePictureProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/BasePicture/BasePicture.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import logo from "@axa-fr/design-system-apollo-css/logo-axa.svg";
-import "@axa-fr/design-system-apollo-css/dist/BasePicture/BasePicture.scss";
-export const BasePicture = ({ className, src, ...props }) => {
-    return (_jsx("img", { className: ["af-basepicture", className].filter(Boolean).join(" "), alt: "", src: src || logo, ...props }));
-};
+import "@axa-fr/design-system-apollo-css/dist/BasePicture/BasePictureAll.css";
+export const BasePicture = ({ className, src, ...props }) => (_jsx("img", { className: ["af-basepicture", className].filter(Boolean).join(" "), alt: "", src: src || logo, ...props }));

package/dist/Button/ButtonApollo.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-apollo-css/dist/Button/ButtonApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Button/ButtonApollo.css";
 import { type ButtonProps } from "./ButtonCommon";
 export { buttonVariants, type ButtonVariants, type ButtonProps, } from "./ButtonCommon";
 export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Button/ButtonApollo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Button/ButtonApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Button/ButtonApollo.css";
 import { Spinner } from "../Spinner/SpinnerApollo";
 import { ButtonCommon } from "./ButtonCommon";
 export { buttonVariants, } from "./ButtonCommon";

package/dist/Button/ButtonLF.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-apollo-css/dist/Button/ButtonLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Button/ButtonLF.css";
 import { type ButtonProps } from "./ButtonCommon";
 export { buttonVariants, type ButtonVariants, type ButtonProps, } from "./ButtonCommon";
 export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Button/ButtonLF.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Button/ButtonLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Button/ButtonLF.css";
 import { Spinner } from "../Spinner/SpinnerLF";
 import { ButtonCommon } from "./ButtonCommon";
 export { buttonVariants, } from "./ButtonCommon";

package/dist/CardMessage/CardMessageApollo.d.ts

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/CardMessage/CardMessageApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/CardMessage/CardMessageApollo.css";
 export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./CardMessageCommon";

package/dist/CardMessage/CardMessageApollo.js

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/CardMessage/CardMessageApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/CardMessage/CardMessageApollo.css";
 export { CardMessage, cardMessageVariants, } from "./CardMessageCommon";

package/dist/CardMessage/CardMessageLF.d.ts

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/CardMessage/CardMessageLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/CardMessage/CardMessageLF.css";
 export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./CardMessageCommon";

package/dist/CardMessage/CardMessageLF.js

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/CardMessage/CardMessageLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/CardMessage/CardMessageLF.css";
 export { CardMessage, cardMessageVariants, } from "./CardMessageCommon";

package/dist/ClickIcon/ClickIconApollo.d.ts

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/ClickIcon/ClickIconApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/ClickIcon/ClickIconApollo.css";
 export { ClickIcon } from "./ClickIconCommon";

package/dist/ClickIcon/ClickIconApollo.js

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/ClickIcon/ClickIconApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/ClickIcon/ClickIconApollo.css";
 export { ClickIcon } from "./ClickIconCommon";

package/dist/ClickIcon/ClickIconLF.d.ts

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/ClickIcon/ClickIconLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/ClickIcon/ClickIconLF.css";
 export { ClickIcon } from "./ClickIconCommon";

package/dist/ClickIcon/ClickIconLF.js

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/ClickIcon/ClickIconLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/ClickIcon/ClickIconLF.css";
 export { ClickIcon } from "./ClickIconCommon";

package/dist/ContentItemDuoAction/ContentItemDuoActionApollo.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-apollo-css/dist/ContentItemDuoAction/ContentItemDuoActionCommon.scss";
+import "@axa-fr/design-system-apollo-css/dist/List/ContentItemDuoAction/ContentItemDuoActionAll.css";
 import { type ContentItemDuoActionProps } from "./ContentItemDuoActionCommon";
 export { type ContentItemDuoActionState } from "./ContentItemDuoActionCommon";
-export declare const ContentItemDuoAction: ({ ...props }: ContentItemDuoActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentItemDuoAction: (props: ContentItemDuoActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ContentItemDuoAction/ContentItemDuoActionApollo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/ContentItemDuoAction/ContentItemDuoActionCommon.scss";
+import "@axa-fr/design-system-apollo-css/dist/List/ContentItemDuoAction/ContentItemDuoActionAll.css";
 import { ContentItemDuoActionCommon, } from "./ContentItemDuoActionCommon";
 import { ContentItemMono } from "../ContentItemMono/ContentItemMonoApollo";
 import { Toggle } from "../Toggle/ToggleApollo";
-export const ContentItemDuoAction = ({ ...props }) => (_jsx(ContentItemDuoActionCommon, { ...props, ContentItemMonoComponent: ContentItemMono, ToggleComponent: Toggle }));
+export const ContentItemDuoAction = (props) => (_jsx(ContentItemDuoActionCommon, { ...props, ContentItemMonoComponent: ContentItemMono, ToggleComponent: Toggle }));

package/dist/ContentItemDuoAction/ContentItemDuoActionLF.d.ts

@@ -1,5 +1,5 @@
-import "@axa-fr/design-system-apollo-css/dist/ContentItemDuoAction/ContentItemDuoActionCommon.scss";
-import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/List/ContentItemDuoAction/ContentItemDuoActionAll.css";
+import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoLF.css";
 import { type ContentItemDuoActionProps } from "./ContentItemDuoActionCommon";
 export { type ContentItemDuoActionState } from "./ContentItemDuoActionCommon";
-export declare const ContentItemDuoAction: ({ ...props }: ContentItemDuoActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentItemDuoAction: (props: ContentItemDuoActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ContentItemDuoAction/ContentItemDuoActionLF.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/ContentItemDuoAction/ContentItemDuoActionCommon.scss";
-import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/List/ContentItemDuoAction/ContentItemDuoActionAll.css";
+import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoLF.css";
 import { ContentItemDuoActionCommon, } from "./ContentItemDuoActionCommon";
 import { ContentItemMono } from "../ContentItemMono/ContentItemMonoLF";
 import { Toggle } from "../Toggle/ToggleLF";
-export const ContentItemDuoAction = ({ ...props }) => (_jsx(ContentItemDuoActionCommon, { ...props, ContentItemMonoComponent: ContentItemMono, ToggleComponent: Toggle }));
+export const ContentItemDuoAction = (props) => (_jsx(ContentItemDuoActionCommon, { ...props, ContentItemMonoComponent: ContentItemMono, ToggleComponent: Toggle }));

package/dist/ContentItemMono/ContentItemMonoApollo.d.ts

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoApollo.css";
 import { type ContentItemProps } from "./ContentItemMonoCommon";
 export declare const ContentItemMono: (props: ContentItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ContentItemMono/ContentItemMonoApollo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoApollo.css";
 import { Icon } from "../Icon/IconApollo";
 import { ContentItemMonoCommon, } from "./ContentItemMonoCommon";
 export const ContentItemMono = (props) => (_jsx(ContentItemMonoCommon, { ...props, IconComponent: Icon }));

package/dist/ContentItemMono/ContentItemMonoLF.d.ts

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoLF.css";
 import { type ContentItemProps } from "./ContentItemMonoCommon";
 export declare const ContentItemMono: (props: ContentItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ContentItemMono/ContentItemMonoLF.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/ContentItemMono/ContentItemMonoLF.css";
 import { Icon } from "../Icon/IconLF";
 import { ContentItemMonoCommon, } from "./ContentItemMonoCommon";
 export const ContentItemMono = (props) => (_jsx(ContentItemMonoCommon, { ...props, IconComponent: Icon }));

package/dist/DataAgent/DataAgentApollo.d.ts

@@ -1,3 +1,3 @@
 import { type DataAgentProps } from "./DataAgentCommon";
-import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentApollo.css";
 export declare const DataAgent: (props: DataAgentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataAgent/DataAgentApollo.js

@@ -3,5 +3,5 @@ import { DataAgentCommon } from "./DataAgentCommon";
 import { ClickItem } from "../List/ClickItem/ClickItemApollo";
 import { ContentItemMono } from "../ContentItemMono/ContentItemMonoApollo";
 import { Divider } from "../Divider/DividerApollo";
-import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentApollo.css";
 export const DataAgent = (props) => (_jsx(DataAgentCommon, { ...props, DividerComponent: Divider, ClickItemComponent: ClickItem, ContentItemMonoComponent: ContentItemMono }));

package/dist/DataAgent/DataAgentCommon.d.ts

@@ -10,11 +10,12 @@ export type DataAgentProps = {
     contents?: TupleMax3<ContentMonoItemIconProps>;
     clickContents?: TupleMax3<ClickItemProps>;
     texteOrias?: string;
+    isCompact?: boolean;
 };
 type DataAgentCommonProps = DataAgentProps & {
     DividerComponent: ComponentType<ComponentProps<typeof Divider>>;
     ContentItemMonoComponent: ComponentType<ContentItemProps>;
     ClickItemComponent: ComponentType<ClickItemProps>;
 };
-export declare const DataAgentCommon: ({ className, agentProps, agentContractProps, contents, clickContents, texteOrias, DividerComponent, ContentItemMonoComponent, ClickItemComponent, }: DataAgentCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataAgentCommon: ({ className, agentProps, agentContractProps, contents, clickContents, texteOrias, DividerComponent, ContentItemMonoComponent, ClickItemComponent, isCompact, }: DataAgentCommonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/DataAgent/DataAgentCommon.js

@@ -3,7 +3,7 @@ import { Fragment, useMemo } from "react";
 import { getComponentClassName } from "../utilities/getComponentClassName";
 import { useIsSmallScreen } from "../utilities/hook/useIsSmallScreen";
 import { BREAKPOINT } from "../utilities/constants";
-export const DataAgentCommon = ({ className, agentProps, agentContractProps, contents, clickContents, texteOrias, DividerComponent, ContentItemMonoComponent, ClickItemComponent, }) => {
+export const DataAgentCommon = ({ className, agentProps, agentContractProps, contents, clickContents, texteOrias, DividerComponent, ContentItemMonoComponent, ClickItemComponent, isCompact = true, }) => {
     const componentClassName = useMemo(() => getComponentClassName("af-data-agent", className), [className]);
     const isMobile = useIsSmallScreen(BREAKPOINT.SM);
     const renderForDefaultLayout = () => (_jsxs(_Fragment, { children: [_jsxs("section", { className: "af-data-agent__intro", children: [_jsx(ContentItemMonoComponent, { ...agentProps, type: "picture" }), agentContractProps ? (_jsx(ContentItemMonoComponent, { ...agentContractProps, type: "stick" })) : null] }), _jsx(DividerComponent, {}), contents && contents?.length > 0 ? (_jsx("section", { className: "af-data-agent__info-content", children: contents.map((content) => (_jsxs(Fragment, { children: [_jsx(ContentItemMonoComponent, { ...content, type: "icon" }), _jsx(DividerComponent, { className: "af-data-agent__line" })] }, `content--${crypto.randomUUID()}`))) })) : null, clickContents && clickContents?.length > 0 ? (_jsx("section", { className: "af-data-agent__info-click-content", children: clickContents.map((clickContent) => (_jsxs(Fragment, { children: [_jsx(ClickItemComponent, { ...clickContent, variant: "small" }), _jsx(DividerComponent, { className: "af-data-agent__line" })] }, `clickContent--${crypto.randomUUID()}`))) })) : null, Boolean(texteOrias) && (_jsx("p", { className: "af-data-agent__text-orias", children: texteOrias }))] }));
@@ -11,5 +11,7 @@ export const DataAgentCommon = ({ className, agentProps, agentContractProps, con
                 src: agentProps.picture,
                 alt: agentProps.title,
             }, variant: "agent" }) }));
-    return (_jsx("section", { className: componentClassName, children: isMobile ? renderForMobileLayout() : renderForDefaultLayout() }));
+    return (_jsx("section", { className: componentClassName, children: isMobile && isCompact
+            ? renderForMobileLayout()
+            : renderForDefaultLayout() }));
 };

package/dist/DataAgent/DataAgentLF.d.ts

@@ -1,3 +1,3 @@
 import { type DataAgentProps } from "./DataAgentCommon";
-import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentLF.css";
 export declare const DataAgent: (props: DataAgentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataAgent/DataAgentLF.js

@@ -3,5 +3,5 @@ import { DataAgentCommon } from "./DataAgentCommon";
 import { ClickItem } from "../List/ClickItem/ClickItemLF";
 import { ContentItemMono } from "../ContentItemMono/ContentItemMonoLF";
 import { Divider } from "../Divider/DividerLF";
-import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentLF.css";
 export const DataAgent = (props) => (_jsx(DataAgentCommon, { ...props, DividerComponent: Divider, ClickItemComponent: ClickItem, ContentItemMonoComponent: ContentItemMono }));

package/dist/Divider/DividerApollo.d.ts

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/Divider/DividerApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Divider/DividerApollo.css";
 export { Divider } from "./DividerCommon";

package/dist/Divider/DividerApollo.js

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/Divider/DividerApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Divider/DividerApollo.css";
 export { Divider } from "./DividerCommon";

package/dist/Divider/DividerLF.d.ts

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/Divider/DividerLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Divider/DividerLF.css";
 export { Divider } from "./DividerCommon";

package/dist/Divider/DividerLF.js

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/Divider/DividerLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Divider/DividerLF.css";
 export { Divider } from "./DividerCommon";

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.d.ts

@@ -1,5 +1,5 @@
 import { type CardCheckboxProps } from "./CardCheckboxCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.css";
 export declare const CardCheckbox: {
     (props: CardCheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ItemMessage } from "../../ItemMessage/ItemMessageApollo";
 import { CardCheckboxOption } from "../CardCheckboxOption/CardCheckboxOptionApollo";
 import { CardCheckboxCommon, } from "./CardCheckboxCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.css";
 export const CardCheckbox = (props) => (_jsx(CardCheckboxCommon, { ...props, CardCheckboxItemComponent: CardCheckboxOption, ItemMessageComponent: ItemMessage }));
 CardCheckbox.displayName = "CardCheckbox";

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.d.ts

@@ -1,5 +1,5 @@
 import { type CardCheckboxProps } from "./CardCheckboxCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.css";
 export declare const CardCheckbox: {
     (props: CardCheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
 import { CardCheckboxOption } from "../CardCheckboxOption/CardCheckboxOptionLF";
 import { CardCheckboxCommon, } from "./CardCheckboxCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.css";
 export const CardCheckbox = (props) => (_jsx(CardCheckboxCommon, { ...props, CardCheckboxItemComponent: CardCheckboxOption, ItemMessageComponent: ItemMessage }));
 CardCheckbox.displayName = "CardCheckbox";

package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.d.ts

@@ -1,3 +1,3 @@
 import { type CardCheckboxOptionProps } from "./CardCheckboxOptionCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.css";
 export declare const CardCheckboxOption: (props: CardCheckboxOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from "../../../Icon/IconApollo";
 import { Checkbox } from "../Checkbox/CheckboxApollo";
 import { CardCheckboxOptionCommon, } from "./CardCheckboxOptionCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.css";
 export const CardCheckboxOption = (props) => (_jsx(CardCheckboxOptionCommon, { ...props, CheckboxComponent: Checkbox, IconComponent: Icon }));

package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.d.ts

@@ -1,3 +1,3 @@
 import { type CardCheckboxOptionProps } from "./CardCheckboxOptionCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.css";
 export declare const CardCheckboxOption: (props: CardCheckboxOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from "../../../Icon/IconLF";
 import { Checkbox } from "../Checkbox/CheckboxLF";
 import { CardCheckboxOptionCommon, } from "./CardCheckboxOptionCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.css";
 export const CardCheckboxOption = (props) => (_jsx(CardCheckboxOptionCommon, { ...props, CheckboxComponent: Checkbox, IconComponent: Icon }));

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.d.ts

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxApollo.css";
 export { Checkbox } from "./CheckboxCommon";

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.js

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxApollo.css";
 export { Checkbox } from "./CheckboxCommon";

package/dist/Form/Checkbox/Checkbox/CheckboxLF.d.ts

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxLF.css";
 export { Checkbox } from "./CheckboxCommon";

package/dist/Form/Checkbox/Checkbox/CheckboxLF.js

@@ -1,2 +1,2 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxLF.css";
 export { Checkbox } from "./CheckboxCommon";

package/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.d.ts

@@ -1,4 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.css";
 import { type CheckboxTextProps } from "./CheckboxTextCommon";
-declare const CheckboxText: import("react").ForwardRefExoticComponent<Omit<CheckboxTextProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export { CheckboxText };
+export declare const CheckboxText: import("react").ForwardRefExoticComponent<Omit<CheckboxTextProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.css";
 import { ItemMessage } from "../../ItemMessage/ItemMessageApollo";
 import { Checkbox } from "../Checkbox/CheckboxApollo";
 import { CheckboxTextCommon, } from "./CheckboxTextCommon";
-const CheckboxText = forwardRef((props, ref) => (_jsx(CheckboxTextCommon, { ...props, ref: ref, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage })));
+export const CheckboxText = forwardRef((props, ref) => (_jsx(CheckboxTextCommon, { ...props, ref: ref, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage })));
 CheckboxText.displayName = "CheckboxText";
-export { CheckboxText };

package/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.d.ts

@@ -1,4 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.css";
 import { type CheckboxTextProps } from "./CheckboxTextCommon";
-declare const CheckboxText: import("react").ForwardRefExoticComponent<Omit<CheckboxTextProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export { CheckboxText };
+export declare const CheckboxText: import("react").ForwardRefExoticComponent<Omit<CheckboxTextProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.css";
 import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
 import { Checkbox } from "../Checkbox/CheckboxLF";
 import { CheckboxTextCommon, } from "./CheckboxTextCommon";
-const CheckboxText = forwardRef((props, ref) => (_jsx(CheckboxTextCommon, { ...props, ref: ref, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage })));
+export const CheckboxText = forwardRef((props, ref) => (_jsx(CheckboxTextCommon, { ...props, ref: ref, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage })));
 CheckboxText.displayName = "CheckboxText";
-export { CheckboxText };

package/dist/Form/Dropdown/DropdownApollo.d.ts

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Dropdown/DropdownApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Dropdown/DropdownApollo.css";
 import { type DropdownProps } from "./DropdownCommon";
 export declare const Dropdown: (props: DropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/Dropdown/DropdownApollo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/Dropdown/DropdownApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Dropdown/DropdownApollo.css";
 import { ItemLabel } from "../ItemLabel/ItemLabelApollo";
 import { ItemMessage } from "../ItemMessage/ItemMessageApollo";
 import { DropdownCommon } from "./DropdownCommon";

package/dist/Form/Dropdown/DropdownLF.d.ts

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Dropdown/DropdownLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Dropdown/DropdownLF.css";
 import { type DropdownProps } from "./DropdownCommon";
 export declare const Dropdown: (props: DropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/Dropdown/DropdownLF.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/Dropdown/DropdownLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Dropdown/DropdownLF.css";
 import { ItemLabel } from "../ItemLabel/ItemLabelLF";
 import { ItemMessage } from "../ItemMessage/ItemMessageLF";
 import { DropdownCommon } from "./DropdownCommon";

package/dist/Form/InputDate/InputDateApollo.d.ts

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/InputDate/InputDateApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/InputDate/InputDateApollo.css";
 import { type InputDateProps } from "./InputDateCommon";
 export declare const InputDate: import("react").ForwardRefExoticComponent<Omit<InputDateProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/InputDate/InputDateApollo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/InputDate/InputDateApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/InputDate/InputDateApollo.css";
 import { forwardRef } from "react";
 import { ItemLabel } from "../ItemLabel/ItemLabelApollo";
 import { ItemMessage } from "../ItemMessage/ItemMessageApollo";

package/dist/Form/InputDate/InputDateLF.d.ts

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/InputDate/InputDateLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/InputDate/InputDateLF.css";
 import { type InputDateProps } from "./InputDateCommon";
 export declare const InputDate: import("react").ForwardRefExoticComponent<Omit<InputDateProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/InputDate/InputDateLF.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/InputDate/InputDateLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/InputDate/InputDateLF.css";
 import { forwardRef } from "react";
 import { ItemLabel } from "../ItemLabel/ItemLabelLF";
 import { ItemMessage } from "../ItemMessage/ItemMessageLF";

package/dist/Form/InputPhone/InputPhoneApollo.d.ts

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/InputPhone/InputPhoneApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/InputPhone/InputPhoneApollo.css";
 import { type InputPhoneProps } from "./InputPhoneCommon";
 export declare const InputPhone: (props: InputPhoneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/InputPhone/InputPhoneApollo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/InputPhone/InputPhoneApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/InputPhone/InputPhoneApollo.css";
 import { ItemLabel } from "../ItemLabel/ItemLabelApollo";
 import { ItemMessage } from "../ItemMessage/ItemMessageApollo";
 import { InputPhoneCommon } from "./InputPhoneCommon";

package/dist/Form/InputPhone/InputPhoneLF.d.ts

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/InputPhone/InputPhoneLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/InputPhone/InputPhoneLF.css";
 import { type InputPhoneProps } from "./InputPhoneCommon";
 export declare const InputPhone: (props: InputPhoneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/InputPhone/InputPhoneLF.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/InputPhone/InputPhoneLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/InputPhone/InputPhoneLF.css";
 import { ItemLabel } from "../ItemLabel/ItemLabelLF";
 import { ItemMessage } from "../ItemMessage/ItemMessageLF";
 import { InputPhoneCommon } from "./InputPhoneCommon";