@axa-fr/design-system-slash-react 1.2.1-alpha.8 → 1.2.1-alpha.84

package/dist/Form/core/{FieldForm.js → Deprecated/FieldForm.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useEffect, useRef, useState, } from "react";
-import { getComponentClassName } from "../../utilities";
-import { FormClassManager } from "./FormClassManager";
-import { MessageTypes } from "./MessageTypes";
+import { getComponentClassName } from "../../../utilities";
+import { FormClassManager } from "../FormClassManager";
+import { MessageTypes } from "../MessageTypes";
 const defaultClassName = "md-10";
 const INITIAL_STATE = {
     hasLostFocusOnce: false,
@@ -123,6 +123,11 @@ export const renderedChildren = ({ children, wrapper, message, messageType, }) =
         }),
     });
 });
+/**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * This was an internal component used to manage the state of the form fields.
+ * It is not recommended to use it directly in your code as it is not a public API.
+ */
 export const FieldForm = ({ children, message = "", messageType = MessageTypes.error, className = defaultClassName, classModifier = "", forceDisplayMessage = false, setStateMemoryFn = setStateMemory, onChangeByStateFn = onChangeByState, setStateOnBlurFn = setStateOnBlur, setStateOnFocusFn = setStateOnFocus, initialState = INITIAL_STATE, }) => {
     const [state, setState] = useState(initialState);
     const previousForceDisplayMessage = useRef(forceDisplayMessage);

package/dist/Form/core/{FieldInput.d.ts → Deprecated/FieldInput.d.ts}

@@ -5,6 +5,10 @@ type FieldProps = {
     classModifier?: string;
     children?: ReactNode;
 };
+/**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * This was an internal component and it is not recommended to use it directly in your code as it is not a public API.
+ */
 export declare const FieldInput: {
     ({ children, className, classModifier, isVisible, }: FieldProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;

package/dist/Form/core/{FieldInput.js → Deprecated/FieldInput.js}

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../../utilities";
+import { getComponentClassName } from "../../../utilities";
+/**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * This was an internal component and it is not recommended to use it directly in your code as it is not a public API.
+ */
 export const FieldInput = ({ children, className = "", classModifier = "", isVisible = true, }) => {
     if (!isVisible) {
         return null;

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

@@ -1,12 +1,24 @@
 import { type ReactNode } from "react";
 import { MessageTypes } from ".";
 type InputProps = {
+    /**
+     * The label of the input element.
+     */
     label: ReactNode;
-    children?: ReactNode;
+    /**
+     * The id of the input element. If not provided, a unique id will be generated.
+     */
     id?: string;
+    className?: string;
     classModifier?: string;
     classNameContainerLabel?: string;
     classNameContainerInput?: string;
+    /**
+     * Setting this to false will disable the rendering of the component
+     * @default true
+     * @deprecated You should handle the visibility of the component in your code
+     * instead of using this prop. This prop will be removed in a future version.
+     */
     isVisible?: boolean;
     roleContainer?: string;
     ariaLabelContainer?: string;
@@ -17,12 +29,52 @@ type InputProps = {
     required?: boolean;
     disabled?: boolean;
     helpMessage?: ReactNode;
-    errorId?: string;
-};
-export declare const Field: ({ classNameContainerInput, classNameContainerLabel, label, forceDisplayMessage, message, messageType, required, classModifier, children, disabled, helpMessage, id, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, errorId, renderInput, }: InputProps & {
+    /**
+     * Sets the position of the label relative to the input.
+     * Top will put the label at the top of the input group. This is useful for textarea for example.
+     * Center will put the label in the center of the input group, and is used for single line inputs in order to align the label and the input box.
+     * @default "center"
+     *
+     */
+    labelPosition?: "top" | "center";
+    /**
+     * suffix appended to the className of the div wrapping the input
+     * @deprecated We should rationalize the CSS for the components to avoid having to use different sufixes
+     * but it would be a breaking change to do so, so we keep it for now
+     * @example "textarea" will result in
+     * ```html
+     * <div class="af-form__textarea">
+     *  // ... input
+     * </div>
+     * ```
+     * @default "text"
+     */
+    classNameSuffix?: string;
     renderInput: (props: {
         id: string;
         classModifier: string;
-    }) => ReactNode;
-}) => import("react/jsx-runtime").JSX.Element | null;
+        errorId?: string;
+        ariaInvalid?: boolean;
+    } & Record<string, unknown>) => ReactNode;
+    /**
+     * Elements to be appended to the end of the input group, just before the 2 ending divs
+     * @example <Field appendChildren={<Button>Submit</Button>} renderinput={() => <span>hello</span>} />
+     * will result in
+     * ```html
+     * <div class="af-form__text">
+     *  <span>hello</span>
+     *  <Button>Submit</Button>
+     * </div>
+     * ```
+     * @optional
+     */
+    appendChildren?: ReactNode;
+};
+export type ConsumerFieldProps = Omit<InputProps, "renderInput" | "classNameSuffix" | "children"> & {
+    /**
+     * Element appended right to the input
+     */
+    rightElement?: ReactNode;
+};
+export declare const Field: ({ classNameContainerInput, classNameContainerLabel, className, label, forceDisplayMessage, message, messageType, required, classModifier, disabled, helpMessage, id, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, labelPosition, classNameSuffix, renderInput, appendChildren, ...otherProps }: InputProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/Form/core/Field.js

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

package/dist/Form/core/FormClassManager.js

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

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

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

package/dist/Form/core/HelpMessage.js

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

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

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

package/dist/Form/core/index.js

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

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

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/AnchorNavBar/AnchorNavBar.css";
+export type AnchorNavBarItem = {
+    name: string;
+    isActive?: boolean;
+    onClick?: () => void;
+    link?: string;
+    externalLink?: boolean;
+    render?: (props: {
+        className: string;
+    }) => ReactNode;
+};
+export type AnchorNavBarProps = {
+    items: AnchorNavBarItem[];
+};
+export declare const AnchorNavBar: ({ items }: AnchorNavBarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import externalLinkIcon from "@material-symbols/svg-400/sharp/exit_to_app.svg";
+import { Svg } from "../../../Svg";
+import { Link } from "../../../Link/Link";
+import { linkClassName } from "../../../Link/linkClassName";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/AnchorNavBar/AnchorNavBar.css";
+const defaultClassName = "af-anchor-navbar";
+export const AnchorNavBar = ({ items }) => {
+    return (_jsx("nav", { className: defaultClassName, children: _jsx("ul", { children: items.map((item) => {
+                if (item.render) {
+                    return (_jsx("li", { children: _jsx(Link, { render: item.render, className: classNames(`${linkClassName} ${defaultClassName}-link`, {
+                                [`${defaultClassName}-link--active`]: item.isActive,
+                            }) }) }, `nav-item-${item.name}`));
+                }
+                return (_jsx("li", { children: _jsxs(Link, { href: item.link, "aria-current": item.isActive ? "page" : undefined, onClick: item.onClick, className: classNames(`${defaultClassName}-link`, {
+                            [`${defaultClassName}-link--active`]: item.isActive,
+                        }), 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/HeaderTitle/HeaderTitle.d.ts

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

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

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

package/dist/Messages/Message.d.ts

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

package/dist/Messages/Message.js

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

package/dist/ModalAgent/BooleanModal.d.ts

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

package/dist/ModalAgent/BooleanModal.js

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

package/dist/ModalAgent/Modal.d.ts

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

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/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,16 @@
+import { ReactNode } from "react";
+import type { VerticalStepMode } from "./types";
+import "@axa-fr/design-system-slash-css/dist/Steps/VerticalStep.css";
+type Props = {
+    title: string;
+    id: string;
+    stepMode: VerticalStepMode;
+    onEdit: React.MouseEventHandler<HTMLButtonElement>;
+    form: ReactNode;
+    restitution: ReactNode;
+    editButtonLabel?: string;
+    editButtonAriaLabel?: string;
+    showRestitution?: boolean;
+};
+export declare const VerticalStep: ({ title, id, stepMode, editButtonLabel, editButtonAriaLabel, onEdit, form, restitution, showRestitution, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};