@axa-fr/canopee-react 2.0.0-alpha.73 → 2.0.0-alpha.75

package/dist/distributeur/Accordion/Accordion.d.ts

@@ -5,10 +5,8 @@ import type { AccordionVariant, TDefaultProps } from "./types";
 export type EnhancedProps = Partial<TDefaultProps> & {
     onlyOne?: boolean;
     className?: string;
-    /** @deprecated Use `variant` instead. */
-    classModifier?: string;
     variant?: AccordionVariant;
     children: React.ReactElement<CollapseProps>[] | React.ReactElement<CollapseProps>;
 };
-declare const Accordion: ({ className, classModifier, variant, children, onlyOne, }: EnhancedProps) => import("react/jsx-runtime").JSX.Element;
+declare const Accordion: ({ className, variant, children, onlyOne, }: EnhancedProps) => import("react/jsx-runtime").JSX.Element;
 export { Accordion };

package/dist/distributeur/Accordion/Accordion.js

@@ -5,13 +5,10 @@ import React, { useId } from "react";
 import { getClassName } from "../utilities/helpers/getClassName";
 import { CollapseCard } from "./CollapseCard";
 const defaultClassName = "af-accordion";
-const Accordion = ({ className, classModifier, variant = "default", children, onlyOne = false, }) => {
+const Accordion = ({ className, variant = "default", children, onlyOne = false, }) => {
     const componentClassName = getClassName({
         baseClassName: defaultClassName,
-        modifiers: [
-            variant !== "default" && variant,
-            ...(classModifier?.split(" ") ?? []),
-        ],
+        modifiers: [variant !== "default" && variant],
         className,
     });
     const id = useId();

package/dist/distributeur/Accordion/CollapseCard.d.ts

@@ -8,9 +8,7 @@ export type CollapseProps = {
     name?: string;
     onToggle?: DetailsHTMLAttributes<HTMLDetailsElement>["onToggle"];
     className?: string;
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     actions?: AccordionActions;
     variant?: AccordionVariant;
 };
-export declare const CollapseCard: ({ children, name, title, id, open, onToggle, className, classModifier, actions, variant, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CollapseCard: ({ children, name, title, id, open, onToggle, className, actions, variant, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Accordion/CollapseCard.js

@@ -2,13 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getClassName } from "../utilities/helpers/getClassName";
 import { Body } from "./Body";
 import { Header } from "./Header";
-export const CollapseCard = ({ children, name, title, id, open, onToggle, className, classModifier = "", actions, variant, }) => {
+export const CollapseCard = ({ children, name, title, id, open, onToggle, className, actions, variant, }) => {
     const headerId = id;
-    let newClassModifier = open ? "open" : "";
-    newClassModifier += ` ${classModifier}`;
     const componentClassName = getClassName({
         baseClassName: "af-accordion__details",
-        modifiers: newClassModifier.trim().split(" "),
+        modifiers: open ? ["open"] : [],
         className,
     });
     return (_jsxs("details", { open: open, name: name, className: componentClassName, onToggle: onToggle, children: [_jsx(Header, { id: headerId, actions: actions, variant: variant, children: title }), _jsx(Body, { children: children })] }));

package/dist/distributeur/Accordion/Header.d.ts

@@ -8,11 +8,9 @@ export type HeaderToggleElement = {
 export type HeaderProps = {
     children: React.ReactNode;
     className?: string;
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     id?: string;
     actions?: AccordionActions;
     variant?: AccordionVariant;
 };
-declare const Header: ({ children, className, classModifier, id, actions, variant, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ children, className, id, actions, variant }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export { Header };

package/dist/distributeur/Accordion/Header.js

@@ -6,10 +6,9 @@ import { Svg } from "../Svg/Svg";
 import { Title } from "../Title/Title";
 import { getClassName } from "../utilities/helpers/getClassName";
 const defaultClassName = "af-accordion__item-header";
-const Header = ({ children, className, classModifier, id, actions, variant, }) => {
+const Header = ({ children, className, id, actions, variant }) => {
     const componentClassName = getClassName({
         baseClassName: defaultClassName,
-        modifiers: classModifier?.split(" "),
         className,
     });
     return (_jsx("summary", { className: componentClassName, id: id, children: variant === "light" ? (_jsxs(Title, { heading: "h3", children: [_jsx(Svg, { src: arrow, className: "af-accordion__item-header-icon" }), children, actions

package/dist/distributeur/Action/Action.d.ts

@@ -2,11 +2,9 @@ import "@axa-fr/canopee-css/distributeur/Action/Action.css";
 import { type ComponentPropsWithRef } from "react";
 type ActionCoreProps = ComponentPropsWithRef<"a"> & {
     icon: string;
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
 };
 export declare const Action: {
-    ({ icon, className, classModifier, ...otherProps }: ActionCoreProps): import("react/jsx-runtime").JSX.Element;
+    ({ icon, className, ...otherProps }: ActionCoreProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/distributeur/Action/Action.js

@@ -3,12 +3,11 @@ import "@axa-fr/canopee-css/distributeur/Action/Action.css";
 import classNames from "classnames";
 import {} from "react";
 import { getClassName } from "../utilities/helpers/getClassName";
-export const Action = ({ icon, className, classModifier, ...otherProps }) => {
+export const Action = ({ icon, className, ...otherProps }) => {
     const componentClassName = classNames("btn", getClassName({
         baseClassName: "af-btn--circle",
-        modifiers: classModifier?.split(" "),
         className,
     }));
-    return (_jsx("a", { ...otherProps, className: componentClassName, children: _jsx("i", { role: "img", className: `glyphicon glyphicon-${icon}` }) }));
+    return (_jsx("a", { ...otherProps, className: componentClassName, children: _jsx("i", { role: "presentation", className: `glyphicon glyphicon-${icon}` }) }));
 };
 Action.displayName = "Action";

package/dist/distributeur/Form/Checkbox/CheckboxInput.js

@@ -5,8 +5,8 @@ import { Checkbox } from "./Checkbox";
 import { CheckboxModes } from "./CheckboxModes";
 const CheckboxInput = ({ label, mode = "default", options, children, ...otherProps }) => {
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, labelPosition: mode === CheckboxModes.classic ? "top" : "center", roleContainer: "group", ...otherProps, renderInput: ({ classModifier, id, ariaInvalid, errorId, ...props }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: id, mode: mode, options: newOptions, classModifier: ariaInvalid ? `${classModifier} error` : classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] }));
+    return (_jsx(Field, { label: label, labelPosition: mode === CheckboxModes.classic ? "top" : "center", roleContainer: "group", ...otherProps, renderInput: ({ inputClassName, id, ariaInvalid, errorId, ...props }) => {
+            return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: id, mode: mode, options: newOptions, className: ariaInvalid ? `${inputClassName} error` : inputClassName, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] }));
         } }));
 };
 CheckboxInput.displayName = "CheckboxInput";

package/dist/distributeur/Form/Checkbox/CheckboxItem.d.ts

@@ -1,8 +1,6 @@
 import { type ComponentPropsWithRef, type ReactNode } from "react";
 import "@axa-fr/canopee-css/distributeur/Form/Checkbox/Checkbox.css";
 type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     optionClassName?: string;
     children?: ReactNode;
     label?: ReactNode;
@@ -10,7 +8,7 @@ type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {
     variant?: "error" | "warning";
 };
 declare const CheckboxItem: {
-    ({ disabled, value, id, children, label, isChecked, className, classModifier, variant, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ disabled, value, id, children, label, isChecked, className, variant, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { CheckboxItem };

package/dist/distributeur/Form/Checkbox/CheckboxItem.js

@@ -4,11 +4,11 @@ import { useId } from "react";
 import { getOptionClassName } from "../core";
 import "@axa-fr/canopee-css/distributeur/Form/Checkbox/Checkbox.css";
 import { Svg } from "../../Svg";
-const CheckboxItem = ({ disabled = false, value = "", id, children, label, isChecked, className, classModifier, variant, ...otherProps }) => {
+const CheckboxItem = ({ disabled = false, value = "", id, children, label, isChecked, className, variant, ...otherProps }) => {
     const newLabel = children || label;
     const generatedId = useId();
     const newId = id ?? generatedId; // id is required on this component
-    const optionClassName = getOptionClassName(className ?? "", classModifier ?? "", "af-form__checkbox", disabled, variant);
+    const optionClassName = getOptionClassName(className ?? "", "af-form__checkbox", disabled, variant);
     return (_jsxs("div", { className: optionClassName, children: [_jsx("input", { ...otherProps, className: "af-form__input-checkbox", value: value, id: newId, disabled: disabled, checked: isChecked, type: "checkbox" }), _jsxs("label", { className: "af-form__label", htmlFor: newId, children: [_jsx("span", { className: "af-form__indicator", children: _jsx(Svg, { role: "presentation", className: "ok-icon", src: check }) }), _jsx("span", { className: "af-form__description", children: newLabel })] })] }));
 };
 CheckboxItem.displayName = "CheckboxItem";

package/dist/distributeur/Form/Choice/Choice.d.ts

@@ -8,8 +8,6 @@ type Props = Omit<ComponentPropsWithRef<typeof Radio>, "options" | "value"> & {
         value: boolean;
     }>;
     value?: boolean | string;
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
 };
 declare const Choice: {
     ({ children, value, options, name, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Form/Choice/ChoiceInput.js

@@ -6,6 +6,6 @@ const defaultOptions = [
     { label: "Oui", value: true },
     { label: "Non", value: false },
 ];
-const ChoiceInput = ({ label, options = defaultOptions, children, ...otherProps }) => (_jsx(Field, { label: label, roleContainer: "radiogroup", ...otherProps, renderInput: ({ classModifier, id, errorId, ariaInvalid, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Choice, { id: id, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, options: options, ...props }), children] })) }));
+const ChoiceInput = ({ label, options = defaultOptions, children, ...otherProps }) => (_jsx(Field, { label: label, roleContainer: "radiogroup", ...otherProps, renderInput: ({ inputClassName, id, errorId, ariaInvalid, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Choice, { id: id, className: inputClassName, "aria-describedby": errorId, "aria-invalid": ariaInvalid, options: options, ...props }), children] })) }));
 ChoiceInput.displayName = "ChoiceInput";
 export { ChoiceInput };

package/dist/distributeur/Form/Date/Date.d.ts

@@ -1,13 +1,12 @@
 import "@axa-fr/canopee-css/distributeur/Form/Date/Date.css";
 import { type ComponentPropsWithRef } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "value"> & {
-    /** @deprecated Use `className` and the native `disabled`/`required` props instead. */
-    classModifier?: string;
     defaultValue?: Date | string;
     value?: Date | string;
+    hasInfobulle?: boolean;
 };
 declare const Date: {
-    ({ className, classModifier, defaultValue, value, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ className, defaultValue, value, hasInfobulle, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Date };

package/dist/distributeur/Form/Date/Date.js

@@ -3,13 +3,13 @@ import "@axa-fr/canopee-css/distributeur/Form/Date/Date.css";
 import {} from "react";
 import { formatDateInputValue } from "../../utilities/helpers/date";
 import { getClassName } from "../../utilities/helpers/getClassName";
-const Date = ({ className, classModifier, defaultValue, value, ...otherProps }) => {
+const Date = ({ className, defaultValue, value, hasInfobulle, ...otherProps }) => {
     const componentClassName = getClassName({
         baseClassName: "af-form__input-date",
-        modifiers: classModifier?.split(" "),
+        modifiers: [hasInfobulle && "hasinfobulle"],
         className,
     });
-    return (_jsx("input", { className: componentClassName, type: "date", defaultValue: formatDateInputValue(defaultValue), value: formatDateInputValue(value), disabled: classModifier?.includes("disabled"), required: classModifier?.includes("required"), ...otherProps }));
+    return (_jsx("input", { className: componentClassName, type: "date", defaultValue: formatDateInputValue(defaultValue), value: formatDateInputValue(value), ...otherProps }));
 };
 Date.displayName = "Date";
 export { Date };

package/dist/distributeur/Form/Date/DateInput.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import {} from "react";
 import { Field } from "../core";
 import { Date } from "./Date";
-const DateInput = ({ children, ...otherProps }) => (_jsx(Field, { classNameSuffix: "date", ...otherProps, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Date, { id: id, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] })) }));
+const DateInput = ({ children, ...otherProps }) => (_jsx(Field, { fieldClassNameSuffix: "date", ...otherProps, renderInput: ({ id, inputClassName, ariaInvalid, errorId, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Date, { id: id, className: inputClassName, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] })) }));
 DateInput.displayName = "DateInput";
 export { DateInput };

package/dist/distributeur/Form/File/File.d.ts

@@ -2,8 +2,6 @@ import { type DropzoneInputProps, type DropzoneOptions, type FileRejection } fro
 import type { FileActions } from "./constants";
 type Dropzone = DropzoneInputProps & DropzoneOptions;
 type Props = Omit<Dropzone, "onDrop" | "onChange"> & {
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     label?: string;
     icon?: string;
     onChange: (data: onChangeProps) => void;
@@ -22,5 +20,5 @@ type onChangeProps = {
     values: CustomFile[];
     errors?: CustomFile<FileRejection>[];
 };
-declare const File: ({ className, classModifier, id, name, disabled, onChange, multiple, maxSize, minSize, accept, readOnly, placeholder, label, icon, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const File: ({ className, id, name, disabled, onChange, multiple, maxSize, minSize, accept, readOnly, placeholder, label, icon, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { File };

package/dist/distributeur/Form/File/File.js

@@ -3,7 +3,7 @@ import { useId } from "react";
 import { useDropzone, } from "react-dropzone";
 import { Button } from "../../Button/Button";
 import { getClassName } from "../../utilities/helpers/getClassName";
-const File = ({ className, classModifier, id, name, disabled, onChange, multiple = true, maxSize = 20000000, minSize = 0, accept, readOnly, placeholder = "Glissez/déposez vos fichiers", label = "Parcourir", icon = "open", ...otherProps }) => {
+const File = ({ className, id, name, disabled, onChange, multiple = true, maxSize = 20000000, minSize = 0, accept, readOnly, placeholder = "Glissez/déposez vos fichiers", label = "Parcourir", icon = "open", ...otherProps }) => {
     const valueId = useId();
     const errorsId = useId();
     const handleOnChange = (acceptedFiles, rejectedFiles) => {
@@ -56,7 +56,6 @@ const File = ({ className, classModifier, id, name, disabled, onChange, multiple
     });
     const componentClassName = getClassName({
         baseClassName: "af-form__file-input",
-        modifiers: classModifier?.split(" "),
         className,
     });
     return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { ...getRootProps({ className: "drop-box" }), children: [_jsx("input", { ...getInputProps({ id, name, readOnly, ...otherProps }) }), _jsx("div", { children: placeholder })] }), _jsx(Button, { className: "af-btn--file", leftIcon: _jsx("i", { className: `glyphicon glyphicon-${icon}` }), onClick: open, disabled: disabled, children: label })] }));

package/dist/distributeur/Form/File/FileInput.d.ts

@@ -8,6 +8,8 @@ type FileTableProps = ComponentPropsWithoutRef<typeof FileTable>;
 type Props = ConsumerFieldProps & FileProps & Pick<FileTableProps, "values" | "errors"> & {
     fileLabel?: string;
     helpMessage?: ReactNode;
+} & {
+    tableClassName?: string;
 };
-declare const FileInput: ({ values, id, name, onChange, label, errors, fileLabel, classModifier, children, ...otherFileProps }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const FileInput: ({ values, id, name, onChange, label, errors, fileLabel, children, ...otherFileProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { FileInput };

package/dist/distributeur/Form/File/FileInput.js

@@ -4,7 +4,7 @@ import { useId } from "react";
 import { Field } from "../core";
 import { File } from "./File";
 import { FileTable } from "./FileTable";
-const FileInput = ({ values = [], id, name = "", onChange, label, errors, fileLabel, classModifier, children, ...otherFileProps }) => {
+const FileInput = ({ values = [], id, name = "", onChange, label, errors, fileLabel, children, ...otherFileProps }) => {
     const onDeleteClick = (selectedId, selectInputId) => {
         const newValues = values.filter((element) => element.id !== selectedId);
         onChange({
@@ -16,6 +16,6 @@ const FileInput = ({ values = [], id, name = "", onChange, label, errors, fileLa
     };
     const generatedId = useId();
     const actualId = id ?? generatedId;
-    return (_jsx(Field, { label: label, labelPosition: "top", id: actualId, classNameSuffix: "file", ...otherFileProps, renderInput: ({ classModifier: inputClassModifiers, id: inputId, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(File, { id: inputId, name: name, onChange: onChange, classModifier: inputClassModifiers, label: fileLabel, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), children] })), appendChildren: _jsx(FileTable, { errors: errors, values: values, onClick: (selectedId) => onDeleteClick(selectedId, actualId), classModifier: classModifier }) }));
+    return (_jsx(Field, { label: label, labelPosition: "top", id: actualId, fieldClassNameSuffix: "file", ...otherFileProps, renderInput: ({ inputClassName: inputClassModifiers, id: inputId, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(File, { id: inputId, name: name, onChange: onChange, className: inputClassModifiers, label: fileLabel, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), children] })), appendChildren: _jsx(FileTable, { errors: errors, values: values, onClick: (selectedId) => onDeleteClick(selectedId, actualId), className: otherFileProps.tableClassName }) }));
 };
 export { FileInput };

package/dist/distributeur/Form/File/FileLine.d.ts

@@ -2,8 +2,7 @@ import type { CustomFile } from "./File";
 type Props = CustomFile & {
     onClick: (id: string) => void;
     className?: string;
-    classModifier?: string;
     disabled?: boolean;
 };
-declare const FileLine: ({ className, classModifier, file, disabled, id, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const FileLine: ({ className, file, disabled, id, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
 export { FileLine };

package/dist/distributeur/Form/File/FileLine.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../../utilities";
-const FileLine = ({ className, classModifier, file, disabled, id, onClick, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-form__file-line");
+import { getClassName } from "../../utilities";
+const FileLine = ({ className, file, disabled, id, onClick }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-form__file-line",
+        className,
+    });
     return (_jsxs("li", { className: componentClassName, children: [file && file.type && file.type.startsWith("image") ? (_jsx("i", { className: "glyphicon glyphicon-picture" })) : (_jsx("i", { className: "glyphicon glyphicon-file" })), _jsx("span", { children: file.name }), _jsx("span", { children: file.size }), _jsx("button", { disabled: disabled, type: "button", className: "af-link af-link--delete-file", onClick: () => onClick(id), children: _jsx("span", { className: "af-link__text", children: "Supprimer" }) })] }));
 };
 export { FileLine };

package/dist/distributeur/Form/File/FileTable.d.ts

@@ -7,8 +7,7 @@ type Props = Pick<FileLineProps, "onClick"> & {
     errors?: FileRejection[];
     values?: CustomFile[];
     className?: string;
-    classModifier?: string;
     disabled?: boolean;
 };
-declare const FileTable: ({ errors, values, className, classModifier, disabled, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const FileTable: ({ errors, values, className, disabled, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
 export { FileTable };

package/dist/distributeur/Form/File/FileTable.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities";
 import { FileErrors } from "./FileErrors";
 import { FileLine } from "./FileLine";
-const FileTable = ({ errors, values, className, classModifier, disabled, onClick, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "custom-table-file af-file-table");
+const FileTable = ({ errors, values, className, disabled, onClick }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-file-table",
+        className: `custom-table-file ${className ?? ""}`,
+    });
     return (_jsxs("div", { className: componentClassName, children: [errors && errors.length > 0 ? _jsx(FileErrors, { errors: errors }) : null, values && values.length > 0 ? (_jsx("ul", { className: "af-form__file-list", children: values.map(({ file, id }) => (_jsx(FileLine, { disabled: disabled, file: file, onClick: onClick, id: id }, id))) })) : null] }));
 };
 export { FileTable };

package/dist/distributeur/Form/MultiSelect/MultiSelectInput.js

@@ -4,7 +4,7 @@ import {} from "react";
 import { Field } from "../core";
 import { MultiSelect } from "./MultiSelect";
 const MultiSelectInput = ({ label, children, ...multiSelectProps }) => {
-    return (_jsx(Field, { label: label, ...multiSelectProps, classNameSuffix: "select", renderInput: ({ id, ariaInvalid, errorId, ...props }) => {
+    return (_jsx(Field, { label: label, ...multiSelectProps, fieldClassNameSuffix: "select", renderInput: ({ id, ariaInvalid, errorId, ...props }) => {
             return (_jsxs(_Fragment, { children: [_jsx(MultiSelect, { id: id, "aria-invalid": ariaInvalid, "aria-describedby": errorId, ...props }), children] }));
         } }));
 };

package/dist/distributeur/Form/NestedQuestion/NestedQuestion.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/NestedQuestion/NestedQuestion.css";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities";
 export const NestedQuestion = ({ children, className, }) => {
-    const componentClassName = getComponentClassName(className, "", "af-form__nested-question");
-    return (_jsxs("section", { className: componentClassName, children: [_jsx("div", { className: `${componentClassName}-arrow` }), _jsx("section", { children: children })] }));
+    const componentClassName = getClassName({
+        baseClassName: "af-form__nested-question",
+        className,
+    });
+    return (_jsxs("section", { className: componentClassName, children: [_jsx("div", { className: "af-form__nested-question-arrow" }), _jsx("section", { children: children })] }));
 };

package/dist/distributeur/Form/Number/Number.d.ts

@@ -1,11 +1,8 @@
 import "@axa-fr/canopee-css/distributeur/Form/Text/Text.css";
 import { type ComponentPropsWithRef } from "react";
-type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {
-    /** @deprecated Use `className` and the native `required` prop instead. */
-    classModifier?: string;
-};
+type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {};
 declare const Number: {
-    ({ id, className, classModifier, required, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ id, className, required, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Number };

package/dist/distributeur/Form/Number/Number.js

@@ -2,15 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Text/Text.css";
 import { useId } from "react";
 import { getClassName } from "../../utilities/helpers/getClassName";
-const Number = ({ id, className, classModifier, required, ...otherProps }) => {
+const Number = ({ id, className, required, ...otherProps }) => {
     const inputUseId = useId();
     const inputId = id ?? inputUseId;
     const componentClassName = getClassName({
         baseClassName: "af-form__input-text",
-        modifiers: classModifier?.split(" "),
         className,
     });
-    return (_jsx("input", { className: componentClassName, id: inputId, type: "number", required: required || classModifier?.includes("required"), ...otherProps }));
+    return (_jsx("input", { className: componentClassName, id: inputId, type: "number", required: required, ...otherProps }));
 };
 Number.displayName = "Number";
 export { Number };

package/dist/distributeur/Form/Number/NumberInput.js

@@ -3,5 +3,5 @@ import {} from "react";
 import { Field } from "../core";
 import { Number } from "./Number";
 export const NumberInput = ({ children, ...props }) => {
-    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(Number, { id: id, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), children] })) }));
+    return (_jsx(Field, { ...props, renderInput: ({ id, inputClassName, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(Number, { id: id, className: inputClassName, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), children] })) }));
 };

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

@@ -10,7 +10,7 @@ export declare enum RadioModes {
 }
 type Props = {
     options: Option[];
-} & ((Omit<ComponentPropsWithRef<typeof RadioItem>, "id" | "label" | "className"> & {
+} & ((Omit<ComponentPropsWithRef<typeof RadioItem>, "id" | "label"> & {
     mode?: "classic" | "default" | "inline";
 }) | (ComponentPropsWithRef<typeof RadioCardGroup> & {
     mode: "cardRadio";

package/dist/distributeur/Form/Radio/RadioInput.js

@@ -5,7 +5,7 @@ import { Radio, RadioModes } from "./Radio";
 const RadioInput = ({ label, mode = "default", options, children, ...props }) => {
     const labelPosition = mode === RadioModes.classic ? "top" : "center";
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: "radiogroup", ...props, renderInput: ({ classModifier, ...radioProps }) => (_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ...radioProps, children: children })) }));
+    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: "radiogroup", ...props, renderInput: ({ inputClassName, ...radioProps }) => (_jsx(Radio, { options: newOptions, mode: mode, className: inputClassName, ...radioProps, children: children })) }));
 };
 RadioInput.displayName = "EnhancedInputRadio";
 export { RadioInput };

package/dist/distributeur/Form/Radio/RadioItem.d.ts

@@ -1,14 +1,12 @@
 import "@axa-fr/canopee-css/distributeur/Form/Radio/Radio.css";
 import { type ComponentPropsWithRef, type ReactNode } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "checked" | "type"> & {
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     optionClassName?: string;
     label?: ReactNode;
     isChecked?: boolean;
 };
 declare const RadioItem: {
-    ({ value, id, isChecked, label, classModifier, className, disabled, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ value, id, isChecked, label, className, disabled, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { RadioItem };

package/dist/distributeur/Form/Radio/RadioItem.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Radio/Radio.css";
 import { useId } from "react";
 import { getOptionClassName } from "../core";
-const RadioItem = ({ value = "", id, isChecked, label, classModifier = "", className = "", disabled = false, ...otherProps }) => {
-    const optionClassName = getOptionClassName(className, classModifier, "af-form__radio", disabled);
+const RadioItem = ({ value = "", id, isChecked, label, className = "", disabled = false, ...otherProps }) => {
+    const optionClassName = getOptionClassName(className, "af-form__radio", disabled);
     const generatedId = useId();
     const newId = id ?? generatedId;
     return (_jsxs("div", { className: optionClassName, children: [_jsx("input", { ...otherProps, className: "af-form__input-radio", id: newId, type: "radio", value: value, checked: isChecked, disabled: disabled }), _jsx("label", { className: "af-form__label", htmlFor: newId, children: _jsx("span", { className: "af-form__description", children: label }) })] }, value));

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

@@ -1,26 +1,10 @@
-import { type ComponentProps, type OptionHTMLAttributes, type PropsWithChildren } from "react";
+import { type ComponentProps, type PropsWithChildren } from "react";
 import { SelectDefault } from "./SelectDefault";
-import { SelectDefaultWithOptions } from "./SelectDefaultWithOptions";
-type SelectProps = PropsWithChildren<ComponentProps<typeof SelectDefault | typeof SelectDefaultWithOptions> & {
-    /**
-     * @deprecated Use `children` instead
-     * Instead of
-     * ```jsx
-     * <SelectBase options={[{ value: "1", label: "Option 1" }]} />
-     * ```
-     * you can now do something like :
-     * ```jsx
-     * <SelectBase>
-     *   <option value="1">Option 1</option>
-     * </SelectBase>
-     * ```
-     * It allows you to use the `optgroup` tag for example.
-     */
-    options?: OptionHTMLAttributes<HTMLOptionElement>[];
+type SelectProps = PropsWithChildren<ComponentProps<typeof SelectDefault> & {
     mode?: "default" | "base";
 }>;
 declare const Select: {
-    ({ mode, children, options, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    ({ mode, children, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Select };

package/dist/distributeur/Form/Select/Select.js

@@ -2,12 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import {} from "react";
 import { SelectBase } from "./SelectBase";
 import { SelectDefault } from "./SelectDefault";
-import { SelectDefaultWithOptions } from "./SelectDefaultWithOptions";
-const Select = ({ mode = "default", children, options, ...props }) => {
+const Select = ({ mode = "default", children, ...props }) => {
     if (mode === "default") {
-        return options ? (_jsx(SelectDefaultWithOptions, { ...props, options: options })) : (_jsx(SelectDefault, { ...props, children: children }));
+        return _jsx(SelectDefault, { ...props, children: children });
     }
-    return (_jsx(SelectBase, { ...props, options: options, children: children }));
+    return _jsx(SelectBase, { ...props, children: children });
 };
 Select.displayName = "Select";
 export { Select };

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

@@ -1,29 +1,8 @@
 import "@axa-fr/canopee-css/distributeur/Form/Select/Select.css";
-import { type ComponentPropsWithRef, type OptionHTMLAttributes } from "react";
-type Props = ComponentPropsWithRef<"select"> & {
-    /**
-     * @deprecated Use `children` instead
-     * Instead of
-     * ```jsx
-     * <SelectBase options={[{ value: "1", label: "Option 1" }]} />
-     * ```
-     * you can now do something like :
-     * ```jsx
-     * <SelectBase>
-     *   <option value="1">Option 1</option>
-     * </SelectBase>
-     * ```
-     * It allows you to use the `optgroup` tag for example.
-     */
-    options?: OptionHTMLAttributes<HTMLOptionElement>[];
-    /** @deprecated Use `className` and the native `required` prop instead. */
-    classModifier?: string;
-};
-/**
- * @deprecated Use Select instead
- */
+import { type ComponentPropsWithRef } from "react";
+type Props = ComponentPropsWithRef<"select">;
 declare const SelectBase: {
-    ({ options, id, className, classModifier, required, children, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ id, className, required, children, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { SelectBase };

package/dist/distributeur/Form/Select/SelectBase.js

@@ -2,17 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Select/Select.css";
 import {} from "react";
 import { getClassName } from "../../utilities/helpers/getClassName";
-/**
- * @deprecated Use Select instead
- */
-const SelectBase = ({ options, id, className, classModifier, required, children, ...otherProps }) => {
+const SelectBase = ({ id, className, required, children, ...otherProps }) => {
     const componentClassName = getClassName({
         baseClassName: "af-form__input-select",
-        modifiers: classModifier?.split(" "),
         className,
     });
-    return (_jsxs("div", { className: "af-form__select-container", children: [_jsx("select", { ...otherProps, id: id, className: componentClassName, required: classModifier?.includes("required") || required, children: children ??
-                    options?.map(({ label, ...opt }) => (_jsx("option", { ...opt, children: label }, opt.value?.toString()))) }), _jsx("span", { "aria-controls": id, className: "glyphicon glyphicon-menu-down" })] }));
+    return (_jsxs("div", { className: "af-form__select-container", children: [_jsx("select", { ...otherProps, id: id, className: componentClassName, required: required, children: children }), _jsx("span", { "aria-controls": id, className: "glyphicon glyphicon-menu-down" })] }));
 };
 SelectBase.displayName = "SelectBase";
 export { SelectBase };

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

@@ -1,10 +1,10 @@
 import { type ComponentPropsWithRef } from "react";
 import { SelectBase } from "./SelectBase";
-type Props = Omit<ComponentPropsWithRef<typeof SelectBase> & {
+type Props = ComponentPropsWithRef<typeof SelectBase> & {
     forceDisplayPlaceholder?: boolean;
     placeholder?: string;
-    children: React.ReactNode;
-}, "options">;
+    children?: React.ReactNode;
+};
 declare const SelectDefault: {
     ({ onChange, forceDisplayPlaceholder, value, defaultValue, required, placeholder, id, children, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/distributeur/Form/Select/SelectInput.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import {} from "react";
 import { Field } from "../core";
 import { Select } from "./Select";
-const SelectInput = ({ label, options, children, ...props }) => (_jsx(Field, { label: label, classNameSuffix: "select", ...props, renderInput: ({ classModifier, id, ariaInvalid, errorId, ...otherSelectProps }) => (_jsxs(_Fragment, { children: [_jsx(Select, { id: id, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, options: options, ...otherSelectProps }), children] })) }));
+const SelectInput = ({ label, options, children, ...props }) => (_jsx(Field, { label: label, fieldClassNameSuffix: "select", ...props, renderInput: ({ inputClassName, id, ariaInvalid, errorId, ...otherSelectProps }) => (_jsxs(_Fragment, { children: [_jsx(Select, { id: id, className: inputClassName, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...otherSelectProps, children: options.map(({ label: optionLabel, ...option }) => (_jsx("option", { ...option, children: optionLabel }, option.value?.toString()))) }), children] })) }));
 SelectInput.displayName = "SelectInput";
 export { SelectInput };

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

@@ -1,3 +1,2 @@
 export { Select } from "./Select";
-export { SelectBase } from "./SelectBase";
 export { SelectInput } from "./SelectInput";