@axa-fr/design-system-look-and-feel-react 1.0.5-ci.6 → 1.0.5-ci.66

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: [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,8 +1,9 @@
 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;
     isRequired?: boolean;
     options: ({
         label: ReactNode;

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, 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, options, errorMessage, onCha
         }
         return null;
     }, []);
-    return (_jsxs("div", { className: "af-radio__container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _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, 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 }), description && _jsx("span", { children: description }), 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,13 +1,13 @@
 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";
+import ReactSelect, { ActionMeta, GroupBase, SelectInstance, SingleValue } from "react-select";
+import { ComponentPropsWithRef } from "react";
 type Option = {
     label: string;
     value: string | number;
 };
-type Props = Omit<ComponentPropsWithoutRef<ReactSelect>, "placeholder" | "noOptionsMessage"> & {
-    id: string;
-    label: string;
+type Props = Omit<ComponentPropsWithRef<ReactSelect>, "placeholder" | "noOptionsMessage"> & {
+    id?: string;
+    label?: string;
     options: {
         label: string;
         value?: string | number | readonly string[];
@@ -20,8 +20,5 @@ type Props = Omit<ComponentPropsWithoutRef<ReactSelect>, "placeholder" | "noOpti
     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<SelectInstance<unknown, boolean, GroupBase<unknown>>>>;
 export { Select };

package/dist/Form/Select/Select.js

@@ -1,13 +1,17 @@
-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: {
+import { defaultAriaLiveMessages } from "./arialiveMessagesDefault";
+import { InputError } from "../InputError";
+const Select = forwardRef(({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }, inputRef) => {
+    const idError = useId();
+    let inputId = useId();
+    inputId = id || inputId;
+    return (_jsxs("div", { children: [label && (_jsxs("label", { htmlFor: inputId, className: "af-form__select-label", children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] })), _jsx(ReactSelect, { inputId: inputId, "aria-errormessage": idError, "aria-invalid": Boolean(errorLabel), ariaLiveMessages: defaultAriaLiveMessages, screenReaderStatus: ({ count }) => `${count} résultat${count > 1 ? "s" : ""} disponible${count > 1 ? "s" : ""}`, unstyled: true, isDisabled: disabled, noOptionsMessage: () => noOptionsMessage || "Aucun résultat", components: {
                     DropdownIndicator,
                     Option: CustomOption,
                 }, classNames: {
@@ -21,7 +25,7 @@ const Select = ({ id, required, disabled, label, errorLabel, noOptionsMessage, .
                     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] }))] }));
-};
+                }, className: "af-form__input-select", ...otherProps, ref: inputRef }), errorLabel && _jsx(InputError, { id: idError, message: errorLabel })] }));
+});
 Select.displayName = "Select";
 export { Select };

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

@@ -0,0 +1,7 @@
+import { AriaGuidanceProps, AriaOnChangeProps, AriaOnFilterProps, AriaOnFocusProps, GroupBase } from "react-select";
+export declare const defaultAriaLiveMessages: {
+    guidance: (props: AriaGuidanceProps) => string;
+    onChange: <Option, IsMulti extends boolean>(props: AriaOnChangeProps<Option, IsMulti>) => string;
+    onFocus: <Option, Group extends GroupBase<Option>>(props: AriaOnFocusProps<Option, Group>) => string;
+    onFilter: (props: AriaOnFilterProps) => string;
+};

package/dist/Form/Select/arialiveMessagesDefault.js

@@ -0,0 +1,53 @@
+export const defaultAriaLiveMessages = {
+    guidance: (props) => {
+        const { isSearchable, isMulti, tabSelectsValue, context, isInitialFocus } = props;
+        switch (context) {
+            case "menu":
+                return `Utilisez les flèches Haut et Bas pour choisir des options, appuyez sur Entrée pour sélectionner l'option actuellement mise au point, appuyez sur Échap pour quitter le menu${tabSelectsValue ? ", appuyez sur Tab pour sélectionner l'option et quitter le menu" : ""}.`;
+            case "input":
+                return isInitialFocus
+                    ? `${props["aria-label"] || "Sélectionner"} est sélectionné ${isSearchable ? ", tapez du texte pour affiner la liste" : ""}, appuyez sur Bas pour ouvrir le menu, ${isMulti ? " appuyez sur Gauche pour mettre au point les valeurs sélectionnées" : ""}`
+                    : "";
+            case "value":
+                return "Utilisez les flèches Gauche et Droite pour basculer entre les valeurs sélectionnées, appuyez sur Retour arrière pour supprimer la valeur actuellement sélectionnée.";
+            default:
+                return "";
+        }
+    },
+    onChange: (props) => {
+        const { action, label = "", labels, isDisabled } = props;
+        switch (action) {
+            case "deselect-option":
+            case "pop-value":
+            case "remove-value":
+                return `option ${label}, désélectionnée.`;
+            case "clear":
+                return "Toutes les options sélectionnées ont été effacées.";
+            case "initial-input-focus":
+                return `${labels.length > 1 ? "les " : "l'"}option${labels.length > 1 ? "s" : ""} ${labels.join(",")} ${labels.length > 1 ? "sont" : "est"} sélectionnée${labels.length > 1 ? "s" : ""}.`;
+            case "select-option":
+                return isDisabled
+                    ? `l'option ${label} est désactivée. Sélectionnez une autre option.`
+                    : `l'option ${label} est sélectionnée.`;
+            default:
+                return "";
+        }
+    },
+    onFocus: (props) => {
+        const { context, focused, options, label = "", selectValue, isDisabled, isSelected, isAppleDevice, } = props;
+        const getArrayIndex = (arr, item) => arr && arr.length ? `${arr.indexOf(item) + 1} sur ${arr.length}` : "";
+        if (context === "value" && selectValue) {
+            return `la valeur ${label} est sélectionnée, ${getArrayIndex(selectValue, focused)}.`;
+        }
+        if (context === "menu" && isAppleDevice) {
+            const disabled = isDisabled ? " désactivé" : "";
+            const status = `${isSelected ? " sélectionné" : ""}${disabled}`;
+            return `${label}${status}, ${getArrayIndex(options, focused)}.`;
+        }
+        return "";
+    },
+    onFilter: (props) => {
+        const { inputValue, resultsMessage } = props;
+        return `${resultsMessage}${inputValue ? ` pour le terme de recherche : ${inputValue}` : ""}.`;
+    },
+};

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/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/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.js

@@ -11,7 +11,7 @@ export const ContentItemDuo = ({ label, value, isVertical = false, className, cl
         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 }) }))] }));

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 };

package/dist/Modal/components/ModalCoreBody.d.ts

@@ -0,0 +1,2 @@
+export type ModalCoreBodyProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ModalCoreBody: ({ children, className, ...otherProps }: ModalCoreBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreBody.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ModalCoreBody = ({ children, className, ...otherProps }) => (_jsx("section", { className: ["af-modal__body", className].filter(Boolean).join(" "), ...otherProps, children: children }));

package/dist/Modal/components/ModalCoreFooter.d.ts

@@ -0,0 +1,2 @@
+export type ModalCoreFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ModalCoreFooter: ({ className, ...rest }: ModalCoreFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreFooter.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ModalCoreFooter = ({ className, ...rest }) => (_jsx("footer", { className: ["af-modal__footer", className].filter(Boolean).join(" "), ...rest }));

package/dist/Modal/components/ModalCoreHeader.d.ts

@@ -0,0 +1,11 @@
+import type { TitleLevel } from "../../Title";
+export type ModalCoreHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    title: string;
+    subtitle?: string;
+    iconTitle?: string;
+    levelTitle?: TitleLevel;
+    onCancel: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    closeButtonAriaLabel?: string;
+};
+export declare const ModalCoreHeader: ({ className, title, subtitle, iconTitle, levelTitle, onCancel, closeButtonAriaLabel, ...props }: ModalCoreHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import closeSmall from "@material-symbols/svg-400/outlined/close.svg";
+import { ButtonClient, Variants } from "../../Button/Button";
+import { Svg } from "../../Svg";
+export const ModalCoreHeader = ({ className, title, subtitle, iconTitle, levelTitle = 2, onCancel, closeButtonAriaLabel = "Fermer la boite de dialogue", ...props }) => {
+    const HLevel = `h${levelTitle}`;
+    return (_jsxs("header", { className: ["af-modal__header", className].filter(Boolean).join(" "), ...props, children: [_jsx(ButtonClient, { variant: Variants.ghost, iconLeft: _jsx(Svg, { src: closeSmall, width: 32, height: 32, role: "graphics-document" }), "aria-label": closeButtonAriaLabel, onClick: onCancel }), _jsxs("div", { className: "af-modal__header-title", children: [iconTitle && (_jsx(Svg, { src: iconTitle, width: 32, height: 32, role: "graphics-document" })), _jsx(HLevel, { className: "af-modal__header-title-heading", children: title }), subtitle && (_jsx("span", { className: "af-modal__header-title-subtitle", children: subtitle }))] })] }));
+};

package/dist/Modal/index.d.ts

@@ -0,0 +1,5 @@
+export { Modal, type ModalProps } from "./Modal";
+export { ModalCore, type ModalCoreProps } from "./ModalCore";
+export { ModalCoreFooter, type ModalCoreFooterProps, } from "./components/ModalCoreFooter";
+export { ModalCoreHeader, type ModalCoreHeaderProps, } from "./components/ModalCoreHeader";
+export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreBody";