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

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/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, icon, iconProps, ...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,10 @@ 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 = {}, icon, iconProps, ...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";

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

@@ -7,4 +7,7 @@ export type ModalCommonProps = ModalCoreProps & Omit<ModalCoreHeaderCommonProps,
     modalCoreFooterProps?: ModalCoreFooterContainerProps;
     modalCoreHeaderProps?: ModalCoreHeaderContainerProps;
 };
-export declare const ModalCommon: import("react").ForwardRefExoticComponent<Omit<ModalCommonProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const ModalCommon: {
+    ({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, iconProps, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }: ModalCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { ModalCore } from "./components/ModalCore";
 import { ModalCoreBody, } from "./components/ModalCoreBody";
 import { ModalCoreFooterCommon, } from "./components/ModalCoreFooterCommon";
 import { ModalCoreHeaderCommon } from "./components/ModalCoreHeaderCommon";
-export const ModalCommon = forwardRef(({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, iconProps, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }, ref) => (_jsxs(ModalCore, { onClose: onClose, ref: ref, ...props, children: [_jsx(ModalCoreHeaderCommon, { headingComponent: headingComponent, headingProps: headingProps, iconProps: iconProps, onClose: onClose, closeButtonAriaLabel: closeButtonAriaLabel, ...modalCoreHeaderProps }), _jsx(ModalCoreBody, { ...modalCoreBodyProps, children: children }), _jsx(ModalCoreFooterCommon, { buttonComponent: buttonComponent, primaryButtonProps: primaryButtonProps, secondaryButtonProps: secondaryButtonProps, tertiaryButtonProps: tertiaryButtonProps, ...modalCoreFooterProps })] })));
+export const ModalCommon = ({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, iconProps, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }) => (_jsxs(ModalCore, { onClose: onClose, ...props, children: [_jsx(ModalCoreHeaderCommon, { headingComponent: headingComponent, headingProps: headingProps, iconProps: iconProps, onClose: onClose, closeButtonAriaLabel: closeButtonAriaLabel, ...modalCoreHeaderProps }), _jsx(ModalCoreBody, { ...modalCoreBodyProps, children: children }), _jsx(ModalCoreFooterCommon, { buttonComponent: buttonComponent, primaryButtonProps: primaryButtonProps, secondaryButtonProps: secondaryButtonProps, tertiaryButtonProps: tertiaryButtonProps, ...modalCoreFooterProps })] }));
 ModalCommon.displayName = "ModalCommon";

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

@@ -5,4 +5,7 @@ export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreB
 export { ModalCoreFooter } from "./components/ModalCoreFooterLF";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderLF";
 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, icon, iconProps, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/client/Modal/ModalLF.css";
-import { forwardRef } from "react";
 import { Button } from "../Button/ButtonLF";
 import { Heading } from "../Heading/HeadingLF";
 import { ModalCommon } from "./ModalCommon";
@@ -8,10 +7,10 @@ export { ModalCore } from "./components/ModalCore";
 export { ModalCoreBody, } from "./components/ModalCoreBody";
 export { ModalCoreFooter } from "./components/ModalCoreFooterLF";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderLF";
-export const Modal = forwardRef(({ headingProps = {}, icon, iconProps, ...props }, ref) => (_jsx(ModalCommon, { ...props, ref: ref, headingComponent: Heading, headingProps: {
+export const Modal = ({ headingProps = {}, icon, iconProps, ...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";

package/dist/prospect-client/Modal/components/ModalCore.d.ts

@@ -2,5 +2,8 @@ import { type ComponentPropsWithRef } from "react";
 export type ModalCoreProps = Omit<ComponentPropsWithRef<"dialog">, "title" | "onClose"> & Required<Pick<ComponentPropsWithRef<"dialog">, "title">> & {
     onClose?: VoidFunction;
 };
-declare const ModalCore: import("react").ForwardRefExoticComponent<Omit<ModalCoreProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+declare const ModalCore: {
+    ({ className, children, ...props }: ModalCoreProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { ModalCore };

package/dist/prospect-client/Modal/components/ModalCore.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const ModalCore = forwardRef(({ className, children, ...props }, ref) => (
+import {} from "react";
+const ModalCore = ({ className, children, ...props }) => (
 // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-_jsx("dialog", { "aria-modal": true, "aria-label": props["aria-label"] ?? props.title, className: ["af-modal", className].filter(Boolean).join(" "), onClick: props.onClose, ref: ref, ...props, children: _jsx("section", { className: "af-modal__content", onClick: (e) => e.stopPropagation(), children: children }) })));
+_jsx("dialog", { "aria-modal": true, "aria-label": props["aria-label"] ?? props.title, className: ["af-modal", className].filter(Boolean).join(" "), onClick: props.onClose, ...props, children: _jsx("section", { className: "af-modal__content", onClick: (e) => e.stopPropagation(), children: children }) }));
 ModalCore.displayName = "ModalCore";
 export { ModalCore };

package/dist/prospect-client/TabMenu/TabMenu.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { type ItemMenuProps } from "../ItemMenu/ItemMenuCommon";
+import "@axa-fr/canopee-css/prospect/TabMenu/TabMenuAll.css";
+/**
+ * One item displayed in the TabMenu component.
+ */
+export type TabMenuItemProps = Omit<ItemMenuProps, "children"> & {
+    /**
+     * Visible label of the menu item.
+     */
+    label: string;
+};
+/**
+ * Props for the TabMenu component.
+ */
+export type TabMenuProps = {
+    /**
+     * List of menu items.
+     */
+    items?: TabMenuItemProps[];
+    /**
+     * Initial active item position.
+     * @default 0
+     */
+    initialPosition?: number;
+} & Omit<ComponentPropsWithoutRef<"nav">, "children">;
+/**
+ * Renders a keyboard-navigable tab-style menu.
+ *
+ * @component
+ * @param {TabMenuProps} props - TabMenu props.
+ * @param {TabMenuItemProps[]} [props.items] - Items to render.
+ * @param {number} [props.initialPosition=0] - Initially selected item index.
+ * @returns {JSX.Element | null} The rendered TabMenu, or null when no items are provided.
+ */
+export declare const TabMenu: ({ items, className, initialPosition, ...props }: TabMenuProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/prospect-client/TabMenu/TabMenu.helpers.d.ts

@@ -0,0 +1 @@
+export declare const getPosition: (max: number, position: number, direction: string) => number;

package/dist/prospect-client/TabMenu/TabMenu.helpers.js

@@ -0,0 +1,12 @@
+export const getPosition = (max, position, direction) => {
+    switch (direction) {
+        case "ArrowRight":
+        case "ArrowDown":
+            return position + 1 < max ? position + 1 : 0;
+        case "ArrowLeft":
+        case "ArrowUp":
+            return position - 1 < 0 ? max - 1 : position - 1;
+        default:
+            return position;
+    }
+};

package/dist/prospect-client/TabMenu/TabMenu.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState, } from "react";
+import { ItemMenu } from "../ItemMenu/ItemMenuCommon";
+import { getClassName } from "../utilities/getClassName";
+import { getPosition } from "./TabMenu.helpers";
+import "@axa-fr/canopee-css/prospect/TabMenu/TabMenuAll.css";
+/**
+ * Renders a keyboard-navigable tab-style menu.
+ *
+ * @component
+ * @param {TabMenuProps} props - TabMenu props.
+ * @param {TabMenuItemProps[]} [props.items] - Items to render.
+ * @param {number} [props.initialPosition=0] - Initially selected item index.
+ * @returns {JSX.Element | null} The rendered TabMenu, or null when no items are provided.
+ */
+export const TabMenu = ({ items, className, initialPosition = 0, ...props }) => {
+    const [position, setPosition] = useState(initialPosition);
+    const itemRefs = useRef([]);
+    const handleKeys = useCallback((key) => {
+        if (key === "ArrowRight" || key === "ArrowLeft") {
+            const newPosition = getPosition(items?.length ?? 0, position, key);
+            itemRefs.current[newPosition]?.focus();
+            setPosition(newPosition);
+        }
+    }, [position, items?.length]);
+    if (!items || items.length === 0) {
+        return null;
+    }
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    _jsx("nav", { className: getClassName({
+            baseClassName: "af-tab-menu",
+            className,
+        }), ...props, 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0, onKeyDown: (e) => handleKeys(e.key), children: _jsx("ul", { className: "af-tab-menu__list", children: items.map((item, index) => (_jsx("li", { children: _jsx(ItemMenu, { ref: (el) => {
+                        itemRefs.current[index] = el;
+                    }, ...item, isActive: index === position ? true : item.isActive, tabIndex: index === position ? 0 : -1, children: item.label }) }, item.href))) }) }));
+};

package/dist/prospect-client/TagList/TagListApollo.d.ts

@@ -0,0 +1,4 @@
+import { type TagListProps as TagListCommonProps } from "./TagListCommon";
+import "@axa-fr/canopee-css/prospect/TagList/TagListAll.css";
+export type TagListProps = Omit<TagListCommonProps, "OverflowTag">;
+export declare const TagList: (props: TagListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/TagList/TagListApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tag } from "../Tag/TagCommon";
+import { TagListCommon, } from "./TagListCommon";
+import "@axa-fr/canopee-css/prospect/TagList/TagListAll.css";
+export const TagList = (props) => (_jsx(TagListCommon, { ...props, OverflowTag: Tag }));

package/dist/prospect-client/TagList/TagListCommon.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentType, type ReactNode } from "react";
+export type TagListProps = {
+    children: ReactNode;
+    hideThreshold?: number;
+    className?: string;
+    OverflowTag: ComponentType<{
+        children: ReactNode;
+    }>;
+};
+export declare const TagListCommon: ({ children, hideThreshold, className, OverflowTag, }: TagListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/TagList/TagListCommon.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, } from "react";
+import { getClassName } from "../utilities/getClassName";
+export const TagListCommon = ({ children, hideThreshold = 2, className = "", OverflowTag, }) => {
+    const childArray = Children.toArray(children).filter(isValidElement);
+    const total = childArray.length;
+    const isOverflowing = total > hideThreshold;
+    const visibleChildren = isOverflowing
+        ? childArray.slice(0, hideThreshold)
+        : childArray;
+    const hiddenCount = total - hideThreshold;
+    return (_jsxs("div", { className: getClassName({
+            baseClassName: "af-tag-list",
+            className,
+        }), children: [visibleChildren, isOverflowing ? _jsxs(OverflowTag, { children: ["+", hiddenCount] }) : null] }));
+};

package/dist/prospect-client/TagList/TagListLF.d.ts

@@ -0,0 +1,4 @@
+import { type TagListProps as TagListCommonProps } from "./TagListCommon";
+import "@axa-fr/canopee-css/client/TagList/TagListAll.css";
+export type TagListProps = Omit<TagListCommonProps, "OverflowTag">;
+export declare const TagList: (props: TagListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/TagList/TagListLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tag } from "../Tag/TagCommon";
+import { TagListCommon, } from "./TagListCommon";
+import "@axa-fr/canopee-css/client/TagList/TagListAll.css";
+export const TagList = (props) => (_jsx(TagListCommon, { ...props, OverflowTag: Tag }));

package/dist/prospect-client/Toggle/ToggleApollo.d.ts

@@ -1,3 +1,6 @@
 import "@axa-fr/canopee-css/prospect/Toggle/ToggleApollo.css";
 import { type ToggleProps } from "./ToggleCommon";
-export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Toggle: {
+    ({ ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Toggle/ToggleApollo.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/prospect/Toggle/ToggleApollo.css";
-import { forwardRef } from "react";
 import { Icon } from "../Icon/IconApollo";
 import { ToggleCommon } from "./ToggleCommon";
-export const Toggle = forwardRef((props, ref) => _jsx(ToggleCommon, { IconComponent: Icon, ...props, ref: ref }));
+export const Toggle = ({ ...props }) => (_jsx(ToggleCommon, { IconComponent: Icon, ...props }));
 Toggle.displayName = "Toggle";

package/dist/prospect-client/Toggle/ToggleCommon.d.ts

@@ -4,6 +4,7 @@ export type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, "style" |
 export type ToggleCommonProps = ToggleProps & {
     IconComponent: ComponentType<IconProps>;
 };
-export declare const ToggleCommon: import("react").ForwardRefExoticComponent<ToggleProps & {
-    IconComponent: ComponentType<IconProps>;
-} & import("react").RefAttributes<HTMLInputElement>>;
+export declare const ToggleCommon: {
+    ({ className, IconComponent, ...inputProps }: ToggleCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Toggle/ToggleCommon.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import check from "@material-symbols/svg-400/rounded/check.svg";
 import close from "@material-symbols/svg-400/rounded/close.svg";
-import { forwardRef, useId, } from "react";
+import { useId } from "react";
 import { getComponentClassName } from "../utilities/getComponentClassName";
-export const ToggleCommon = forwardRef(({ className, IconComponent, ...inputProps }, ref) => {
+export const ToggleCommon = ({ className, IconComponent, ...inputProps }) => {
     let inputId = useId();
     inputId = inputProps.id ?? inputId;
-    return (_jsxs("label", { className: getComponentClassName("af-toggle", className), htmlFor: inputId, children: [_jsx("div", { className: "af-toggle__root", children: _jsxs("span", { className: "af-toggle__handle", children: [_jsx(IconComponent, { src: check, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--check", size: "XS" }), _jsx(IconComponent, { src: close, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--close", size: "XS" })] }) }), _jsx("input", { ...inputProps, ref: ref, type: "checkbox", id: inputId })] }));
-});
+    return (_jsxs("label", { className: getComponentClassName("af-toggle", className), htmlFor: inputId, children: [_jsx("div", { className: "af-toggle__root", children: _jsxs("span", { className: "af-toggle__handle", children: [_jsx(IconComponent, { src: check, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--check", size: "XS" }), _jsx(IconComponent, { src: close, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--close", size: "XS" })] }) }), _jsx("input", { ...inputProps, type: "checkbox", id: inputId })] }));
+};
 ToggleCommon.displayName = "ToggleCommon";

package/dist/prospect-client/Toggle/ToggleLF.d.ts

@@ -1,3 +1,6 @@
 import "@axa-fr/canopee-css/client/Toggle/ToggleLF.css";
 import { type ToggleProps } from "./ToggleCommon";
-export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Toggle: {
+    ({ ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Toggle/ToggleLF.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/client/Toggle/ToggleLF.css";
-import { forwardRef } from "react";
 import { Icon } from "../Icon/IconLF";
 import { ToggleCommon } from "./ToggleCommon";
-export const Toggle = forwardRef((props, ref) => _jsx(ToggleCommon, { IconComponent: Icon, ...props, ref: ref }));
+export const Toggle = ({ ...props }) => (_jsx(ToggleCommon, { IconComponent: Icon, ...props }));
 Toggle.displayName = "Toggle";

package/dist/prospect.d.ts

@@ -5,9 +5,10 @@ import "@fontsource/source-sans-pro";
 export { Accordion, accordionVariants, type AccordionVariants, } from "./prospect-client/Accordion/AccordionApollo";
 export { AccordionContextual, accordionContextualVariants, type AccordionContextualVariants, } from "./prospect-client/AccordionContextual/AccordionContextualApollo";
 export { AccordionCore } from "./prospect-client/AccordionCore/AccordionCoreApollo";
+export { AppName, type AppNameProps } from "./prospect-client/AppName/AppName";
 export { BasePicture } from "./prospect-client/BasePicture/BasePicture";
 export { Button, buttonVariants, type ButtonVariants, } from "./prospect-client/Button/ButtonApollo";
-export { Card, type CardProps } from "./prospect-client/Card/CardApollo";
+export { Card, cardVariants, type CardProps, type CardVariants, } from "./prospect-client/Card/CardApollo";
 export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./prospect-client/CardMessage/CardMessageApollo";
 export { ClickIcon } from "./prospect-client/ClickIcon/ClickIconApollo";
 export { ContentItemDuoAction, type ContentItemDuoActionState, } from "./prospect-client/ContentItemDuoAction/ContentItemDuoActionApollo";
@@ -32,17 +33,20 @@ export { InputText } from "./prospect-client/Form/InputText/InputTextApollo";
 export { InputTextAtom } from "./prospect-client/Form/InputTextAtom/InputTextAtomApollo";
 export { ItemLabel } from "./prospect-client/Form/ItemLabel/ItemLabelApollo";
 export { ItemMessage, itemMessageVariants, type ItemMessageVariants, } from "./prospect-client/Form/ItemMessage/ItemMessageApollo";
-export { 
-/** @deprecated Use `CardRadioGroup` instead. */
-CardRadioGroup as CardRadio, CardRadioGroup, } from "./prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupApollo";
-export { CardRadioOption } from "./prospect-client/Form/Radio/CardRadioOption/CardRadioOptionApollo";
+export { ItemMultiSelect, type ItemMultiSelectProps, } from "./prospect-client/Form/ItemMultiSelect/ItemMultiSelectApollo";
+export { CardRadio } from "./prospect-client/Form/Radio/CardRadio/CardRadioApollo";
+export { CardRadioGroup } from "./prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupApollo";
 export { Radio } from "./prospect-client/Form/Radio/Radio/RadioApollo";
 export { RadioText, type RadioTextProps, } from "./prospect-client/Form/Radio/RadioText/RadioTextApollo";
 export { TextArea } from "./prospect-client/Form/TextArea/TextAreaApollo";
 export { DebugGrid } from "./prospect-client/Grid/DebugGridApollo";
 export { Heading, type HeadingLevel, type HeadingProps, } from "./prospect-client/Heading/HeadingApollo";
+export { Header, type HeaderProps, } from "./prospect-client/Header/HeaderApollo";
 export { Icon, iconSizeVariants, iconVariants, type IconSizeVariants, type IconVariants, } from "./prospect-client/Icon/IconApollo";
 export { ItemTabBar, type ItemTabBarProps, } from "./prospect-client/ItemTabBar/ItemTabBarApollo";
+export { ItemMenu, type ItemMenuProps, } from "./prospect-client/ItemMenu/ItemMenuApollo";
+export { MenuBurger, type MenuBurgerProps, } from "./prospect-client/MenuBurger/MenuBurgerApollo";
+export { TabMenu, type TabMenuProps } from "./prospect-client/TabMenu/TabMenu";
 export { ExitLayout, type ExitLayoutProps, type ExitLayoutWithSubComponents, } from "./prospect-client/Layout/ExitLayout/ExitLayoutApollo";
 export { Footer, type FooterProps, } from "./prospect-client/Layout/Footer/FooterApollo";
 export { FormLayout, type FormLayoutProps, } from "./prospect-client/Layout/FormLayout/FormLayout";
@@ -70,6 +74,7 @@ export { TabBar, tabBarDirection, type TabBarDirection, type TabBarProps, } from
 export { Table, type BodyColorVariants, type HeadColorVariants, type RowSizeVariants, type TableProps, } from "./prospect-client/Table/TableApollo";
 export { TableMobileCard } from "./prospect-client/TableMobileCard/TableMobileCard";
 export { Tag, tagVariants, type TagVariants, } from "./prospect-client/Tag/TagApollo";
+export { TagList, type TagListProps, } from "./prospect-client/TagList/TagListApollo";
 export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./prospect-client/Toggle/ToggleApollo";
 export type { GridContainerProps } from "./prospect-client/utilities/types/GridContainerProps";

package/dist/prospect.js

@@ -5,9 +5,10 @@ import "@fontsource/source-sans-pro";
 export { Accordion, accordionVariants, } from "./prospect-client/Accordion/AccordionApollo";
 export { AccordionContextual, accordionContextualVariants, } from "./prospect-client/AccordionContextual/AccordionContextualApollo";
 export { AccordionCore } from "./prospect-client/AccordionCore/AccordionCoreApollo";
+export { AppName } from "./prospect-client/AppName/AppName";
 export { BasePicture } from "./prospect-client/BasePicture/BasePicture";
 export { Button, buttonVariants, } from "./prospect-client/Button/ButtonApollo";
-export { Card } from "./prospect-client/Card/CardApollo";
+export { Card, cardVariants, } from "./prospect-client/Card/CardApollo";
 export { CardMessage, cardMessageVariants, } from "./prospect-client/CardMessage/CardMessageApollo";
 export { ClickIcon } from "./prospect-client/ClickIcon/ClickIconApollo";
 export { ContentItemDuoAction, } from "./prospect-client/ContentItemDuoAction/ContentItemDuoActionApollo";
@@ -32,17 +33,20 @@ export { InputText } from "./prospect-client/Form/InputText/InputTextApollo";
 export { InputTextAtom } from "./prospect-client/Form/InputTextAtom/InputTextAtomApollo";
 export { ItemLabel } from "./prospect-client/Form/ItemLabel/ItemLabelApollo";
 export { ItemMessage, itemMessageVariants, } from "./prospect-client/Form/ItemMessage/ItemMessageApollo";
-export { 
-/** @deprecated Use `CardRadioGroup` instead. */
-CardRadioGroup as CardRadio, CardRadioGroup, } from "./prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupApollo";
-export { CardRadioOption } from "./prospect-client/Form/Radio/CardRadioOption/CardRadioOptionApollo";
+export { ItemMultiSelect, } from "./prospect-client/Form/ItemMultiSelect/ItemMultiSelectApollo";
+export { CardRadio } from "./prospect-client/Form/Radio/CardRadio/CardRadioApollo";
+export { CardRadioGroup } from "./prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupApollo";
 export { Radio } from "./prospect-client/Form/Radio/Radio/RadioApollo";
 export { RadioText, } from "./prospect-client/Form/Radio/RadioText/RadioTextApollo";
 export { TextArea } from "./prospect-client/Form/TextArea/TextAreaApollo";
 export { DebugGrid } from "./prospect-client/Grid/DebugGridApollo";
 export { Heading, } from "./prospect-client/Heading/HeadingApollo";
+export { Header, } from "./prospect-client/Header/HeaderApollo";
 export { Icon, iconSizeVariants, iconVariants, } from "./prospect-client/Icon/IconApollo";
 export { ItemTabBar, } from "./prospect-client/ItemTabBar/ItemTabBarApollo";
+export { ItemMenu, } from "./prospect-client/ItemMenu/ItemMenuApollo";
+export { MenuBurger, } from "./prospect-client/MenuBurger/MenuBurgerApollo";
+export { TabMenu } from "./prospect-client/TabMenu/TabMenu";
 export { ExitLayout, } from "./prospect-client/Layout/ExitLayout/ExitLayoutApollo";
 export { Footer, } from "./prospect-client/Layout/Footer/FooterApollo";
 export { FormLayout, } from "./prospect-client/Layout/FormLayout/FormLayout";
@@ -70,5 +74,6 @@ export { TabBar, tabBarDirection, } from "./prospect-client/TabBar/TabBarApollo"
 export { Table, } from "./prospect-client/Table/TableApollo";
 export { TableMobileCard } from "./prospect-client/TableMobileCard/TableMobileCard";
 export { Tag, tagVariants, } from "./prospect-client/Tag/TagApollo";
+export { TagList, } from "./prospect-client/TagList/TagListApollo";
 export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./prospect-client/Toggle/ToggleApollo";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.8.1-alpha.1",
+  "version": "2.0.0-alpha.22",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -53,10 +53,10 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "1.8.1-alpha.1",
+    "@axa-fr/canopee-css": "2.0.0-alpha.22",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
-    "react": ">= 18"
+    "react": ">= 19"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.8",

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionApollo.d.ts

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

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionApollo.js

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

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionCommon.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from "react";
-import { BasePicture } from "../../../BasePicture/BasePicture";
-import { getClassName } from "../../../utilities/getClassName";
-export const CardRadioOptionCommon = forwardRef(({ label, position, type, description, subtitle, icon, src, basePictureProps, isInvalid, className, RadioComponent, IconComponent, ...inputProps }, ref) => {
-    const isCardRadioOptionHorizontal = [position, type].includes("horizontal");
-    return (_jsxs("label", { className: getClassName({
-            baseClassName: "af-card-radio-option",
-            modifiers: [
-                isInvalid && "invalid",
-                isCardRadioOptionHorizontal && "horizontal",
-            ],
-            className,
-        }), children: [icon ? _jsx(IconComponent, { src: icon, role: "presentation" }) : null, isCardRadioOptionHorizontal && src ? (_jsx(BasePicture, { src: src, ...basePictureProps })) : null, _jsxs("div", { className: "af-card-radio-option__content", children: [_jsx("p", { className: "af-card-radio-option__label", children: label }), Boolean(description) && (_jsx("p", { className: "af-card-radio-option__description", children: description })), Boolean(subtitle) && (_jsx("p", { className: "af-card-radio-option__subtitle", children: subtitle }))] }), _jsx(RadioComponent, { ...inputProps, isInvalid: isInvalid, ref: ref })] }));
-});
-CardRadioOptionCommon.displayName = "CardRadioOptionCommon";

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionLF.d.ts

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

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionLF.js

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