@axa-fr/design-system-slash-react 1.1.1-alpha.2 → 1.1.1-alpha.204

package/dist/Accordion/CollapseCard.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode } from "react";
+import type { DetailsHTMLAttributes, ReactNode } from "react";
 export type CollapseProps = {
     id: string;
     title: ReactNode;
-    children?: React.ReactNode;
+    children?: ReactNode;
     open?: boolean;
     name?: string;
-    onToggle?: React.DetailsHTMLAttributes<HTMLDetailsElement>["onToggle"];
+    onToggle?: DetailsHTMLAttributes<HTMLDetailsElement>["onToggle"];
     className?: string;
     classModifier?: string;
 };

package/dist/Action/Action.js

@@ -4,6 +4,6 @@ import { forwardRef } from "react";
 import { getComponentClassName } from "../utilities";
 export const Action = forwardRef(({ icon, className, classModifier, ...otherProps }, ref) => {
     const componentClassName = getComponentClassName(className, classModifier, "btn af-btn--circle");
-    return (_jsx("a", { ...otherProps, className: componentClassName, ref: ref, children: _jsx("i", { className: `glyphicon glyphicon-${icon}` }) }));
+    return (_jsx("a", { ...otherProps, className: componentClassName, ref: ref, children: _jsx("i", { role: "img", className: `glyphicon glyphicon-${icon}` }) }));
 });
 Action.displayName = "Action";

package/dist/Alert/Alert.d.ts

@@ -12,5 +12,6 @@ export type AlertCoreComponentProps = {
     onClose?: MouseEventHandler<HTMLButtonElement>;
     className?: string;
     classModifier?: "error" | "danger" | "info" | "success";
+    ariaLabel?: string;
 };
-export declare const Alert: ({ className, onClose, icon, title, children, classModifier, }: PropsWithChildren<AlertCoreComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ className, onClose, icon, title, children, classModifier, ariaLabel, }: PropsWithChildren<AlertCoreComponentProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/Alert/Alert.js

@@ -8,7 +8,7 @@ export var TypeIcons;
     TypeIcons["info"] = "glyphicon glyphicon-info-sign";
     TypeIcons["success"] = "glyphicon glyphicon-ok";
 })(TypeIcons || (TypeIcons = {}));
-export const Alert = ({ className, onClose, icon, title, children, classModifier = "error", }) => {
+export const Alert = ({ className, onClose, icon, title, children, classModifier = "error", ariaLabel = "close", }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-alert");
-    return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsxs("div", { className: "af-alert__title", children: [_jsx("div", { className: "af-alert__title-icon", children: _jsx("i", { className: icon || TypeIcons[classModifier] }) }), _jsx("div", { className: "af-alert__title-text", children: title }), onClose && (_jsx("button", { type: "button", className: "af-alert__title-icon-close", onClick: onClose, "aria-label": "close", children: _jsx("i", { className: "glyphicon glyphicon-close" }) }))] }), children && (_jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__content-left" }), _jsx("div", { className: "af-alert__content-right", children: children })] }))] }));
+    return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsxs("div", { className: "af-alert__title", children: [_jsx("div", { className: "af-alert__title-icon", children: _jsx("i", { role: "presentation", className: icon || TypeIcons[classModifier] }) }), _jsx("div", { className: "af-alert__title-text", children: title }), onClose && (_jsx("button", { type: "button", className: "af-alert__title-icon-close", onClick: onClose, "aria-label": ariaLabel, children: _jsx("i", { className: "glyphicon glyphicon-close" }) }))] }), children && (_jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__content-left" }), _jsx("div", { className: "af-alert__content-right", children: children })] }))] }));
 };

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,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Field, useOptionsWithId } from "../core";
+import { forwardRef, useId } from "react";
+import { LegacyField, MessageTypes, useOptionsWithId } from "../core";
 import { Checkbox } from "./Checkbox";
 import { CheckboxModes } from "./CheckboxModes";
+import { useAriaInvalid } from "../core/useAriaInvalid";
 const CheckboxInput = forwardRef(({ mode, messageType, message, classModifier, options, classNameContainerLabel, classNameContainerInput, label, isVisible, className, forceDisplayMessage, required, ...checkboxProps }, inputRef) => {
     let rowModifier = classModifier;
     if (mode === CheckboxModes.classic) {
@@ -11,8 +12,12 @@ const CheckboxInput = forwardRef(({ mode, messageType, message, classModifier, o
     if (required) {
         rowModifier += " required";
     }
+    const errorUseId = useId();
     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 }) }));
+    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
+    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, errorId: errorUseId, children: _jsx(Checkbox, { mode: mode, options: newOptions, classModifier: message && messageType === MessageTypes.error && forceDisplayMessage
+                ? `${classModifier} error`
+                : classModifier, ref: inputRef, "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...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,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Field, useInputClassModifier, useOptionsWithId } from "../core";
+import { forwardRef, useId } from "react";
+import { LegacyField, useInputClassModifier, useOptionsWithId } from "../core";
 import { Choice } from "./Choice";
+import { useAriaInvalid } from "../core/useAriaInvalid";
 const defaultOptions = [
     { label: "Oui", value: true, id: "radioItemTrue" },
     { label: "Non", value: false, id: "radioItemFalse" },
 ];
 const ChoiceInput = forwardRef(({ id, messageType, message, className, classModifier, isVisible, classNameContainerLabel, classNameContainerInput, label, forceDisplayMessage, options = defaultOptions, disabled, required, ...otherProps }, inputRef) => {
+    const errorUseId = useId();
     const newOptions = useOptionsWithId(options.map((o) => ({ ...o, value: `${o.value}` })), id);
     const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier ?? "", disabled ?? false, false, required);
     const firstId = newOptions?.[0]?.id ?? "";
@@ -14,7 +16,8 @@ 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 }) }));
+    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
+    return (_jsx(LegacyField, { label: label, id: firstId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: _jsx(Choice, { ...otherProps, id: id, ref: inputRef, classModifier: inputClassModifier, options: options ? choiceOptions : undefined, required: required, disabled: disabled, "aria-describedby": errorUseId, "aria-invalid": isInvalid }) }));
 });
 ChoiceInput.displayName = "ChoiceInput";
 export { ChoiceInput };

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

@@ -1,10 +1,44 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { Field } from "../core";
-import { Date } from "./Date";
-type Props = Omit<ComponentPropsWithoutRef<typeof Date>, "placeholderText"> & ComponentPropsWithoutRef<typeof Field> & {
+import { ReactNode } from "react";
+declare const DateInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value"> & {
+    classModifier?: string;
+    defaultValue?: Date | string;
+    value?: Date | string;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref">, "placeholderText"> & Omit<{
+    message?: string;
+    messageType?: import("../core").MessageTypes;
+} & {
+    className?: string;
+    classModifier?: string;
+    forceDisplayMessage?: boolean;
+    children: ReactNode;
+    setStateMemoryFn?: typeof import("../core/FieldForm").setStateMemory;
+    onChangeByStateFn?: typeof import("../core/FieldForm").onChangeByState;
+    setStateOnBlurFn?: typeof import("../core/FieldForm").setStateOnBlur;
+    setStateOnFocusFn?: typeof import("../core/FieldForm").setStateOnFocus;
+    initialState?: {
+        hasLostFocusOnce: boolean;
+        hasFocus: boolean;
+        hasChange: boolean;
+        memory: {
+            message?: string;
+            messageType?: import("../core").MessageTypes;
+        };
+    };
+}, "children"> & {
+    label: ReactNode;
+    children?: ReactNode;
+    id?: string;
+    classModifier?: string;
+    classNameContainerLabel?: string;
+    classNameContainerInput?: string;
+    isVisible?: boolean;
+    roleContainer?: string;
+    ariaLabelContainer?: string;
+    isLabelContainerLinkedToInput?: boolean;
+    errorId?: string;
+} & {
     placeholder?: string;
     helpMessage?: ReactNode;
     children?: ReactNode;
-};
-declare const DateInput: ({ classModifier, message, children, helpMessage, id, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, disabled, required, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export { DateInput };

package/dist/Form/Date/DateInput.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { forwardRef, useId } from "react";
+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 }) => {
+import { useAriaInvalid } from "../core/useAriaInvalid";
+const DateInput = forwardRef(({ classModifier = "", message, children, helpMessage, id, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, disabled = false, required, ...otherProps }, ref) => {
     const inputUseId = useId();
+    const errorUseId = 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 })] }));
-};
+    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
+    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: [_jsxs(FieldInput, { className: "af-form__date", classModifier: inputFieldClassModifier, children: [_jsx(Date, { id: inputId, classModifier: inputClassModifier, disabled: disabled, required: required, ref: ref, "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...otherProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+});
+DateInput.displayName = "DateInput";
 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,9 +1,10 @@
 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";
+import { useAriaInvalid } from "../core/useAriaInvalid";
 const FileInput = ({ values = [], name = "", onChange, classModifier = "", message, children, helpMessage, id = "", forceDisplayMessage, messageType, classNameContainerLabel, classNameContainerInput, label, isVisible, className, errors, fileLabel, disabled = false, required, ...otherFileProps }) => {
     const onDeleteClick = (selectedId, selectInputId) => {
         const newValues = values.filter((element) => element.id !== selectedId);
@@ -11,12 +12,15 @@ const FileInput = ({ values = [], name = "", onChange, classModifier = "", messa
             values: newValues,
             name,
             id: selectInputId,
+            fileAction: "delete",
         });
     };
     const inputUseId = useId();
+    const errorUseId = 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 })] }));
+    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
+    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, 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"), "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...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,15 @@
 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";
+import { useAriaInvalid } from "../core/useAriaInvalid";
 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 errorUseId = 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 })] }));
+    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
+    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: [_jsxs(FieldInput, { className: "af-form__select", classModifier: inputFieldClassModifier, children: [_jsx(MultiSelect, { inputId: inputId, disabled: disabled, required: required, "aria-invalid": isInvalid, "aria-errormessage": errorUseId, ...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,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 { useId, } from "react";
-import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
 import { Number } from "./Number";
+import { useAriaInvalid } from "../core/useAriaInvalid";
 export const NumberInput = ({ message, children, helpMessage, id, label, classNameContainerLabel, classNameContainerInput, forceDisplayMessage, messageType, isVisible, className, disabled = false, classModifier = "", required, ...otherProps }) => {
     const inputUseId = useId();
+    const errorUseId = 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 })] }));
+    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
+    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: [_jsxs(FieldInput, { className: "af-form__text", classModifier: inputFieldClassModifier, children: [_jsx(Number, { id: inputId, classModifier: inputClassModifier, disabled: disabled, "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...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,7 +1,8 @@
 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";
+import { useAriaInvalid } from "../core/useAriaInvalid";
 const strengthList = {
     0: "bad",
     1: "okay",
@@ -13,7 +14,8 @@ const calculateStrength = (score) => {
     if (score === null || score === undefined) {
         return null;
     }
-    let strength = Number(score) ?? 0;
+    const scoreToNumber = Number(score);
+    let strength = Number.isNaN(scoreToNumber) ? 0 : scoreToNumber;
     if (strength > 4) {
         strength = 4;
     }
@@ -27,8 +29,10 @@ const PassInput = ({ message, children, helpMessage, id, disabled = false, label
     const classModifierStrength = [classModifier ?? "", strength ?? ""].join(" ");
     const [type, setType] = useState("password");
     const inputId = useId();
+    const errorUseId = 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 })] }) }));
+    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
+    return (_jsx(LegacyField, { label: label, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, id: finalId, classModifier: `${classModifierStrength} ${inputFieldClassModifier}`, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: _jsxs(FieldInput, { className: "af-form__pass-container", classModifier: inputFieldClassModifier, children: [_jsx(Pass, { ...passProps, type: type, id: inputId, disabled: disabled, classModifier: inputClassModifier, "aria-describedby": errorUseId, "aria-invalid": isInvalid, 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,13 @@ 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"> & {
+    errorId?: string;
+} & 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,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Field, getFirstId, useInputClassModifier, useOptionsWithId, } from "../core";
+import { forwardRef, useId } from "react";
+import { LegacyField, getFirstId, useInputClassModifier, useOptionsWithId, } from "../core";
 import { Radio, RadioModes } from "./Radio";
+import { useAriaInvalid } from "../core/useAriaInvalid";
 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 errorUseId = useId();
     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] }));
+    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
+    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, errorId: errorUseId, children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: inputClassModifier, ref: inputRef, disabled: disabled, required: required || classModifier?.includes("required"), "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...radioProps }), children] }));
 });
 RadioInput.displayName = "EnhancedInputRadio";
 export { RadioInput };