@axa-fr/design-system-slash-react 1.2.1-alpha.12 → 1.2.1-alpha.123

package/dist/Form/core/Field.js

@@ -3,23 +3,36 @@ import classNames from "classnames";
 import { useId } from "react";
 import { FieldError, FormClassManager, HelpMessage, useInputClassModifier, } from ".";
 import { getComponentClassName } from "../../utilities";
-export const Field = ({ classNameContainerInput = "col-md-10", classNameContainerLabel = "col-md-2", label, forceDisplayMessage, message, messageType, required, classModifier = "", children, disabled = false, helpMessage, id, isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, errorId, renderInput, }) => {
+import { useAriaInvalid } from "./useAriaInvalid";
+export const Field = ({ classNameContainerInput = "col-md-10", classNameContainerLabel = "col-md-2", className, label, forceDisplayMessage, message, messageType, required, classModifier = "", disabled = false, helpMessage, id, isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, labelPosition = "center", classNameSuffix = "text", renderInput, appendChildren, ...otherProps }) => {
     const inputUseId = useId();
     const inputId = id ?? inputUseId;
     const actualRequired = required || classModifier.includes("required");
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), actualRequired);
+    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
+    const errorId = forceDisplayMessage || helpMessage ? `${inputId}-description` : undefined;
+    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, false, actualRequired);
+    const labelId = useId();
     if (!isVisible) {
         return null;
     }
-    const fieldContainerClassName = getComponentClassName("af-form__text", forceDisplayMessage
+    const isGroup = roleContainer === "radiogroup" || roleContainer === "group";
+    const LabelElement = isGroup ? "div" : "label";
+    const modifiers = forceDisplayMessage
         ? `${inputFieldClassModifier} ${FormClassManager.getModifier(messageType)}`
-        : inputFieldClassModifier);
-    return (_jsxs("div", { className: classNames("row af-form__group", {
+        : inputFieldClassModifier;
+    const fieldContainerClassName = getComponentClassName(`af-form__${classNameSuffix}`, modifiers);
+    const groupClassName = getComponentClassName(className, classModifier, "af-form__group");
+    return (_jsxs("div", { className: classNames("row", groupClassName, {
             "af-form__group--required": actualRequired,
-        }), role: roleContainer, "aria-label": ariaLabelContainer, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx("label", { className: classNames("af-form__group-label", {
+            "af-form__group--label-top": labelPosition === "top",
+        }), role: roleContainer, "aria-label": ariaLabelContainer, "aria-labelledby": isGroup ? labelId : undefined, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx(LabelElement, { className: classNames("af-form__group-label", {
                         "af-form__group-label--required": actualRequired,
-                    }), htmlFor: isLabelContainerLinkedToInput ? inputId : undefined, children: label }) }), _jsxs("div", { className: classNameContainerInput, children: [_jsxs("div", { className: fieldContainerClassName, children: [renderInput({
-                                id: inputId,
-                                classModifier: inputClassModifier,
-                            }), children] }), forceDisplayMessage ? (_jsx(FieldError, { message: message, messageType: messageType, errorId: errorId })) : (_jsx(HelpMessage, { message: helpMessage }))] })] }));
+                    }), htmlFor: isLabelContainerLinkedToInput ? inputId : undefined, id: labelId, children: label }) }), _jsxs("div", { className: classNameContainerInput, children: [_jsx("div", { className: fieldContainerClassName, children: renderInput({
+                            classModifier: `${inputClassModifier} ${modifiers}`,
+                            id: inputId,
+                            errorId,
+                            disabled,
+                            ariaInvalid: isInvalid,
+                            ...otherProps,
+                        }) }), forceDisplayMessage ? (_jsx(FieldError, { message: message, messageType: messageType, errorId: errorId })) : (_jsx(HelpMessage, { message: helpMessage, id: errorId })), appendChildren] })] }));
 };

package/dist/Form/core/FormClassManager.js

@@ -2,7 +2,7 @@ import { MessageTypes } from "./MessageTypes";
 const getFieldInputClassModifier = (modifier, disabled) => disabled ? `${modifier} disabled` : modifier;
 const getInputClassModifier = (modifier, children) => children ? `${modifier} hasinfobulle` : modifier;
 const getModifier = (messageType) => {
-    let modifier = "error";
+    let modifier = "";
     switch (messageType) {
         case MessageTypes.success:
             modifier = "success";
@@ -10,6 +10,9 @@ const getModifier = (messageType) => {
         case MessageTypes.warning:
             modifier = "warning";
             break;
+        case MessageTypes.error:
+            modifier = "error";
+            break;
         default:
             break;
     }

package/dist/Form/core/HelpMessage.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 type HelpProps = {
     message?: ReactNode;
     isVisible?: boolean;
+    id?: string;
 };
-export declare const HelpMessage: ({ message, isVisible }: HelpProps) => false | import("react/jsx-runtime").JSX.Element;
+export declare const HelpMessage: ({ message, isVisible, id }: HelpProps) => false | import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/core/HelpMessage.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const HelpMessage = ({ message, isVisible = true }) => isVisible && _jsx("small", { className: "af-form__help", children: message });
+export const HelpMessage = ({ message, isVisible = true, id }) => isVisible && (_jsx("small", { id: id, className: "af-form__help", children: message }));

package/dist/Form/core/index.d.ts

@@ -1,12 +1,13 @@
 import { ReactNode } from "react";
+export { LegacyField } from "./Deprecated/Field";
+export { FieldForm } from "./Deprecated/FieldForm";
+export { FieldInput } from "./Deprecated/FieldInput";
 export { Field } from "./Field";
+export type { ConsumerFieldProps } from "./Field";
 export { FieldError } from "./FieldError";
-export { FieldForm } from "./FieldForm";
-export { FieldInput } from "./FieldInput";
 export { FormClassManager } from "./FormClassManager";
 export { HelpMessage } from "./HelpMessage";
 export { InputList } from "./InputList";
-export { LegacyField } from "./LegacyField";
 export { MessageTypes } from "./MessageTypes";
 export { getFirstId } from "./getFirstId";
 export { getOptionClassName } from "./getOptionClassName";
@@ -16,9 +17,11 @@ export type Option = {
     id?: string;
     icon?: ReactNode;
     label: ReactNode;
+    /**
+     * @deprecated Ne semble pas utilisé
+     */
     description?: ReactNode;
     value: string;
-    disabled?: boolean;
 } & React.InputHTMLAttributes<HTMLInputElement>;
 type BaseFormEvent = {
     id: string;

package/dist/Form/core/index.js

@@ -1,11 +1,11 @@
+export { LegacyField } from "./Deprecated/Field";
+export { FieldForm } from "./Deprecated/FieldForm";
+export { FieldInput } from "./Deprecated/FieldInput";
 export { Field } from "./Field";
 export { FieldError } from "./FieldError";
-export { FieldForm } from "./FieldForm";
-export { FieldInput } from "./FieldInput";
 export { FormClassManager } from "./FormClassManager";
 export { HelpMessage } from "./HelpMessage";
 export { InputList } from "./InputList";
-export { LegacyField } from "./LegacyField";
 export { MessageTypes } from "./MessageTypes";
 export { getFirstId } from "./getFirstId";
 export { getOptionClassName } from "./getOptionClassName";

package/dist/Layout/Footer/Footer.d.ts

@@ -1,4 +1,5 @@
-import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 type FooterProps = {
     href?: string;
     title?: string;

package/dist/Layout/Footer/Footer.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import logo from "@axa-fr/design-system-slash-css/logo-axa.svg";
-import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 import { forwardRef } from "react";
-export const Footer = forwardRef(({ className = "af-footer", href = "https://www.axa.fr/", title = "Site Axa", icon = logo, alt = "Logo Axa", version, children = `© ${new Date().getFullYear()} AXA Tous droits réservés`, ...props }, ref) => (_jsx("footer", { ref: ref, className: className, ...props, children: _jsxs("div", { className: "container-fluid container", children: [Boolean(icon) && (_jsx("a", { className: "af-logo", href: href, title: title, target: "blank", rel: "noopener noreferrer", children: _jsx("img", { className: "af-logo__brand", src: icon, alt: alt }) })), _jsx("div", { className: "af-footer-content", children: children }), version && (_jsxs("span", { className: "af-footer-version", children: ["Version ", version] }))] }) })));
+import classNames from "classnames";
+export const Footer = forwardRef(({ className = "af-footer", href = "https://www.axa.fr/", title = "Site Axa", icon = logo, alt = "Logo Axa", version, children = `© ${new Date().getFullYear()} AXA Tous droits réservés`, ...props }, ref) => (_jsxs("footer", { ref: ref, className: classNames("af-container", className), ...props, children: [Boolean(icon) && (_jsx("a", { className: "af-logo", href: href, title: title, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { className: "af-logo__brand", src: icon, alt: alt }) })), _jsx("div", { className: "af-footer-content", children: children }), version ? (_jsxs("span", { className: "af-footer-version", children: ["Version ", version] })) : null] })));
 Footer.displayName = "Footer";

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

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/AnchorNavBar/AnchorNavBar.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
+export type AnchorNavBarItem = {
+    /**
+     * name - The display name of the navigation item.
+     */
+    name: string;
+    /**
+     * isActive - If true, the item is highlighted as active.
+     */
+    isActive?: boolean;
+    /**
+     * onClick - Optional click handler for the navigation item.
+     */
+    onClick?: () => void;
+    /**
+     * link - The URL or anchor to navigate to when the item is clicked.
+     */
+    link?: string;
+    /**
+     * externalLink - If true, the link will open in a new tab and show an external link icon.
+     */
+    externalLink?: boolean;
+    /**
+     * render - Optional custom render function for the navigation item. If provided, it overrides the default rendering.
+     */
+    render?: (props: {
+        className: string;
+    }) => ReactNode;
+};
+/**
+ * Props for the AnchorNavBar component.
+ * items - An array of navigation items to display in the navigation bar.
+ */
+export type AnchorNavBarProps = {
+    items: AnchorNavBarItem[];
+};
+export declare const AnchorNavBar: ({ items }: AnchorNavBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Layout/Header/AnchorNavBar/AnchorNavBar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import externalLinkIcon from "@material-symbols/svg-400/sharp/exit_to_app.svg";
+import { Svg } from "../../../Svg";
+import { Link } from "../../../Link/Link";
+import { linkClassName } from "../../../Link/linkClassName";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/AnchorNavBar/AnchorNavBar.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
+const defaultClassName = "af-anchor-navbar";
+export const AnchorNavBar = ({ items }) => {
+    return (_jsx("nav", { className: classNames("af-container", defaultClassName), children: _jsx("ul", { children: items.map((item) => {
+                if (item.render) {
+                    return (_jsx("li", { children: _jsx(Link, { render: item.render, className: classNames(`${linkClassName} ${defaultClassName}-link`, {
+                                [`${defaultClassName}-link--active`]: item.isActive,
+                            }) }) }, `nav-item-${item.name}`));
+                }
+                return (_jsx("li", { children: _jsxs(Link, { href: item.link, "aria-current": item.isActive ? "page" : undefined, onClick: item.onClick, className: classNames(`${defaultClassName}-link`, {
+                            [`${defaultClassName}-link--active`]: item.isActive,
+                        }), target: item.externalLink ? "_blank" : undefined, children: [item.name, item.externalLink ? (_jsx(Svg, { role: "presentation", src: externalLinkIcon, className: `${defaultClassName}-external-link-svg` })) : null] }) }, `nav-item-${item.name}`));
+            }) }) }));
+};

package/dist/Layout/Header/Header.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/Header.scss";
+import classNames from "classnames";
 import { getComponentClassName } from "../../utilities";
 const defaultClassName = "af-header";
 const Header = ({ classModifier, className, children }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsx("div", { className: componentClassName, children: _jsx("div", { className: `container ${defaultClassName}__wrapper`, children: _jsx("header", { className: `${defaultClassName}__content`, role: "banner", children: children }) }) }));
+    return (_jsx("div", { className: classNames("af-container", componentClassName), children: _jsx("header", { className: `${defaultClassName}__content`, role: "banner", children: children }) }));
 };
 export { Header };

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

@@ -1,13 +1,17 @@
 import { ReactNode } from "react";
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/HeaderTitle/HeaderTitle.scss";
+import { AnchorNavBarItem } from "../AnchorNavBar/AnchorNavBar";
 type Props = {
     children?: ReactNode;
     classModifier?: string;
     className?: string;
     isSticky?: boolean;
+    contentLeft?: ReactNode;
+    contentRight?: ReactNode;
     subtitle?: string;
     title: string;
     toggleMenu?: () => void;
+    anchorNavBarItems?: AnchorNavBarItem[];
 };
-declare const HeaderTitle: ({ children, classModifier, className, isSticky, subtitle, title, toggleMenu, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const HeaderTitle: ({ children, classModifier, className, isSticky, contentLeft, contentRight, subtitle, title, toggleMenu, anchorNavBarItems, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { HeaderTitle };

package/dist/Layout/Header/HeaderTitle/HeaderTitle.js

@@ -1,12 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/HeaderTitle/HeaderTitle.scss";
+import classNames from "classnames";
 import { getComponentClassName } from "../../../utilities";
 import { ToggleButton } from "../ToggleButton/ToggleButton";
 import { Action } from "../../../Action/Action";
 import { getClassModifier } from "./HeaderTitle.helpers";
+import { AnchorNavBar } from "../AnchorNavBar/AnchorNavBar";
 const defaultClassName = "af-title-bar";
-const HeaderTitle = ({ children, classModifier, className, isSticky = true, subtitle, title, toggleMenu, }) => {
+const HeaderTitle = ({ children, classModifier, className, isSticky = true, contentLeft, contentRight, subtitle, title, toggleMenu, anchorNavBarItems, }) => {
     const componentClassName = getComponentClassName(className, getClassModifier(classModifier, isSticky), defaultClassName);
-    return (_jsx("div", { className: componentClassName, children: _jsxs("div", { className: `container ${defaultClassName}__wrapper`, children: [Boolean(toggleMenu) && (_jsx("div", { className: "burger-container", children: _jsx(ToggleButton, { idControl: "mainmenu", children: _jsx(Action, { className: "btn af-title-bar__mobile-menu af-btn--circle", id: "togglemenu", icon: "menu-hamburger", title: "Toggle menu", onClick: toggleMenu }) }) })), _jsxs("h1", { className: `${defaultClassName}__title`, children: [title, subtitle && (_jsx("span", { className: `${defaultClassName}__subtitle`, children: subtitle }))] }), children] }) }));
+    const isAnchorNavBarPresent = anchorNavBarItems && anchorNavBarItems.length > 0;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames("af-container", componentClassName, {
+                    [`${defaultClassName}__withAnchorNavBar`]: isAnchorNavBarPresent,
+                }), children: [Boolean(toggleMenu) && (_jsx("div", { className: "burger-container", children: _jsx(ToggleButton, { idControl: "mainmenu", children: _jsx(Action, { className: "btn af-title-bar__mobile-menu af-btn--circle", id: "togglemenu", icon: "menu-hamburger", title: "Toggle menu", onClick: toggleMenu }) }) })), _jsxs("div", { className: `${defaultClassName}__leftSection`, children: [contentLeft, _jsxs("h1", { className: `${defaultClassName}__title`, children: [title, subtitle ? (_jsx("span", { className: `${defaultClassName}__subtitle`, children: subtitle })) : null] }), children] }), contentRight ? (_jsx("div", { className: `${defaultClassName}__rightSection`, children: contentRight })) : null] }), isAnchorNavBarPresent ? (_jsx(AnchorNavBar, { items: anchorNavBarItems })) : null] }));
 };
 export { HeaderTitle };

package/dist/Layout/Header/Infos/Infos.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
+import infoIcon from "@material-symbols/svg-400/outlined/info-fill.svg";
 import { getComponentClassName } from "../../../utilities";
 import { generateId } from "../../../utilities/helpers/generateId";
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.scss";
+import { Svg } from "../../../Svg";
 const defaultClassName = "af-contrat";
 const Infos = ({ infos, className, classModifier }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("i", { className: "glyphicon glyphicon-info-sign" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => {
+    return (_jsxs("div", { className: componentClassName, children: [_jsx(Svg, { className: "af-contrat__icon", src: infoIcon, "aria-hidden": "true" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => {
                     const idTerm = info.id ?? `info-${generateId(info)}`;
                     return (_jsxs(Fragment, { children: [_jsx("dt", { id: idTerm, className: `${defaultClassName}__word`, children: info.word }), _jsx("dd", { className: `${defaultClassName}__def`, "aria-labelledby": idTerm, children: info.definition })] }, idTerm));
                 }) })] }));

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

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 import { getComponentClassName } from "../../../utilities";
 const defaultClassName = "af-nav-container";
 const NavBarBase = ({ isVisible = true, onClick, id = "mainmenu", toggleMenuId = "togglemenu", isMenuFocused, className, classModifier, handleKeys, onFocus, onBlur, children, }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("button", { "aria-controls": id, "aria-haspopup": "true", type: "button", onClick: onClick, className: `mask fade ${isVisible ? "show" : ""}`, id: `open-${toggleMenuId}`, "aria-label": "Open Menu" }), _jsx("nav", { className: `af-nav af-drawer left ${isVisible ? "show" : ""}`, role: "navigation", "aria-label": "Menu principal", children: _jsxs("div", { className: "container af-nav__wrapper", children: [_jsxs("div", { className: "af-nav__aside-header", children: [_jsx("h4", { className: "af-nav__aside-title", children: "Menu" }), _jsx("button", { "aria-controls": id, "aria-haspopup": "true", onClick: onClick, type: "button", className: "af-nav__aside-close", id: `close-${toggleMenuId}`, "aria-label": "Close Menu", children: "\u00D7" })] }), _jsx("ul", { onKeyDown: (e) => {
-                                e.preventDefault();
-                                handleKeys(e.key);
-                            }, onFocus: (e) => {
-                                onFocus({ e });
-                            }, onBlur: (e) => {
-                                onBlur({ e });
-                            }, className: `af-nav__list ${isMenuFocused ? "af-nav__list--focused" : ""}`, role: "menubar", id: id, children: children })] }) })] }));
+    return (_jsxs("div", { className: classNames("af-container", componentClassName), children: [_jsx("button", { "aria-controls": id, "aria-haspopup": "true", type: "button", onClick: onClick, className: `mask fade ${isVisible ? "show" : ""}`, id: `open-${toggleMenuId}`, "aria-label": "Open Menu" }), _jsxs("nav", { className: `af-nav af-drawer left ${isVisible ? "show" : ""}`, role: "navigation", "aria-label": "Menu principal", children: [_jsxs("div", { className: "af-nav__aside-header", children: [_jsx("h4", { className: "af-nav__aside-title", children: "Menu" }), _jsx("button", { "aria-controls": id, "aria-haspopup": "true", onClick: onClick, type: "button", className: "af-nav__aside-close", id: `close-${toggleMenuId}`, "aria-label": "Close Menu", children: "\u00D7" })] }), _jsx("ul", { onKeyDown: (e) => {
+                            e.preventDefault();
+                            handleKeys(e.key);
+                        }, onFocus: (e) => {
+                            onFocus({ e });
+                        }, onBlur: (e) => {
+                            onBlur({ e });
+                        }, className: `af-nav__list ${isMenuFocused ? "af-nav__list--focused" : ""}`, role: "menubar", id: id, children: children })] })] }));
 };
 export { NavBarBase };

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

@@ -49,6 +49,6 @@ const NavBarItem = ({ children, hasFocus = false, actionElt, ariaLabel = "", tab
         key: `child${childIndex}`,
         hasFocus: hasFocus && position === childIndex && isMenuOpen,
     }), [position, isMenuOpen, hasFocus]);
-    return (_jsx(NavBarItemBase, { className: className, role: role, hasFocus: hasFocus, tabIndex: tabIndex, isMenuOpen: isMenuOpen, handleKeys: handleKeys, actionElt: actionElt, ...otherProps, children: children && (_jsxs(_Fragment, { children: [_jsx("i", { className: "glyphicon glyphicon-arrow-xs-down" }, `icon${tabIndex}`), _jsx("ul", { className: "af-nav__list af-nav__list--children", role: "menu", "aria-label": ariaLabel, children: React.Children.map(children, renderChild) }, `list${tabIndex}`)] })) }));
+    return (_jsx(NavBarItemBase, { className: className, role: role, hasFocus: hasFocus, tabIndex: tabIndex, isMenuOpen: isMenuOpen, handleKeys: handleKeys, actionElt: actionElt, ...otherProps, children: children ? (_jsxs(_Fragment, { children: [_jsx("i", { className: "glyphicon glyphicon-arrow-xs-down" }, `icon${tabIndex}`), _jsx("ul", { className: "af-nav__list af-nav__list--children", role: "menu", "aria-label": ariaLabel, children: React.Children.map(children, renderChild) }, `list${tabIndex}`)] })) : null }));
 };
 export { NavBarItem };

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

@@ -1,4 +1,5 @@
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/NavBar/NavBar.scss";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 export { NavBar } from "./NavBar";
 export { NavBarBase } from "./NavBarBase";
 export { NavBarItem, NavBarItemBase, NavBarItemLink } from "./NavBarItem";

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

@@ -1,4 +1,5 @@
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/NavBar/NavBar.scss";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 export { NavBar } from "./NavBar";
 export { NavBarBase } from "./NavBarBase";
 export { NavBarItem, NavBarItemBase, NavBarItemLink } from "./NavBarItem";

package/dist/Layout/Header/User/InnerUser.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const InnerUser = ({ name, profile }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "af-info-user__name", children: name }, "1"), profile && (_jsxs("span", { className: "af-info-user__profile", children: ["[", profile, "]"] }, "2"))] }));
+const InnerUser = ({ name, profile }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "af-info-user__name", children: name }, "1"), profile ? (_jsxs("span", { className: "af-info-user__profile", children: ["[", profile, "]"] }, "2")) : null] }));
 export { InnerUser };

package/dist/Layout/MainContainer/MainContainer.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-slash-css/dist/Layout/MainContainer/MainContainer.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
+type MainContainerProps = ComponentPropsWithoutRef<"main"> & PropsWithChildren;
+export declare const MainContainer: ({ children, ...othersProps }: MainContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Layout/MainContainer/MainContainer.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Layout/MainContainer/MainContainer.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
+export const MainContainer = ({ children, ...othersProps }) => (_jsx("main", { className: "af-container", ...othersProps, children: children }));

package/dist/Link/Link.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Link/Link.scss";
+import "@axa-fr/design-system-slash-css/dist/Link/Link.css";
 import { type CustomLinkProps } from "./CustomLink";
 import { type LinkComponentProps } from "./LinkAnchor";
 export type LinkProps = LinkComponentProps | CustomLinkProps;

package/dist/Link/Link.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Link/Link.scss";
+import "@axa-fr/design-system-slash-css/dist/Link/Link.css";
 import { forwardRef } from "react";
 import { CustomLink } from "./CustomLink";
 import { LinkAnchor } from "./LinkAnchor";

package/dist/Link/LinkAnchor.d.ts

@@ -1,9 +1,11 @@
-import { ComponentPropsWithRef, type ReactNode } from "react";
+import { ComponentPropsWithRef, ReactElement } from "react";
+import { Svg } from "../Svg";
 type AnchorLinkProps = {
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
+    leftIcon?: ReactElement<typeof Svg>;
+    rightIcon?: ReactElement<typeof Svg>;
     className?: string;
     disabled?: boolean;
+    variant?: "default" | "reverse";
 };
 type LinkComponentProps = ComponentPropsWithRef<"a"> & AnchorLinkProps;
 declare const LinkAnchor: import("react").ForwardRefExoticComponent<Omit<LinkComponentProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Link/LinkAnchor.js

@@ -2,9 +2,11 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
 import { forwardRef } from "react";
 import { linkClassName } from "./linkClassName";
-const LinkAnchor = forwardRef(({ className, target, rel, leftIcon, children, rightIcon, disabled, ...restProps }, ref) => {
-    const finalClassName = classnames(linkClassName, className);
-    return (_jsxs("a", { className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], ref: ref, ...restProps, children: [leftIcon, children, rightIcon] }));
+const LinkAnchor = forwardRef(({ className, target, rel, leftIcon, children, rightIcon, disabled, variant, ...restProps }, ref) => {
+    const finalClassName = classnames(linkClassName, className, {
+        [`${linkClassName}--reverse`]: variant === "reverse",
+    });
+    return (_jsxs("a", { className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], ref: ref, target: target, ...restProps, children: [leftIcon, children, rightIcon] }));
 });
 LinkAnchor.displayName = "LinkAnchor";
 export { LinkAnchor };

package/dist/Loader/Loader.js

@@ -22,5 +22,5 @@ export const Loader = ({ className, text, children, classModifier, mode = "none"
     const message = text || getText(mode);
     const isLoaderVisible = mode !== "none";
     const isLoaderInError = mode === "error";
-    return (_jsxs("div", { className: componentClassName, children: [children, isLoaderVisible && (_jsx("div", { className: `${componentClassName} af-loader-on`, children: _jsxs("div", { className: "af-spinner", role: "alert", "aria-live": "assertive", "aria-busy": !isLoaderInError, "aria-label": message, children: [!isLoaderInError && _jsx("div", { className: "af-spinner__animation" }), _jsx("div", { className: "af-spinner__caption", children: message })] }) }))] }));
+    return (_jsxs("div", { className: componentClassName, children: [children, isLoaderVisible ? (_jsx("div", { className: `${componentClassName} af-loader-on`, children: _jsxs("div", { className: "af-spinner", role: "alert", "aria-live": "assertive", "aria-busy": !isLoaderInError, "aria-label": message, children: [!isLoaderInError && _jsx("div", { className: "af-spinner__animation" }), _jsx("div", { className: "af-spinner__caption", children: message })] }) })) : null] }));
 };

package/dist/Messages/Message.d.ts

@@ -0,0 +1,47 @@
+import "@axa-fr/design-system-slash-css/dist/Message/Message.css";
+import { MouseEventHandler, PropsWithChildren, ReactNode } from "react";
+export type MessageVariants = "error" | "warning" | "info" | "success";
+export type MessageProps = {
+    /**
+     * Content of the message title. Can be a string or a ReactNode.
+     */
+    title: ReactNode;
+    /**
+     * URL of an svg icon to display in the sidebar of the message.
+     * If not provided, a default icon based on the classModifier will be used.
+     * <strong>This not recommended to use</strong>. Only use as an escape hatch.
+     */
+    icon?: string;
+    /**
+     * handler for the close button click event.
+     * If not provided, the close button will not be displayed.
+     */
+    onClose?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * If you want to add a custom class to the component.
+     * @example
+     * ```tsx
+     * <Message className="my-custom-class" title="My message">
+     * ```
+     * will produce
+     * ```html
+     * <div class="my-custom-class af-alert">My message</div>
+     */
+    className?: string;
+    /**
+     * @deprecated Use `variant` instead.
+     */
+    classModifier?: MessageVariants | "danger";
+    /**
+     * Variant of the message.
+     * This will determine the icon and the style of the message.
+     */
+    variant?: MessageVariants;
+    /**
+     * Aria label for the close button.
+     * This is important for accessibility, use a meaningful label to describe the action.
+     * @default "close"
+     */
+    closeButtonAriaLabel?: string;
+};
+export declare const Message: ({ className, onClose, icon, title, children, classModifier, variant, closeButtonAriaLabel, }: PropsWithChildren<MessageProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/Messages/Message.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Message/Message.css";
+import successSvg from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import closeSvg from "@material-symbols/svg-400/outlined/close.svg";
+import errorSvg from "@material-symbols/svg-400/outlined/error-fill.svg";
+import infoSvg from "@material-symbols/svg-400/outlined/info-fill.svg";
+import warningSvg from "@material-symbols/svg-400/outlined/warning-fill.svg";
+import { Svg } from "../Svg";
+import { getComponentClassNameWithUserClassname } from "../utilities/helpers/getComponentClassName";
+const getIconUrl = (type) => {
+    switch (type) {
+        case "info":
+            return infoSvg;
+        case "success":
+            return successSvg;
+        case "error":
+            return errorSvg;
+        case "warning":
+            return warningSvg;
+        default:
+            return errorSvg;
+    }
+};
+const getVariant = (classModifier, variant) => {
+    if (variant) {
+        return variant;
+    }
+    if (classModifier) {
+        return classModifier === "danger" ? "warning" : classModifier;
+    }
+    return "error"; // Default variant
+};
+export const Message = ({ className, onClose, icon, title, children, classModifier = "error", variant, // Backward compatibility
+closeButtonAriaLabel = "close", }) => {
+    const safeVariant = getVariant(classModifier, variant);
+    const componentClassName = getComponentClassNameWithUserClassname({
+        componentClassName: "af-alert",
+        userClassName: className,
+        classModifier: safeVariant,
+    });
+    const iconSrc = icon ?? getIconUrl(safeVariant);
+    return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsx("div", { className: "af-alert__sidebar", children: _jsx("div", { className: "af-alert__indicator", children: _jsx(Svg, { src: iconSrc, className: "af-alert__icon", role: "presentation" }) }) }), _jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__title", children: title }), children] }), onClose ? (_jsx("button", { onClick: onClose, "aria-label": closeButtonAriaLabel, type: "button", className: "af-alert__close-button", children: _jsx(Svg, { src: closeSvg, className: "af-alert__close-icon", role: "presentation" }) })) : null] }));
+};

package/dist/ModalAgent/BooleanModal.d.ts

@@ -1,15 +1,40 @@
-import React, { type ReactNode, type Ref } from "react";
+import React, { type ReactNode } from "react";
 import { type HeaderProps } from "./components/Header";
-export type BooleanModalProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & HeaderProps & {
+import { ModalProps } from "./Modal";
+export type BooleanModalProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & Omit<HeaderProps, "children" | "onCancel" | "title"> & Pick<ModalProps, "size"> & {
+    /**
+     * Title of the modal, displayed in the header.
+     * Also used as the `aria-label` of the <dialog> element for accessibility.
+     */
+    title: string;
+    /**
+     * Callback function called when the modal is submitted.
+     * @param event The event that triggered the submission, can be a mouse click or a keyboard event.
+     * @returns void
+     */
     onSubmit: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Callback function called when the modal is cancelled.
+     * @param event The event that triggered the cancellation, can be a mouse click or a keyboard event.
+     * @returns void
+     */
     onCancel: (event: React.MouseEvent | React.KeyboardEvent) => void;
     id: string;
     children: ReactNode;
+    /**
+     * Text content of the submit button.
+     */
     submitTitle?: string;
+    /**
+     * Text content of the cancel button.
+     */
     cancelTitle?: string;
     className?: string;
+    /**
+     * @deprecated Use `size` prop instead.
+     * Class modifier for the modal. Can be used to apply custom styles.
+     */
     classModifier?: string;
-    ref?: Ref<HTMLDialogElement>;
 };
 declare const BooleanModal: React.ForwardRefExoticComponent<Omit<BooleanModalProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
 export { BooleanModal };

package/dist/ModalAgent/BooleanModal.js

@@ -7,7 +7,7 @@ import { Header } from "./components/Header";
 const defaultClassName = "af-modal";
 const BooleanModal = forwardRef(({ children, title, submitTitle = "Valider", cancelTitle = "Annuler", className = defaultClassName, classModifier, onCancel, onSubmit, closeButtonAriaLabel, ...props }, ref) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs(Modal, { className: componentClassName, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(Header, { title: title, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(Body, { children: children }), _jsxs(Footer, { children: [_jsx(Button, { classModifier: "reverse", onClick: onCancel, children: cancelTitle }), _jsx(Button, { onClick: onSubmit, children: submitTitle })] })] }));
+    return (_jsxs(Modal, { className: componentClassName, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(Header, { title: title, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(Body, { children: children }), _jsxs(Footer, { children: [_jsx(Button, { variant: "secondary", onClick: onCancel, children: cancelTitle }), _jsx(Button, { onClick: onSubmit, variant: "validated", children: submitTitle })] })] }));
 });
 BooleanModal.displayName = "BooleanModal";
 export { BooleanModal };

package/dist/ModalAgent/Modal.d.ts

@@ -1,10 +1,24 @@
 import { type ReactNode } from "react";
 export type ModalProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & {
-    className?: string;
-    title?: string;
-    onOutsideTap: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    size?: "lg" | "sm";
+    /**
+     * The content of the modal.
+     */
     children: ReactNode;
+    onOutsideTap: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * `aria-label` of the modal, used for accessibility.
+     */
+    title?: string;
+    className?: string;
+    /**
+     * @deprecated Use `size` prop instead.
+     * Class modifier for the modal. Can be used to apply custom styles.
+     */
     classModifier?: string;
+    /**
+     * Size of the modal. Overrides classModifier if set
+     */
     ref?: React.Ref<HTMLDialogElement>;
 };
 declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;