@axa-fr/design-system-slash-react 1.1.1-alpha.7 → 1.1.1-alpha.71

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

@@ -1,6 +1,6 @@
 import { ComponentProps } from "react";
-import { Field } from "../core";
+import { LegacyField } from "../core";
 import { Checkbox } from "./Checkbox";
-type Props = Omit<ComponentProps<typeof Checkbox> & ComponentProps<typeof Field>, "children" | "placeholder">;
+type Props = Omit<ComponentProps<typeof Checkbox> & ComponentProps<typeof LegacyField>, "children" | "placeholder">;
 declare const CheckboxInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { CheckboxInput };

package/dist/Form/Checkbox/CheckboxInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Field, useOptionsWithId } from "../core";
+import { LegacyField, useOptionsWithId } from "../core";
 import { Checkbox } from "./Checkbox";
 import { CheckboxModes } from "./CheckboxModes";
 const CheckboxInput = forwardRef(({ mode, messageType, message, classModifier, options, classNameContainerLabel, classNameContainerInput, label, isVisible, className, forceDisplayMessage, required, ...checkboxProps }, inputRef) => {
@@ -12,7 +12,7 @@ const CheckboxInput = forwardRef(({ mode, messageType, message, classModifier, o
         rowModifier += " required";
     }
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, id: newOptions[0].id, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: _jsx(Checkbox, { mode: mode, options: newOptions, classModifier: classModifier, ref: inputRef, ...checkboxProps }) }));
+    return (_jsx(LegacyField, { label: label, id: newOptions[0].id, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: _jsx(Checkbox, { mode: mode, options: newOptions, classModifier: classModifier, ref: inputRef, ...checkboxProps }) }));
 });
 CheckboxInput.displayName = "CheckboxInput";
 export { CheckboxInput };

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

@@ -1,6 +1,6 @@
 import { type ComponentProps } from "react";
-import { Field } from "../core";
+import { LegacyField } from "../core";
 import { Choice } from "./Choice";
-type Props = ComponentProps<typeof Choice> & Omit<ComponentProps<typeof Field>, "children">;
+type Props = ComponentProps<typeof Choice> & Omit<ComponentProps<typeof LegacyField>, "children">;
 declare const ChoiceInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { ChoiceInput };

package/dist/Form/Choice/ChoiceInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Field, useInputClassModifier, useOptionsWithId } from "../core";
+import { LegacyField, useInputClassModifier, useOptionsWithId } from "../core";
 import { Choice } from "./Choice";
 const defaultOptions = [
     { label: "Oui", value: true, id: "radioItemTrue" },
@@ -14,7 +14,7 @@ const ChoiceInput = forwardRef(({ id, messageType, message, className, classModi
         ...o,
         value: o.value === "true",
     }));
-    return (_jsx(Field, { label: label, id: firstId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: _jsx(Choice, { ...otherProps, id: id, ref: inputRef, classModifier: inputClassModifier, options: options ? choiceOptions : undefined, required: required, disabled: disabled }) }));
+    return (_jsx(LegacyField, { label: label, id: firstId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: _jsx(Choice, { ...otherProps, id: id, ref: inputRef, classModifier: inputClassModifier, options: options ? choiceOptions : undefined, required: required, disabled: disabled }) }));
 });
 ChoiceInput.displayName = "ChoiceInput";
 export { ChoiceInput };

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

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { Field } from "../core";
+import { LegacyField } from "../core";
 import { Date } from "./Date";
-type Props = Omit<ComponentPropsWithoutRef<typeof Date>, "placeholderText"> & ComponentPropsWithoutRef<typeof Field> & {
+type Props = Omit<ComponentPropsWithoutRef<typeof Date>, "placeholderText"> & ComponentPropsWithoutRef<typeof LegacyField> & {
     placeholder?: string;
     helpMessage?: ReactNode;
     children?: ReactNode;

package/dist/Form/Date/DateInput.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
 import { Date } from "./Date";
 const DateInput = ({ classModifier = "", message, children, helpMessage, id, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, disabled = false, required, ...otherProps }) => {
     const inputUseId = useId();
     const inputId = id ?? inputUseId;
     const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    return (_jsxs(Field, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__date", classModifier: inputFieldClassModifier, children: [_jsx(Date, { id: inputId, classModifier: inputClassModifier, disabled: disabled, required: required, ...otherProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__date", classModifier: inputFieldClassModifier, children: [_jsx(Date, { id: inputId, classModifier: inputClassModifier, disabled: disabled, required: required, ...otherProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
 };
 export { DateInput };

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

@@ -1,4 +1,5 @@
 import { DropzoneInputProps, DropzoneOptions, FileRejection } from "react-dropzone";
+import { FileActions } from "./constants";
 type Dropzone = DropzoneInputProps & DropzoneOptions;
 type Props = Omit<Dropzone, "onDrop" | "onChange"> & {
     classModifier?: string;
@@ -16,6 +17,7 @@ export type CustomFile<T = FilePreview> = {
 type onChangeProps = {
     id?: string;
     name?: string;
+    fileAction?: FileActions;
     values: CustomFile[];
     errors?: CustomFile<FileRejection>[];
 };

package/dist/Form/File/File.js

@@ -41,6 +41,7 @@ const File = ({ className, classModifier, id, name, disabled, onChange, multiple
             values,
             errors,
             name,
+            fileAction: "add",
             id,
         };
         onChange(onChangeProps);

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

@@ -1,9 +1,9 @@
 import "@axa-fr/design-system-slash-css/dist/Form/File/File.scss";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { Field } from "../core";
+import { LegacyField } from "../core";
 import { File } from "./File";
 import { FileTable } from "./FileTable";
-type FieldProps = ComponentPropsWithoutRef<typeof Field>;
+type FieldProps = ComponentPropsWithoutRef<typeof LegacyField>;
 type FileProps = ComponentPropsWithoutRef<typeof File>;
 type FileTableProps = ComponentPropsWithoutRef<typeof FileTable>;
 type Props = FieldProps & FileProps & Pick<FileTableProps, "values" | "errors"> & {

package/dist/Form/File/FileInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Form/File/File.scss";
 import { useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
 import { File } from "./File";
 import { FileTable } from "./FileTable";
 const FileInput = ({ values = [], name = "", onChange, classModifier = "", message, children, helpMessage, id = "", forceDisplayMessage, messageType, classNameContainerLabel, classNameContainerInput, label, isVisible, className, errors, fileLabel, disabled = false, required, ...otherFileProps }) => {
@@ -11,12 +11,13 @@ const FileInput = ({ values = [], name = "", onChange, classModifier = "", messa
             values: newValues,
             name,
             id: selectInputId,
+            fileAction: "delete",
         });
     };
     const inputUseId = useId();
     const inputId = id ?? inputUseId;
     const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
     const rowModifier = `${inputFieldClassModifier} label-top`;
-    return (_jsxs(Field, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__file", classModifier: inputFieldClassModifier, children: [_jsx(File, { id: inputId, name: name, onChange: onChange, disabled: disabled, classModifier: inputClassModifier, label: fileLabel, required: required || classModifier?.includes("required"), ...otherFileProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message }), _jsx(FileTable, { errors: errors, values: values, onClick: (selectedId) => onDeleteClick(selectedId, inputId), classModifier: classModifier })] }));
+    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__file", classModifier: inputFieldClassModifier, children: [_jsx(File, { id: inputId, name: name, onChange: onChange, disabled: disabled, classModifier: inputClassModifier, label: fileLabel, required: required || classModifier?.includes("required"), ...otherFileProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message }), _jsx(FileTable, { errors: errors, values: values, onClick: (selectedId) => onDeleteClick(selectedId, inputId), classModifier: classModifier })] }));
 };
 export { FileInput };

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

@@ -0,0 +1 @@
+export type FileActions = "add" | "delete";

package/dist/Form/File/constants.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,6 @@
-export { FileInput } from "./FileInput";
 export { File } from "./File";
-export { FileTable } from "./FileTable";
-export { FileLine } from "./FileLine";
+export type { FilePreview } from "./File";
 export { FileErrors } from "./FileErrors";
+export { FileInput } from "./FileInput";
+export { FileLine } from "./FileLine";
+export { FileTable } from "./FileTable";

package/dist/Form/File/index.js

@@ -1,5 +1,5 @@
-export { FileInput } from "./FileInput";
 export { File } from "./File";
-export { FileTable } from "./FileTable";
-export { FileLine } from "./FileLine";
 export { FileErrors } from "./FileErrors";
+export { FileInput } from "./FileInput";
+export { FileLine } from "./FileLine";
+export { FileTable } from "./FileTable";

package/dist/Form/MultiSelect/MultiSelectInput.d.ts

@@ -1,8 +1,8 @@
 import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
 import { type ComponentProps, type ReactNode } from "react";
-import { Field } from "../core";
+import { LegacyField } from "../core";
 import { MultiSelect } from "./MultiSelect";
-type Props = ComponentProps<typeof Field> & ComponentProps<typeof MultiSelect> & {
+type Props = ComponentProps<typeof LegacyField> & ComponentProps<typeof MultiSelect> & {
     helpMessage?: ReactNode;
 };
 declare const MultiSelectInput: ({ classModifier, message, children, helpMessage, id, disabled, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, required, ...multiSelectProps }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/MultiSelect/MultiSelectInput.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
 import { useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
 import { MultiSelect } from "./MultiSelect";
 const MultiSelectInput = ({ classModifier, message, children, helpMessage, id, disabled, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, required, ...multiSelectProps }) => {
     const { inputFieldClassModifier } = useInputClassModifier(classModifier ?? "", disabled ?? false, Boolean(children), required);
     const generatedId = useId();
     const inputId = id || generatedId;
-    return (_jsxs(Field, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__select", classModifier: inputFieldClassModifier, children: [_jsx(MultiSelect, { inputId: inputId, disabled: disabled, required: required, ...multiSelectProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__select", classModifier: inputFieldClassModifier, children: [_jsx(MultiSelect, { inputId: inputId, disabled: disabled, required: required, ...multiSelectProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
 };
 export { MultiSelectInput };

package/dist/Form/NestedQuestion/NestedQuestion.d.ts

@@ -0,0 +1,5 @@
+import "@axa-fr/design-system-slash-css/dist/Form/NestedQuestion/NestedQuestion.scss";
+import { PropsWithChildren } from "react";
+export declare const NestedQuestion: ({ children, className, }: {
+    className?: string;
+} & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/NestedQuestion/NestedQuestion.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Form/NestedQuestion/NestedQuestion.scss";
+import { getComponentClassName } 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 })] }));
+};

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

@@ -2,9 +2,9 @@ import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from "react";
-import { Field } from "../core";
+import { LegacyField } from "../core";
 import { Number } from "./Number";
-type Props = ComponentPropsWithoutRef<typeof Field> & ComponentPropsWithRef<typeof Number> & {
+type Props = ComponentPropsWithoutRef<typeof LegacyField> & ComponentPropsWithRef<typeof Number> & {
     helpMessage?: ReactNode;
     children?: ReactNode;
 };

package/dist/Form/Number/NumberInput.js

@@ -3,11 +3,11 @@ import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { useId, } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
 import { Number } from "./Number";
 export const NumberInput = ({ message, children, helpMessage, id, label, classNameContainerLabel, classNameContainerInput, forceDisplayMessage, messageType, isVisible, className, disabled = false, classModifier = "", required, ...otherProps }) => {
     const inputUseId = useId();
     const inputId = id ?? inputUseId;
     const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    return (_jsxs(Field, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__text", classModifier: inputFieldClassModifier, children: [_jsx(Number, { id: inputId, classModifier: inputClassModifier, disabled: disabled, ...otherProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__text", classModifier: inputFieldClassModifier, children: [_jsx(Number, { id: inputId, classModifier: inputClassModifier, disabled: disabled, ...otherProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
 };

package/dist/Form/Pass/PassInput.d.ts

@@ -1,8 +1,8 @@
 import { ComponentProps, ReactNode } from "react";
-import { Field } from "../core";
+import { LegacyField } from "../core";
 import { Pass } from "./Pass";
 type PassProps = ComponentProps<typeof Pass>;
-type Props = ComponentProps<typeof Field> & Omit<PassProps, "onToggleType" | "type"> & {
+type Props = ComponentProps<typeof LegacyField> & Omit<PassProps, "onToggleType" | "type"> & {
     helpMessage?: ReactNode;
     score?: string;
 };

package/dist/Form/Pass/PassInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
 import { Pass } from "./Pass";
 const strengthList = {
     0: "bad",
@@ -29,6 +29,6 @@ const PassInput = ({ message, children, helpMessage, id, disabled = false, label
     const inputId = useId();
     const finalId = id ?? inputId;
     const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifierStrength, disabled, Boolean(children), required);
-    return (_jsx(Field, { label: label, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, id: finalId, classModifier: `${classModifierStrength} ${inputFieldClassModifier}`, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: _jsxs(FieldInput, { className: "af-form__pass-container", classModifier: inputFieldClassModifier, children: [_jsx(Pass, { ...passProps, type: type, id: inputId, disabled: disabled, classModifier: inputClassModifier, onToggleType: () => setType(type === "password" ? "text" : "password") }), children, _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }) }));
+    return (_jsx(LegacyField, { label: label, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, id: finalId, classModifier: `${classModifierStrength} ${inputFieldClassModifier}`, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: _jsxs(FieldInput, { className: "af-form__pass-container", classModifier: inputFieldClassModifier, children: [_jsx(Pass, { ...passProps, type: type, id: inputId, disabled: disabled, classModifier: inputClassModifier, onToggleType: () => setType(type === "password" ? "text" : "password") }), children, _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }) }));
 };
 export { PassInput };

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

@@ -31,16 +31,12 @@ declare const RadioInput: import("react").ForwardRefExoticComponent<Omit<{
     roleContainer?: string;
     ariaLabelContainer?: string;
     isLabelContainerLinkedToInput?: boolean;
-} & Omit<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "type" | "checked"> & {
+} & Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {
     classModifier?: string;
     optionClassName?: string;
     label?: import("react").ReactNode;
     isChecked?: boolean;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "label" | "className" | "id"> & {
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "label" | "className" | "id"> & {
     options: import("../core").Option[];
     mode?: keyof typeof RadioModes;
 }, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/Radio/RadioInput.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Field, getFirstId, useInputClassModifier, useOptionsWithId, } from "../core";
+import { LegacyField, getFirstId, useInputClassModifier, useOptionsWithId, } from "../core";
 import { Radio, RadioModes } from "./Radio";
 const RadioInput = forwardRef(({ mode, messageType, message, className, classModifier = "", isVisible, options, classNameContainerLabel, classNameContainerInput, label, forceDisplayMessage, children, required, disabled = false, ariaLabelContainer, ...radioProps }, inputRef) => {
     const rowModifier = `${classModifier ?? ""}${mode === RadioModes.classic ? " label-top " : ""}`;
     const newOptions = useOptionsWithId(options);
     const firstId = getFirstId(newOptions);
     const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    return (_jsxs(Field, { label: label, id: firstId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier + inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, roleContainer: "radiogroup", ariaLabelContainer: ariaLabelContainer ?? label?.toString(), isLabelContainerLinkedToInput: false, children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: inputClassModifier, ref: inputRef, disabled: disabled, required: required || classModifier?.includes("required"), ...radioProps }), children] }));
+    return (_jsxs(LegacyField, { label: label, id: firstId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier + inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, roleContainer: "radiogroup", ariaLabelContainer: ariaLabelContainer ?? label?.toString(), isLabelContainerLinkedToInput: false, children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: inputClassModifier, ref: inputRef, disabled: disabled, required: required || classModifier?.includes("required"), ...radioProps }), children] }));
 });
 RadioInput.displayName = "EnhancedInputRadio";
 export { RadioInput };

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

@@ -1,7 +1,7 @@
 import { ComponentProps, PropsWithChildren, ReactNode } from "react";
-import { Field } from "../core";
+import { LegacyField } from "../core";
 import { Select } from "./Select";
-type Props = ComponentProps<typeof Field> & ComponentProps<typeof Select> & {
+type Props = ComponentProps<typeof LegacyField> & ComponentProps<typeof Select> & {
     helpMessage?: ReactNode;
 };
 declare const SelectInput: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<Props>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/Form/Select/SelectInput.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
 import { Select } from "./Select";
 const SelectInput = forwardRef(({ classModifier = "", message, children, helpMessage, id, disabled = false, label, classNameContainerLabel, classNameContainerInput, messageType, isVisible, forceDisplayMessage, className, required, ...otherSelectProps }, inputRef) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    return (_jsxs(Field, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__select", classModifier: inputFieldClassModifier, children: [_jsx(Select, { id: inputId, disabled: disabled, classModifier: inputClassModifier, ref: inputRef, required: required, ...otherSelectProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__select", classModifier: inputFieldClassModifier, children: [_jsx(Select, { id: inputId, disabled: disabled, classModifier: inputClassModifier, ref: inputRef, required: required, ...otherSelectProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
 });
 SelectInput.displayName = "SelectInput";
 export { SelectInput };

package/dist/Form/Slider/SliderInput.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentProps, type ReactNode } from "react";
-import { Field } from "../core";
+import { LegacyField } from "../core";
 import { Slider } from "./Slider";
-type Props = ComponentProps<typeof Field> & ComponentProps<typeof Slider> & {
+type Props = ComponentProps<typeof LegacyField> & ComponentProps<typeof Slider> & {
     helpMessage?: ReactNode;
 };
 declare const SliderInput: ({ id, children, helpMessage, message, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, classModifier, ...sliderProps }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/Slider/SliderInput.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
-import { Field, HelpMessage } from "../core";
+import { HelpMessage, LegacyField } from "../core";
 import { Slider } from "./Slider";
 const SliderInput = ({ id, children, helpMessage, message, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, classModifier, ...sliderProps }) => {
     const generatedId = useId();
     const newId = useMemo(() => id ?? generatedId, [generatedId, id]);
-    return (_jsxs(Field, { id: newId, label: label, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: classModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsx(Slider, { ...sliderProps, id: id, classModifier: classModifier }), children, _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+    return (_jsxs(LegacyField, { id: newId, label: label, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: classModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsx(Slider, { ...sliderProps, id: id, classModifier: classModifier }), children, _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
 };
 export { SliderInput };

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

@@ -1,11 +1,8 @@
-import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
-import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
-import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import { ComponentProps, ReactNode } from "react";
 import { Field } from "../core";
 import { Text } from "./Text";
-type Props = ComponentProps<typeof Field> & ComponentProps<typeof Text> & {
+export type TextInputProps = Omit<ComponentProps<typeof Field> & ComponentProps<typeof Text> & {
     helpMessage?: ReactNode;
-};
-declare const TextInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+}, "renderInput">;
+declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { TextInput };

package/dist/Form/Text/TextInput.js

@@ -1,15 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
-import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
-import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
-import { forwardRef, useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Field } from "../core";
 import { Text } from "./Text";
-const TextInput = forwardRef(({ id, message, children, helpMessage, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, className, forceDisplayMessage, classModifier = "", disabled = false, required, ...inputTextProps }, inputRef) => {
-    const inputUseId = useId();
-    const inputId = id ?? inputUseId;
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    return (_jsxs(Field, { label: label, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, id: inputId, classModifier: classModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__text", classModifier: inputFieldClassModifier, children: [_jsx(Text, { id: inputId, classModifier: inputClassModifier, disabled: disabled, ref: inputRef, required: required, ...inputTextProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
-});
+const TextInput = forwardRef(({ children, ...props }, inputRef) => (_jsx(Field, { ...props, renderInput: ({ id, classModifier }) => (_jsx(Text, { id: id, classModifier: classModifier, ref: inputRef, ...props })), children: children })));
 TextInput.displayName = "TextInput";
 export { TextInput };

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

@@ -1,2 +1,2 @@
-export { TextInput } from "./TextInput";
 export { Text } from "./Text";
+export { TextInput } from "./TextInput";

package/dist/Form/Text/index.js

@@ -1,2 +1,2 @@
-export { TextInput } from "./TextInput";
 export { Text } from "./Text";
+export { TextInput } from "./TextInput";

package/dist/Form/Textarea/TextareaInput.d.ts

@@ -2,9 +2,9 @@ import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { ComponentProps, ReactNode } from "react";
-import { Field } from "../core";
+import { LegacyField } from "../core";
 import { Textarea } from "./Textarea";
-type Props = ComponentProps<typeof Field> & ComponentProps<typeof Textarea> & {
+type Props = ComponentProps<typeof LegacyField> & ComponentProps<typeof Textarea> & {
     helpMessage?: ReactNode;
 };
 declare const TextareaInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Form/Textarea/TextareaInput.js

@@ -3,14 +3,14 @@ import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { forwardRef, useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
 import { Textarea } from "./Textarea";
 const TextareaInput = forwardRef(({ id, classModifier = "", message, children, helpMessage, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, rows = 5, cols = 50, disabled = false, required, ...textareaInputProps }, inputRef) => {
     const rowModifier = `${classModifier} label-top`;
     const inputUseId = useId();
     const inputId = id ?? inputUseId;
     const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    return (_jsxs(Field, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__textarea", classModifier: `${rowModifier} ${inputFieldClassModifier}`, children: [_jsx(Textarea, { ...textareaInputProps, id: inputId, rows: rows, cols: cols, classModifier: inputClassModifier, disabled: disabled, ref: inputRef }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__textarea", classModifier: `${rowModifier} ${inputFieldClassModifier}`, children: [_jsx(Textarea, { ...textareaInputProps, id: inputId, rows: rows, cols: cols, classModifier: inputClassModifier, disabled: disabled, ref: inputRef }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
 });
 TextareaInput.displayName = "TextareaInput";
 export { TextareaInput };

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

@@ -1,6 +1,6 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { FieldForm } from "./FieldForm";
-type FieldProps = Omit<ComponentPropsWithoutRef<typeof FieldForm>, "children"> & {
+import { type ReactNode } from "react";
+import { MessageTypes } from ".";
+type InputProps = {
     label: ReactNode;
     children?: ReactNode;
     id?: string;
@@ -11,6 +11,17 @@ type FieldProps = Omit<ComponentPropsWithoutRef<typeof FieldForm>, "children"> &
     roleContainer?: string;
     ariaLabelContainer?: string;
     isLabelContainerLinkedToInput?: boolean;
+    forceDisplayMessage?: boolean;
+    message?: string;
+    messageType?: MessageTypes;
+    required?: boolean;
+    disabled?: boolean;
+    helpMessage?: ReactNode;
 };
-export declare const Field: ({ id, message, messageType, label, children, forceDisplayMessage, classModifier, className, classNameContainerLabel, classNameContainerInput, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, }: FieldProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Field: ({ classNameContainerInput, classNameContainerLabel, label, forceDisplayMessage, message, messageType, required, classModifier, children, disabled, helpMessage, id, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, renderInput: Element, }: InputProps & {
+    renderInput: (props: {
+        id: string;
+        classModifier: string;
+    }) => ReactNode;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/Form/core/Field.js

@@ -1,15 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { useId } from "react";
+import { FieldError, FormClassManager, HelpMessage, useInputClassModifier, } from ".";
 import { getComponentClassName } from "../../utilities";
-import { FieldError } from "./FieldError";
-import { MessageTypes } from "./MessageTypes";
-import { FieldForm } from "./FieldForm";
-export const Field = ({ id = "", message = "", messageType = MessageTypes.error, label, children, forceDisplayMessage, classModifier = "", className, classNameContainerLabel = "col-md-2", classNameContainerInput = "col-md-10", isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, }) => {
+export const Field = ({ classNameContainerInput = "col-md-10", classNameContainerLabel = "col-md-2", label, forceDisplayMessage, message, messageType, required, classModifier = "", children, disabled = false, helpMessage, id, isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, renderInput: Element, }) => {
+    const inputUseId = useId();
+    const inputId = id ?? inputUseId;
+    const actualRequired = required || classModifier.includes("required");
+    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), actualRequired);
     if (!isVisible) {
         return null;
     }
-    const componentClassName = getComponentClassName(className, classModifier, "row af-form__group");
-    return (_jsxs("div", { className: componentClassName, role: roleContainer, "aria-label": ariaLabelContainer, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx("label", { className: classNames({
-                        "af-form__group-label--required": classModifier.includes("required"),
-                    }, "af-form__group-label"), htmlFor: isLabelContainerLinkedToInput ? id : undefined, children: label }) }), _jsxs(FieldForm, { className: classNameContainerInput, message: message, messageType: messageType, forceDisplayMessage: forceDisplayMessage, children: [children, _jsx(FieldError, { message: message, messageType: messageType })] })] }));
+    const fieldContainerClassName = getComponentClassName("af-form__text", forceDisplayMessage
+        ? `${inputFieldClassModifier} ${FormClassManager.getModifier(messageType)}`
+        : inputFieldClassModifier);
+    return (_jsxs("div", { className: classNames("row af-form__group", {
+            "af-form__group--required": actualRequired,
+        }), role: roleContainer, "aria-label": ariaLabelContainer, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx("label", { className: classNames("af-form__group-label", {
+                        "af-form__group-label--required": actualRequired,
+                    }), htmlFor: isLabelContainerLinkedToInput ? inputId : undefined, children: label }) }), _jsxs("div", { className: classNameContainerInput, children: [_jsxs("div", { className: fieldContainerClassName, children: [_jsx(Element, { id: inputId, classModifier: inputClassModifier }), children] }), forceDisplayMessage ? (_jsx(FieldError, { message: message, messageType: messageType })) : (_jsx(HelpMessage, { message: helpMessage }))] })] }));
 };

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

@@ -1,4 +1,4 @@
-import { BaseSyntheticEvent, Dispatch, ReactNode, SetStateAction } from "react";
+import { type BaseSyntheticEvent, type Dispatch, type ReactElement, type ReactNode, type SetStateAction } from "react";
 import { FormClassManager } from "./FormClassManager";
 import { MessageTypes } from "./MessageTypes";
 type TMessage = {
@@ -49,7 +49,7 @@ export declare const eventWrapper: ({ wrapper, props }: EventWrapperProps) => {
     onFocus: (ev: BaseSyntheticEvent) => void;
 };
 type AddPropsClone = Omit<RenderChildrenProps, "children"> & {
-    child: JSX.Element;
+    child: ReactElement<Record<string, unknown>>;
     classModifier: string;
     name: string;
     getMessageClassModifierFn?: typeof FormClassManager.getMessageClassModifier;

package/dist/Form/core/FieldForm.js

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

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

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { FieldForm } from "./FieldForm";
+type FieldProps = Omit<ComponentPropsWithoutRef<typeof FieldForm>, "children"> & {
+    label: ReactNode;
+    children?: ReactNode;
+    id?: string;
+    classModifier?: string;
+    classNameContainerLabel?: string;
+    classNameContainerInput?: string;
+    isVisible?: boolean;
+    roleContainer?: string;
+    ariaLabelContainer?: string;
+    isLabelContainerLinkedToInput?: boolean;
+};
+export declare const LegacyField: ({ id, message, messageType, label, children, forceDisplayMessage, classModifier, className, classNameContainerLabel, classNameContainerInput, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, }: FieldProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Form/core/LegacyField.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { getComponentClassName } from "../../utilities";
+import { FieldError } from "./FieldError";
+import { FieldForm } from "./FieldForm";
+import { MessageTypes } from "./MessageTypes";
+export const LegacyField = ({ id = "", message = "", messageType = MessageTypes.error, label, children, forceDisplayMessage, classModifier = "", className, classNameContainerLabel = "col-md-2", classNameContainerInput = "col-md-10", isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, }) => {
+    if (!isVisible) {
+        return null;
+    }
+    const componentClassName = getComponentClassName(className, classModifier, "row af-form__group");
+    return (_jsxs("div", { className: componentClassName, role: roleContainer, "aria-label": ariaLabelContainer, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx("label", { className: classNames({
+                        "af-form__group-label--required": classModifier.includes("required"),
+                    }, "af-form__group-label"), htmlFor: isLabelContainerLinkedToInput ? id : undefined, children: label }) }), _jsxs(FieldForm, { className: classNameContainerInput, message: message, messageType: messageType, forceDisplayMessage: forceDisplayMessage, children: [children, _jsx(FieldError, { message: message, messageType: messageType })] })] }));
+};

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

@@ -1,16 +1,17 @@
 import { ReactNode } from "react";
 export { Field } from "./Field";
-export { FieldInput } from "./FieldInput";
-export { MessageTypes } from "./MessageTypes";
 export { FieldError } from "./FieldError";
-export { FormClassManager } from "./FormClassManager";
 export { FieldForm } from "./FieldForm";
+export { FieldInput } from "./FieldInput";
+export { FormClassManager } from "./FormClassManager";
 export { HelpMessage } from "./HelpMessage";
 export { InputList } from "./InputList";
-export { useInputClassModifier } from "./useInputClassModifier";
+export { LegacyField } from "./LegacyField";
+export { MessageTypes } from "./MessageTypes";
+export { getFirstId } from "./getFirstId";
 export { getOptionClassName } from "./getOptionClassName";
+export { useInputClassModifier } from "./useInputClassModifier";
 export { useOptionsWithId } from "./useOptionsWithId";
-export { getFirstId } from "./getFirstId";
 export type Option = {
     id?: string;
     icon?: ReactNode;

package/dist/Form/core/index.js

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

package/dist/Layout/Footer/Footer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import logo from "@axa-fr/design-system-slash-css/dist/common/assets/logo-axa.svg";
+import logo from "@axa-fr/design-system-slash-css/logo-axa.svg";
 import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.scss";
 import { forwardRef } from "react";
 export const Footer = forwardRef(({ className = "af-footer", href = "https://www.axa.fr/", title = "Site Axa", icon = logo, alt = "Logo Axa", children = `© ${new Date().getFullYear()} AXA Tous droits réservés`, ...props }, ref) => (_jsx("footer", { ref: ref, className: className, ...props, children: _jsxs("div", { className: "container-fluid container", children: [Boolean(icon) && (_jsx("a", { className: "af-logo", href: href, title: title, target: "blank", rel: "noopener noreferrer", children: _jsx("img", { className: "af-logo__brand", src: icon, alt: alt }) })), _jsx("div", { className: "af-footer-content", children: children })] }) })));

package/dist/Layout/Header/Infos/Infos.js

@@ -6,6 +6,9 @@ import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.scss";
 const defaultClassName = "af-contrat";
 const Infos = ({ infos, className, classModifier }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("i", { className: "glyphicon glyphicon-info-sign" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => (_jsxs(Fragment, { children: [_jsx("dt", { className: `${defaultClassName}__word`, children: info.word }), _jsx("dd", { className: `${defaultClassName}__def`, children: info.definition })] }, `info-${generateId(info)}`))) })] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("i", { className: "glyphicon glyphicon-info-sign" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => {
+                    const idTerm = info.id ?? `info-${generateId(info)}`;
+                    return (_jsxs(Fragment, { children: [_jsx("dt", { id: idTerm, className: `${defaultClassName}__word`, children: info.word }), _jsx("dd", { className: `${defaultClassName}__def`, "aria-labelledby": idTerm, children: info.definition })] }, idTerm));
+                }) })] }));
 };
 export { Infos };

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

@@ -1,8 +1,14 @@
 import { ComponentProps, ReactElement } from "react";
 import { NavBarItemBase } from "./NavBarItemBase";
+type ChildrenProps = {
+    classModifier?: string;
+    tabIndex?: number;
+    hasFocus?: boolean;
+    [key: string]: unknown;
+};
 type Props = Omit<ComponentProps<typeof NavBarItemBase>, "handleKeys" | "isMenuOpen" | "position"> & {
     ariaLabel?: string;
-    children?: ReactElement | ReactElement[];
+    children?: ReactElement<ChildrenProps> | ReactElement<ChildrenProps>[];
 };
 declare const NavBarItem: ({ children, hasFocus, actionElt, ariaLabel, tabIndex, role, className, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { NavBarItem };

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes, KeyboardEvent, ReactElement } from "react";
 type Props = HTMLAttributes<HTMLLIElement> & {
-    actionElt: ReactElement;
+    actionElt: ReactElement<HTMLAttributes<HTMLElement>>;
     handleKeys: (event: KeyboardEvent<HTMLLIElement>) => void;
     hasFocus?: boolean;
     isMenuOpen?: boolean;

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

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
 type Props = {
     children: ReactNode;
     idControl: string;
 };
-declare const ToggleButton: ({ children, idControl }: Props) => false | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare const ToggleButton: ({ children, idControl }: Props) => false | ReactElement<HTMLAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;
 export { ToggleButton };

package/dist/Layout/Header/ToggleButton/ToggleButton.js

@@ -1,4 +1,4 @@
-import { cloneElement, isValidElement } from "react";
+import { cloneElement, isValidElement, } from "react";
 const ToggleButton = ({ children, idControl }) => isValidElement(children) &&
     cloneElement(children, {
         ...children.props,

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

@@ -1,7 +1,8 @@
 export { Header } from "./Header";
+export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
 export { Infos } from "./Infos/Infos";
+export { MenuTitleWrapper } from "./MenuTitleWrapper/MenuTitleWrapper";
 export { Name } from "./Name/Name";
-export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
+export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";
 export { ToggleButton } from "./ToggleButton/ToggleButton";
 export { User } from "./User/User";
-export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";

package/dist/Layout/Header/index.js

@@ -1,7 +1,8 @@
 export { Header } from "./Header";
+export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
 export { Infos } from "./Infos/Infos";
+export { MenuTitleWrapper } from "./MenuTitleWrapper/MenuTitleWrapper";
 export { Name } from "./Name/Name";
-export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
+export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";
 export { ToggleButton } from "./ToggleButton/ToggleButton";
 export { User } from "./User/User";
-export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";

package/dist/Summary/index.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert } from "../Alert/Alert";
+import { generateId } from "../utilities/helpers/generateId";
 export const Summary = ({ messages = [], isVisible = true, title = "Invalid form", classModifier = "error", ...args }) => {
     const messagesNotBlank = messages.filter((message) => Boolean(message));
     if (!messages || !isVisible || messagesNotBlank.length === 0) {
         return null;
     }
-    return (_jsx(Alert, { icon: "glyphicon glyphicon-warning-sign", title: title, classModifier: classModifier, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${message}`))) }) }));
+    return (_jsx(Alert, { icon: "glyphicon glyphicon-warning-sign", title: title, classModifier: classModifier, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${generateId({ message })}`))) }) }));
 };

package/dist/Tabs/components/TabsStateless.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { type ReactNode, type MouseEvent } from "react";
 export interface TabsStatelessProps {
     children: ReactNode;
     activeIndex: string;
@@ -6,7 +6,7 @@ export interface TabsStatelessProps {
     classModifier?: string;
 }
 export interface TabsStatelessHandlers {
-    onChange: (event: React.MouseEvent<HTMLButtonElement>, index: string) => void;
+    onChange: (event: MouseEvent<HTMLButtonElement>, index: string) => void;
 }
 type Props = TabsStatelessProps & TabsStatelessHandlers;
 declare const TabsStateless: ({ activeIndex, className, classModifier, children, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/Tabs/components/TabsStateless.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement } from "react";
+import { Children, isValidElement, } from "react";
 import { getComponentClassName } from "../..";
 import { Pane } from "./Pane";
 import { Title } from "./Title";

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
+import "@axa-fr/design-system-slash-css/dist/common/tokens.scss";
 import "@fontsource/source-sans-pro";
 export { Action } from "./Action/Action";
 export { Alert } from "./Alert/Alert";
@@ -8,7 +9,7 @@ export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Ch
 export { Choice, ChoiceInput } from "./Form/Choice";
 export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
 export { Date, DateInput } from "./Form/Date";
-export { File, FileInput, FileTable } from "./Form/File";
+export { File, FileInput, FileTable, type FilePreview } from "./Form/File";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";
 export { Number, NumberInput } from "./Form/Number";
 export { Pass, PassInput } from "./Form/Pass";
@@ -17,8 +18,10 @@ export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
+export { NestedQuestion } from "./Form/NestedQuestion/NestedQuestion";
 export { Footer } from "./Layout/Footer";
-export { Header, HeaderTitle, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { Link, type LinkProps } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
 export { Step, StepBase, Steps } from "./Steps";
@@ -27,7 +30,6 @@ export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";
 export { Title } from "./Title/Title";
 export { getComponentClassName } from "./utilities";
-export { Link, type LinkProps } from "./Link/Link";
 export * from "./Accordion";
 export * from "./Popover";
 export * from "./Table";

package/dist/index.js

@@ -1,4 +1,5 @@
 import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
+import "@axa-fr/design-system-slash-css/dist/common/tokens.scss";
 import "@fontsource/source-sans-pro";
 export { Action } from "./Action/Action";
 export { Alert } from "./Alert/Alert";
@@ -17,8 +18,10 @@ export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
+export { NestedQuestion } from "./Form/NestedQuestion/NestedQuestion";
 export { Footer } from "./Layout/Footer";
-export { Header, HeaderTitle, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { Link } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
 export { Step, StepBase, Steps } from "./Steps";
@@ -27,7 +30,6 @@ export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";
 export { Title } from "./Title/Title";
 export { getComponentClassName } from "./utilities";
-export { Link } from "./Link/Link";
 export * from "./Accordion";
 export * from "./Popover";
 export * from "./Table";

package/package.json

@@ -1,17 +1,21 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.1.1-alpha.7",
+  "version": "1.1.1-alpha.71",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "default": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
     },
     "./utilities": {
-      "import": "./dist/utilities.js",
-      "types": "./dist/utilities.d.ts"
+      "default": {
+        "import": "./dist/utilities.js",
+        "types": "./dist/utilities.d.ts"
+      }
     }
   },
   "files": [
@@ -20,19 +24,16 @@
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
     "postbuild": "copyfiles --up 1 \"src/assets/svg/*.svg\" ./dist/",
-    "start:storybook": "storybook dev -p 6007",
-    "build:storybook": "storybook build",
-    "build-storybook": "storybook build",
     "eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
     "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx)\" --check",
     "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx)\" --write",
-    "tsc": "tsc --noEmit",
+    "check-types": "tsc --noEmit",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "test:ci": "vitest run --coverage",
-    "chromatic": "npx chromatic"
+    "test:ci": "vitest run --coverage"
   },
   "repository": {
     "type": "git",
@@ -47,7 +48,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.1.1-alpha.7",
+    "@axa-fr/design-system-slash-css": "1.1.1-alpha.71",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -68,10 +69,21 @@
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": "eslint --fix",
-    "*.(ts|tsx)": "tsc-files --noEmit",
-    "*.mdx": "prettier --write"
+    "*.(ts|tsx)": "tsc-files --noEmit"
   },
   "volta": {
     "extends": "../../package.json"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
+    "@types/jest-axe": "^3.5.9",
+    "@vitest/coverage-v8": "^3.0.7",
+    "@vitest/ui": "^3.0.7",
+    "jest-axe": "^9.0.0",
+    "vitest": "^3.0.7"
   }
-}
+}

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

@@ -1,2 +0,0 @@
-import { HTMLInputTypeAttribute } from "react";
-export declare const inputTypes: HTMLInputTypeAttribute[];

package/dist/Form/Text/inputTypes.js

@@ -1,5 +0,0 @@
-export const inputTypes = [
-    "text",
-    "email",
-    "password",
-];