@axa-fr/design-system-look-and-feel-react 1.0.5-ci.12 → 1.0.5-ci.120

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 || !isValidElement(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.js

@@ -8,7 +8,7 @@ export const Link = ({ href, openInNewTab = false, leftIcon, rightIcon, children
         target: "_blank",
         rel: "noopener noreferrer",
     };
-    const componentClassName = useMemo(() => getComponentClassName(className, `${classModifier}${!className && openInNewTab ? " openInNewTab" : ""}`, "af-link"), [classModifier, className, openInNewTab]);
+    const componentClassName = useMemo(() => getComponentClassName("af-link", className, `${classModifier}${!className && openInNewTab ? " openInNewTab" : ""}`), [classModifier, className, openInNewTab]);
     return (_jsxs("a", { className: componentClassName, href: href, ...newTabProps, ...props, children: [leftIcon, children, (openInNewTab || Boolean(rightIcon)) &&
                 (rightIcon ?? _jsx(Svg, { src: openInNew }))] }));
 };

package/dist/List/ClickList/ClickItem/ClickItem.js

@@ -4,6 +4,6 @@ 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, className, classModifier = "", actionIcon = _jsx(Svg, { src: chevron, "aria-hidden": true }), ...otherProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, `${classModifier}${isDisabled ? " disabled" : ""}`, "af-click-item"), [className, classModifier, isDisabled]);
+    const componentClassName = useMemo(() => getComponentClassName("af-click-item", className, `${classModifier}${isDisabled ? " disabled" : ""}`), [className, classModifier, isDisabled]);
     return (_jsxs(ClickComponent, { className: componentClassName, disabled: isDisabled, "aria-disabled": isDisabled, ...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/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/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-describedby": 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/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,5 +1,5 @@
-import { HTMLAttributes } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Stepper/Stepper.scss";
+import { HTMLAttributes } from "react";
 export type StepperProps = {
     currentStepProgress?: number;
     currentStep: number;

package/dist/Stepper/Stepper.js

@@ -1,7 +1,7 @@
 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";
+import classNames from "classnames";
+import { useCallback, useId } from "react";
 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 }) => {
@@ -18,5 +18,5 @@ export const Stepper = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, curren
         }
         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}`))) })] }));
+    return (_jsxs("div", { className: "af-stepper-client", ...props, children: [_jsxs("div", { 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}`))) })] }));
 };

package/dist/Tag/Tag.js

@@ -2,6 +2,6 @@ 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]);
+    const componentClassName = useMemo(() => getComponentClassName("af-tag", className, classModifier), [className, classModifier]);
     return (_jsx("div", { className: componentClassName, ...divProps, children: _jsx("span", { className: "af-tag__label", children: children }) }));
 };

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/index.d.ts

@@ -4,26 +4,29 @@ export { Accordion } from "./Accordion";
 export { AccordionCore } from "./AccordionCore";
 export { Alert } from "./Alert/Alert";
 export type { AlertType } from "./Alert/Alert";
-export { ButtonClient as Button, Variants as ButtonVariants, } from "./Button/Button";
+export { Button, buttonVariants, type ButtonVariants } from "./Button/Button";
 export { Card } from "./Card";
+export { Divider } from "./Divider";
 export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
 export { FileUpload } from "./Form/FileUpload";
+export { InputError } from "./Form/InputError";
 export { Radio, RadioSelect } from "./Form/Radio";
 export { Select } from "./Form/Select";
 export { Text as TextInput } from "./Form/Text";
 export { TextArea } from "./Form/TextArea";
+export { DebugGrid } from "./Grid/DebugGrid";
 export { IconBg } from "./IconBg";
 export { Footer } from "./Layout/Footer/Footer";
-export { Header } from "./Layout/Header";
+export { BurgerMenu, Header, NavBar, PreviousLink } from "./Layout/Header";
 export { Link } from "./Link";
 export { List } from "./List";
 export { ClickItem, ClickList, createClickItemParent } from "./List/ClickList";
 export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
-export { Loader } from "./Loader";
-export { Modal } from "./ModalClient";
-export type { ButtonAction as ModalButtonAction } from "./ModalClient/type";
+export { Spinner, type SpinnerVariants, spinnerVariants, } from "./Spinner/Spinner";
+export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal";
+export type { ModalCoreBodyProps, ModalCoreFooterProps, ModalCoreHeaderProps, ModalCoreProps, ModalProps, } from "./Modal";
 export { Pagination } from "./Pagination/Pagination";
 export { Skeleton } from "./Skeleton/Skeleton";
 export { SkeletonList } from "./SkeletonList/SkeletonList";
@@ -32,4 +35,3 @@ export { Svg } from "./Svg";
 export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
 export { Tag } from "./Tag";
 export { Title, TitleSize, type TitleLevel } from "./Title";
-export { DebugGrid } from "./Grid/DebugGrid";

package/dist/index.js

@@ -3,25 +3,28 @@ import "@fontsource/source-sans-pro";
 export { Accordion } from "./Accordion";
 export { AccordionCore } from "./AccordionCore";
 export { Alert } from "./Alert/Alert";
-export { ButtonClient as Button, Variants as ButtonVariants, } from "./Button/Button";
+export { Button, buttonVariants } from "./Button/Button";
 export { Card } from "./Card";
+export { Divider } from "./Divider";
 export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
 export { FileUpload } from "./Form/FileUpload";
+export { InputError } from "./Form/InputError";
 export { Radio, RadioSelect } from "./Form/Radio";
 export { Select } from "./Form/Select";
 export { Text as TextInput } from "./Form/Text";
 export { TextArea } from "./Form/TextArea";
+export { DebugGrid } from "./Grid/DebugGrid";
 export { IconBg } from "./IconBg";
 export { Footer } from "./Layout/Footer/Footer";
-export { Header } from "./Layout/Header";
+export { BurgerMenu, Header, NavBar, PreviousLink } from "./Layout/Header";
 export { Link } from "./Link";
 export { List } from "./List";
 export { ClickItem, ClickList, createClickItemParent } from "./List/ClickList";
 export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
-export { Loader } from "./Loader";
-export { Modal } from "./ModalClient";
+export { Spinner, spinnerVariants, } from "./Spinner/Spinner";
+export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal";
 export { Pagination } from "./Pagination/Pagination";
 export { Skeleton } from "./Skeleton/Skeleton";
 export { SkeletonList } from "./SkeletonList/SkeletonList";
@@ -30,4 +33,3 @@ export { Svg } from "./Svg";
 export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
 export { Tag } from "./Tag";
 export { Title, TitleSize } from "./Title";
-export { DebugGrid } from "./Grid/DebugGrid";

package/dist/utilities/helpers/getComponentClassName.d.ts

@@ -1 +1 @@
-export declare const getComponentClassName: (className?: string, classModifier?: string, defaultClassName?: string) => string;
+export declare const getComponentClassName: (defaultClassName: string, className?: string, classModifier?: string) => string;

package/dist/utilities/helpers/getComponentClassName.js

@@ -1,9 +1,9 @@
 import classNames from "classnames";
-const getLastClassName = (classNameToUse) => {
-    if (!classNameToUse) {
+const getLastClassName = (defaultClassName) => {
+    if (!defaultClassName) {
         return null;
     }
-    return classNameToUse.split(" ").filter(Boolean).at(-1);
+    return defaultClassName.split(" ").filter(Boolean).at(-1);
 };
 const listClassModifier = (classModifier) => {
     if (!classModifier) {
@@ -11,17 +11,16 @@ const listClassModifier = (classModifier) => {
     }
     return classModifier.split(" ");
 };
-export const getComponentClassName = (className, classModifier, defaultClassName) => {
-    const classNameToUse = className || defaultClassName;
-    if (!classNameToUse) {
+export const getComponentClassName = (defaultClassName, className, classModifier) => {
+    if (!defaultClassName) {
         return "";
     }
-    const classWithoutModifier = getLastClassName(classNameToUse);
+    const classWithoutModifier = getLastClassName(defaultClassName);
     const modifiers = listClassModifier(classModifier);
     const modifiersObject = modifiers
         .filter((it) => /\S/.test(it))
         .map((it) => {
         return `${classWithoutModifier}--${it}`;
     });
-    return classNames(classNameToUse, modifiersObject);
+    return classNames(defaultClassName, className, modifiersObject);
 };