@axa-fr/design-system-slash-react 1.2.1-alpha.99 → 2.0.0-alpha.1

package/dist/Button/Button.d.ts

@@ -1,7 +1,11 @@
-import "@axa-fr/design-system-slash-css/dist/Button/Button.scss";
-import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
-type ButtonProps = {
-    classModifier?: string;
-} & ComponentPropsWithoutRef<"button">;
-export declare const Button: ({ children, classModifier, className, ...args }: PropsWithChildren<ButtonProps>) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { ReactNode } from "react";
+import "@axa-fr/design-system-slash-css/dist/Button/Button.css";
+export type ButtonVariant = "primary" | "secondary" | "validated" | "danger" | "ghost" | "ghost-reverse";
+export declare const Button: import("react").ForwardRefExoticComponent<{
+    variant?: ButtonVariant;
+    small?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    children?: ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Button/Button.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Button/Button.scss";
-import { getComponentClassName } from "../utilities";
-export const Button = ({ children, classModifier, className, ...args }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-btn");
-    return (_jsx("button", { className: componentClassName, type: "button", ...args, children: children }));
-};
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import classNames from "classnames";
+import "@axa-fr/design-system-slash-css/dist/Button/Button.css";
+const DEFAULT_CLASS_NAME = "af-btn";
+export const Button = forwardRef(({ variant = "primary", small, leftIcon, rightIcon, className, children, ...props }, ref) => (_jsxs("button", { type: "button", className: classNames(DEFAULT_CLASS_NAME, variant !== "primary" && `${DEFAULT_CLASS_NAME}--${variant}`, small && `${DEFAULT_CLASS_NAME}--small`, className), ...props, ref: ref, children: [leftIcon, children, rightIcon] })));
+Button.displayName = "Button";

package/dist/CardData/CardData.d.ts

@@ -0,0 +1,15 @@
+import React, { PropsWithChildren } from "react";
+import "@axa-fr/design-system-slash-css/dist/CardData/CardData.css";
+export type CardDataVariant = "error" | "warning" | "information" | "success" | "default" | "dark" | "gray" | "purple";
+type CardDataProps = {
+    title: React.ReactNode;
+    subTitle?: React.ReactNode;
+    description?: React.ReactNode;
+    icon: string;
+    variant?: CardDataVariant;
+    contentFitAllSize?: boolean;
+    contentRight?: React.ReactNode;
+    withDivider?: boolean;
+};
+export declare const CardData: ({ title, subTitle, description, icon, variant, contentFitAllSize, contentRight, children, withDivider, }: PropsWithChildren<CardDataProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CardData/CardData.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { CardDataHeader } from "./CardDataHeader";
+import "@axa-fr/design-system-slash-css/dist/CardData/CardData.css";
+const defaultClassName = "af-card-data";
+export const CardData = ({ title, subTitle, description, icon, variant = "default", contentFitAllSize = false, contentRight, children, withDivider = true, }) => (_jsxs("div", { className: defaultClassName, children: [_jsx(CardDataHeader, { title: title, subTitle: subTitle, description: description, icon: icon, variant: variant, contentRight: contentRight, withDivider: withDivider }), _jsx("section", { className: classNames({ [`${defaultClassName}-content--max-size`]: contentFitAllSize }, { [`${defaultClassName}-content`]: !contentFitAllSize }), children: children })] }));

package/dist/CardData/CardDataHeader.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "@axa-fr/design-system-slash-css/dist/CardData/CardData.css";
+import { CardDataVariant } from "./CardData";
+type CardDataHeaderProps = {
+    title: React.ReactNode;
+    subTitle?: React.ReactNode;
+    description?: React.ReactNode;
+    icon: string;
+    variant?: CardDataVariant;
+    contentRight?: React.ReactNode;
+    withDivider?: boolean;
+};
+export declare const CardDataHeader: ({ title, subTitle, description, icon, variant, contentRight, withDivider, }: CardDataHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CardData/CardDataHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/CardData/CardData.css";
+import classNames from "classnames";
+import { Svg } from "../Svg";
+import { Divider } from "../Divider/Divider";
+import { Title } from "../Title/Title";
+const defaultClassName = "af-card-data-header";
+const iconDefaultClassName = `${defaultClassName}-icon`;
+export const CardDataHeader = ({ title, subTitle, description, icon, variant, contentRight, withDivider, }) => (_jsxs(_Fragment, { children: [_jsxs("header", { className: defaultClassName, children: [_jsx("span", { className: classNames(iconDefaultClassName, variant !== "default" ? `${iconDefaultClassName}--${variant}` : null), children: _jsx(Svg, { src: icon }) }), _jsxs(Title, { heading: "h3", children: [title, subTitle ? (_jsx("span", { className: `${defaultClassName}-subtitle`, children: subTitle })) : null, description ? (_jsx("span", { className: `${defaultClassName}-description`, children: description })) : null] }), contentRight ? (_jsx("span", { className: `${defaultClassName}-rightcontent`, children: contentRight })) : null] }), withDivider ? _jsx(Divider, {}) : null] }));

package/dist/Divider/Divider.d.ts

@@ -1,7 +1,7 @@
 import "@axa-fr/design-system-slash-css/dist/Divider/Divider.css";
-type DividerProps = {
+import { ComponentProps } from "react";
+type DividerProps = ComponentProps<"hr"> & {
     mode?: "horizontal" | "vertical";
-    classModifier?: string;
 };
-export declare const Divider: ({ mode, classModifier, }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Divider: ({ mode, className, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Divider/Divider.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import "@axa-fr/design-system-slash-css/dist/Divider/Divider.css";
-export const Divider = ({ mode = "horizontal", classModifier, }) => {
-    const componentClassName = classnames("af-divider", classModifier, {
+export const Divider = ({ mode = "horizontal", className, ...props }) => {
+    const componentClassName = classnames("af-divider", {
         "af-divider--horizontal": mode === "horizontal",
         "af-divider--vertical": mode === "vertical",
-    });
-    return _jsx("hr", { className: componentClassName });
+    }, className);
+    return _jsx("hr", { className: componentClassName, ...props });
 };

package/dist/Form/Checkbox/CheckboxInput.js

@@ -5,7 +5,7 @@ import { Checkbox } from "./Checkbox";
 import { CheckboxModes } from "./CheckboxModes";
 const CheckboxInput = forwardRef(({ label, mode = "default", options, ...otherProps }, inputRef) => {
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, labelPosition: mode === CheckboxModes.classic ? "top" : "center", roleContainer: "group", ...otherProps, renderInput: ({ classModifier, id, ariaInvalid, errorId, ...props }) => {
+    return (_jsx(Field, { label: label, labelPosition: mode === CheckboxModes.classic ? "top" : "center", roleContainer: "group", classNameSuffix: "checkbox-container", ...otherProps, renderInput: ({ classModifier, id, ariaInvalid, errorId, ...props }) => {
             return (_jsx(Checkbox, { id: id, mode: mode, options: newOptions, classModifier: ariaInvalid ? `${classModifier} error` : classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }));
         } }));
 });

package/dist/Form/File/File.js

@@ -55,6 +55,6 @@ const File = ({ className, classModifier, id, name, disabled, onChange, multiple
         disabled,
     });
     const componentClassName = getComponentClassName(className, classModifier, "af-form__file-input");
-    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { ...getRootProps({ className: "drop-box" }), children: [_jsx("input", { ...getInputProps({ id, name, readOnly, ...otherProps }) }), _jsx("div", { children: placeholder })] }), _jsxs(Button, { type: "button", className: "af-btn", classModifier: "file hasIconLeft", onClick: open, disabled: disabled, children: [_jsx("i", { className: `glyphicon glyphicon-${icon}` }), " ", label] })] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { ...getRootProps({ className: "drop-box" }), children: [_jsx("input", { ...getInputProps({ id, name, readOnly, ...otherProps }) }), _jsx("div", { children: placeholder })] }), _jsx(Button, { className: "af-btn--file", leftIcon: _jsx("i", { className: `glyphicon glyphicon-${icon}` }), onClick: open, disabled: disabled, children: label })] }));
 };
 export { File };

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] })) : null] }) })));
+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

@@ -1,15 +1,38 @@
 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[];
 };

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

@@ -5,9 +5,10 @@ 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: defaultClassName, children: _jsx("ul", { children: items.map((item) => {
+    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,
@@ -15,6 +16,6 @@ export const AnchorNavBar = ({ items }) => {
                 }
                 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,
-                        }), children: [item.name, item.externalLink ? (_jsx(Svg, { role: "presentation", src: externalLinkIcon, className: `${defaultClassName}-external-link-svg` })) : null] }) }, `nav-item-${item.name}`));
+                        }), 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.js

@@ -1,4 +1,4 @@
-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";
@@ -10,8 +10,8 @@ const defaultClassName = "af-title-bar";
 const HeaderTitle = ({ children, classModifier, className, isSticky = true, contentLeft, contentRight, subtitle, title, toggleMenu, anchorNavBarItems, }) => {
     const componentClassName = getComponentClassName(className, getClassModifier(classModifier, isSticky), defaultClassName);
     const isAnchorNavBarPresent = anchorNavBarItems && anchorNavBarItems.length > 0;
-    return (_jsxs("div", { className: classNames(componentClassName, {
-            [`${defaultClassName}__shadow`]: isAnchorNavBarPresent,
-        }), 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("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] }));
+    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.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.css";
 export type TInfo = {
     definition: ReactNode;
     id?: string;

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import infoIcon from "@material-symbols/svg-400/outlined/info-fill.svg";
 import { Fragment } from "react";
 import { getComponentClassName } from "../../../utilities";
 import { generateId } from "../../../utilities/helpers/generateId";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.css";
+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/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/User.d.ts

@@ -1,17 +1,59 @@
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/User/User.css";
 import { MouseEvent, ReactNode } from "react";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/User/User.scss";
 type Props = {
+    /**
+     * User's name
+     */
+    name: string;
+    /**
+     * User's profile or role, optional
+     */
+    profile?: string;
+    /**
+     * Children elements to be rendered next to the user's name and role
+     */
     children?: ReactNode;
+    /**
+     * Class modifier to apply additional styles\
+     * @example
+     * ```tsx
+     * <User classModifier="custom-class" />
+     * ```
+     * This will apply the class `af-info-user--custom-class` to the component.
+     */
     classModifier?: string;
+    /**
+     * classNames to override completely the component's style
+     */
     className?: string;
+    /**
+     * URL to navigate to when the user name is clicked
+     * If provided, the user name will be wrapped in an anchor tag.
+     * If not provided, the user name will be displayed as plain text.
+     */
     href?: string;
-    name: string;
+    /**
+     * Function to call when the user name link is clicked
+     * @param action - Contains the event and optionally the path
+     */
     onClick?: (action: {
         path?: string;
         event: MouseEvent<HTMLAnchorElement>;
     }) => void;
+    /**
+     * Optional path to be used in the onClick function
+     * @example
+     * ```tsx
+     * <User onClick={({ path }) => console.log(path)} path="/user-profile" />
+     * ```
+     * This will log `/user-profile` when the user name link is clicked.
+     */
     path?: string;
-    profile?: string;
+    /**
+     * Title for the user link, defaults to "Voir mon profil"
+     * This is used as the `title` attribute for the anchor tag if `href` is provided.
+     * It provides additional context for screen readers and tooltips.
+     */
     title?: string;
 };
 declare const User: ({ children, classModifier, className, href, name, path, profile, onClick, title, }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InnerUser } from "./InnerUser";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/User/User.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/User/User.css";
 import { getComponentClassName } from "../../../utilities";
+import { InnerUser } from "./InnerUser";
 const defaultClassName = "af-info-user";
 const User = ({ children, classModifier, className, href, name, path, profile, onClick, title = "Voir mon profil", }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);

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/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, classModifier: "success", 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/Steps/VerticalStep.d.ts

@@ -2,15 +2,47 @@ import { ReactNode } from "react";
 import type { VerticalStepMode } from "./types";
 import "@axa-fr/design-system-slash-css/dist/Steps/VerticalStep.css";
 type Props = {
+    /**
+     * title - The title of the step.
+     */
     title: string;
+    /**
+     * id - The id of the step, used for accessibility.
+     * It should be unique within the document.
+     */
     id: string;
+    /**
+     * stepMode - The mode of the step, can be "edited", "validated", or "locked".
+     */
     stepMode: VerticalStepMode;
+    /**
+     * onEdit - The function to call when the edit button is clicked.
+     */
     onEdit: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * form - The content of the form to display when the step is in "edited" mode.
+     */
     form: ReactNode;
+    /**
+     * restitution - The content to display when the step is in "validated" mode.
+     */
     restitution: ReactNode;
+    /**
+     * editButtonLabel - The label of the edit button.
+     */
     editButtonLabel?: string;
+    /**
+     * editButtonAriaLabel - The aria-label of the edit button.
+     */
     editButtonAriaLabel?: string;
+    /**
+     * showRestitution - Whether to show the restitution content when the step is validated.
+     */
     showRestitution?: boolean;
+    /**
+     * contentRight - Additional content to display on the right side of the title.
+     */
+    contentRight?: string;
 };
-export declare const VerticalStep: ({ title, id, stepMode, editButtonLabel, editButtonAriaLabel, onEdit, form, restitution, showRestitution, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalStep: ({ title, id, stepMode, editButtonLabel, editButtonAriaLabel, onEdit, form, restitution, showRestitution, contentRight, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Steps/VerticalStep.js

@@ -8,7 +8,7 @@ import { Svg } from "../Svg";
 import "@axa-fr/design-system-slash-css/dist/Steps/VerticalStep.css";
 import { Button } from "../Button/Button";
 const defaultClassName = "af-vertical-step";
-export const VerticalStep = ({ title, id, stepMode, editButtonLabel = "Modifier", editButtonAriaLabel = `Modifier l'étape ${title}`, onEdit, form, restitution, showRestitution = true, }) => {
+export const VerticalStep = ({ title, id, stepMode, editButtonLabel = "Modifier", editButtonAriaLabel = `Modifier l'étape ${title}`, onEdit, form, restitution, showRestitution = true, contentRight, }) => {
     const isStepInEdition = stepMode === "edited";
     const isStepValidated = stepMode === "validated";
     const isStepLocked = stepMode === "locked";
@@ -18,5 +18,5 @@ export const VerticalStep = ({ title, id, stepMode, editButtonLabel = "Modifier"
                     [`${defaultClassName}-icon--validated`]: isStepValidated,
                     [`${defaultClassName}-icon--locked`]: isStepLocked,
                     [`${defaultClassName}-icon--edited`]: isStepInEdition,
-                }), children: [isStepValidated ? _jsx(Svg, { role: "presentation", src: check }) : null, isStepLocked ? _jsx(Svg, { role: "presentation", src: lock }) : null, isStepInEdition ? _jsx(Svg, { role: "presentation", src: edit }) : null] }), _jsx(Title, { className: classNames("af-title", `${defaultClassName}-title`), id: id, contentLeft: isStepValidated ? (_jsxs(Button, { "aria-label": editButtonAriaLabel, onClick: onEdit, className: "af-vertical-step-title-button", children: [_jsx(Svg, { role: "presentation", src: edit }), editButtonLabel] })) : undefined, children: title }), isStepInEdition ? _jsx("section", { children: form }) : null, isStepValidated && showRestitution ? (_jsx("section", { children: restitution })) : null, isStepInEdition ? (_jsx("div", { className: classNames(`${defaultClassName}-icon ${defaultClassName}-icon--lastIcon`), children: _jsx(Svg, { role: "presentation", src: check }) })) : null] }));
+                }), children: [isStepValidated ? _jsx(Svg, { role: "presentation", src: check }) : null, isStepLocked ? _jsx(Svg, { role: "presentation", src: lock }) : null, isStepInEdition ? _jsx(Svg, { role: "presentation", src: edit }) : null] }), _jsx(Title, { id: id, contentLeft: isStepValidated ? (_jsxs(Button, { "aria-label": editButtonAriaLabel, onClick: onEdit, className: "af-vertical-step-title-button", children: [_jsx(Svg, { role: "presentation", src: edit }), editButtonLabel] })) : undefined, contentRight: contentRight, children: title }), isStepInEdition ? _jsx("section", { children: form }) : null, isStepValidated && showRestitution ? (_jsx("section", { children: restitution })) : null, isStepInEdition ? (_jsx("div", { className: classNames(`${defaultClassName}-icon ${defaultClassName}-icon--lastIcon`), children: _jsx(Svg, { role: "presentation", src: check }) })) : null] }));
 };

package/dist/Table/Pagination/Items.d.ts

@@ -7,7 +7,7 @@ export type Props = {
      */
     displayLabel?: string;
     /**
-     * Text displayed after the per-page select
+     * Text displayed after the per-page select and used in page selection links label
      */
     elementsLabel?: string;
     /**

package/dist/Table/Pagination/Li.d.ts

@@ -2,9 +2,10 @@ type LiProps = {
     isVisible?: boolean;
     active?: boolean;
     value: number;
+    pageLinkLabel: string;
     onChange: (e: {
         value: number;
     }) => void;
 };
-declare const Li: ({ isVisible, active, value, ...props }: LiProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Li: ({ isVisible, active, value, pageLinkLabel, onChange }: LiProps) => import("react/jsx-runtime").JSX.Element | null;
 export { Li };

package/dist/Table/Pagination/Li.js

@@ -5,10 +5,10 @@ const onClick = ({ onChange, value }) => (event) => {
         value: Number(value),
     });
 };
-const Li = ({ isVisible, active, value, ...props }) => {
+const Li = ({ isVisible, active, value, pageLinkLabel, onChange }) => {
     if (!isVisible) {
         return null;
     }
-    return (_jsx("li", { className: "af-pager__item", children: _jsx("a", { "aria-current": active ? "page" : undefined, className: "af-pager__item-link", href: "/#", onClick: onClick({ ...props, value }), children: _jsx("span", { children: value }) }) }));
+    return (_jsx("li", { className: "af-pager__item", children: _jsx("a", { "aria-current": active ? "page" : undefined, className: "af-pager__item-link", href: "/#", "aria-label": `Page ${value} des ${pageLinkLabel}`, onClick: onClick({ onChange, value }), children: _jsx("span", { children: value }) }) }));
 };
 export { Li };

package/dist/Table/Pagination/Pager.d.ts

@@ -27,11 +27,15 @@ export type PagerComponentProps = Pick<ComponentPropsWithoutRef<typeof Paginatio
      * Label for the next button
      */
     nextLabel?: string;
+    /**
+     * Label for page links and select
+     */
+    elementsLabel?: string;
     /**
      * Label for text betweeen current page a total number of pages. Only used in "light" mode
      * @default "sur"
      */
     ofLabel?: string;
 };
-declare const Pager: ({ className, classModifier, numberPages, currentPage, onChange, mode, previousLabel, nextLabel, ofLabel, }: PagerComponentProps) => import("react/jsx-runtime").JSX.Element;
+declare const Pager: ({ className, classModifier, numberPages, currentPage, onChange, mode, previousLabel, nextLabel, elementsLabel, ofLabel, }: PagerComponentProps) => import("react/jsx-runtime").JSX.Element;
 export { Pager };

package/dist/Table/Pagination/Pager.js

@@ -4,13 +4,13 @@ import { getComponentClassName } from "../..";
 import { Li } from "./Li";
 import { LiPoint } from "./LiPoint";
 import { PaginationButton } from "./PaginationButton";
-const Pager = ({ className, classModifier, numberPages = 1, currentPage = 1, onChange, mode = "default", previousLabel = "« Précédent", nextLabel = "Suivant »", ofLabel = "sur", }) => {
+const Pager = ({ className, classModifier, numberPages = 1, currentPage = 1, onChange, mode = "default", previousLabel = "« Précédent", nextLabel = "Suivant »", elementsLabel = "éléments", ofLabel = "sur", }) => {
     const hasNext = currentPage < numberPages;
     const hasPrevious = currentPage > 1;
     const componentClassName = getComponentClassName(className, classModifier, "af-pager");
     if (mode === "light") {
-        return (_jsx("nav", { className: componentClassName, children: _jsxs("ul", { className: "af-pager__pagination", children: [_jsx(PaginationButton, { onChange: onChange, value: currentPage - 1, active: hasPrevious, isVisible: true, children: _jsx("i", { className: "glyphicon glyphicon-chevron-left", "aria-hidden": "true" }) }), _jsxs(LiPoint, { isVisible: true, children: [currentPage, " ", ofLabel, " ", numberPages] }), _jsx(PaginationButton, { onChange: onChange, value: currentPage + 1, active: hasNext, isVisible: true, children: _jsx("i", { className: "glyphicon glyphicon-chevron-right", "aria-hidden": "true" }) })] }) }));
+        return (_jsx("nav", { className: componentClassName, children: _jsxs("ul", { className: "af-pager__pagination", children: [_jsx(PaginationButton, { onChange: onChange, value: currentPage - 1, active: hasPrevious, isVisible: true, ariaLabel: `Page précédente des ${elementsLabel}`, children: _jsx("i", { className: "glyphicon glyphicon-chevron-left", "aria-hidden": "true" }) }), _jsxs(LiPoint, { isVisible: true, children: [currentPage, " ", ofLabel, " ", numberPages] }), _jsx(PaginationButton, { onChange: onChange, value: currentPage + 1, active: hasNext, isVisible: true, ariaLabel: `Page suivante des ${elementsLabel}`, children: _jsx("i", { className: "glyphicon glyphicon-chevron-right", "aria-hidden": "true" }) })] }) }));
     }
-    return (_jsx("nav", { className: componentClassName, children: _jsxs("ul", { className: "af-pager__pagination", children: [_jsx(PaginationButton, { onChange: onChange, value: currentPage - 1, active: hasPrevious, isVisible: true, children: previousLabel }), _jsx(Li, { onChange: onChange, value: 1, isVisible: numberPages > 1 && currentPage > 1 }), _jsx(LiPoint, { isVisible: currentPage > 3, children: "..." }), _jsx(Li, { onChange: onChange, value: currentPage - 1, isVisible: numberPages > 2 && currentPage > 2 }), _jsx(Li, { onChange: onChange, value: currentPage, active: true, isVisible: numberPages > 0 }), _jsx(Li, { onChange: onChange, value: currentPage + 1, isVisible: currentPage < numberPages - 1 }), _jsx(LiPoint, { isVisible: currentPage < numberPages - 2, children: "..." }), _jsx(Li, { onChange: onChange, value: numberPages, isVisible: currentPage < numberPages }), _jsx(PaginationButton, { onChange: onChange, value: currentPage + 1, active: hasNext, isVisible: true, children: nextLabel })] }) }));
+    return (_jsx("nav", { className: componentClassName, children: _jsxs("ul", { className: "af-pager__pagination", children: [_jsx(PaginationButton, { onChange: onChange, value: currentPage - 1, active: hasPrevious, isVisible: true, ariaLabel: `Page précédente des ${elementsLabel}`, children: previousLabel }), _jsx(Li, { onChange: onChange, value: 1, isVisible: numberPages > 1 && currentPage > 1, pageLinkLabel: elementsLabel }), _jsx(LiPoint, { isVisible: currentPage > 3, children: "..." }), _jsx(Li, { onChange: onChange, value: currentPage - 1, isVisible: numberPages > 2 && currentPage > 2, pageLinkLabel: elementsLabel }), _jsx(Li, { onChange: onChange, value: currentPage, active: true, isVisible: numberPages > 0, pageLinkLabel: elementsLabel }), _jsx(Li, { onChange: onChange, value: currentPage + 1, isVisible: currentPage < numberPages - 1, pageLinkLabel: elementsLabel }), _jsx(LiPoint, { isVisible: currentPage < numberPages - 2, children: "..." }), _jsx(Li, { onChange: onChange, value: numberPages, isVisible: currentPage < numberPages, pageLinkLabel: elementsLabel }), _jsx(PaginationButton, { onChange: onChange, value: currentPage + 1, active: hasNext, isVisible: true, ariaLabel: `Page suivante des ${elementsLabel}`, children: nextLabel })] }) }));
 };
 export { Pager };

package/dist/Table/Pagination/PaginationButton.d.ts

@@ -7,6 +7,7 @@ type PaginationButtonProps = {
     onChange: (e: {
         value: number;
     }) => void;
+    ariaLabel: string;
 };
-declare const PaginationButton: ({ isVisible, active, children, value, onChange, }: PaginationButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const PaginationButton: ({ isVisible, active, children, value, onChange, ariaLabel, }: PaginationButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 export { PaginationButton };

package/dist/Table/Pagination/PaginationButton.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const PaginationButton = ({ isVisible, active, children, value, onChange, }) => {
+const PaginationButton = ({ isVisible, active, children, value, onChange, ariaLabel, }) => {
     if (!isVisible) {
         return null;
     }
     if (active) {
-        return (_jsx("li", { className: "af-pager__item", children: _jsx("a", { className: "af-pager__item-link", href: "/#", role: "button", onClick: (e) => {
+        return (_jsx("li", { className: "af-pager__item", children: _jsx("a", { className: "af-pager__item-link", href: "/#", role: "button", "aria-label": ariaLabel, onClick: (e) => {
                     e.preventDefault();
                     onChange({ value });
                 }, children: children }) }));

package/dist/Table/Pagination/Paging.d.ts

@@ -9,6 +9,7 @@ type OnChangePager = (e: {
 }) => void;
 export type Props = Omit<PagingComponentProps, "onChange"> & {
     onChange?: OnChangePager;
+    selectPageSizeLabel?: string;
 };
-declare const Paging: ({ className, classModifier, currentPage, displayLabel, selectAriaLabel, elementsLabel, id, mode, nextLabel, numberItems, numberPages, ofLabel, previousLabel, items, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Paging: ({ className, classModifier, currentPage, displayLabel, elementsLabel, selectPageSizeLabel, id, mode, nextLabel, numberItems, numberPages, ofLabel, previousLabel, items, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Paging };

package/dist/Table/Pagination/Paging.js

@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { getComponentClassName } from "../..";
 import { Items } from "./Items";
 import { Pager } from "./Pager";
-const Paging = ({ className, classModifier, currentPage = 1, displayLabel, selectAriaLabel, elementsLabel, id, mode, nextLabel, numberItems = 10, numberPages, ofLabel, previousLabel, items, onChange, }) => {
+const Paging = ({ className, classModifier, currentPage = 1, displayLabel, elementsLabel, selectPageSizeLabel, id, mode, nextLabel, numberItems = 10, numberPages, ofLabel, previousLabel, items, onChange, }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-paging");
     const handleChangeItems = useCallback((e) => onChange &&
         onChange({
@@ -16,6 +16,6 @@ const Paging = ({ className, classModifier, currentPage = 1, displayLabel, selec
             numberItems,
             page: e.value,
         }), [numberItems, onChange]);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { className: "af-paging__limit", children: _jsx(Items, { onChange: handleChangeItems, numberItems: numberItems, id: id, displayLabel: displayLabel, selectAriaLabel: selectAriaLabel, elementsLabel: elementsLabel, items: items }) }), _jsx("div", { className: "af-paging__pager", children: _jsx(Pager, { onChange: handleChangePager, currentPage: currentPage, numberPages: numberPages, previousLabel: previousLabel, nextLabel: nextLabel, ofLabel: ofLabel, mode: mode }) })] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { className: "af-paging__limit", children: _jsx(Items, { onChange: handleChangeItems, numberItems: numberItems, id: id, displayLabel: displayLabel, selectAriaLabel: selectPageSizeLabel, elementsLabel: elementsLabel, items: items }) }), _jsx("div", { className: "af-paging__pager", children: _jsx(Pager, { onChange: handleChangePager, currentPage: currentPage, numberPages: numberPages, previousLabel: previousLabel, nextLabel: nextLabel, elementsLabel: elementsLabel, ofLabel: ofLabel, mode: mode }) })] }));
 };
 export { Paging };

package/dist/Tag/Tag.d.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-slash-css/dist/Tag/Tag.scss";
+type TagModifier = "success" | "information" | "warning" | "error" | "default" | "dark" | "purple" | "gray";
+/**
+ * @deprecated instead use warning
+ */
+type TagModifierDecrepated = "danger" | "info";
+type TagProps = ComponentPropsWithRef<"span"> & {
+    classModifier?: `${TagModifier | TagModifierDecrepated}` | string;
+    disabled?: boolean;
+};
+/**
+ * Tag component to display a label with various styles.
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Tag classModifier="success">Success Tag</Tag>
+ *
+ * @param {object} props - The properties object.
+ * @param {React.ReactNode} props.children - The content to be displayed inside the tag.
+ * @param {string} [props.className] - Additional class names to apply to the tag.
+ * @param {string} [props.classModifier] - Modifier class to apply specific styles. Note: "danger" is deprecated, use "warning" instead. "info" is deprecated, use "information" instead
+ * @param {boolean} [props.disabled] - If true, the tag will be disabled.
+ * @param {React.Ref<HTMLSpanElement>} ref - The ref to the span element.
+ * @returns {JSX.Element} The rendered Tag component.
+ */
+export declare const Tag: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TagProps>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/Tag/Tag.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getComponentClassName } from "../utilities";
+import "@axa-fr/design-system-slash-css/dist/Tag/Tag.scss";
+/**
+ * Tag component to display a label with various styles.
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Tag classModifier="success">Success Tag</Tag>
+ *
+ * @param {object} props - The properties object.
+ * @param {React.ReactNode} props.children - The content to be displayed inside the tag.
+ * @param {string} [props.className] - Additional class names to apply to the tag.
+ * @param {string} [props.classModifier] - Modifier class to apply specific styles. Note: "danger" is deprecated, use "warning" instead. "info" is deprecated, use "information" instead
+ * @param {boolean} [props.disabled] - If true, the tag will be disabled.
+ * @param {React.Ref<HTMLSpanElement>} ref - The ref to the span element.
+ * @returns {JSX.Element} The rendered Tag component.
+ */
+export const Tag = forwardRef(({ children, className, classModifier = "default", ...otherProps }, ref) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-tag");
+    // Kept for backward compatibility. May be removed in a future version
+    const badgeClassName = getComponentClassName(className, classModifier, "af-badge");
+    return (_jsx("span", { ref: ref, className: `${componentClassName} ${badgeClassName}`, ...otherProps, children: children }));
+});
+Tag.displayName = "Tag";

package/dist/Title/Title.d.ts

@@ -1,11 +1,11 @@
 import "@axa-fr/design-system-slash-css/dist/Title/Title.scss";
-import { ComponentPropsWithRef, PropsWithChildren, ReactElement } from "react";
+import { ComponentPropsWithRef, PropsWithChildren, ReactElement, ReactNode } from "react";
 type Headings = "h2" | "h3" | "h4";
 type TitleProps = ComponentPropsWithRef<"h2"> & {
     classModifier?: string;
     heading?: Headings;
     contentLeft?: ReactElement;
-    contentRight?: ReactElement;
+    contentRight?: ReactNode;
 };
 export declare const Title: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TitleProps>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
 export {};

package/dist/index.d.ts

@@ -2,10 +2,18 @@ import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
 import "@fontsource/source-sans-pro";
+import "@fontsource/source-sans-pro/700.css";
 import { Message } from "./Messages/Message";
+import { Tag } from "./Tag/Tag";
 export { Action } from "./Action/Action";
-export { Badge } from "./Badge/Badge";
+/** @deprecated Use `Tag` instead. */
+declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").PropsWithChildren<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+    classModifier?: `${("error" | "warning" | "success" | "information" | "default" | "dark" | "purple" | "gray") | ("info" | "danger")}` | string;
+    disabled?: boolean;
+}>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export { Badge, Tag };
 export { Button } from "./Button/Button";
+export type { ButtonVariant } from "./Button/Button";
 export { Card } from "./Card/Card";
 export { Divider } from "./Divider/Divider";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
@@ -24,6 +32,7 @@ export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
 export { Footer } from "./Layout/Footer";
 export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { MainContainer } from "./Layout/MainContainer/MainContainer";
 export { Link, type LinkProps } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
@@ -45,3 +54,5 @@ export * from "./Table";
 export { Alert, Message };
 export { HelpButton } from "./HelpButton";
 export { Loader } from "./Loader/Loader";
+export { CardData } from "./CardData/CardData";
+export type { CardDataVariant } from "./CardData/CardData";

package/dist/index.js

@@ -2,9 +2,13 @@ import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
 import "@fontsource/source-sans-pro";
+import "@fontsource/source-sans-pro/700.css";
 import { Message } from "./Messages/Message";
+import { Tag } from "./Tag/Tag";
 export { Action } from "./Action/Action";
-export { Badge } from "./Badge/Badge";
+/** @deprecated Use `Tag` instead. */
+const Badge = Tag;
+export { Badge, Tag };
 export { Button } from "./Button/Button";
 export { Card } from "./Card/Card";
 export { Divider } from "./Divider/Divider";
@@ -24,6 +28,7 @@ export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
 export { Footer } from "./Layout/Footer";
 export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { MainContainer } from "./Layout/MainContainer/MainContainer";
 export { Link } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
@@ -44,3 +49,4 @@ export * from "./Table";
 export { Alert, Message };
 export { HelpButton } from "./HelpButton";
 export { Loader } from "./Loader/Loader";
+export { CardData } from "./CardData/CardData";

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

@@ -1,3 +1,11 @@
+/**
+ * Generates a component class name string based on provided class names and modifiers.
+ *
+ * @param {string} [className] - The base class name.
+ * @param {string} [classModifier] - A space-separated string of class modifiers.
+ * @param {string} [defaultClassName] - The default class name to use if className is not provided.
+ * @returns {string} The generated class name string.
+ */
 export declare const getComponentClassName: (className?: string, classModifier?: string, defaultClassName?: string) => string;
 type getComponentClassNameWithUserClassnameParams = {
     userClassName?: string;

package/dist/utilities/helpers/getComponentClassName.js

@@ -11,6 +11,14 @@ const listClassModifier = (classModifier) => {
     }
     return classModifier.split(" ");
 };
+/**
+ * Generates a component class name string based on provided class names and modifiers.
+ *
+ * @param {string} [className] - The base class name.
+ * @param {string} [classModifier] - A space-separated string of class modifiers.
+ * @param {string} [defaultClassName] - The default class name to use if className is not provided.
+ * @returns {string} The generated class name string.
+ */
 export const getComponentClassName = (className, classModifier, defaultClassName) => {
     const classNameToUse = className || defaultClassName;
     // Fail fast, when no className or defaultClassName we don't want to loop on modifier

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.1-alpha.99",
+  "version": "2.0.0-alpha.1",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.2.1-alpha.99",
+    "@axa-fr/design-system-slash-css": "2.0.0-alpha.1",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },

package/dist/Badge/Badge.d.ts

@@ -1,8 +0,0 @@
-import { ComponentPropsWithRef, PropsWithChildren } from "react";
-import "@axa-fr/design-system-slash-css/dist/Badge/Badge.scss";
-type BadgeProps = ComponentPropsWithRef<"span"> & {
-    classModifier?: string;
-    disabled?: boolean;
-};
-export declare const Badge: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<BadgeProps>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export {};

package/dist/Badge/Badge.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { getComponentClassName } from "../utilities";
-import "@axa-fr/design-system-slash-css/dist/Badge/Badge.scss";
-export const Badge = forwardRef(({ children, className, classModifier, ...otherProps }, ref) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-badge");
-    return (_jsx("span", { ref: ref, className: componentClassName, ...otherProps, children: children }));
-});
-Badge.displayName = "Badge";