@axa-fr/canopee-react 1.8.1-alpha.1 → 2.0.0-RC.1

package/dist/prospect-client/Form/MultiSelectList/MultiSelectListCommon.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentType } from "react";
+import type { ListProps } from "../../List/List/ListCommon";
+import type { ItemMultiSelectCommonProps } from "../ItemMultiSelect/ItemMultiSelectCommon";
+export type MultiSelectListProps = Omit<ListProps, "children" | "separator" | "onChange"> & {
+    items: Omit<ItemMultiSelectCommonProps, "Checkbox">[];
+};
+type MultiSelectListCommonProps = MultiSelectListProps & {
+    ItemMultiSelectComponent: ComponentType<Omit<ItemMultiSelectCommonProps, "Checkbox">>;
+};
+export declare const MultiSelectListCommon: ({ items, ItemMultiSelectComponent, }: MultiSelectListCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/Form/MultiSelectList/MultiSelectListCommon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MultiSelectListCommon = ({ items, ItemMultiSelectComponent, }) => (_jsx("ul", { className: "af-multi-select-list", children: items.map((item, index) => (_jsx("li", { children: _jsx(ItemMultiSelectComponent, { ...item, variant: index % 2 === 0 ? "primary" : "secondary" }) }, item.id))) }));

package/dist/prospect-client/Form/MultiSelectList/MultiSelectListLF.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/canopee-css/client/Form/MultiSelectList/MultiSelectListAll.css";
+import { type MultiSelectListProps } from "./MultiSelectListCommon";
+export type { MultiSelectListProps } from "./MultiSelectListCommon";
+export declare const MultiSelectList: (props: MultiSelectListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/MultiSelectList/MultiSelectListLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/Form/MultiSelectList/MultiSelectListAll.css";
+import { ItemMultiSelect } from "../ItemMultiSelect/ItemMultiSelectLF";
+import { MultiSelectListCommon, } from "./MultiSelectListCommon";
+export const MultiSelectList = (props) => (_jsx(MultiSelectListCommon, { ...props, ItemMultiSelectComponent: ItemMultiSelect }));

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioApollo.d.ts

@@ -0,0 +1,3 @@
+import { type CardRadioProps } from "./CardRadioCommon";
+import "@axa-fr/canopee-css/prospect/Form/Radio/CardRadio/CardRadioApollo.css";
+export declare const CardRadio: (props: CardRadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioApollo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "../../../Icon/IconApollo";
+import { Radio } from "../Radio/RadioApollo";
+import { CardRadioCommon } from "./CardRadioCommon";
+import "@axa-fr/canopee-css/prospect/Form/Radio/CardRadio/CardRadioApollo.css";
+export const CardRadio = (props) => (_jsx(CardRadioCommon, { ...props, RadioComponent: Radio, IconComponent: Icon }));

package/dist/prospect-client/Form/Radio/{CardRadioOption/CardRadioOptionCommon.d.ts → CardRadio/CardRadioCommon.d.ts}

@@ -2,24 +2,23 @@ import { type ComponentProps, type ComponentType, type ReactNode } from "react";
 import { BasePicture } from "../../../BasePicture/BasePicture";
 import type { Icon as IconCommon } from "../../../Icon/IconCommon";
 import type { Radio } from "../Radio/RadioCommon";
-type BaseCardRadioOptionProps = Omit<ComponentProps<typeof Radio>, "size"> & {
+type BaseCardRadioProps = Omit<ComponentProps<typeof Radio>, "size"> & {
     label: ReactNode;
     description?: ReactNode;
     subtitle?: ReactNode;
 };
-export type CardRadioOptionProps = BaseCardRadioOptionProps & {
-    /**
-     * @deprecated Use `position` instead.
-     */
-    type?: "vertical" | "horizontal";
+export type CardRadioProps = BaseCardRadioProps & {
     position?: "vertical" | "horizontal";
     icon?: ComponentProps<typeof IconCommon>["src"];
     src?: ComponentProps<typeof BasePicture>["src"];
     basePictureProps?: Omit<ComponentProps<typeof BasePicture>, "src">;
 };
-export type CardRadioOptionCommonProps = CardRadioOptionProps & {
+export type CardRadioCommonProps = CardRadioProps & {
     RadioComponent: ComponentType<ComponentProps<typeof Radio>>;
     IconComponent: ComponentType<ComponentProps<typeof IconCommon>>;
 };
-export declare const CardRadioOptionCommon: import("react").ForwardRefExoticComponent<Omit<CardRadioOptionCommonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const CardRadioCommon: {
+    ({ label, position, description, subtitle, icon, src, basePictureProps, variant, className, RadioComponent, IconComponent, ...inputProps }: CardRadioCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioCommon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { BasePicture } from "../../../BasePicture/BasePicture";
+import { getClassName } from "../../../utilities/getClassName";
+export const CardRadioCommon = ({ label, position, description, subtitle, icon, src, basePictureProps, variant, className, RadioComponent, IconComponent, ...inputProps }) => {
+    const isCardRadioHorizontal = position === "horizontal";
+    return (_jsxs("label", { className: getClassName({
+            baseClassName: "af-card-radio",
+            modifiers: [
+                variant === "error" && "invalid",
+                isCardRadioHorizontal && "horizontal",
+            ],
+            className,
+        }), children: [icon ? _jsx(IconComponent, { src: icon, role: "presentation" }) : null, isCardRadioHorizontal && src ? (_jsx(BasePicture, { src: src, ...basePictureProps })) : null, _jsxs("div", { className: "af-card-radio__content", children: [_jsx("p", { className: "af-card-radio__label", children: label }), Boolean(description) && (_jsx("p", { className: "af-card-radio__description", children: description })), Boolean(subtitle) && (_jsx("p", { className: "af-card-radio__subtitle", children: subtitle }))] }), _jsx(RadioComponent, { ...inputProps, variant: variant })] }));
+};
+CardRadioCommon.displayName = "CardRadioCommon";

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioLF.d.ts

@@ -0,0 +1,3 @@
+import { type CardRadioProps } from "./CardRadioCommon";
+import "@axa-fr/canopee-css/client/Form/Radio/CardRadio/CardRadioLF.css";
+export declare const CardRadio: (props: CardRadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioLF.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "../../../Icon/IconLF";
+import { Radio } from "../Radio/RadioLF";
+import { CardRadioCommon } from "./CardRadioCommon";
+import "@axa-fr/canopee-css/client/Form/Radio/CardRadio/CardRadioLF.css";
+export const CardRadio = (props) => (_jsx(CardRadioCommon, { ...props, RadioComponent: Radio, IconComponent: Icon }));

package/dist/prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupApollo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ItemMessage } from "../../ItemMessage/ItemMessageApollo";
-import { CardRadioOption } from "../CardRadioOption/CardRadioOptionApollo";
+import { ItemMessage } from "../../ItemMessage/ItemMessage";
+import { CardRadio } from "../CardRadio/CardRadioApollo";
 import { CardRadioGroupCommon, } from "./CardRadioGroupCommon";
 import "@axa-fr/canopee-css/prospect/Form/Radio/CardRadioGroup/CardRadioGroupApollo.css";
-export const CardRadioGroup = (props) => (_jsx(CardRadioGroupCommon, { ...props, CardRadioOptionComponent: CardRadioOption, ItemMessageComponent: ItemMessage }));
+export const CardRadioGroup = (props) => (_jsx(CardRadioGroupCommon, { ...props, CardRadioComponent: CardRadio, ItemMessageComponent: ItemMessage }));

package/dist/prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupCommon.d.ts

@@ -1,46 +1,22 @@
-import { type ComponentProps, type ComponentType, type PropsWithChildren, type ReactNode } from "react";
+import { type ComponentType, type PropsWithChildren, type ReactNode } from "react";
 import type { GridContainerProps } from "../../../utilities/types/GridContainerProps";
-import { ItemMessage, type ItemMessageProps } from "../../ItemMessage/ItemMessageCommon";
-import { type CardRadioOptionProps } from "../CardRadioOption/CardRadioOptionCommon";
-type RadioOption = Omit<CardRadioOptionProps, "name" | "type" | "isInvalid">;
-export type CardRadioGroupProps = Omit<CardRadioOptionProps, "value" | "label" | "type" | "isInvalid" | "icon" | "src" | "basePictureProps" | "description" | "subtitle" | "children" | "position"> & {
-    /**
-     * @deprecated Use `position` and `cardStyle` instead.
-     */
-    type?: "vertical" | "horizontal";
-    cardStyle?: CardRadioOptionProps["position"];
+import { type ItemMessageProps } from "../../ItemMessage/ItemMessage";
+import { type CardRadioProps } from "../CardRadio/CardRadioCommon";
+type RadioOption = Omit<CardRadioProps, "name" | "type" | "variant">;
+export type CardRadioGroupProps = Omit<CardRadioProps, "value" | "label" | "type" | "variant" | "icon" | "src" | "basePictureProps" | "description" | "subtitle" | "children" | "position"> & {
+    cardStyle?: CardRadioProps["position"];
     position?: "line" | "column";
-    /**
-     * @deprecated Use `label` instead.
-     */
-    labelGroup?: string;
-    /**
-     * @deprecated Use `description` instead.
-     */
-    descriptionGroup?: string;
     label: ReactNode;
     description?: ReactNode;
-    /**
-     * @deprecated Use `required` instead.
-     */
-    isRequired?: boolean;
-    /**
-     * @deprecated This prop is deprecated. To check an option, use the `checked` property in each item of the `options` array.
-     */
-    value?: number | string;
     options: RadioOption[];
-    /**
-     * @deprecated Use `message` and messageType instead.
-     */
-    error?: ReactNode;
     containerProps?: GridContainerProps<"fieldset">;
 } & PropsWithChildren & Partial<ItemMessageProps>;
 export type CardRadioCommonProps = CardRadioGroupProps & {
-    CardRadioOptionComponent: ComponentType<CardRadioOptionProps>;
-    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
+    CardRadioComponent: ComponentType<CardRadioProps>;
+    ItemMessageComponent: ComponentType<ItemMessageProps>;
 };
 declare const CardRadioGroupCommon: {
-    ({ className, labelGroup, descriptionGroup, label, description, isRequired, required, options, cardStyle, type, position, error, message, messageType, name, value, id, CardRadioOptionComponent, ItemMessageComponent, containerProps, ...inputProps }: CardRadioCommonProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, label, description, required, options, cardStyle, position, message, messageType, name, id, CardRadioComponent, ItemMessageComponent, containerProps, ...inputProps }: CardRadioCommonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { CardRadioGroupCommon };

package/dist/prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupCommon.js

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, } from "react";
-import { ItemMessage, } from "../../ItemMessage/ItemMessageCommon";
-import {} from "../CardRadioOption/CardRadioOptionCommon";
-const CardRadioGroupCommon = ({ className, labelGroup, descriptionGroup, label, description, isRequired, required, options, cardStyle, type = "vertical", position = (cardStyle ?? type) === "vertical" ? "column" : "line", error, message, messageType = "error", name, value, id, CardRadioOptionComponent, ItemMessageComponent, containerProps, ...inputProps }) => {
+import {} from "../../ItemMessage/ItemMessage";
+import {} from "../CardRadio/CardRadioCommon";
+const CardRadioGroupCommon = ({ className, label, description, required, options, cardStyle, position = cardStyle === "vertical" ? "column" : "line", message, messageType = "error", name, id, CardRadioComponent, ItemMessageComponent, containerProps, ...inputProps }) => {
     const generatedId = useId();
     const cardRadioGroupId = id ?? generatedId;
     const messageId = `${cardRadioGroupId}-error`;
-    const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
-    return (_jsxs("fieldset", { className: ["af-card-radio-group", className].filter(Boolean).join(" "), role: "radiogroup", "aria-required": Boolean(required) || undefined, "aria-invalid": hasError || undefined, "aria-errormessage": hasError ? messageId : undefined, id: cardRadioGroupId, ...containerProps, children: [_jsxs("legend", { className: "af-card-radio-group__legend", children: [_jsxs("p", { className: "af-card-radio-group__label", children: [label, labelGroup, required || isRequired ? _jsx("span", { "aria-hidden": true, children: "*" }) : null] }), description || descriptionGroup ? (_jsxs("p", { className: "af-card-radio-group__description", children: [description, descriptionGroup] })) : null] }), _jsx("div", { className: [
+    const hasError = Boolean(message) && messageType === "error";
+    return (_jsxs("fieldset", { className: ["af-card-radio-group", className].filter(Boolean).join(" "), role: "radiogroup", "aria-required": Boolean(required) || undefined, "aria-invalid": hasError || undefined, "aria-errormessage": hasError ? messageId : undefined, id: cardRadioGroupId, ...containerProps, children: [_jsxs("legend", { className: "af-card-radio-group__legend", children: [_jsxs("p", { className: "af-card-radio-group__label", children: [label, required ? _jsx("span", { "aria-hidden": true, children: "*" }) : null] }), description ? (_jsx("p", { className: "af-card-radio-group__description", children: description })) : null] }), _jsx("div", { className: [
                     "af-card-radio-group__options",
                     `af-card-radio-group__options--${position}`,
-                ].join(" "), children: options.map((cardRadioItemProps) => (_jsx(CardRadioOptionComponent, { id: `${cardRadioGroupId}-${cardRadioItemProps.value}`, checked: value !== undefined
-                        ? value === cardRadioItemProps.value
-                        : undefined, required: required, position: cardStyle ?? type, ...inputProps, ...cardRadioItemProps, isInvalid: hasError, name: name }, `${name ?? cardRadioGroupId}-${cardRadioItemProps.label}`))) }), _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
+                ].join(" "), children: options.map((cardRadioItemProps) => (_jsx(CardRadioComponent, { id: `${cardRadioGroupId}-${cardRadioItemProps.value}`, required: required, position: cardStyle, ...inputProps, ...cardRadioItemProps, variant: hasError ? "error" : undefined, name: name }, `${name ?? cardRadioGroupId}-${cardRadioItemProps.label}`))) }), _jsx(ItemMessageComponent, { id: messageId, message: message, messageType: messageType })] }));
 };
 CardRadioGroupCommon.displayName = "CardRadioGroupCommon";
 export { CardRadioGroupCommon };

package/dist/prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupLF.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
-import { CardRadioOption } from "../CardRadioOption/CardRadioOptionLF";
+import { ItemMessage } from "../../ItemMessage/ItemMessage";
+import { CardRadio } from "../CardRadio/CardRadioLF";
 import { CardRadioGroupCommon, } from "./CardRadioGroupCommon";
 import "@axa-fr/canopee-css/client/Form/Radio/CardRadioGroup/CardRadioGroupLF.css";
-export const CardRadioGroup = (props) => (_jsx(CardRadioGroupCommon, { ...props, CardRadioOptionComponent: CardRadioOption, ItemMessageComponent: ItemMessage }));
+export const CardRadioGroup = (props) => (_jsx(CardRadioGroupCommon, { ...props, CardRadioComponent: CardRadio, ItemMessageComponent: ItemMessage }));

package/dist/prospect-client/Form/Radio/Radio/RadioCommon.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps } from "react";
 export type RadioProps = Omit<ComponentProps<"input">, "disabled" | "type"> & {
-    isInvalid?: boolean;
+    variant?: "error" | "warning";
 };
-export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Radio: ({ variant, className, ref, ...inputProps }: RadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/Radio/Radio/RadioCommon.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-export const Radio = forwardRef(({ className, isInvalid, ...props }, ref) => (_jsx("input", { ...props, className: ["af-radio", isInvalid && "af-radio--invalid", className]
-        .filter(Boolean)
-        .join(" "), type: "radio", ref: ref })));
-Radio.displayName = "Radio";
+import {} from "react";
+import { getClassName } from "../../../utilities/getClassName";
+export const Radio = ({ variant, className, ref, ...inputProps }) => (_jsx("input", { ...inputProps, className: getClassName({
+        baseClassName: "af-radio",
+        modifiers: [variant],
+        className,
+    }), ref: ref, type: "radio" }));

package/dist/prospect-client/Form/TextArea/TextAreaApollo.d.ts

@@ -1,3 +1,6 @@
 import "@axa-fr/canopee-css/prospect/Form/TextArea/TextAreaApollo.css";
 import { type TextAreaProps } from "./TextAreaCommon";
-export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const TextArea: {
+    ({ ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Form/TextArea/TextAreaApollo.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/prospect/Form/TextArea/TextAreaApollo.css";
-import { forwardRef } from "react";
 import { ItemLabel } from "../ItemLabel/ItemLabelApollo";
-import { ItemMessage } from "../ItemMessage/ItemMessageApollo";
+import { ItemMessage } from "../ItemMessage/ItemMessage";
 import { TextAreaCommon } from "./TextAreaCommon";
-export const TextArea = forwardRef((props, ref) => (_jsx(TextAreaCommon, { ...props, ref: ref, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage })));
+export const TextArea = ({ ...props }) => (_jsx(TextAreaCommon, { ...props, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage }));
 TextArea.displayName = "TextArea";

package/dist/prospect-client/Form/TextArea/TextAreaCommon.d.ts

@@ -1,19 +1,18 @@
 import { type ComponentProps, type ComponentPropsWithRef, type ComponentType } from "react";
 import type { GridContainerProps } from "../../utilities/types/GridContainerProps";
 import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelCommon";
-import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCommon";
+import { type ItemMessageProps } from "../ItemMessage/ItemMessage";
 export type TextAreaProps = ComponentPropsWithRef<"textarea"> & {
     label?: ItemLabelProps["children"];
     helper?: string;
-    /**
-     * @deprecated Use `message` and messageType instead.
-     */
-    error?: string;
     containerProps?: GridContainerProps;
-} & Pick<ItemLabelProps, "description" | "moreButtonLabel" | "buttonLabel" | "onMoreButtonClick" | "onButtonClick" | "sideButtonLabel" | "onSideButtonClick"> & Pick<ItemMessageProps, "message" | "messageType">;
+} & Pick<ItemLabelProps, "description" | "moreButtonLabel" | "onMoreButtonClick" | "sideButtonLabel" | "onSideButtonClick"> & Pick<ItemMessageProps, "message" | "messageType">;
 type TextAreaCommonProps = TextAreaProps & {
     ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
-    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
+    ItemMessageComponent: ComponentType<ItemMessageProps>;
+};
+declare const TextAreaCommon: {
+    ({ id, className, label, description, helper, message, messageType, moreButtonLabel, onMoreButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder, containerProps, ...inputProps }: TextAreaCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
-declare const TextAreaCommon: import("react").ForwardRefExoticComponent<Omit<TextAreaCommonProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 export { TextAreaCommon };

package/dist/prospect-client/Form/TextArea/TextAreaCommon.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, } from "react";
+import { useId, } from "react";
 import { getClassName } from "../../utilities/getClassName";
 import { ItemLabelCommon, } from "../ItemLabel/ItemLabelCommon";
-import { ItemMessage, } from "../ItemMessage/ItemMessageCommon";
-const TextAreaCommon = forwardRef(({ id, className, label, description, helper, error, message, messageType, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder = " ", containerProps, ...inputProps }, inputRef) => {
+import {} from "../ItemMessage/ItemMessage";
+const TextAreaCommon = ({ id, className, label, description, helper, message, messageType = "error", moreButtonLabel, onMoreButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder = " ", containerProps, ...inputProps }) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
     const messageId = `${inputId}-error`;
-    const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
+    const hasError = Boolean(message) && messageType === "error";
     const hasWarning = Boolean(message) && messageType === "warning" && !hasError;
     const textareaClassName = getClassName({
         baseClassName: "af-form__textarea",
@@ -16,7 +16,7 @@ const TextAreaCommon = forwardRef(({ id, className, label, description, helper,
     });
     return (_jsxs("div", { className: ["af-form__input-container", className]
             .filter(Boolean)
-            .join(" "), ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx("textarea", { id: inputId, className: textareaClassName, ref: inputRef, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": helper ? helperId : undefined, required: required, "aria-invalid": hasError || undefined, placeholder: placeholder, ...inputProps }), helper ? (_jsx("span", { id: helperId, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
-});
+            .join(" "), ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel, onMoreButtonClick: onMoreButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx("textarea", { id: inputId, className: textareaClassName, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": helper ? helperId : undefined, required: required, "aria-invalid": hasError || undefined, placeholder: placeholder, ...inputProps }), helper ? (_jsx("span", { id: helperId, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message, messageType: messageType })] }));
+};
 TextAreaCommon.displayName = "TextArea";
 export { TextAreaCommon };

package/dist/prospect-client/Form/TextArea/TextAreaLF.d.ts

@@ -1,3 +1,6 @@
 import "@axa-fr/canopee-css/client/Form/TextArea/TextAreaLF.css";
 import { type TextAreaProps } from "./TextAreaCommon";
-export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const TextArea: {
+    ({ ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Form/TextArea/TextAreaLF.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/client/Form/TextArea/TextAreaLF.css";
-import { forwardRef } from "react";
 import { ItemLabel } from "../ItemLabel/ItemLabelLF";
-import { ItemMessage } from "../ItemMessage/ItemMessageLF";
+import { ItemMessage } from "../ItemMessage/ItemMessage";
 import { TextAreaCommon } from "./TextAreaCommon";
-export const TextArea = forwardRef((props, ref) => (_jsx(TextAreaCommon, { ...props, ref: ref, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage })));
+export const TextArea = ({ ...props }) => (_jsx(TextAreaCommon, { ...props, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage }));
 TextArea.displayName = "TextArea";

package/dist/prospect-client/Header/HeaderApollo.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/canopee-css/prospect/Header/HeaderApollo.css";
+import { type HeaderProps } from "./HeaderCommon";
+export declare const Header: (props: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type { HeaderProps };

package/dist/prospect-client/Header/HeaderApollo.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/Header/HeaderApollo.css";
+import { AppName } from "../AppName/AppName";
+import { Heading } from "../Heading/HeadingApollo";
+import { MenuBurger } from "../MenuBurger/MenuBurgerApollo";
+import { ClickIcon } from "../ClickIcon/ClickIconApollo";
+import { HeaderCommon } from "./HeaderCommon";
+export const Header = (props) => (_jsx(HeaderCommon, { AppNameComponent: AppName, HeadingComponent: Heading, MenuBurgerComponent: MenuBurger, ClickIconComponent: ClickIcon, ...props }));

package/dist/prospect-client/Header/HeaderCommon.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithoutRef, type ComponentType, type ReactNode } from "react";
+import { type ClickIconProps } from "../ClickIcon/ClickIconCommon";
+import { type AppNameProps } from "../AppName/AppName";
+import { type HeadingProps } from "../Heading/types";
+import { type MenuBurgerProps } from "../MenuBurger/MenuBurgerCommon";
+import { type TabMenuProps } from "../TabMenu/TabMenu";
+export type HeaderProps = Omit<ComponentPropsWithoutRef<"header">, "title"> & {
+    appNameProps: AppNameProps;
+    menuBurgerProps?: MenuBurgerProps;
+    tabMenuProps?: TabMenuProps;
+    clickIconProps?: ClickIconProps;
+    title?: string;
+    actionChildren?: ReactNode;
+};
+type HeaderCommonProps = HeaderProps & {
+    AppNameComponent: ComponentType<AppNameProps>;
+    HeadingComponent: ComponentType<HeadingProps>;
+    MenuBurgerComponent: ComponentType<MenuBurgerProps>;
+    ClickIconComponent: ComponentType<ClickIconProps>;
+};
+export declare const HeaderCommon: ({ appNameProps, menuBurgerProps, tabMenuProps, clickIconProps, title, className, AppNameComponent, HeadingComponent, MenuBurgerComponent, ClickIconComponent, actionChildren, ...props }: HeaderCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/Header/HeaderCommon.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import menu from "@material-symbols/svg-400/outlined/menu.svg";
+import { BREAKPOINT } from "../utilities/constants";
+import {} from "../ClickIcon/ClickIconCommon";
+import { TabMenu } from "../TabMenu/TabMenu";
+import {} from "../AppName/AppName";
+import {} from "../Heading/types";
+import {} from "../MenuBurger/MenuBurgerCommon";
+import {} from "../TabMenu/TabMenu";
+import { getClassName } from "../utilities/getClassName";
+import { useIsSmallScreen } from "../utilities/hook/useIsSmallScreen";
+const withElementClass = (props, baseClassName) => ({
+    ...props,
+    className: getClassName({
+        baseClassName,
+        className: props.className,
+    }),
+});
+export const HeaderCommon = ({ appNameProps, menuBurgerProps, tabMenuProps, clickIconProps, title, className, AppNameComponent, HeadingComponent, MenuBurgerComponent, ClickIconComponent, actionChildren, ...props }) => {
+    const isSmallScreen = useIsSmallScreen(BREAKPOINT.MD);
+    const parsedAppNameProps = withElementClass(appNameProps, "af-header__app-name");
+    const parsedMenuBurgerProps = menuBurgerProps
+        ? withElementClass(menuBurgerProps, "af-header__menu-burger")
+        : undefined;
+    const parsedTabMenuProps = tabMenuProps
+        ? withElementClass(tabMenuProps, "af-header__tab-menu")
+        : undefined;
+    return (_jsxs("header", { className: getClassName({
+            baseClassName: "af-header",
+            className,
+        }), ...props, children: [_jsx(AppNameComponent, { ...parsedAppNameProps }), Boolean(parsedMenuBurgerProps) ||
+                Boolean(parsedTabMenuProps) ||
+                Boolean(actionChildren) ? (_jsx(ClickIconComponent, { ...clickIconProps, src: menu, size: "S", variant: "ghost", className: "af-header__menu-icon", "aria-haspopup": isSmallScreen ? "menu" : undefined, "aria-label": clickIconProps?.["aria-label"] ?? "Ouvrir le menu", popoverTarget: isSmallScreen ? "af-header-menu" : undefined, popoverTargetAction: isSmallScreen ? "toggle" : undefined })) : null, _jsxs("div", { id: "af-header-menu", popover: isSmallScreen ? "auto" : undefined, className: "af-header__menu", children: [parsedTabMenuProps ? _jsx(TabMenu, { ...parsedTabMenuProps }) : null, (title && !isSmallScreen) ||
+                        actionChildren ||
+                        parsedMenuBurgerProps ? (_jsxs("div", { className: "af-header__actions", children: [title ? (_jsx(HeadingComponent, { level: 1, className: "af-header__title", children: title })) : null, actionChildren ? (_jsx("div", { className: "af-header__actions-children", children: actionChildren })) : null, parsedMenuBurgerProps ? (_jsx(MenuBurgerComponent, { ...parsedMenuBurgerProps })) : null] })) : null] })] }));
+};

package/dist/prospect-client/Header/HeaderLF.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/canopee-css/client/Header/HeaderLF.css";
+import { type HeaderProps } from "./HeaderCommon";
+export declare const Header: (props: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type { HeaderProps };

package/dist/prospect-client/Header/HeaderLF.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/Header/HeaderLF.css";
+import { AppName } from "../AppName/AppName";
+import { Heading } from "../Heading/HeadingLF";
+import { MenuBurger } from "../MenuBurger/MenuBurgerLF";
+import { ClickIcon } from "../ClickIcon/ClickIconLF";
+import { HeaderCommon } from "./HeaderCommon";
+export const Header = (props) => (_jsx(HeaderCommon, { AppNameComponent: AppName, HeadingComponent: Heading, MenuBurgerComponent: MenuBurger, ClickIconComponent: ClickIcon, ...props }));

package/dist/prospect-client/Icon/IconCommon.d.ts

@@ -21,4 +21,4 @@ export type IconProps = ComponentProps<typeof Svg> & {
     size?: IconSizeVariants;
     hasBackground?: boolean;
 };
-export declare const Icon: ({ variant, size, hasBackground, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ variant, size, hasBackground, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Icon/IconCommon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Svg } from "../Svg/Svg";
-import { getComponentClassName } from "../utilities/getComponentClassName";
+import { getClassName } from "../utilities/getClassName";
 export const iconVariants = {
     primary: "primary",
     secondary: "secondary",
@@ -16,16 +16,15 @@ export const iconSizeVariants = {
     S: "small",
     XS: "extra-small",
 };
-export const Icon = ({ variant = "primary", size = "S", hasBackground = false, ...props }) => {
-    const componentClassName = useMemo(() => {
-        const newClassModifier = [
+export const Icon = ({ variant = "primary", size = "S", hasBackground = false, className, ...props }) => {
+    const componentClassName = useMemo(() => getClassName({
+        baseClassName: "af-icon",
+        className,
+        modifiers: [
             variant,
             iconSizeVariants[size],
             hasBackground && "has-background",
-        ]
-            .filter(Boolean)
-            .join(" ");
-        return getComponentClassName("af-icon", "", newClassModifier);
-    }, [variant, hasBackground, size]);
+        ].filter(Boolean),
+    }), [className, variant, size, hasBackground]);
     return (_jsx("div", { className: componentClassName, children: _jsx(Svg, { ...props }) }));
 };

package/dist/prospect-client/ItemMenu/ItemMenuApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/ItemMenu/ItemMenuApollo.css";
+export { ItemMenu, type ItemMenuProps } from "./ItemMenuCommon";

package/dist/prospect-client/ItemMenu/ItemMenuApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/ItemMenu/ItemMenuApollo.css";
+export { ItemMenu } from "./ItemMenuCommon";

package/dist/prospect-client/ItemMenu/ItemMenuCommon.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithRef, type PropsWithChildren } from "react";
+/**
+ * Props for the ItemMenu component.
+ */
+export type ItemMenuProps = {
+    /**
+     * Applies the active modifier class.
+     * @default false
+     */
+    isActive?: boolean;
+} & ComponentPropsWithRef<"a">;
+/**
+ * Renders a navigational item as an anchor element.
+ *
+ * @component
+ * @param {PropsWithChildren<ItemMenuProps>} props - ItemMenu props.
+ * @param {boolean} [props.isActive=false] - Adds active styling.
+ * @param {React.ReactNode} props.children - Item label/content.
+ * @param {React.Ref<HTMLAnchorElement>} props.ref - Optional ref to the anchor element.
+ * @returns {JSX.Element} The rendered ItemMenu component.
+ */
+export declare const ItemMenu: ({ isActive, children, className, ...props }: PropsWithChildren<ItemMenuProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/ItemMenu/ItemMenuCommon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import { getClassName } from "../utilities/getClassName";
+/**
+ * Renders a navigational item as an anchor element.
+ *
+ * @component
+ * @param {PropsWithChildren<ItemMenuProps>} props - ItemMenu props.
+ * @param {boolean} [props.isActive=false] - Adds active styling.
+ * @param {React.ReactNode} props.children - Item label/content.
+ * @param {React.Ref<HTMLAnchorElement>} props.ref - Optional ref to the anchor element.
+ * @returns {JSX.Element} The rendered ItemMenu component.
+ */
+export const ItemMenu = ({ isActive = false, children, className, ...props }) => (_jsx("a", { className: getClassName({
+        baseClassName: "af-item-menu",
+        modifiers: [isActive && "active"],
+        className,
+    }), ...props, children: children }));

package/dist/prospect-client/ItemMenu/ItemMenuLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/ItemMenu/ItemMenuLF.css";
+export { ItemMenu, type ItemMenuProps } from "./ItemMenuCommon";

package/dist/prospect-client/ItemMenu/ItemMenuLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/ItemMenu/ItemMenuLF.css";
+export { ItemMenu } from "./ItemMenuCommon";

package/dist/prospect-client/ItemTabBar/ItemTabBarCommon.d.ts

@@ -3,4 +3,7 @@ export type ItemTabBarProps = ComponentPropsWithRef<"button"> & {
     isActive?: boolean;
     title: string;
 };
-export declare const ItemTabBar: import("react").ForwardRefExoticComponent<Omit<ItemTabBarProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ItemTabBar: {
+    ({ isActive, title, className, ...props }: ItemTabBarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/ItemTabBar/ItemTabBarCommon.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { getComponentClassName } from "../utilities/getComponentClassName";
-export const ItemTabBar = forwardRef(({ isActive = false, title, className, ...props }, ref) => {
-    const classNames = getComponentClassName("af-item-tab-bar", className);
-    return (_jsx("button", { ref: ref, type: "button", role: "tab", "aria-selected": isActive, className: classNames, ...props, children: title }));
-});
+import {} from "react";
+import { getClassName } from "../utilities/getClassName";
+export const ItemTabBar = ({ isActive = false, title, className, ...props }) => {
+    const classNames = getClassName({
+        baseClassName: "af-item-tab-bar",
+        className,
+    });
+    return (_jsx("button", { type: "button", role: "tab", "aria-selected": isActive, className: classNames, ...props, children: title }));
+};
 ItemTabBar.displayName = "ItemTabBar";

package/dist/prospect-client/Layout/ExitLayout/ExitLayoutApollo.d.ts

@@ -1,5 +1,17 @@
 import { type ExitLayoutProps } from "./ExitLayoutCommon";
 export { type ExitLayoutWithSubComponents, type ExitLayoutProps, } from "./ExitLayoutCommon";
+export { ExitLayoutSkeleton, type ExitLayoutSkeletonProps, } from "./ExitLayoutSkeleton";
+/**
+ * Apollo-themed `ExitLayout` component with `Agent`, `Action`, and `Content`
+ * static slots.
+ *
+ * @component
+ * @param {ExitLayoutProps} props - ExitLayout props.
+ * @param {HeadingProps} [props.headingProps] - Props forwarded to the heading displayed in the content column.
+ * @param {Pick<IconProps, "variant" | "src" | "hasBackground">} [props.iconProps] - Props forwarded to the icon displayed in the content column.
+ * @param {React.ReactNode} [props.children] - Slots composed with `ExitLayout.Content`, `ExitLayout.Agent`, and `ExitLayout.Action`.
+ * @returns {JSX.Element} The rendered Apollo-themed ExitLayout.
+ */
 export declare const ExitLayout: {
     (props: ExitLayoutProps): import("react/jsx-runtime").JSX.Element;
     Agent: ({ children }: import("react").PropsWithChildren) => (string | number | bigint | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | {