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

package/dist/ModalAgent/Modal.js

@@ -1,8 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { getComponentClassName } from "..";
-const Modal = forwardRef(({ className, title = "", onOutsideTap, children, classModifier, ...props }, ref) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-modal");
+const Modal = forwardRef(({ className, title = "", onOutsideTap, children, classModifier, size, ...props }, ref) => {
+    // If size is set to 'lg' or 'sm', use it as the classModifier, otherwise use the provided classModifier
+    let effectiveClassModifier;
+    if (size) {
+        if (classModifier && classModifier !== "lg" && classModifier !== "sm") {
+            effectiveClassModifier = `${size} ${classModifier}`;
+        }
+        else {
+            effectiveClassModifier = size;
+        }
+    }
+    else {
+        effectiveClassModifier = classModifier;
+    }
+    const componentClassName = getComponentClassName(className, effectiveClassModifier, "af-modal");
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
     _jsx("dialog", { "aria-label": title, className: componentClassName, onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) }));

package/dist/ModalAgent/components/Header.d.ts

@@ -1,10 +1,30 @@
-import type { MouseEventHandler } from "react";
+import type { MouseEventHandler, ReactNode } from "react";
 export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-    className?: string;
-    onCancel: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Text displayed in the header.
+     * @deprecated Use `children` instead to allow for more flexible content.
+     */
     title?: string;
-    classModifier?: string;
+    /**
+     * Text displayed in the header, overrides `title` if both are set.
+     */
+    children?: ReactNode;
+    /**
+     * Callback function called when the close button is clicked.
+     */
+    onCancel: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Aria label for the close button, used for accessibility.
+     */
     closeButtonAriaLabel?: string;
+    /**
+     * Class modifier for the header. Can be used to apply custom styles.
+     */
+    classModifier?: string;
+    /**
+     * Prop to override the style of the header. Will totally remove the default styles.
+     */
+    className?: string;
 };
-declare const Header: ({ className, classModifier, title, closeButtonAriaLabel, onCancel, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ className, classModifier, title, closeButtonAriaLabel, onCancel, children, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export { Header };

package/dist/ModalAgent/components/Header.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../..";
-const Header = ({ className, classModifier, title, closeButtonAriaLabel = "Fermer la boite de dialogue", onCancel, ...props }) => {
+import closeIcon from "@material-symbols/svg-400/outlined/close.svg";
+import { getComponentClassName, Svg } from "../..";
+const Header = ({ className, classModifier, title, closeButtonAriaLabel = "Fermer la boite de dialogue", onCancel, children, ...props }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-modal__header");
-    return (_jsxs("header", { className: componentClassName, ...props, children: [_jsx("h4", { className: "af-modal__header-title", children: title }), _jsx("button", { className: "af-modal__header-close-btn", type: "button", "aria-label": closeButtonAriaLabel, onClick: onCancel, children: _jsx("span", { className: "glyphicon glyphicon-close", "aria-hidden": "true" }) })] }));
+    return (_jsxs("header", { className: componentClassName, ...props, children: [_jsx("h4", { className: "af-modal__header-title", children: children ?? title }), _jsx("button", { className: "af-modal__header-close-btn", type: "button", "aria-label": closeButtonAriaLabel, onClick: onCancel, children: _jsx(Svg, { src: closeIcon }) })] }));
 };
 export { Header };

package/dist/Popover/AnimatedPopover.js

@@ -14,5 +14,5 @@ export const AnimatedPopover = ({ placement, children, isOpen, target, className
         elements: { reference: referenceElement, floating: popperElement },
         middleware: [offset(12), arrow({ element: arrowRef })],
     });
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { ref: setReferenceElement, className: "af-popover__container-over", role: "presentation", children: target }), isOpen && (_jsxs("div", { ref: setPopperElement, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: floatingStyles, "data-popper-placement": placement, className: "af-popover__container-pop", children: [_jsx("div", { children: children }), _jsx(FloatingArrow, { ref: arrowRef, context: context, fill: "white" })] }))] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { ref: setReferenceElement, className: "af-popover__container-over", role: "presentation", children: target }), isOpen ? (_jsxs("div", { ref: setPopperElement, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: floatingStyles, "data-popper-placement": placement, className: "af-popover__container-pop", children: [_jsx("div", { children: children }), _jsx(FloatingArrow, { ref: arrowRef, context: context, fill: "white" })] })) : null] }));
 };

package/dist/Steps/StepBase.js

@@ -1,7 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "..";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import chevronSvg from "@material-symbols/svg-400/outlined/chevron_right.svg";
+import checkSvg from "@material-symbols/svg-400/outlined/check.svg";
+import { getComponentClassName, Svg } from "..";
 const StepBase = ({ children, id, title, className, classModifier }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-steps-list-step");
-    return (_jsx("li", { className: componentClassName, title: title, children: children }, id));
+    return (_jsxs("li", { className: componentClassName, title: title, children: [_jsx(Svg, { src: checkSvg }), children, _jsx(Svg, { src: chevronSvg })] }, id));
 };
 export { StepBase };

package/dist/Steps/VerticalStep.d.ts

@@ -0,0 +1,48 @@
+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, contentRight, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Steps/VerticalStep.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import edit from "@material-symbols/svg-400/sharp/edit-fill.svg";
+import check from "@material-symbols/svg-400/sharp/check.svg";
+import lock from "@material-symbols/svg-400/sharp/lock-fill.svg";
+import { Title } from "../Title/Title";
+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, contentRight, }) => {
+    const isStepInEdition = stepMode === "edited";
+    const isStepValidated = stepMode === "validated";
+    const isStepLocked = stepMode === "locked";
+    return (_jsxs("div", { className: classNames(defaultClassName, {
+            [`${defaultClassName}--edition`]: isStepInEdition,
+        }), children: [_jsxs("div", { className: classNames("af-vertical-step-icon", {
+                    [`${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, { 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/Steps/index.d.ts

@@ -2,3 +2,4 @@ import "@axa-fr/design-system-slash-css/dist/Steps/Steps.scss";
 export { Step } from "./Step";
 export { StepBase } from "./StepBase";
 export { Steps } from "./Steps";
+export { VerticalStep } from "./VerticalStep";

package/dist/Steps/index.js

@@ -2,3 +2,4 @@ import "@axa-fr/design-system-slash-css/dist/Steps/Steps.scss";
 export { Step } from "./Step";
 export { StepBase } from "./StepBase";
 export { Steps } from "./Steps";
+export { VerticalStep } from "./VerticalStep";

package/dist/Steps/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+export type CustomClickEvent = {
+    href: string;
+    number?: ReactNode;
+    id: string;
+    title: string;
+};
+export type VerticalStepMode = "edited" | "locked" | "validated";

package/dist/Steps/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Summary/index.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { Alert } from "../Alert/Alert";
-type SummaryProps = Omit<ComponentPropsWithoutRef<typeof Alert>, "title"> & {
+import { ReactNode } from "react";
+import { type MessageProps } from "../Messages/Message";
+type SummaryProps = Omit<MessageProps, "title"> & {
     title?: string;
     messages?: ReactNode[];
     isVisible?: boolean;

package/dist/Summary/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Alert } from "../Alert/Alert";
+import { Message } from "../Messages/Message";
 import { generateId } from "../utilities/helpers/generateId";
 export const Summary = ({ messages = [], isVisible = true, title = "Invalid form", classModifier = "error", ...args }) => {
     const messagesNotBlank = messages.filter((message) => Boolean(message));
     if (!messages || !isVisible || messagesNotBlank.length === 0) {
         return null;
     }
-    return (_jsx(Alert, { icon: "glyphicon glyphicon-warning-sign", title: title, classModifier: classModifier, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${generateId({ message })}`))) }) }));
+    const variant = classModifier === "danger" ? "warning" : classModifier;
+    return (_jsx(Message, { icon: "glyphicon glyphicon-warning-sign", title: title, variant: variant, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${generateId({ message })}`))) }) }));
 };

package/dist/Svg/Svg.js

@@ -46,5 +46,5 @@ export const Svg = ({ src, alt, width = 24, height = 24, ...props }) => {
     if (hasError) {
         return alt ? (_jsx("span", { ...props, children: alt })) : null;
     }
-    return _jsx("svg", { ref: rootRef, "data-src": src, ...props });
+    return _jsx("svg", { ref: rootRef, "data-src": src, role: "presentation", ...props });
 };

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

@@ -1,17 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
 const onClick = ({ onChange, value }) => (event) => {
     event.preventDefault();
     onChange({
         value: Number(value),
     });
 };
-const Li = ({ isVisible, active, value, ...props }) => {
+const Li = ({ isVisible, active, value, pageLinkLabel, onChange }) => {
     if (!isVisible) {
         return null;
     }
-    return (_jsx("li", { className: classNames("af-pager__item", {
-            "af-pager__item--active": active,
-        }), children: _jsx("a", { 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,20 @@ 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 { Alert } from "./Alert/Alert";
-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";
 export { Choice, ChoiceInput } from "./Form/Choice";
 export { LegacyField as Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
@@ -22,17 +32,25 @@ 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";
-export { Step, StepBase, Steps } from "./Steps";
+export { Step, StepBase, Steps, VerticalStep } from "./Steps";
 export { Summary } from "./Summary";
 export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";
 export { Title } from "./Title/Title";
 export { getComponentClassName } from "./utilities";
+/**
+ * @deprecated `Alert` has been renamed `Message` in order to comply with UX naming of components. Use `Message` instead.
+ * @see {@link Message}
+ */
+declare const Alert: ({ className, onClose, icon, title, children, classModifier, variant, closeButtonAriaLabel, }: import("react").PropsWithChildren<import("./Messages/Message").MessageProps>) => import("react/jsx-runtime").JSX.Element;
 export * from "./Accordion";
+export { type MessageProps, type MessageVariants } from "./Messages/Message";
 export * from "./Popover";
 export * from "./Table";
+export { Alert, Message };
 export { HelpButton } from "./HelpButton";
 export { Loader } from "./Loader/Loader";

package/dist/index.js

@@ -2,10 +2,16 @@ 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 { Alert } from "./Alert/Alert";
-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";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
 export { Choice, ChoiceInput } from "./Form/Choice";
 export { LegacyField as Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
@@ -22,17 +28,24 @@ 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";
-export { Step, StepBase, Steps } from "./Steps";
+export { Step, StepBase, Steps, VerticalStep } from "./Steps";
 export { Summary } from "./Summary";
 export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";
 export { Title } from "./Title/Title";
 export { getComponentClassName } from "./utilities";
+/**
+ * @deprecated `Alert` has been renamed `Message` in order to comply with UX naming of components. Use `Message` instead.
+ * @see {@link Message}
+ */
+const Alert = Message;
 export * from "./Accordion";
 export * from "./Popover";
 export * from "./Table";
+export { Alert, Message };
 export { HelpButton } from "./HelpButton";
 export { Loader } from "./Loader/Loader";

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

@@ -1 +1,16 @@
+/**
+ * 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;
+    classModifier?: string;
+    componentClassName: string;
+};
+export declare const getComponentClassNameWithUserClassname: ({ componentClassName, userClassName, classModifier, }: getComponentClassNameWithUserClassnameParams) => string;
+export {};

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
@@ -26,3 +34,17 @@ export const getComponentClassName = (className, classModifier, defaultClassName
     });
     return classNames(classNameToUse, modifiersObject);
 };
+export const getComponentClassNameWithUserClassname = ({ componentClassName, userClassName, classModifier, }) => {
+    // Fail fast, when no className or componentClassName we don't want to loop on modifier
+    if (!componentClassName) {
+        return "";
+    }
+    const classWithoutModifier = getLastClassName(componentClassName);
+    const modifiers = listClassModifier(classModifier);
+    const modifiersObject = modifiers
+        .filter((it) => /\S/.test(it))
+        .map((it) => {
+        return `${classWithoutModifier}--${it}`;
+    });
+    return classNames(componentClassName, modifiersObject, userClassName);
+};