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

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

@@ -2,11 +2,6 @@ import "@axa-fr/canopee-css/distributeur/Tag/Tag.css";
 import { type ComponentPropsWithRef, type PropsWithChildren } from "react";
 export type TagVariants = "success" | "information" | "warning" | "error" | "default" | "dark" | "purple" | "gray" | "white";
 type TagProps = ComponentPropsWithRef<"span"> & {
-    /**
-     * Modifier class to apply specific styles. Note: "danger" is deprecated, use "warning" instead. "info" is deprecated, use "information" instead
-     * @deprecated Use `variant` instead
-     */
-    classModifier?: string;
     /**
      * Variant of the tag to apply specific styles.
      * "warning" replaces the deprecated "danger
@@ -28,5 +23,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, 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,8 +14,8 @@ 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) => {
-    const actualModifier = variant || classModifier || "default";
+export const Tag = ({ children, className, variant, ...otherProps }) => {
+    const actualModifier = variant || "default";
     const componentClassName = getClassName({
         baseClassName: "af-tag",
         modifiers: [actualModifier],
@@ -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

@@ -2,12 +2,13 @@ import "@axa-fr/canopee-css/distributeur/Title/Title.css";
 import { type ComponentPropsWithRef, type PropsWithChildren, type ReactElement, type ReactNode } from "react";
 type Headings = "h2" | "h3" | "h4";
 type TitleProps = ComponentPropsWithRef<"h2"> & {
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     heading?: Headings;
     contentLeft?: ReactElement;
     contentRight?: ReactNode;
     withDivider?: boolean;
 };
-export declare const Title: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TitleProps>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const Title: {
+    ({ className, 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,10 +1,10 @@
 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) => {
-    const modifiers = classModifier?.split(" ") ?? [];
+export const Title = ({ className, children, heading: Heading = "h2", contentLeft, contentRight, withDivider = true, ...otherProps }) => {
+    const modifiers = [];
     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: `${baseClass}__content-right`, children: contentRight })) : null] }));
+};
 Title.displayName = "Title";

package/dist/distributeur/utilities.d.ts

@@ -1,3 +1,3 @@
 export { BREAKPOINT } from "./utilities/constants";
-export { getComponentClassName } from "./utilities/helpers/getComponentClassName";
+export { getClassName } from "./utilities/helpers/getClassName";
 export { useIsSmallScreen } from "./utilities/hooks/useIsSmallScreen";

package/dist/distributeur/utilities.js

@@ -1,3 +1,3 @@
 export { BREAKPOINT } from "./utilities/constants";
-export { getComponentClassName } from "./utilities/helpers/getComponentClassName";
+export { getClassName } from "./utilities/helpers/getClassName";
 export { useIsSmallScreen } from "./utilities/hooks/useIsSmallScreen";

package/dist/distributeur-experimental.d.ts

@@ -1,2 +1,4 @@
+import "@axa-fr/canopee-css/distributeur/common/reboot.css";
+import "@axa-fr/canopee-css/distributeur/common/tokens.css";
 export * from "./distributeur/Experimental/Restitution";
 export * from "./distributeur/Form/Experimental";

package/dist/distributeur-experimental.js

@@ -1,2 +1,4 @@
+import "@axa-fr/canopee-css/distributeur/common/reboot.css";
+import "@axa-fr/canopee-css/distributeur/common/tokens.css";
 export * from "./distributeur/Experimental/Restitution";
 export * from "./distributeur/Form/Experimental";

package/dist/distributeur.d.ts

@@ -1,13 +1,12 @@
+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";
 import "@fontsource/source-sans-pro/600.css";
 import "@fontsource/source-sans-pro/700.css";
-import { Message } from "./distributeur/Messages/Message";
-import { Tag } from "./distributeur/Tag/Tag";
 export { Action } from "./distributeur/Action/Action";
 export { Button } from "./distributeur/Button/Button";
 export type { ButtonVariant } from "./distributeur/Button/Button";
@@ -15,22 +14,21 @@ export { Card } from "./distributeur/Card/Card";
 export { Divider } from "./distributeur/Divider/Divider";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./distributeur/Form/Checkbox";
 export { Choice, ChoiceInput } from "./distributeur/Form/Choice";
-export { LegacyField as Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./distributeur/Form/core";
+export { Field, FieldError, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./distributeur/Form/core";
 export { Date, DateInput } from "./distributeur/Form/Date";
 export { File, FileInput, FileTable, type FilePreview, } from "./distributeur/Form/File";
 export { MultiSelect, MultiSelectInput } from "./distributeur/Form/MultiSelect";
 export { NestedQuestion } from "./distributeur/Form/NestedQuestion/NestedQuestion";
 export { Number, NumberInput } from "./distributeur/Form/Number";
-export { Pass, PassInput } from "./distributeur/Form/Pass";
 export { Radio, RadioInput, RadioItem, RadioModes, } from "./distributeur/Form/Radio";
-export { Select, SelectBase, SelectInput } from "./distributeur/Form/Select";
-export { Slider, SliderInput } from "./distributeur/Form/Slider";
+export { Select, SelectInput } from "./distributeur/Form/Select";
 export { Text, TextInput } from "./distributeur/Form/Text";
 export { Textarea, TextareaInput } from "./distributeur/Form/Textarea";
 export { Footer } from "./distributeur/Layout/Footer";
 export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, type AnchorNavBarItem, } from "./distributeur/Layout/Header";
 export { MainContainer } from "./distributeur/Layout/MainContainer/MainContainer";
 export { Link, type LinkProps } from "./distributeur/Link/Link";
+export { ButtonMultiActions, type ButtonMultiActionsProps, } from "./distributeur/ButtonMultiActions";
 export { MandatoryMention } from "./distributeur/MandatoryMention/MandatoryMention";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./distributeur/ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./distributeur/Restitution";
@@ -40,28 +38,22 @@ export { Summary } from "./distributeur/Summary";
 export { Svg } from "./distributeur/Svg";
 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>>;
+export { getClassName } from "./distributeur/utilities";
 export type { TagVariants } from "./distributeur/Tag/Tag";
-export { Badge, Tag };
-/**
- * @deprecated `Alert` has been renamed `Message` in order to comply with UX naming of components. Use `Message` instead.
- * @see {@link Message}
- */
-declare const Alert: ({ className, onClose, icon, title, children, classModifier, variant, closeButtonAriaLabel, }: import("react").PropsWithChildren<import("./distributeur").MessageProps>) => import("react/jsx-runtime").JSX.Element;
+export { Tag } from "./distributeur/Tag/Tag";
 export * from "./distributeur/Accordion";
 export { type MessageProps, type MessageVariants, } from "./distributeur/Messages/Message";
 export * from "./distributeur/Popover";
 export * from "./distributeur/Table";
-export { Alert, Message };
+export { Message } from "./distributeur/Messages/Message";
 export { HelpButton } from "./distributeur/HelpButton";
 export { Loader } from "./distributeur/Loader/Loader";
+export { ItemLoader, type ItemLoaderVariant, } from "./distributeur/Loader/ItemLoader";
 export { CardData } from "./distributeur/CardData/CardData";
 export type { CardDataVariant } from "./distributeur/CardData/CardData";
 export { EditorialMessage, type EditorialMessageProps, type EditorialMessageType, } from "./distributeur/EditorialMessage/EditorialMessage";
 export { Timeline, type TimelineProps, type TimelineVariants, } from "./distributeur/Timeline/Timeline";
+export { CardButton, type CardButtonProps, } from "./distributeur/CardButton/CardButton";
+export type { ClickableComponentProps } from "./distributeur/ClickableGhost";
+export { BaseCard, type BaseCardProps } from "./distributeur/Card/BaseCard";
+export { ItemFormHelper, type ItemFormHelperProps, type ItemFormHelperVariant, } from "./distributeur/ItemFormHelper/ItemFormHelper";

package/dist/distributeur.js

@@ -1,35 +1,33 @@
+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";
 import "@fontsource/source-sans-pro/600.css";
 import "@fontsource/source-sans-pro/700.css";
-import { Message } from "./distributeur/Messages/Message";
-import { Tag } from "./distributeur/Tag/Tag";
 export { Action } from "./distributeur/Action/Action";
 export { Button } from "./distributeur/Button/Button";
 export { Card } from "./distributeur/Card/Card";
 export { Divider } from "./distributeur/Divider/Divider";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./distributeur/Form/Checkbox";
 export { Choice, ChoiceInput } from "./distributeur/Form/Choice";
-export { LegacyField as Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./distributeur/Form/core";
+export { Field, FieldError, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./distributeur/Form/core";
 export { Date, DateInput } from "./distributeur/Form/Date";
 export { File, FileInput, FileTable, } from "./distributeur/Form/File";
 export { MultiSelect, MultiSelectInput } from "./distributeur/Form/MultiSelect";
 export { NestedQuestion } from "./distributeur/Form/NestedQuestion/NestedQuestion";
 export { Number, NumberInput } from "./distributeur/Form/Number";
-export { Pass, PassInput } from "./distributeur/Form/Pass";
 export { Radio, RadioInput, RadioItem, RadioModes, } from "./distributeur/Form/Radio";
-export { Select, SelectBase, SelectInput } from "./distributeur/Form/Select";
-export { Slider, SliderInput } from "./distributeur/Form/Slider";
+export { Select, SelectInput } from "./distributeur/Form/Select";
 export { Text, TextInput } from "./distributeur/Form/Text";
 export { Textarea, TextareaInput } from "./distributeur/Form/Textarea";
 export { Footer } from "./distributeur/Layout/Footer";
 export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./distributeur/Layout/Header";
 export { MainContainer } from "./distributeur/Layout/MainContainer/MainContainer";
 export { Link } from "./distributeur/Link/Link";
+export { ButtonMultiActions, } from "./distributeur/ButtonMultiActions";
 export { MandatoryMention } from "./distributeur/MandatoryMention/MandatoryMention";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./distributeur/ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./distributeur/Restitution";
@@ -38,22 +36,19 @@ export { Summary } from "./distributeur/Summary";
 export { Svg } from "./distributeur/Svg";
 export { Tabs } from "./distributeur/Tabs/Tabs";
 export { Title } from "./distributeur/Title/Title";
-export { getComponentClassName } from "./distributeur/utilities";
-/** @deprecated Use `Tag` instead. */
-const Badge = Tag;
-export { Badge, Tag };
-/**
- * @deprecated `Alert` has been renamed `Message` in order to comply with UX naming of components. Use `Message` instead.
- * @see {@link Message}
- */
-const Alert = Message;
+export { getClassName } from "./distributeur/utilities";
+export { Tag } from "./distributeur/Tag/Tag";
 export * from "./distributeur/Accordion";
 export {} from "./distributeur/Messages/Message";
 export * from "./distributeur/Popover";
 export * from "./distributeur/Table";
-export { Alert, Message };
+export { Message } from "./distributeur/Messages/Message";
 export { HelpButton } from "./distributeur/HelpButton";
 export { Loader } from "./distributeur/Loader/Loader";
+export { ItemLoader, } from "./distributeur/Loader/ItemLoader";
 export { CardData } from "./distributeur/CardData/CardData";
 export { EditorialMessage, } from "./distributeur/EditorialMessage/EditorialMessage";
 export { Timeline, } from "./distributeur/Timeline/Timeline";
+export { CardButton, } from "./distributeur/CardButton/CardButton";
+export { BaseCard } from "./distributeur/Card/BaseCard";
+export { ItemFormHelper, } from "./distributeur/ItemFormHelper/ItemFormHelper";

package/dist/prospect-client/AccordionCore/AccordionCoreCommon.d.ts

@@ -1,19 +1,17 @@
 import { type ComponentProps, type ComponentType, type MouseEventHandler, type ReactNode } from "react";
+import type { ClickIconVariant } from "../ClickIcon/ClickIconCommon";
 import type { IconProps } from "../Icon/IconCommon";
 type SummaryOnClick = MouseEventHandler<HTMLElement>;
 export type AccordionCoreProps = {
     summary: ReactNode;
-    /**
-     * @deprecated use `open` instead
-     */
-    isOpen?: boolean;
     summaryProps?: Omit<ComponentProps<"summary">, "onClick">;
     onClick?: SummaryOnClick;
     showArrowAsClickIcon?: boolean;
+    arrowClickIconVariant?: ClickIconVariant;
     arrowIconVariant?: IconProps["variant"];
 } & ComponentProps<"details">;
 export type AccordionPropsCommonProps = AccordionCoreProps & {
     IconComponent: ComponentType<IconProps>;
 };
-export declare const AccordionCoreCommon: ({ summary, children, className, summaryProps, isOpen, IconComponent, onClick, showArrowAsClickIcon, arrowIconVariant, ...detailsProps }: AccordionPropsCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionCoreCommon: ({ summary, children, className, summaryProps, IconComponent, onClick, showArrowAsClickIcon, arrowClickIconVariant, arrowIconVariant, ...detailsProps }: AccordionPropsCommonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/prospect-client/AccordionCore/AccordionCoreCommon.js

@@ -1,22 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, } from "react";
 import keyboardDown from "@material-symbols/svg-400/rounded/keyboard_arrow_down-fill.svg";
+import { useCallback, } from "react";
 import { getClassName } from "../utilities/getClassName";
-export const AccordionCoreCommon = ({ summary, children, className, summaryProps, isOpen = false, IconComponent, onClick, showArrowAsClickIcon = true, arrowIconVariant, ...detailsProps }) => {
+export const AccordionCoreCommon = ({ summary, children, className, summaryProps, IconComponent, onClick, showArrowAsClickIcon = true, arrowClickIconVariant = "default", arrowIconVariant, ...detailsProps }) => {
     const handleSummaryClick = useCallback((event) => {
         if (onClick) {
             event.preventDefault();
             onClick(event);
         }
     }, [onClick]);
+    const arrowClassName = showArrowAsClickIcon
+        ? getClassName({
+            baseClassName: "af-click-icon",
+            modifiers: [arrowClickIconVariant === "ghost" && arrowClickIconVariant],
+        })
+        : undefined;
     return (_jsxs("details", { className: getClassName({
             baseClassName: "af-apollo-accordion",
             className,
-        }), open: isOpen, ...detailsProps, children: [_jsxs("summary", { onClick: handleSummaryClick, tabIndex: 0, ...summaryProps, className: getClassName({
+        }), ...detailsProps, children: [_jsxs("summary", { onClick: handleSummaryClick, tabIndex: 0, ...summaryProps, className: getClassName({
                     baseClassName: "af-apollo-accordion__summary",
                     className: summaryProps?.className,
                 }), children: [summary, _jsx("div", { className: getClassName({
                             baseClassName: "af-accordion__arrow",
-                            className: showArrowAsClickIcon ? "af-click-icon" : "",
+                            className: arrowClassName,
                         }), children: _jsx(IconComponent, { src: keyboardDown, role: "presentation", variant: arrowIconVariant }) })] }), children] }));
 };

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/CardMessage/CardMessageCommon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { getComponentClassName } from "../utilities/getComponentClassName";
+import { getClassName } from "../utilities/getClassName";
 export const cardMessageVariants = {
     info: "info",
     warning: "warning",
@@ -8,8 +8,10 @@ export const cardMessageVariants = {
     neutral: "neutral",
 };
 export const CardMessage = ({ variant = "info", title, text, className, ...props }) => {
-    const componentClassName = useMemo(() => {
-        return getComponentClassName("af-card-message", className, variant);
-    }, [className, variant]);
+    const componentClassName = useMemo(() => getClassName({
+        baseClassName: "af-card-message",
+        modifiers: [variant],
+        className,
+    }), [className, variant]);
     return (_jsxs("div", { ...props, className: componentClassName, children: [title ? _jsx("span", { className: "af-card-message--title", children: title }) : null, _jsx("span", { className: "af-card-message--text", children: text })] }));
 };

package/dist/prospect-client/ContentItemDuoAction/ContentItemDuoActionCommon.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentType, type ReactElement } from "react";
-import type { ToggleProps } from "../Toggle/ToggleCommon";
-import type { ContentItemProps } from "../ContentItemMono/ContentItemMonoCommon";
 import type { ButtonProps } from "../Button/ButtonCommon";
+import type { ContentItemProps } from "../ContentItemMono/ContentItemMonoCommon";
+import type { ToggleProps } from "../Toggle/ToggleCommon";
 export declare const ContentItemDuoActionState: {
     readonly edit: "edit";
     readonly toggle: "toggle";

package/dist/prospect-client/ContentItemDuoAction/ContentItemDuoActionCommon.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import {} from "react";
-import { getComponentClassName } from "../utilities/getComponentClassName";
+import { getClassName } from "../utilities/getClassName";
 export const ContentItemDuoActionState = {
     edit: "edit",
     toggle: "toggle",
 };
 export const ContentItemDuoActionCommon = ({ className, state, ContentItemMonoComponent, contentItemProps, ToggleComponent, ...props }) => {
-    const componentClassName = getComponentClassName("af-content-item-duo-action", className);
+    const componentClassName = getClassName({
+        baseClassName: "af-content-item-duo-action",
+        className,
+    });
     return (_jsxs("div", { className: componentClassName, children: [_jsx(ContentItemMonoComponent, { ...contentItemProps }), _jsx("div", { className: "af-action-container", children: state === "edit" ? (props.buttons) : (_jsx(ToggleComponent, { ...props.toggleProps })) })] }));
 };

package/dist/prospect-client/ContentItemMono/ContentItemMonoCommon.d.ts

@@ -14,10 +14,6 @@ export type ContentMonoItemIconProps = {
     title?: string;
     subtitle1?: string;
     subtitle2?: string;
-    /**
-     * @deprecated Use `iconProps` instead.
-     */
-    icon?: string;
     iconProps?: IconProps;
 };
 export type ContentMonoItemStickProps = {

package/dist/prospect-client/ContentItemMono/ContentItemMonoCommon.js

@@ -4,13 +4,12 @@ import { Icon } from "../Icon/IconCommon";
 import { ContentItemMonoCore, } from "./ContentItemMonoCore";
 export const getContentItemCoreProps = ({ IconComponent, type, ...props }) => {
     if (type === "icon") {
-        const { icon, iconProps, title, subtitle1, subtitle2 } = props;
+        const { iconProps, title, subtitle1, subtitle2 } = props;
         return {
             title,
             primarySubtitle: subtitle1,
             subtitle: subtitle2,
-            leftComponent: (iconProps && _jsx(IconComponent, { "data-testid": "icon", ...iconProps })) ||
-                (icon && _jsx(IconComponent, { "data-testid": "icon", src: icon })),
+            leftComponent: iconProps && (_jsx(IconComponent, { "data-testid": "icon", ...iconProps })),
         };
     }
     if (type === "picture") {

package/dist/prospect-client/DataAgent/DataAgentCommon.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Fragment, useMemo, } from "react";
 import { Divider } from "../Divider/DividerCommon";
 import { BREAKPOINT } from "../utilities/constants";
-import { getComponentClassName } from "../utilities/getComponentClassName";
+import { getClassName } from "../utilities/getClassName";
 import { useIsSmallScreen } from "../utilities/hook/useIsSmallScreen";
 export const DataAgentCommon = ({ className, agentProps, agentContractProps, contents, clickContents, texteOrias, DividerComponent, ContentItemMonoComponent, ClickItemComponent, isCompact = true, variant = "default", }) => {
-    const componentClassName = useMemo(() => getComponentClassName("af-data-agent", className), [className]);
+    const componentClassName = useMemo(() => getClassName({ baseClassName: "af-data-agent", className }), [className]);
     const isMobile = useIsSmallScreen(BREAKPOINT.SM);
     const renderForDefaultLayout = () => (_jsxs(_Fragment, { children: [_jsxs("section", { className: "af-data-agent__intro", children: [_jsx(ContentItemMonoComponent, { ...agentProps, type: "picture" }), agentContractProps ? (_jsx(ContentItemMonoComponent, { ...agentContractProps, type: "stick" })) : null] }), _jsx(DividerComponent, {}), contents && contents?.length > 0 ? (_jsx("section", { className: "af-data-agent__info-content", children: contents.map((content) => (_jsxs(Fragment, { children: [_jsx(ContentItemMonoComponent, { ...content, type: "icon" }), _jsx(DividerComponent, { className: "af-data-agent__line" })] }, `content--${crypto.randomUUID()}`))) })) : null, clickContents && clickContents?.length > 0 ? (_jsx("section", { className: "af-data-agent__info-click-content", children: clickContents.map((clickContent) => (_jsxs(Fragment, { children: [_jsx(ClickItemComponent, { ...clickContent, variant: "small" }), _jsx(DividerComponent, { className: "af-data-agent__line" })] }, `clickContent--${crypto.randomUUID()}`))) })) : null, Boolean(texteOrias) && (_jsx("p", { className: "af-data-agent__text-orias", children: texteOrias }))] }));
     const renderForMobileLayout = () => (_jsx("section", { className: "af-data-agent__intro", children: _jsx(ClickItemComponent, { ...agentProps, basePictureProps: {

package/dist/prospect-client/Divider/DividerCommon.d.ts

@@ -1,6 +1,5 @@
 type DividerProps = {
     className?: string;
-    classModifier?: string;
 };
-export declare const Divider: ({ className, classModifier }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Divider: ({ className }: DividerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/prospect-client/Divider/DividerCommon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { getComponentClassName } from "../utilities/getComponentClassName";
-export const Divider = ({ className, classModifier }) => {
-    const componentClassName = useMemo(() => getComponentClassName("af-divider", className, classModifier), [className, classModifier]);
+import { getClassName } from "../utilities/getClassName";
+export const Divider = ({ className }) => {
+    const componentClassName = useMemo(() => getClassName({ baseClassName: "af-divider", className }), [className]);
     return _jsx("hr", { className: componentClassName });
 };

package/dist/prospect-client/Form/Checkbox/CardCheckbox/CardCheckboxApollo.d.ts

@@ -1,5 +1,6 @@
 import { type CardCheckboxProps } from "./CardCheckboxCommon";
 import "@axa-fr/canopee-css/prospect/Form/Checkbox/CardCheckbox/CardCheckboxApollo.css";
+export type { CardCheckboxProps };
 export declare const CardCheckbox: {
     (props: CardCheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;