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

package/dist/distributeur/Link/Link.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Link/Link.css";
-import { forwardRef } from "react";
 import { CustomLink } from "./CustomLink";
 import { LinkAnchor } from "./LinkAnchor";
-export const Link = forwardRef((props, ref) => {
+export const Link = ({ ...props }) => {
     if ("render" in props) {
         return _jsx(CustomLink, { ...props });
     }
-    return _jsx(LinkAnchor, { ...props, ref: ref });
-});
+    return _jsx(LinkAnchor, { ...props });
+};
 Link.displayName = "Link";

package/dist/distributeur/Link/LinkAnchor.d.ts

@@ -8,5 +8,8 @@ type AnchorLinkProps = {
     variant?: "default" | "reverse";
 };
 type LinkComponentProps = ComponentPropsWithRef<"a"> & AnchorLinkProps;
-declare const LinkAnchor: import("react").ForwardRefExoticComponent<Omit<LinkComponentProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const LinkAnchor: {
+    ({ className, target, rel, leftIcon, children, rightIcon, disabled, variant, ...restProps }: LinkComponentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { LinkAnchor, type LinkComponentProps };

package/dist/distributeur/Link/LinkAnchor.js

@@ -1,13 +1,13 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import { forwardRef, } from "react";
+import {} from "react";
 import { Svg } from "../Svg";
 import { linkClassName } from "./linkClassName";
-const LinkAnchor = forwardRef(({ className, target, rel, leftIcon, children, rightIcon, disabled, variant, ...restProps }, ref) => {
+const LinkAnchor = ({ className, target, rel, leftIcon, children, rightIcon, disabled, variant, ...restProps }) => {
     const finalClassName = classnames(linkClassName, className, {
         [`${linkClassName}--reverse`]: variant === "reverse",
     });
-    return (_jsxs("a", { className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], ref: ref, target: target, ...restProps, children: [leftIcon, children, rightIcon] }));
-});
+    return (_jsxs("a", { className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], target: target, ...restProps, children: [leftIcon, children, rightIcon] }));
+};
 LinkAnchor.displayName = "LinkAnchor";
 export { LinkAnchor };

package/dist/distributeur/Loader/ItemLoader.d.ts

@@ -0,0 +1,4 @@
+export type ItemLoaderVariant = "inline" | "fullscreen" | "content";
+export declare const ItemLoader: ({ variant }: {
+    variant: ItemLoaderVariant;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Loader/ItemLoader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Loader from "@axa-fr/canopee-css/Item_Loader.svg";
+import LoaderInverse from "@axa-fr/canopee-css/Item_Loader_Inverse.svg";
+const DEFAULT_CLASS_NAME = "af-loader";
+export const ItemLoader = ({ variant }) => {
+    const isInverse = variant === "fullscreen";
+    return (_jsx("img", { className: `${DEFAULT_CLASS_NAME}__icon`, src: isInverse ? LoaderInverse : Loader, "aria-hidden": "true", alt: "" }));
+};

package/dist/distributeur/Loader/Loader.d.ts

@@ -1,13 +1,10 @@
 import "@axa-fr/canopee-css/distributeur/Loader/Loader.css";
-import { type ReactNode } from "react";
-type LoaderMode = "none" | "get" | "post" | "delete" | "update" | "error";
-type LoaderProps = {
+import type { ReactNode } from "react";
+import { type ItemLoaderVariant } from "./ItemLoader";
+export type LoaderProps = {
     className?: string;
-    mode: LoaderMode;
-    text?: string;
-    children: ReactNode;
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
+    text: string;
+    variant?: ItemLoaderVariant;
+    children?: ReactNode;
 };
-export declare const Loader: ({ className, text, children, classModifier, mode, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Loader: ({ className, text, variant, children, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Loader/Loader.js

@@ -1,31 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Loader/Loader.css";
-import {} from "react";
 import { getClassName } from "../utilities/helpers/getClassName";
-const getText = (index) => {
-    switch (index) {
-        case "get":
-            return "Chargement en cours";
-        case "post":
-            return "Sauvegarde en cours";
-        case "delete":
-            return "Suppression en cours";
-        case "update":
-            return "Mise à jour en cours";
-        case "error":
-            return "Une erreur est survenue lors du chargement du composant";
-        default:
-            return "";
+import { ItemLoader } from "./ItemLoader";
+const LOADER_CLASS_NAME = "af-loader";
+export const Loader = ({ className, text, variant = "fullscreen", children, }) => {
+    const loader = (_jsxs("section", { role: "alert", "aria-live": "assertive", "aria-busy": "true", className: getClassName({
+            baseClassName: LOADER_CLASS_NAME,
+            modifiers: [variant !== "inline" && variant],
+            className,
+        }), children: [_jsx(ItemLoader, { variant: variant }), _jsx("p", { className: `${LOADER_CLASS_NAME}__text`, children: text })] }));
+    if (variant === "fullscreen" && children) {
+        return (_jsxs(_Fragment, { children: [children, loader] }));
     }
-};
-export const Loader = ({ className, text, children, classModifier, mode = "none", }) => {
-    const componentClassName = getClassName({
-        baseClassName: "af-loader",
-        modifiers: classModifier?.split(" "),
-        className,
-    });
-    const message = text || getText(mode);
-    const isLoaderVisible = mode !== "none";
-    const isLoaderInError = mode === "error";
-    return (_jsxs("div", { className: componentClassName, children: [children, isLoaderVisible ? (_jsx("div", { className: `${componentClassName} af-loader-on`, children: _jsxs("div", { className: "af-spinner", role: "alert", "aria-live": "assertive", "aria-busy": !isLoaderInError, "aria-label": message, children: [!isLoaderInError && _jsx("div", { className: "af-spinner__animation" }), _jsx("div", { className: "af-spinner__caption", children: message })] }) })) : null] }));
+    return loader;
 };

package/dist/distributeur/Loader/SquareLoader.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import "@axa-fr/canopee-css/distributeur/Loader/SquareLoader.css";
+export type SquareLoaderProps = {
+    className?: string;
+    mode?: LoaderMode;
+    text?: string;
+    children?: ReactNode;
+    /** @deprecated Use `className` instead. */
+    classModifier?: string;
+};
+export type LoaderMode = "none" | "get" | "post" | "delete" | "update" | "error";
+/**
+ * @deprecated Use `Loader` with `variant="fullscreen"` instead.
+ */
+export declare const SquareLoader: ({ className, text, children, classModifier, mode, }: SquareLoaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Loader/SquareLoader.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName } from "../utilities/helpers/getClassName";
+import "@axa-fr/canopee-css/distributeur/Loader/SquareLoader.css";
+const getText = (index) => {
+    switch (index) {
+        case "get":
+            return "Chargement en cours";
+        case "post":
+            return "Sauvegarde en cours";
+        case "delete":
+            return "Suppression en cours";
+        case "update":
+            return "Mise à jour en cours";
+        case "error":
+            return "Une erreur est survenue lors du chargement du composant";
+        default:
+            return "";
+    }
+};
+/**
+ * @deprecated Use `Loader` with `variant="fullscreen"` instead.
+ */
+export const SquareLoader = ({ className, text, children, classModifier, mode = "none", }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-square-loader",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
+    const message = text || getText(mode);
+    const isLoaderVisible = mode !== "none";
+    const isLoaderInError = mode === "error";
+    return (_jsxs("div", { className: componentClassName, children: [children, isLoaderVisible ? (_jsx("div", { className: `${componentClassName} af-square-loader-on`, children: isLoaderInError ? (_jsx("div", { className: "af-spinner", role: "alert", "aria-live": "assertive", "aria-busy": "false", "aria-label": message, children: _jsx("div", { className: "af-spinner__caption", children: message }) })) : (_jsxs("div", { className: "af-spinner", role: "alert", "aria-live": "assertive", "aria-busy": "true", "aria-label": message, children: [_jsx("div", { className: "af-spinner__animation" }), _jsx("div", { className: "af-spinner__caption", children: message })] })) })) : null] }));
+};

package/dist/distributeur/ModalAgent/BooleanModal.d.ts

@@ -36,5 +36,8 @@ export type BooleanModalProps = React.DetailedHTMLProps<React.DialogHTMLAttribut
      */
     classModifier?: string;
 };
-declare const BooleanModal: React.ForwardRefExoticComponent<Omit<BooleanModalProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+declare const BooleanModal: {
+    ({ children, title, submitTitle, cancelTitle, className, classModifier, onCancel, onSubmit, closeButtonAriaLabel, ...props }: BooleanModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { BooleanModal };

package/dist/distributeur/ModalAgent/BooleanModal.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef } from "react";
+import React, {} from "react";
 import { Button, Modal, getComponentClassName } from "../../distributeur";
 import { Body } from "./components/Body";
 import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
 const defaultClassName = "af-modal";
-const BooleanModal = forwardRef(({ children, title, submitTitle = "Valider", cancelTitle = "Annuler", className = defaultClassName, classModifier, onCancel, onSubmit, closeButtonAriaLabel, ...props }, ref) => {
+const BooleanModal = ({ children, title, submitTitle = "Valider", cancelTitle = "Annuler", className = defaultClassName, classModifier, onCancel, onSubmit, closeButtonAriaLabel, ...props }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs(Modal, { className: componentClassName, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(Header, { title: title, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(Body, { children: children }), _jsxs(Footer, { children: [_jsx(Button, { variant: "secondary", onClick: onCancel, children: cancelTitle }), _jsx(Button, { onClick: onSubmit, variant: "validated", children: submitTitle })] })] }));
-});
+    return (_jsxs(Modal, { className: componentClassName, onOutsideTap: onCancel, title: title, ...props, children: [_jsx(Header, { title: title, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(Body, { children: children }), _jsxs(Footer, { children: [_jsx(Button, { variant: "secondary", onClick: onCancel, children: cancelTitle }), _jsx(Button, { onClick: onSubmit, variant: "validated", children: submitTitle })] })] }));
+};
 BooleanModal.displayName = "BooleanModal";
 export { BooleanModal };

package/dist/distributeur/ModalAgent/Modal.d.ts

@@ -21,5 +21,8 @@ export type ModalProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTML
      */
     ref?: React.Ref<HTMLDialogElement>;
 };
-declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+declare const Modal: {
+    ({ className, title, onOutsideTap, children, classModifier, size, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { Modal };

package/dist/distributeur/ModalAgent/Modal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import {} from "react";
 import { getComponentClassName } from "../utilities";
-const Modal = forwardRef(({ className, title = "", onOutsideTap, children, classModifier, size, ...props }, ref) => {
+const Modal = ({ className, title = "", onOutsideTap, children, classModifier, size, ...props }) => {
     // If size is set to 'lg' or 'sm', use it as the classModifier, otherwise use the provided classModifier
     let effectiveClassModifier;
     if (size) {
@@ -18,7 +18,7 @@ const Modal = forwardRef(({ className, title = "", onOutsideTap, children, class
     const componentClassName = getComponentClassName(className, effectiveClassModifier, "af-modal");
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-    _jsx("dialog", { "aria-label": title, className: componentClassName, onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) }));
-});
+    _jsx("dialog", { "aria-label": title, className: componentClassName, onClick: onOutsideTap, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) }));
+};
 Modal.displayName = "Modal";
 export { Modal };

package/dist/distributeur/Steps/VerticalStep.d.ts

@@ -34,17 +34,11 @@ type Props = {
     /** Labels for different states for accessibility purposes
      * @default
      * {
-     * validatedState: "validée",
-     *  editState: "en cours de modification",
-     *  lockedState: "verrouillée",
-     * }
+     * validatedState: "validée", *  editState: "en cours de modification", *  lockedState: "verrouillée", * }
      * @example
      * ```json
      * {
-     *  validatedState: "completed",
-     *  editState: "being edited",
-     *  lockedState: "locked",
-     * }
+     *  validatedState: "completed", *  editState: "being edited", *  lockedState: "locked", * }
      * ```
      * will change the aria-labels of the step to "Étape verticale ${title} (completed)" when validated, "Étape verticale ${title} (being edited)" when in edition and "Étape verticale ${title} (locked)" when locked.
      */

package/dist/distributeur/Svg/svgInjector.js

@@ -18,6 +18,7 @@ export const svgInjector = (element, { beforeEach = () => { }, ...options } = {}
         ...options,
         beforeEach: (svg) => {
             DOMPurify.sanitize(svg, {
+                ADD_ATTR: ["to", "from"],
                 USE_PROFILES: { svg: true, svgFilters: true },
                 IN_PLACE: true,
             });

package/dist/distributeur/Tag/Tag.d.ts

@@ -28,5 +28,8 @@ type TagProps = ComponentPropsWithRef<"span"> & {
  * @param {React.Ref<HTMLSpanElement>} ref - The ref to the span element.
  * @returns {JSX.Element} The rendered Tag component.
  */
-export declare const Tag: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TagProps>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Tag: {
+    ({ children, className, classModifier, variant, ...otherProps }: PropsWithChildren<TagProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/distributeur/Tag/Tag.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Tag/Tag.css";
-import { forwardRef, } from "react";
+import {} from "react";
 import { getClassName } from "../utilities/helpers/getClassName";
 /**
  * Tag component to display a label with various styles.
@@ -14,7 +14,7 @@ import { getClassName } from "../utilities/helpers/getClassName";
  * @param {React.Ref<HTMLSpanElement>} ref - The ref to the span element.
  * @returns {JSX.Element} The rendered Tag component.
  */
-export const Tag = forwardRef(({ children, className, classModifier, variant, ...otherProps }, ref) => {
+export const Tag = ({ children, className, classModifier, variant, ...otherProps }) => {
     const actualModifier = variant || classModifier || "default";
     const componentClassName = getClassName({
         baseClassName: "af-tag",
@@ -27,6 +27,6 @@ export const Tag = forwardRef(({ children, className, classModifier, variant, ..
         modifiers: [actualModifier],
         className,
     });
-    return (_jsx("span", { ref: ref, className: `${componentClassName} ${badgeClassName}`, ...otherProps, children: children }));
-});
+    return (_jsx("span", { className: `${componentClassName} ${badgeClassName}`, ...otherProps, children: children }));
+};
 Tag.displayName = "Tag";

package/dist/distributeur/Title/Title.d.ts

@@ -9,5 +9,8 @@ type TitleProps = ComponentPropsWithRef<"h2"> & {
     contentRight?: ReactNode;
     withDivider?: boolean;
 };
-export declare const Title: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TitleProps>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const Title: {
+    ({ className, classModifier, children, heading: Heading, contentLeft, contentRight, withDivider, ...otherProps }: PropsWithChildren<TitleProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/distributeur/Title/Title.js

@@ -1,9 +1,9 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Title/Title.css";
-import { forwardRef, } from "react";
+import {} from "react";
 import { getClassName } from "../utilities/helpers/getClassName";
 const baseClass = "af-title";
-export const Title = forwardRef(({ className, classModifier, children, heading: Heading = "h2", contentLeft, contentRight, withDivider = true, ...otherProps }, ref) => {
+export const Title = ({ className, classModifier, children, heading: Heading = "h2", contentLeft, contentRight, withDivider = true, ...otherProps }) => {
     const modifiers = classModifier?.split(" ") ?? [];
     if (!withDivider) {
         modifiers.push("without-divider");
@@ -13,6 +13,6 @@ export const Title = forwardRef(({ className, classModifier, children, heading:
         modifiers,
         className,
     });
-    return (_jsxs("div", { className: `${baseClass}--container`, children: [_jsxs(Heading, { ref: ref, className: componentClassName, ...otherProps, children: [children, contentLeft] }), contentRight ? (_jsx("div", { className: `${baseClass}__content-right`, children: contentRight })) : null] }));
-});
+    return (_jsxs("div", { className: `${baseClass}--container`, children: [_jsxs(Heading, { className: componentClassName, ...otherProps, children: [children, contentLeft] }), contentRight ? (_jsx("div", { className: "content-right", children: contentRight })) : null] }));
+};
 Title.displayName = "Title";

package/dist/distributeur.d.ts

@@ -1,6 +1,7 @@
+import "@axa-fr/canopee-css/distributeur/common/layers.css";
+import "@axa-fr/canopee-css/distributeur/common/reboot.css";
 import "@axa-fr/canopee-css/distributeur/common/grid.css";
 import "@axa-fr/canopee-css/distributeur/common/icons.css";
-import "@axa-fr/canopee-css/distributeur/common/reboot.css";
 import "@axa-fr/canopee-css/distributeur/common/tokens.css";
 import "@axa-fr/canopee-css/distributeur/Form/core/FormCore.css";
 import "@fontsource/source-sans-pro/400.css";
@@ -42,11 +43,14 @@ export { Tabs } from "./distributeur/Tabs/Tabs";
 export { Title } from "./distributeur/Title/Title";
 export { getComponentClassName } from "./distributeur/utilities";
 /** @deprecated Use `Tag` instead. */
-declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").PropsWithChildren<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
-    classModifier?: string;
-    variant?: import("./distributeur").TagVariants;
-    disabled?: boolean;
-}>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Badge: {
+    ({ children, className, classModifier, variant, ...otherProps }: import("react").PropsWithChildren<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+        classModifier?: string;
+        variant?: import("./distributeur").TagVariants;
+        disabled?: boolean;
+    }>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export type { TagVariants } from "./distributeur/Tag/Tag";
 export { Badge, Tag };
 /**
@@ -61,6 +65,8 @@ export * from "./distributeur/Table";
 export { Alert, Message };
 export { HelpButton } from "./distributeur/HelpButton";
 export { Loader } from "./distributeur/Loader/Loader";
+export { ItemLoader, type ItemLoaderVariant, } from "./distributeur/Loader/ItemLoader";
+export { SquareLoader } from "./distributeur/Loader/SquareLoader";
 export { CardData } from "./distributeur/CardData/CardData";
 export type { CardDataVariant } from "./distributeur/CardData/CardData";
 export { EditorialMessage, type EditorialMessageProps, type EditorialMessageType, } from "./distributeur/EditorialMessage/EditorialMessage";

package/dist/distributeur.js

@@ -1,6 +1,7 @@
+import "@axa-fr/canopee-css/distributeur/common/layers.css";
+import "@axa-fr/canopee-css/distributeur/common/reboot.css";
 import "@axa-fr/canopee-css/distributeur/common/grid.css";
 import "@axa-fr/canopee-css/distributeur/common/icons.css";
-import "@axa-fr/canopee-css/distributeur/common/reboot.css";
 import "@axa-fr/canopee-css/distributeur/common/tokens.css";
 import "@axa-fr/canopee-css/distributeur/Form/core/FormCore.css";
 import "@fontsource/source-sans-pro/400.css";
@@ -54,6 +55,8 @@ export * from "./distributeur/Table";
 export { Alert, Message };
 export { HelpButton } from "./distributeur/HelpButton";
 export { Loader } from "./distributeur/Loader/Loader";
+export { ItemLoader, } from "./distributeur/Loader/ItemLoader";
+export { SquareLoader } from "./distributeur/Loader/SquareLoader";
 export { CardData } from "./distributeur/CardData/CardData";
 export { EditorialMessage, } from "./distributeur/EditorialMessage/EditorialMessage";
 export { Timeline, } from "./distributeur/Timeline/Timeline";

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

@@ -0,0 +1,44 @@
+import type { ComponentPropsWithoutRef, ElementType } from "react";
+import "@axa-fr/canopee-css/prospect/AppName/AppNameAll.css";
+/**
+ * Props for the AppName component.
+ */
+export type AppNameProps = ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Application name displayed next to the AXA logo.
+     */
+    label: string;
+    /**
+     * Alt text for the AXA logo image.
+     * @default "Logo AXA"
+     */
+    logoAlt?: string;
+    /**
+     * Props forwarded to the `LogoLinkComponent` (defaults to `<a>`).
+     * @example { href: "/" }
+     * @example { to: "/" } // for React Router Link
+     */
+    logoLinkProps?: Record<string, unknown>;
+    /**
+     * Element or component used to wrap the logo.
+     * Accepts native HTML elements (`"a"`) or custom components (e.g. `Link` from React Router or the DS).
+     * `logoLinkProps` are forwarded to it.
+     * @default "a"
+     * @example "a"
+     * @example Link // from react-router-dom or the DS
+     */
+    LogoLinkComponent?: ElementType;
+};
+/**
+ * Displays the application name alongside the AXA logo.
+ * The logo can optionally be wrapped in a native anchor or a custom link component.
+ *
+ * @component
+ * @param {AppNameProps} props - AppName props.
+ * @param {string} props.label - Application name displayed next to the logo.
+ * @param {string} [props.logoAlt="Logo AXA"] - Alt text for the AXA logo image.
+ * @param {Record<string, unknown>} [props.logoLinkProps] - Props forwarded to the wrapping anchor or `LogoLinkComponent`.
+ * @param {ElementType} [props.LogoLinkComponent="a"] - Element or component used to wrap the logo. Accepts `"a"` or any custom link component (e.g. React Router `Link`).
+ * @returns {JSX.Element} The rendered AppName component.
+ */
+export declare const AppName: ({ label, className, logoAlt, logoLinkProps, LogoLinkComponent, ...props }: AppNameProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import logoAxa from "@axa-fr/canopee-css/logo-axa.svg";
+import { getClassName } from "../utilities/getClassName";
+import "@axa-fr/canopee-css/prospect/AppName/AppNameAll.css";
+/**
+ * Displays the application name alongside the AXA logo.
+ * The logo can optionally be wrapped in a native anchor or a custom link component.
+ *
+ * @component
+ * @param {AppNameProps} props - AppName props.
+ * @param {string} props.label - Application name displayed next to the logo.
+ * @param {string} [props.logoAlt="Logo AXA"] - Alt text for the AXA logo image.
+ * @param {Record<string, unknown>} [props.logoLinkProps] - Props forwarded to the wrapping anchor or `LogoLinkComponent`.
+ * @param {ElementType} [props.LogoLinkComponent="a"] - Element or component used to wrap the logo. Accepts `"a"` or any custom link component (e.g. React Router `Link`).
+ * @returns {JSX.Element} The rendered AppName component.
+ */
+export const AppName = ({ label, className, logoAlt = "Logo AXA", logoLinkProps, LogoLinkComponent = "a", ...props }) => {
+    const logo = (_jsx("img", { src: logoAxa, alt: logoAlt, className: "af-app-name__logo" }));
+    return (_jsxs("div", { className: getClassName({
+            baseClassName: "af-app-name",
+            className,
+        }), ...props, children: [LogoLinkComponent ? (_jsx(LogoLinkComponent, { className: "af-app-name__logo-link", ...logoLinkProps, children: logo })) : (logo), _jsx("span", { className: "af-app-name__label", children: label })] }));
+};

package/dist/prospect-client/Card/CardApollo.d.ts

@@ -1,2 +1,2 @@
 import "@axa-fr/canopee-css/prospect/Card/CardApollo.css";
-export { type CardCommonProps as CardProps, CardCommon as Card, } from "./CardCommon";
+export { cardVariants, type CardVariants, type CardCommonProps as CardProps, CardCommon as Card, } from "./CardCommon";

package/dist/prospect-client/Card/CardApollo.js

@@ -1,2 +1,2 @@
 import "@axa-fr/canopee-css/prospect/Card/CardApollo.css";
-export { CardCommon as Card, } from "./CardCommon";
+export { cardVariants, CardCommon as Card, } from "./CardCommon";

package/dist/prospect-client/Card/CardCommon.d.ts

@@ -1,4 +1,32 @@
 import type { ComponentProps, ElementType } from "react";
 import { type PolymorphicComponent } from "../utilities/types/PolymorphicComponent";
-export type CardCommonProps<T extends ElementType> = PolymorphicComponent<T, ComponentProps<"div">>;
-export declare const CardCommon: <T extends ElementType = "div">({ as, children, className, ...props }: CardCommonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const cardVariants: {
+    readonly unstyled: "unstyled";
+};
+export type CardVariants = keyof typeof cardVariants;
+/**
+ * Props for the Card component.
+ *
+ * @template T - The element type rendered by the card (defaults to `"div"`).
+ */
+export type CardCommonProps<T extends ElementType> = PolymorphicComponent<T, ComponentProps<"div"> & {
+    /**
+     * Visual variant of the card.
+     * - `"unstyled"` — removes border and padding.
+     */
+    variant?: CardVariants;
+}>;
+/**
+ * Polymorphic card wrapper that adds padding and a border.
+ * The underlying HTML element can be changed via the `as` prop.
+ *
+ * @component
+ * @template T - The element type rendered by the card.
+ * @param {CardCommonProps<T>} props - Card props.
+ * @param {ElementType} [props.as="div"] - HTML element or component to render as.
+ * @param {CardVariants} [props.variant] - Visual variant of the card.
+ * @param {string} [props.className] - Additional CSS class applied to the root element.
+ * @param {ReactNode} [props.children] - Content rendered inside the card.
+ * @returns {JSX.Element} The rendered Card component.
+ */
+export declare const CardCommon: <T extends ElementType = "div">({ as, children, className, variant, ...props }: CardCommonProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Card/CardCommon.js

@@ -1,10 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import {} from "../utilities/types/PolymorphicComponent";
 import { getClassName } from "../utilities/getClassName";
-export const CardCommon = ({ as, children, className, ...props }) => {
+export const cardVariants = {
+    unstyled: "unstyled",
+};
+/**
+ * Polymorphic card wrapper that adds padding and a border.
+ * The underlying HTML element can be changed via the `as` prop.
+ *
+ * @component
+ * @template T - The element type rendered by the card.
+ * @param {CardCommonProps<T>} props - Card props.
+ * @param {ElementType} [props.as="div"] - HTML element or component to render as.
+ * @param {CardVariants} [props.variant] - Visual variant of the card.
+ * @param {string} [props.className] - Additional CSS class applied to the root element.
+ * @param {ReactNode} [props.children] - Content rendered inside the card.
+ * @returns {JSX.Element} The rendered Card component.
+ */
+export const CardCommon = ({ as, children, className, variant, ...props }) => {
     const Component = as || "div";
     return (_jsx(Component, { className: getClassName({
             baseClassName: "af-card",
+            modifiers: [variant],
             className,
         }), ...props, children: children }));
 };

package/dist/prospect-client/Card/CardLF.d.ts

@@ -1,2 +1,2 @@
 import "@axa-fr/canopee-css/client/Card/CardLF.css";
-export { type CardCommonProps as CardProps, CardCommon as Card, } from "./CardCommon";
+export { cardVariants, type CardVariants, type CardCommonProps as CardProps, CardCommon as Card, } from "./CardCommon";

package/dist/prospect-client/Card/CardLF.js

@@ -1,2 +1,2 @@
 import "@axa-fr/canopee-css/client/Card/CardLF.css";
-export { CardCommon as Card, } from "./CardCommon";
+export { cardVariants, CardCommon as Card, } from "./CardCommon";

package/dist/prospect-client/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.d.ts

@@ -12,5 +12,8 @@ export type CardCheckboxOptionCommonProps = CardCheckboxOptionProps & {
     CheckboxComponent: ComponentType<CheckboxProps>;
     IconComponent: ComponentType<IconProps>;
 };
-declare const CardCheckboxOptionCommon: import("react").ForwardRefExoticComponent<Omit<CardCheckboxOptionCommonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+declare const CardCheckboxOptionCommon: {
+    ({ label, type, description, subtitle, icon, className, CheckboxComponent, IconComponent, ...inputProps }: CardCheckboxOptionCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { CardCheckboxOptionCommon };

package/dist/prospect-client/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const CardCheckboxOptionCommon = forwardRef(({ label, type = "vertical", description, subtitle, icon, className, CheckboxComponent, IconComponent, ...inputProps }, ref) => (_jsxs("label", { className: [
+import {} from "react";
+const CardCheckboxOptionCommon = ({ label, type = "vertical", description, subtitle, icon, className, CheckboxComponent, IconComponent, ...inputProps }) => (_jsxs("label", { className: [
         "af-card-checkbox-option",
         type === "horizontal" && "af-card-checkbox-option--horizontal",
         className,
     ]
         .filter(Boolean)
-        .join(" "), children: [icon ? _jsx(IconComponent, { src: icon, role: "presentation" }) : null, _jsxs("div", { className: "af-card-checkbox-option__content", children: [_jsx("p", { className: "af-card-checkbox-option__label", children: label }), Boolean(description) && (_jsx("p", { className: "af-card-checkbox-option__description", children: description })), Boolean(subtitle) && (_jsx("p", { className: "af-card-checkbox-option__subtitle", children: subtitle }))] }), _jsx(CheckboxComponent, { ...inputProps, ref: ref })] })));
+        .join(" "), children: [icon ? _jsx(IconComponent, { src: icon, role: "presentation" }) : null, _jsxs("div", { className: "af-card-checkbox-option__content", children: [_jsx("p", { className: "af-card-checkbox-option__label", children: label }), Boolean(description) && (_jsx("p", { className: "af-card-checkbox-option__description", children: description })), Boolean(subtitle) && (_jsx("p", { className: "af-card-checkbox-option__subtitle", children: subtitle }))] }), _jsx(CheckboxComponent, { ...inputProps })] }));
 CardCheckboxOptionCommon.displayName = "CardCheckboxOptionCommon";
 export { CardCheckboxOptionCommon };

package/dist/prospect-client/Form/Checkbox/Checkbox/CheckboxCommon.d.ts

@@ -5,4 +5,7 @@ export type CheckboxProps = {
     /** @deprecated Use `aria-invalid` instead */
     hasError?: boolean;
 } & Omit<ComponentProps<"input">, "disabled" | "type">;
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: {
+    ({ errorId, hasError, className, ...inputProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Form/Checkbox/Checkbox/CheckboxCommon.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-export const Checkbox = forwardRef(({ errorId, hasError, className, ...inputProps }, ref) => (_jsx("input", { "aria-errormessage": errorId, "aria-invalid": hasError, ...inputProps, className: ["af-checkbox", className].filter(Boolean).join(" "), ref: ref, type: "checkbox" })));
+import {} from "react";
+export const Checkbox = ({ errorId, hasError, className, ...inputProps }) => (_jsx("input", { "aria-errormessage": errorId, "aria-invalid": hasError, ...inputProps, className: ["af-checkbox", className].filter(Boolean).join(" "), type: "checkbox" }));
 Checkbox.displayName = "Checkbox";