@axa-fr/design-system-apollo-react 1.0.5-alpha.379 → 1.0.5-alpha.383

package/dist/Form/Dropdown/DropdownCommon.js

@@ -2,12 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
 import classNames from "classnames";
 const Dropdown = forwardRef(({ id, required, label, error, placeholder, children, helper, success, description, buttonLabel, onButtonClick, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, ...otherProps }, inputRef) => {
-    const idLabel = useId();
     const idMessage = useId();
     let inputId = useId();
     inputId = id || inputId;
     const classname = classNames("af-form__dropdown-input", error && "af-form__dropdown-input--error");
-    return (_jsxs("div", { children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId, idLabel: idLabel }), _jsxs("select", { className: classname, ...otherProps, ref: inputRef, id: inputId, children: [Boolean(placeholder) && (_jsx("option", { disabled: true, value: "", children: placeholder })), children] }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), _jsx(ItemMessageComponent, { id: idMessage, message: error || success, messageType: error ? "error" : "success" })] }));
+    return (_jsxs("div", { children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsxs("select", { className: classname, ...otherProps, ref: inputRef, id: inputId, children: [Boolean(placeholder) && (_jsx("option", { disabled: true, value: "", children: placeholder })), children] }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), _jsx(ItemMessageComponent, { id: idMessage, message: error || success, messageType: error ? "error" : "success" })] }));
 });
 Dropdown.displayName = "Dropdown";
 export { Dropdown };

package/dist/Form/InputDate/InputDateApollo.d.ts

@@ -14,11 +14,10 @@ export declare const InputDate: import("react").ForwardRefExoticComponent<Omit<O
     ItemLabelComponent: import("react").ComponentType<Omit<ComponentProps<typeof import("../ItemLabel/ItemLabelCommon").ItemLabel>, "ButtonComponent">>;
     ItemMessageComponent: import("react").ComponentType<ComponentProps<typeof ItemMessage>>;
 } & Partial<{
-    label?: string;
+    label?: import("react").ReactNode;
     description?: string;
     required?: boolean;
     inputId: string;
-    idLabel: string;
     sideButtonLabel?: string;
     onSideButtonClick?: import("react").MouseEventHandler<HTMLButtonElement>;
     buttonLabel?: string;

package/dist/Form/InputDate/InputDateCommon.js

@@ -8,8 +8,8 @@ const InputDate = forwardRef(({ className, classModifier = "", defaultValue, val
     inputId = otherProps.id ?? inputId;
     const idMessage = useId();
     const idHelp = useId();
-    const idLabel = useId();
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, required: required, inputId: inputId, idLabel: idLabel }), _jsx("input", { ...otherProps, id: inputId, className: componentClassName, type: "date", ref: inputRef, defaultValue: formatInputDateValue(defaultValue), value: formatInputDateValue(value), "aria-labelledby": idLabel, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error ?? ariaErrormessage), "aria-describedby": idHelp, required: required, min: formatInputDateValue(min), max: formatInputDateValue(max) }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })), _jsx(ItemMessageComponent, { id: idMessage, message: error ?? success, messageType: error ? "error" : "success" })] }));
+    const ariaDescribedby = [helper && idHelp, success && idMessage].filter(Boolean);
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, required: required, inputId: inputId }), _jsx("input", { ...otherProps, id: inputId, className: componentClassName, type: "date", ref: inputRef, defaultValue: formatInputDateValue(defaultValue), value: formatInputDateValue(value), "aria-errormessage": ariaErrormessage ?? (error ? idMessage : undefined), "aria-invalid": Boolean(error ?? ariaErrormessage), "aria-describedby": ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, required: required, min: formatInputDateValue(min), max: formatInputDateValue(max) }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })), _jsx(ItemMessageComponent, { id: idMessage, message: error || success, messageType: error ? "error" : "success" })] }));
 });
 InputDate.displayName = "InputDate";
 export { InputDate };

package/dist/Form/InputDate/InputDateLF.d.ts

@@ -14,11 +14,10 @@ export declare const InputDate: import("react").ForwardRefExoticComponent<Omit<O
     ItemLabelComponent: import("react").ComponentType<Omit<ComponentProps<typeof import("../ItemLabel/ItemLabelCommon").ItemLabel>, "ButtonComponent">>;
     ItemMessageComponent: import("react").ComponentType<ComponentProps<typeof ItemMessage>>;
 } & Partial<{
-    label?: string;
+    label?: import("react").ReactNode;
     description?: string;
     required?: boolean;
     inputId: string;
-    idLabel: string;
     sideButtonLabel?: string;
     onSideButtonClick?: import("react").MouseEventHandler<HTMLButtonElement>;
     buttonLabel?: string;

package/dist/Form/InputPhone/InputPhoneCommon.js

@@ -8,8 +8,8 @@ const InputPhoneCommon = forwardRef(({ className, classModifier = "", helper, er
     let inputId = useId();
     inputId = otherProps.id || inputId;
     const idMessage = useId();
-    const idLabel = useId();
     const idHelp = useId();
+    const ariaDescribedby = [helper && idHelp, success && idMessage].filter(Boolean);
     /**
      * Gère le changement de valeur du champ numéro de téléphone.
      * - Récupère une fonction de masquage (mask) depuis les props ou utilise une version par défaut.
@@ -25,7 +25,7 @@ const InputPhoneCommon = forwardRef(({ className, classModifier = "", helper, er
         const maskedValue = mask(rawValue);
         onChangeInput?.(maskedValue);
     };
-    return (_jsxs("div", { className: "af-form__input-phone-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId, idLabel: idLabel }), _jsxs("div", { className: "af-form__input-phone-fields", children: [showSelect && (_jsx("div", { className: "af-form__country-code-wrapper", children: _jsx(CountryCodeSelect, { options: countryCodeOptions, defaultCountry: defaultCountry, onChangeSelect: onChangeSelect, IconComponent: IconComponent, disabled: disabled }) })), _jsx(InputTextComponent, { ...otherProps, className: componentClassName, ref: inputRef, error: error, type: "tel", required: required, placeholder: otherProps.placeholder, "aria-errormessage": ariaErrormessage, value: otherProps.value, onChange: handleChangeNumber, disabled: disabled, idLabel: idLabel, idMessage: idMessage, idHelp: idHelp, id: inputId })] }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-phone-helper", children: helper })), _jsx(ItemMessageComponent, { id: idMessage, message: error || success, messageType: error ? "error" : "success" })] }));
+    return (_jsxs("div", { className: "af-form__input-phone-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsxs("div", { className: "af-form__input-phone-fields", children: [showSelect && (_jsx("div", { className: "af-form__country-code-wrapper", children: _jsx(CountryCodeSelect, { options: countryCodeOptions, defaultCountry: defaultCountry, onChangeSelect: onChangeSelect, IconComponent: IconComponent, disabled: disabled }) })), _jsx(InputTextComponent, { ...otherProps, className: componentClassName, ref: inputRef, error: error, type: "tel", required: required, placeholder: otherProps.placeholder, "aria-errormessage": ariaErrormessage, value: otherProps.value, onChange: handleChangeNumber, disabled: disabled, idMessage: error ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, id: inputId })] }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-phone-helper", children: helper })), _jsx(ItemMessageComponent, { id: idMessage, message: error || success, messageType: error ? "error" : "success" })] }));
 });
 InputPhoneCommon.displayName = "InputPhone";
 export { InputPhoneCommon };

package/dist/Form/InputText/InputTextApollo.d.ts

@@ -3,7 +3,7 @@ import { type ComponentProps } from "react";
 import { ItemMessage } from "../ItemMessage/ItemMessageApollo";
 import { InputTextAtom } from "../InputTextAtom/InputTextAtomApollo";
 export declare const InputText: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
-    unit?: React.ReactNode;
+    unit?: import("react").ReactNode;
     classModifier?: string;
     helper?: string;
     error?: string;
@@ -13,11 +13,10 @@ export declare const InputText: import("react").ForwardRefExoticComponent<Omit<O
     ItemMessageComponent: import("react").ComponentType<ComponentProps<typeof ItemMessage>>;
     InputTextAtomComponent: import("react").ComponentType<ComponentProps<typeof InputTextAtom>>;
 } & Partial<{
-    label?: string;
+    label?: import("react").ReactNode;
     description?: string;
     required?: boolean;
     inputId: string;
-    idLabel: string;
     sideButtonLabel?: string;
     onSideButtonClick?: import("react").MouseEventHandler<HTMLButtonElement>;
     buttonLabel?: string;

package/dist/Form/InputText/InputTextCommon.d.ts

@@ -1,9 +1,9 @@
-import { type ComponentProps, type ComponentPropsWithRef, type ComponentType } from "react";
+import { type ComponentProps, type ComponentPropsWithRef, type ComponentType, type ReactNode } from "react";
 import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
 import { ItemLabel } from "../ItemLabel/ItemLabelCommon";
 import { ItemMessage } from "../ItemMessage/ItemMessageCommon";
 type InputTextProps = ComponentPropsWithRef<"input"> & {
-    unit?: React.ReactNode;
+    unit?: ReactNode;
     classModifier?: string;
     helper?: string;
     error?: string;

package/dist/Form/InputText/InputTextCommon.js

@@ -7,8 +7,8 @@ const InputText = forwardRef(({ unit, className, classModifier = "", helper, err
     inputId = otherProps.id || inputId;
     const idMessage = useId();
     const idHelp = useId();
-    const idLabel = useId();
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId, idLabel: idLabel }), _jsx(InputTextAtomComponent, { id: inputId, ref: inputRef, unit: unit, className: componentClassName, error: error, required: required, idMessage: idMessage, idHelp: idHelp, idLabel: idLabel, ...otherProps }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })), _jsx(ItemMessageComponent, { id: idMessage, message: error || success, messageType: error ? "error" : "success" })] }));
+    const ariaDescribedby = [helper && idHelp, success && idMessage].filter(Boolean);
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsx(InputTextAtomComponent, { id: inputId, ref: inputRef, unit: unit, className: componentClassName, error: error, required: required, idMessage: error ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, ...otherProps }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })), _jsx(ItemMessageComponent, { id: idMessage, message: error || success, messageType: error ? "error" : "success" })] }));
 });
 InputText.displayName = "InputText";
 export { InputText };

package/dist/Form/InputText/InputTextLF.d.ts

@@ -3,7 +3,7 @@ import { type ComponentProps } from "react";
 import { ItemMessage } from "../ItemMessage/ItemMessageLF";
 import { InputTextAtom } from "../InputTextAtom/InputTextAtomLF";
 export declare const InputText: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
-    unit?: React.ReactNode;
+    unit?: import("react").ReactNode;
     classModifier?: string;
     helper?: string;
     error?: string;
@@ -13,11 +13,10 @@ export declare const InputText: import("react").ForwardRefExoticComponent<Omit<O
     ItemMessageComponent: import("react").ComponentType<ComponentProps<typeof ItemMessage>>;
     InputTextAtomComponent: import("react").ComponentType<ComponentProps<typeof InputTextAtom>>;
 } & Partial<{
-    label?: string;
+    label?: import("react").ReactNode;
     description?: string;
     required?: boolean;
     inputId: string;
-    idLabel: string;
     sideButtonLabel?: string;
     onSideButtonClick?: import("react").MouseEventHandler<HTMLButtonElement>;
     buttonLabel?: string;

package/dist/Form/InputTextAtom/InputTextAtomCommon.d.ts

@@ -1,11 +1,10 @@
-import { type ComponentPropsWithRef } from "react";
+import { type ComponentPropsWithRef, type ReactNode } from "react";
 type InputTextAtomProps = ComponentPropsWithRef<"input"> & {
-    unit?: React.ReactNode;
+    unit?: ReactNode;
     classModifier?: string;
     error?: string;
     idMessage?: string;
     idHelp?: string;
-    idLabel?: string;
 };
 declare const InputTextAtom: import("react").ForwardRefExoticComponent<Omit<InputTextAtomProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { InputTextAtom };

package/dist/Form/InputTextAtom/InputTextAtomCommon.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import { forwardRef, useId, } from "react";
 import { getComponentClassName } from "../../utilities/getComponentClassName";
-const InputTextAtom = forwardRef(({ unit, className, classModifier = "", error, required, "aria-errormessage": ariaErrormessage, idMessage, idHelp, idLabel, ...otherProps }, inputRef) => {
+const InputTextAtom = forwardRef(({ unit, className, classModifier = "", error, required, "aria-errormessage": ariaErrormessage, idMessage, idHelp, ...otherProps }, inputRef) => {
     const componentClassName = getComponentClassName("af-form__input-text", className, classModifier + (error || ariaErrormessage ? " error" : ""));
     let inputId = useId();
     inputId = otherProps.id || inputId;
-    return (_jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: otherProps.type || "text", required: required, ref: inputRef, "aria-labelledby": idLabel, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error || ariaErrormessage), "aria-describedby": idHelp, ...otherProps }), unit] }));
+    return (_jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: otherProps.type || "text", required: required, ref: inputRef, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error || ariaErrormessage), "aria-describedby": idHelp, ...otherProps }), unit] }));
 });
 InputTextAtom.displayName = "InputTextAtom";
 export { InputTextAtom };

package/dist/Form/ItemLabel/ItemLabelCommon.d.ts

@@ -1,16 +1,15 @@
-import { type ComponentType, type MouseEventHandler } from "react";
+import { type ComponentType, type MouseEventHandler, type ReactNode } from "react";
 import type { ButtonProps } from "../../Button/ButtonCommon";
 type ItemLabelProps = {
-    label?: string;
+    label?: ReactNode;
     description?: string;
     required?: boolean;
     inputId: string;
-    idLabel: string;
     sideButtonLabel?: string;
     onSideButtonClick?: MouseEventHandler<HTMLButtonElement>;
     buttonLabel?: string;
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
     ButtonComponent: ComponentType<ButtonProps>;
 };
-export declare const ItemLabel: ({ label, description, required, inputId, idLabel, sideButtonLabel, onSideButtonClick, buttonLabel, onButtonClick, ButtonComponent, }: ItemLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ItemLabel: ({ label, description, required, inputId, sideButtonLabel, onSideButtonClick, buttonLabel, onButtonClick, ButtonComponent, }: ItemLabelProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/Form/ItemLabel/ItemLabelCommon.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { useId, } from "react";
 import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
 import { Svg } from "../../Svg/Svg";
-export const ItemLabel = ({ label, description, required, inputId, idLabel, sideButtonLabel, onSideButtonClick, buttonLabel, onButtonClick, ButtonComponent, }) => {
+export const ItemLabel = ({ label, description, required, inputId, sideButtonLabel, onSideButtonClick, buttonLabel, onButtonClick, ButtonComponent, }) => {
     const idDescription = useId();
     if (!label && !description && !buttonLabel && !sideButtonLabel) {
         return null;
     }
-    return (_jsxs("div", { className: "af-item-label", children: [label && (_jsxs("label", { htmlFor: inputId, id: idLabel, "aria-describedby": description ? idDescription : undefined, className: "af-item-label__label", children: [label, " ", required && _jsx("span", { "aria-hidden": "true", children: " *" })] })), sideButtonLabel && (_jsx(ButtonComponent, { variant: "ghost", onClick: onSideButtonClick, className: "af-item-label__sidebutton", children: sideButtonLabel })), description && (_jsx("span", { id: idDescription, className: "af-item-label__description", children: description })), buttonLabel && (_jsx(ButtonComponent, { className: "af-item-label__more", variant: "ghost", iconLeft: _jsx(Svg, { src: infoIcon, "aria-hidden": "true" }), onClick: onButtonClick, children: buttonLabel }))] }));
+    return (_jsxs("div", { className: "af-item-label", children: [label && (_jsxs("label", { htmlFor: inputId, "aria-describedby": description ? idDescription : undefined, className: "af-item-label__label", children: [label, " ", required && _jsx("span", { "aria-hidden": true, children: " *" })] })), sideButtonLabel && (_jsx(ButtonComponent, { variant: "ghost", onClick: onSideButtonClick, className: "af-item-label__sidebutton", children: sideButtonLabel })), description && (_jsx("span", { id: idDescription, className: "af-item-label__description", children: description })), buttonLabel && (_jsx(ButtonComponent, { className: "af-item-label__more", variant: "ghost", iconLeft: _jsx(Svg, { src: infoIcon, "aria-hidden": "true" }), onClick: onButtonClick, children: buttonLabel }))] }));
 };

package/dist/Form/Radio/CardRadio/CardRadioCommon.js

@@ -7,14 +7,15 @@ import { CardRadioItem } from "./CardRadioItem";
 const CardRadioCommon = ({ className, labelGroup, descriptionGroup, RadioComponent, IconComponent, isRequired, options, type = "vertical", error, name, value, onChange, ItemMessageComponent, ...inputProps }) => {
     const componentClassName = getComponentClassName("af-card-radio__container", className);
     const RadioGroupClassName = getComponentClassName("af-card-radio-group", className, type);
-    const errorId = useId();
+    const cardRadioId = useId();
+    const errorId = `${cardRadioId}:error`;
     const isMobile = useIsSmallScreen(BREAKPOINT.SM);
     const size = isMobile
         ? "M"
         : "L";
     return (_jsxs("fieldset", { className: componentClassName, "aria-invalid": Boolean(error), "aria-errormessage": error ? errorId : undefined, children: [labelGroup && (_jsxs("legend", { className: "af-card-radio__legend", children: [_jsxs("p", { children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": true, children: "\u00A0*" })] }), descriptionGroup && (_jsx("p", { className: "af-card-radio__description", children: descriptionGroup }))] })), _jsx("div", { className: RadioGroupClassName, children: options.map((cardRadioItemProps) => (_jsx(CardRadioItem, { name: name, onChange: onChange, size: size, RadioComponent: RadioComponent, IconComponent: IconComponent, checked: value !== undefined
                         ? value === cardRadioItemProps.value
-                        : undefined, ...inputProps, ...cardRadioItemProps }, `${name}-${crypto.randomUUID()}`))) }), _jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" })] }));
+                        : undefined, ...inputProps, ...cardRadioItemProps }, `${name ?? cardRadioId}-${cardRadioItemProps.label}`))) }), _jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" })] }));
 };
 CardRadioCommon.displayName = "CardRadioCommon";
 export { CardRadioCommon };

package/dist/Form/TextArea/TextAreaApollo.d.ts

@@ -2,11 +2,10 @@ import "@axa-fr/design-system-apollo-css/dist/Form/TextArea/TextAreaApollo.scss"
 import { type ComponentProps } from "react";
 import { ItemMessage } from "../ItemMessage/ItemMessageApollo";
 export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").ClassAttributes<HTMLTextAreaElement> & import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & Pick<{
-    label?: string;
+    label?: import("react").ReactNode;
     description?: string;
     required?: boolean;
     inputId: string;
-    idLabel: string;
     sideButtonLabel?: string;
     onSideButtonClick?: import("react").MouseEventHandler<HTMLButtonElement>;
     buttonLabel?: string;

package/dist/Form/TextArea/TextAreaCommon.js

@@ -5,9 +5,9 @@ const TextArea = forwardRef(({ className, classModifier = "", label, description
     const componentClassName = getComponentClassName("af-form__input-textarea", className, classModifier);
     let inputId = useId();
     inputId = otherProps.id || inputId;
+    const idHelp = useId();
     const idError = useId();
-    const idLabel = useId();
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId, idLabel: idLabel }), _jsx("textarea", { id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": idError, "aria-invalid": Boolean(error), ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), _jsx(ItemMessageComponent, { id: idError, message: error })] }));
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsx("textarea", { id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": error ? idError : undefined, "aria-describedby": helper ? idHelp : undefined, "aria-invalid": Boolean(error), ...otherProps }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })), _jsx(ItemMessageComponent, { id: idError, message: error })] }));
 });
 TextArea.displayName = "TextArea";
 export { TextArea };

package/dist/Form/TextArea/TextAreaLF.d.ts

@@ -2,11 +2,10 @@ import "@axa-fr/design-system-apollo-css/dist/Form/TextArea/TextAreaLF.scss";
 import { type ComponentProps } from "react";
 import { ItemMessage } from "../ItemMessage/ItemMessageLF";
 export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").ClassAttributes<HTMLTextAreaElement> & import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & Pick<{
-    label?: string;
+    label?: import("react").ReactNode;
     description?: string;
     required?: boolean;
     inputId: string;
-    idLabel: string;
     sideButtonLabel?: string;
     onSideButtonClick?: import("react").MouseEventHandler<HTMLButtonElement>;
     buttonLabel?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.5-alpha.379",
+  "version": "1.0.5-alpha.383",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.379",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.379",
+    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.383",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.383",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },