@axa-fr/design-system-look-and-feel-react 1.0.5-ci.8 → 1.0.5-ci.86

package/dist/AccordionCore/AccordionCore.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, } from "react";
 import { getComponentClassName } from "../utilities";
 export const AccordionCore = ({ summary, children, className, classModifier, summaryProps, isOpen, onClick, ...detailsProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-accordion"), [classModifier, className]);
+    const componentClassName = useMemo(() => getComponentClassName("af-accordion", className, classModifier), [classModifier, className]);
     const handleToggle = useCallback((event) => {
         if (onClick) {
             event.preventDefault();

package/dist/Alert/Alert.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef, PropsWithChildren, ReactElement } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
-import { Link } from "../Link/Link";
+import { ComponentPropsWithoutRef, PropsWithChildren, ReactElement } from "react";
 import { ButtonClient } from "../Button/Button";
+import { Link } from "../Link/Link";
 type Headings = "h2" | "h3" | "h4" | "h5" | "h6";
 export declare const alertTypes: {
     readonly validation: "validation";

package/dist/Alert/Alert.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, } from "react";
-import wbIncandescentOutlined from "@material-symbols/svg-400/outlined/wb_incandescent.svg";
-import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
+import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
+import checkCircleOutline from "@material-symbols/svg-400/outlined/check_circle.svg";
 import errorIcon from "@material-symbols/svg-400/outlined/emergency_home.svg";
 import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
-import checkCircleOutline from "@material-symbols/svg-400/outlined/check_circle.svg";
-import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
+import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
+import wbIncandescentOutlined from "@material-symbols/svg-400/outlined/wb_incandescent.svg";
+import { useMemo, } from "react";
 import { Svg } from "../Svg";
 export const alertTypes = {
     validation: "validation",
@@ -23,5 +23,5 @@ const getIconFromType = (type) => ({
 })[type] || wbIncandescentOutlined;
 export const Alert = ({ type = alertTypes.information, title, children, action, iconSize = 24, heading: Heading = "h4", }) => {
     const icon = useMemo(() => getIconFromType(type), [type]);
-    return (_jsxs("div", { className: `af-alert af-alert--${type}`, role: "alert", children: [_jsx(Svg, { src: icon, width: iconSize, height: iconSize, className: "af-alert__icon", "aria-hidden": true }), _jsxs("div", { className: "af-alert-client__content", children: [title && _jsx(Heading, { className: "af-alert__title", children: title }), children, action && _jsx("p", { className: "af-alert__action", children: action })] })] }));
+    return (_jsxs("div", { className: `af-alert af-alert--${type}`, role: "alert", children: [_jsx(Svg, { src: icon, width: iconSize, height: iconSize, className: "af-alert__icon", "aria-hidden": true }), _jsxs("div", { className: "af-alert-client__content", children: [title && _jsx(Heading, { className: "af-alert__title", children: title }), children, action && _jsx("div", { className: "af-alert__action", children: action })] })] }));
 };

package/dist/Card/Card.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { getComponentClassName } from "../utilities";
 export const Card = ({ children, className, classModifier, onClick, ...otherProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-card"), [className, classModifier]);
+    const componentClassName = useMemo(() => getComponentClassName("af-card", className, classModifier), [className, classModifier]);
     const Component = useMemo(() => (onClick ? "button" : "section"), [onClick]);
     return (_jsx(Component, { className: componentClassName, ...(onClick ? { type: "button", onClick } : {}), ...otherProps, children: children }));
 };

package/dist/Divider/Divider.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { getComponentClassName } from "../utilities";
 export const Divider = ({ className, classModifier }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-divider"), [className, classModifier]);
+    const componentClassName = useMemo(() => getComponentClassName("af-divider", className, classModifier), [className, classModifier]);
     return _jsx("hr", { className: componentClassName });
 };

package/dist/Form/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
 import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
 import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
@@ -10,7 +10,7 @@ const Checkbox = forwardRef(({ label, errorMessage, className, ...inputProps },
     const idError = useId();
     let inputId = useId();
     inputId = inputProps.id || inputId;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "aria-errormessage": idError, "aria-invalid": !!errorMessage }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), label] }, inputProps.name) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", id: idError, children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+    return (_jsxs("div", { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "aria-errormessage": idError, "aria-invalid": !!errorMessage }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), label] }, inputProps.name) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", id: idError, children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
 });
 Checkbox.displayName = "Checkbox";
 export { Checkbox };

package/dist/Form/Checkbox/CheckboxSelect.d.ts

@@ -1,6 +1,6 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
-import React, { type ReactNode } from "react";
-type CheckboxProps = {
+import React, { ComponentPropsWithRef, type ReactNode } from "react";
+type CheckboxProps = ComponentPropsWithRef<"input"> & {
     type: "vertical" | "horizontal";
     labelGroup?: string;
     descriptionGroup?: string;
@@ -14,5 +14,5 @@ type CheckboxProps = {
     errorMessage?: string;
     onChange?: React.ChangeEventHandler;
 };
-export declare const CheckboxSelect: ({ labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxSelect: ({ className, labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/Checkbox/CheckboxSelect.js

@@ -5,7 +5,10 @@ import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_b
 import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
 import { useId } from "react";
 import { Svg } from "../../Svg";
-export const CheckboxSelect = ({ labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type = "vertical", }) => {
+import { getComponentClassName } from "../../utilities/helpers/getComponentClassName";
+export const CheckboxSelect = ({ className, labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type = "vertical", }) => {
+    const componentClassName = getComponentClassName("af-checkbox__container", className);
+    const checkboxGroupClassName = getComponentClassName(`af-checkbox af-checkbox-select af-checkbox-select--${type}`, className);
     const optionId = useId();
-    return (_jsxs("div", { className: "af-checkbox__container", children: [_jsxs("div", { className: "af-checkbox__label-container", children: [labelGroup && (_jsxs("span", { className: "af-checkbox__label", id: optionId, children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), descriptionGroup && (_jsx("span", { className: "af-checkbox__description", children: descriptionGroup }))] }), _jsx("div", { role: "group", className: `af-checkbox af-checkbox-select af-checkbox-select--${type}`, children: options.map(({ label, description, subtitle, icon, ...inputProps }) => (_jsxs("label", { htmlFor: `id-${inputProps.name}`, children: [_jsx("input", { type: "checkbox", ...inputProps, id: `id-${inputProps.name}`, onChange: onChange, "aria-invalid": Boolean(errorMessage) && !inputProps.disabled }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), _jsxs("div", { className: "af-checkbox__content", children: [icon, _jsxs("div", { className: "af-checkbox__content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputProps.name))) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { className: "af-checkbox__label-container", children: [labelGroup && (_jsxs("span", { className: "af-checkbox__label", id: optionId, children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), descriptionGroup && (_jsx("span", { className: "af-checkbox__description", children: descriptionGroup }))] }), _jsx("div", { role: "group", className: checkboxGroupClassName, children: options.map(({ label, description, subtitle, icon, ...inputProps }) => (_jsxs("label", { htmlFor: `id-${inputProps.name}`, children: [_jsx("input", { type: "checkbox", ...inputProps, id: `id-${inputProps.name}`, onChange: onChange, "aria-invalid": Boolean(errorMessage) && !inputProps.disabled }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), _jsxs("div", { className: "af-checkbox__content", children: [icon, _jsxs("div", { className: "af-checkbox__content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputProps.name))) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
 };

package/dist/Form/FileUpload/FileUpload.d.ts

@@ -7,8 +7,8 @@ type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
     dropzoneDescription?: string;
     instructions?: string;
     required?: boolean;
-    globalError: string;
-    errors: Array<{
+    globalError?: string;
+    errors?: Array<{
         id?: string | undefined;
         message: string;
     }>;
@@ -18,15 +18,16 @@ type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
         size: number;
         isLoading: boolean;
     }>;
-    accept: string;
+    accept?: string;
     isMobile?: boolean;
+    withPadding?: boolean;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
     onView?: (id: string) => void;
     onDelete?: (id: string) => void;
 };
 declare const FileUpload: {
-    ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, withPadding, onView, onDelete, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { FileUpload };

package/dist/Form/FileUpload/FileUpload.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
 import visibility from "@material-symbols/svg-400/outlined/visibility-fill.svg";
@@ -23,7 +23,7 @@ function getReadableFileSizeString(fileSizeInBytes) {
     } while (fileSizeInBytesCopy > 1024);
     return Math.max(fileSizeInBytesCopy, 0.1).toFixed(1) + byteUnits[i];
 }
-const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }) => {
+const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, withPadding = false, onView, onDelete, ...otherProps }) => {
     const idError = useId();
     const getIcon = (isInError, isLoading) => {
         if (isInError) {
@@ -34,10 +34,12 @@ const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription,
         }
         return (_jsx(Svg, { src: check, className: "af-form__file-title-container-icon-success" }));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || !dropzoneDescription) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { id: idError, message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
+    return (_jsxs("div", { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || (!withPadding && !dropzoneDescription)) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { id: idError, message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
                         const effectiveSize = getReadableFileSizeString(size);
-                        const isInError = errors.some((fileError) => fileError.id === fileId);
-                        const errorMessage = errors.find((fileError) => fileError.id === fileId)?.message;
+                        const isInError = errors
+                            ? errors.some((fileError) => fileError.id === fileId)
+                            : false;
+                        const errorMessage = errors?.find((fileError) => fileError.id === fileId)?.message;
                         return (_jsxs("li", { className: "af-form__file-line", children: [_jsxs("div", { className: `af-form__file-line-container ${isInError ? "af-form__file-line-container--error" : ""}`, children: [_jsxs("div", { className: "af-form__file-title", children: [getIcon(isInError, isLoading), _jsxs("div", { children: [_jsx("span", { className: "af-form__file-name", children: name }), _jsx("span", { className: "af-form__file-size", children: effectiveSize })] })] }), _jsxs("div", { className: "af-form__file-actions", children: [onView && (_jsx(Svg, { tabIndex: 0, role: "button", "aria-label": "Visualiser", onClick: () => onView(fileId), onKeyDown: (e) => {
                                                         if (e.key === "Enter") {
                                                             onView(fileId);

package/dist/Form/Radio/Radio.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
 import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
 import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
@@ -9,7 +9,7 @@ const Radio = forwardRef(({ label, errorMessage, ...inputProps }, ref) => {
     let inputId = useId();
     inputId = inputProps.id || inputId;
     const idError = useId();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-radio", role: "radiogroup", "aria-invalid": Boolean(errorMessage), "aria-errormessage": idError, children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "radio", id: inputId }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), label] }, inputProps.name) }), errorMessage && _jsx(InputError, { id: idError, message: errorMessage })] }));
+    return (_jsxs("div", { children: [_jsx("div", { className: "af-radio", role: "radiogroup", "aria-invalid": Boolean(errorMessage), "aria-errormessage": idError, children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "radio", id: inputId }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), label] }, inputProps.name) }), errorMessage && _jsx(InputError, { id: idError, message: errorMessage })] }));
 });
 Radio.displayName = "Radio";
 export { Radio };

package/dist/Form/Radio/RadioSelect.d.ts

@@ -1,6 +1,6 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
 import React, { ComponentPropsWithRef, ReactNode } from "react";
-type RadioSelectProps = {
+type RadioSelectProps = ComponentPropsWithRef<"input"> & {
     type: "vertical" | "horizontal";
     label?: string;
     description?: string;

package/dist/Form/Radio/RadioSelect.js

@@ -5,7 +5,10 @@ import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_butt
 import { forwardRef, useCallback, useId, } from "react";
 import { Svg } from "../../Svg";
 import { InputError } from "../InputError";
-export const RadioSelect = forwardRef(({ id, label, description, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
+import { getComponentClassName } from "../../utilities/helpers/getComponentClassName";
+export const RadioSelect = forwardRef(({ className, id, label, description, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
+    const componentClassName = getComponentClassName("af-radio__container", className);
+    const radioGroupClassName = getComponentClassName(`af-radio af-radio-select af-radio-select--${type}`, className);
     const generatedId = useId();
     const optionId = id || generatedId;
     const getRef = useCallback((index, reference, val, inputVal) => {
@@ -14,6 +17,6 @@ export const RadioSelect = forwardRef(({ id, label, description, options, errorM
         }
         return null;
     }, []);
-    return (_jsxs("div", { className: "af-radio__container", children: [_jsxs("div", { className: "af-radio__label-container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), description && (_jsx("span", { className: "af-radio__description", children: description }))] }), _jsx("div", { ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-errormessage": `${optionId}-error`, children: options.map(({ label: inputLabel, description: inputDescription, subtitle, icon, disabled: inputDisabled, ...inputProps }, idx) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, "aria-checked": value === inputProps.value, checked: value === inputProps.value, ref: getRef(idx, ref, value, inputProps.value) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), inputDescription && _jsx("span", { children: inputDescription }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { className: "af-radio__label-container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), description && (_jsx("span", { className: "af-radio__description", children: description }))] }), _jsx("div", { ...rest, role: "radiogroup", className: radioGroupClassName, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-errormessage": `${optionId}-error`, children: options.map(({ label: inputLabel, description: inputDescription, subtitle, icon, disabled: inputDisabled, ...inputProps }, idx) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, "aria-checked": value === inputProps.value, checked: value === inputProps.value, ref: getRef(idx, ref, value, inputProps.value) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), inputDescription && _jsx("span", { children: inputDescription }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
 });
 RadioSelect.displayName = "RadioSelect";

package/dist/Form/Select/Select.d.ts

@@ -1,27 +1,10 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Select/Select.scss";
-import ReactSelect, { ActionMeta, SingleValue } from "react-select";
-import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
-type Option = {
-    label: string;
-    value: string | number;
-};
-type Props = Omit<ComponentPropsWithoutRef<ReactSelect>, "placeholder" | "noOptionsMessage"> & {
-    id: string;
-    label: string;
-    options: {
-        label: string;
-        value?: string | number | readonly string[];
-    }[];
-    value: Option | null;
+import { ComponentPropsWithRef } from "react";
+type Props = ComponentPropsWithRef<"select"> & {
+    id?: string;
+    label?: string;
     errorLabel?: string;
     placeholder?: string;
-    noOptionsMessage?: string;
-    onChange: (newValue: SingleValue<Option>, actionMeta: ActionMeta<string>) => void;
-    disabled?: boolean;
-    required?: boolean;
-};
-declare const Select: {
-    ({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }: PropsWithChildren<Props>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
 };
+declare const Select: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 export { Select };

package/dist/Form/Select/Select.js

@@ -1,27 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Select/Select.scss";
-import ErrorOutline from "@material-symbols/svg-400/outlined/error.svg";
-import ReactSelect from "react-select";
+import { forwardRef, useId } from "react";
 import classNames from "classnames";
-import { DropdownIndicator } from "./DropdownIndicator";
-import { Svg } from "../../Svg";
-import { CustomOption } from "./CustomOption";
-const Select = ({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }) => {
-    return (_jsxs(_Fragment, { children: [label && (_jsxs("label", { id: `${id}__label`, htmlFor: `${id}__input`, className: "af-form__select-label", children: [label, required && _jsx("span", { children: " *" })] })), _jsx(ReactSelect, { inputId: `${id}__input`, "aria-labelledby": `${id}__label`, "aria-errormessage": `${id}__error`, "aria-invalid": Boolean(errorLabel), unstyled: true, isDisabled: disabled, noOptionsMessage: () => noOptionsMessage || "Aucun résultat", components: {
-                    DropdownIndicator,
-                    Option: CustomOption,
-                }, classNames: {
-                    control: () => "af-form__input-select",
-                    menu: () => "af-form__input-select-menu",
-                    menuList: () => "af-form__select-menu-list",
-                    container: ({ isFocused, isDisabled, selectProps: { menuIsOpen }, }) => classNames("af-form__input-select-container", isFocused && "af-form__input-select-container-focused", isDisabled && "af-form__input-select-container-disabled", errorLabel &&
-                        !isFocused &&
-                        !menuIsOpen &&
-                        "af-form__input-select-container-error"),
-                    option: ({ isSelected, isFocused, }) => classNames("af-form__input-select-menu-options", isSelected && "af-form__input-select-menu-options-selected", isFocused && "af-form__input-select-menu-options-focused"),
-                    singleValue: ({ isDisabled, }) => classNames("af-form__select-single-value", isDisabled && "af-form__select-single-value-disabled"),
-                    dropdownIndicator: () => "af-form__select-dropdown-indicator",
-                }, className: "af-form__input-select", ...otherProps }), errorLabel && (_jsxs("div", { id: `${id}__error`, className: "af-form__select-error", "aria-live": "assertive", children: [_jsx(Svg, { src: ErrorOutline, width: 16, className: "af-form__select-error-icon" }), errorLabel] }))] }));
-};
+import { InputError } from "../InputError";
+const Select = forwardRef(({ id, required, label, errorLabel, placeholder, children, ...otherProps }, inputRef) => {
+    const idError = useId();
+    let inputId = useId();
+    inputId = id || inputId;
+    const isShowingPlaceholder = otherProps.value === "";
+    const classname = classNames("af-form__select-input", errorLabel && "af-form__select-input--error", isShowingPlaceholder && "af-form__select-input-placeholder");
+    return (_jsxs("div", { children: [label && (_jsxs("label", { htmlFor: inputId, className: "af-form__select-label", children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] })), _jsxs("select", { className: classname, ...otherProps, ref: inputRef, id: inputId, children: [Boolean(placeholder) && (_jsx("option", { disabled: true, value: "", children: placeholder })), children] }), errorLabel && _jsx(InputError, { id: idError, message: errorLabel })] }));
+});
 Select.displayName = "Select";
 export { Select };

package/dist/Form/Text/Text.d.ts

@@ -1,6 +1,7 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
 import { ComponentPropsWithRef, MouseEventHandler } from "react";
 type Props = ComponentPropsWithRef<"input"> & {
+    unit?: React.ReactNode;
     classModifier?: string;
     helper?: string;
     error?: string;
@@ -8,6 +9,8 @@ type Props = ComponentPropsWithRef<"input"> & {
     label?: string;
     buttonLabel?: string;
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    sideButtonLabel?: string;
+    onSideButtonClick?: MouseEventHandler<HTMLButtonElement>;
 };
 declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { Text };

package/dist/Form/Text/Text.js

@@ -7,12 +7,16 @@ import { Variants } from "../../Button/Button";
 import { Svg } from "../../Svg";
 import { getComponentClassName } from "../../utilities";
 import { InputError } from "../InputError";
-const Text = forwardRef(({ className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, ...otherProps }, inputRef) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-form__input-text");
+const Text = forwardRef(({ unit, className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, sideButtonLabel, onSideButtonClick, ...otherProps }, inputRef) => {
+    const componentClassName = getComponentClassName("af-form__input-text", className, classModifier +
+        (error || otherProps["aria-errormessage"] ? " error" : ""));
     let inputId = useId();
     inputId = otherProps.id || inputId;
+    const idDescription = useId();
     const idError = useId();
-    return (_jsxs("div", { className: "af-form__input-container", children: [(label || description || buttonLabel) && (_jsxs("div", { className: "af-form__label-container", children: [_jsxs("label", { htmlFor: inputId, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel }))] })), _jsx("input", { id: inputId, className: componentClassName, type: "text", ref: inputRef, "aria-errormessage": idError, "aria-invalid": Boolean(error), ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: idError, message: error })] }));
+    const idHelp = useId();
+    const idLabel = useId();
+    return (_jsxs("div", { className: "af-form__input-container", children: [(label || description || buttonLabel) && (_jsxs("div", { className: "af-form__label-container", children: [_jsxs("div", { className: "af-form__label-header", children: [_jsxs("label", { htmlFor: inputId, id: idLabel, "aria-describedby": idDescription, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), sideButtonLabel && (_jsx(Button, { className: "af-form__input-modify", variant: Variants.ghost, onClick: onSideButtonClick, children: sideButtonLabel }))] }), description && (_jsx("span", { id: idDescription, className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel }))] })), _jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: "text", ref: inputRef, "aria-labelledby": idLabel, "aria-errormessage": otherProps["aria-errormessage"] ?? idError, "aria-invalid": Boolean(error || otherProps["aria-errormessage"]), "aria-describedby": idHelp, ...otherProps }), unit] }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })), !otherProps["aria-errormessage"] && error && (_jsx(InputError, { id: idError, message: error }))] }));
 });
 Text.displayName = "Text";
 export { Text };

package/dist/Form/TextArea/TextArea.js

@@ -6,11 +6,11 @@ import { Button, Svg } from "../..";
 import { Variants } from "../../Button/Button";
 import { InputError } from "../InputError";
 const TextArea = forwardRef(({ className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, ...otherProps }, inputRef) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-form__input-textarea");
+    const componentClassName = getComponentClassName("af-form__input-textarea", className, classModifier);
     let inputId = useId();
     inputId = otherProps.id || inputId;
     const idError = useId();
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: inputId, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel })), _jsx("textarea", { id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": idError, "aria-invalid": Boolean(error), ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: idError, message: error })] }));
+    return (_jsxs("div", { className: "af-form__input-container", children: [label && (_jsxs("div", { className: "af-form__label-container", children: [_jsxs("label", { htmlFor: inputId, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel }))] })), _jsx("textarea", { id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": idError, "aria-invalid": Boolean(error), ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: idError, message: error })] }));
 });
 TextArea.displayName = "TextArea";
 export { TextArea };

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

@@ -49,7 +49,7 @@ export declare const eventWrapper: ({ wrapper, props }: EventWrapperProps) => {
     onFocus: (ev: BaseSyntheticEvent) => void;
 };
 type AddPropsClone = Omit<RenderChildrenProps, "children"> & {
-    child: ReactElement;
+    child: ReactElement<Record<string, unknown>>;
     classModifier: string;
     name: string;
     getMessageClassModifierFn?: typeof FormClassManager.getMessageClassModifier;

package/dist/Form/core/FieldForm.js

@@ -101,7 +101,8 @@ export const renderedChildren = ({ children, wrapper, message, messageType, }) =
     };
     if (child.props.children) {
         const subChildren = renderedChildren({
-            children: child.props.children,
+            children: child.props
+                .children,
             wrapper,
             message,
             messageType,
@@ -119,7 +120,7 @@ export const renderedChildren = ({ children, wrapper, message, messageType, }) =
             messageType,
             classModifier: props.classModifier,
             wrapper,
-            child,
+            child: child,
         }),
     });
 });

package/dist/IconBg/IconBg.js

@@ -7,7 +7,7 @@ export const IconBg = ({ children, className, classModifier, isDisabled = false,
         if (isDisabled) {
             newClassModifier += " disabled";
         }
-        return getComponentClassName(className, newClassModifier, "af-icon-bg");
+        return getComponentClassName("af-icon-bg", className, newClassModifier);
     }, [classModifier, isDisabled, className]);
     return _jsx("div", { className: componentClassName, children: children });
 };

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

@@ -1,9 +1,9 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
-import { ComponentPropsWithoutRef } from "react";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 type HeaderProps = {
     defaultActiveLink?: number;
-    previousLink?: JSX.Element;
-    rightItem?: JSX.Element[];
+    previousLink?: ReactNode;
+    rightItem?: ReactNode[];
 } & ComponentPropsWithoutRef<"header">;
 export declare const Header: ({ children, defaultActiveLink, previousLink, rightItem, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Layout/Header/Header.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
-import logo from "@axa-fr/design-system-look-and-feel-css/dist/common/assets/logo-axa.svg";
-import { useCallback, useState } from "react";
+import logo from "@axa-fr/design-system-look-and-feel-css/logo-axa.svg";
+import { useCallback, useState, } from "react";
 import { NavBar } from "./NavBar";
 import { PreviousLink } from "./PreviousLink/PreviousLink";
 export const Header = ({ children, defaultActiveLink, previousLink, rightItem, }) => {

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

@@ -1,8 +1,8 @@
-import React, { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import { type ComponentPropsWithoutRef, type PropsWithChildren, type Dispatch, type SetStateAction } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
 type NavBarProps = {
     activeLink?: number;
-    setActiveLink: React.Dispatch<React.SetStateAction<number | undefined>>;
+    setActiveLink: Dispatch<SetStateAction<number | undefined>>;
 } & ComponentPropsWithoutRef<"nav">;
 declare const NavBar: ({ activeLink, children, setActiveLink, ...otherProps }: PropsWithChildren<NavBarProps>) => import("react/jsx-runtime").JSX.Element;
 export { NavBar };

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { isValidElement, useMemo, } from "react";
+import { isValidElement, useMemo, Children, cloneElement, } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
 const NavBar = ({ activeLink, children, setActiveLink, ...otherProps }) => {
-    const validChildren = useMemo(() => (React.Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
-    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal", ...otherProps, children: _jsx("ul", { className: "af-navbar-container", role: "menubar", children: React.Children.map(validChildren, (child, index) => (_jsx("li", { className: "af-navbar-item", role: "none", children: React.cloneElement(child, {
+    const validChildren = useMemo(() => (Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
+    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal", ...otherProps, children: _jsx("ul", { className: "af-navbar-container", role: "menubar", children: Children.map(validChildren, (child, index) => (_jsx("li", { className: "af-navbar-item", role: "none", children: cloneElement(child, {
                     className: `af-navbar-item__link ${index === activeLink ? "af-navbar-item__link--active" : ""}`.trim(),
                     onClick: () => setActiveLink(index),
                     onFocus: () => setActiveLink(index),

package/dist/Link/Link.js

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

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

@@ -4,6 +4,6 @@ import { useMemo } from "react";
 import { Svg } from "../../../Svg";
 import { getComponentClassName } from "../../../utilities";
 export const ClickItem = ({ children, icon, parentClickComponent: ClickComponent = ({ children: parentClickComponentChildren, ...parentClickComponentProps }) => (_jsx("button", { type: "button", ...parentClickComponentProps, children: parentClickComponentChildren })), isDisabled = false, className, classModifier = "", actionIcon = _jsx(Svg, { src: chevron, "aria-hidden": true }), ...otherProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, `${classModifier}${isDisabled ? " disabled" : ""}`, "af-click-item"), [className, classModifier, isDisabled]);
+    const componentClassName = useMemo(() => getComponentClassName("af-click-item", className, `${classModifier}${isDisabled ? " disabled" : ""}`), [className, classModifier, isDisabled]);
     return (_jsxs(ClickComponent, { className: componentClassName, disabled: isDisabled, "aria-disabled": isDisabled, ...otherProps, children: [_jsxs("div", { className: "af-click-item__content", children: [icon && _jsx("div", { className: "af-click-item__icon", children: icon }), _jsx("div", { className: "af-click-item__label", children: children })] }), _jsx("div", { className: "af-click-item__action", children: actionIcon })] }));
 };

package/dist/List/ContentItemDuo/ContentItemDuo.d.ts

@@ -1,6 +1,7 @@
+import { type ReactNode } from "react";
 type ContentItemDuoProps = {
     label: string;
-    value: string;
+    value: ReactNode;
     isVertical?: boolean;
     className?: string;
     classModifier?: string;

package/dist/List/ContentItemDuo/ContentItemDuo.js

@@ -2,17 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import checkIcon from "@material-symbols/svg-400/outlined/check.svg";
 import closeIcon from "@material-symbols/svg-400/outlined/close.svg";
 import { useMemo } from "react";
+import { Button, Svg } from "../..";
 import { Variants } from "../../Button/Button";
 import { getComponentClassName } from "../../utilities";
-import { Button, Svg } from "../..";
 export const ContentItemDuo = ({ label, value, isVertical = false, className, classModifier, isShowingDoneIcon = false, isShowingCloseIcon = false, buttonText, onButtonClick, }) => {
     const componentClassName = useMemo(() => {
         const classModifiers = [classModifier];
         if (isVertical) {
             classModifiers.push("vertical");
         }
-        return getComponentClassName(className, classModifiers.filter(Boolean).join(" "), "af-content-item-duo");
+        return getComponentClassName("af-content-item-duo", className, classModifiers.filter(Boolean).join(" "));
     }, [classModifier, className, isVertical]);
     const iconContainerModifier = useMemo(() => ` af-content-item-duo__icon--${isShowingDoneIcon ? "done" : "close"}`, [isShowingDoneIcon]);
-    return (_jsxs("div", { className: componentClassName, children: [(isShowingDoneIcon || isShowingCloseIcon) && (_jsxs("div", { className: `af-content-item-duo__icon${iconContainerModifier}`, children: [isShowingDoneIcon && _jsx(Svg, { src: checkIcon }), isShowingCloseIcon && _jsx(Svg, { src: closeIcon })] })), _jsx("p", { className: "af-content-item-duo__label", children: label }), _jsx("p", { className: "af-content-item-duo__value", children: value }), buttonText && (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(Button, { variant: Variants.ghost, onClick: onButtonClick, children: buttonText }) }))] }));
+    return (_jsxs("div", { className: componentClassName, children: [(isShowingDoneIcon || isShowingCloseIcon) && (_jsxs("div", { className: `af-content-item-duo__icon${iconContainerModifier}`, children: [isShowingDoneIcon && _jsx(Svg, { src: checkIcon }), isShowingCloseIcon && _jsx(Svg, { src: closeIcon })] })), _jsx("p", { className: "af-content-item-duo__label", children: label }), typeof value === "string" ? (_jsx("p", { className: "af-content-item-duo__value", children: value })) : (_jsx("div", { className: "af-content-item-duo__value", children: value })), buttonText && (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(Button, { variant: Variants.ghost, onClick: onButtonClick, children: buttonText }) }))] }));
 };

package/dist/List/ContentItemMono/ContentItemMono.js

@@ -8,7 +8,7 @@ export const ContentItemMono = ({ children, className, classModifier, secondaryT
         if (isDisabled) {
             classModifiers.push("disabled");
         }
-        return getComponentClassName(className, classModifiers.filter(Boolean).join(" "), "af-content-item-mono");
+        return getComponentClassName("af-content-item-mono", className, classModifiers.filter(Boolean).join(" "));
     }, [classModifier, isDisabled, size, className]);
     return (_jsxs("div", { className: componentClassName, children: [hasStick && (_jsx("div", { className: "af-content-item-mono__stick", role: "presentation" })), leftElement && (_jsx("div", { className: `af-content-item-mono__left-container${isLeftElementCentered
                     ? " af-content-item-mono__left-container--center"

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type ModalCoreProps } from "./ModalCore";
+import { type ModalCoreHeaderProps } from "./components/ModalCoreHeader";
+export type ModalProps = Omit<ModalCoreProps, "onOutsideTap" | "title"> & ModalCoreHeaderProps & {
+    onSubmit?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    submitTitle?: string;
+    cancelTitle?: string;
+    submitDisabled?: boolean;
+    cancelDisabled?: boolean;
+};
+declare const Modal: React.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+export { Modal };

package/dist/Modal/Modal.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ModalCore } from "./ModalCore";
+import { ButtonClient, Variants as ButtonVariants } from "../Button/Button";
+import { ModalCoreHeader, } from "./components/ModalCoreHeader";
+import { ModalCoreBody } from "./components/ModalCoreBody";
+import { ModalCoreFooter } from "./components/ModalCoreFooter";
+const Modal = forwardRef(({ children, title, submitTitle, cancelTitle, className, onCancel, onSubmit, closeButtonAriaLabel, cancelDisabled, submitDisabled, subtitle, iconTitle, levelTitle, ...props }, ref) => (_jsxs(ModalCore, { className: className, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(ModalCoreHeader, { title: title, subtitle: subtitle, iconTitle: iconTitle, levelTitle: levelTitle, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(ModalCoreBody, { children: children }), _jsxs(ModalCoreFooter, { children: [onCancel && cancelTitle && (_jsx(ButtonClient, { variant: ButtonVariants.secondary, onClick: onCancel, disabled: cancelDisabled, children: cancelTitle })), onSubmit && submitTitle && (_jsx(ButtonClient, { variant: ButtonVariants.primary, onClick: onSubmit, disabled: submitDisabled, children: submitTitle }))] })] })));
+Modal.displayName = "Modal";
+export { Modal };

package/dist/Modal/ModalCore.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
+export type ModalCoreProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & {
+    className?: string;
+    title: string;
+    onOutsideTap: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    children: ReactNode;
+    ref?: React.Ref<HTMLDialogElement>;
+};
+declare const ModalCore: import("react").ForwardRefExoticComponent<Omit<ModalCoreProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export { ModalCore };

package/dist/Modal/ModalCore.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
+const ModalCore = forwardRef(({ className, title = "", onOutsideTap, children, ...props }, ref) => (_jsx("dialog", { "aria-describedby": title, className: ["af-modal", className].filter(Boolean).join(" "), onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (e) => e.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) })));
+ModalCore.displayName = "ModalCore";
+export { ModalCore };