@axa-fr/design-system-look-and-feel-react 1.0.4 → 1.0.5-alpha.244

package/dist/Icon/Icon.js

@@ -0,0 +1 @@
+export { Icon, iconVariants, iconSizeVariants, } from "@axa-fr/design-system-apollo-react/lf";

package/dist/IconBg/IconBg.js

@@ -7,7 +7,7 @@ export const IconBg = ({ children, className, classModifier, isDisabled = false,
         if (isDisabled) {
             newClassModifier += " disabled";
         }
-        return getComponentClassName(className, newClassModifier, "af-icon-bg");
+        return getComponentClassName("af-icon-bg", className, newClassModifier);
     }, [classModifier, isDisabled, className]);
     return _jsx("div", { className: componentClassName, children: children });
 };

package/dist/Layout/Header/BurgerMenu/BurgerMenu.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutRef, type Dispatch, type ReactElement, type SetStateAction } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/BurgerMenu/BurgerMenu.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickItem/ClickItem.scss";
+type BurgerMenuProps = {
+    isOpen: boolean;
+    items: ReactElement[];
+    setActiveLink: Dispatch<SetStateAction<number | undefined>>;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+} & ComponentPropsWithoutRef<"nav">;
+declare const BurgerMenu: ({ isOpen, items, setActiveLink, setIsOpen, ...props }: BurgerMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export { BurgerMenu };

package/dist/Layout/Header/BurgerMenu/BurgerMenu.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/BurgerMenu/BurgerMenu.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickItem/ClickItem.scss";
+import classNames from "classnames";
+import { ClickItem, createClickItemParent } from "../../../List/ClickItem";
+const BurgerMenu = ({ isOpen, items, setActiveLink, setIsOpen, ...props }) => {
+    const handleOnClick = (index) => () => {
+        setActiveLink(index);
+        setIsOpen(false);
+    };
+    if (items.length === 0)
+        return null;
+    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal mobile", "aria-hidden": !isOpen, className: classNames("af-card", "af-card--list", "af-burger-menu", {
+            open: isOpen,
+        }), ...props, children: _jsx("ul", { role: "menubar", children: items.map((item, index) => {
+                const { key, props: itemProps, type } = item;
+                const { children, ...otherProps } = itemProps;
+                return (_jsx("li", { className: "af-list__item", role: "none", children: _jsx(ClickItem, { classModifier: "small", onClick: handleOnClick(index), parentClickComponent: createClickItemParent(type, {
+                            ...otherProps,
+                            role: "menuitem",
+                        }), children: children }) }, key ?? `list item ${index}`));
+            }) }) }));
+};
+export { BurgerMenu };

package/dist/Layout/Header/BurgerMenu/index.d.ts

@@ -0,0 +1 @@
+export { BurgerMenu } from "./BurgerMenu";

package/dist/Layout/Header/BurgerMenu/index.js

@@ -0,0 +1 @@
+export { BurgerMenu } from "./BurgerMenu";

package/dist/Layout/Header/Header.d.ts

@@ -1,9 +1,9 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
-import { ComponentPropsWithoutRef } from "react";
-type HeaderProps = {
+import { ComponentProps, PropsWithChildren, ReactElement, type ReactNode } from "react";
+type HeaderProps = PropsWithChildren<{
     defaultActiveLink?: number;
-    previousLink?: JSX.Element;
-    rightItem?: JSX.Element[];
-} & ComponentPropsWithoutRef<"header">;
-export declare const Header: ({ children, defaultActiveLink, previousLink, rightItem, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    previousLink?: ReactNode;
+    rightItem?: ReactElement | ReactElement[];
+} & ComponentProps<"header">>;
+export declare const Header: ({ children, defaultActiveLink, previousLink, rightItem, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Layout/Header/Header.js

@@ -1,11 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
-import logo from "@axa-fr/design-system-look-and-feel-css/dist/common/assets/logo-axa.svg";
-import { useCallback, useState } from "react";
+import logo from "@axa-fr/design-system-look-and-feel-css/logo-axa.svg";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useState, } from "react";
+import menu from "@material-symbols/svg-400/outlined/menu.svg";
 import { NavBar } from "./NavBar";
 import { PreviousLink } from "./PreviousLink/PreviousLink";
-export const Header = ({ children, defaultActiveLink, previousLink, rightItem, }) => {
+import { Button, IconBg, Svg } from "../..";
+import { BurgerMenu } from "./BurgerMenu";
+import { BREAKPOINT } from "../../utilities";
+export const Header = ({ children, defaultActiveLink, previousLink, rightItem, ...props }) => {
     const [activeLink, setActiveLink] = useState(defaultActiveLink);
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleMenu = () => setIsOpen((prev) => !prev);
     const resetActiveLink = useCallback(() => setActiveLink(defaultActiveLink), [defaultActiveLink]);
-    return (_jsxs(_Fragment, { children: [_jsx("header", { className: "af-header", children: _jsxs("div", { className: "af-header-container", children: [_jsxs("div", { className: "af-header-left-item", children: [_jsx("img", { className: "af-logo", src: logo, alt: "" }), children && (_jsx(NavBar, { activeLink: activeLink, setActiveLink: setActiveLink, children: children }))] }), rightItem && _jsx("div", { className: "af-header-right-item", children: rightItem })] }) }), previousLink && (_jsx(PreviousLink, { handleClick: resetActiveLink, children: previousLink }))] }));
+    useEffect(() => {
+        const handleResize = () => {
+            if (window.innerWidth > BREAKPOINT.MD && isOpen) {
+                setIsOpen(false);
+            }
+        };
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [isOpen]);
+    const burgerMenuItems = useMemo(() => {
+        const mapValidElements = (items) => (Children.map(items, (child) => isValidElement(child) && child) ?? []).filter(Boolean);
+        const validLinks = mapValidElements(children);
+        if (!rightItem) {
+            return [...validLinks];
+        }
+        if (Array.isArray(rightItem)) {
+            return [...validLinks, ...mapValidElements(rightItem)];
+        }
+        return [...validLinks, rightItem];
+    }, [children, rightItem]);
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "af-header", ...props, children: [_jsxs("div", { className: "af-header-container", children: [_jsxs("div", { className: "af-header-left-item", children: [_jsx("img", { className: "af-logo", src: logo, alt: "logo AXA" }), _jsx(NavBar, { activeLink: activeLink, setActiveLink: setActiveLink, children: children })] }), rightItem && _jsx("div", { className: "af-header-right-item", children: rightItem }), burgerMenuItems && burgerMenuItems.length > 0 && (_jsx(Button, { "aria-label": isOpen ? "Fermer le menu" : "Ouvrir le menu", onClick: toggleMenu, variant: "ghost", children: _jsx(IconBg, { children: _jsx(Svg, { src: menu, "aria-hidden": "true" }) }) }))] }), _jsx(BurgerMenu, { isOpen: isOpen, items: burgerMenuItems, setActiveLink: setActiveLink, setIsOpen: setIsOpen })] }), _jsx(PreviousLink, { handleClick: resetActiveLink, children: previousLink }), burgerMenuItems && burgerMenuItems.length > 0 && (_jsx("div", { className: `af-header-overlay ${isOpen ? "open" : ""}` }))] }));
 };

package/dist/Layout/Header/NavBar/NavBar.d.ts

@@ -1,8 +1,8 @@
-import React, { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import { type ComponentPropsWithoutRef, type PropsWithChildren, type Dispatch, type SetStateAction } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
 type NavBarProps = {
     activeLink?: number;
-    setActiveLink: React.Dispatch<React.SetStateAction<number | undefined>>;
+    setActiveLink: Dispatch<SetStateAction<number | undefined>>;
 } & ComponentPropsWithoutRef<"nav">;
-declare const NavBar: ({ activeLink, children, setActiveLink, ...otherProps }: PropsWithChildren<NavBarProps>) => import("react/jsx-runtime").JSX.Element;
+declare const NavBar: ({ activeLink, children, setActiveLink, ...props }: PropsWithChildren<NavBarProps>) => import("react/jsx-runtime").JSX.Element | null;
 export { NavBar };

package/dist/Layout/Header/NavBar/NavBar.js

@@ -1,10 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { isValidElement, useMemo, } from "react";
+import { isValidElement, useMemo, Children, cloneElement, } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
-const NavBar = ({ activeLink, children, setActiveLink, ...otherProps }) => {
-    const validChildren = useMemo(() => (React.Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
-    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal", ...otherProps, children: _jsx("ul", { className: "af-navbar-container", role: "menubar", children: React.Children.map(validChildren, (child, index) => (_jsx("li", { className: "af-navbar-item", role: "none", children: React.cloneElement(child, {
-                    className: `af-navbar-item__link ${index === activeLink ? "af-navbar-item__link--active" : ""}`.trim(),
+import classNames from "classnames";
+const NavBar = ({ activeLink, children, setActiveLink, ...props }) => {
+    const validChildren = useMemo(() => (Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
+    if (validChildren.length === 0)
+        return null;
+    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal", ...props, children: _jsx("ul", { className: "af-navbar-container", role: "menubar", children: Children.map(validChildren, (child, index) => (_jsx("li", { className: "af-navbar-item", role: "none", children: cloneElement(child, {
+                    className: classNames("af-navbar-item__link", {
+                        "af-navbar-item__link--active": index === activeLink,
+                    }),
                     onClick: () => setActiveLink(index),
                     onFocus: () => setActiveLink(index),
                     role: "menuitem",

package/dist/Layout/Header/PreviousLink/PreviousLink.d.ts

@@ -3,5 +3,5 @@ import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
 type PreviousLinkProps = {
     handleClick: () => void;
 } & ComponentPropsWithoutRef<"div">;
-declare const PreviousLink: ({ handleClick, children, ...otherProps }: PropsWithChildren<PreviousLinkProps>) => import("react/jsx-runtime").JSX.Element;
+declare const PreviousLink: ({ handleClick, children, ...otherProps }: PropsWithChildren<PreviousLinkProps>) => import("react/jsx-runtime").JSX.Element | null;
 export { PreviousLink };

package/dist/Layout/Header/PreviousLink/PreviousLink.js

@@ -5,8 +5,10 @@ import React, { isValidElement, useMemo, } from "react";
 import { Svg } from "../../../Svg";
 const PreviousLink = ({ handleClick, children, ...otherProps }) => {
     const validChildren = useMemo(() => (React.Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
+    if (validChildren.length === 0)
+        return null;
     return (_jsx("div", { className: "af-header-previous-link-container", ...otherProps, children: React.Children.map(validChildren, (child) => React.cloneElement(child, {
-            children: (_jsxs(_Fragment, { children: [_jsx(Svg, { src: arrowBack }), child.props.children] })),
+            children: (_jsxs(_Fragment, { children: [_jsx(Svg, { src: arrowBack, "aria-hidden": true }), child.props.children] })),
             className: "af-btn-client af-btn-client--ghost af-btn-client--header-previous-link",
             onClick: handleClick,
         })) }));

package/dist/Layout/Header/index.d.ts

@@ -1 +1,4 @@
+export { BurgerMenu } from "./BurgerMenu";
 export { Header } from "./Header";
+export { NavBar } from "./NavBar";
+export { PreviousLink } from "./PreviousLink";

package/dist/Layout/Header/index.js

@@ -1 +1,4 @@
+export { BurgerMenu } from "./BurgerMenu";
 export { Header } from "./Header";
+export { NavBar } from "./NavBar";
+export { PreviousLink } from "./PreviousLink";

package/dist/Link/Link.d.ts

@@ -1,10 +1 @@
-import { ComponentPropsWithoutRef, PropsWithChildren, type ReactNode } from "react";
-type LinkProps = {
-    openInNewTab?: boolean;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
-    className?: string;
-    classModifier?: string;
-} & ComponentPropsWithoutRef<"a">;
-export declare const Link: ({ href, openInNewTab, leftIcon, rightIcon, children, className, classModifier, ...props }: PropsWithChildren<LinkProps>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export { Link } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Link/Link.js

@@ -1,14 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import openInNew from "@material-symbols/svg-400/outlined/open_in_new.svg";
-import { useMemo, } from "react";
-import { Svg } from "../Svg";
-import { getComponentClassName } from "../utilities";
-export const Link = ({ href, openInNewTab = false, leftIcon, rightIcon, children, className, classModifier = "", ...props }) => {
-    const newTabProps = openInNewTab && {
-        target: "_blank",
-        rel: "noopener noreferrer",
-    };
-    const componentClassName = useMemo(() => getComponentClassName(className, `${classModifier}${!className && openInNewTab ? " openInNewTab" : ""}`, "af-link"), [classModifier, className, openInNewTab]);
-    return (_jsxs("a", { className: componentClassName, href: href, ...newTabProps, ...props, children: [leftIcon, children, (openInNewTab || Boolean(rightIcon)) &&
-                (rightIcon ?? _jsx(Svg, { src: openInNew }))] }));
-};
+export { Link } from "@axa-fr/design-system-apollo-react/lf";

package/dist/List/ClickItem/ClickItem.d.ts

@@ -0,0 +1,2 @@
+import type { TClickItem } from "./types";
+export declare const ClickItem: ({ children, icon, parentClickComponent: ClickComponent, isDisabled, disabled, className, classModifier, actionIcon, ...otherProps }: TClickItem) => import("react/jsx-runtime").JSX.Element;

package/dist/List/ClickItem/ClickItem.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import chevron from "@material-symbols/svg-400/outlined/chevron_right.svg";
+import { useMemo } from "react";
+import { Svg } from "../../Svg";
+import { getComponentClassName } from "../../utilities";
+export const ClickItem = ({ children, icon, parentClickComponent: ClickComponent = ({ children: parentClickComponentChildren, ...parentClickComponentProps }) => (_jsx("button", { type: "button", ...parentClickComponentProps, children: parentClickComponentChildren })), isDisabled = false, disabled = isDisabled, className, classModifier = "", actionIcon = _jsx(Svg, { src: chevron, "aria-hidden": true }), ...otherProps }) => {
+    const componentClassName = useMemo(() => getComponentClassName("af-click-item", className, `${classModifier}${disabled ? " disabled" : ""}`), [className, classModifier, disabled]);
+    return (_jsxs(ClickComponent, { className: componentClassName, disabled: disabled, ...otherProps, children: [_jsxs("div", { className: "af-click-item__content", children: [icon && _jsx("div", { className: "af-click-item__icon", children: icon }), _jsx("div", { className: "af-click-item__label", children: children })] }), _jsx("div", { className: "af-click-item__action", children: actionIcon })] }));
+};

package/dist/List/{ClickList/ClickItem → ClickItem}/index.d.ts

@@ -1,2 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickItem/ClickItem.scss";
 export { ClickItem } from "./ClickItem";
 export { createClickItemParent } from "./ClickItem.helpers";

package/dist/List/{ClickList/ClickItem → ClickItem}/index.js

@@ -1,2 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickItem/ClickItem.scss";
 export { ClickItem } from "./ClickItem";
 export { createClickItemParent } from "./ClickItem.helpers";

package/dist/List/ContentItemDuo/ContentItemDuo.d.ts

@@ -1,6 +1,7 @@
+import { type ReactNode } from "react";
 type ContentItemDuoProps = {
     label: string;
-    value: string;
+    value: ReactNode;
     isVertical?: boolean;
     className?: string;
     classModifier?: string;

package/dist/List/ContentItemDuo/ContentItemDuo.js

@@ -2,17 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import checkIcon from "@material-symbols/svg-400/outlined/check.svg";
 import closeIcon from "@material-symbols/svg-400/outlined/close.svg";
 import { useMemo } from "react";
-import { Variants } from "../../Button/Button";
-import { getComponentClassName } from "../../utilities";
 import { Button, Svg } from "../..";
+import { getComponentClassName } from "../../utilities";
 export const ContentItemDuo = ({ label, value, isVertical = false, className, classModifier, isShowingDoneIcon = false, isShowingCloseIcon = false, buttonText, onButtonClick, }) => {
     const componentClassName = useMemo(() => {
         const classModifiers = [classModifier];
         if (isVertical) {
             classModifiers.push("vertical");
         }
-        return getComponentClassName(className, classModifiers.filter(Boolean).join(" "), "af-content-item-duo");
+        return getComponentClassName("af-content-item-duo", className, classModifiers.filter(Boolean).join(" "));
     }, [classModifier, className, isVertical]);
     const iconContainerModifier = useMemo(() => ` af-content-item-duo__icon--${isShowingDoneIcon ? "done" : "close"}`, [isShowingDoneIcon]);
-    return (_jsxs("div", { className: componentClassName, children: [(isShowingDoneIcon || isShowingCloseIcon) && (_jsxs("div", { className: `af-content-item-duo__icon${iconContainerModifier}`, children: [isShowingDoneIcon && _jsx(Svg, { src: checkIcon }), isShowingCloseIcon && _jsx(Svg, { src: closeIcon })] })), _jsx("p", { className: "af-content-item-duo__label", children: label }), _jsx("p", { className: "af-content-item-duo__value", children: value }), buttonText && (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(Button, { variant: Variants.ghost, onClick: onButtonClick, children: buttonText }) }))] }));
+    return (_jsxs("div", { className: componentClassName, children: [(isShowingDoneIcon || isShowingCloseIcon) && (_jsxs("div", { className: `af-content-item-duo__icon${iconContainerModifier}`, children: [isShowingDoneIcon && _jsx(Svg, { src: checkIcon }), isShowingCloseIcon && _jsx(Svg, { src: closeIcon })] })), _jsx("p", { className: "af-content-item-duo__label", children: label }), typeof value === "string" ? (_jsx("p", { className: "af-content-item-duo__value", children: value })) : (_jsx("div", { className: "af-content-item-duo__value", children: value })), buttonText && (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(Button, { variant: "ghost", onClick: onButtonClick, children: buttonText }) }))] }));
 };

package/dist/List/ContentItemMono/ContentItemMono.js

@@ -8,7 +8,7 @@ export const ContentItemMono = ({ children, className, classModifier, secondaryT
         if (isDisabled) {
             classModifiers.push("disabled");
         }
-        return getComponentClassName(className, classModifiers.filter(Boolean).join(" "), "af-content-item-mono");
+        return getComponentClassName("af-content-item-mono", className, classModifiers.filter(Boolean).join(" "));
     }, [classModifier, isDisabled, size, className]);
     return (_jsxs("div", { className: componentClassName, children: [hasStick && (_jsx("div", { className: "af-content-item-mono__stick", role: "presentation" })), leftElement && (_jsx("div", { className: `af-content-item-mono__left-container${isLeftElementCentered
                     ? " af-content-item-mono__left-container--center"

package/dist/List/ContentTabList/ContentTabItem/ContentTabItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tag } from "../../..";
-export const ContentTabItem = ({ title, subtitle, tag, tagProps, date, actions = [], value, isMobile = false, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "af-list-item__left-container", children: [Boolean(value) && (Boolean(tag) || Boolean(date)) && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { classModifier: "warning", ...tagProps, children: tag })), Boolean(date) && _jsx("span", { className: "af-list-item__date", children: date })] })), _jsxs("div", { className: "af-list-item__label", children: [_jsx("span", { className: "af-list-item-label__title", children: title }), Boolean(subtitle) && (_jsx("span", { className: "af-list-item-label__subtitle", children: subtitle }))] }), !value && isMobile && (Boolean(tag) || Boolean(date)) && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { classModifier: "warning", ...tagProps, children: tag })), Boolean(date) && _jsx("span", { className: "af-list-item__date", children: date })] }))] }), (actions.length > 0 ||
+export const ContentTabItem = ({ title, subtitle, tag, tagProps, date, actions = [], value, isMobile = false, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "af-list-item__left-container", children: [Boolean(value) && (Boolean(tag) || Boolean(date)) && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { variant: "warning", ...tagProps, children: tag })), Boolean(date) && _jsx("span", { className: "af-list-item__date", children: date })] })), _jsxs("div", { className: "af-list-item__label", children: [_jsx("span", { className: "af-list-item-label__title", children: title }), Boolean(subtitle) && (_jsx("span", { className: "af-list-item-label__subtitle", children: subtitle }))] }), !value && isMobile && (Boolean(tag) || Boolean(date)) && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { variant: "warning", ...tagProps, children: tag })), Boolean(date) && _jsx("span", { className: "af-list-item__date", children: date })] }))] }), (actions.length > 0 ||
             Boolean(tag) ||
             Boolean(date) ||
-            Boolean(value)) && (_jsxs("div", { className: "af-list-item__right-container", children: [!value && (Boolean(tag) || Boolean(date)) && !isMobile && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { classModifier: "warning", ...tagProps, children: tag })), Boolean(date) && (_jsx("span", { className: "af-list-item__date", children: date }))] })), actions.map(({ id, component }) => (_jsx("div", { className: "af-list-item__action-container", children: component }, id))), Boolean(value) && _jsx("span", { className: "af-list-item__value", children: value })] }))] }));
+            Boolean(value)) && (_jsxs("div", { className: "af-list-item__right-container", children: [!value && (Boolean(tag) || Boolean(date)) && !isMobile && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { variant: "warning", ...tagProps, children: tag })), Boolean(date) && (_jsx("span", { className: "af-list-item__date", children: date }))] })), actions.map(({ id, component }) => (_jsx("div", { className: "af-list-item__action-container", children: component }, id))), Boolean(value) && _jsx("span", { className: "af-list-item__value", children: value })] }))] }));

package/dist/Message/Message.d.ts

@@ -0,0 +1,2 @@
+export { Message, messageVariants, } from "@axa-fr/design-system-apollo-react/lf";
+export type { MessageVariants } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Message/Message.js

@@ -0,0 +1 @@
+export { Message, messageVariants, } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type ModalCoreProps } from "./ModalCore";
+import { type ModalCoreHeaderProps } from "./components/ModalCoreHeader";
+export type ModalProps = Omit<ModalCoreProps, "onOutsideTap" | "title"> & ModalCoreHeaderProps & {
+    onSubmit?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    submitTitle?: string;
+    cancelTitle?: string;
+    submitDisabled?: boolean;
+    cancelDisabled?: boolean;
+};
+declare const Modal: React.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+export { Modal };

package/dist/Modal/Modal.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ModalCore } from "./ModalCore";
+import { Button } from "../Button/Button";
+import { ModalCoreHeader, } from "./components/ModalCoreHeader";
+import { ModalCoreBody } from "./components/ModalCoreBody";
+import { ModalCoreFooter } from "./components/ModalCoreFooter";
+const Modal = forwardRef(({ children, title, submitTitle, cancelTitle, className, onCancel, onSubmit, closeButtonAriaLabel, cancelDisabled, submitDisabled, subtitle, iconTitle, levelTitle, ...props }, ref) => (_jsxs(ModalCore, { className: className, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(ModalCoreHeader, { title: title, subtitle: subtitle, iconTitle: iconTitle, levelTitle: levelTitle, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(ModalCoreBody, { children: children }), _jsxs(ModalCoreFooter, { children: [onCancel && cancelTitle && (_jsx(Button, { variant: "secondary", onClick: onCancel, disabled: cancelDisabled, children: cancelTitle })), onSubmit && submitTitle && (_jsx(Button, { variant: "primary", onClick: onSubmit, disabled: submitDisabled, children: submitTitle }))] })] })));
+Modal.displayName = "Modal";
+export { Modal };

package/dist/Modal/ModalCore.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
+export type ModalCoreProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & {
+    className?: string;
+    title: string;
+    onOutsideTap: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    children: ReactNode;
+    ref?: React.Ref<HTMLDialogElement>;
+};
+declare const ModalCore: import("react").ForwardRefExoticComponent<Omit<ModalCoreProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export { ModalCore };

package/dist/Modal/ModalCore.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
+const ModalCore = forwardRef(({ className, title = "", onOutsideTap, children, ...props }, ref) => (_jsx("dialog", { "aria-label": title, className: ["af-modal", className].filter(Boolean).join(" "), onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (e) => e.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) })));
+ModalCore.displayName = "ModalCore";
+export { ModalCore };

package/dist/Modal/components/ModalCoreBody.d.ts

@@ -0,0 +1,2 @@
+export type ModalCoreBodyProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ModalCoreBody: ({ children, className, ...otherProps }: ModalCoreBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreBody.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ModalCoreBody = ({ children, className, ...otherProps }) => (_jsx("section", { className: ["af-modal__body", className].filter(Boolean).join(" "), ...otherProps, children: children }));

package/dist/Modal/components/ModalCoreFooter.d.ts

@@ -0,0 +1,2 @@
+export type ModalCoreFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ModalCoreFooter: ({ className, ...rest }: ModalCoreFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreFooter.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ModalCoreFooter = ({ className, ...rest }) => (_jsx("footer", { className: ["af-modal__footer", className].filter(Boolean).join(" "), ...rest }));

package/dist/Modal/components/ModalCoreHeader.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, MouseEvent, KeyboardEvent } from "react";
+import type { TitleLevel } from "../../Title";
+export type ModalCoreHeaderProps = HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    title: string;
+    subtitle?: string;
+    iconTitle?: string;
+    levelTitle?: TitleLevel;
+    onCancel: (event: MouseEvent | KeyboardEvent) => void;
+    closeButtonAriaLabel?: string;
+};
+export declare const ModalCoreHeader: ({ className, title, subtitle, iconTitle, levelTitle, onCancel, closeButtonAriaLabel, ...props }: ModalCoreHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import closeSmall from "@material-symbols/svg-400/outlined/close.svg";
+import { Button } from "../../Button/Button";
+import { Svg } from "../../Svg";
+export const ModalCoreHeader = ({ className, title, subtitle, iconTitle, levelTitle = 2, onCancel, closeButtonAriaLabel = "Fermer la boite de dialogue", ...props }) => {
+    const HLevel = `h${levelTitle}`;
+    return (_jsxs("header", { className: ["af-modal__header", className].filter(Boolean).join(" "), ...props, children: [_jsx(Button, { variant: "ghost", iconLeft: _jsx(Svg, { src: closeSmall, width: 32, height: 32, role: "graphics-document" }), "aria-label": closeButtonAriaLabel, onClick: onCancel }), _jsxs("div", { className: "af-modal__header-title", children: [iconTitle && (_jsx(Svg, { src: iconTitle, width: 32, height: 32, role: "graphics-document" })), _jsx(HLevel, { className: "af-modal__header-title-heading", children: title }), subtitle && (_jsx("span", { className: "af-modal__header-title-subtitle", children: subtitle }))] })] }));
+};

package/dist/Modal/index.d.ts

@@ -0,0 +1,5 @@
+export { Modal, type ModalProps } from "./Modal";
+export { ModalCore, type ModalCoreProps } from "./ModalCore";
+export { ModalCoreFooter, type ModalCoreFooterProps, } from "./components/ModalCoreFooter";
+export { ModalCoreHeader, type ModalCoreHeaderProps, } from "./components/ModalCoreHeader";
+export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreBody";

package/dist/Modal/index.js

@@ -0,0 +1,5 @@
+export { Modal } from "./Modal";
+export { ModalCore } from "./ModalCore";
+export { ModalCoreFooter, } from "./components/ModalCoreFooter";
+export { ModalCoreHeader, } from "./components/ModalCoreHeader";
+export { ModalCoreBody, } from "./components/ModalCoreBody";

package/dist/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1 @@
+export { ProgressBar } from "@axa-fr/design-system-apollo-react/lf";

package/dist/ProgressBar/ProgressBar.js

@@ -0,0 +1 @@
+export { ProgressBar } from "@axa-fr/design-system-apollo-react/lf";

package/dist/ProgressBarGroup/ProgressBarGroup.d.ts

@@ -0,0 +1 @@
+export { ProgressBarGroup } from "@axa-fr/design-system-apollo-react/lf";

package/dist/ProgressBarGroup/ProgressBarGroup.js

@@ -0,0 +1 @@
+export { ProgressBarGroup } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Skeleton/Skeleton.d.ts

@@ -16,5 +16,5 @@ export type SkeletonProps = {
     colGap?: number;
     rowGap?: number;
 } & isLoadingAndChildrenProps;
-export declare const Skeleton: ({ className, grid, ariaBusy, ariaLabel, maxCols, colGap, rowGap, isLoading, children, }: SkeletonProps) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const Skeleton: ({ className, grid, ariaBusy, ariaLabel, maxCols, colGap, rowGap, isLoading, children, }: SkeletonProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/SkeletonList/SkeletonList.d.ts

@@ -8,4 +8,4 @@ export type SkeletonListProps = {
     classModifierList?: ComponentPropsWithRef<typeof List>["classModifier"];
     isLoading: boolean;
 } & PropsWithChildren;
-export declare const SkeletonList: ({ children, isLoading, lists, classModifierList, }: SkeletonListProps) => string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element[] | null | undefined;
+export declare const SkeletonList: ({ children, isLoading, lists, classModifierList, }: SkeletonListProps) => string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element[] | null | undefined;

package/dist/Spinner/Spinner.d.ts

@@ -0,0 +1,2 @@
+export { Spinner, spinnerVariants, } from "@axa-fr/design-system-apollo-react/lf";
+export type { SpinnerVariants } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Spinner/Spinner.js

@@ -0,0 +1 @@
+export { Spinner, spinnerVariants, } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Stepper/Stepper.d.ts

@@ -1,12 +1 @@
-import { HTMLAttributes } from "react";
-import "@axa-fr/design-system-look-and-feel-css/dist/Stepper/Stepper.scss";
-export type StepperProps = {
-    currentStepProgress?: number;
-    currentStep: number;
-    currentSubtitle?: string;
-    currentTitle?: string;
-    nbSteps: 2 | 3 | 4 | 5 | 6;
-    isTitleVisible?: boolean;
-    isSubtitleVisible?: boolean;
-} & Omit<HTMLAttributes<HTMLDivElement>, "role">;
-export declare const Stepper: ({ currentStepProgress, currentTitle, nbSteps, currentStep, currentSubtitle, isTitleVisible, isSubtitleVisible, className, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+export { Stepper } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Stepper/Stepper.js

@@ -1,22 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId } from "react";
-import classNames from "classnames";
-import "@axa-fr/design-system-look-and-feel-css/dist/Stepper/Stepper.scss";
-const INITIAL_STEPPER_PROGRESS = 10;
-const MAX_STEPPER_PROGRESS = 100;
-export const Stepper = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, currentTitle, nbSteps, currentStep, currentSubtitle, isTitleVisible = true, isSubtitleVisible = true, className, ...props }) => {
-    const stepperId = useId();
-    const getCurrentProgress = useCallback((index) => {
-        if (index < currentStep) {
-            return MAX_STEPPER_PROGRESS;
-        }
-        if (index === currentStep) {
-            if (currentStepProgress === 0) {
-                return INITIAL_STEPPER_PROGRESS;
-            }
-            return currentStepProgress;
-        }
-        return 0;
-    }, [currentStep, currentStepProgress]);
-    return (_jsxs("div", { className: "af-stepper-client", ...props, children: [isTitleVisible && currentTitle && (_jsx("h2", { className: "af-stepper-client__title", "aria-describedby": stepperId, children: currentTitle })), isSubtitleVisible && currentSubtitle && (_jsx("p", { className: "af-stepper-client__subtitle", children: currentSubtitle })), _jsx("div", { id: stepperId, role: "group", "aria-label": currentTitle, className: classNames("af-stepper-client__content", className), children: [...Array(nbSteps).keys()].map((index) => (_jsx("div", { className: "af-stepper-client__progressbar", "aria-current": index === currentStep, "aria-hidden": index !== currentStep, "aria-label": `${getCurrentProgress(index)}%`, children: _jsx("div", { className: "af-stepper-client__progress", style: { width: `${getCurrentProgress(index)}%` } }) }, `${stepperId}-${index}`))) })] }));
-};
+export { Stepper } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Tag/Tag.d.ts

@@ -1,6 +1,2 @@
-import { type ComponentProps } from "react";
-type TagProps = ComponentProps<"div"> & {
-    classModifier?: string;
-};
-export declare const Tag: ({ children, className, classModifier, ...divProps }: TagProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export { Tag, tagVariants } from "@axa-fr/design-system-apollo-react/lf";
+export type { TagVariants } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Tag/Tag.js

@@ -1,7 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { getComponentClassName } from "../utilities";
-export const Tag = ({ children, className, classModifier = "", ...divProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-tag"), [className, classModifier]);
-    return (_jsx("div", { className: componentClassName, ...divProps, children: _jsx("span", { className: "af-tag__label", children: children }) }));
-};
+export { Tag, tagVariants } from "@axa-fr/design-system-apollo-react/lf";

package/dist/TimelineVertical/TimelineVertical.d.ts

@@ -0,0 +1 @@
+export { TimelineVertical } from "@axa-fr/design-system-apollo-react/lf";

package/dist/TimelineVertical/TimelineVertical.js

@@ -0,0 +1 @@
+export { TimelineVertical } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Title/Title.js

@@ -5,7 +5,7 @@ import { getComponentClassName } from "../utilities";
 import { TitleSize } from "./constants";
 import { TitleWithSubtitles } from "./TitleWithSubtitles";
 export const Title = ({ children: title, className, classModifier, firstSubtitle, icon, secondSubtitle, size = TitleSize.XL, level = size === TitleSize.L ? 2 : 1, }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier ? `${classModifier} ${size}` : size, "af-title"), [classModifier, className, size]);
+    const componentClassName = useMemo(() => getComponentClassName("af-title", className, classModifier ? `${classModifier} ${size}` : size), [classModifier, className, size]);
     const TitleWithSubtitlesPart = useCallback(({ ...args }) => (_jsx(TitleWithSubtitles, { title: title, firstSubtitle: firstSubtitle, level: level, ...args })), [title, firstSubtitle, level]);
     return (_jsx("header", { className: componentClassName, children: icon && size === TitleSize.XL ? (_jsxs(_Fragment, { children: [_jsx(IconBg, { className: "af-title__icon af-icon-bg", children: icon }), _jsx(TitleWithSubtitlesPart, { secondSubtitle: secondSubtitle })] })) : (_jsx(TitleWithSubtitlesPart, {})) }));
 };

package/dist/Title/TitleWithSubtitles.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { TitleLevel } from ".";
 type TitleTextProps = {
     title: ReactNode;

package/dist/Toggle/Toggle.d.ts

@@ -0,0 +1 @@
+export { Toggle } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Toggle/Toggle.js

@@ -0,0 +1 @@
+export { Toggle } from "@axa-fr/design-system-apollo-react/lf";