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

package/dist/distributeur/Form/Experimental/Radio/_radioInputOptions.d.ts

@@ -0,0 +1,8 @@
+import type { RadioInputPropsButtonVariant, RadioInputPropsCardVariant } from "./RadioInput";
+type RadioInputOptionsProps = {
+    inputId: string;
+    isInvalid: boolean;
+    describedBy?: string;
+} & (Pick<RadioInputPropsCardVariant, "variant" | "options" | "showAddButton" | "orientation" | "onAdd"> | Pick<RadioInputPropsButtonVariant, "variant" | "options">);
+export declare const RadioInputOptions: ({ inputId, isInvalid, describedBy, ...props }: RadioInputOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Form/Experimental/Radio/_radioInputOptions.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AddRadioCard } from "./AddRadioCard";
+import { RadioButton } from "./RadioButton";
+import { RadioCard } from "./RadioCard";
+export const RadioInputOptions = ({ inputId, isInvalid, describedBy, ...props }) => (_jsxs(_Fragment, { children: [!props.variant || props.variant === "button"
+            ? props.options.map((o) => (_jsx(RadioButton, { ...o }, `${inputId}-${o.value}`)))
+            : null, props.variant === "card" ? (_jsxs(_Fragment, { children: [props.options.map((o) => (_jsx(RadioCard, { id: `${inputId}-${o.value}`, ...o, "aria-invalid": isInvalid, "aria-describedby": describedBy, orientation: props.orientation || "horizontal" }, `${inputId}-${o.value}`))), props.showAddButton ? (_jsx(AddRadioCard, { orientation: props.orientation || "horizontal", onClick: props.onAdd })) : null] })) : null] }));

package/dist/distributeur/Form/Experimental/index.d.ts

@@ -7,3 +7,9 @@ export { TextInput } from "./TextInput";
 export type { TextInputProps } from "./TextInput";
 export type { InputBaseProps, LabelPosition, SingleLineLabelPosition, } from "./types";
 export { useInput } from "./useInput.hook";
+export { RadioButton, type RadioButtonProps } from "./Radio/RadioButton";
+export { RadioCard, type RadioCardProps } from "./Radio/RadioCard";
+export { RadioGroup, type RadioGroupProps } from "./Radio/RadioGroup";
+export { RadioInput, type RadioInputProps, type RadioInputPropsButtonVariant, type RadioInputPropsCardVariant, } from "./Radio/RadioInput";
+export { RadioItem, type RadioItemProps } from "./Radio/RadioItem";
+export { RadioText, type RadioTextProps } from "./Radio/RadioText";

package/dist/distributeur/Form/Experimental/index.js

@@ -5,3 +5,9 @@ export { ItemMessage } from "./ItemMessage";
 export { Label } from "./Label";
 export { TextInput } from "./TextInput";
 export { useInput } from "./useInput.hook";
+export { RadioButton } from "./Radio/RadioButton";
+export { RadioCard } from "./Radio/RadioCard";
+export { RadioGroup } from "./Radio/RadioGroup";
+export { RadioInput, } from "./Radio/RadioInput";
+export { RadioItem } from "./Radio/RadioItem";
+export { RadioText } from "./Radio/RadioText";

package/dist/distributeur/Form/Experimental/types.d.ts

@@ -35,7 +35,7 @@ export type InputBaseProps = {
      * - `leftAbove` will place the label above the input, aligned to the left. This is used to have the label above the input.
      * @default "centerLeft"
      */
-    labelPosition?: SingleLineLabelPosition;
+    labelPosition?: LabelPosition;
     /**
      * The help message to display below the input.
      */

package/dist/distributeur/Form/Experimental/useInput.hook.js

@@ -11,7 +11,7 @@ export const useInput = (props) => {
     });
     const labelClassName = getClassName({
         baseClassName: "af-label",
-        modifiers: [props.labelPosition === "above" && "top"],
+        modifiers: [props.labelPosition === "topLeft" && "top-left"],
         className: props.labelClassName,
     });
     const errorId = isInvalid ? `${inputId}-description` : undefined;

package/dist/distributeur/Title/Title.js

@@ -13,6 +13,6 @@ export const Title = ({ className, classModifier, children, heading: Heading = "
         modifiers,
         className,
     });
-    return (_jsxs("div", { className: `${baseClass}--container`, children: [_jsxs(Heading, { className: componentClassName, ...otherProps, children: [children, contentLeft] }), contentRight ? (_jsx("div", { className: "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-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

@@ -32,6 +32,7 @@ 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";
@@ -71,3 +72,5 @@ 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 { BaseCard, type BaseCardProps } from "./distributeur/Card/BaseCard";

package/dist/distributeur.js

@@ -31,6 +31,7 @@ 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";
@@ -60,3 +61,5 @@ export { SquareLoader } from "./distributeur/Loader/SquareLoader";
 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";

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

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { getComponentClassName } from "../utilities/getComponentClassName";
+import { getClassName } from "../utilities/getClassName";
 export const Divider = ({ className, classModifier }) => {
-    const componentClassName = useMemo(() => getComponentClassName("af-divider", className, classModifier), [className, classModifier]);
+    const componentClassName = useMemo(() => getClassName({
+        baseClassName: "af-divider",
+        className,
+        modifiers: classModifier?.split(" ").filter(Boolean) ?? [],
+    }), [className, classModifier]);
     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;

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

@@ -7,25 +7,9 @@ type CheckboxOption = Omit<CardCheckboxOptionProps, "name" | "type">;
 export type CardCheckboxProps = Omit<CardCheckboxOptionProps, "value" | "label" | "type" | "icon" | "description" | "subtitle" | "children"> & {
     type?: "vertical" | "horizontal";
     mode?: "text";
-    /**
-     * @deprecated Use `label` instead.
-     */
-    labelGroup?: string;
-    /**
-     * @deprecated Use `description` instead.
-     */
-    descriptionGroup?: string;
     label: ReactNode;
     description?: ReactNode;
-    /**
-     * @deprecated Use `required` instead.
-     */
-    isRequired?: boolean;
     options: CheckboxOption[];
-    /**
-     * @deprecated  Use `message` and messageType instead.
-     */
-    error?: string;
     containerProps?: GridContainerProps<"fieldset">;
 } & Partial<ItemMessageProps>;
 type CardCheckboxCommonProps = CardCheckboxProps & {
@@ -34,7 +18,7 @@ type CardCheckboxCommonProps = CardCheckboxProps & {
     ItemMessageComponent: ComponentType<ItemMessageProps>;
 };
 export declare const CardCheckboxCommon: {
-    ({ className, labelGroup, descriptionGroup, label, description, isRequired, required, options, type, error, name, id, onChange, CardCheckboxItemComponent, CheckboxTextComponent, ItemMessageComponent, message, messageType, containerProps, mode, ...inputProps }: CardCheckboxCommonProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, label, description, required, options, type, name, id, onChange, CardCheckboxItemComponent, CheckboxTextComponent, ItemMessageComponent, message, messageType, containerProps, mode, ...inputProps }: CardCheckboxCommonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/prospect-client/Form/Checkbox/CardCheckbox/CardCheckboxCommon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, } from "react";
-export const CardCheckboxCommon = ({ className, labelGroup, descriptionGroup, label, description, isRequired, required, options, type = "vertical", error, name, id, onChange = () => { }, CardCheckboxItemComponent, CheckboxTextComponent, ItemMessageComponent, message, messageType = "error", containerProps, mode, ...inputProps }) => {
+export const CardCheckboxCommon = ({ className, label, description, required, options, type = "vertical", name, id, onChange = () => { }, CardCheckboxItemComponent, CheckboxTextComponent, ItemMessageComponent, message, messageType = "error", containerProps, mode, ...inputProps }) => {
     const generatedId = useId();
     const cardCheckboxId = id || generatedId;
     const messageId = `${cardCheckboxId}-error`;
@@ -23,10 +23,10 @@ export const CardCheckboxCommon = ({ className, labelGroup, descriptionGroup, la
         }
         onChange(event);
     };
-    const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
-    return (_jsxs("fieldset", { className: ["af-card-checkbox", className].filter(Boolean).join(" "), id: cardCheckboxId, ...containerProps, children: [_jsxs("legend", { className: "af-card-checkbox__legend", children: [_jsxs("p", { className: "af-card-checkbox__label", children: [label, labelGroup, required || isRequired ? _jsx("span", { "aria-hidden": true, children: "*" }) : null] }), description || descriptionGroup ? (_jsxs("p", { className: "af-card-checkbox__description", children: [description, descriptionGroup] })) : null] }), _jsx("div", { className: [
+    const hasError = Boolean(message) && messageType === "error";
+    return (_jsxs("fieldset", { className: ["af-card-checkbox", className].filter(Boolean).join(" "), id: cardCheckboxId, ...containerProps, children: [_jsxs("legend", { className: "af-card-checkbox__legend", children: [_jsxs("p", { className: "af-card-checkbox__label", children: [label, required ? _jsx("span", { "aria-hidden": true, children: "*" }) : null] }), description ? (_jsx("p", { className: "af-card-checkbox__description", children: description })) : null] }), _jsx("div", { className: [
                     "af-card-checkbox__options",
                     `af-card-checkbox__options--${type}`,
-                ].join(" "), ref: cardCheckboxOptionsRef, children: options.map((cardCheckboxItemProps) => (_jsx(CheckboxItemComponent, { id: `${cardCheckboxId}-${cardCheckboxItemProps.value}`, required: required, onChange: handleChange, ...inputProps, ...cardCheckboxItemProps, type: type, "aria-invalid": hasError || undefined, "aria-errormessage": hasError ? messageId : undefined, name: name }, `${name ?? cardCheckboxId}-${cardCheckboxItemProps.label}`))) }), _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
+                ].join(" "), ref: cardCheckboxOptionsRef, children: options.map((cardCheckboxItemProps) => (_jsx(CheckboxItemComponent, { id: `${cardCheckboxId}-${cardCheckboxItemProps.value}`, required: required, onChange: handleChange, ...inputProps, ...cardCheckboxItemProps, type: type, "aria-invalid": hasError || undefined, "aria-errormessage": hasError ? messageId : undefined, name: name }, `${name ?? cardCheckboxId}-${cardCheckboxItemProps.label}`))) }), _jsx(ItemMessageComponent, { id: messageId, message: message, messageType: messageType })] }));
 };
 CardCheckboxCommon.displayName = "CardCheckboxCommon";

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

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

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

@@ -2,10 +2,6 @@ import { type ComponentProps } from "react";
 export type CheckboxProps = {
     /** @deprecated Use `aria-errormessage` instead */
     errorId?: string;
-    /** @deprecated Use `aria-invalid` instead */
-    hasError?: boolean;
+    variant?: "error" | "warning";
 } & Omit<ComponentProps<"input">, "disabled" | "type">;
-export declare const Checkbox: {
-    ({ errorId, hasError, className, ...inputProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const Checkbox: ({ errorId, variant, className, ref, ...inputProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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";
+import { getClassName } from "../../../utilities/getClassName";
+export const Checkbox = ({ errorId, variant, className, ref, ...inputProps }) => (_jsx("input", { "aria-errormessage": errorId, "aria-invalid": variant === "error" || undefined, ...inputProps, className: getClassName({
+        baseClassName: "af-checkbox",
+        modifiers: [variant],
+        className,
+    }), ref: ref, type: "checkbox" }));

package/dist/prospect-client/Form/Checkbox/CheckboxText/CheckboxTextCommon.d.ts

@@ -4,10 +4,6 @@ import type { ItemMessageProps } from "../../ItemMessage/ItemMessageCommon";
 import type { CheckboxProps } from "../Checkbox/CheckboxCommon";
 export type CheckboxTextProps = {
     label: string | ReactNode;
-    /**
-     * @deprecated Use `message` and messageType instead.
-     */
-    errorMessage?: string;
     containerProps?: GridContainerProps;
 } & Omit<CheckboxProps, "aria-errormessage" | "aria-invalid"> & Partial<ItemMessageProps>;
 export type CheckboxTextCommonProps = CheckboxTextProps & {
@@ -15,7 +11,7 @@ export type CheckboxTextCommonProps = CheckboxTextProps & {
     ItemMessageComponent: ComponentType<ItemMessageProps>;
 };
 declare const CheckboxTextCommon: {
-    ({ label, errorMessage, id, message, messageType, CheckboxComponent, ItemMessageComponent, containerProps, ...inputProps }: CheckboxTextCommonProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, id, message, messageType, CheckboxComponent, ItemMessageComponent, containerProps, ...inputProps }: CheckboxTextCommonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { CheckboxTextCommon };

package/dist/prospect-client/Form/Checkbox/CheckboxText/CheckboxTextCommon.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-const CheckboxTextCommon = ({ label, errorMessage, id, message, messageType, CheckboxComponent, ItemMessageComponent, containerProps, ...inputProps }) => {
+const CheckboxTextCommon = ({ label, id, message, messageType = "error", CheckboxComponent, ItemMessageComponent, containerProps, ...inputProps }) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const messageId = `${inputId}-error`;
-    const hasError = (Boolean(message) && messageType === "error") || Boolean(errorMessage);
-    return (_jsxs("div", { className: "af-checkbox-text", ...containerProps, children: [_jsxs("label", { htmlFor: inputId, children: [_jsx(CheckboxComponent, { id: inputId, ...inputProps, "aria-errormessage": hasError ? messageId : undefined, "aria-invalid": hasError || undefined }), _jsx("span", { className: "af-checkbox-text__label-content", children: label })] }), _jsx(ItemMessageComponent, { message: message || errorMessage, id: messageId, messageType: messageType })] }));
+    const hasError = Boolean(message) && messageType === "error";
+    return (_jsxs("div", { className: "af-checkbox-text", ...containerProps, children: [_jsxs("label", { htmlFor: inputId, children: [_jsx(CheckboxComponent, { id: inputId, ...inputProps, "aria-errormessage": hasError ? messageId : undefined, "aria-invalid": hasError || undefined }), _jsx("span", { className: "af-checkbox-text__label-content", children: label })] }), _jsx(ItemMessageComponent, { message: message, id: messageId, messageType: messageType })] }));
 };
 CheckboxTextCommon.displayName = "CheckboxTextCommon";
 export { CheckboxTextCommon };