@axa-fr/design-system-slash-react 1.2.1-alpha.72 → 1.2.1-alpha.74

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

@@ -3,6 +3,6 @@ import { ConsumerFieldProps } from "../core";
 import { Date } from "./Date";
 type Props = Omit<ConsumerFieldProps & ComponentProps<typeof Date> & {
     helpMessage?: ReactNode;
-}, "renderInput">;
+}, "renderInput" | "children">;
 declare const DateInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { DateInput };

package/dist/Form/Date/DateInput.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Field } from "../core";
 import { Date } from "./Date";
-const DateInput = forwardRef(({ children, ...otherProps }, inputRef) => {
-    return (_jsx(Field, { ...otherProps, renderInput: ({ id, classModifier, ariaInvalid, errorId }) => (_jsx(Date, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...otherProps })), children: children }));
+const DateInput = forwardRef(({ rightElement, ...otherProps }, inputRef) => {
+    return (_jsx(Field, { ...otherProps, renderInput: ({ id, classModifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Date, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...otherProps }), rightElement] })) }));
 });
 DateInput.displayName = "DateInput";
 export { DateInput };

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

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

package/dist/Form/File/FileInput.js

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

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

@@ -4,6 +4,6 @@ import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { ComponentPropsWithRef } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Number } from "./Number";
-type Props = ConsumerFieldProps & ComponentPropsWithRef<typeof Number>;
-export declare const NumberInput: ({ children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+type Props = Omit<ConsumerFieldProps & ComponentPropsWithRef<typeof Number>, "children">;
+export declare const NumberInput: ({ rightElement, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/Number/NumberInput.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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 { Field } from "../core";
 import { Number } from "./Number";
-export const NumberInput = ({ children, ...props }) => {
-    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...inputProps }) => (_jsx(Number, { id: id, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps })), children: children }));
+export const NumberInput = ({ rightElement, ...props }) => {
+    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(Number, { id: id, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), rightElement] })) }));
 };

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

@@ -2,9 +2,9 @@ import { ComponentProps, ReactNode } from "react";
 import { ConsumerFieldProps } from "../core";
 import { Pass } from "./Pass";
 type PassProps = ComponentProps<typeof Pass>;
-type Props = ConsumerFieldProps & Omit<PassProps, "onToggleType" | "type"> & {
+type Props = Omit<ConsumerFieldProps & PassProps & {
     helpMessage?: ReactNode;
     score?: string;
-};
-declare const PassInput: ({ children, score, classModifier, disabled, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+}, "onToggleType" | "type" | "children">;
+declare const PassInput: ({ rightElement, score, classModifier, disabled, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export { PassInput };

package/dist/Form/Pass/PassInput.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Field } from "../core";
 import { Pass } from "./Pass";
@@ -23,9 +23,9 @@ const calculateStrength = (score) => {
     }
     return strengthList[strength];
 };
-const PassInput = ({ children, score, classModifier, disabled, ...props }) => {
+const PassInput = ({ rightElement, score, classModifier, disabled, ...props }) => {
     const strength = calculateStrength(score);
     const [type, setType] = useState("password");
-    return (_jsx(Field, { ...props, classModifier: classModifier, renderInput: ({ id, classModifier: modifier, ariaInvalid, errorId }) => (_jsx(Pass, { ...props, type: type, id: id, disabled: disabled, classModifier: `${modifier} ${strength}`, "aria-describedby": errorId, "aria-invalid": ariaInvalid, onToggleType: () => setType(type === "password" ? "text" : "password") })), children: children }));
+    return (_jsx(Field, { ...props, classModifier: classModifier, renderInput: ({ id, classModifier: modifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Pass, { ...props, type: type, id: id, disabled: disabled, classModifier: `${modifier} ${strength}`, "aria-describedby": errorId, "aria-invalid": ariaInvalid, onToggleType: () => setType(type === "password" ? "text" : "password") }), rightElement] })) }));
 };
 export { PassInput };

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

@@ -6,5 +6,5 @@ type Props = ComponentProps<"input"> & {
     orientation?: "horizontal" | "vertical";
     error?: boolean;
 };
-export declare const RadioCardGroup: ({ children, options, className, value, orientation, disabled, error, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioCardGroup: ({ children, options, className, value, name, orientation, disabled, error, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/Radio/RadioCardGroup.js

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import { Svg } from "../../Svg";
 const DEFAULT_CLASSNAME = "af-card";
 const DEFAULT_CONTAINER_CLASSNAME = "af-form__radio-card-group";
-export const RadioCardGroup = ({ children, options, className, value, orientation = "vertical", disabled = false, error = false, ...otherProps }) => {
+export const RadioCardGroup = ({ children, options, className, value, name, orientation = "vertical", disabled = false, error = false, ...otherProps }) => {
     const idGenerated = useId();
     const radioGroupRef = useRef(null);
     return (_jsxs("div", { ref: radioGroupRef, role: "radiogroup", className: classNames([
@@ -13,8 +13,8 @@ export const RadioCardGroup = ({ children, options, className, value, orientatio
             className,
             orientation === "horizontal" &&
                 `${DEFAULT_CONTAINER_CLASSNAME}--horizontal`,
-        ]), children: [options.map(({ name, icon, label, disabled: optionDisabled, value: optionValue, ...otherOptionProps }) => {
-                const newName = name ?? idGenerated;
+        ]), children: [options.map(({ name: optionName, icon, label, disabled: optionDisabled, value: optionValue, ...otherOptionProps }) => {
+                const newName = name || optionName || idGenerated;
                 const allClassNames = classNames([
                     DEFAULT_CLASSNAME,
                     orientation === "horizontal" && `${DEFAULT_CLASSNAME}--horizontal`,

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

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Radio } from "./Radio";
-type RadioInputProps = ConsumerFieldProps & ComponentPropsWithoutRef<typeof Radio>;
+type RadioInputProps = Omit<ConsumerFieldProps & ComponentPropsWithoutRef<typeof Radio>, "children">;
 declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export { RadioInput };

package/dist/Form/Radio/RadioInput.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Field, useOptionsWithId } from "../core";
 import { Radio, RadioModes } from "./Radio";
-const RadioInput = forwardRef(({ label, mode = "default", options, ...props }, inputRef) => {
+const RadioInput = forwardRef(({ label, mode = "default", options, rightElement, ...props }, inputRef) => {
     const labelPosition = mode === RadioModes.classic ? "top" : "center";
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: mode !== "card" ? "radiogroup" : undefined, ...props, renderInput: ({ classModifier, ariaInvalid, errorId, ...radioProps }) => (_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...radioProps })) }));
+    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: mode !== "card" ? "radiogroup" : undefined, ...props, renderInput: ({ classModifier, ariaInvalid, errorId, ...radioProps }) => (_jsxs(_Fragment, { children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...radioProps }), rightElement] })) }));
 });
 RadioInput.displayName = "EnhancedInputRadio";
 export { RadioInput };

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

@@ -1,6 +1,33 @@
 import { OptionHTMLAttributes } from "react";
-import { ConsumerFieldProps } from "../core";
-declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<ConsumerFieldProps & Omit<Omit<{
+declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<{
+    label: import("react").ReactNode;
+    id?: string;
+    className?: string;
+    classModifier?: string;
+    classNameContainerLabel?: string;
+    classNameContainerInput?: string;
+    isVisible?: boolean;
+    roleContainer?: string;
+    ariaLabelContainer?: string;
+    isLabelContainerLinkedToInput?: boolean;
+    forceDisplayMessage?: boolean;
+    message?: string;
+    messageType?: import("../core").MessageTypes;
+    required?: boolean;
+    disabled?: boolean;
+    helpMessage?: import("react").ReactNode;
+    labelPosition?: "top" | "center";
+    classNameSuffix?: string;
+    renderInput: (props: {
+        id: string;
+        classModifier: string;
+        errorId?: string;
+        ariaInvalid?: boolean;
+    } & Record<string, unknown>) => import("react").ReactNode;
+    appendChildren?: import("react").ReactNode;
+}, "children" | "renderInput" | "classNameSuffix"> & {
+    rightElement?: import("react").ReactNode;
+} & Omit<Omit<{
     suppressHydrationWarning?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
     color?: string | undefined | undefined;
@@ -301,7 +328,35 @@ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Consu
     options: OptionHTMLAttributes<HTMLOptionElement>[];
 } & {
     children?: import("react").ReactNode | undefined;
-}, "ref"> | Omit<ConsumerFieldProps & Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
+}, "ref"> | Omit<Omit<{
+    label: import("react").ReactNode;
+    id?: string;
+    className?: string;
+    classModifier?: string;
+    classNameContainerLabel?: string;
+    classNameContainerInput?: string;
+    isVisible?: boolean;
+    roleContainer?: string;
+    ariaLabelContainer?: string;
+    isLabelContainerLinkedToInput?: boolean;
+    forceDisplayMessage?: boolean;
+    message?: string;
+    messageType?: import("../core").MessageTypes;
+    required?: boolean;
+    disabled?: boolean;
+    helpMessage?: import("react").ReactNode;
+    labelPosition?: "top" | "center";
+    classNameSuffix?: string;
+    renderInput: (props: {
+        id: string;
+        classModifier: string;
+        errorId?: string;
+        ariaInvalid?: boolean;
+    } & Record<string, unknown>) => import("react").ReactNode;
+    appendChildren?: import("react").ReactNode;
+}, "children" | "renderInput" | "classNameSuffix"> & {
+    rightElement?: import("react").ReactNode;
+} & Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
     options?: OptionHTMLAttributes<HTMLOptionElement>[];
     classModifier?: string;
 } & import("react").RefAttributes<HTMLSelectElement> & {

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

@@ -1,9 +1,9 @@
 import { type ComponentProps } from "react";
 import { ConsumerFieldProps } from "../core";
 import { Slider } from "./Slider";
-type Props = ConsumerFieldProps & ComponentProps<typeof Slider>;
+type Props = Omit<ConsumerFieldProps & ComponentProps<typeof Slider>, "children">;
 /**
  * @deprecated This component is deprecated and will be removed in a future major release.
  */
-declare const SliderInput: ({ children, name, options, label, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const SliderInput: ({ rightElement, name, options, label, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export { SliderInput };

package/dist/Form/Slider/SliderInput.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Field } from "../core";
 import { Slider } from "./Slider";
 /**
  * @deprecated This component is deprecated and will be removed in a future major release.
  */
-const SliderInput = ({ children, name, options, label, ...props }) => {
-    return (_jsx(Field, { label: label, ...props, renderInput: ({ id, classModifier, ...sliderProps }) => (_jsx(Slider, { id: id, classModifier: classModifier, name: name, options: options, ...sliderProps })), children: children }));
+const SliderInput = ({ rightElement, name, options, label, ...props }) => {
+    return (_jsx(Field, { label: label, ...props, renderInput: ({ id, classModifier, ...sliderProps }) => (_jsxs(_Fragment, { children: [_jsx(Slider, { id: id, classModifier: classModifier, name: name, options: options, ...sliderProps }), rightElement] })) }));
 };
 export { SliderInput };

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

@@ -1,6 +1,6 @@
 import { ComponentProps } from "react";
 import { ConsumerFieldProps } from "../core";
 import { Text } from "./Text";
-export type TextInputProps = ConsumerFieldProps & ComponentProps<typeof Text>;
+export type TextInputProps = Omit<ConsumerFieldProps & ComponentProps<typeof Text>, "children">;
 declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { TextInput };

package/dist/Form/Text/TextInput.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Field } from "../core";
 import { Text } from "./Text";
-const TextInput = forwardRef(({ children, ...props }, inputRef) => {
-    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier, ariaInvalid, errorId }) => (_jsx(Text, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props })), children: children }));
+const TextInput = forwardRef(({ rightElement, ...props }, inputRef) => {
+    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Text, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), rightElement] })) }));
 });
 TextInput.displayName = "TextInput";
 export { TextInput };

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

@@ -4,6 +4,6 @@ import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { ComponentProps } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Textarea } from "./Textarea";
-type Props = ConsumerFieldProps & ComponentProps<typeof Textarea>;
+type Props = Omit<ConsumerFieldProps & ComponentProps<typeof Textarea>, "children">;
 declare const TextareaInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 export { TextareaInput };

package/dist/Form/Textarea/TextareaInput.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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 } from "react";
 import { Field } from "../core";
 import { Textarea } from "./Textarea";
-const TextareaInput = forwardRef(({ label, children, ...props }, inputRef) => {
-    return (_jsx(Field, { label: label, labelPosition: "top", classNameSuffix: "textarea", ...props, renderInput: ({ id, ariaInvalid, errorId, ...inputProps }) => (_jsx(Textarea, { id: id, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps })), children: children }));
+const TextareaInput = forwardRef(({ label, rightElement, ...props }, inputRef) => {
+    return (_jsx(Field, { label: label, labelPosition: "top", classNameSuffix: "textarea", ...props, renderInput: ({ id, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(Textarea, { id: id, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), rightElement] })) }));
 });
 TextareaInput.displayName = "TextareaInput";
 export { TextareaInput };

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

@@ -5,7 +5,6 @@ type InputProps = {
      * The label of the input element.
      */
     label: ReactNode;
-    children?: ReactNode;
     /**
      * The id of the input element. If not provided, a unique id will be generated.
      */
@@ -71,6 +70,11 @@ type InputProps = {
      */
     appendChildren?: ReactNode;
 };
-export type ConsumerFieldProps = Omit<InputProps, "renderInput" | "classNameSuffix">;
-export declare const Field: ({ classNameContainerInput, classNameContainerLabel, className, label, forceDisplayMessage, message, messageType, required, classModifier, children, disabled, helpMessage, id, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, labelPosition, classNameSuffix, renderInput, appendChildren, ...otherProps }: InputProps) => import("react/jsx-runtime").JSX.Element | null;
+export type ConsumerFieldProps = Omit<InputProps, "renderInput" | "classNameSuffix" | "children"> & {
+    /**
+     * Element appended right to the input
+     */
+    rightElement?: ReactNode;
+};
+export declare const Field: ({ classNameContainerInput, classNameContainerLabel, className, label, forceDisplayMessage, message, messageType, required, classModifier, disabled, helpMessage, id, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, labelPosition, classNameSuffix, renderInput, appendChildren, ...otherProps }: InputProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/Form/core/Field.js

@@ -4,13 +4,13 @@ import { useId } from "react";
 import { FieldError, FormClassManager, HelpMessage, useInputClassModifier, } from ".";
 import { getComponentClassName } from "../../utilities";
 import { useAriaInvalid } from "./useAriaInvalid";
-export const Field = ({ classNameContainerInput = "col-md-10", classNameContainerLabel = "col-md-2", className, label, forceDisplayMessage, message, messageType, required, classModifier = "", children, disabled = false, helpMessage, id, isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, labelPosition = "center", classNameSuffix = "text", renderInput, appendChildren, ...otherProps }) => {
+export const Field = ({ classNameContainerInput = "col-md-10", classNameContainerLabel = "col-md-2", className, label, forceDisplayMessage, message, messageType, required, classModifier = "", disabled = false, helpMessage, id, isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, labelPosition = "center", classNameSuffix = "text", renderInput, appendChildren, ...otherProps }) => {
     const inputUseId = useId();
     const inputId = id ?? inputUseId;
     const actualRequired = required || classModifier.includes("required");
     const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
     const errorId = forceDisplayMessage || helpMessage ? `${inputId}-description` : undefined;
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), actualRequired);
+    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, false, actualRequired);
     const labelId = useId();
     if (!isVisible) {
         return null;
@@ -33,7 +33,6 @@ export const Field = ({ classNameContainerInput = "col-md-10", classNameContaine
                             errorId,
                             disabled,
                             ariaInvalid: isInvalid,
-                            children,
                             ...otherProps,
                         }) }), forceDisplayMessage ? (_jsx(FieldError, { message: message, messageType: messageType, errorId: errorId })) : (_jsx(HelpMessage, { message: helpMessage, id: errorId })), appendChildren] })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.1-alpha.72",
+  "version": "1.2.1-alpha.74",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.2.1-alpha.72",
+    "@axa-fr/design-system-slash-css": "1.2.1-alpha.74",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },