@axa-fr/canopee-react 2.0.0-alpha.7 → 2.0.0-alpha.70

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

@@ -8,10 +8,6 @@ type BaseCardRadioProps = Omit<ComponentProps<typeof Radio>, "size"> & {
     subtitle?: ReactNode;
 };
 export type CardRadioProps = BaseCardRadioProps & {
-    /**
-     * @deprecated Use `position` instead.
-     */
-    type?: "vertical" | "horizontal";
     position?: "vertical" | "horizontal";
     icon?: ComponentProps<typeof IconCommon>["src"];
     src?: ComponentProps<typeof BasePicture>["src"];
@@ -22,7 +18,7 @@ export type CardRadioCommonProps = CardRadioProps & {
     IconComponent: ComponentType<ComponentProps<typeof IconCommon>>;
 };
 export declare const CardRadioCommon: {
-    ({ label, position, type, description, subtitle, icon, src, basePictureProps, isInvalid, className, RadioComponent, IconComponent, ...inputProps }: CardRadioCommonProps): import("react/jsx-runtime").JSX.Element;
+    ({ 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

@@ -2,15 +2,15 @@ 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, type, description, subtitle, icon, src, basePictureProps, isInvalid, className, RadioComponent, IconComponent, ...inputProps }) => {
-    const isCardRadioHorizontal = [position, type].includes("horizontal");
+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: [
-                isInvalid && "invalid",
+                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, isInvalid: isInvalid })] }));
+        }), 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/CardRadioGroup/CardRadioGroupCommon.d.ts

@@ -2,37 +2,13 @@ import { type ComponentProps, type ComponentType, type PropsWithChildren, type R
 import type { GridContainerProps } from "../../../utilities/types/GridContainerProps";
 import { ItemMessage, type ItemMessageProps } from "../../ItemMessage/ItemMessageCommon";
 import { type CardRadioProps } from "../CardRadio/CardRadioCommon";
-type RadioOption = Omit<CardRadioProps, "name" | "type" | "isInvalid">;
-export type CardRadioGroupProps = Omit<CardRadioProps, "value" | "label" | "type" | "isInvalid" | "icon" | "src" | "basePictureProps" | "description" | "subtitle" | "children" | "position"> & {
-    /**
-     * @deprecated Use `position` and `cardStyle` instead.
-     */
-    type?: "vertical" | "horizontal";
+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 & {
@@ -40,7 +16,7 @@ export type CardRadioCommonProps = CardRadioGroupProps & {
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
 };
 declare const CardRadioGroupCommon: {
-    ({ className, labelGroup, descriptionGroup, label, description, isRequired, required, options, cardStyle, type, position, error, message, messageType, name, value, id, CardRadioComponent, 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

@@ -2,17 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, } from "react";
 import { ItemMessage, } from "../../ItemMessage/ItemMessageCommon";
 import {} from "../CardRadio/CardRadioCommon";
-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, CardRadioComponent, ItemMessageComponent, containerProps, ...inputProps }) => {
+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(CardRadioComponent, { 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/Radio/RadioCommon.d.ts

@@ -1,8 +1,5 @@
 import { type ComponentProps } from "react";
 export type RadioProps = Omit<ComponentProps<"input">, "disabled" | "type"> & {
-    isInvalid?: boolean;
-};
-export declare const Radio: {
-    ({ className, isInvalid, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+    variant?: "error" | "warning";
 };
+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 {} from "react";
-export const Radio = ({ className, isInvalid, ...props }) => (_jsx("input", { ...props, className: ["af-radio", isInvalid && "af-radio--invalid", className]
-        .filter(Boolean)
-        .join(" "), type: "radio" }));
-Radio.displayName = "Radio";
+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/TextAreaCommon.d.ts

@@ -5,18 +5,14 @@ import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCo
 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>>;
 };
 declare const TextAreaCommon: {
-    ({ id, className, label, description, helper, error, message, messageType, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder, containerProps, ...inputProps }: TextAreaCommonProps): import("react/jsx-runtime").JSX.Element;
+    ({ 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;
 };
 export { TextAreaCommon };

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

@@ -3,12 +3,12 @@ import { useId, } from "react";
 import { getClassName } from "../../utilities/getClassName";
 import { ItemLabelCommon, } from "../ItemLabel/ItemLabelCommon";
 import { ItemMessage, } from "../ItemMessage/ItemMessageCommon";
-const TextAreaCommon = ({ id, className, label, description, helper, error, message, messageType, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder = " ", containerProps, ...inputProps }) => {
+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 = ({ id, className, label, description, helper, error, mess
     });
     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, "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/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/ItemTabBar/ItemTabBarCommon.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import {} from "react";
-import { getComponentClassName } from "../utilities/getComponentClassName";
+import { getClassName } from "../utilities/getClassName";
 export const ItemTabBar = ({ isActive = false, title, className, ...props }) => {
-    const classNames = getComponentClassName("af-item-tab-bar", className);
+    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> | {

package/dist/prospect-client/Layout/ExitLayout/ExitLayoutApollo.js

@@ -3,6 +3,18 @@ import { Heading } from "../../Heading/HeadingApollo";
 import { Icon } from "../../Icon/IconApollo";
 import { Agent, Action, Content, ExitLayoutCommon, } from "./ExitLayoutCommon";
 export {} from "./ExitLayoutCommon";
+export { ExitLayoutSkeleton, } 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 const ExitLayout = (props) => (_jsx(ExitLayoutCommon, { ...props, HeadingComponent: Heading, IconComponent: Icon }));
 ExitLayout.Agent = Agent;
 ExitLayout.Action = Action;

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

@@ -1,5 +1,17 @@
 import { type ExitLayoutProps } from "./ExitLayoutCommon";
 export { type ExitLayoutWithSubComponents, type ExitLayoutProps, } from "./ExitLayoutCommon";
+export { ExitLayoutSkeleton, type ExitLayoutSkeletonProps, } from "./ExitLayoutSkeleton";
+/**
+ * Look and Feel-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 Look and Feel 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> | {

package/dist/prospect-client/Layout/ExitLayout/ExitLayoutLF.js

@@ -3,6 +3,18 @@ import { Heading } from "../../Heading/HeadingLF";
 import { Icon } from "../../Icon/IconLF";
 import { Agent, Action, Content, ExitLayoutCommon, } from "./ExitLayoutCommon";
 export {} from "./ExitLayoutCommon";
+export { ExitLayoutSkeleton, } from "./ExitLayoutSkeleton";
+/**
+ * Look and Feel-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 Look and Feel ExitLayout.
+ */
 export const ExitLayout = (props) => (_jsx(ExitLayoutCommon, { ...props, HeadingComponent: Heading, IconComponent: Icon }));
 ExitLayout.Agent = Agent;
 ExitLayout.Action = Action;

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

@@ -0,0 +1,23 @@
+/**
+ * Props controlling which placeholder areas are displayed in `ExitLayoutSkeleton`.
+ */
+export type ExitLayoutSkeletonProps = {
+    hasAgent?: boolean;
+    hasIcon?: boolean;
+    hasAction?: boolean;
+    hasContent?: boolean;
+    hasHeading?: boolean;
+};
+/**
+ * Renders skeleton placeholders matching the visual structure of `ExitLayout`.
+ *
+ * @component
+ * @param {ExitLayoutSkeletonProps} props - ExitLayoutSkeleton props.
+ * @param {boolean} [props.hasAgent] - Displays the agent placeholder block.
+ * @param {boolean} [props.hasIcon] - Displays the icon placeholder.
+ * @param {boolean} [props.hasAction] - Displays the action area placeholder.
+ * @param {boolean} [props.hasContent] - Displays the main content placeholder.
+ * @param {boolean} [props.hasHeading] - Displays the heading placeholder.
+ * @returns {JSX.Element} The rendered ExitLayoutSkeleton component.
+ */
+export declare const ExitLayoutSkeleton: ({ hasAgent, hasIcon, hasAction, hasContent, hasHeading, }: ExitLayoutSkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Layout/ExitLayout/ExitLayoutSkeleton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "../../Skeleton/Skeleton";
+/**
+ * Renders skeleton placeholders matching the visual structure of `ExitLayout`.
+ *
+ * @component
+ * @param {ExitLayoutSkeletonProps} props - ExitLayoutSkeleton props.
+ * @param {boolean} [props.hasAgent] - Displays the agent placeholder block.
+ * @param {boolean} [props.hasIcon] - Displays the icon placeholder.
+ * @param {boolean} [props.hasAction] - Displays the action area placeholder.
+ * @param {boolean} [props.hasContent] - Displays the main content placeholder.
+ * @param {boolean} [props.hasHeading] - Displays the heading placeholder.
+ * @returns {JSX.Element} The rendered ExitLayoutSkeleton component.
+ */
+export const ExitLayoutSkeleton = ({ hasAgent, hasIcon, hasAction, hasContent, hasHeading, }) => {
+    return (_jsxs("section", { className: "af-exit-page subgrid", children: [_jsxs("article", { className: "af-exit-page__content subgrid", children: [hasIcon ? _jsx(Skeleton, { variant: "circle", size: "L" }) : null, hasHeading ? _jsx(Skeleton, { colSize: 12 }) : null, hasContent ? _jsx(Skeleton, { size: "XL", colSize: 12 }) : null] }), hasAgent ? (_jsx(Skeleton, { className: "af-exit-page__agent", size: "XXL", colSize: 12 })) : null, hasAction ? (_jsx("div", { className: "af-exit-page__actions subgrid", children: _jsx(Skeleton, { variant: "action", colSize: 12 }) })) : null] }));
+};

package/dist/prospect-client/Link/LinkCommon.d.ts

@@ -9,9 +9,5 @@ export type LinkProps = {
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     className?: string;
-    /**
-     * @deprecated Use variant instead
-     */
-    classModifier?: string;
 } & ComponentPropsWithoutRef<"a">;
-export declare const Link: ({ href, variant, openInNewTab, leftIcon, rightIcon, children, className, classModifier, ...props }: PropsWithChildren<LinkProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Link: ({ href, variant, openInNewTab, leftIcon, rightIcon, children, className, ...props }: PropsWithChildren<LinkProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Link/LinkCommon.js

@@ -5,14 +5,14 @@ import { getClassName } from "../utilities/getClassName";
 export const linkVariants = {
     inverse: "inverse",
 };
-export const Link = ({ href, variant, openInNewTab = false, leftIcon, rightIcon, children, className, classModifier = "", ...props }) => {
+export const Link = ({ href, variant, openInNewTab = false, leftIcon, rightIcon, children, className, ...props }) => {
     const newTabProps = openInNewTab && {
         target: "_blank",
         rel: "noopener noreferrer",
     };
     return (_jsxs("a", { className: getClassName({
             baseClassName: "af-link",
-            modifiers: [classModifier, variant, openInNewTab && "openInNewTab"],
+            modifiers: [variant, openInNewTab && "openInNewTab"],
             className,
         }), href: href, ...newTabProps, ...props, children: [leftIcon, children, openInNewTab || Boolean(rightIcon)
                 ? (rightIcon ?? _jsx(Svg, { src: openInNew }))

package/dist/prospect-client/List/ClickItem/ClickItemCommon.d.ts

@@ -1,4 +1,5 @@
 import type { ClickItemPropsCommon } from "./types";
+export type { ClickItemProps } from "./types";
 export declare const clickItemVariants: {
     readonly small: "small";
     readonly medium: "medium";

package/dist/prospect-client/List/ContentItemDuo/ContentItemDuoCommon.d.ts

@@ -13,14 +13,10 @@ export type ContentItemDuoProps = {
     value: ReactNode;
     buttonText?: string;
     onButtonClick?: () => void;
-    /** @deprecated Use `position` instead */
-    isVertical?: boolean;
-    /** @deprecated Use `size` or `className` instead */
-    classModifier?: string;
 } & Pick<ItemMessageProps, "message" | "messageType"> & ContentItemDuoPositions & ComponentProps<"div">;
 type ContentItemDuoCommonProps = ContentItemDuoProps & {
     ButtonComponent: ComponentType<ButtonProps>;
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
 };
-export declare const ContentItemDuoCommon: ({ label, value, position, size, className, classModifier, isVertical, buttonText, onButtonClick, ButtonComponent, message, messageType, ItemMessageComponent, ...containerProps }: ContentItemDuoCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentItemDuoCommon: ({ label, value, position, size, className, buttonText, onButtonClick, ButtonComponent, message, messageType, ItemMessageComponent, ...containerProps }: ContentItemDuoCommonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/prospect-client/List/ContentItemDuo/ContentItemDuoCommon.js

@@ -1,16 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import {} from "react";
-import { getClassName } from "../../utilities/getClassName";
 import { ItemMessage, } from "../../Form/ItemMessage/ItemMessageCommon";
-export const ContentItemDuoCommon = ({ label, value, position = "horizontal", size = "large", className, classModifier, isVertical, buttonText, onButtonClick, ButtonComponent, message, messageType, ItemMessageComponent, ...containerProps }) => {
+import { getClassName } from "../../utilities/getClassName";
+export const ContentItemDuoCommon = ({ label, value, position = "horizontal", size = "large", className, buttonText, onButtonClick, ButtonComponent, message, messageType, ItemMessageComponent, ...containerProps }) => {
     const componentClassName = getClassName({
         baseClassName: "af-content-item-duo",
         className,
-        modifiers: [
-            isVertical ? "vertical" : position,
-            size === "small" && size,
-            classModifier,
-        ],
+        modifiers: [position, size === "small" && size],
     });
     return (_jsxs("div", { className: componentClassName, ...containerProps, children: [_jsx("dt", { className: "af-content-item-duo__label", children: label }), _jsxs("dd", { className: "af-content-item-duo__value", children: [value, message ? (_jsx(ItemMessageComponent, { message: message, messageType: messageType })) : null] }), buttonText && onButtonClick ? (_jsx(ButtonComponent, { className: "af-content-item-duo__button", variant: "ghost", onClick: onButtonClick, children: buttonText })) : null] }));
 };

package/dist/prospect-client/List/List/ListCommon.d.ts

@@ -1,8 +1,33 @@
 import { type ComponentProps, type ComponentType } from "react";
-import { CardCommon as Card, type CardCommonProps } from "../../Card/CardCommon";
-export type ListProps = CardCommonProps<"ul" | "ol">;
+import { CardCommon as Card, type CardCommonProps, type CardVariants } from "../../Card/CardCommon";
+/**
+ * Props for the List component.
+ * Extends `CardCommonProps` (without `variant` override) to allow the list
+ * to be rendered as a `ul` or `ol` with optional card styling.
+ */
+export type ListProps = Omit<CardCommonProps<"ul" | "ol">, "variant"> & {
+    /**
+     * Visual variant inherited from Card.
+     * - `"default"` — bordered list with padding.
+     * - `"unstyled"` — removes border and padding.
+     * @default "default"
+     */
+    variant?: CardVariants;
+};
 type ListPropsCommon = ListProps & {
     CardComponent: ComponentType<ComponentProps<typeof Card>>;
 };
+/**
+ * Renders an accessible list (`ul` or `ol`) wrapped in a Card.
+ * Each direct child is automatically wrapped in a `<li>` element.
+ *
+ * @component
+ * @param {ListPropsCommon} props - List props.
+ * @param {ReactNode} props.children - Items to render inside the list. Each child is wrapped in a `<li>`.
+ * @param {"ul" | "ol"} [props.as="ul"] - HTML list element to render.
+ * @param {CardVariants} [props.variant="default"] - Visual variant of the surrounding Card.
+ * @param {ComponentType} props.CardComponent - Injected Card component (theme-specific).
+ * @returns {JSX.Element} The rendered List component.
+ */
 export declare const ListCommon: ({ children, CardComponent, as, ...listProps }: ListPropsCommon) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/prospect-client/List/List/ListCommon.js

@@ -2,4 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Children } from "react";
 import { CardCommon as Card, } from "../../Card/CardCommon";
 import { generateId } from "../../utilities/generateId";
+/**
+ * Renders an accessible list (`ul` or `ol`) wrapped in a Card.
+ * Each direct child is automatically wrapped in a `<li>` element.
+ *
+ * @component
+ * @param {ListPropsCommon} props - List props.
+ * @param {ReactNode} props.children - Items to render inside the list. Each child is wrapped in a `<li>`.
+ * @param {"ul" | "ol"} [props.as="ul"] - HTML list element to render.
+ * @param {CardVariants} [props.variant="default"] - Visual variant of the surrounding Card.
+ * @param {ComponentType} props.CardComponent - Injected Card component (theme-specific).
+ * @returns {JSX.Element} The rendered List component.
+ */
 export const ListCommon = ({ children, CardComponent, as = "ul", ...listProps }) => (_jsx(CardComponent, { as: as, ...listProps, children: Children.toArray(children).map((child) => (_jsx("li", { children: child }, generateId(child)))) }));

package/dist/prospect-client/MenuBurger/MenuBurgerApollo.d.ts

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