@axa-fr/design-system-look-and-feel-react 1.0.5-ci.17 → 1.0.5-ci.19

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/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/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/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,11 +1,11 @@
 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"> & {
+type Props = Omit<ComponentPropsWithRef<ReactSelect>, "placeholder" | "noOptionsMessage"> & {
     id: string;
     label: string;
     options: {
@@ -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 "@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(_Fragment, { children: [label && (_jsxs("label", { htmlFor: inputId, className: "af-form__select-label", children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] })), _jsx(ReactSelect, { id: 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.js

@@ -8,7 +8,7 @@ import { Svg } from "../../Svg";
 import { getComponentClassName } from "../../utilities";
 import { InputError } from "../InputError";
 const Text = forwardRef(({ unit, className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, ...otherProps }, inputRef) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-form__input-text");
+    const componentClassName = getComponentClassName("af-form__input-text", className, classModifier);
     let inputId = useId();
     inputId = otherProps.id || inputId;
     const idDescription = useId();

package/dist/Form/TextArea/TextArea.js

@@ -6,7 +6,7 @@ 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();

package/dist/Grid/renderExampleForm.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import home from "@material-symbols/svg-400/outlined/home.svg";
 import { MyFooter } from "./components/MyFooter";
 import { MyHeader } from "./components/MyHeader";
-import { Button, ButtonVariants, TextInput, Title } from "..";
+import { Button, ButtonVariants, CheckboxSelect, RadioSelect, Svg, TextInput, Title, } from "..";
 import { DebugGrid } from "./DebugGrid";
 function capitalizeFirstLetter(val) {
     return String(val).charAt(0).toUpperCase() + String(val).slice(1);
@@ -17,7 +18,7 @@ const setAttributesFields = (value, label, type = "text") => ({
     placeholder: `Votre ${label}`,
     description: `Saisissez un ${label}`,
     error: `Un ${label} est obligatoire`,
-    className: "subgrid af-form__input-text",
+    className: "subgrid",
     helper: "Do you need help ?",
     buttonLabel: "En savoir plus",
 });
@@ -27,4 +28,46 @@ const FIELDS = [
     setAttributesFields("samuel.gomez@axa.fr", "email", "email"),
     setAttributesFields("0601020304", "téléphone"),
 ];
-export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, { isCheckedByDefault: true }), _jsx(MyHeader, {}), _jsx("main", { className: "grid example-form", children: _jsxs("form", { className: "form", children: [_jsxs("div", { className: "form__header subgrid", children: [_jsx(Title, { children: "Mon formulaire" }), _jsx("p", { children: "Les mentions avec * sont obligatoires" })] }), _jsx("div", { className: "form__fields subgrid", children: FIELDS.map((field) => (_jsx(TextInput, { ...field, classModifier: field.error ? "error" : "" }, field.id))) }), _jsxs("div", { className: "form__actions subgrid", children: [_jsx(Button, { variant: ButtonVariants.secondary, children: "Pr\u00E9c\u00E9dent" }), _jsx(Button, { variant: ButtonVariants.primary, children: "Valider" })] })] }) }), _jsx(MyFooter, {})] }));
+export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, { isCheckedByDefault: true }), _jsx(MyHeader, {}), _jsx("main", { className: "grid example-form", children: _jsxs("form", { className: "form", children: [_jsxs("div", { className: "form__header subgrid", children: [_jsx(Title, { children: "Mon formulaire" }), _jsx("p", { children: "Les mentions avec * sont obligatoires" })] }), _jsxs("div", { className: "form__fields subgrid", children: [_jsx(RadioSelect, { className: "subgrid", label: "Genre", type: "horizontal", options: [
+                                    { label: "Homme", value: "H", icon: _jsx(Svg, { src: home }) },
+                                    { label: "Femme", value: "F", icon: _jsx(Svg, { src: home }) },
+                                    { label: "Les deux", value: "HF", icon: _jsx(Svg, { src: home }) },
+                                    {
+                                        label: "Ne se prononce pas",
+                                        value: "N",
+                                        icon: _jsx(Svg, { src: home }),
+                                    },
+                                ], name: "radio-name" }), _jsx(CheckboxSelect, { className: "subgrid", type: "horizontal", labelGroup: "Titre", options: [
+                                    {
+                                        label: "Développeur",
+                                        value: "H",
+                                        name: "Développeur",
+                                        icon: _jsx(Svg, { src: home }),
+                                    },
+                                    { label: "BA", value: "F", name: "BA", icon: _jsx(Svg, { src: home }) },
+                                    {
+                                        label: "EM",
+                                        value: "HF",
+                                        name: "EM",
+                                        icon: _jsx(Svg, { src: home }),
+                                    },
+                                    { label: "PO", value: "A", name: "PO", icon: _jsx(Svg, { src: home }) },
+                                    {
+                                        label: "DBA",
+                                        value: "Au",
+                                        name: "DBA",
+                                        icon: _jsx(Svg, { src: home }),
+                                    },
+                                    {
+                                        label: "Scrum Master",
+                                        value: "P",
+                                        name: "Scrum Master",
+                                        icon: _jsx(Svg, { src: home }),
+                                    },
+                                    {
+                                        label: "Ne se prononce pas",
+                                        value: "N",
+                                        name: "Ne se prononce pas",
+                                        icon: _jsx(Svg, { src: home }),
+                                    },
+                                ] }), FIELDS.map((field) => (_jsx(TextInput, { ...field, classModifier: field.error ? "error" : "" }, field.id)))] }), _jsxs("div", { className: "form__actions subgrid", children: [_jsx(Button, { variant: ButtonVariants.secondary, children: "Pr\u00E9c\u00E9dent" }), _jsx(Button, { variant: ButtonVariants.primary, children: "Valider" })] })] }) }), _jsx(MyFooter, {})] }));

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { getComponentClassName } from "../utilities";
 export const Tag = ({ children, className, classModifier = "", ...divProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-tag"), [className, classModifier]);
+    const componentClassName = useMemo(() => getComponentClassName("af-tag", className, classModifier), [className, classModifier]);
     return (_jsx("div", { className: componentClassName, ...divProps, children: _jsx("span", { className: "af-tag__label", children: children }) }));
 };

package/dist/Title/Title.js

@@ -5,7 +5,7 @@ import { getComponentClassName } from "../utilities";
 import { TitleSize } from "./constants";
 import { TitleWithSubtitles } from "./TitleWithSubtitles";
 export const Title = ({ children: title, className, classModifier, firstSubtitle, icon, secondSubtitle, size = TitleSize.XL, level = size === TitleSize.L ? 2 : 1, }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier ? `${classModifier} ${size}` : size, "af-title"), [classModifier, className, size]);
+    const componentClassName = useMemo(() => getComponentClassName("af-title", className, classModifier ? `${classModifier} ${size}` : size), [classModifier, className, size]);
     const TitleWithSubtitlesPart = useCallback(({ ...args }) => (_jsx(TitleWithSubtitles, { title: title, firstSubtitle: firstSubtitle, level: level, ...args })), [title, firstSubtitle, level]);
     return (_jsx("header", { className: componentClassName, children: icon && size === TitleSize.XL ? (_jsxs(_Fragment, { children: [_jsx(IconBg, { className: "af-title__icon af-icon-bg", children: icon }), _jsx(TitleWithSubtitlesPart, { secondSubtitle: secondSubtitle })] })) : (_jsx(TitleWithSubtitlesPart, {})) }));
 };

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

@@ -1 +1 @@
-export declare const getComponentClassName: (className?: string, classModifier?: string, defaultClassName?: string) => string;
+export declare const getComponentClassName: (defaultClassName: string, className?: string, classModifier?: string) => string;

package/dist/utilities/helpers/getComponentClassName.js

@@ -1,9 +1,9 @@
 import classNames from "classnames";
-const getLastClassName = (classNameToUse) => {
-    if (!classNameToUse) {
+const getLastClassName = (defaultClassName) => {
+    if (!defaultClassName) {
         return null;
     }
-    return classNameToUse.split(" ").filter(Boolean).at(-1);
+    return defaultClassName.split(" ").filter(Boolean).at(-1);
 };
 const listClassModifier = (classModifier) => {
     if (!classModifier) {
@@ -11,17 +11,16 @@ const listClassModifier = (classModifier) => {
     }
     return classModifier.split(" ");
 };
-export const getComponentClassName = (className, classModifier, defaultClassName) => {
-    const classNameToUse = className || defaultClassName;
-    if (!classNameToUse) {
+export const getComponentClassName = (defaultClassName, className, classModifier) => {
+    if (!defaultClassName) {
         return "";
     }
-    const classWithoutModifier = getLastClassName(classNameToUse);
+    const classWithoutModifier = getLastClassName(defaultClassName);
     const modifiers = listClassModifier(classModifier);
     const modifiersObject = modifiers
         .filter((it) => /\S/.test(it))
         .map((it) => {
         return `${classWithoutModifier}--${it}`;
     });
-    return classNames(classNameToUse, modifiersObject);
+    return classNames(defaultClassName, className, modifiersObject);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.5-ci.17",
+  "version": "1.0.5-ci.19",
   "description": "",
   "exports": {
     ".": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.17",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.19",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },