@axa-fr/design-system-slash-react 1.2.1-alpha.12 → 1.2.1-alpha.123

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

@@ -1,29 +1,8 @@
-import { OptionHTMLAttributes, ReactNode } from "react";
+import { OptionHTMLAttributes } from "react";
 declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<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;
+    label: import("react").ReactNode;
     id?: string;
+    className?: string;
     classModifier?: string;
     classNameContainerLabel?: string;
     classNameContainerInput?: string;
@@ -31,64 +10,33 @@ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<
     roleContainer?: string;
     ariaLabelContainer?: string;
     isLabelContainerLinkedToInput?: boolean;
-    errorId?: string;
+    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<{
-    form?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined | undefined;
-    ref?: import("react").Ref<HTMLSelectElement> | undefined;
-    key?: import("react").Key | null | undefined;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
+    color?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
+    name?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
     role?: import("react").AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-    popoverTarget?: string | undefined | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
+    tabIndex?: number | undefined | undefined;
     "aria-activedescendant"?: string | undefined | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -142,7 +90,7 @@ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<
     "aria-valuemin"?: number | undefined | undefined;
     "aria-valuenow"?: number | undefined | undefined;
     "aria-valuetext"?: string | undefined | undefined;
-    children: ReactNode | undefined;
+    children: import("react").ReactNode | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined | undefined;
@@ -314,9 +262,56 @@ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
+    ref?: import("react").Ref<HTMLSelectElement> | undefined;
+    form?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     classModifier?: string | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
     disabled?: boolean | undefined | undefined;
-    name?: string | undefined | undefined;
     value?: string | number | readonly string[] | undefined;
     required?: boolean | undefined | undefined;
     autoComplete?: string | undefined | undefined;
@@ -328,37 +323,15 @@ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<
     options?: OptionHTMLAttributes<HTMLOptionElement>[];
     mode?: "default" | "base";
 } & {
-    children?: ReactNode | undefined;
+    children?: import("react").ReactNode | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLSelectElement> & {
-    helpMessage?: ReactNode;
     options: OptionHTMLAttributes<HTMLOptionElement>[];
 } & {
-    children?: ReactNode | undefined;
+    children?: import("react").ReactNode | undefined;
 }, "ref"> | Omit<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;
+    label: import("react").ReactNode;
     id?: string;
+    className?: string;
     classModifier?: string;
     classNameContainerLabel?: string;
     classNameContainerInput?: string;
@@ -366,7 +339,23 @@ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<
     roleContainer?: string;
     ariaLabelContainer?: string;
     isLabelContainerLinkedToInput?: boolean;
-    errorId?: string;
+    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;
@@ -378,11 +367,10 @@ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<
     options?: OptionHTMLAttributes<HTMLOptionElement>[];
     mode?: "default" | "base";
 } & {
-    children?: ReactNode | undefined;
+    children?: import("react").ReactNode | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLSelectElement> & {
-    helpMessage?: ReactNode;
     options: OptionHTMLAttributes<HTMLOptionElement>[];
 } & {
-    children?: ReactNode | undefined;
+    children?: import("react").ReactNode | undefined;
 }, "ref">) & import("react").RefAttributes<HTMLSelectElement>>;
 export { SelectInput };

package/dist/Form/Select/SelectInput.js

@@ -1,15 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, } from "react";
-import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { Field } from "../core";
 import { Select } from "./Select";
-import { useAriaInvalid } from "../core/useAriaInvalid";
-const SelectInput = forwardRef(({ classModifier = "", message, children, helpMessage, id, disabled = false, label, classNameContainerLabel, classNameContainerInput, messageType, isVisible, forceDisplayMessage, className, required, ...otherSelectProps }, inputRef) => {
-    const generatedId = useId();
-    const errorUseId = useId();
-    const inputId = id ?? generatedId;
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    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(Select, { id: inputId, disabled: disabled, classModifier: inputClassModifier, ref: inputRef, required: required, "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...otherSelectProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+const SelectInput = forwardRef(({ label, options, ...props }, inputRef) => {
+    return (_jsx(Field, { label: label, classNameSuffix: "select", ...props, renderInput: ({ classModifier, id, ariaInvalid, errorId, ...otherSelectProps }) => (_jsx(Select, { id: id, ref: inputRef, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, options: options, ...otherSelectProps })) }));
 });
 SelectInput.displayName = "SelectInput";
 export { SelectInput };

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

@@ -20,5 +20,8 @@ type Props = Omit<RcSliderProps, "marks" | "onChange" | "onChangeComplete"> & {
         value: number;
     }) => void;
 };
+/**
+ * @deprecated Slider is deprecated and will be removed in a future major release.
+ */
 declare const Slider: ({ options, value, defaultValue, className, classModifier, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Slider };

package/dist/Form/Slider/Slider.js

@@ -2,6 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import RcSlider from "rc-slider";
 import { useCallback, useMemo, } from "react";
 import { getComponentClassName } from "../../utilities";
+/**
+ * @deprecated Slider is deprecated and will be removed in a future major release.
+ */
 const Slider = ({ options, value, defaultValue, className, classModifier, ...otherProps }) => {
     const defaultValueIndex = useMemo(() => {
         const newDefaultValueIndex = options.findIndex((opt) => opt.value === (defaultValue || value));

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

@@ -1,8 +1,9 @@
-import { type ComponentProps, type ReactNode } from "react";
-import { LegacyField } from "../core";
+import { type ComponentProps } from "react";
+import { ConsumerFieldProps } from "../core";
 import { Slider } from "./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;
+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: ({ rightElement, name, options, label, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export { SliderInput };

package/dist/Form/Slider/SliderInput.js

@@ -1,15 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useMemo } from "react";
-import { HelpMessage, LegacyField } from "../core";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } 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(() => {
-        if (id) {
-            return id;
-        }
-        return generatedId;
-    }, [generatedId, id]);
-    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 })] }));
+/**
+ * @deprecated This component is deprecated and will be removed in a future major release.
+ */
+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,8 +1,6 @@
-import { ComponentProps, ReactNode } from "react";
-import { Field } from "../core";
+import { ComponentProps } from "react";
+import { ConsumerFieldProps } from "../core";
 import { Text } from "./Text";
-export type TextInputProps = Omit<ComponentProps<typeof Field> & ComponentProps<typeof Text> & {
-    helpMessage?: ReactNode;
-}, "renderInput">;
+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,12 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+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";
-import { useAriaInvalid } from "../core/useAriaInvalid";
-const TextInput = forwardRef(({ children, message, forceDisplayMessage, messageType, ...props }, inputRef) => {
-    const errorUseId = useId();
-    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier }) => (_jsx(Text, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...props })), errorId: errorUseId, forceDisplayMessage: forceDisplayMessage, message: message, 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

@@ -1,11 +1,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 { LegacyField } from "../core";
+import { ComponentProps } from "react";
+import { type ConsumerFieldProps } from "../core";
 import { Textarea } from "./Textarea";
-type Props = ComponentProps<typeof LegacyField> & ComponentProps<typeof Textarea> & {
-    helpMessage?: ReactNode;
-};
+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,19 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } 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, useId } from "react";
-import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
+import { forwardRef } from "react";
+import { Field } from "../core";
 import { Textarea } from "./Textarea";
-import { useAriaInvalid } from "../core/useAriaInvalid";
-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 errorUseId = useId();
-    const inputId = id ?? inputUseId;
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    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__textarea", classModifier: `${rowModifier} ${inputFieldClassModifier}`, children: [_jsx(Textarea, { ...textareaInputProps, id: inputId, rows: rows, cols: cols, classModifier: inputClassModifier, disabled: disabled, ref: inputRef, "aria-describedby": errorUseId, "aria-invalid": isInvalid }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+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/{LegacyField.d.ts → Deprecated/Field.d.ts}

@@ -13,5 +13,9 @@ type FieldProps = Omit<ComponentPropsWithoutRef<typeof FieldForm>, "children"> &
     isLabelContainerLinkedToInput?: boolean;
     errorId?: string;
 };
+/**
+ * @deprecated This component is deprecated and will be removed in future versions. Use components with labels instead, such as `TextInput`
+ * or `SelectInput`.
+ */
 export declare const LegacyField: ({ id, message, messageType, label, children, forceDisplayMessage, classModifier, className, classNameContainerLabel, classNameContainerInput, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, errorId, }: FieldProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/Form/core/{LegacyField.js → Deprecated/Field.js}

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { getComponentClassName } from "../../utilities";
-import { FieldError } from "./FieldError";
+import { getComponentClassName } from "../../../utilities";
+import { FieldError } from "../FieldError";
+import { MessageTypes } from "../MessageTypes";
 import { FieldForm } from "./FieldForm";
-import { MessageTypes } from "./MessageTypes";
+/**
+ * @deprecated This component is deprecated and will be removed in future versions. Use components with labels instead, such as `TextInput`
+ * or `SelectInput`.
+ */
 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, errorId, }) => {
     if (!isVisible) {
         return null;

package/dist/Form/core/{FieldForm.d.ts → Deprecated/FieldForm.d.ts}

@@ -1,6 +1,6 @@
 import { type BaseSyntheticEvent, type Dispatch, type ReactElement, type ReactNode, type SetStateAction } from "react";
-import { FormClassManager } from "./FormClassManager";
-import { MessageTypes } from "./MessageTypes";
+import { FormClassManager } from "../FormClassManager";
+import { MessageTypes } from "../MessageTypes";
 type TMessage = {
     message?: string;
     messageType?: MessageTypes;
@@ -94,5 +94,10 @@ type RenderChildrenProps = {
     wrapper: EventFunction;
 } & Partial<Pick<FieldFormProps, "children">> & ReturnType<typeof getMessageInfo>;
 export declare const renderedChildren: ({ children, wrapper, message, messageType, }: RenderChildrenProps) => ReactNode;
+/**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * This was an internal component used to manage the state of the form fields.
+ * It is not recommended to use it directly in your code as it is not a public API.
+ */
 export declare const FieldForm: ({ children, message, messageType, className, classModifier, forceDisplayMessage, setStateMemoryFn, onChangeByStateFn, setStateOnBlurFn, setStateOnFocusFn, initialState, }: FieldFormProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/core/{FieldForm.js → Deprecated/FieldForm.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useEffect, useRef, useState, } from "react";
-import { getComponentClassName } from "../../utilities";
-import { FormClassManager } from "./FormClassManager";
-import { MessageTypes } from "./MessageTypes";
+import { getComponentClassName } from "../../../utilities";
+import { FormClassManager } from "../FormClassManager";
+import { MessageTypes } from "../MessageTypes";
 const defaultClassName = "md-10";
 const INITIAL_STATE = {
     hasLostFocusOnce: false,
@@ -123,6 +123,11 @@ export const renderedChildren = ({ children, wrapper, message, messageType, }) =
         }),
     });
 });
+/**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * This was an internal component used to manage the state of the form fields.
+ * It is not recommended to use it directly in your code as it is not a public API.
+ */
 export const FieldForm = ({ children, message = "", messageType = MessageTypes.error, className = defaultClassName, classModifier = "", forceDisplayMessage = false, setStateMemoryFn = setStateMemory, onChangeByStateFn = onChangeByState, setStateOnBlurFn = setStateOnBlur, setStateOnFocusFn = setStateOnFocus, initialState = INITIAL_STATE, }) => {
     const [state, setState] = useState(initialState);
     const previousForceDisplayMessage = useRef(forceDisplayMessage);

package/dist/Form/core/{FieldInput.d.ts → Deprecated/FieldInput.d.ts}

@@ -5,6 +5,10 @@ type FieldProps = {
     classModifier?: string;
     children?: ReactNode;
 };
+/**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * This was an internal component and it is not recommended to use it directly in your code as it is not a public API.
+ */
 export declare const FieldInput: {
     ({ children, className, classModifier, isVisible, }: FieldProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;

package/dist/Form/core/{FieldInput.js → Deprecated/FieldInput.js}

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../../utilities";
+import { getComponentClassName } from "../../../utilities";
+/**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * This was an internal component and it is not recommended to use it directly in your code as it is not a public API.
+ */
 export const FieldInput = ({ children, className = "", classModifier = "", isVisible = true, }) => {
     if (!isVisible) {
         return null;

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

@@ -1,12 +1,24 @@
 import { type ReactNode } from "react";
 import { MessageTypes } from ".";
 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.
+     */
     id?: string;
+    className?: string;
     classModifier?: string;
     classNameContainerLabel?: string;
     classNameContainerInput?: string;
+    /**
+     * Setting this to false will disable the rendering of the component
+     * @default true
+     * @deprecated You should handle the visibility of the component in your code
+     * instead of using this prop. This prop will be removed in a future version.
+     */
     isVisible?: boolean;
     roleContainer?: string;
     ariaLabelContainer?: string;
@@ -17,12 +29,52 @@ type InputProps = {
     required?: boolean;
     disabled?: boolean;
     helpMessage?: ReactNode;
-    errorId?: string;
-};
-export declare const Field: ({ classNameContainerInput, classNameContainerLabel, label, forceDisplayMessage, message, messageType, required, classModifier, children, disabled, helpMessage, id, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, errorId, renderInput, }: InputProps & {
+    /**
+     * Sets the position of the label relative to the input.
+     * Top will put the label at the top of the input group. This is useful for textarea for example.
+     * Center will put the label in the center of the input group, and is used for single line inputs in order to align the label and the input box.
+     * @default "center"
+     *
+     */
+    labelPosition?: "top" | "center";
+    /**
+     * suffix appended to the className of the div wrapping the input
+     * @deprecated We should rationalize the CSS for the components to avoid having to use different sufixes
+     * but it would be a breaking change to do so, so we keep it for now
+     * @example "textarea" will result in
+     * ```html
+     * <div class="af-form__textarea">
+     *  // ... input
+     * </div>
+     * ```
+     * @default "text"
+     */
+    classNameSuffix?: string;
     renderInput: (props: {
         id: string;
         classModifier: string;
-    }) => ReactNode;
-}) => import("react/jsx-runtime").JSX.Element | null;
+        errorId?: string;
+        ariaInvalid?: boolean;
+    } & Record<string, unknown>) => ReactNode;
+    /**
+     * Elements to be appended to the end of the input group, just before the 2 ending divs
+     * @example <Field appendChildren={<Button>Submit</Button>} renderinput={() => <span>hello</span>} />
+     * will result in
+     * ```html
+     * <div class="af-form__text">
+     *  <span>hello</span>
+     *  <Button>Submit</Button>
+     * </div>
+     * ```
+     * @optional
+     */
+    appendChildren?: ReactNode;
+};
+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 {};