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

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/ContentItemDuoApollo.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/prospect/List/ContentItemDuo/ContentItemDuoApollo.css";
 import { Button } from "../../Button/ButtonApollo";
 import { ContentItemDuoCommon, } from "./ContentItemDuoCommon";
-import { ItemMessage } from "../../Form/ItemMessage/ItemMessageApollo";
+import { ItemMessage } from "../../Form/ItemMessage/ItemMessage";
 export const ContentItemDuo = (props) => (_jsx(ContentItemDuoCommon, { ...props, ButtonComponent: Button, ItemMessageComponent: ItemMessage }));

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

@@ -1,6 +1,6 @@
 import { type ComponentProps, type ComponentType, type ReactNode } from "react";
 import type { ButtonProps } from "../../Button/ButtonCommon";
-import { ItemMessage, type ItemMessageProps } from "../../Form/ItemMessage/ItemMessageCommon";
+import { type ItemMessageProps } from "../../Form/ItemMessage/ItemMessage";
 type ContentItemDuoPositions = {
     position?: "horizontal";
     size?: "small" | "large";
@@ -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>>;
+    ItemMessageComponent: ComponentType<ItemMessageProps>;
 };
-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 {} from "../../Form/ItemMessage/ItemMessage";
+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/ContentItemDuo/ContentItemDuoLF.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/client/List/ContentItemDuo/ContentItemDuoLF.css";
 import { Button } from "../../Button/ButtonLF";
 import { ContentItemDuoCommon, } from "./ContentItemDuoCommon";
-import { ItemMessage } from "../../Form/ItemMessage/ItemMessageLF";
+import { ItemMessage } from "../../Form/ItemMessage/ItemMessage";
 export const ContentItemDuo = (props) => (_jsx(ContentItemDuoCommon, { ...props, ButtonComponent: Button, ItemMessageComponent: ItemMessage }));

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/Loader/LoaderCommon.d.ts

@@ -10,4 +10,7 @@ export type LoaderProps = {
 export type LoaderCommonProps<T extends ElementType> = PolymorphicComponent<T, LoaderProps> & {
     SpinnerComponent: ComponentType<SpinnerProps>;
 };
-export declare const LoaderCommon: import("react").ForwardRefExoticComponent<Omit<LoaderCommonProps<ElementType>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const LoaderCommon: {
+    ({ title, subtitle, SpinnerComponent, spinnerProps, className, isDialog, ...rest }: LoaderCommonProps<ElementType>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Loader/LoaderCommon.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 {} from "../Spinner/SpinnerCommon";
-export const LoaderCommon = forwardRef(({ title, subtitle, SpinnerComponent, spinnerProps, className, isDialog, ...rest }, ref) => {
+export const LoaderCommon = ({ title, subtitle, SpinnerComponent, spinnerProps, className, isDialog, ...rest }) => {
     const baseClassName = "af-loader";
     const titleId = useId();
     const Component = (isDialog && "dialog") || "article";
-    return (_jsxs(Component, { ref: ref, className: getClassName({
+    return (_jsxs(Component, { className: getClassName({
             baseClassName,
             className,
         }), "aria-labelledby": titleId, ...rest, children: [_jsx(SpinnerComponent, { ...spinnerProps }), _jsxs("div", { className: `${baseClassName}__content`, children: [_jsx("span", { id: titleId, className: `${baseClassName}__title`, children: title }), subtitle ? (_jsx("span", { className: `${baseClassName}__subtitle`, children: subtitle })) : null] })] }));
-});
+};
 LoaderCommon.displayName = "LoaderCommon";

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 };

package/dist/prospect-client/MenuBurger/MenuBurgerApollo.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/MenuBurger/MenuBurgerAll.css";
+import { Button } from "../Button/ButtonApollo";
+import { Icon } from "../Icon/IconApollo";
+import { ClickItem } from "../List/ClickItem/ClickItemApollo";
+import { List } from "../List/List/ListApollo";
+import { MenuBurgerCommon } from "./MenuBurgerCommon";
+export const MenuBurger = (props) => (_jsx(MenuBurgerCommon, { ButtonComponent: Button, ClickItemComponent: ClickItem, IconComponent: Icon, ListComponent: List, ...props }));

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

@@ -0,0 +1,60 @@
+import { type ComponentPropsWithoutRef, type ComponentType, type ReactNode, type PropsWithChildren } from "react";
+import type { ButtonProps } from "../Button/ButtonCommon";
+import type { IconProps } from "../Icon/IconCommon";
+import type { ClickItemProps } from "../List/ClickItem/ClickItemCommon";
+import type { ListProps } from "../List/List/ListCommon";
+export declare const menuBurgerVariants: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+};
+export type MenuBurgerVariants = keyof typeof menuBurgerVariants;
+export type MenuBurgerClickItemProps = Omit<ClickItemProps, "variant"> & {
+    variant?: ClickItemProps["variant"];
+};
+/**
+ * Props for the MenuBurger component.
+ */
+export type MenuBurgerProps = {
+    /**
+     * Label displayed inside the trigger button.
+     */
+    buttonLabel: string;
+    /**
+     * Extra content rendered below the ClickItem list.
+     */
+    children?: ReactNode;
+    /**
+     * Icon displayed on the left side of the trigger button.
+     * @default person
+     */
+    icon?: IconProps["src"];
+    /**
+     * Visual variant of the trigger button.
+     * @default primary
+     */
+    variant?: MenuBurgerVariants;
+    /**
+     * ClickItem list rendered inside the popover panel.
+     */
+    clickItems?: MenuBurgerClickItemProps[];
+} & Omit<ComponentPropsWithoutRef<"div">, "children">;
+type MenuBurgerCommonProps = PropsWithChildren<MenuBurgerProps> & {
+    ButtonComponent: ComponentType<ButtonProps>;
+    ClickItemComponent: ComponentType<ClickItemProps>;
+    IconComponent: ComponentType<IconProps>;
+    ListComponent: ComponentType<ListProps>;
+};
+/**
+ * Renders a burger-style menu button opening a popover panel with navigation and actions.
+ *
+ * @component
+ * @param {PropsWithChildren<MenuBurgerProps>} props - MenuBurger props.
+ * @param {string} props.buttonLabel - Label shown in the trigger button.
+ * @param {IconProps["src"]} [props.icon=person] - Icon shown on the left of the trigger button.
+ * @param {MenuBurgerVariants} [props.variant=primary] - Visual variant of the trigger button.
+ * @param {ClickItemProps[]} [props.clickItems] - Click items displayed under the links.
+ * @param {React.ReactNode} [props.children] - Extra content rendered below the ClickItem list.
+ * @returns {JSX.Element} The rendered MenuBurger component.
+ */
+export declare const MenuBurgerCommon: ({ buttonLabel, icon, variant, clickItems, children, className, ButtonComponent, ClickItemComponent, IconComponent, ListComponent, ...props }: MenuBurgerCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/MenuBurger/MenuBurgerCommon.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import keyboardArrowDown from "@material-symbols/svg-400/outlined/keyboard_arrow_down.svg";
+import person from "@material-symbols/svg-400/outlined/person.svg";
+import { useId, } from "react";
+import { getClassName } from "../utilities/getClassName";
+import { useIsSmallScreen } from "../utilities/hook/useIsSmallScreen";
+import { BREAKPOINT } from "../utilities/constants";
+export const menuBurgerVariants = {
+    primary: "primary",
+    secondary: "secondary",
+};
+/**
+ * Renders a burger-style menu button opening a popover panel with navigation and actions.
+ *
+ * @component
+ * @param {PropsWithChildren<MenuBurgerProps>} props - MenuBurger props.
+ * @param {string} props.buttonLabel - Label shown in the trigger button.
+ * @param {IconProps["src"]} [props.icon=person] - Icon shown on the left of the trigger button.
+ * @param {MenuBurgerVariants} [props.variant=primary] - Visual variant of the trigger button.
+ * @param {ClickItemProps[]} [props.clickItems] - Click items displayed under the links.
+ * @param {React.ReactNode} [props.children] - Extra content rendered below the ClickItem list.
+ * @returns {JSX.Element} The rendered MenuBurger component.
+ */
+export const MenuBurgerCommon = ({ buttonLabel, icon = person, variant = "primary", clickItems, children, className, ButtonComponent, ClickItemComponent, IconComponent, ListComponent, ...props }) => {
+    const isSmallScreen = useIsSmallScreen(BREAKPOINT.MD);
+    const isDesktop = !isSmallScreen;
+    const popoverId = useId();
+    const triggerId = `${popoverId}-trigger`;
+    const iconVariant = variant === "primary" ? "secondary" : "primary";
+    return (_jsxs("div", { className: getClassName({
+            baseClassName: "af-menu-burger",
+            className,
+        }), ...props, children: [isDesktop ? (_jsx(ButtonComponent, { id: triggerId, className: "af-menu-burger__button", variant: variant, iconLeft: _jsx(IconComponent, { src: icon, alt: "", role: "presentation", size: "S", variant: iconVariant }), iconRight: _jsx(IconComponent, { className: "af-menu-burger__button-icon--suffix", src: keyboardArrowDown, alt: "", role: "presentation", size: "S", variant: iconVariant }), popoverTarget: popoverId, popoverTargetAction: "toggle", "aria-haspopup": "true", children: buttonLabel })) : null, _jsxs("section", { id: isDesktop ? popoverId : undefined, popover: isDesktop ? "auto" : undefined, className: "af-menu-burger__panel", "aria-labelledby": isDesktop ? triggerId : undefined, children: [clickItems && clickItems.length > 0 ? (_jsx("div", { className: "af-menu-burger__section af-menu-burger__section--actions", children: _jsx(ListComponent, { className: "af-menu-burger__click-items", variant: "unstyled", children: clickItems.map((clickItem) => (_jsx(ClickItemComponent, { variant: clickItem.variant ?? "small", ...clickItem }, clickItem.title))) }) })) : null, children ? (_jsx("div", { className: "af-menu-burger__section af-menu-burger__content", children: children })) : null] })] }));
+};

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

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

package/dist/prospect-client/MenuBurger/MenuBurgerLF.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/MenuBurger/MenuBurgerAll.css";
+import { Button } from "../Button/ButtonLF";
+import { Icon } from "../Icon/IconLF";
+import { ClickItem } from "../List/ClickItem/ClickItemLF";
+import { List } from "../List/List/ListLF";
+import { MenuBurgerCommon } from "./MenuBurgerCommon";
+export const MenuBurger = (props) => (_jsx(MenuBurgerCommon, { ButtonComponent: Button, ClickItemComponent: ClickItem, IconComponent: Icon, ListComponent: List, ...props }));

package/dist/prospect-client/MessageBar/MessageBarAction.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from "react";
+import type { ButtonProps } from "../Button/ButtonCommon";
+type MessageBarActionProps = {
+    buttonProps?: ButtonProps;
+    ButtonComponent: ComponentType<ButtonProps>;
+};
+export declare const MessageBarAction: ({ buttonProps, ButtonComponent, }: MessageBarActionProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/prospect-client/MessageBar/MessageBarAction.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName } from "../utilities/getClassName";
+export const MessageBarAction = ({ buttonProps, ButtonComponent, }) => {
+    if (!buttonProps) {
+        return null;
+    }
+    return (_jsx(ButtonComponent, { ...buttonProps, className: getClassName({
+            baseClassName: "af-message-bar__action",
+            className: buttonProps.className,
+        }) }));
+};

package/dist/prospect-client/MessageBar/MessageBarApollo.d.ts

@@ -0,0 +1,5 @@
+import "@axa-fr/canopee-css/prospect/MessageBar/MessageBarAll.css";
+import { type MessageBarProps } from "./MessageBarCommon";
+export type { MessageBarProps } from "./MessageBarCommon";
+export type { MessageBarVariant } from "./types";
+export declare const MessageBar: (props: MessageBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/MessageBar/MessageBarApollo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/MessageBar/MessageBarAll.css";
+import { AccordionCore } from "../AccordionCore/AccordionCoreApollo";
+import { Button } from "../Button/ButtonApollo";
+import { Icon } from "../Icon/IconApollo";
+import { MessageBarCommon } from "./MessageBarCommon";
+export const MessageBar = (props) => (_jsx(MessageBarCommon, { ...props, AccordionCoreComponent: AccordionCore, ButtonComponent: Button, IconComponent: Icon }));

package/dist/prospect-client/MessageBar/MessageBarCommon.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentPropsWithoutRef, type ComponentType, type ReactNode } from "react";
+import type { AccordionCoreProps } from "../AccordionCore/AccordionCoreCommon";
+import type { ButtonProps } from "../Button/ButtonCommon";
+import type { IconProps } from "../Icon/IconCommon";
+import type { MessageBarVariant } from "./types";
+export type MessageBarProps = {
+    /** Message title. */
+    title: string;
+    /** Description. Always visible on desktop and collapsible on mobile. */
+    description?: ReactNode;
+    /** Icon displayed before the title. */
+    icon: string;
+    /** Visual variant. */
+    variant?: MessageBarVariant;
+    /** Initial mobile expanded state for the description. */
+    defaultDescriptionOpen?: boolean;
+    /** Action button props. No button is rendered when omitted. */
+    buttonProps?: ButtonProps;
+} & Omit<ComponentPropsWithoutRef<"section">, "children">;
+type MessageBarCommonProps = MessageBarProps & {
+    AccordionCoreComponent: ComponentType<AccordionCoreProps>;
+    ButtonComponent: ComponentType<ButtonProps>;
+    IconComponent: ComponentType<IconProps>;
+};
+export declare const MessageBarCommon: ({ title, description, icon, variant, defaultDescriptionOpen, buttonProps, className, AccordionCoreComponent, ButtonComponent, IconComponent, ...sectionProps }: MessageBarCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/MessageBar/MessageBarCommon.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from "react";
+import { BREAKPOINT } from "../utilities/constants";
+import { getClassName } from "../utilities/getClassName";
+import { useIsSmallScreen } from "../utilities/hook/useIsSmallScreen";
+import { MessageBarAction } from "./MessageBarAction";
+import { MessageBarDescription } from "./MessageBarDescription";
+import { MessageBarSummary } from "./MessageBarSummary";
+const iconVariantByMessageBarVariant = {
+    info: "primary",
+    error: "error",
+};
+export const MessageBarCommon = ({ title, description, icon, variant = "info", defaultDescriptionOpen = false, buttonProps, className, AccordionCoreComponent, ButtonComponent, IconComponent, ...sectionProps }) => {
+    const titleId = useId();
+    const isMobile = useIsSmallScreen(BREAKPOINT.MD);
+    const hasDescription = Boolean(description);
+    const sectionAriaLabelledBy = sectionProps["aria-label"] || sectionProps["aria-labelledby"]
+        ? undefined
+        : titleId;
+    const iconVariant = iconVariantByMessageBarVariant[variant];
+    const componentClassName = getClassName({
+        baseClassName: "af-message-bar",
+        modifiers: [variant],
+        className,
+    });
+    const summary = (_jsx(MessageBarSummary, { title: title, titleId: titleId, icon: icon, iconVariant: iconVariant, IconComponent: IconComponent }));
+    const action = (_jsx(MessageBarAction, { buttonProps: buttonProps, ButtonComponent: ButtonComponent }));
+    const body = _jsx(MessageBarDescription, { description: description });
+    if (hasDescription && isMobile) {
+        return (_jsxs(AccordionCoreComponent, { className: componentClassName, role: "region", "aria-labelledby": sectionAriaLabelledBy, open: defaultDescriptionOpen, summary: summary, summaryProps: { className: "af-message-bar__header" }, arrowClickIconVariant: "ghost", arrowIconVariant: iconVariant, ...sectionProps, children: [body, action] }));
+    }
+    return (_jsxs("section", { className: componentClassName, "aria-labelledby": sectionAriaLabelledBy, ...sectionProps, children: [_jsx("div", { className: "af-message-bar__header", children: summary }), body, action] }));
+};

package/dist/prospect-client/MessageBar/MessageBarDescription.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+type MessageBarDescriptionProps = {
+    description?: ReactNode;
+};
+export declare const MessageBarDescription: ({ description, }: MessageBarDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/prospect-client/MessageBar/MessageBarDescription.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MessageBarDescription = ({ description, }) => {
+    if (!description) {
+        return null;
+    }
+    const Component = typeof description === "string" ? "p" : "div";
+    return _jsx(Component, { className: "af-message-bar__body", children: description });
+};

package/dist/prospect-client/MessageBar/MessageBarLF.d.ts

@@ -0,0 +1,5 @@
+import "@axa-fr/canopee-css/client/MessageBar/MessageBarAll.css";
+import { type MessageBarProps } from "./MessageBarCommon";
+export type { MessageBarProps } from "./MessageBarCommon";
+export type { MessageBarVariant } from "./types";
+export declare const MessageBar: (props: MessageBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/MessageBar/MessageBarLF.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/MessageBar/MessageBarAll.css";
+import { AccordionCore } from "../AccordionCore/AccordionCoreLF";
+import { Button } from "../Button/ButtonLF";
+import { Icon } from "../Icon/IconLF";
+import { MessageBarCommon } from "./MessageBarCommon";
+export const MessageBar = (props) => (_jsx(MessageBarCommon, { ...props, AccordionCoreComponent: AccordionCore, ButtonComponent: Button, IconComponent: Icon }));

package/dist/prospect-client/MessageBar/MessageBarSummary.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentType } from "react";
+import type { IconProps } from "../Icon/IconCommon";
+type MessageBarSummaryProps = {
+    title: string;
+    titleId: string;
+    icon: string;
+    iconVariant: IconProps["variant"];
+    IconComponent: ComponentType<IconProps>;
+};
+export declare const MessageBarSummary: ({ title, titleId, icon, iconVariant, IconComponent, }: MessageBarSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/MessageBar/MessageBarSummary.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const MessageBarSummary = ({ title, titleId, icon, iconVariant, IconComponent, }) => (_jsxs(_Fragment, { children: [_jsx(IconComponent, { src: icon, className: "af-message-bar__icon", role: "presentation", variant: iconVariant }), _jsx("p", { id: titleId, className: "af-message-bar__title", children: title })] }));

package/dist/prospect-client/MessageBar/types.d.ts

@@ -0,0 +1 @@
+export type MessageBarVariant = "info" | "error";

package/dist/prospect-client/MessageBar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/prospect-client/Modal/ModalApollo.d.ts

@@ -5,4 +5,7 @@ export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreB
 export { ModalCoreFooter } from "./components/ModalCoreFooterApollo";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderApollo";
 export type { ModalCoreFooterProps, ModalCoreHeaderProps, ModalProps, } from "./types";
-export declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const Modal: {
+    ({ headingProps, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Modal/ModalApollo.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/prospect/Modal/ModalApollo.css";
-import { forwardRef } from "react";
 import { Button } from "../Button/ButtonApollo";
 import { Heading } from "../Heading/HeadingApollo";
 import { ModalCommon } from "./ModalCommon";
@@ -8,10 +7,8 @@ export { ModalCore } from "./components/ModalCore";
 export { ModalCoreBody, } from "./components/ModalCoreBody";
 export { ModalCoreFooter } from "./components/ModalCoreFooterApollo";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderApollo";
-export const Modal = forwardRef(({ headingProps = {}, icon, iconProps, ...props }, ref) => (_jsx(ModalCommon, { ...props, ref: ref, headingComponent: Heading, headingProps: {
+export const Modal = ({ headingProps = {}, ...props }) => (_jsx(ModalCommon, { ...props, headingComponent: Heading, headingProps: {
         ...headingProps,
         children: props.title,
-        icon: headingProps.icon ?? icon,
-        iconProps: headingProps.iconProps ?? iconProps,
-    }, buttonComponent: Button })));
+    }, buttonComponent: Button }));
 Modal.displayName = "Modal";